vdesign-ui 0.2.2 → 0.2.3

package/dist/components/activityviews/index.vue

@@ -1,14 +1,14 @@
 <template>
     <div>
-        <transition name="vd-activityviews-fade">
-            <div class="vd-overlay" v-if="overlay && visible" @click="handleOverlayClick"></div>
-        </transition>
+        <div class="vd-overlay" v-if="overlay && visible" @click="handleOverlayClick"></div>
         <transition name="vd-activityviews-slide-up">
-            <div class="vd-activityviews" v-if="visible">
+            <div :class="['vd-activityviews',{'vd-activityviews--safe-area-inset-bottom':safeAreaInsetBottom}]"  :style="transitionStyle" v-if="visible">
                 <div class="vd-activityviews__header" v-if="withHeader">
                     <div class="vd-activityviews__wrapper">
                         <vd-icon v-if="backDefault" name="icon_nav_back"></vd-icon>
-                        <div v-if="title" class="vd-activityviews__title">{{ title }}</div>
+                        <div v-if="title || $slots.title" class="vd-activityviews__title">
+                            <slot name="title">{{ title }}</slot>
+                        </div>
                         <slot name="close">
                             <vd-icon v-if="closeIcon" class="vd-activityviews__close" :name="currentCloseIcon" svg
                                 @click="onCancel"></vd-icon>
@@ -40,12 +40,13 @@
 </template>
 
 <script>
+import { inBrowser } from '../utils/env';
 import { themeMixin } from '../mixins/themeMixin';
 import VdIcon from '../icon';
 import VdButton from '../button';
 
 export default {
-    name: 'vd-activityviews',
+    name: 'vd-activity-views',
     mixins: [themeMixin],  // 引入混入
     components: {
         VdIcon,
@@ -80,6 +81,22 @@ export default {
             type: Boolean,
             default: true
         },
+        safeAreaInsetBottom: {
+            type: Boolean,
+            default: true,
+        },
+        lockScroll: {
+            type: Boolean,
+            default: true
+        },
+        duration: {
+            type: Number,
+        },
+        // 指定挂载的容器，可以是选择器字符串或返回元素的函数
+        getContainer: {
+            type: [String, Function],
+            default: 'body',
+        },
     },
     data() {
         return {
@@ -94,9 +111,26 @@ export default {
         },
         isDarkTheme() {
             return this.theme === 'dark';
-        }
+        },
+         // 动态设置过渡持续时间的样式
+        transitionStyle() {
+            return {
+                transitionDuration: `${this.duration}s`,
+            };
+        },
     },
     watch: {
+        visible(val) {
+            if (inBrowser) {
+                if (this.lockScroll) {
+                    if (val) {
+                        document.body.style.overflow = 'hidden';
+                    } else {
+                        document.body.style.overflow = '';
+                    }
+                }
+            }
+        }
     },
     methods: {
         closeActivity() {
@@ -115,9 +149,36 @@ export default {
             if (this.closeOnOverlay) {
                 this.closeActivity();
             }
-        }
+        },
+         // 将弹出层添加到指定的容器中
+        appendToContainer() {
+            const container =
+                typeof this.getContainer === 'function'
+                ? this.getContainer()
+                : document.querySelector(this.getContainer);
+            if (container && container !== this.$el.parentNode) {
+                container.appendChild(this.$el);
+            }
+        },
     },
     mounted() {
+        if (inBrowser) {
+            this.appendToContainer();
+            if (this.lockScroll && this.visible) {
+                document.body.style.overflow = 'hidden';
+            }
+        }
+    },
+    beforeDestroy() {
+        if (inBrowser){
+            if(this.lockScroll) {
+                document.body.style.overflow = '';
+            }
+            // 从容器中移除弹出层元素
+            if (this.$el.parentNode) {
+            this.$el.parentNode.removeChild(this.$el);
+            }
+        }
     }
 
 }
