fix: 修复组件内 scroll-view 标签在 taro-h5 端的兼容问题 (#2470)

jdf2e · Aug 9, 2023 · 6e61205 · 6e61205
1 parent 76db84b
commit 6e61205
Show file tree

Hide file tree

Showing 12 changed files with 67 additions and 21 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/packages/__VUE/address/index.taro.vue b/src/packages/__VUE/address/index.taro.vue
@@ -51,7 +51,12 @@
 
         <view class="nut-address__detail" v-if="privateType == 'custom'">
           <div class="nut-address__detail-list">
-            <scroll-view :scroll-y="true" :style="{ height: '100%' }" :scroll-top="scrollTop" @scroll="scrollChange">
+            <nut-scroll-view
+              :scroll-y="true"
+              :style="{ height: '100%' }"
+              :scroll-top="scrollTop"
+              @scroll="scrollChange"
+            >
               <div
                 v-for="(item, index) in regionList"
                 :key="index"
@@ -64,7 +69,7 @@
                   >{{ item.name }}
                 </div>
               </div>
-            </scroll-view>
+            </nut-scroll-view>
           </div>
         </view>
 
@@ -131,6 +136,7 @@ import Popup from '../popup/index.taro.vue';
 import Elevator from '../elevator/index.taro.vue';
 const { create, componentName, translate } = createComponent('address');
 import { Location, Location2, Check, Close, Left } from '@nutui/icons-vue-taro';
+import ScrollView from '../scroll-view/index.taro.vue';
 
 export default create({
   components: {
@@ -140,7 +146,8 @@ export default create({
     Location2,
     Check,
     Close,
-    Left
+    Left,
+    'nut-scroll-view': ScrollView
   },
   inheritAttrs: false,
   props: {

diff --git a/src/packages/__VUE/backtop/index.taro.vue b/src/packages/__VUE/backtop/index.taro.vue
@@ -1,14 +1,14 @@
 <template>
   <view>
-    <scroll-view
+    <nut-scroll-view
       :scroll-y="true"
       :style="{ height }"
       @scroll="scroll"
       :scroll-top="scrollTop"
       scroll-with-animation="true"
     >
       <slot name="content"></slot>
-    </scroll-view>
+    </nut-scroll-view>
     <view :class="classes" :style="style" @click.stop="click">
       <slot name="icon">
         <Top width="19px" height="19px" class="nut-backtop-main"></Top>
@@ -19,12 +19,14 @@
 
 <script lang="ts">
 import { reactive, computed, toRefs } from 'vue';
+import ScrollView from '../scroll-view/index.taro.vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('backtop');
 import { Top } from '@nutui/icons-vue-taro';
 export default create({
   components: {
-    Top
+    Top,
+    'nut-scroll-view': ScrollView
   },
   props: {
     height: {

diff --git a/src/packages/__VUE/calendaritem/index.taro.vue b/src/packages/__VUE/calendaritem/index.taro.vue
@@ -24,7 +24,7 @@
       </view>
     </view>
     <!-- content-->
-    <scroll-view
+    <nut-scroll-view
       :scroll-top="scrollTop"
       :scroll-y="true"
       class="nut-calendar__content"
@@ -72,7 +72,7 @@
           </view>
         </view>
       </view>
-    </scroll-view>
+    </nut-scroll-view>
     <!-- footer-->
     <view class="nut-calendar__footer" v-if="poppable && !isAutoBackFill">
       <view class="nut-calendar__confirm" @click="confirm">{{ confirmText || translate('confirm') }}</view>
@@ -84,6 +84,7 @@ import { reactive, ref, watch, toRefs, computed, onMounted } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create, translate } = createComponent('calendar-item');
 import Taro from '@tarojs/taro';
+import ScrollView from '../scroll-view/index.taro.vue';
 import Utils from '@/packages/utils/date';
 import requestAniFrame from '@/packages/utils/raf';
 import { MonthInfo, Day, CalendarTaroState } from './type';
@@ -98,6 +99,9 @@ interface CalendarDateProp {
 }
 
 export default create({
+  components: {
+    'nut-scroll-view': ScrollView
+  },
   props: {
     type: {
       type: String,

diff --git a/src/packages/__VUE/cascader/cascader-item.taro.vue b/src/packages/__VUE/cascader/cascader-item.taro.vue
@@ -3,7 +3,7 @@
     <template v-if="!initLoading && panes.length">
       <nut-tab-pane v-for="(pane, index) in panes" :title="formatTabTitle(pane)" :key="index">
         <view role="menu" class="nut-cascader-pane">
-          <scroll-view :scrollY="true" style="height: 100%">
+          <nut-scroll-view :scrollY="true" style="height: 100%">
             <template v-for="node in pane.nodes" :key="node.value">
               <view
                 class="nut-cascader-item"
@@ -19,7 +19,7 @@
                 <Checklist v-else class="nut-cascader-item__icon-check" name="checklist" />
               </view>
             </template>
-          </scroll-view>
+          </nut-scroll-view>
         </view>
       </nut-tab-pane>
     </template>
@@ -32,6 +32,7 @@
 </template>
 <script lang="ts">
 import { watch, ref, Ref, computed } from 'vue';
+import ScrollView from '../scroll-view/index.taro.vue';
 import { createComponent } from '@/packages/utils/create';
 const { create, translate } = createComponent('cascader-item');
 import { convertListToOptions } from './helper';
@@ -46,7 +47,8 @@ export default create({
     Loading,
     Checklist,
     [Tabs.name]: Tabs,
-    [TabPane.name]: TabPane
+    [TabPane.name]: TabPane,
+    'nut-scroll-view': ScrollView
   },
   props: {
     visible: Boolean,

diff --git a/src/packages/__VUE/elevator/index.taro.vue b/src/packages/__VUE/elevator/index.taro.vue
@@ -1,6 +1,6 @@
 <template>
   <view :class="classes">
-    <scroll-view
+    <nut-scroll-view
       class="nut-elevator__list nut-elevator__list--mini"
       :scroll-top="scrollTop"
       :scroll-y="true"
@@ -35,7 +35,7 @@
           <slot :item="subitem" v-else></slot>
         </view>
       </view>
-    </scroll-view>
+    </nut-scroll-view>
     <view class="nut-elevator__code--current" v-show="scrollStart" v-if="indexList.length > 0">
       {{ indexList[codeIndex][acceptKey] }}
     </view>
@@ -62,8 +62,12 @@ import { ElevatorData } from './type';
 const { componentName, create } = createComponent('elevator');
 
 import Taro from '@tarojs/taro';
+import ScrollView from '../scroll-view/index.taro.vue';
 
 export default create({
+  components: {
+    'nut-scroll-view': ScrollView
+  },
   props: {
     height: {
       type: [Number, String],

diff --git a/src/packages/__VUE/list/index.taro.vue b/src/packages/__VUE/list/index.taro.vue
@@ -1,5 +1,5 @@
 <template>
-  <scroll-view
+  <nut-scroll-view
     :class="classes"
     :scroll-y="true"
     :style="{ height: `${getContainerHeight}px` }"
@@ -29,18 +29,22 @@
         <slot :item="item" :index="index + start"></slot>
       </div>
     </div>
-  </scroll-view>
+  </nut-scroll-view>
 </template>
 <script lang="ts">
 import { reactive, toRefs, computed, ref, Ref, watch, ComputedRef } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import Taro from '@tarojs/taro';
+import ScrollView from '../scroll-view/index.taro.vue';
 import { useTaroRect } from '@/packages/utils/useTaroRect';
 import { CachedPosition, CompareResult, binarySearch } from './type';
 const { componentName, create } = createComponent('list');
 const clientHeight = Taro.getSystemInfoSync().windowHeight || 667;
 
 export default create({
+  components: {
+    'nut-scroll-view': ScrollView
+  },
   props: {
     height: {
       type: [Number],

diff --git a/src/packages/__VUE/menuitem/index.taro.vue b/src/packages/__VUE/menuitem/index.taro.vue
@@ -21,7 +21,7 @@
       @closed="handleClose"
       :close-on-click-overlay="parent.props.closeOnClickOverlay"
     >
-      <scroll-view :scroll-y="true">
+      <nut-scroll-view :scroll-y="true">
         <view class="nut-menu-item__content">
           <view
             v-for="(option, index) in options"
@@ -48,7 +48,7 @@
           </view>
           <slot></slot>
         </view>
-      </scroll-view>
+      </nut-scroll-view>
     </nut-popup>
   </view>
 </template>
@@ -59,6 +59,7 @@ const { create } = createComponent('menu-item');
 import Popup from '../popup/index.taro.vue';
 import { MenuItemOption } from './type';
 import { Check } from '@nutui/icons-vue-taro';
+import ScrollView from '../scroll-view/index.taro.vue';
 
 export default create({
   props: {
@@ -81,7 +82,8 @@ export default create({
   },
   components: {
     Check,
-    [Popup.name]: Popup
+    [Popup.name]: Popup,
+    'nut-scroll-view': ScrollView
   },
   emits: ['update:modelValue', 'change'],
   setup(props, { emit }) {

diff --git a/src/packages/__VUE/scroll-view/index.taro.vue b/src/packages/__VUE/scroll-view/index.taro.vue
@@ -0,0 +1,15 @@
+<template>
+  <template v-if="Taro.getEnv() === Taro.ENV_TYPE.WEB">
+    <taro-scroll-view-core v-bind="$attrs">
+      <slot></slot>
+    </taro-scroll-view-core>
+  </template>
+  <template v-else>
+    <scroll-view v-bind="$attrs">
+      <slot></slot>
+    </scroll-view>
+  </template>
+</template>
+<script setup lang="ts">
+import Taro from '@tarojs/taro';
+</script>
diff --git a/src/packages/__VUE/tabs/index.taro.vue b/src/packages/__VUE/tabs/index.taro.vue
@@ -1,6 +1,6 @@
 <template>
   <view class="nut-tabs" :class="[direction]" ref="container">
-    <scroll-view
+    <nut-scroll-view
       :scroll-x="getScrollX"
       :scroll-y="getScrollY"
       :scroll-with-animation="scrollWithAnimation"
@@ -32,7 +32,7 @@
           <view v-if="canShowLabel" class="nut-tabs__titles-item nut-tabs__titles-placeholder"></view>
         </template>
       </view>
-    </scroll-view>
+    </nut-scroll-view>
     <view
       class="nut-tabs__content"
       ref="tabsContentRef"
@@ -58,6 +58,7 @@ import Taro from '@tarojs/taro';
 import type { RectItem } from './types';
 import { useTabContentTouch } from './hooks';
 import { useTaroRect } from '@/packages/utils/useTaroRect';
+import ScrollView from '../scroll-view/index.taro.vue';
 
 export class Title {
   title = '';
@@ -70,7 +71,8 @@ export type TabsSize = 'large' | 'normal' | 'small';
 const { create } = createComponent('tabs');
 export default create({
   components: {
-    JoySmile
+    JoySmile,
+    'nut-scroll-view': ScrollView
   },
   props: {
     modelValue: {

diff --git a/vite.config.build.taro.vue.disperse.ts b/vite.config.build.taro.vue.disperse.ts
@@ -28,6 +28,7 @@ export default defineConfig({
         compilerOptions: {
           isCustomElement: (tag) => {
             return (
+              tag.startsWith('taro-') ||
               tag.startsWith('scroll-view') ||
               tag.startsWith('swiper') ||
               tag.startsWith('swiper-item') ||

diff --git a/vite.config.build.taro.vue.ts b/vite.config.build.taro.vue.ts
@@ -24,6 +24,8 @@ export default defineConfig({
         compilerOptions: {
           isCustomElement: (tag) => {
             return (
+              tag.startsWith('taro-') ||
+              tag.startsWith('scroll-view') ||
               tag.startsWith('swiper') ||
               tag.startsWith('swiper-item') ||
               tag.startsWith('scroll-view') ||