Vue下拉选择框Select组件使用详解(一)

本文实例为大家分享了Vue下拉选择框Select组件的使用方法,供大家参考,具体内容如下

效果图如下:

展开图如下:

①创建组件Select.vue:预设两种主题色,亦可视情况进行自定义修改样式:

<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>

②在要使用的页面引入:

<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)
    }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)

    最近工作中碰到一个需求,添加一条数据时,自动记住上次选择的下拉框的数据,刚开始觉得没思路,后来请教了项目组长,组长直接一句,这不很简单吧,直接用cookie,我:....... 好吧,都王的差不多了,于是经过一番百度实践,测试,总算是可以了,接下来就说说实践以及一些坑! 开发环境: webpack+vue+java后台 要实现这个小功能,其实只需要在vue中写相应的功能就可以了,并不需要在后台写什么,但是如果写的不正确,后台也是会报错的,代码如下: 先把这几个方法写上,删除的看需求决定需不需要:

  • ant design vue中日期选择框混合时间选择器的用法说明

    首先时间格式化用到moment方法,需要在页面中引入moment组件 import moment from 'moment' 结构代码: <a-date-picker style="width:100%" :getCalendarContainer="(triggerNode) => triggerNode.parentNode" format="YYYY-MM-DD HH:mm:ss" v-decorator="[ 'pu

  • vue省市区三联动下拉选择组件的实现

    我们曾经经常会遇到需要选择省市区的需求,我们可能是找一个插件来实现,但是有了vue之后,我们自己完全可以简单的实现这个效果,并封装为独立的.vue组件,便于日后使用 我们今天来实现一个 利用vuejs开发的 省市区三联动的组件  CitySelect.vue组件 首先来看一下最终的效果(没有写太多的样式...) 组件所需要的省市区的JSON数据(已经封装为commonjs模块了):    provinces.js 这个数据中有这样几个字段: code: 当前省市区的编码 sheng: 当前所在的

  • 在vue中实现点击选择框阻止弹出层消失的方法

    在vue项目中,选择性别是用的一个弹出层, <div class="sex" v-show="showed" transition='fade' @click="unshow"> <ul @click.stop="stophidden"> <li class="choice">选择</li> <li> <label>男</labe

  • vue Treeselect下拉树只能选择第N级元素实现代码

    今天在项目中遇到一个需求,就是vue下拉树只能选择第三级选项,为了解决这个问题,查阅了官方文档 https://vue-treeselect.js.org/#disable-item-selection 然后看到isDisabled属性可以禁止选择,具体实现代码如下: <treeselect :disable-branch-nodes="true" :normalizer="normalizer" v-model="formData.goodsTyp

  • vuejs实现下拉框菜单选择

    本文实例为大家分享了vuejs实现下拉框菜单选择的具体代码,供大家参考,具体内容如下 方法一: <script type="text/ecmascript-6"> export default { data() { return { isShowSelect: false, dataList: [ {key: -1, value: "请选择"}, {key: 0, value: "苹果"}, {key: 1, value: "

  • vue操作下拉选择器获取选择的数据的id方法

    实际项目中我们获取选择的数据的id:这时候 需要配合使用v-bind,才能获取到选择的那条数据的id值,其实就是id赋值给value属性 <template> <div> <select v-model="select" > <option v-for="(a,index) in arr" :key="index" :value="a.id">{{ a.name }}</o

  • Vue.js 2.0中select级联下拉框实例

    在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用.首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-router+Vuex的全家桶. select首先要区分单选和多选,v-model在select单选和多选上有区别.     select单选实例: <select v-model="fruit"> <option selected valu

  • Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue表单绑定(单选按钮,选择框(单选时,多选时)</title> </head> <body> <!-- 单选按钮 --> <div id="app"> <input type="radio" valu

  • vue select选择框数据变化监听方法

    1.使用v-model在select标签上进行数据双向绑定, 2.在data里边添加val:' ', 3.最后就是监听事件的写法,写在methods之外. 附加:(以下图片借鉴他人,非原创) 以上这篇vue select选择框数据变化监听方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

随机推荐