init

uni_modules/nutui-uni/components/picker/index.scss

@@ -0,0 +1,112 @@
+@import "../pickercolumn/index";
+
+.nut-theme-dark {
+  .nut-picker {
+    position: relative;
+    background: $dark-background;
+    border-radius: 5px;
+
+    /* #ifndef H5 */
+    &__mask {
+      background: none !important;
+    }
+
+    /* #endif */
+
+    &__bar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 46px;
+    }
+
+    &__title {
+      color: $dark-color;
+    }
+
+    &-content {
+      color: $dark-color;
+    }
+
+    &-item {
+      color: $dark-color;
+    }
+  }
+}
+
+.nut-picker {
+  position: relative;
+  background: #fff;
+  border-radius: 5px;
+
+  &__bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 46px;
+  }
+
+  &__left {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 50px;
+    height: 100%;
+    padding: $picker-bar-button-padding;
+    font-size: $picker-bar-cancel-font-size;
+    color: $picker-cancel-color;
+    cursor: pointer;
+  }
+
+  &__right {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 50px;
+    height: 100%;
+    padding: $picker-bar-button-padding;
+    font-size: $picker-bar-ok-font-size;
+    color: $picker-ok-color;
+    cursor: pointer;
+  }
+
+  &__column {
+    position: relative;
+    display: flex;
+
+    &::before {
+      position: absolute;
+      top: 50%;
+      width: 100%;
+      height: var(--line-height);
+      content: "";
+      border: $picker-item-active-line-border;
+      border-right: 0;
+      border-left: 0;
+      transform: scale(0.9);
+      transform: translateY(-50%);
+    }
+  }
+
+  &__columnitem {
+    flex-grow: 1;
+    width: 0;
+    height: 100%;
+    cursor: grab;
+    user-select: none;
+  }
+
+  &__title {
+    flex: 1;
+    font-size: $picker-bar-title-font-size;
+    font-weight: $picker-bar-title-font-weight;
+    color: $picker-bar-title-color;
+    text-align: center;
+
+    @include oneline-ellipsis;
+  }
+
+  &__wrapper {
+    display: block;
+  }
+}

uni_modules/nutui-uni/components/picker/index.ts

@@ -0,0 +1,2 @@
+export * from './picker'
+export * from './type'

uni_modules/nutui-uni/components/picker/picker.ts

@@ -0,0 +1,64 @@
+import type { ExtractPropTypes } from 'vue'
+import { CANCEL_EVENT, CHANGE_EVENT, CONFIRM_EVENT, UPDATE_MODEL_EVENT } from '../_constants'
+import { commonProps, makeArrayProp, makeNumericProp, makeObjectProp, makeStringProp, truthProp } from '../_utils'
+import type { PickerFieldNames, PickerOption } from '../pickercolumn'
+import type { PickerBaseEvent, PickerChangeEvent } from './type'
+
+export const pickerProps = {
+  ...commonProps,
+  /**
+   * @description 默认选中项
+   */
+  modelValue: makeArrayProp<string | number>([]),
+  /**
+   * @description 对象数组，配置每一列显示的数据
+   */
+  columns: makeArrayProp<PickerOption | PickerOption[]>([]),
+  /**
+   * @description 是否显示顶部导航
+   */
+  showToolbar: truthProp,
+  /**
+   * @description 设置标题
+   */
+  title: makeStringProp(''),
+  /**
+   * @description 确定按钮文案
+   */
+  okText: makeStringProp(''),
+  /**
+   * @description 取消按钮文案
+   */
+  cancelText: makeStringProp(''),
+  /**
+   * @description 是否开启3D效果
+   */
+  threeDimensional: Boolean,
+  /**
+   * @description 惯性滚动时长
+   */
+  swipeDuration: makeNumericProp(1000),
+  /**
+   * @description 可见的选项个数
+   */
+  visibleOptionNum: makeNumericProp(7),
+  /**
+   * @description 选项高度
+   */
+  optionHeight: makeNumericProp(36),
+  /**
+   * @description 自定义 columns 中的字段
+   */
+  fieldNames: makeObjectProp<PickerFieldNames>({}),
+}
+
+export type PickerProps = ExtractPropTypes<typeof pickerProps>
+
+export const pickerEmits = {
+  [UPDATE_MODEL_EVENT]: (val: (string | number)[]) => val instanceof Object,
+  [CHANGE_EVENT]: (evt: PickerChangeEvent) => evt instanceof Object,
+  [CONFIRM_EVENT]: (evt: PickerBaseEvent) => evt instanceof Object,
+  [CANCEL_EVENT]: (evt: PickerBaseEvent) => evt instanceof Object,
+}
+
+export type PickerEmits = typeof pickerEmits

uni_modules/nutui-uni/components/picker/picker.vue

