Picker View

	开始） |

graph LR
  
UniPickerViewChangeEvent -- Extends --> UniCustomEvent&ltUniPickerViewChangeEventDetail&gt
  style UniCustomEvent&ltUniPickerViewChangeEventDetail&gt color:#42b983
  click UniCustomEvent&ltUniPickerViewChangeEventDetail&gt "https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent"

<template>
  <view>
    <page-head :title="data.title"></page-head>
    <view class="uni-padding-wrap">
      <view class="uni-title">
        日期：{{data.year}}年{{data.month}}月{{data.day}}日
      </view>
    </view>
    <picker-view class="picker-view" :value="data.value" @change="bindChange" :indicator-style="data.indicatorStyle"
      :indicator-class="data.indicatorClass" :mask-style="data.maskStyle" :mask-class="data.maskClass" :mask-top-style="data.maskTopStyle"
      :mask-bottom-style="data.maskBottomStyle">
      <picker-view-column class="picker-view-column">
        <view class="item" v-for="(item,index) in data.years" :key="index"><text class="text">{{item}}年</text></view>
      </picker-view-column>
      <picker-view-column class="picker-view-column">
        <view class="item" v-for="(item,index) in data.months" :key="index"><text class="text">{{item}}月</text>
        </view>
      </picker-view-column>
      <picker-view-column class="picker-view-column">
        <view class="item" v-for="(item,index) in data.days" :key="index"><text class="text">{{item}}日</text></view>
      </picker-view-column>
    </picker-view>
    <boolean-data :defaultValue="false" title="设置选择器中间选中框的样式" @change="setIndicatorStyle"></boolean-data>
    <!-- #ifdef WEB || MP-WEIXIN -->
    <boolean-data :defaultValue="false" title="设置选择器中间选中框的类名" @change="setIndicatorClass"></boolean-data>
    <boolean-data :defaultValue="false" title="设置蒙层的样式" @change="setMaskStyle"></boolean-data>
    <boolean-data :defaultValue="false" title="设置蒙层的类名" @change="setMaskClass"></boolean-data>
    <!-- #endif -->
    <!-- #ifdef APP -->
    <boolean-data :defaultValue="false" title="设置蒙层上半部分的样式" @change="setMaskTopStyle"></boolean-data>
    <boolean-data :defaultValue="false" title="设置蒙层下半部分的样式" @change="setMaskBottomStyle"></boolean-data>
    <!-- #endif -->
  </view>
</template>

