fix: scroll-view标签问题修复 (#1817)

package.json

@@ -74,6 +74,7 @@
     }
   },
   "dependencies": {
+    "@tarojs/components": "^3.5.6",
     "sass": "^1.50.0",
     "vscode": "^1.1.37",
     "vue-router": "^4.0.12"
@@ -82,7 +83,7 @@
     "@commitlint/cli": "^10.0.0",
     "@commitlint/config-conventional": "^10.0.0",
     "@popperjs/core": "^2.11.5",
-    "@tarojs/taro": "^3.4.0",
+    "@tarojs/taro": "3.5.6",
     "@types/jest": "^26.0.22",
     "@types/node": "^17.0.16",
     "@typescript-eslint/eslint-plugin": "^4.20.0",

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

@@ -1,6 +1,6 @@
 <template>
   <view>
-    <scroll-view
+    <Nut-Scroll-View
       :scroll-y="true"
       :style="{ height }"
       @scroll="scroll"
@@ -8,7 +8,7 @@
       scroll-with-animation="true"
     >
       <slot name="content"></slot>
-    </scroll-view>
+    </Nut-Scroll-View>
     <view :class="classes" :style="style" @click.stop="click">
       <slot name="icon">
         <nut-icon size="19px" class="nut-backtop-main" name="top"></nut-icon>
@@ -20,8 +20,12 @@
 <script lang="ts">
 import { reactive, computed, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import NutScrollView from '../scrollView/index.taro.vue';
 const { componentName, create } = createComponent('backtop');
 export default create({
+  components: {
+    NutScrollView
+  },
   props: {
     height: {
       type: String,

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

@@ -18,7 +18,7 @@
       </view>
     </view>
     <!-- content-->
-    <scroll-view
+    <Nut-Scroll-View
       :scroll-top="scrollTop"
       :scroll-y="true"
       class="nut-calendar-content"
@@ -60,7 +60,7 @@
           </view>
         </view>
       </view>
-    </scroll-view>
+    </Nut-Scroll-View>
     <!-- footer-->
     <view class="nut-calendar-footer" v-if="poppable && !isAutoBackFill">
       <view class="calendar-confirm-btn" @click="confirm">{{ confirmText || translate('confirm') }}</view>
@@ -75,7 +75,7 @@ import Taro from '@tarojs/taro';
 import Utils from '@/packages/utils/date';
 import { useExpose } from '@/packages/utils/useExpose/index';
 import requestAniFrame from '@/packages/utils/raf';
-
+import NutScrollView from '../scrollView/index.taro.vue';
 const TARO_ENV = Taro.getEnv();
 
 type InputDate = string | string[];
@@ -119,6 +119,9 @@ interface MonthInfo {
 }
 
 export default create({
+  components: {
+    NutScrollView
+  },
   props: {
     type: {
       type: String,
@@ -809,6 +812,7 @@ export default create({
           }
           scale = Number((screenWidth / 750).toFixed(toFixed));
           scalePx.value = scale;
+          let transfromNum = Taro.pxTransform(64);
           initData();
         }
       });

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

@@ -1,6 +1,6 @@
 <template>
   <view :class="classes">
-    <scroll-view
+    <Nut-Scroll-View
       class="nut-elevator__list scrollview"
       :scroll-top="scrollTop"
       :scroll-y="true"
@@ -33,7 +33,7 @@
       <view class="nut-elevator__list__fixed" :style="fixedStyle" v-show="scrollY > 0" v-if="isSticky">
         <span class="fixed-title">{{ indexList[currentIndex][acceptKey] }}</span>
       </view>
-    </scroll-view>
+    </Nut-Scroll-View>
     <view class="nut-elevator__code--current" v-show="scrollStart" v-if="indexList.length > 0">
       {{ indexList[codeIndex][acceptKey] }}
     </view>
@@ -57,6 +57,8 @@ import { computed, reactive, toRefs, nextTick, ref, Ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { useExpose } from '@/packages/utils/useExpose/index';
 const { componentName, create } = createComponent('elevator');
+import NutScrollView from '../scrollView/index.taro.vue';
+
 import Taro from '@tarojs/taro';
 interface ElevatorData {
   name: string;
@@ -64,6 +66,9 @@ interface ElevatorData {
   [key: string]: string | number;
 }
 export default create({
+  components: {
+    NutScrollView
+  },
   props: {
     height: {
       type: [Number, String],

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

@@ -1,5 +1,5 @@
 <template>
-  <scroll-view
+  <Nut-Scroll-View
     :class="classes"
     scrollY="true"
     style="height: 100%"
@@ -32,11 +32,12 @@
         <view class="tips">{{ loadMoreTxt || translate('loadMoreTxt') }}</view>
       </template>
     </view>
-  </scroll-view>
+  </Nut-Scroll-View>
 </template>
 <script lang="ts">
 import { toRefs, onMounted, reactive, computed, CSSProperties } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import NutScrollView from '../scrollView/index.taro.vue';
 const { componentName, create, translate } = createComponent('infiniteloading');
 import Icon from '../icon/index.taro.vue';
 import Taro from '@tarojs/taro';
@@ -93,7 +94,8 @@ export default create({
   },
   emits: ['scroll-change', 'load-more', 'refresh'],
   components: {
-    'nut-icon': Icon
+    'nut-icon': Icon,
+    NutScrollView
   },
   setup(props, { emit, slots }) {
     const state = reactive({

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` }"
@@ -13,15 +13,19 @@
         <slot :item="item" :index="index"></slot>
       </div>
     </div>
-  </scroll-view>
+  </Nut-Scroll-View>
 </template>
 <script lang="ts">
 import { reactive, toRefs, computed, ref, Ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import NutScrollView from '../scrollView/index.taro.vue';
 import Taro from '@tarojs/taro';
 const { componentName, create } = createComponent('list');
 const clientHeight = Taro.getSystemInfoSync().windowHeight || 667;
 export default create({
+  components: {
+    NutScrollView
+  },
   props: {
     height: {
       type: [Number],

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

@@ -24,7 +24,7 @@
       @closed="handleClose"
       :close-on-click-overlay="parent.props.closeOnClickOverlay"
     >
-      <scroll-view :scroll-y="true" style="height: 100%">
+      <Nut-Scroll-View :scroll-y="true" style="height: 100%">
         <view class="nut-menu-item__content">
           <view
             v-for="(option, index) in options"
@@ -55,7 +55,7 @@
           </view>
           <slot></slot>
         </view>
-      </scroll-view>
+      </Nut-Scroll-View>
     </nut-popup>
   </view>
 </template>
@@ -65,7 +65,9 @@ import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('menu-item');
 import Icon from '../icon/index.taro.vue';
 import Popup from '../popup/index.taro.vue';
+import NutScrollView from '../scrollView/index.taro.vue';
 let _zIndex = 2000;
+
 export default create({
   props: {
     title: String,
@@ -91,7 +93,8 @@ export default create({
   },
   components: {
     [Icon.name]: Icon,
-    [Popup.name]: Popup
+    [Popup.name]: Popup,
+    NutScrollView
   },
   emits: ['update:modelValue', 'change'],
   setup(props, { emit, slots }) {

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

@@ -0,0 +1,34 @@
+<template>
+  <template v-if="ENV == ENV_TYPE.WEB">
+    <taro-scroll-view v-bind="$attrs">
+      <slot></slot>
+    </taro-scroll-view>
+  </template>
+  <template v-if="ENV != ENV_TYPE.WEB">
+    <scroll-view v-bind="$attrs">
+      <slot></slot>
+    </scroll-view>
+  </template>
+</template>
+<script lang="ts">
+import { defineComponent, reactive, toRefs } from 'vue';
+import Taro from '@tarojs/taro';
+import taroScrollView from '@tarojs/components/dist-h5/vue3/components/scroll-view.js';
+import { ScrollView } from '@tarojs/components/mini/index.js';
+export default defineComponent({
+  name: 'NutScrollView',
+  components: {
+    ScrollView,
+    taroScrollView
+  },
+  setup() {
+    const state = reactive({
+      ENV: Taro.getEnv(),
+      ENV_TYPE: Taro.ENV_TYPE
+    });
+    return {
+      ...toRefs(state)
+    };
+  }
+});
+</script>

src/shims-vue.d.ts

@@ -3,3 +3,5 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>;
   export default component;
 }
+declare module '@tarojs/components/dist-h5/vue3/components/scroll-view.js';
+declare module '@tarojs/components/mini/index.js';

src/sites/mobile-taro/vue/package.json

@@ -36,30 +36,30 @@
   "author": "",
   "dependencies": {
     "@babel/runtime": "^7.7.7",
-    "@nutui/nutui-taro": "^3.1.18",
-    "@tarojs/components": "^3.4.14",
-    "@tarojs/mini-runner": "^3.4.14",
-    "@tarojs/runtime": "^3.4.14",
-    "@tarojs/taro": "^3.4.14",
+    "@nutui/nutui-taro": "^3.2.5",
+    "@tarojs/components": "3.5.6",
+    "@tarojs/mini-runner": "3.5.6",
+    "@tarojs/runtime": "3.5.6",
+    "@tarojs/taro": "3.5.6",
     "vue": "^3.2.37"
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",
-    "@tarojs/cli": "^3.5.4",
+    "@tarojs/cli": "3.5.6",
     "@vue/babel-plugin-jsx": "^1.0.6",
-    "@tarojs/mini-runner": "^3.5.4",
-    "@tarojs/plugin-framework-vue3": "^3.5.4",
-    "@tarojs/plugin-html": "^3.5.4",
+    "@tarojs/mini-runner": "3.5.6",
+    "@tarojs/plugin-framework-vue3": "3.5.6",
+    "@tarojs/plugin-html": "3.5.6",
     "webpack": "^5.69.0",
-    "@tarojs/webpack5-runner": "^3.5.4",
+    "@tarojs/webpack5-runner": "3.5.6",
     "@types/webpack-env": "^1.13.6",
     "@typescript-eslint/eslint-plugin": "^4.15.1",
     "@typescript-eslint/parser": "^4.15.1",
     "@vue/compiler-sfc": "^3.0.0",
-    "babel-preset-taro": "^3.5.4",
+    "babel-preset-taro": "3.5.6",
     "eslint": "^8.12.0",
     "eslint-plugin-vue": "^8.0.0",
-    "eslint-config-taro": "^3.5.4",
+    "eslint-config-taro": "3.5.6",
     "stylelint": "^9.3.0",
     "style-loader": "^1.3.0",
     "typescript": "^4.6.4",

transformFinalCode.ts

@@ -1,60 +0,0 @@
-// Components that need to be converted
-export const DEFAULT_Components = new Set(['scroll-view']);
-//whether to include the path to the current file
-export const judgePath = (paths: string[], targetPath: string) => {
-  for (let i = 0; i < paths.length; i++) {
-    let reg = new RegExp(paths[i]);
-    if (reg.test(targetPath)) {
-      return true;
-    }
-  }
-  return false;
-};
-import type { Plugin } from 'vite';
-export interface transformOptions {
-  exclude?: string[];
-  components?: string[];
-  envCondition?: string;
-  include?: string[];
-}
-export function transformFinalCode(options: transformOptions = {}): Plugin {
-  let _options: transformOptions = {
-    envCondition: 'process.env.TARO_ENV',
-    components: [],
-    include: [],
-    exclude: []
-  };
-  _options = Object.assign(_options, options);
-  return {
-    name: 'transformFinalCode',
-    enforce: 'post',
-    async config(config) {
-      if (!_options.envCondition) {
-        throw new Error('Environment variable is missing, check the envCondition field');
-      }
-      let _define = {};
-      _define[_options.envCondition] = _options.envCondition;
-      config.define = Object.assign(config.define, _define);
-      return config;
-    },
-    transform(code: string, id: any) {
-      let _code = code;
-      let _components = DEFAULT_Components;
-      if (_options.components && _options.components.length > 0) {
-        _components = new Set(_options.components);
-      }
-      if (_options.exclude && _options.exclude.length !== 0 && judgePath(_options.exclude, id)) {
-        return _code;
-      }
-      if (_options.include && _options.include.length !== 0 && !judgePath(_options.include, id)) {
-        return _code;
-      }
-      _components.forEach((tagName) => {
-        let Reg = new RegExp(`"${tagName}"`, 'ig');
-        const r = `function(){if(${_options.envCondition} === 'h5'){return 'taro-${tagName}'}else{return '${tagName}'}}()`;
-        _code = _code.replace(Reg, r);
-      });
-      return _code;
-    }
-  };
-}

vite.config.build.taro.vue.disperse.ts

@@ -5,7 +5,6 @@ import path from 'path';
 const fs = require('fs-extra');
 import config from './package.json';
 import configPkg from './src/config.json';
-import { transformFinalCode, DEFAULT_Components } from './transformFinalCode';
 
 const banner = `/*!
 * ${config.name} v${config.version} ${new Date()}
@@ -43,18 +42,7 @@ export default defineConfig({
               tag.startsWith('picker-view-column')
             );
           },
-          whitespace: 'preserve',
-          nodeTransforms: [
-            (node) => {
-              if (node.type === 1 /* ELEMENT */) {
-                const nodeName = node.tag;
-                if (DEFAULT_Components.has(nodeName)) {
-                  // node.tag = `taro-${nodeName}`,
-                  node.tagType = 1; /* 0: ELEMENT, 1: COMPONENT */
-                }
-              }
-            }
-          ]
+          whitespace: 'preserve'
         }
       }
     }),
@@ -88,9 +76,6 @@ declare module 'vue' {
           content: fileContent + changeContent
         };
       }
-    }),
-    transformFinalCode({
-      include: ['__VUE/.*/index.taro']
     })
   ],
   build: {
@@ -103,7 +88,7 @@ declare module 'vue' {
     },
     rollupOptions: {
       // 请确保外部化那些你的库中不需要的依赖
-      external: ['vue', 'vue-router', '@tarojs/taro', '@/packages/locale'],
+      external: ['vue', 'vue-router', '@tarojs/taro', '@/packages/locale', '@tarojs/components'],
       input,
       output: {
         banner,

vite.config.build.taro.vue.ts

@@ -2,7 +2,6 @@ import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import path from 'path';
 import config from './package.json';
-import { transformFinalCode, DEFAULT_Components } from './transformFinalCode';
 
 const banner = `/*!
 * ${config.name} v${config.version} ${new Date()}
@@ -39,29 +38,16 @@ export default defineConfig({
               tag.startsWith('picker-view-column')
             );
           },
-          whitespace: 'preserve',
-          nodeTransforms: [
-            (node) => {
-              if (node.type === 1 /* ELEMENT */) {
-                const nodeName = node.tag;
-                if (DEFAULT_Components.has(nodeName)) {
-                  node.tagType = 1; /* 0: ELEMENT, 1: COMPONENT */
-                }
-              }
-            }
-          ]
+          whitespace: 'preserve'
         }
       }
-    }),
-    transformFinalCode({
-      include: ['__VUE/.*/index.taro']
     })
   ],
   build: {
     minify: false,
     rollupOptions: {
       // 请确保外部化那些你的库中不需要的依赖
-      external: ['vue', 'vue-router', '@tarojs/taro'],
+      external: ['vue', 'vue-router', '@tarojs/taro', '@tarojs/components'],
       output: {
         banner,
         // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量