54 lines
1.2 KiB
JavaScript
54 lines
1.2 KiB
JavaScript
|
import Vue from 'vue'
|
||
|
|
Vue.component("screen-select", {
|
||
|
|
template: `
|
||
|
|
<div class="select-max" @mouseleave="hideSelectOption">
|
||
|
|
<div class="select-input">
|
||
|
|
<input type="text" :value="value" @click="clickSelectInput" placeholder="请选择" readonly>
|
||
|
|
</div>
|
||
|
|
<el-collapse-transition>
|
||
|
|
<ul class="select-option" v-show="show">
|
||
|
|
<li v-for="item in data" @click="clickSelectOption(item)">{{item.text}}</li>
|
||
|
|
</ul>
|
||
|
|
</el-collapse-transition>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
props: {
|
||
|
|
data:{
|
||
|
|
type:Array
|
||
|
|
},
|
||
|
|
val:{
|
||
|
|
type:[String,Number]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
show:false,
|
||
|
|
value:''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted(){
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
clickSelectInput(){
|
||
|
|
this.show = true
|
||
|
|
},
|
||
|
|
clickSelectOption(item){
|
||
|
|
this.value = item.text
|
||
|
|
this.$emit('option',item);
|
||
|
|
this.show = false
|
||
|
|
},
|
||
|
|
hideSelectOption(){
|
||
|
|
this.show = false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch:{
|
||
|
|
val:{
|
||
|
|
hander(){
|
||
|
|
this.value=this.val||'';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
})
|