图标用的是font-awesome图标,解压后直接在index.css中引用即可
方法:
@import url("./font-awesome-4.7.0/css/font-awesome.css");
一:select.vue组件代码
<template>
<div style="display: inline-block;position: relative;">
<div class="vi-select" :class="{ 'is-disabled': disabled }" :disabled="disabled" :readonly="!isSearch"
@focus="inputFocus" @click="isoption" @blur="inputBlur">
<input :disabled="disabled" :class="{ 'is-disabled': disabled }" v-model="searchValue"
:placeholder="placeholder" type="text" class="vi-select-input" />
<div v-if="!isSearch" class="vi-select-icon">
<i :class="viicon"></i>
</div>
</div>
<div v-if="option" class="vi-option">
<div v-for="(item,index) in list" @click="select(item)" class="vi-option-item">
<span v-if="searchValue == item.label" style="font-weight: 600;color: #324A5D;">{{item.label}}</span>
<span v-else>{{item.label}}</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ViSelect',
componentName: 'ViSelect',
props: {
value: {
type: [Number, String],
required: true
},
list: {
type: Array,
default: () => ([])
},
placeholder: {
type: String
},
isSearch: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false,
},
},
data() {
return {
showSelect: false,
searchValue: "",
option: false,
viicon:'fa fa-angle-down'
}
},
watch: {
searchValue: {
immediate: true,
handler: function(newVal) {
this.$emit("searchChange", newVal);
}
},
value: {
immediate: true,
handler: function(newVal) {
let item = this.list.find(it => it.value == newVal)
if (item) this.searchValue = item.label
}
}
},
mounted() {
// 模拟外部点击,点击后下拉框消失
document.addEventListener('click', (e) => {
if (e.target.className !== 'vi-select') {
this.viicon = "fa fa-angle-down"
this.option = false
}
})
},
methods: {
inputFocus() {
this.showSelect = true
},
inputBlur() {
setTimeout(() => {
this.showSelect = false
}, 100)
},
select(item) {
this.searchValue = item.label;
this.$emit("input", item.value);
this.option = false
},
isoption() {
if (this.disabled != true) {
if (this.option == true) {
this.option = false
this.viicon = "fa fa-angle-down"
} else if (this.option == false) {
this.viicon = "fa fa-angle-up"
this.option = true
}
}
}
}
};
</script>
当然,如果需要点击后回调的还可以在input中加一个@change,内容更改后的组件。
学习链接:https://blog.csdn.net/lk_123456/article/details/120196318
二:index.css中加入选择框样式
.vi-select {
width: 238px;
border-radius: 10px;
border: 1px solid #DCDFE6;
-webkit-appearance: none;
background-color: #fff;
background-image: none;
color: #324A5D;
cursor: pointer;
display: inline-block;
position: relative;
}
.vi-select-input {
width: 210px;
padding: 9px 20px;
outline: none;
border: 0px;
border-radius: 10px;
-webkit-appearance: none;
background-color: #fff;
background-image: none;
box-sizing: border-box;
color: #606266;
display: inline-block;
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
pointer-events: none;
font-size: 13px;
overflow: hidden;
}
.vi-select:hover,
.vi-select:focus {
border: 1px solid #C0C4CC;
}
.vi-select-input.is-disabled {
background-color: #FAFAFA;
cursor: not-allowed;
}
.vi-select.is-disabled {
background-color: #FAFAFA;
cursor: not-allowed;
}
.vi-option {
background-color: #FFF;
border-radius: 10px;
font-size: 13px;
overflow: hidden;
padding: 10px 0px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
margin-top: 5px;
z-index: 2016;
position: absolute;
width: 100%;
}
.vi-option.active {
background-color: #5B6E7D;
}
.vi-option-item {
padding: 0px 20px;
height: 34px;
line-height: 34px;
cursor: pointer;
}
.vi-option-item:hover {
background-color: #F5F7FA;
}
.vi-select-icon {
float: right;
color: #C0C4CC;
font-size: 16px;
transition: transform .3s;
cursor: pointer;
height: 34px;
line-height: 34px;
text-align: center;
width: 28px;
pointer-events: none;
}
三:选择框组件使用示例
<vi-select v-model="gradeId" :list="gradeList" placeholder="请选择……"></vi-select>
<vi-select v-model="gradeId" :list="gradeList" disabled placeholder="请选择……"></vi-select>
data内容:
gradeId: '',
gradeList: [{
label: '张三',
value: '1'
},
{
label: '李四',
value: '2'
},
{
label: '王五',
value: '3'
},
],