VAVABUY/components/picker.vue

<template>
  <view class="iosBottom">
    <uni-popup ref="popupRef" type="bottom">
      <view class="popup_header">
        <trans class="cancel_btn" :_t="cancelText" @click="handleClose" />
        <trans class="confirm_btn" :_t="confirmText" @click="handleConfirm" />
      </view>
      <picker-view
        v-if="true"
        :indicator-style="indicatorStyle"
        :value="value"
        @change="handleChange"
        class="picker-view"
        mask-class="mask"
      >
        <picker-view-column>
          <view
            class="item"
            v-for="(item, index) in data"
            :key="`picker_${new Date().getTime}_${index}`"
          >
            <slot name="pickerItem" :item="item">
              {{ item[labelKey] }}
            </slot>
          </view>
        </picker-view-column>
      </picker-view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  labelKey: {
    type: String,
    default: "label",
  },
  valueKey: {
    type: String,
    default: "value",
  },
  modelValue: {
    type: String,
    default: "",
  },
  cancelText: {
    type: String,
    default: "取消",
  },
  confirmText: {
    type: String,
    default: "确认",
  },
});
const emit = defineEmits(["update:modelValue", "confirm"]);
const popupRef = ref(null);
const value = ref(null);
const indicatorStyle = `height: 50px;`;
let tempObject = {};

// methods
function handleChange(e) {
  const index = e.detail.value[0];
  tempObject = props.data[index];
}

function handleClose() {
  tempObject = {};
  popupRef.value.close();
}

function setValue(val) {
  value.value = [val];
  // _setValue([val]);
}

function openPopup() {
  setValue(
    props.data.findIndex((item) => item[props.valueKey] === props.modelValue)
  );
  !!popupRef.value && popupRef.value.open();
}

function handleConfirm() {
  const item = props.data.find(
    (obj) => obj[props.valueKey] == props.modelValue
  );
  // if (tempObject[props.valueKey]) {
  emit("update:modelValue", tempObject[props.valueKey] || item[props.valueKey]);
  emit("confirm", JSON.stringify(tempObject) != "{}" ? tempObject : item);
  // }
  handleClose();
}

defineExpose({
  open: openPopup,
});
</script>

<style lang="less" scoped>
@import url("@/style.less");

.picker-view {
  height: 500rpx;
  margin-top: 20rpx;
}
/deep/ .uni-picker-view-indicator {
  height: 68rpx !important;
}
/deep/ .uni-popup {
  z-index: 999999;
}

.item {
  height: 68rpx !important;
  line-height: 68rpx;
  text-align: center;
  color: var(--black);
  font-size: 24rpx;
  background: var(--bg);
}

.areacode_text {
  color: var(--light);
}

.popup_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--light);
  height: 82rpx;
  // border-bottom: 1px solid var(--borderColor);

  .btn {
    line-height: 82rpx;
    padding: 0 40rpx;
    font-size: 24rpx;
  }

  .cancel_btn {
    .btn();
    color: var(--black);
  }

  .confirm_btn {
    .btn();
    // color: #2979ff;
    color: var(--black);
  }
}

/deep/ .picker-view {
  margin-top: 0;

  .uni-picker-view-content {
    background: var(--light);
  }
}

.mask {
  background: var(--picker-mask);
  // background: red;
  background-position: top, bottom;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.picker-view {
  background-color: var(--light);
}

:deep(.uni-picker-view-indicator) {
  background-color: var(--light);
  opacity: 0.3;
}
</style>