vdesign-ui 0.2.20 → 0.3.0

package/dist/components/activityviews/index.vue

@@ -1,192 +1,192 @@
-<template>
-    <div>
-        <div class="vd-activity-views__overlay" v-if="overlay && visible" @click="handleOverlayClick"></div>
-        <transition name="vd-activity-views-slide-up">
-            <div :class="['vd-activity-views',{'vd-activity-views--safe-area-inset-bottom':safeAreaInsetBottom}]"  :style="transitionStyle" v-if="visible">
-                <div class="vd-activity-views__header" v-if="withHeader">
-                    <div class="vd-activity-views__wrapper">
-                        <vd-icon v-if="backDefault" name="icon_nav_back"></vd-icon>
-                        <div v-if="title || $slots.title" class="vd-activity-views__title">
-                            <slot name="title">{{ title }}</slot>
-                        </div>
-                        <slot name="close">
-                            <vd-icon v-if="closeIcon" class="vd-activity-views__close" :name="currentCloseIcon" svg
-                                @click="onCancel"></vd-icon>
-                            <vd-button v-if="closeBtn" class="vd-activity-views__done" type="primary_text" size="large"
-                                @click="onCancel">{{ closeBtn }}</vd-button>
-                        </slot>
-                    </div>
-                    <p v-if="description" class="vd-activity-views__description">{{ description }}</p>
-                </div>
-                <div v-if="withBar" class="vd-activity-views__bar"></div>
-                <div :class="['vd-activity-views__body', { 'vd-activity-views__body--action': actionSheet }]">
-                    <div v-if="actionSheet" class="vd-activity-views__action">
-                        <p v-if="title || $slots.title" class="vd-activity-views__action-title vd-hairline--bottom">
-                            <slot name="title">{{ title }}</slot>
-                        </p>
-                        <div class="vd-activity-views__actions">
-                            <vd-button v-for="(item, index) in actions" block size="large" :type="item.type"
-                                :key="index" :class="{ 'vd-hairline--bottom': index !== actions.length - 1 }"
-                                :disabled="item.disabled" @click.stop="onSelect(item)">{{ item.name }}</vd-button>
-                        </div>
-                        <div v-if="cancelText" class="vd-activity-views__gap"></div>
-                        <div v-if="cancelText" class="vd-activity-views__cancel" @click="onCancel">
-                            <vd-button block type="tertiary" size="large">{{ cancelText }}</vd-button>
-                        </div>
-                    </div>
-                    <slot v-else></slot>
-                </div>
-            </div>
-        </transition>
-    </div>
-</template>
-
-<script>
-import { inBrowser } from '../utils/env';
-import { themeMixin } from '../mixins/themeMixin';
-import VdIcon from '../icon';
-import VdButton from '../button';
-
-export default {
-    name: 'vd-activity-views',
-    mixins: [themeMixin],  // 引入混入
-    components: {
-        VdIcon,
-        VdButton
-    },
-    props: {
-        value: Boolean,
-        title: String,
-        backDefault: Boolean,
-        closeIcon: Boolean,
-        closeBtn: String,
-        description: String,
-        withHeader: {
-            type: Boolean,
-            default: true
-        },
-        withBar: Boolean,
-        actionSheet: Boolean,
-        actions: {
-            type: Array,
-            default() {
-                return [];
-            }
-        },
-        cancelText: String,
-        overlay: {
-            type: Boolean,
-            default: true
-        },
-        disabled: Boolean,
-        closeOnOverlay: {
-            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 {
-        }
-    },
-    computed: {
-        visible() {
-            return this.value
-        },
-        currentCloseIcon() {
-            return this.isDarkTheme ? 'icon_btn_dialogclose_dark_svg' : 'icon_btn_dialogclose_svg';
-        },
-        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() {
-            this.$emit('input', false);
-        },
-        onCancel() {
-            this.closeActivity();
-            this.$emit('cancel');
-        },
-        onSelect(item) {
-            if (!item.disabled) {
-                this.$emit('select', item);
-            }
-        },
-        handleOverlayClick() {
-            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);
-            }
-        }
-    }
-
-}
-</script>
-
-<style lang="less">
-@import './style.less';
-
-</style>
+<template>
+    <div>
+        <div class="vd-activity-views__overlay" v-if="overlay && visible" @click="handleOverlayClick"></div>
+        <transition name="vd-activity-views-slide-up">
+            <div :class="['vd-activity-views',{'vd-activity-views--safe-area-inset-bottom':safeAreaInsetBottom}]"  :style="transitionStyle" v-if="visible">
+                <div class="vd-activity-views__header" v-if="withHeader">
+                    <div class="vd-activity-views__wrapper">
+                        <vd-icon v-if="backDefault" name="icon_nav_back"></vd-icon>
+                        <div v-if="title || $slots.title" class="vd-activity-views__title">
+                            <slot name="title">{{ title }}</slot>
+                        </div>
+                        <slot name="close">
+                            <vd-icon v-if="closeIcon" class="vd-activity-views__close" :name="currentCloseIcon" svg
+                                @click="onCancel"></vd-icon>
+                            <vd-button v-if="closeBtn" class="vd-activity-views__done" type="primary_text" size="large"
+                                @click="onCancel">{{ closeBtn }}</vd-button>
+                        </slot>
+                    </div>
+                    <p v-if="description" class="vd-activity-views__description">{{ description }}</p>
+                </div>
+                <div v-if="withBar" class="vd-activity-views__bar"></div>
+                <div :class="['vd-activity-views__body', { 'vd-activity-views__body--action': actionSheet }]">
+                    <div v-if="actionSheet" class="vd-activity-views__action">
+                        <p v-if="title || $slots.title" class="vd-activity-views__action-title vd-hairline--bottom">
+                            <slot name="title">{{ title }}</slot>
+                        </p>
+                        <div class="vd-activity-views__actions">
+                            <vd-button v-for="(item, index) in actions" block size="large" :type="item.type"
+                                :key="index" :class="{ 'vd-hairline--bottom': index !== actions.length - 1 }"
+                                :disabled="item.disabled" @click.stop="onSelect(item)">{{ item.name }}</vd-button>
+                        </div>
+                        <div v-if="cancelText" class="vd-activity-views__gap"></div>
+                        <div v-if="cancelText" class="vd-activity-views__cancel" @click="onCancel">
+                            <vd-button block type="tertiary" size="large">{{ cancelText }}</vd-button>
+                        </div>
+                    </div>
+                    <slot v-else></slot>
+                </div>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+import { inBrowser } from '../utils/env';
+import { themeMixin } from '../mixins/themeMixin';
+import VdIcon from '../icon';
+import VdButton from '../button';
+
+export default {
+    name: 'vd-activity-views',
+    mixins: [themeMixin],  // 引入混入
+    components: {
+        VdIcon,
+        VdButton
+    },
+    props: {
+        value: Boolean,
+        title: String,
+        backDefault: Boolean,
+        closeIcon: Boolean,
+        closeBtn: String,
+        description: String,
+        withHeader: {
+            type: Boolean,
+            default: true
+        },
+        withBar: Boolean,
+        actionSheet: Boolean,
+        actions: {
+            type: Array,
+            default() {
+                return [];
+            }
+        },
+        cancelText: String,
+        overlay: {
+            type: Boolean,
+            default: true
+        },
+        disabled: Boolean,
+        closeOnOverlay: {
+            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 {
+        }
+    },
+    computed: {
+        visible() {
+            return this.value
+        },
+        currentCloseIcon() {
+            return this.isDarkTheme ? 'icon_btn_dialogclose_dark_svg' : 'icon_btn_dialogclose_svg';
+        },
+        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() {
+            this.$emit('input', false);
+        },
+        onCancel() {
+            this.closeActivity();
+            this.$emit('cancel');
+        },
+        onSelect(item) {
+            if (!item.disabled) {
+                this.$emit('select', item);
+            }
+        },
+        handleOverlayClick() {
+            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);
+            }
+        }
+    }
+
+}
+</script>
+
+<style lang="less">
+@import './style.less';
+
+</style>