64 lines
1.5 KiB
Vue
64 lines
1.5 KiB
Vue
<template>
|
|
<div>
|
|
<el-icon class="printIcon" v-if="type=='info'" size="18" @click="open"><component :is="'sc-icon-scan'" /></el-icon>
|
|
<el-button v-else type="primary" @click="open" style="margin-left: 10px;">扫码添加</el-button>
|
|
<el-dialog
|
|
title="扫描二维码"
|
|
v-model="visible"
|
|
destroy-on-close
|
|
>
|
|
<el-input
|
|
ref="codeInput"
|
|
v-model="codeText"
|
|
clearable
|
|
@change="codeTextChange"
|
|
></el-input>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props:{
|
|
type:{
|
|
type:String,
|
|
default:''
|
|
}
|
|
},
|
|
data(){
|
|
return{
|
|
visible:false,
|
|
codeText:''
|
|
}
|
|
},
|
|
methods:{
|
|
open(){
|
|
this.codeText = '';
|
|
this.visible = true;
|
|
setTimeout(() => {
|
|
this.$refs.codeInput.focus();
|
|
}, 200);
|
|
return this;
|
|
},
|
|
codeTextChange(){
|
|
console.log('this.codeText',this.codeText);
|
|
this.$emit('closed',this.codeText);
|
|
this.closed();
|
|
},
|
|
closed(){
|
|
this.visible = false;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.printIcon{
|
|
width: 38px;
|
|
height: 58px;
|
|
padding: 0 10px;
|
|
font-size: 19px;
|
|
color: rgb(145,149,162);
|
|
&:hover{
|
|
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
}
|
|
}
|
|
</style> |