vue字母加数字组件

效果图：

组件代码：

<div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</template>

import DrawButton from '../../../components/DrawButton'

export default {

name:'DrawSecond',

components: {

DrawButton

data(){

return{

value: [],

show:true,

showall:true,

shownumber:'',

showfront:'',

showafter:'',

count:0

}

watch:{

'shownumber':function(newval){

console.log('监听结果为'+newval)

this.$emit('selectnumber',newval);

}

methods:{

selectnumber(){

if(this.shownumber.length==0){

this.$warning({

title: '提示',

content: '证件号码不能为空',

okText:'确定'

});

}else{

this.$emit('selectnumber',this.shownumber);

this.$emit('hide');

}

hidedraw(){

this.$emit('hide');

deletenumber(){

console.log(this.shownumber)

let front='';

let after='';

let doc = this.$refs['number'];//获取光标位置

console.log(doc.selectionStart)

doc.setSelectionRange(this.count,this.count);

front=this.shownumber.substring(0,doc.selectionStart);

after=this.shownumber.substring(doc.selectionStart);

front = front.substr(0,front.length-1);

console.log(front)

console.log(after)

this.shownumber = front + after;

// this.shownumber = this.shownumber.substr(0,this.shownumber.length-1);

console.log(this.shownumber);

showtext(text){

let doc = this.$refs['number'];//获取光标位置

doc.setSelectionRange(this.count,this.count);

console.log('count='+this.count)

this.showfront=this.shownumber.substring(0,doc.selectionStart);

this.count = doc.selectionStart+1;

console.log('count='+this.count)

this.showafter=this.shownumber.substring(doc.selectionStart);

if(text == '空格'){

this.showfront+=' ';

}

else{

this.showfront+=text

}

console.log('组合值='+this.showfront);

console.log('组合值='+this.showafter);

this.shownumber = this.showfront+this.showafter;

changefront(){

this.$refs.number.focus();

let doc = this.$refs['number'];

doc.setSelectionRange(doc.selectionStart-1,doc.selectionStart-1);

this.count = doc.selectionStart;

changeafter(){

this.$refs.number.focus();

let doc = this.$refs['number'];

doc.setSelectionRange(doc.selectionStart+1,doc.selectionStart+1);

this.count = doc.selectionStart;

}

</script>

<style>

.img{

background-size: 60px 44px;

background-repeat: no-repeat;

margin-top: -18px;

margin-left: -59px;

}

.number{

width: 835px;

height: 65px;

border-radius: 4px;

background-color: rgba(222, 222, 222, 1);

/* border: 1px solid rgba(85, 85, 85, 1); */

}

.head-message{

font-size: 30px;

text-align: left;

font-family: STHeitiSC-Medium;

}

.head-label{

margin-left: 56px;

margin-top: 4px !important;

width: 150px;

height: 98px;

line-height: 98px;

display: inline-block;

color: rgba(51, 51, 51, 1);

}

.show-number{

color: rgba(51, 51, 51, 1);

font-size: 30px;

text-align: left;

font-family: STHeitiSC-Medium;

}

.finish{

margin-left: 13px;

}

.finish-01{

margin-left: 36px;

margin-top: 15px;

}

.finish-02{

margin-left: 11px;

margin-top: 15px;

}

.secondcolumn-01{

margin-left: 36px;

margin-top: 15px;

}

.secondcolumn{

margin-left: 11px;

margin-top: 15px;

}

.head-button{

width: 106px;

height: 67px;

border-radius: 4px;

background:linear-gradient(to bottom,#646467,#4D4E53);

background-color: #ffffff;

opacity: 1;

box-shadow: inset 0px 0px 0px 0px rgba(255, 255, 255, 0.5);

}

.head-button-message{

width: 60px;

height: 30px;

color: rgba(223, 223, 223, 1);

}

.body-message{

width: 35px;

height: 36px;

color: rgba(228, 228, 228, 1);

font-size: 36px;

text-align: center;

font-family: STHeitiSC-Medium;

}

</style>

需要的另一个组件代码：

<div>

</div>

</template>

export default {

name: "DrawButton",

data(){

return {

//按钮文本

text: this.btnData.text,

btnWidth: this.btnData.btnWidth,

btnHeight: this.btnData.btnHeight

}

props: {

btnData: {

types: Array,

default() {

return {

text: '',

btnWidth:'',

btnHeight:''

}

methods: {

click(text){

this.IsDisabled = false;

//这里是激活父组件的事件，因为子组件是不会冒泡到父组件上的，必须手动调用$emit

//相对应父组件要在调用该组件的时候，将其挂载到上面

this.$emit("click")

}

</script>

.DrawButton {

text-align: center;

color: rgba(51, 51, 51, 1);

font-family: STHeitiSC-Medium;

border-radius: 4px;

opacity: 1;

letter-spacing: 1px;

font-size: 36px;

letter-spacing: 2px;

background-color: rgba(255, 255, 255, 1);

box-shadow: 0px 2px 0px 0px rgba(135, 138, 145, 1);

}

</style>