<script setup lang="uts">
  import { state, setEventCallbackNum } from '@/store/index.uts'

  type DataType = {
    title: string;
    years: number[];
    year: number;
    months: number[];
    month: number;
    days: number[];
    day: number;
    value: number[];
    result: number[];
    indicatorStyle: string;
    indicatorClass: string;
    maskStyle: string;
    maskClass: string;
    maskTopStyle: string;
    maskBottomStyle: string;
  }

  // 初始化数据
  // 20180112 HBuilderX内测开始 :)
  const _years : number[] = []
  const _year = 2018
  const _months : number[] = []
  const _month : number = 1
  const _days : number[] = []
  const _day = 12
  for (let i = 2000; i <= _year; i++) {
    _years.push(i)
  }
  for (let i = 1; i <= 12; i++) {
    _months.push(i)
  }
  for (let i = 1; i <= 31; i++) {
    _days.push(i)
  }

  // 使用reactive避免ref数据在自动化测试中无法访问
  const data = reactive({
    title: 'picker-view',
    years: _years,
    year: _year,
    months: _months,
    month: _month,
    days: _days,
    day: _day,
    value: [_year - 2000, _month - 1, _day - 1],
    result: [],
    indicatorStyle: 'height: 50px;',
    indicatorClass: '',
    maskStyle: '',
    maskClass: '',
    maskTopStyle: '',
    maskBottomStyle: ''
  } as DataType)

  const setIndicatorStyle = (checked : boolean) => {
    const extraStyle = 'height: 50px;border:#ff5500 solid 1px;background:rgba(182, 179, 255, 0.4);';
    // #ifdef APP-HARMONY
    data.indicatorStyle = checked ? extraStyle : "height: 50px;border:none;background:transparent;";
    // #endif
    // #ifndef APP-HARMONY
    data.indicatorStyle = checked ? extraStyle : "height: 50px;";
    // #endif
  }

  const setIndicatorClass = (checked : boolean) => {
    data.indicatorClass = checked ? "indicator-test" : ""
  }

  const setMaskStyle = (checked : boolean) => {
    const extraMaskStyle = "background-image: linear-gradient(to bottom, #d8e5ff, rgba(216, 229, 255, 0));"
    data.maskStyle = checked ? extraMaskStyle : ""
  }

  const setMaskClass = (checked : boolean) => {
    data.maskClass = checked ? "mask-test" : ""
  }

  const setMaskTopStyle = (checked : boolean) => {
    const linearToTop = "background-image: linear-gradient(to bottom, #f4ff73, rgba(216, 229, 255, 0));"
    // #ifdef APP-HARMONY && !VUE3-VAPOR
    data.maskTopStyle = checked ? linearToTop : "background-image: linear-gradient(to bottom, transparent, transparent);"
    // #endif
    // #ifdef APP-HARMONY && VUE3-VAPOR
    data.maskTopStyle = checked ? linearToTop : ""
    // #endif
    // #ifndef APP-HARMONY
    data.maskTopStyle = checked ? linearToTop : ""
    // #endif
  }

  const setMaskBottomStyle = (checked : boolean) => {
    const linearToBottom = "background-image: linear-gradient(to top, #f4ff73, rgba(216, 229, 255, 0));"
    // #ifdef APP-HARMONY && !VUE3-VAPOR
    data.maskBottomStyle = checked ? linearToBottom : "background-image: linear-gradient(to bottom, transparent, transparent);"
    // #endif
    // #ifdef APP-HARMONY && VUE3-VAPOR
    data.maskBottomStyle = checked ? linearToBottom : ""
    // #endif
    // #ifndef APP-HARMONY
    data.maskBottomStyle = checked ? linearToBottom : ""
    // #endif
  }

  // 自动化测试
  const getEventCallbackNum = () : number => {
    return state.eventCallbackNum
  }

  // 自动化测试
  const setEventCallbackNumTest = (num : number) => {
    setEventCallbackNum(num)
  }

  const bindChange = (e : UniPickerViewChangeEvent) => {
    // 自动化测试 触发事件元素、type 类型
    // console.log(e.target?.tagName, e.type);
    if ((e.target?.tagName ?? '').includes('PICKER-VIEW')) {
      setEventCallbackNumTest(state.eventCallbackNum + 1)
    }
    if (e.type === 'change') {
      setEventCallbackNumTest(state.eventCallbackNum + 2)
    }
    const val = e.detail.value
    data.result = val
    data.year = data.years[val[0]]
    data.month = data.months[val[1]]
    data.day = data.days[val[2]]
  }

  const setValue = () => {
    data.value = [0, 1, 30] as number[]
  }

  const setValue1 = () => {
    data.value = [10, 10, 10] as number[]
  }

  defineExpose({
    data,
    setIndicatorStyle,
    setIndicatorClass,
    setMaskStyle,
    setMaskClass,
    setMaskTopStyle,
    setMaskBottomStyle,
    getEventCallbackNum,
    setEventCallbackNumTest,
    setValue,
    setValue1
  })
</script>

<style>
  .picker-view {
    width: 100%;
    height: 320px;
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .item {
    height: 50px;
  }

  .text {
    line-height: 50px;
    text-align: center;
  }

  /* 自动化测试 */
  .indicator-test {
    height: 50px;
    border: #ff5500 solid 1px;
    background:rgba(182, 179, 255, 0.4);
  }

  .mask-test {
    background-image: linear-gradient(to bottom, #d8e5ff, rgba(216, 229, 255, 0));
  }
</style>