feat: taro-picker 组件添加 平铺展示 (#1518)

* fix: marge主分支 (#1)

* doc: calendar 文档修改 (#1410)

* feat: 添加range组件、calendar组件在线文档

* fix: 文档调整

* fix: 重构calendar组件

* feat: 日历组件重构，文档修改，功能完善

* fix: 格式化

* fix: 代码格式化调整。

* fix: 去除无用代码

* fix: 文档调整

* fix:  文档调整

* fix: taro  demo 样式修改

* feat: range组件功能完善，新增 竖向操作，刻度展示。

* fix: 冲突解决

* feat: taro功能新增，兼容处理，文档修改

* feat: 添加range组件，jdt主题色

* fix: 修改组件初始化逻辑

* feat: 新增h5 日期多选功能

* feat: taro版本添加 日期多选功能

* fix: 修复多选，无法选中开头结尾日期问题

* fix: 文档修改，添加en-US 文档

* fix: 文档完善

Co-authored-by: lkjh3214 <[email protected]>
Co-authored-by: love_forever <[email protected]>

* feat: imagepreview 部分功能补齐 (#1412)

* feat: image新增单元测试

* feat: ellipsis添加单元测试

* feat: imagepreview 添加

* fix: popop单元测试修改

* docs: 添加版本号

* feat: support highlight for JetBrains web-types

* test(imagepreview): edit snap

* fix(image): dts edit import

* docs(input): demo和md国际化文案修改 (#1414)

* fix: 抽离 input  ConfirmTextType

* feat: input、switch国际化

* feat: category、address国际化

* feat: taro升级maxlength问题

* fix: 国际化增加默认字段

* fix: blank

* fix: input组件国际化文案修改

* style: add ellipsis add sass

* docs(elevator): 增加吸顶props

* feat: input组件新增input slot插槽 (#1418)

* fix: 抽离 input  ConfirmTextType

* feat: input、switch国际化

* feat: category、address国际化

* feat: taro升级maxlength问题

* fix: 国际化增加默认字段

* fix: blank

* fix: input组件国际化文案修改

* feat: input组件新增input slot插槽

* release: v3.1.22

* Update README.md

add alipay img

* Update README.md

* docs: changelog 3.1.22

Co-authored-by: lkjh3214 <[email protected]>
Co-authored-by: lkjh3214 <[email protected]>
Co-authored-by: love_forever <[email protected]>
Co-authored-by: richard1015 <[email protected]>
Co-authored-by: ailululu <[email protected]>
Co-authored-by: snandy <[email protected]>

* feat: imagepreview重复问题修改

* fix: picker 组件重影问题修改

* fix: 科技样式同步

* feat: picker组件惯性滚动优化

* feat: picker组件惯性滚动优化

* fix: issue问题修噶

* fix: datepicker国际化修噶

* fix: datePicker在year-month下,maxDate不生效问题解决

* fix: picker异步处理

* fix: picker taro

* fix: picker问题修改

* feat: address 新增插槽

* feat: address 新增插槽

* feat: picker-Taro 添加 平铺展示

* feat: picker-Taro 添加 平铺展示

Co-authored-by: lkjh3214 <[email protected]>
Co-authored-by: lkjh3214 <[email protected]>
Co-authored-by: love_forever <[email protected]>
Co-authored-by: richard1015 <[email protected]>
Co-authored-by: ailululu <[email protected]>
Co-authored-by: snandy <[email protected]>

Author: 7 people

src/packages/__VUE/picker/ColumnTaro.vue

@@ -1,20 +1,31 @@
 <template>
   <view class="nut-picker__list" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
-    <view class="nut-picker-roller" ref="roller" :style="touchTileStyle" @transitionend="stopMomentum">
-      <!-- 3D 效果 -->
-      <view
-        class="nut-picker-roller-item"
-        :class="{ 'nut-picker-roller-item-hidden': isHidden(index + 1) }"
-        v-for="(item, index) in column"
-        :style="setRollerStyle(index + 1)"
-        :key="item.value ? item.value : index"
-      >
-        {{ item.text }}
-      </view>
+    <view
+      class="nut-picker-roller"
+      ref="roller"
+      :id="'roller' + refRandomId"
+      :style="threeDimensional ? touchRollerStyle : touchTileStyle"
+      @transitionend="stopMomentum"
+    >
+      <template v-for="(item, index) in column" :key="item.value ? item.value : index">
+        <!-- 3D 效果 -->
+        <view
+          class="nut-picker-roller-item"
+          :class="{ 'nut-picker-roller-item-hidden': isHidden(index + 1) }"
+          :style="setRollerStyle(index + 1)"
+          v-if="item && item.text && threeDimensional"
+        >
+          {{ item.text }}
+        </view>
+        <!-- 平铺 -->
+        <view class="nut-picker-roller-item-tile" v-if="item && item.text && !threeDimensional">
+          {{ item.text }}
+        </view>
+      </template>
     </view>
     <view class="nut-picker-roller-mask"></view>
-    <view class="nut-picker-content">
-      <view class="nut-picker-list-panel" ref="list" :id="'list' + refRandomId" :style="touchListStyle"> </view>
+    <view class="nut-picker-content" ref="listbox" :id="'listbox' + refRandomId" v-if="threeDimensional">
+      <view class="nut-picker-list-panel" ref="list" :id="'list' + refRandomId" :style="touchTileStyle"> </view>
     </view>
   </view>
 </template>
@@ -76,6 +87,7 @@ export default create({
     const roller = ref(null);
     const list = ref(null);
     const listitem = ref(null);
+    const listbox = ref(null);
 
     const moving = ref(false); // 是否处于滚动中
     const touchDeg = ref(0);
@@ -88,14 +100,14 @@ export default create({
     const INERTIA_TIME = 300;
     const INERTIA_DISTANCE = 15;
 
-    const touchListStyle = computed(() => {
+    const touchTileStyle = computed(() => {
       return {
         transition: `transform ${touchTime.value}ms cubic-bezier(0.17, 0.89, 0.45, 1)`,
         transform: `translate3d(0, ${state.scrollDistance}px, 0)`
       };
     });
 
-    const touchTileStyle = computed(() => {
+    const touchRollerStyle = computed(() => {
       return {
         transition: `transform ${touchTime.value}ms cubic-bezier(0.17, 0.89, 0.45, 1)`,
         transform: `rotate3d(1, 0, 0, ${touchDeg.value})`
@@ -108,8 +120,12 @@ export default create({
     const onTouchStart = (event: TouchEvent) => {
       touch.start(event);
       if (moving.value) {
-        const { transform } = window.getComputedStyle(list.value as any);
+        let dom = list.value as any;
+        if (!props.threeDimensional) {
+          dom = roller.value as any;
+        }
 
+        const { transform } = window.getComputedStyle(dom);
         state.scrollDistance = +parseInt(transform.split(', ')[1]);
       }
 
@@ -255,11 +271,12 @@ export default create({
     // 惯性滚动结束
     const stopMomentum = () => {
       moving.value = false;
-      console.log('滚动结束');
       setChooseValue();
     };
 
     const getReference = async () => {
+      const refe = await useTaroRect(listbox, Taro);
+      state.lineSpacing = refe.height ? refe.height : 36;
       modifyStatus(true);
     };
 
@@ -319,11 +336,12 @@ export default create({
       roller,
       list,
       listitem,
+      listbox,
       onTouchStart,
       onTouchMove,
       onTouchEnd,
       touchTileStyle,
-      touchListStyle,
+      touchRollerStyle,
       setMove,
       refRandomId,
       stopMomentum

src/packages/__VUE/picker/doc.md

@@ -121,6 +121,8 @@ app.use(OverLay);
 
 ### 平铺展示
 
+`threeDimensional` 可关闭 3D 滚动效果。
+
 :::demo
 ```html
 <template>
@@ -429,7 +431,7 @@ Picker 组件在底部和顶部分别设置了插槽，可进行自定义设置
 | title                  | 设置标题                   | String  | -      |
 | cancel-text            | 取消按钮文案               | String  | 取消   |
 | ok-text                | 确定按钮文案               | String  | 确定   |
-| three-dimensional`小程序不支持` `v3.1.23`          | 是否开启3D效果               | Boolean  | true   |
+| three-dimensional`v3.1.23`          | 是否开启3D效果               | Boolean  | true   |
 
 ### Columns 数据结构
 

src/packages/__VUE/picker/index.taro.vue

@@ -82,7 +82,7 @@ export default create({
     // 是否开启3D效果
     threeDimensional: {
       type: Boolean,
-      default: false
+      default: true
     }
   },
   emits: ['close', 'change', 'confirm', 'update:visible', 'update:modelValue'],