zy-pda/components/seiminPicker/seiminPicker.vue

<template>
  <view class="seiminPicker">
    <view class="picker-modal" v-if="showPicker" @click="_close"></view>
    <view class="picker-content" :style="{transform:  showPicker ? 'translateY(0)' : 'translateY(100%)'}">
      <view class="picker-header">
        <view class="packer-title" :style="{color:titleColor, fontSize:titleFontSize}" v-html="title"></view>
      </view>
      <picker-view indicator-style="height: 90rpx;" class="picker-view" :value="pickerValue" @change="changePicker">
        <picker-view-column>
          <view class="picker-item" :style="{fontSize:itemFontSize}" v-for="(item, index) in pickerList" :key="index">
            {{item.label}}
          </view>
        </picker-view-column>
      </picker-view>
      <view class="picker-confirm"
        :style="{color: confirmColor, fontSize: confirmFontSize, fontWeight:confirmFontWeight}"
        @click="__confirmPicker">确定</view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'seiminPicker',
    props: {
      title: { //标题文字
        type: String,
        default: ""
      },
      titleColor: { //标题文字颜色
        type: String,
        default: ""
      },
      titleFontSize: { //标题文字大小
        type: String,
        default: '26rpx'
      },
      confirmColor: { // 确定按钮颜色
        type: String,
        default: ''
      },
      confirmFontSize: { //确定文字大小
        type: String,
        default: '28rpx'
      },
      confirmFontWeight: { //确定按钮的字体粗细
        type: String,
        default: ''
      },
      itemFontSize: { //选项文字大小
        type: String,
        default: '28rpx'
      },
      pickerList: { //数据
        type: Array
      },
    },
    data() {
      return {
        showPicker: false,
        pickerValue: [0],
      }
    },
    methods: {
      _close() {
        this.showPicker = false
      },
      _open() {
        this.showPicker = true
      },
      //确定
      __confirmPicker() {
        this.showPicker = false
        let checkedObj = this.pickerList[this.pickerValue]
        this.$emit('onConfirm', checkedObj)
      },
      //滑动picker
      changePicker(e) {
        this.pickerValue = e.detail.value
      },
    }
  }
</script>

<style lang="scss" scoped>
  .picker-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;
  }

  .picker-content {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    background-color: #F9FAFB;
    transition: all .3s;
  }

  .picker-header {
    @include flex(center, center);
    padding: 20rpx;
    border-bottom: 1px solid #E5E9ED;
    background-color: #fff;
  }

  .picker-confirm {
    margin-top: 10rpx;
    border-top: 1px solid #E5E9ED;
    height: 90rpx;
    @include flex(center, center);
    background-color: #fff;
  }

  .packer-title {
    text-align: center;
  }

  .picker-view {
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    height: 490rpx;
    background-color: rgba(255, 255, 255, 1);
  }

  .uni-picker-view-mask {
    border-bottom: 1px solid #E5E9ED;
  }

  .picker-item {
    text-align: center;
    line-height: 90rpx;
    text-overflow: ellipsis;
  }
</style>