63 lines
1.5 KiB
JavaScript
63 lines
1.5 KiB
JavaScript
/**
|
|
* 顶部header
|
|
*/
|
|
Vue.component("screen-select", {
|
|
template: `
|
|
<div class="select-max" @mouseleave="hideSelectOption">
|
|
<div class="select-input" v-if="type==0">
|
|
<input type="text" :value="value" @click="clickSelectInput" placeholder="请选择" readonly>
|
|
</div>
|
|
<div class="select-input-two" v-if="type==1">
|
|
<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
|
|
},
|
|
def:{
|
|
type:Object
|
|
},
|
|
type:{
|
|
type:Number,
|
|
default:0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
show:false,
|
|
value:''
|
|
}
|
|
},
|
|
mounted(){
|
|
if(this.def){
|
|
this.value = this.def.text
|
|
}
|
|
},
|
|
methods: {
|
|
clickSelectInput(){
|
|
this.show = true
|
|
},
|
|
clickSelectOption(item){
|
|
this.value = item.text
|
|
this.$emit('option',item);
|
|
this.show = false
|
|
},
|
|
hideSelectOption(){
|
|
this.show = false
|
|
}
|
|
},
|
|
watch:{
|
|
def:function (n,o) {
|
|
this.value = n.text
|
|
}
|
|
}
|
|
|
|
})
|