106 lines
3.1 KiB
Vue
106 lines
3.1 KiB
Vue
<template>
|
|
<div id="mySelect">
|
|
<el-dropdown placement="bottom" @command="handleCommand" trigger="click">
|
|
<div class="my-select-input__wrap">
|
|
<input class="el-input__inner" type="text" v-model.lazy="selectVal" v-show="false">
|
|
<input class="el-input__inner mySelect" type="text" v-model.lazy="showLabel" readonly="readonly">
|
|
</div>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item
|
|
v-for="(item,index) in options"
|
|
:key="index"
|
|
:command="item">{{ item.label }}</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
<i class="el-icon-arrow-down myIcon"></i>
|
|
</el-dropdown>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "mySelect",
|
|
data() {
|
|
return {
|
|
showLabel: '',
|
|
activeLi: '',
|
|
active: false,
|
|
selectVal: ''
|
|
}
|
|
},
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
options: { // option
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
handleCommand (row) {
|
|
this.selectVal = row.label
|
|
this.showLabel = row.label
|
|
this.active = !this.active
|
|
this.$emit('update:value', this.selectVal);
|
|
}
|
|
},
|
|
watch: {
|
|
value: {
|
|
immediate: true,
|
|
handler (val) {
|
|
this.selectVal = val
|
|
for (let a = 0; a < this.options.length; a++) {
|
|
if (this.selectVal === this.options[a].value) {
|
|
this.showLabel = this.options[a].label
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
for (let a = 0; a < this.options.length; a++) {
|
|
if (this.selectVal === this.options[a].value) {
|
|
this.showLabel = this.options[a].label
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
#mySelect {
|
|
|
|
}
|
|
.active {
|
|
background-color: rgb(245, 247, 250);
|
|
}
|
|
.mySelect {
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
.mySelect:focus + .myIcon{
|
|
transform:rotate(180deg);
|
|
-ms-transform:rotate(180deg); /* IE 9 */
|
|
-moz-transform:rotate(180deg); /* Firefox */
|
|
-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
|
|
-o-transform:rotate(180deg);
|
|
}
|
|
.mySelect:focus-within + .myIcon{
|
|
transform:rotate(180deg);
|
|
-ms-transform:rotate(180deg); /* IE 9 */
|
|
-moz-transform:rotate(180deg); /* Firefox */
|
|
-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
|
|
-o-transform:rotate(180deg);
|
|
}
|
|
.myIcon {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
right: 7px;
|
|
top: calc(~'50% - 7px');
|
|
transition: all .3s;
|
|
}
|
|
</style>
|