@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import type { PickerViewOnChangeEvent } from '@uni-helper/uni-app-types'
+import type { CSSProperties } from 'vue'
+import { computed, defineComponent, reactive, ref, toRefs } from 'vue'
+import { pxCheck } from '../_utils'
+import { useTranslate } from '../../locale'
+import type { PickerOption } from '../pickercolumn'
+// #ifdef H5
+import NutPickerColumn from '../pickercolumn/pickercolumn.vue'
+// #endif
+import { pickerEmits, pickerProps } from './picker'
+import { componentName, usePicker } from './use-picker'
+
+const props = defineProps(pickerProps)
+
+const emit = defineEmits(pickerEmits)
+
+const innerVisibleOptionNum = computed(() => {
+  return Number(props.visibleOptionNum)
+})
+
+const innerOptionHeight = computed(() => {
+  return Number(props.optionHeight)
+})
+
+const { translate } = useTranslate(componentName)
+
+const {
+  changeHandler,
+  confirm,
+  defaultValues,
+  defaultIndexes,
+  delayDefaultIndexes,
+  columnsList,
+  columnFieldNames,
+  classes,
+  cancel,
+  confirmHandler,
+} = usePicker(props, emit)
+
+function componentWeb() {
+  const columnRefs = ref<any[]>([])
+
+  const columnRef = (el: any) => {
+    if (el && columnRefs.value.length < columnsList.value.length)
+      columnRefs.value.push(el)
+  }
+
+  const columnStyle = computed(() => {
+    const styles: CSSProperties = {}
+    styles.height = `${innerVisibleOptionNum.value * innerOptionHeight.value}px`
+    styles['--line-height'] = `${innerOptionHeight.value}px`
+    return styles
+  })
+
+  return {
+    columnRefs,
+    columnRef,
+    columnStyle,
+  }
+}
+
+function componentWeapp() {
+  const state = reactive({
+    show: false,
+    picking: false,
+  })
+
+  // 选中项的位置
+  const pickerViewStyles = computed(() => {
+    const styles: CSSProperties = {}
+    styles.height = `${innerVisibleOptionNum.value * innerOptionHeight.value}px`
+    styles['--line-height'] = `${innerOptionHeight.value}px`
+    return styles
+  })
+
+  // 平铺展示时，滚动选择
+  const handleTileChange = (event: PickerViewOnChangeEvent) => {
+    const indexes = event.detail.value
+    const prevIndexes = defaultIndexes.value
+
+    let changeIndex = 0
+    // 判断变化的是第几个
+    for (let i = 0; i < indexes.length; i++) {
+      if (prevIndexes[i] !== indexes[i]) {
+        changeIndex = i
+        break
+      }
+    }
+
+    // 选择的是哪个 option
+    changeHandler(changeIndex, columnsList.value[changeIndex][indexes[changeIndex]])
+  }
+
+  // 确定
+  const confirmHandler = () => {
+    if (state.picking) {
+      setTimeout(() => {
+        confirm()
+      }, 0)
+    }
+    else {
+      confirm()
+    }
+  }
+
+  // 开始滚动
+  const handlePickStart = () => {
+    state.picking = true
+  }
+
+  // 开始滚动
+  const handlePickEnd = () => {
+    state.picking = false
+  }
+
+  return {
+    ...toRefs(state),
+    pickerViewStyles,
+    handleTileChange,
+    confirmHandler,
+    handlePickStart,
+    handlePickEnd,
+  }
+}
+
+// #ifdef H5
+const {
+  columnRef,
+  columnStyle,
+} = componentWeb()
+// #endif
+
+// #ifndef H5
+const {
+  confirmHandler: confirmHandlerMp,
+  handleTileChange,
+  handlePickStart,
+  handlePickEnd,
+  pickerViewStyles,
+} = componentWeapp()
+// #endif
+
+function onConfirm() {
+  // #ifdef H5
+  confirmHandler()
+  // #endif
+  // #ifndef H5
+  confirmHandlerMp()
+  // #endif
+}
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <view :class="classes" :style="props.customStyle">
+    <view v-if="props.showToolbar" class="nut-picker__bar">
+      <view class="nut-picker__cancel nut-picker__left nut-picker__button" @click="cancel">
+        {{ props.cancelText || translate('cancel') }}
+      </view>
+      <view class="nut-picker__title">
+        {{ props.title }}
+      </view>
+      <view class="nut-picker__confirm nut-picker__right nut-picker__button" @click="onConfirm ">
+        {{ props.okText || translate('confirm') }}
+      </view>
+    </view>
+
+    <slot name="top" />
+
+    <!-- #ifndef H5 -->
+    <picker-view
+      :style="pickerViewStyles"
+      :indicator-style="`height:${innerOptionHeight}px`"
+      :value="delayDefaultIndexes"
+      :immediate-change="true"
+      mask-class="nut-picker__mask"
+      @change="handleTileChange"
+      @pickstart="handlePickStart"
+      @pickend="handlePickEnd"
+    >
+      <picker-view-column v-for="(column, columnIndex) in (columnsList as PickerOption[])" :key="columnIndex">
+        <view
+          v-for="(item, index) in column"
+          :key="item[columnFieldNames.value] ? item[columnFieldNames.value] : index"
+          class="nut-picker-roller-item-tarotile"
+          :style="{ lineHeight: pxCheck(innerOptionHeight) }"
+        >
+          {{ item[columnFieldNames.text] }}
+        </view>
+      </picker-view-column>
+    </picker-view>
+    <!-- #endif -->
+
+    <!-- #ifdef H5 -->
+    <view class="nut-picker__column" :style="columnStyle">
+      <view
+        v-for="(column, columnIndex) in (columnsList as PickerOption[][])"
+        :key="columnIndex"
+        class="nut-picker__columnitem"
+      >
+        <NutPickerColumn
+          :ref="columnRef"
+          :column="column"
+          :value="defaultValues[columnIndex]"
+          :field-names="columnFieldNames"
+          :three-dimensional="props.threeDimensional"
+          :swipe-duration="props.swipeDuration"
+          :visible-option-num="innerVisibleOptionNum"
+          :option-height="innerOptionHeight"
+          @change="(option: PickerOption) => { changeHandler(columnIndex, option) }"
+        />
+      </view>
+    </view>
+    <!-- #endif -->
+
+    <slot name="default" />
+  </view>
+</template>
+
+<style lang="scss">
+@import "./index";
+</style>

