新增一个带箭头且文本颜色改变的下拉选择器

Question

新增一个带箭头且文本颜色改变的下拉选择器

Opened this issue 2 years ago · 0 comments

这个功能解决了什么问题？

由于原选择框没有箭头和文本颜色改变。用 u-icon 展示箭头， text 利用 conmputed 属性展示选中文本或者placeholder属性

<template>
  <view>
    <view @tap.stop="openSelect" class="color-CCCCCC flex align-center">
      <text :class="{'isShow':show}" class="animate">{{ showLabel }}</text>
      <view :class="{'isShow':show}" style="padding-left:6rpx;padding-right:6rpx" >
        <u-icon class="arrow" :class="{'rotate180':show}" name="arrow-down-fill" size="12"></u-icon>
      </view>
    </view>
    <u-select
      mode="single-column"
      v-model="show"
      :list="list"
      :value-name="valueKey"
      :label-name="label"
      @confirm="confirm"
    />
  </view>
</template>

<script>
/**
 * @description: 带箭头且文本颜色改变的下拉选择器
 * @property {String} placeholder 提示语
 * @property {Array} list 数据列表
 * @property {String} label 自定义数据标签
 * @property {String} valueKey 自定义数据关键Id
 * @property {String/Number} value 当前选中的值
 * @property {bool} show 下拉框控制展示
 * @events {Function} openSelect 打开选择框
 * @events {Function} confirm 确认选择数据回调通知
 * @example:
 * <DropDownSelect
 * placeholder="选择医院"
 * :list="list"
 * valueKey="id"
 * @confirm="confirm"
 * />
 */

export default {
  name: "DropDownSelect",
  props: {
    placeholder:{
      type: String,
      default: '选择'
    },
    list:{
      type: Array,
      default : function(){
        return []
      }
    },
    label :{
      type: String,
      default : 'name'
    },
    valueKey:{
      type: String,
      default: 'value'
    }
  },
  data(){
    return {
      value:0,
      show:false
    }
  },
  computed: {
    //选择的Id值转化为标签
    showLabel() {
      const r = this.list.find(item => item[this.valueKey] === this.value)
      return r != undefined && r ? r[this.label] : this.placeholder
    },
  },
  methods: {
    //弹框打开
    openSelect(){
      this.show = true
    },
    //数据确认
    confirm([data]){
      this.value = data.value
      this.$emit('confirm', data.value)
    }
  },
}
</script>

<style scoped lang="scss">
.isShow {
  color: #2D8CF0 !important;
  *{
    color: #2D8CF0 !important;
  }
}
.rotate180{
  transform: rotate(180deg) scale(.7) !important;
}
.arrow{
  transform: rotate(0) scale(.7);
  transition: all 0.2s;
}
.animate{
  transition: all 0.3s;
}
.color-CCCCCC{
  color: #ccc;
}
.flex{
  display: flex;
}
.align-center{
 align-items: center;
}
</style>

你期望的 API 是怎样的？

整个新功能用于下拉选中的时候，展示选中的文本以及颜色改变。