Vue下拉選擇框Select組件使用詳解(一)
本文實(shí)例為大家分享了Vue下拉選擇框Select組件的使用方法,供大家參考,具體內(nèi)容如下
效果圖如下:
展開(kāi)圖如下:
①創(chuàng)建組件Select.vue:預(yù)設(shè)兩種主題色,亦可視情況進(jìn)行自定義修改樣式:
<template> ? <div class="m-select-wrap"> ? ? <input ? ? ? :class="['u-select-input f16', color === 'blue' ? '' : 'white-color']" ? ? ? type="text" ? ? ? readonly ? ? ? @click="openSelect" ? ? ? @blur="onBlur" ? ? ? v-model="selectName" /> ? ? <div :class="['triangle-down', { 'rotate': rotate }]" @click="openSelect"></div> ? ? <div :class="['m-options-panel f16', showOptions ? 'show': 'hidden']" :style="`height: ${selectData.length * 40}px;`"> ? ? ? <p class="u-option" @mousedown="getValue(item.name, item.value, index)" v-for="(item, index) in selectData" :key="index"> ? ? ? ? {{ item.name }} ? ? ? </p> ? ? </div> ? </div> </template> <script> export default { ? name: 'Select', ? props: { ? ? selectData: { ? ? ? type: Array, ? ? ? default: () => { ? ? ? ? return [] ? ? ? } ? ? }, ? ? // eslint-disable-next-line vue/require-prop-types ? ? selValue: { // 將該prop值作為selV的初始值 ? ? ? default: undefined ? ? }, ? ? color: { ? ? ? type: String, ? ? ? default: () => { ? ? ? ? return 'blue' ? ? ? } ? ? } ? }, ? computed: { ? ? selectName () { ? ? ? let selName ? ? ? this.selectData.forEach(item => { ? ? ? ? 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, index) { ? ? ? this.selectValue = value ? ? ? this.$emit('getValue', name, value, index) ? ? }, ? ? onBlur () { ? ? ? this.showOptions = false ? ? ? this.rotate = false ? ? } ? } } </script> <style lang="less" scoped> .m-select-wrap { ? width: 135px; ? height: 40px; ? line-height: 40px; ? position: relative; ? .u-select-input { ? ? width: 105px; ? ? background: #3A79EE; ? ? color: #FFFFFF; ? ? box-shadow: 0px 10px 20px 0px rgba(144, 119, 222, 0.2); ? ? border-radius: 20px; ? ? height: 40px; ? ? line-height: 40px; ? ? padding: 0 15px; ? ? cursor: pointer; ? ? border: none; ? } ? .white-color { ? ? background: #FFFFFF; ? ? color: #3A79EE; ? } ? .triangle-down { // 下三角樣式 ? ? width: 0; ? ? height: 0; ? ? border-left: 5px solid transparent; ? ? border-right: 5px solid transparent; ? ? border-top: 10px solid #333; ? ? position: absolute; ? ? top: 18px; ? ? right: 15px; ? ? transition: transform 0.3s ease-in-out; ? } ? .rotate { ? ? transform: rotate(180deg); ? } ? .m-options-panel { ? ? position: absolute; ? ? background: #FFFFFF; ? ? border-radius: 8px; ? ? width: 133px; ? ? border: 1px solid #E3E3E3; ? ? top: 46px; ? ? left: 0; ? ? color: #706F94; ? ? .u-option { ? ? ? padding: 0 15px; ? ? ? cursor: pointer; ? ? } ? ? .u-option:hover { ? ? ? color: #3A79EE; ? ? ? background: #EEF1FA; ? ? } ? } ? .show { ? ? display: block; ? } ? .hidden { ? ? display: none; ? } } </style>
②在要使用的頁(yè)面引入:
<Select ?? ?:selectData="selectData" ?? ?:selValue="selValue" ?? ?color="white" ?? ?@getValue="getValue" /> import Select from '@/components/Select' components: { ? ? Select } data () { ? ? return { ?? ? ? ?selectData: [ ?? ??? ?{ ?? ??? ??? ?name: '十一五', ?? ??? ??? ?value: 11 ?? ??? ?}, ?? ??? ?{ ?? ??? ??? ?name: '十二五', ?? ??? ??? ?value: 12 ?? ??? ?}, ?? ??? ?{ ?? ??? ??? ?name: '十三五', ?? ??? ??? ?value: 13 ?? ??? ?}, ?? ??? ? ?? ? ? ?], ?? ? ? ?selValue: '' ? ? ?} } created () { ?? ?// 初始化下拉框 ?? ?this.selValue = this.selectData[0].value } methods: { ?? ?getValue (name, value, index) { ?? ? ? ? ?console.log('item:', name, value, index) ?? ?} }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue 2.0學(xué)習(xí)筆記之使用$refs訪(fǎng)問(wèn)Vue中的DOM
這篇文章主要介紹了Vue 2.0學(xué)習(xí)筆記之使用$refs訪(fǎng)問(wèn)Vue中的DOM,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12vue 實(shí)現(xiàn)websocket發(fā)送消息并實(shí)時(shí)接收消息
這篇文章主要介紹了vue 實(shí)現(xiàn)websocket發(fā)送消息并實(shí)時(shí)接收消息,項(xiàng)目結(jié)合vue腳手架和websocket來(lái)搭建,本文給大家分享實(shí)例代碼,需要的朋友可以參考下2019-12-12vue中v-text / v-html使用實(shí)例代碼詳解
這篇文章主要介紹了vue中v-text / v-html使用實(shí)例代碼詳解,非常不錯(cuò),代碼簡(jiǎn)單易懂,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04vue動(dòng)態(tài)綁定圖標(biāo)的完整步驟
動(dòng)態(tài)綁定是我們?nèi)粘i_(kāi)發(fā)中經(jīng)常遇到的一個(gè)需求,下面這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)綁定圖標(biāo)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-05-05實(shí)現(xiàn)一個(gè)Vue自定義指令懶加載的方法示例
這篇文章主要介紹了實(shí)現(xiàn)一個(gè)Vue自定義指令懶加載的方法示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06