ui-process-h5 0.1.32 → 0.1.36

package/packages/components/process/src/popup.vue

@@ -1,90 +1,122 @@
 <template>
-    <div
-        class="top-popup"
-        :style="
-            show ? 'transform: translateY(0)' : 'transform: translateY(100%)'
-        "
-    >
-        <div class="top-popup-header">
-            <div class="header-cancel" @click="handleCancel">
-                {{ cancelText }}
+    <div>
+        <div
+            v-if="!isTips"
+            class="top-popup"
+            :style="
+                show
+                    ? 'transform: translateY(0)'
+                    : 'transform: translateY(100%)'
+            "
+        >
+            <div class="top-popup-header">
+                <div class="header-cancel" @click="handleCancel">
+                    {{ cancelText }}
+                </div>
+                <div class="header-title">{{ titleText }}</div>
+                <div class="header-comfig" @click="handleComfig">
+                    {{ comfigText }}
+                </div>
             </div>
-            <div class="header-title">{{ titleText }}</div>
-            <div class="header-comfig" @click="handleComfig">
-                {{ comfigText }}
+            <div class="top-popup-body">
+                <slot name="default"></slot>
             </div>
         </div>
-        <div class="top-popup-body">
-            <slot name="default"></slot>
+        <div
+            class="top-tips"
+            v-else
+            :style="
+                show
+                    ? 'visibility: visible; opacity: 1; transform: scale(1)'
+                    : 'visibility: hidden; opacity: 0; transform: scale(1.2)'
+            "
+        >
+            <div class="top-tips-header">{{ titleText }}</div>
+            <div class="top-tips-body">{{ context }}</div>
+            <div class="top-tips-footer">
+                <div class="top-tips-btn" @click="handleCancel">
+                    {{ cancelText }}
+                </div>
+                <div class="top-tips-btn" @click="handleComfig">
+                    {{ comfigText }}
+                </div>
+            </div>
         </div>
+        <div
+            class="top-popup-mask"
+            :style="
+                show && isMask
+                    ? 'visibility: visible; opacity: .7;'
+                    : 'visibility: hidden; opacity: 0;'
+            "
+            @click="isMaskClose && handleClose()"
+        ></div>
     </div>
-    <div
-        class="top-popup-mask"
-        v-if="show && isMask"
-        @click="isMaskClose && handleClose()"
-    ></div>
 </template>
 <script>
-import { defineComponent, ref, watch, computed, onMounted } from "vue-demi";
-
-export default defineComponent({
+export default {
     name: "TopPopup",
     props: {
-        titleText: { default: "top-popup", type: String },
-        cancelText: { default: "取消", type: String },
-        comfigText: { default: "确定", type: String },
-        comfig: { default: null, type: Function },
-        cancel: { default: null, type: Function },
-        isMask: { default: true, type: Boolean },
-        isMaskClose: { default: true, type: Boolean },
+        titleText: { default: "top-popup", type: String },// 标题文本
+        context: { default: "内容", type: String },// 内容文本
+        cancelText: { default: "取消", type: String },// 取消按钮文案
+        comfigText: { default: "确定", type: String },// 确定按钮文案
+        comfig: { default: null, type: Function },// 确定方法
+        cancel: { default: null, type: Function }, // 取消方法
+        isMask: { default: true, type: Boolean },// 是否开启蒙版
+        isMaskClose: { default: true, type: Boolean },// 蒙版关闭功能
+        isTips: { default: false, type: Boolean },//判断当前是否为dialog
     },
-    setup(props) {
-        const show = ref(false);
-
-        const handleOpen = () => {
-            show.value = true;
-        };
-
-        const handleCancel = () => {
-            typeof props.cancel === "function" && props.cancel();
-            handleClose();
-        };
-
-        const handleComfig = () => {
-            typeof props.comfig === "function" && props.comfig();
-        };
-
-        const handleClose = () => {
-            show.value = false;
+    data() {
+        return {
+            show: false,
         };
+    },
 
-        onMounted(() => {
+    methods: {
+        handleOpen() {
+            this.show = true;
+        },
+        handleClose() {
+            this.show = false;
+        },
+        handleCancel() {
+            typeof this.cancel === "function" && this.cancel();
+            this.handleClose();
+        },
+        handleComfig() {
+            typeof this.comfig === "function" && this.comfig();
+        },
+    },
+    mounted() {
+        // 渲染组件到body
+        this.$nextTick(() => {
             const body = document.querySelector("body");
+            if (body.append) {
+                body.append(this.$el);
+            } else {
+                body.appendChild(this.$el);
+            }
         });
-
-        return {
-            handleOpen,
-            handleCancel,
-            handleComfig,
-            handleClose,
-            show,
-        };
     },
-});
+};
 </script>
 <style scoped>
 .top-popup {
     width: 100%;
-    height: 80vh;
+    max-height: 80vh;
+    min-height: 65vh;
     position: fixed;
     left: 0;
     background-color: #fff;
-    z-index: 199;
+    z-index: 399;
     border-radius: 20px 20px 0 0;
-    padding: 0 10px;
+    padding: 0 20px;
     box-sizing: border-box;
-    transition: all 0.5s ease;
+    transition: transform 0.3s ease;
     bottom: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
 }
 .top-popup-mask {
     position: fixed;
@@ -94,35 +126,105 @@ export default defineComponent({
     opacity: 0.7;
     top: 0;
     left: 0;
-    z-index: 99;
+    z-index: 299;
+    transition: all 0.3s ease;
 }
 .top-popup-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px 0;
+    font-size: 15px;
+}
+
+.top-popup-header .header-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: #333;
 }
 
 .top-popup-header .header-cancel {
-    color: #1389ff;
+    color: #333;
 }
 .top-popup-header .header-comfig {
     color: #1389ff;
 }
 
-.fade-enter-active,
-.fade-leave-active {
-    transition: all 0.5s ease;
+
+.top-tips {
+    width: 80vw;
+    /* height: 200px; */
+    border-radius: 11px;
+    background-color: #fff;
+    position: fixed;
+    top: calc(50% - 100px);
+    left: calc(50% - 40vw);
+    z-index: 399;
+    box-sizing: border-box;
+    transition: all 0.3s ease;
 }
 
-.fade-enter,
-.fade-leave-to {
-    /* transform: translateY(100%); */
-    bottom: -100%;
+.top-tips-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    padding-top: 25px;
+    font-size: 15px;
+    color: #323233;
+}
+
+.top-tips-body {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    padding-top: 8px;
+    font-size: 14px;
+    color: #6c6c6c;
 }
-.fade-enter-to,
-.fade-leave {
-    /* transform: translateY(0%); */
-    bottom: 0d;
+
+.top-tips-footer {
+    display: flex;
+    flex-direction: row;
+    border-top-color: #f5f5f5;
+    border-top-style: solid;
+    border-top-width: 1px;
+    position: relative;
+}
+.top-tips-footer::before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 0.5px;
+    top: 0;
+    left: 0;
+    background-color: #f2f2f2;
+}
+
+.top-tips-btn {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    height: 45px;
+    position: relative;
+    font-size: 16px;
+    color: #333;
+}
+
+.top-tips-btn:last-child {
+    color: #ee0a24;
+}
+
+.top-tips-btn:last-child::before {
+    content: "";
+    position: absolute;
+    width: 1px;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: #f2f2f2;
 }
 </style>