first commit

target/classes/static/components/plugins/vantMore/vantTextDialog.vue

@@ -0,0 +1,176 @@
+<template>
+    <van-popup :round="true" :safe-area-inset-bottom="false" :close-on-click-overlay="ableClose" v-model="show">
+        <div class="van-text-dialog__wrapper">
+            <!-- 关闭图标 -->
+            <van-icon v-if="ableClose" role="button" tabindex="0" name="cross" class="van-text-dialog__close-icon" @click="close"></van-icon>
+
+            <!-- 标题 -->
+            <div class="van-text-dialog__title">
+                <slot name="title">{{ title }}</slot>
+            </div>
+
+            <!-- 内容主体 -->
+            <div class="van-text-dialog__body">
+                <template v-if="$slots.body">
+                    <slot name="body"></slot>
+                </template>
+                <template v-else>
+                    <div v-if="typeof body === 'string'" class="van-text-dialog__content">
+                        {{ body }}
+                    </div>
+                    <template v-else-if="Array.isArray(body)">
+                        <div v-for="(item, index) in body" :key="index" class="van-text-dialog__part">
+                            <div v-if="item.title" class="van-text-dialog__subtitle">
+                                {{ item.title }}
+                            </div>
+                            <div class="van-text-dialog__content">
+                                {{ item.content }}
+                            </div>
+                        </div>
+                    </template>
+                </template>
+            </div>
+
+            <!-- 底部线 & 遮罩 -->
+            <div v-if="mask" class="van-text-dialog__line van-hairline--bottom">
+                <div class="van-text-dialog__mask"></div>
+            </div>
+
+            <!-- 复选框 -->
+            <div v-if="checkboxLabel || $slots.checkboxLabel" class="van-text-dialog__checkbox">
+                <van-checkbox plain :icon-size="16" :disabled="!ableCheck" v-model="proxyCheck">
+                    <slot name="checkbox-label">{{ checkboxLabel }}</slot>
+                </van-checkbox>
+            </div>
+
+            <!-- 确认按钮 -->
+            <van-button v-if="buttonText" type="primary" :disabled="!ableConfirm" block class="van-text-dialog__button" @click="confirm">
+                {{ buttonText }}
+            </van-button>
+
+            <!-- 默认插槽 -->
+            <slot></slot>
+        </div>
+    </van-popup>
+</template>
+
+<script>
+module.exports = {
+    name: "vantTextDialog",
+    props: {
+        show: Boolean,
+        title: String,
+        body: [Array, String],
+        mask: Boolean,
+        check: {
+            type: Boolean,
+            default: true
+        },
+        checkboxLabel: String,
+        buttonText: String,
+        ableClose: {
+            type: Boolean,
+            default: true
+        },
+        ableCheck: {
+            type: Boolean,
+            default: true
+        },
+        ableConfirm: {
+            type: Boolean,
+            default: true
+        }
+    },
+    computed: {
+        proxyCheck: {
+            get() {
+                return this.check
+            },
+            set(val) {
+                this.$emit("toggle", val)
+            }
+        }
+    },
+    methods: {
+        close() {
+            this.$emit("close")
+        },
+        confirm() {
+            this.$emit("confirm")
+        }
+    }
+}
+</script>
+
+<style scoped>
+.van-text-dialog__wrapper {
+    min-width: 300px;
+    background: #fff;
+    padding: 18px 20px 20px;
+}
+.van-text-dialog__close-icon {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    font-size: 14px;
+    color: #999;
+}
+.van-text-dialog__title {
+    margin: 0 14px;
+    line-height: 25px;
+    text-align: center;
+    font-size: 18px;
+    color: #111;
+    font-weight: 700;
+}
+.van-text-dialog__body {
+    margin-top: 18px;
+    position: relative;
+    overflow-y: scroll;
+    max-height: 350px;
+}
+.van-text-dialog__part {
+    margin-bottom: 16px;
+}
+.van-text-dialog__subtitle {
+    margin-bottom: 4px;
+    line-height: 24px;
+    font-size: 14px;
+    font-weight: 700;
+    color: #111;
+}
+.van-text-dialog__content {
+    margin-bottom: 16px;
+    line-height: 24px;
+    font-size: 14px;
+    color: #333;
+}
+.van-text-dialog__line {
+    margin-top: 1px;
+    position: relative;
+}
+.van-text-dialog__line::after {
+    border-color: #e2e2e2;
+}
+.van-text-dialog__mask {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 58px;
+    z-index: 999;
+    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 50%, #fff 100%);
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 50%, #fff 100%);
+}
+.van-text-dialog__checkbox {
+    margin-top: 12px;
+}
+.van-text-dialog__checkbox-label {
+    margin-left: 8px;
+    font-size: 15px;
+    color: #666;
+}
+.van-text-dialog__button {
+    margin-top: 24px;
+}
+</style>