Vue下拉選擇框Select組件使用詳解(二)

更新時(shí)間：2022年03月04日 11:30:33 作者：theMuseCatcher

這篇文章主要為大家詳細(xì)介紹了Vue下拉選擇框Select組件的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vue下拉選擇框Select組件的使用方法，供大家參考，具體內(nèi)容如下

效果圖如下：

下拉組件寬度可自定義設(shè)置以下屬性：

①下拉組件寬度width屬性，默認(rèn)寬度290

②placeholder屬性

③是否禁用下拉的disabled屬性

已預(yù)設(shè)下拉列表最多8條，超過時(shí)滾動顯示，具體可自定義調(diào)整，如果下拉選項(xiàng)過長省略號顯示，鼠標(biāo)懸浮顯示全稱，由于業(yè)務(wù)需求，設(shè)置mode屬性，區(qū)別默認(rèn)name和value 與 dictKey和dictVal

①創(chuàng)建組件Select.vue

<template>
? <div class="m-select-wrap f14" :style="`width: ${width}px;`">
? ? <input
? ? ? :class="['u-select-input', { 'disabled': disabled }]"
? ? ? :style="`width: ${width - 32}px;`"
? ? ? type="text"
? ? ? :disabled="disabled"
? ? ? :placeholder="placeholder"
? ? ? readonly
? ? ? :title="selectName"
? ? ? @click="openSelect"
? ? ? @blur="onBlur"
? ? ? v-model="selectName" />
? ? <div :class="['triangle-down', { 'rotate': rotate, 'disabled': disabled }]" @click="openSelect"></div>
? ? <div :class="['m-options-panel', showOptions ? 'show': 'hidden']" :style="`height: ${selectData.length * 40}px; max-height: 320px; width: ${width - 2}px;`">
? ? ? <p class="u-option" :title="mode==='region' ? item.dictVal : item.name" @mousedown="getValue(mode==='region' ? item.dictVal : item.name, mode==='region' ? item.dictKey : item.value)" v-for="(item, index) in selectData" :key="index">
? ? ? ? {{ mode==='region' ? item.dictVal : item.name }}
? ? ? </p>
? ? </div>
? </div>
</template>
<script>
export default {
? name: 'Select',
? props: {
? ? selectData: {
? ? ? type: Array,
? ? ? default: () => {
? ? ? ? return []
? ? ? }
? ? },
? ? selValue: { // 將該prop值作為selV的初始值
? ? ? default: undefined
? ? },
? ? placeholder: {
? ? ? type: String,
? ? ? default: '請選擇'
? ? },
? ? width: { // 下拉框?qū)挾?
? ? ? type: Number,
? ? ? default: 290
? ? },
? ? disabled: {
? ? ? type: Boolean,
? ? ? default: false
? ? },
? ? mode: {
? ? ? type: String,
? ? ? default: 'default'
? ? }
? },
? computed: {
? ? selectName () {
? ? ? let selName
? ? ? this.selectData.forEach(item => {
? ? ? ? if (this.mode === 'region') {
? ? ? ? ? if (item.dictKey === this.selectValue) {
? ? ? ? ? ? selName = item.dictVal
? ? ? ? ? }
? ? ? ? } else {
? ? ? ? ? if (item.value === this.selectValue) {
? ? ? ? ? ? selName = item.name
? ? ? ? ? }
? ? ? ? }
? ? ? })
? ? ? return selName
? ? },
? ? selectValue: {
? ? ? get () {
? ? ? ? return this.selV
? ? ? },
? ? ? set (newVal) {
? ? ? ? this.selV = newVal
? ? ? }
? ? }
? },
? data () {
? ? return {
? ? ? selV: this.selValue,
? ? ? rotate: false,
? ? ? showOptions: false
? ? }
? },
? methods: {
? ? openSelect () {
? ? ? this.showOptions = !this.showOptions
? ? ? this.rotate = !this.rotate
? ? },
? ? getValue (name, value) {
? ? ? this.selectValue = value
? ? ? this.$emit('getValue', name, value)
? ? },
? ? onBlur () {
? ? ? this.showOptions = false
? ? ? this.rotate = false
? ? }
? }
}
</script>
<style lang="less" scoped>
.m-select-wrap {
? display: inline-block;
? width: 290px;
? height: 40px;
? line-height: 40px;
? position: relative;
? font-weight: 400;
? color: #444444;
? .u-select-input {
? ? padding-left: 10px;
? ? width: 258px;
? ? height: 38px;
? ? border: 1px solid #d7d7d7;
? ? cursor: pointer;
? ? padding-right: 20px;
? ? overflow: hidden;
? ? text-overflow: ellipsis;
? ? white-space: nowrap;
? ? &:focus {
? ? ? border: 1px solid @mainColor;
? ? }
? }
? .triangle-down { // 下三角
? ? width: 12px;
? ? height: 7px;
? ? font-size: 0;
? ? background: url('~@/assets/images/triangle.png') no-repeat center top;
? ? position: absolute;
? ? top: 17px;
? ? right: 10px;
? ? transition: all 0.3s ease-in-out;
? ? cursor: pointer;
? }
? .rotate {
? ? transform: rotate(180deg);
? ? -webkit-transform: rotate(180deg);
? }
? .disabled {
? ? cursor: default;
? ? pointer-events: none;
? }
? .m-options-panel {
? ? position: absolute;
? ? overflow-y: auto;
? ? background: #FFFFFF;
? ? width: 288px;
? ? border: 1px solid @mainColor;
? ? top: 40px;
? ? left: 0;
? ? color: #444;
? ? .u-option {
? ? ? padding: 0 20px;
? ? ? overflow: hidden;
? ? ? text-overflow: ellipsis;
? ? ? white-space: nowrap; // 溢出顯示省略號
? ? ? cursor: pointer;
? ? }
? ? .u-option:hover {
? ? ? background: #EEEEEE;
? ? }
? }
? .show {
? ? display: block;
? }
? .hidden {
? ? display: none;
? }
}
</style>

②在要使用的頁面中引用

<Select
? ? ? :selectData="provinceData"
? ? ? :selValue="address.province"
? ? ? :width="143"
? ? ? placeholder="請選擇省"
? ? ? @getValue="getProvinceCode" />
import Select from '@/components/Select'
components: {
? ? Select
},
data () {
? ? return {
? ? ? provinceData: [],
? ? ? ? address: {
? ? ? ? ? province: ''
? ? ? ? }
? ? }
}
methods: {
? getProvinceCode (name, code) {
? ? ? console.log('province:', name, code)
? ? ? this.address.province = code
? }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: