大家好!我叫戴向天
QQ羣:602504799
如若有不理解的,可加QQ羣進行諮詢瞭解
組件內容
<template>
<div class="select">
<div tabindex="1" @blur="blur">{{value}}</div>
<ul>
<li v-for="(item,key) in options" :key="key" @mousemove="txt = item">{{item}}</li>
</ul>
</div>
</template>
<script>
export default {
props: {
value: {
type: String,
default: ""
},
options: {
type: Array,
default: () => []
}
},
data() {
return {
txt: ""
};
},
methods: {
blur() {
if (this.txt !== this.value) {
this.$emit("change", this.txt);
}
this.$emit("input", this.txt);
}
}
};
</script>
CSS(LESS)
.select {
display: flex;
flex-direction: column;
border: 0.01rem solid #666;
height: .4rem;
&:focus-within{
border: 0.01rem solid #409eff;
}
>div {
height: .4rem;
flex-shrink: 0;
padding: 0 .4rem 0 .1rem;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
outline: none;
font-size: .14rem;
border-radius: .03rem;
min-width: .8rem;
&::after {
content: '';
border: 0.08rem solid #666;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
position: absolute;
right: .1rem;
top: calc(50% - .03rem);
}
&:focus{
border-color: #409eff;
&::after{
content: '';
border: 0.08rem solid #409eff;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
position: absolute;
right: .1rem;
top: calc(50% - .12rem);
}
& + ul {
display: block;
}
}
}
>ul {
display: none;
margin-top:.1rem;
background-color: #fff;
border: 0.01rem solid #666;
width: 100%;
cursor: pointer;
border-radius: .03rem;
z-index: 9;
&:hover{
border: 0.01rem solid #409eff;
}
>li{
height: .3rem;
font-size: .14rem;
padding: 0 .1rem;
display: flex;
align-items: center;
&:hover{
background-color: #409eff;
color: #fff;
}
}
}
}
使用方式:
<d-select v-model="value" :options="options"/>
data(){
return {
value: '',
options: [
‘click’,'change','input','load','touchstart','touchmove','touchend'
]
}
}
實現效果: