feat: 抽离 CreateComponent 函数，用于 函数式组件开发 (#1876)

* fix: 修复 ImagePreview 在Taro编译成H5后报错的问题

* fix: 地址关闭时, Close 事件触发两次问题解决

* feat: 组件DatePicker 添加双向绑定

* docs: 组件Picker文档修改

* feat: 组件Picker与DatePicker新增属性safe-area-inset-bottom

* feat: imagepreview

* fix: 组件imagepreview点击视频遮罩关闭(#1729)

* fix: 解决 Picker 在微信小程序中无法使用问题 (#1774)

* fix: 修改 Picker 组件 v-model 失效问题

* fix: 组件NoticeBar修改height之后，垂直轮播会卡顿

* fix: 删除Datepicker Demo演示多余内容

* fix: 组件Picker在JD小程序上适配

* fix: 组件Address京东小程序适配

* feat: 京东小程序适配

* fix: 删除空格

* feat: 删除console

* fix: 京东小程序imagepreview适配

* fix: 修复 imagepreview 动态设置 initNo 显示不正确问题

* fix: 组件 InfiniteLoading 某些情况下会错误触发下拉刷新#1819

* fix: 删除pullrefresh

* feat: 组件 imagepreview瘦身

* feat: 组件Picker 瘦身

* fix: address线上问题修改

* fix: 完善imagepreview

* feat: 公共函数提取

* feat: 函数式改用 createComponent

Author: yangxiaolu1993

src/config.json

@@ -729,16 +729,6 @@
           "show": true,
           "author": "wangyue217"
         },
-        {
-          "version": "3.0.0",
-          "name": "PullRefresh",
-          "type": "component",
-          "cName": "下拉刷新",
-          "desc": "下拉刷新",
-          "sort": 16,
-          "show": false,
-          "author": "yangxiaolu3"
-        },
         {
           "version": "3.0.0",
           "name": "Switch",

src/packages/__VUE/address/index.vue

@@ -58,15 +58,17 @@
               :class="[selectedRegion[tabName[tabIndex]].id == item.id ? 'active' : '']"
               @click="nextAreaList(item)"
             >
-              <nut-icon
-                class="region-item-icon"
-                type="self"
-                v-bind="$attrs"
-                :name="selectedIcon"
-                size="13px"
-                v-if="selectedRegion[tabName[tabIndex]].id == item.id"
-              ></nut-icon
-              >{{ item.name }}
+              <div>
+                <nut-icon
+                  class="region-item-icon"
+                  type="self"
+                  v-bind="$attrs"
+                  :name="selectedIcon"
+                  size="13px"
+                  v-if="selectedRegion[tabName[tabIndex]].id == item.id"
+                ></nut-icon
+                >{{ item.name }}
+              </div>
             </li>
           </ul>
         </view>

src/packages/__VUE/dialog/index.ts

@@ -1,5 +1,10 @@
 import Dialog from './index.vue';
-import { render, createVNode, h, VNode, CSSProperties } from 'vue';
+import { h, VNode, CSSProperties } from 'vue';
+import Popup from '../popup/index.vue';
+import Icon from '../icon/index.vue';
+import Button from '../button/index.vue';
+import OverLay from '../overlay/index.vue';
+import { CreateComponent } from '@/packages/utils/create';
 export class DialogOptions {
   title?: string = '';
   content?: string | VNode = '';
@@ -37,51 +42,29 @@ class DialogFunction {
   instance: any;
   constructor(_options: DialogOptions) {
     let options = Object.assign(this.options, _options);
-    let elWarp: HTMLElement = document.body;
-    let teleport = options.teleport as string;
-    if (teleport != 'body') {
-      if (typeof teleport == 'string') {
-        elWarp = document.querySelector(teleport) as HTMLElement;
-      } else {
-        elWarp = options.teleport as HTMLElement;
-      }
-    }
-    const root = document.createElement('view');
-    root.id = 'dialog-' + options.id;
-    const Wrapper = {
-      setup() {
-        options.onUpdate = (val: boolean) => {
-          if (val == false) {
-            elWarp.removeChild(root);
+    const { unmount } = CreateComponent(options, {
+      name: 'dialog',
+      components: [Popup, Icon, Button, OverLay],
+      wrapper: (elWarp: any, root: any) => {
+        return {
+          setup() {
+            options.onUpdate = (val: boolean) => {
+              if (val == false) {
+                unmount();
+              }
+            };
+            if (options?.onOpened) {
+              options?.onOpened();
+            }
+            options.teleport = `#${root.id}`;
+            return () => {
+              return h(Dialog, options);
+            };
           }
         };
-        if (options?.onOpened) {
-          options?.onOpened();
-        }
-        options.teleport = `#${root.id}`;
-        return () => {
-          return h(Dialog, options);
-        };
       }
-    };
-    this.instance = createVNode(Wrapper);
-    elWarp.appendChild(root);
-    render(this.instance, root);
+    });
   }
-
-  close = () => {
-    // if (this.instance) {
-    //   this.instance.component.ctx.close();
-    // }
-  };
-
-  setDefaultOptions = (options: DialogOptions) => {
-    // Object.assign(this.currentOptions, options);
-  };
-
-  resetDefaultOptions = () => {
-    // Dialog.currentOptions = { ...Dialog.defaultOptions };
-  };
 }
 
 const _Dialog = function (options: DialogOptions) {

src/packages/__VUE/dialog/index.vue

@@ -47,16 +47,13 @@
 import { onMounted, computed, watch, ref, PropType, VNode, CSSProperties } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('dialog');
-import Popup from '../popup/index.vue';
+import { funInterceptor, Interceptor } from '@/packages/utils/util';
 import { popupProps } from '../popup/props';
-import Button from '../button/index.vue';
+
 import { isPromise } from '@/packages/utils/util';
 export default create({
   inheritAttrs: false,
-  components: {
-    [Popup.name]: Popup,
-    [Button.name]: Button
-  },
+  components: {},
   props: {
     ...popupProps,
     closeOnClickOverlay: {
@@ -114,9 +111,7 @@ export default create({
     popStyle: {
       type: Object as PropType<CSSProperties>
     },
-    beforeClose: {
-      type: Function
-    }
+    beforeClose: Function as PropType<Interceptor>
   },
   emits: ['update', 'update:visible', 'ok', 'cancel', 'opened', 'closed'],
   setup(props, { emit }) {
@@ -152,22 +147,13 @@ export default create({
     };
 
     const closed = (action: string) => {
-      if (props.beforeClose) {
-        const result = props.beforeClose(action);
-        if (isPromise(result)) {
-          result.then((bool) => {
-            if (bool) {
-              update(false);
-              emit('closed');
-            } else {
-              // 用户阻止删除
-            }
-          });
+      funInterceptor(props.beforeClose, {
+        args: [action],
+        done: () => {
+          update(false);
+          emit('closed');
         }
-      } else {
-        update(false);
-        emit('closed');
-      }
+      });
     };
 
     const onCancel = () => {

src/packages/__VUE/imagepreview/demo.vue

@@ -116,12 +116,13 @@ export default createDemo({
       ImagePreview({
         show: true,
         images: resData.imgData,
-        onClose
+        onClose: () => onClose()
       });
     };
 
     const hideFn = (i: number) => {
       (resData as any)['showPreview' + i] = false;
+      console.log('guansebi');
     };
 
     return {

src/packages/__VUE/imagepreview/imagePreviewItem.vue

@@ -3,47 +3,28 @@
     <view
       :style="imageStyle"
       class="nut-imagepreview-box"
-      v-if="image && image.src"
       @touchstart="onTouchStart"
       @touchmove="onTouchMove"
       @touchend="onTouchEnd"
       @touchcancel="onTouchEnd"
     >
-      <img :src="image.src" class="nut-imagepreview-img" @load="imageLoad" />
-    </view>
-
-    <view
-      class="nut-imagepreview-box"
-      v-if="video && video.source"
-      @click="videoClick"
-      @touchstart="onTouchStart"
-      @touchmove="onTouchMove"
-      @touchend="onTouchEnd"
-      @touchcancel="onTouchEnd"
-    >
-      <nut-video :source="video.source" :options="video.options"></nut-video>
+      <img v-if="image && image.src" :src="image.src" class="nut-imagepreview-img" @load="imageLoad" />
+      <nut-video v-if="video && video.source" :source="video.source" :options="video.options"></nut-video>
     </view>
   </nut-swiper-item>
 </template>
 <script lang="ts">
 import { toRefs, reactive, watch, computed, CSSProperties, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import Popup from '../popup/index.vue';
-import Video from '../video/index.vue';
-import Swiper from '../swiper/index.vue';
-import SwiperItem from '../swiperitem/index.vue';
-import Icon from '../icon/index.vue';
 import { useTouch } from '@/packages/utils/useTouch';
+import { preventDefault } from '@/packages/utils/util';
 import { ImageInterface } from './types';
+import { baseProps } from './types';
 const { create } = createComponent('imagepreviewitem');
 
 export default create({
   props: {
-    show: {
-      type: Boolean,
-      default: false
-    },
-    initNo: Number,
+    ...baseProps,
     image: {
       type: Object as PropType<ImageInterface>,
       default: () => ({})
@@ -52,36 +33,17 @@ export default create({
       type: Object,
       default: () => ({})
     },
-
-    showIndex: {
-      type: Boolean,
-      default: true
-    },
     rootWidth: {
       type: Number,
       default: 0
     },
     rootHeight: {
       type: Number,
       default: 0
-    },
-    minZoom: {
-      type: Number,
-      default: 1 / 3
-    },
-    maxZoom: {
-      type: Number,
-      default: 3
     }
   },
   emits: ['close', 'scale'],
-  components: {
-    [Popup.name]: Popup,
-    [Video.name]: Video,
-    [Swiper.name]: Swiper,
-    [SwiperItem.name]: SwiperItem,
-    [Icon.name]: Icon
-  },
+  components: {},
 
   setup(props, { emit }) {
     const state = reactive({
@@ -103,20 +65,25 @@ export default create({
       return state.imageRatio > rootRatio;
     });
 
-    // 图片放大
+    // 图片缩放
     const imageStyle = computed(() => {
-      const { scale, moveX, moveY, moving, zooming } = state;
-      const style: CSSProperties = {
-        transitionDuration: zooming || moving ? '0s' : '.3s'
-      };
-
-      if (scale !== 1) {
-        const offsetX = moveX / scale;
-        const offsetY = moveY / scale;
-        style.transform = `scale(${scale}, ${scale}) translate(${offsetX}px, ${offsetY}px)`;
+      const images = props.image;
+      if (images && images.src) {
+        const { scale, moveX, moveY, moving, zooming } = state;
+        const style: CSSProperties = {
+          transitionDuration: zooming || moving ? '0s' : '.3s'
+        };
+
+        if (scale !== 1) {
+          const offsetX = moveX / scale;
+          const offsetY = moveY / scale;
+          style.transform = `scale(${scale}, ${scale}) translate(${offsetX}px, ${offsetY}px)`;
+        }
+
+        return style;
       }
 
-      return style;
+      return {};
     });
 
     const maxMoveX = computed(() => {
@@ -258,10 +225,8 @@ export default create({
     };
 
     const onTouchEnd = (event: TouchEvent) => {
-      console.log('ontauchend');
       let stopPropagation = false;
 
-      /* istanbul ignore else */
       if (state.moving || state.zooming) {
         stopPropagation = true;
 
@@ -291,30 +256,15 @@ export default create({
         }
       }
 
-      // eliminate tap delay on safari
       preventDefault(event, stopPropagation);
 
       checkTap();
       touch.reset();
     };
 
-    // 阻止
-    const preventDefault = (event: Event, isStopPropagation?: boolean) => {
-      if (typeof event.cancelable !== 'boolean' || event.cancelable) {
-        event.preventDefault();
-      }
-
-      if (isStopPropagation) {
-        event.stopPropagation();
-      }
-    };
-
     const clamp = (num: number, min: number, max: number): number => Math.min(Math.max(num, min), max);
 
-    // 视频点击
-    const closeSwiper = (event: any) => {
-      console.log('关闭视频');
-      // event.preventDefault();
+    const closeSwiper = () => {
       emit('close');
     };