封装uview2的picker组件(uniapp)

1.源码

复制代码
<template>
  <view>
    <view :class="[getPickerName ? '' : 'is-placeholder']" @click="onShowPicker">{{ getPickerName || placeholder }}</view>
    <u-picker v-if="showStatus" :show="show" :columns="columns" :key-name="keyName" @cancel="show = false" @confirm="onConfirm" />
  </view>
</template>

<script>
export default {
  name: 'HgPicker',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    columns: {
      type: Array,
      default() {
        return []
      }
    },
    keyName: {
      type: String,
      default: 'label'
    },
    placeholder: {
      type: [String, Number],
      default: '请选择'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: false,
      showStatus: true
    }
  },
  computed: {
    getPickerName() {
      if (this.columns.length) {
        for (let item of this.columns[0]) {
          if (item.id === this.value) {
            return item[this.keyName]
          }
        }
      }
      return ''
    }
  },
  methods: {
    onShowPicker() {
      if (!this.disabled) {
        this.show = true
      }
    },
    onConfirm({ indexs, value, values }) {
      this.$emit('input', value[0].id)
      this.$emit('change', value[0].id)
      this.$emit('changes', indexs[0])
      this.show = false
    },
    reload() {
      this.showStatus = false
      this.$nextTick(() => {
        this.showStatus = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.is-placeholder {
    color: #b5afaf;
}
</style>

2.使用方法

<hg-picker v-model="formModel.mode" :columns="capacityModeList" style="flex:1" />

相关推荐
heartmoonq5 分钟前
npm 包抽象封装并发布完整指南
前端
红衣信5 分钟前
深入剖析 hooks-todos 项目:前端开发的实用实践
前端·react.js·面试
今禾5 分钟前
深入理解 JavaScript 事件监听机制
前端·javascript
FogLetter5 分钟前
从饼干到Cookie:前端存储的身份密码本
前端·javascript
Spider_Man9 分钟前
🎭 React受控与非受控组件:一场"控制权"的争夺战
前端·react.js
Mintopia14 分钟前
LOD:图形世界里的 “看人下菜碟” 艺术
前端·javascript·计算机图形学
黑客老李16 分钟前
EDUSRC:智慧校园通用漏洞挖掘(涉校园解决方案商)
服务器·前端·网络·安全·web安全
Code季风17 分钟前
SQL关键字快速入门:CASE 实现条件逻辑
javascript·数据库·sql
拾光拾趣录18 分钟前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
Mintopia18 分钟前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js