uView 自定义带箭头的下拉框

今天小封装了一个 下拉框带箭头加颜色改变
算是对组件的扩展
主要是利用了 u-icon 和 u-select
配合 css transition

<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} 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![1684208842101.jpg](https://img.haomeiwen.com/i15697111/e191586cc1eec258.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![1684208887885.jpg](https://img.haomeiwen.com/i15697111/2a4df58305ce1ad0.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![1684208912827.jpg](https://img.haomeiwen.com/i15697111/9c8ef8f1c3648f8b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

      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;
}
</style>

已在uview 官方github 提issuse ，禁止用于个人博客等文章，需要请说明转发出处

image.png
1684208842101.jpg 1684208887885.jpg
1684208912827.jpg