fix: picker组件重影问题修复 (#1428)

* 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 <13121007159@163.com>
Co-authored-by: love_forever <1039168735@qq.com>

* 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 <305624531@qq.com>
Co-authored-by: lkjh3214 <13121007159@163.com>
Co-authored-by: love_forever <1039168735@qq.com>
Co-authored-by: richard1015 <51844712@qq.com>
Co-authored-by: ailululu <912429321@qq.com>
Co-authored-by: snandy <zhouyrt@gmail.com>

* feat: imagepreview重复问题修改

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

* fix: 科技样式同步

Co-authored-by: lkjh3214 <305624531@qq.com>
Co-authored-by: lkjh3214 <13121007159@163.com>
Co-authored-by: love_forever <1039168735@qq.com>
Co-authored-by: richard1015 <51844712@qq.com>
Co-authored-by: ailululu <912429321@qq.com>
Co-authored-by: snandy <zhouyrt@gmail.com>

src/packages/__VUE/picker/Column.vue

@@ -1,18 +1,20 @@
 <template>
   <view class="nut-picker__list" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
     <view class="nut-picker-roller" ref="roller" :style="touchRollerStyle">
-      <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>
+      <template v-for="(item, index) in column" :key="item.value ? item.value : index">
+        <view
+          class="nut-picker-roller-item"
+          :class="{ 'nut-picker-roller-item-hidden': isHidden(index + 1) }"
+          :style="setRollerStyle(index + 1)"
+          v-if="item && item.text"
+        >
+          {{ item.text }}
+        </view>
+      </template>
     </view>
+    <view class="nut-picker-roller-mask"></view>
 
-    <view class="nut-picker-content">
+    <!-- <view class="nut-picker-content">
       <view class="nut-picker-list-panel" ref="list" :style="touchListStyle">
         <view
           :class="['nut-picker-item', 'nut-picker-item-ref', item.className]"
@@ -22,7 +24,7 @@
         </view>
         <view class="nut-picker-placeholder" v-if="column && column.length === 1"></view>
       </view>
-    </view>
+    </view> -->
   </view>
 </template>
 <script lang="ts">
@@ -118,6 +120,7 @@ export default create({
       let move = state.touchParams.lastY - state.touchParams.startY;
 
       let moveTime = state.touchParams.lastTime - state.touchParams.startTime;
+      console.log('touchEnd', move, moveTime);
       if (moveTime <= 300) {
         move = move * 2;
         moveTime = moveTime + 1000;
@@ -151,6 +154,7 @@ export default create({
     };
 
     const setMove = (move: number, type?: string, time?: number) => {
+      console.log('setMove');
       let updateMove = move + state.transformY;
       if (type === 'end') {
         // 限定滚动距离
@@ -164,6 +168,7 @@ export default create({
         // 设置滚动距离为lineSpacing的倍数值
         let endMove = Math.round(updateMove / state.lineSpacing) * state.lineSpacing;
         let deg = `${(Math.abs(Math.round(endMove / state.lineSpacing)) + 1) * state.rotation}deg`;
+
         setTransform(endMove, type, time, deg);
 
         let t = time ? time / 2 : 0;
@@ -174,14 +179,25 @@ export default create({
         state.currIndex = Math.abs(Math.round(endMove / state.lineSpacing)) + 1;
       } else {
         let deg = '0deg';
+        let degNum = 0;
         if (updateMove < 0) {
-          deg = `${(Math.abs(updateMove / state.lineSpacing) + 1) * state.rotation}deg`;
+          degNum = (Math.abs(updateMove / state.lineSpacing) + 1) * state.rotation;
         } else {
-          deg = `${(-updateMove / state.lineSpacing + 1) * state.rotation}deg`;
+          degNum = (-updateMove / state.lineSpacing + 1) * state.rotation;
         }
 
-        setTransform(updateMove, null, undefined, deg);
-        state.currIndex = Math.abs(Math.round(updateMove / state.lineSpacing)) + 1;
+        // picker 滚动的最大角度
+        const maxDeg = (props.column.length + 1) * state.rotation;
+        const minDeg = 0;
+        if (degNum > maxDeg) {
+          deg = `${maxDeg}deg`;
+        } else if (degNum < minDeg) {
+          deg = `${minDeg}deg`;
+        } else {
+          deg = `${degNum}deg`;
+          setTransform(updateMove, null, undefined, deg);
+          state.currIndex = Math.abs(Math.round(updateMove / state.lineSpacing)) + 1;
+        }
       }
     };
 
@@ -202,6 +218,7 @@ export default create({
     watch(
       () => props.column,
       (val) => {
+        console.log('props.column变化', props.column);
         state.transformY = 0;
         modifyStatus(false);
       },
@@ -210,16 +227,16 @@ export default create({
       }
     );
 
-    watch(
-      () => props.value,
-      (val) => {
-        console.log('列更新', val);
-        modifyStatus(true);
-      },
-      {
-        deep: true
-      }
-    );
+    // watch(
+    //   () => props.value,
+    //   (val) => {
+    //      console.log('props.value变化')
+    //     modifyStatus(true);
+    //   },
+    //   {
+    //     deep: true
+    //   }
+    // );
 
     onMounted(() => {
       modifyStatus(true);

src/packages/__VUE/picker/ColumnTaro.vue

@@ -11,8 +11,8 @@
         {{ item.text }}
       </view>
     </view>
-
-    <view class="nut-picker-content">
+    <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
           :class="['nut-picker-item', 'nut-picker-item-ref', item.className]"
@@ -22,7 +22,7 @@
         </view>
         <view class="nut-picker-placeholder" v-if="column && column.length === 1"></view>
       </view>
-    </view>
+    </view> -->
   </view>
 </template>
 <script lang="ts">
@@ -177,13 +177,25 @@ export default create({
         state.currIndex = Math.abs(Math.round(endMove / state.lineSpacing)) + 1;
       } else {
         let deg = '0deg';
+        let degNum = 0;
         if (updateMove < 0) {
-          deg = `${(Math.abs(updateMove / state.lineSpacing) + 1) * state.rotation}deg`;
+          degNum = (Math.abs(updateMove / state.lineSpacing) + 1) * state.rotation;
+        } else {
+          degNum = (-updateMove / state.lineSpacing + 1) * state.rotation;
+        }
+
+        // picker 滚动的最大角度
+        const maxDeg = (props.column.length + 1) * state.rotation;
+        const minDeg = 0;
+        if (degNum > maxDeg) {
+          deg = `${maxDeg}deg`;
+        } else if (degNum < minDeg) {
+          deg = `${minDeg}deg`;
         } else {
-          deg = `${(-updateMove / state.lineSpacing + 1) * state.rotation}deg`;
+          deg = `${degNum}deg`;
+          setTransform(updateMove, null, undefined, deg);
+          state.currIndex = Math.abs(Math.round(updateMove / state.lineSpacing)) + 1;
         }
-        setTransform(updateMove, null, undefined, deg);
-        state.currIndex = Math.abs(Math.round(updateMove / state.lineSpacing)) + 1;
       }
     };
 
@@ -202,8 +214,8 @@ export default create({
     };
 
     const getReference = async () => {
-      const refe = await useTaroRect(list, Taro);
-      state.lineSpacing = refe.height / props.column.length;
+      // const refe = await useTaroRect(list, Taro);
+      // state.lineSpacing = refe.height / props.column.length;
       modifyStatus(true);
     };
 

src/packages/__VUE/picker/doc.en.ts

@@ -34,6 +34,7 @@ export const Internation = {
     ouHai: '瓯海区',
     fuJian: '福建',
     fuZhou: '福州',
+    xiaMen: '厦门',
     guLou: '鼓楼区',
     taiJiang: '台江区',
     siMing: '思明区',
@@ -74,6 +75,7 @@ export const Internation = {
     ouHai: 'OuHai',
     fuJian: 'FuJian',
     fuZhou: 'FuZhou',
+    xiaMen: 'XiaMen',
     guLou: 'GuLou',
     taiJiang: 'TaiJiang',
     siMing: 'SiMing',

src/packages/__VUE/picker/index.scss

@@ -98,6 +98,19 @@
     }
   }
 
+  &-roller-mask {
+    position: absolute;
+    width: 100%;
+    display: block;
+    height: 100%;
+    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4)),
+      linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));
+    background-repeat: no-repeat;
+    background-position: top, bottom;
+    background-size: 100% 108px;
+    z-index: 1;
+  }
+
   &-content {
     display: block;
     position: absolute;

src/packages/__VUE/picker/index.vue

@@ -22,7 +22,7 @@
 
       <slot name="top"></slot>
 
-      <view class="nut-picker__column">
+      <view class="nut-picker__column" ref="wrapHeight">
         <view class="nut-picker__hairline"></view>
         <view class="nut-picker__columnitem" v-for="(column, columnIndex) in columnsList" :key="columnIndex">
           <nut-picker-column
@@ -94,6 +94,8 @@ export default create({
     // 选中项
     let defaultValues = ref<(number | string)[]>(props.modelValue);
 
+    const wrapHeight = ref();
+
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
@@ -201,7 +203,6 @@ export default create({
     };
 
     onMounted(() => {
-      console.log(11, props.modelValue);
       if (props.visible) state.show = props.visible;
     });
 
@@ -212,7 +213,6 @@ export default create({
     watch(
       () => props.modelValue,
       (newValues) => {
-        console.log('change', newValues, defaultValues.value);
         const isSameValue = JSON.stringify(newValues) === JSON.stringify(defaultValues.value);
         if (!isSameValue) {
           defaultValues.value = newValues;
@@ -235,7 +235,6 @@ export default create({
     watch(
       () => props.visible,
       (val) => {
-        console.log('props更新', props.columns);
         state.show = val;
       }
     );

src/packages/styles/variables-jdb.scss

@@ -231,7 +231,7 @@ $picker-bar-title-font-size: 16px !default;
 $picker-bar-title-color: $title-color !default;
 $picker-bar-title-font-weight: normal !default;
 $picker-item-height: 36px !default;
-$picker-item-text-color: #808080 !default;
+$picker-item-text-color: $title-color !default;
 $picker-item-active-text-color: inherit !default;
 $picker-item-text-font-size: 16px !default;
 $picker-item-active-line-border: 1px solid #d8d8d8 !default;

src/packages/styles/variables-jdt.scss

@@ -149,7 +149,7 @@ $picker-bar-title-font-size: 18px !default;
 $picker-bar-title-color: #323233 !default;
 $picker-bar-title-font-weight: 600 !default;
 $picker-item-height: 36px !default;
-$picker-item-text-color: #808080 !default;
+$picker-item-text-color: $title-color !default;
 $picker-item-active-text-color: $primary-color !default;
 $picker-item-text-font-size: 16px !default;
 $picker-item-active-line-border: 1px solid rgba(0, 0, 0, 0.06) !default;

src/packages/styles/variables.scss

@@ -162,7 +162,7 @@ $picker-bar-title-font-size: 16px !default;
 $picker-bar-title-color: $title-color !default;
 $picker-bar-title-font-weight: normal !default;
 $picker-item-height: 36px !default;
-$picker-item-text-color: #808080 !default;
+$picker-item-text-color: $title-color !default;
 $picker-item-active-text-color: inherit !default;
 $picker-item-text-font-size: 16px !default;
 $picker-item-active-line-border: 1px solid #d8d8d8 !default;