ui-process-h5 0.1.36 → 1.0.5

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

@@ -1,230 +0,0 @@
-<template>
-    <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="top-popup-body">
-                <slot name="default"></slot>
-            </div>
-        </div>
-        <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>
-</template>
-<script>
-export default {
-    name: "TopPopup",
-    props: {
-        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
-    },
-    data() {
-        return {
-            show: false,
-        };
-    },
-
-    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);
-            }
-        });
-    },
-};
-</script>
-<style scoped>
-.top-popup {
-    width: 100%;
-    max-height: 80vh;
-    min-height: 65vh;
-    position: fixed;
-    left: 0;
-    background-color: #fff;
-    z-index: 399;
-    border-radius: 20px 20px 0 0;
-    padding: 0 20px;
-    box-sizing: border-box;
-    transition: transform 0.3s ease;
-    bottom: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-}
-.top-popup-mask {
-    position: fixed;
-    width: 100vw;
-    height: 100vh;
-    background-color: #000;
-    opacity: 0.7;
-    top: 0;
-    left: 0;
-    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: #333;
-}
-.top-popup-header .header-comfig {
-    color: #1389ff;
-}
-
-
-.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;
-}
-
-.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;
-}
-
-.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>