Vue下拉選擇框Select組件使用詳解(二)
本文實(shí)例為大家分享了Vue下拉選擇框Select組件的使用方法,供大家參考,具體內(nèi)容如下
效果圖如下:
下拉組件寬度可自定義設(shè)置以下屬性:
①下拉組件寬度width屬性,默認(rèn)寬度290
②placeholder屬性
③是否禁用下拉的disabled屬性
已預(yù)設(shè)下拉列表最多8條,超過(guò)時(shí)滾動(dòng)顯示,具體可自定義調(diào)整,如果下拉選項(xiàng)過(guò)長(zhǎng)省略號(hào)顯示,鼠標(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: '請(qǐng)選擇' ? ? }, ? ? 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; // 溢出顯示省略號(hào) ? ? ? cursor: pointer; ? ? } ? ? .u-option:hover { ? ? ? background: #EEEEEE; ? ? } ? } ? .show { ? ? display: block; ? } ? .hidden { ? ? display: none; ? } } </style>
②在要使用的頁(yè)面中引用
<Select ? ? ? :selectData="provinceData" ? ? ? :selValue="address.province" ? ? ? :width="143" ? ? ? placeholder="請(qǐng)選擇省" ? ? ? @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 ? } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目tween方法實(shí)現(xiàn)返回頂部的示例代碼
這篇文章主要介紹了vue項(xiàng)目tween方法實(shí)現(xiàn)返回頂部,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03Vue 實(shí)現(xiàn)穿梭框功能的詳細(xì)代碼
本文給大家介紹Vue 實(shí)現(xiàn)穿梭框功能,代碼分為css,html和js代碼,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2021-10-10vue3+ElementPlus使用lang="ts"報(bào)Unexpected?token錯(cuò)誤的解決
最近開(kāi)發(fā)中遇到了些問(wèn)題,跟大家分享下,這篇文章主要給大家介紹了關(guān)于vue3+ElementPlus使用lang="ts"報(bào)Unexpected?token錯(cuò)誤的解決辦法,需要的朋友可以參考下2023-01-01在Vue中使用防抖與節(jié)流,及this指向的問(wèn)題
這篇文章主要介紹了在Vue中使用防抖與節(jié)流,及this指向的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-01-01詳解Vue 數(shù)據(jù)更新了但頁(yè)面沒(méi)有更新的 7 種情況匯總及延伸總結(jié)
這篇文章主要介紹了詳解Vue 數(shù)據(jù)更新了但頁(yè)面沒(méi)有更新的 7 種情況匯總及延伸總結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05Vue之解決Echarts組件使用ID不能復(fù)用的問(wèn)題
這篇文章主要介紹了Vue之解決Echarts組件使用ID不能復(fù)用的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue中使用vee-validator完成表單校驗(yàn)方案
vee-validator是一種基于vue模板的輕量級(jí)校驗(yàn)框架。本文主要討論的是vee-validator校驗(yàn)方案,感興趣的朋友跟隨小編一起看看吧2019-11-11Vue 實(shí)現(xiàn)v-for循環(huán)的時(shí)候更改 class的樣式名稱
這篇文章主要介紹了Vue 實(shí)現(xiàn)v-for循環(huán)的時(shí)候更改 class的樣式名稱,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07