@@ -126,23 +187,4 @@ export default {
 <style lang="less">
 @import './style.less';
 
-.vd-activityviews-fade-enter-active,
-.vd-activityviews-fade-leave-active {
-    transition: opacity 0.3s;
-}
-
-.vd-activityviews-fade-enter,
-.vd-activityviews-fade-leave-to {
-    opacity: 0;
-}
-
-.vd-activityviews-slide-up-enter-active,
-.vd-activityviews-slide-up-leave-active {
-    transition: transform 0.3s;
-}
-
-.vd-activityviews-slide-up-enter,
-.vd-activityviews-slide-up-leave-to {
-    transform: translateY(100%);
-}
 </style>

package/dist/components/activityviews/style.less

@@ -1,6 +1,11 @@
 @activityviews-prefix-cls: vd-activityviews;
 
 .@{activityviews-prefix-cls} {
+
+    &--safe-area-inset-bottom{
+        padding-bottom: constant(safe-area-inset-bottom);
+        padding-bottom: env(safe-area-inset-bottom);
+    }
     
     ::-webkit-scrollbar { width: 3px; }
     position: fixed;
@@ -13,6 +18,7 @@
     flex-direction: column;
     max-height: 80%;
     overflow: auto;
+    transition: transform .3s;
     background-color: var(--color-activityviews-bg);
     border-radius: var(--radius-activityviews-title) var(--radius-activityviews-title) 0 0;
 
@@ -132,3 +138,15 @@
         }
     }
 }
+
+
+.vd-activityviews-slide-up-enter-active,
+.vd-activityviews-slide-up-leave-active {
+    transition-property: transform;
+    transition-timing-function: ease;
+}
+
+.vd-activityviews-slide-up-enter,
+.vd-activityviews-slide-up-leave-to {
+    transform: translateY(100%);
+}

package/dist/components/dialog/index.vue

@@ -8,7 +8,11 @@
                     <div class="vd-dialog__header--img-content" v-if="$slots.imgs">
                         <slot name="imgs"></slot>
                     </div>
-                    <div class="vd-dialog__title">{{ title }}</div>
+                    <div class="vd-dialog__title" v-if="title || $slots.title">
+                        <slot name="title">
+                            {{ title }}
+                        </slot>
+                    </div>
                 </header>
                 <div class="vd-dialog__content">
                     <div class="vd-dialog__message" :class="{ 'vd-dialog__message--head': !title }"

package/dist/components/empty/index.vue

@@ -1,9 +1,17 @@
 <template>
     <div class="vd-empty" :class="wrapClasses">
-        <div class="vd-empty__img"><img :src="currentImg" alt="img"></div>
-        <p class="vd-empty__txt" :class="textClasses" v-if="description">{{ description }}</p>
-        <div class="vd-empty__footer" :class="footerClasses" v-if="$slots.btn">
-            <slot name="btn"></slot>
+        <div class="vd-empty__img"  v-if="size !== 'card'">
+            <slot name="image">
+                <img :src="currentImage" alt="empty" />
+            </slot>
+        </div>
+        <p class="vd-empty__txt" :class="textClasses" v-if="description || $slots.description">
+            <slot name="description">
+                {{ description }}
+            </slot>
+        </p>
+        <div class="vd-empty__footer" :class="footerClasses" v-if="$slots.default">
+            <slot></slot>
         </div>
     </div>
 </template>
@@ -16,24 +24,23 @@ export default {
     name: 'vd-empty',
     mixins: [themeMixin],  // 引入混入
     props: {
-        imgs: String,
-        description: String,
-        size: {
-            type:String,
-            default: 'large',  // 大场景布局，使用L尺寸 小场景内容居中使用 S 尺寸 card(空状态>1 时，不显示图片，只显示暂无数据的文字)
-        },
-        type: {
+        image:  {
             type: String,
             default: 'nodata',  // 默认类型
             validator(value) {
                 // 只接受以下类型值
-                return ['nodata', 'network', 'not-found','noposition','nomargin','nocoupons','nosearch','nonotice','noorders','noocomments'].includes(value);
+                return ['nodata', 'network', 'notfound','noposition','nomargin','nocoupons','nosearch','nonotice','noorders','noocomments'].includes(value);
             }
         },
+        description: String,
+        size: {
+            type:String,
+            default: 'large',  // 大场景布局，使用L尺寸 小场景内容居中使用 S 尺寸 card(空状态>1 时，不显示图片，只显示暂无数据的文字)
+        },
     },
     data() {
         return {
-            defaultImgs: {
+            defaultImages: {
                 nodata: {
                     light: require('./nodata.png'),
                     dark: require('./nodata-dark.png')
@@ -42,7 +49,7 @@ export default {
                     light: require('./network.png'),
                     dark: require('./network-dark.png')
                 },
-                'not-found': {
+                notfound: {
                     light: require('./404.png'),
                     dark: require('./404-dark.png')
                 },
@@ -78,35 +85,41 @@ export default {
         }
     },
     computed: {
-        currentImg() {
-            if (this.imgs) return this.imgs;
-            return this.defaultImgs[this.type][this.theme];
+        currentImage() {
+            const image = this.image;
+            if (image && (image.startsWith('http') || image.startsWith('data:image'))) {
+                return image;
+            } else if (this.defaultImages[image]) {
+                return this.defaultImages[image][this.theme];
+            } else {
+                return this.defaultImages['nodata'][this.theme];
+            }
         },
         wrapClasses() {
             return [
                 {
-                    [`${prefixCls}-${this.size}`]: this.size
+                    [`${prefixCls}--${this.size}`]: this.size
                 }
             ]
         },
         textClasses() {
             return [
                 {
-                    [`${prefixCls}-${this.size}__txt`]: this.size
+                    [`${prefixCls}--${this.size}__txt`]: this.size
                 }
             ]
         },
         footerClasses() {
             return [
                 {
-                    [`${prefixCls}-${this.size}__footer`]: this.size
+                    [`${prefixCls}--${this.size}__footer`]: this.size
                 }
             ]
         }
     },
     methods: {
         preloadImages() {
-            Object.values(this.defaultImgs).forEach((modes) => {
+            Object.values(this.defaultImages).forEach((modes) => {
                 Object.values(modes).forEach((src) => {
                     const img = new Image();
                     img.src = src;

package/dist/components/empty/style.less

@@ -1,18 +1,17 @@
 @empty-prefix-cls: vd-empty;
 
 .@{empty-prefix-cls} {
-    height: 100%;
-    margin: 0 auto;
-    text-align: center;
-    padding: 0 20px;
     display: flex;
     flex-direction: column;
     justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0 20px;
 
     &__img {
         width: 164px;
         height: 118px;
-        margin: 0 auto;
+
         img {
             width: 100%;
             height: 100%;
@@ -30,7 +29,7 @@
         justify-content: center;
     }
 
-    &-small {
+    &--small {
         &__txt {
             margin-block-start: var(--spacing-empty-small-text-margin_top);
         }
@@ -40,7 +39,7 @@
         }
     }
 
-    &-large {
+    &--large {
         &__txt {
             margin-block-start: var(--spacing-empty-large-text-margin_top);
         }
@@ -50,19 +49,9 @@
         }
     }
 
-    &-card {
+    &--card {
         height: var(--height-empty-card);
 
-        .@{empty-prefix-cls} {
-            &__img {
-                display: none;
-            }
-
-            &__footer {
-                display: none;
-            }
-        }
-
         &__txt {
             margin-block-start: 0;
             font-size: var(--en-single-f-c-r-fontSize);

package/dist/components/mixins/languageMixin.js

@@ -1,4 +1,3 @@
-// src/mixins/languageMixin.js
 import { inBrowser } from '../utils/env';
 
 export default {

package/dist/components/popup/index.js

@@ -0,0 +1,7 @@
+import Popup from './index.vue';
+
+Popup.install = function (Vue) {
+  Vue.component(Popup.name, Popup);
+};
+
+export default Popup;

package/dist/components/popup/index.vue

@@ -0,0 +1,243 @@
+<template>
+  <div>
+    <!-- 遮罩层 -->
+    <div
+      v-if="overlay && value"
+      class="popup-overlay"
+      :style="overlayCustomStyle"
+      @click="onClickOverlay"
+    ></div>
+
+    <!-- 弹出层 -->
+    <transition :name="transitionName">
+      <div
+       v-if="value"
+        :class="['popup', positionClass]"
+        :style="[popupStyle, transitionStyle]"
+      >
+        <slot></slot>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Popup',
+  props: {
+    // 弹出位置，可选值：'top'、'bottom'、'left'、'right'、'center'
+    position: {
+      type: String,
+      default: 'center',
+    },
+    // 动画持续时间，单位毫秒
+    duration: {
+      type: Number,
+      default: 300,
+    },
+    // 指定挂载的容器，可以是选择器字符串或返回元素的函数
+    getContainer: {
+      type: [String, Function],
+      default: 'body',
+    },
+    // 是否锁定滚动
+    lockScroll: {
+      type: Boolean,
+      default: true,
+    },
+    // 是否适配底部安全区（针对全面屏手机）
+    safeAreaInsetBottom: {
+      type: Boolean,
+      default: false,
+    },
+    // 控制弹层显示或隐藏，支持 v-model 双向绑定
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否显示遮罩层
+    overlay: {
+      type: Boolean,
+      default: true,
+    },
+    // 遮罩层的自定义样式
+    overlayStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 是否点击遮罩层关闭弹出层
+    closeOnClickOverlay: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    // 根据 position 属性计算对应的类名
+    positionClass() {
+      return `popup-${this.position}`;
+    },
+    // 根据 position 属性计算对应的过渡名称
+    transitionName() {
+      return `popup-slide-${this.position}`;
+    },
+    // 根据 safeAreaInsetBottom 属性计算弹出层的样式
+    popupStyle() {
+      const style = {};
+      if (this.safeAreaInsetBottom && (this.position === 'bottom' || this.position === 'center')) {
+        style.paddingBottom = 'env(safe-area-inset-bottom)';
+      }
+      return style;
+    },
+    // 动态设置过渡持续时间的样式
+    transitionStyle() {
+      return {
+        transitionDuration: `${this.duration}ms`,
+      };
+    },
+    // 合并遮罩层的自定义样式
+    overlayCustomStyle() {
+      return Object.assign(
+        {
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        },
+        this.overlayStyle
+      );
+    },
+  },
+  watch: {
+    // 监听 value 属性的变化，控制弹出层的显示和隐藏
+    value(val) {
+      if (val) {
+        this.openPopup();
+      } else {
+        this.closePopup();
+      }
+    },
+  },
+  mounted() {
+    // 组件挂载时，根据初始的 value 值决定是否打开弹出层
+    if (this.value) {
+      this.openPopup();
+    }
+  },
+  methods: {
+    // 打开弹出层
+    openPopup() {
+      if (this.lockScroll) {
+        document.body.style.overflow = 'hidden';
+      }
+      this.appendToContainer();
+    },
+    // 关闭弹出层
+    closePopup() {
+      if (this.lockScroll) {
+        document.body.style.overflow = '';
+      }
+    },
+    // 将弹出层添加到指定的容器中
+    appendToContainer() {
+      const container =
+        typeof this.getContainer === 'function'
+          ? this.getContainer()
+          : document.querySelector(this.getContainer);
+      if (container && container !== this.$el.parentNode) {
+        container.appendChild(this.$el);
+      }
+    },
+    // 点击遮罩层关闭弹出层
+    onClickOverlay() {
+      if (this.closeOnClickOverlay) {
+        this.$emit('input', false);
+      }
+    },
+  },
+  beforeDestroy() {
+    // 组件销毁前，恢复滚动
+    if (this.lockScroll) {
+      document.body.style.overflow = '';
+    }
+  },
+};
+</script>
+
+<style scoped>
+.popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+}
+
+.popup {
+  position: fixed;
+  z-index: 1000;
+}
+
+.popup-center {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.popup-top {
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.popup-bottom {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+
+.popup-left {
+  top: 0;
+  left: 0;
+  height: 100%;
+}
+
+.popup-right {
+  top: 0;
+  right: 0;
+  height: 100%;
+}
+
+/* 过渡效果 */
+.popup-slide-center-enter-active,
+.popup-slide-center-leave-active,
+.popup-slide-top-enter-active,
+.popup-slide-top-leave-active,
+.popup-slide-bottom-enter-active,
+.popup-slide-bottom-leave-active,
+.popup-slide-left-enter-active,
+.popup-slide-left-leave-active,
+.popup-slide-right-enter-active,
+.popup-slide-right-leave-active {
+  transition-property: all;
+  transition-timing-function: ease;
+}
+
+.popup-slide-top-enter,
+.popup-slide-top-leave-to {
+  transform: translateY(-100%);
+}
+.popup-slide-bottom-enter,
+.popup-slide-bottom-leave-to {
+  transform: translateY(100%);
+}
+.popup-slide-left-enter,
+.popup-slide-left-leave-to {
+  transform: translateX(-100%);
+}
+.popup-slide-right-enter,
+.popup-slide-right-leave-to {
+  transform: translateX(100%);
+}
+.popup-slide-center-enter,
+.popup-slide-center-leave-to {
+  opacity: 0;
+}
+</style>