uni_modules/nutui-uni/components/picker/type.ts

@@ -0,0 +1,13 @@
+import type { PickerOption } from '../pickercolumn'
+
+export interface PickerBaseEvent {
+  selectedValue: (string | number)[]
+  selectedOptions: PickerOption[]
+}
+
+export interface PickerChangeEvent extends PickerBaseEvent {
+  columnIndex: number
+}
+
+export const pickerColumnsType = ['single', 'multiple', 'cascade'] as const
+export type PickerColumnsType = (typeof pickerColumnsType)[number]

uni_modules/nutui-uni/components/picker/use-picker.ts

@@ -0,0 +1,244 @@
+import type { SetupContext } from 'vue'
+import { computed, nextTick, reactive, ref, toRefs, watch } from 'vue'
+import { CANCEL_EVENT, CHANGE_EVENT, CONFIRM_EVENT, PREFIX, UPDATE_MODEL_EVENT } from '../_constants'
+import { cloneDeep, getMainClass, isEqualValue } from '../_utils'
+import type { PickerOption } from '../pickercolumn'
+import type { PickerEmits, PickerProps } from './picker'
+import type { PickerColumnsType } from './type'
+
+const DEFAULT_FILED_NAMES = {
+  text: 'text',
+  value: 'value',
+  children: 'children',
+  className: '',
+}
+
+export const componentName = `${PREFIX}-picker`
+
+export function usePicker(props: PickerProps, emit: SetupContext<PickerEmits>['emit']) {
+  const classes = computed(() => {
+    return getMainClass(props, componentName)
+  })
+
+  const state: {
+    formattedColumns: (PickerOption | PickerOption[])[]
+  } = reactive({
+    formattedColumns: props.columns,
+  })
+
+  const columnFieldNames = computed(() => {
+    return {
+      ...DEFAULT_FILED_NAMES,
+      ...props.fieldNames,
+    }
+  })
+
+  // 选中项
+  const defaultValues = ref<(number | string)[]>([])
+
+  // 当前类型
+  const columnsType = computed<PickerColumnsType>(() => {
+    const firstColumn: PickerOption | PickerOption[] = state.formattedColumns[0]
+    const fields = columnFieldNames.value
+
+    if (firstColumn) {
+      if (Array.isArray(firstColumn))
+        return 'multiple'
+
+      if (fields.children in firstColumn)
+        return 'cascade'
+    }
+
+    return 'single'
+  })
+
+  // 级联数据格式化
+  const formatCascade = (columns: PickerOption[], defaultValues: (number | string)[]) => {
+    const formatted: PickerOption[][] = []
+    const fields = columnFieldNames.value
+
+    let cursor: PickerOption = {
+      text: '',
+      value: '',
+      [fields.children]: columns,
+    }
+
+    let columnIndex = 0
+
+    while (cursor && cursor[fields.children]) {
+      const options: PickerOption[] = cursor[fields.children]
+      const value = defaultValues[columnIndex]
+
+      let index = options.findIndex(columnItem => columnItem[fields.value] === value)
+      if (index === -1)
+        index = 0
+
+      cursor = cursor[fields.children][index]
+
+      columnIndex += 1
+
+      formatted.push(options)
+    }
+
+    return formatted
+  }
+
+  // 将传入的 columns 格式化
+  const columnsList = computed<(PickerOption | PickerOption[])[]>(() => {
+    switch (columnsType.value) {
+      case 'single':
+        return [state.formattedColumns]
+      case 'multiple':
+        return state.formattedColumns
+      case 'cascade':
+        return formatCascade(
+          state.formattedColumns,
+          defaultValues.value ? defaultValues.value : [],
+        )
+    }
+
+    return []
+  })
+
+  const defaultIndexes = computed(() => {
+    const fields = columnFieldNames.value
+
+    return (columnsList.value as PickerOption[][]).map((column: PickerOption[], index: number) => {
+      const targetIndex = column.findIndex(item => item[fields.value] === defaultValues.value[index])
+      return targetIndex === -1 ? 0 : targetIndex
+    })
+  })
+
+  const delayDefaultIndexes = ref<number[]>(columnsList.value.map(() => 0))
+
+  watch(defaultIndexes, async (value) => {
+    await nextTick()
+
+    delayDefaultIndexes.value = value
+  }, { immediate: true })
+
+  const columnRefs = ref<any[]>([])
+
+  const columnRef = (el: any) => {
+    if (el && columnRefs.value.length < columnsList.value.length)
+      columnRefs.value.push(el)
+  }
+
+  const selectedOptions = computed(() => {
+    const fields = columnFieldNames.value
+
+    return (columnsList.value as PickerOption[][]).map((column: PickerOption[], index: number) => {
+      return column.find(item => item[fields.value] === defaultValues.value[index]) || column[0]
+    })
+  })
+
+  const cancel = () => {
+    emit(CANCEL_EVENT, {
+      selectedValue: defaultValues.value,
+      selectedOptions: selectedOptions.value,
+    })
+  }
+
+  const changeHandler = (columnIndex: number, option: PickerOption) => {
+    const fields = columnFieldNames.value
+
+    if (option && Object.keys(option).length) {
+      defaultValues.value = defaultValues.value ? defaultValues.value : []
+
+      if (columnsType.value === 'cascade') {
+        defaultValues.value[columnIndex] = option[fields.value] ? option[fields.value] : ''
+
+        let index = columnIndex
+        let cursor = option
+        while (cursor && cursor[fields.children] && cursor[fields.children][0]) {
+          defaultValues.value[index + 1] = cursor[fields.children][0][fields.value]
+          index += 1
+          cursor = cursor[fields.children][0]
+        }
+
+        // 当前改变列 的 下一列 children 值为空
+        if (cursor && cursor[fields.children] && cursor[fields.children].length === 0)
+          defaultValues.value = defaultValues.value.slice(0, index + 1)
+      }
+      else {
+        defaultValues.value[columnIndex] = Object.prototype.hasOwnProperty.call(option, fields.value)
+          ? option[fields.value]
+          : ''
+      }
+
+      emit(CHANGE_EVENT, {
+        columnIndex,
+        selectedValue: defaultValues.value,
+        selectedOptions: selectedOptions.value,
+      })
+    }
+  }
+
+  const confirm = () => {
+    const fields = columnFieldNames.value
+
+    if (defaultValues.value && !defaultValues.value.length) {
+      columnsList.value.forEach((columns) => {
+        defaultValues.value.push(columns[0][fields.value])
+      })
+    }
+
+    emit(CONFIRM_EVENT, {
+      selectedValue: defaultValues.value,
+      selectedOptions: selectedOptions.value,
+    })
+  }
+
+  const confirmHandler = () => {
+    if (columnRefs.value.length > 0) {
+      columnRefs.value.forEach((column) => {
+        column.stopMomentum()
+      })
+    }
+
+    confirm()
+  }
+
+  watch(
+    () => props.modelValue,
+    (value) => {
+      if (!isEqualValue(value, defaultValues.value))
+        defaultValues.value = cloneDeep(value)
+    },
+    { deep: true, immediate: true },
+  )
+
+  watch(
+    defaultValues,
+    (value) => {
+      if (!isEqualValue(value, props.modelValue))
+        emit(UPDATE_MODEL_EVENT, value)
+    },
+    { deep: true },
+  )
+
+  watch(
+    () => props.columns,
+    (value) => {
+      state.formattedColumns = value
+    },
+  )
+
+  return {
+    classes,
+    ...toRefs(state),
+    columnsType,
+    columnsList,
+    columnFieldNames,
+    cancel,
+    changeHandler,
+    confirmHandler,
+    confirm,
+    defaultValues,
+    defaultIndexes,
+    delayDefaultIndexes,
+    columnRefs,
+    columnRef,
+    selectedOptions,
+  }
+}