@10yun/cv-mobile-ui 0.5.26 → 0.5.29

package/uview-plus/components/u-popup/style.scss

@@ -1,75 +1,86 @@
-@import '../../libs/css/components.scss';
-$u-popup-flex: 1 !default;
-$u-popup-content-background-color: #fff !default;
-
-.u-popup {
-  flex: $u-popup-flex;
-
-  &__content {
-    background-color: $u-popup-content-background-color;
-    position: relative;
-
-    &--round-top {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      border-bottom-left-radius: 10px;
-      border-bottom-right-radius: 10px;
-    }
-
-    &--round-left {
-      border-top-left-radius: 0;
-      border-top-right-radius: 10px;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 10px;
-    }
-
-    &--round-right {
-      border-top-left-radius: 10px;
-      border-top-right-radius: 0;
-      border-bottom-left-radius: 10px;
-      border-bottom-right-radius: 0;
-    }
-
-    &--round-bottom {
-      border-top-left-radius: 10px;
-      border-top-right-radius: 10px;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    &--round-center {
-      border-top-left-radius: 10px;
-      border-top-right-radius: 10px;
-      border-bottom-left-radius: 10px;
-      border-bottom-right-radius: 10px;
-    }
-
-    &__close {
-      position: absolute;
-
-      &--hover {
-        opacity: 0.4;
-      }
-    }
-
-    &__close--top-left {
-      top: 15px;
-      left: 15px;
-    }
-
-    &__close--top-right {
-      top: 15px;
-      right: 15px;
-    }
-
-    &__close--bottom-left {
-      bottom: 15px;
-      left: 15px;
-    }
-
-    &__close--bottom-right {
-      right: 15px;
-      bottom: 15px;
-    }
-  }
-}
+@import '../../libs/css/components.scss';
+$u-popup-flex: 1 !default;
+$u-popup-content-background-color: #fff !default;
+
+.u-popup {
+  flex: $u-popup-flex;
+
+  &__trigger {
+    position: relative;
+    &__cover {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+  }
+
+  &__content {
+    background-color: $u-popup-content-background-color;
+    position: relative;
+
+    &--round-top {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-bottom-left-radius: 10px;
+      border-bottom-right-radius: 10px;
+    }
+
+    &--round-left {
+      border-top-left-radius: 0;
+      border-top-right-radius: 10px;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 10px;
+    }
+
+    &--round-right {
+      border-top-left-radius: 10px;
+      border-top-right-radius: 0;
+      border-bottom-left-radius: 10px;
+      border-bottom-right-radius: 0;
+    }
+
+    &--round-bottom {
+      border-top-left-radius: 10px;
+      border-top-right-radius: 10px;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &--round-center {
+      border-top-left-radius: 10px;
+      border-top-right-radius: 10px;
+      border-bottom-left-radius: 10px;
+      border-bottom-right-radius: 10px;
+    }
+
+    &__close {
+      position: absolute;
+
+      &--hover {
+        opacity: 0.4;
+      }
+    }
+
+    &__close--top-left {
+      top: 15px;
+      left: 15px;
+    }
+
+    &__close--top-right {
+      top: 15px;
+      right: 15px;
+    }
+
+    &__close--bottom-left {
+      bottom: 15px;
+      left: 15px;
+    }
+
+    &__close--bottom-right {
+      right: 15px;
+      bottom: 15px;
+    }
+  }
+}

package/uview-plus/components/u-popup/u-popup.vue

@@ -1 +1,250 @@
-<template>
  <view class="u-popup">
    <u-overlay
      :show="show"
      @click="overlayClick"
      v-if="overlay"
      :duration="overlayDuration"
      :customStyle="overlayStyle"
      :opacity="overlayOpacity"
    ></u-overlay>
    <u-transition
      :show="show"
      :customStyle="transitionStyle"
      :mode="position"
      :duration="duration"
      @afterEnter="afterEnter"
      @click="clickHandler"
    >
      <view class="u-popup__content" :style="[contentStyle]" @tap.stop="noop">
        <u-status-bar v-if="safeAreaInsetTop"></u-status-bar>
        <slot></slot>
        <view
          v-if="closeable"
          @tap.stop="close"
          class="u-popup__content__close"
          :class="['u-popup__content__close--' + closeIconPos]"
          hover-class="u-popup__content__close--hover"
          hover-stay-time="150"
        >
          <u-icon name="close" color="#909399" size="18" bold></u-icon>
        </view>
        <u-safe-bottom v-if="safeAreaInsetBottom"></u-safe-bottom>
      </view>
    </u-transition>
  </view>
 * popup 弹窗
 * @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
 * @tutorial https://ijry.github.io/uview-plus/components/popup.html
 * @property {Boolean}			show				是否展示弹窗 (默认 false )
 * @property {Boolean}			overlay				是否显示遮罩 （默认 true ）
 * @property {String}			mode				弹出方向（默认 'bottom' ）
 * @property {String | Number}	duration			动画时长，单位ms （默认 300 ）
 * @property {String | Number}	overlayDuration			遮罩层动画时长，单位ms （默认 350 ）
 * @property {Boolean}			closeable			是否显示关闭图标（默认 false ）
 * @property {Object | String}	overlayStyle		自定义遮罩的样式
 * @property {String | Number}	overlayOpacity		遮罩透明度，0-1之间（默认 0.5）
 * @property {Boolean}			closeOnClickOverlay	点击遮罩是否关闭弹窗 （默认  true ）
 * @property {String | Number}	zIndex				层级 （默认 10075 ）
 * @property {Boolean}			safeAreaInsetBottom	是否为iPhoneX留出底部安全距离 （默认 true ）
 * @property {Boolean}			safeAreaInsetTop	是否留出顶部安全距离（状态栏高度） （默认 false ）
 * @property {String}			closeIconPos		自定义关闭图标位置（默认 'top-right' ）
 * @property {String | Number}	round				圆角值（默认 0）
 * @property {Boolean}			zoom				当mode=center时 是否开启缩放（默认 true ）
 * @property {Object}			customStyle			组件的样式，对象形式
 * @event {Function} open 弹出层打开
 * @event {Function} close 弹出层收起
 * @example <u-popup v-model="show"><text>出淤泥而不染，濯清涟而不妖</text></u-popup>
 */
  name: 'u-popup',
  mixins: [mpMixin, mixin, props],
  data() {
    return {
      overlayDuration: this.duration + 50
    };
  },
  watch: {
    show(newValue, oldValue) {
      if (newValue === true) {
        // #ifdef MP-WEIXIN
        const children = this.$children;
        this.retryComputedComponentRect(children);
        // #endif
      }
    }
  },
  computed: {
    transitionStyle() {
      const style = {
        zIndex: this.zIndex,
        position: 'fixed',
        display: 'flex'
      };
      style[this.mode] = 0;
      if (this.mode === 'left') {
        return uni.$u.deepMerge(style, {
          bottom: 0,
          top: 0
        });
      } else if (this.mode === 'right') {
        return uni.$u.deepMerge(style, {
          bottom: 0,
          top: 0
        });
      } else if (this.mode === 'top') {
        return uni.$u.deepMerge(style, {
          left: 0,
          right: 0
        });
      } else if (this.mode === 'bottom') {
        return uni.$u.deepMerge(style, {
          left: 0,
          right: 0
        });
      } else if (this.mode === 'center') {
        return uni.$u.deepMerge(style, {
          alignItems: 'center',
          'justify-content': 'center',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0
        });
      }
    },
    contentStyle() {
      const style = {};
      // 通过设备信息的safeAreaInsets值来判断是否需要预留顶部状态栏和底部安全局的位置
      // 不使用css方案，是因为nvue不支持css的iPhoneX安全区查询属性
      const { safeAreaInsets } = uni.$u.sys();
      if (this.mode !== 'center') {
        style.flex = 1;
      }
      // 背景色，一般用于设置为transparent，去除默认的白色背景
      if (this.bgColor) {
        style.backgroundColor = this.bgColor;
      }
      if (this.round) {
        const value = uni.$u.addUnit(this.round);
        if (this.mode === 'top') {
          style.borderBottomLeftRadius = value;
          style.borderBottomRightRadius = value;
        } else if (this.mode === 'bottom') {
          style.borderTopLeftRadius = value;
          style.borderTopRightRadius = value;
        } else if (this.mode === 'center') {
          style.borderRadius = value;
        }
      }
      return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
    },
    position() {
      if (this.mode === 'center') {
        return this.zoom ? 'fade-zoom' : 'fade';
      }
      if (this.mode === 'left') {
        return 'slide-left';
      }
      if (this.mode === 'right') {
        return 'slide-right';
      }
      if (this.mode === 'bottom') {
        return 'slide-up';
      }
      if (this.mode === 'top') {
        return 'slide-down';
      }
    }
  },
  methods: {
    // 点击遮罩
    overlayClick() {
      if (this.closeOnClickOverlay) {
        this.$emit('close');
      }
    },
    close(e) {
      this.$emit('close');
    },
    afterEnter() {
      this.$emit('open');
    },
    clickHandler() {
      // 由于中部弹出时，其u-transition占据了整个页面相当于遮罩，此时需要发出遮罩点击事件，是否无法通过点击遮罩关闭弹窗
      if (this.mode === 'center') {
        this.overlayClick();
      }
      this.$emit('click');
    },
    // #ifdef MP-WEIXIN
    retryComputedComponentRect(children) {
      // 组件内部需要计算节点的组件
      const names = [
        'u-calendar-month',
        'u-album',
        'u-collapse-item',
        'u-dropdown',
        'u-index-item',
        'u-index-list',
        'u-line-progress',
        'u-list-item',
        'u-rate',
        'u-read-more',
        'u-row',
        'u-row-notice',
        'u-scroll-list',
        'u-skeleton',
        'u-slider',
        'u-steps-item',
        'u-sticky',
        'u-subsection',
        'u-swipe-action-item',
        'u-tabbar',
        'u-tabs',
        'u-tooltip'
      ];
      // 历遍所有的子组件节点
      for (let i = 0; i < children.length; i++) {
        const child = children[i];
        // 拿到子组件的子组件
        const grandChild = child.$children;
        // 判断如果在需要重新初始化的组件数组中名中，并且存在init方法的话，则执行
        if (names.includes(child.$options.name) && typeof child?.init === 'function') {
          // 需要进行一定的延时，因为初始化页面需要时间
          uni.$u.sleep(50).then(() => {
            child.init();
          });
        }
        // 如果子组件还有孙组件，进行递归历遍
        if (grandChild.length) {
          this.retryComputedComponentRect(grandChild);
        }
      }
    }
    // #endif
  }
+<template>
+  <view class="u-popup" :class="[customClass]" :style="{ width: show == false ? '0px' : '', height: show == false ? '0px' : '' }">
+    <view class="u-popup__trigger">
+      <slot name="trigger"></slot>
+      <view @click="open" class="u-popup__trigger__cover"></view>
+    </view>
+    <u-overlay
+      :show="show"
+      @click="overlayClick"
+      v-if="overlay"
+      :zIndex="zIndex"
+      :duration="overlayDuration"
+      :customStyle="overlayStyle"
+      :opacity="overlayOpacity"
+    ></u-overlay>
+    <u-transition
+      :show="show"
+      :customStyle="transitionStyle"
+      :mode="position"
+      :duration="duration"
+      @afterEnter="afterEnter"
+      @click="clickHandler"
+    >
+      <!-- @click.stop不能去除，去除会导致居中模式下点击内容区域触发关闭弹窗 -->
+      <view class="u-popup__content" :style="[contentStyle]" @click.stop="noop" @touchmove.stop.prevent="noop">
+        <u-status-bar v-if="safeAreaInsetTop"></u-status-bar>
+        <slot></slot>
+        <view
+          v-if="closeable"
+          @tap.stop="close"
+          class="u-popup__content__close"
+          :class="['u-popup__content__close--' + closeIconPos]"
+          hover-class="u-popup__content__close--hover"
+          hover-stay-time="150"
+        >
+          <u-icon name="close" color="#909399" size="18" bold></u-icon>
+        </view>
+        <u-safe-bottom v-if="safeAreaInsetBottom"></u-safe-bottom>
+      </view>
+    </u-transition>
+  </view>
+</template>
+<script>
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addUnit, addStyle, deepMerge, sleep, getWindowInfo } from '../../libs/function/index';
+/**
+ * popup 弹窗
+ * @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
+ * @tutorial https://ijry.github.io/uview-plus/components/popup.html
+ * @property {Boolean}			show				是否展示弹窗 (默认 false )
+ * @property {Boolean}			overlay				是否显示遮罩 （默认 true ）
+ * @property {String}			mode				弹出方向（默认 'bottom' ）
+ * @property {String | Number}	duration			动画时长，单位ms （默认 300 ）
+ * @property {String | Number}	overlayDuration		遮罩层动画时长，单位ms （默认 350 ）
+ * @property {Boolean}			closeable			是否显示关闭图标（默认 false ）
+ * @property {Object | String}	overlayStyle		自定义遮罩的样式
+ * @property {String | Number}	overlayOpacity		遮罩透明度，0-1之间（默认 0.5）
+ * @property {Boolean}			closeOnClickOverlay	点击遮罩是否关闭弹窗 （默认  true ）
+ * @property {String | Number}	zIndex				层级 （默认 10075 ）
+ * @property {Boolean}			safeAreaInsetBottom	是否为iPhoneX留出底部安全距离 （默认 true ）
+ * @property {Boolean}			safeAreaInsetTop	是否留出顶部安全距离（状态栏高度） （默认 false ）
+ * @property {String}			closeIconPos		自定义关闭图标位置（默认 'top-right' ）
+ * @property {String | Number}	round				圆角值（默认 0）
+ * @property {Boolean}			zoom				当mode=center时 是否开启缩放（默认 true ）
+ * @property {Object}			customStyle			组件的样式，对象形式
+ * @event {Function} open 弹出层打开
+ * @event {Function} close 弹出层收起
+ * @example <u-popup v-model:show="show"><text>出淤泥而不染，濯清涟而不妖</text></u-popup>
+ */
+export default {
+  name: 'u-popup',
+  mixins: [mpMixin, mixin, props],
+  data() {
+    return {
+      overlayDuration: this.duration + 50
+    };
+  },
+  watch: {
+    show(newValue, oldValue) {
+      if (newValue === true) {
+        // #ifdef MP-WEIXIN
+        const children = this.$children;
+        this.retryComputedComponentRect(children);
+        // #endif
+      }
+    }
+  },
+  computed: {
+    transitionStyle() {
+      const style = {
+        zIndex: this.zIndex,
+        position: 'fixed',
+        display: 'flex'
+      };
+      style[this.mode] = 0;
+      if (this.mode === 'left') {
+        return deepMerge(style, {
+          bottom: 0,
+          top: 0
+        });
+      } else if (this.mode === 'right') {
+        return deepMerge(style, {
+          bottom: 0,
+          top: 0
+        });
+      } else if (this.mode === 'top') {
+        return deepMerge(style, {
+          left: 0,
+          right: 0
+        });
+      } else if (this.mode === 'bottom') {
+        return deepMerge(style, {
+          left: 0,
+          right: 0
+        });
+      } else if (this.mode === 'center') {
+        return deepMerge(style, {
+          alignItems: 'center',
+          'justify-content': 'center',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0
+        });
+      }
+    },
+    contentStyle() {
+      const style = {};
+      // 通过设备信息的safeAreaInsets值来判断是否需要预留顶部状态栏和底部安全局的位置
+      // 不使用css方案，是因为nvue不支持css的iPhoneX安全区查询属性
+      const { safeAreaInsets } = getWindowInfo();
+      if (this.mode !== 'center') {
+        style.flex = 1;
+      }
+      // 背景色，一般用于设置为transparent，去除默认的白色背景
+      if (this.bgColor) {
+        style.backgroundColor = this.bgColor;
+      }
+      if (this.round) {
+        const value = addUnit(this.round);
+        if (this.mode === 'top') {
+          style.borderBottomLeftRadius = value;
+          style.borderBottomRightRadius = value;
+        } else if (this.mode === 'bottom') {
+          style.borderTopLeftRadius = value;
+          style.borderTopRightRadius = value;
+        } else if (this.mode === 'center') {
+          style.borderRadius = value;
+        }
+      }
+      return deepMerge(style, addStyle(this.customStyle));
+    },
+    position() {
+      if (this.mode === 'center') {
+        return this.zoom ? 'fade-zoom' : 'fade';
+      }
+      if (this.mode === 'left') {
+        return 'slide-left';
+      }
+      if (this.mode === 'right') {
+        return 'slide-right';
+      }
+      if (this.mode === 'bottom') {
+        return 'slide-up';
+      }
+      if (this.mode === 'top') {
+        return 'slide-down';
+      }
+    }
+  },
+  emits: ['open', 'close', 'click', 'update:show'],
+  methods: {
+    // 点击遮罩
+    overlayClick() {
+      if (this.closeOnClickOverlay) {
+        this.$emit('update:show', false);
+        this.$emit('close');
+      }
+    },
+    open(e) {
+      this.$emit('update:show', true);
+    },
+    close(e) {
+      this.$emit('update:show', false);
+      this.$emit('close');
+    },
+    afterEnter() {
+      this.$emit('open');
+    },
+    clickHandler() {
+      // 由于中部弹出时，其u-transition占据了整个页面相当于遮罩，此时需要发出遮罩点击事件，是否无法通过点击遮罩关闭弹窗
+      if (this.mode === 'center') {
+        this.overlayClick();
+      }
+      this.$emit('click');
+    },
+    // #ifdef MP-WEIXIN
+    retryComputedComponentRect(children) {
+      // 组件内部需要计算节点的组件
+      const names = [
+        'u-calendar-month',
+        'u-album',
+        'u-collapse-item',
+        'u-dropdown',
+        'u-index-item',
+        'u-index-list',
+        'u-line-progress',
+        'u-list-item',
+        'u-rate',
+        'u-read-more',
+        'u-row',
+        'u-row-notice',
+        'u-scroll-list',
+        'u-skeleton',
+        'u-slider',
+        'u-steps-item',
+        'u-sticky',
+        'u-subsection',
+        'u-swipe-action-item',
+        'u-tabbar',
+        'u-tabs',
+        'u-tooltip'
+      ];
+      // 历遍所有的子组件节点
+      for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+        // 拿到子组件的子组件
+        const grandChild = child.$children;
+        // 判断如果在需要重新初始化的组件数组中名中，并且存在init方法的话，则执行
+        if (names.includes(child.$options.name) && typeof child?.init === 'function') {
+          // 需要进行一定的延时，因为初始化页面需要时间
+          sleep(50).then(() => {
+            child.init();
+          });
+        }
+        // 如果子组件还有孙组件，进行递归历遍
+        if (grandChild.length) {
+          this.retryComputedComponentRect(grandChild);
+        }
+      }
+    }
+    // #endif
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>