实现 alert 弹窗组件

Tevin

2023-12-22 fa38b108c5b9ccef23d0003dd56afbf02d679409

实现 alert 弹窗组件

 layout/alert/CAlert.vue

New file
@@ -0,0 +1,89 @@
/**
 * CAlert - alert 弹窗
 * @author Tevin
 */

<template>
    <AtModal
        class="c-alert"
        :class="mode==='confirm'?'c-alert-confirm':''"
        v-show="isOpened"
        :isOpened="isOpened"
    >
        <AtModalHeader v-if="title">{{title}}</AtModalHeader>
        <AtModalContent>
            {{content}}
        </AtModalContent>
        <AtModalAction>
            <button @tap="evt => handleClose()">{{mode==='alert'?'知道了':'取消'}}</button>
            <button
                @tap="evt => handleConfirm()"
                v-if="mode==='comfirm'"
            >确定</button>
        </AtModalAction>
    </AtModal>
</template>

<script>
import Taro from '@tarojs/taro';
import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui-vue';
import { Tools } from '@components/common/Tools';

export default {
    name: 'CAlert',
    components: {
        AtModal,
        AtModalHeader,
        AtModalContent,
        AtModalAction,
    },
    props: {
        onConfirm: Function,
    },
    data() {
        return {
            mode: 'alert',
            isOpened: false,
            title: '',
            content: '',
        };
    },
    methods: {
        handleClose() {
            this.isOpened = false;
        },
        handleConfirm() {
            this.isOpened = false;
            this.onConfirm && this.onConfirm();
        },
        $alert(option) {
            if (!option) {
                return;
            }
            this.mode = 'alert';
            if (typeof option === 'string') {
                this.title = '';
                this.content = option;
            } else if (Tools.isObject(option)) {
                this.title = option.title;
                this.content = option.content;
            }
            this.isOpened = true;
        },
        $confirm(option) {
            if (!option) {
                return;
            }
            this.mode = 'comfirm';
            if (typeof option === 'string') {
                this.title = '';
                this.content = option;
            } else if (Tools.isObject(option)) {
                this.title = option.title;
                this.content = option.content;
            }
            this.isOpened = true;
        },
    },
};
</script>

 layout/alert/index.js

New file
@@ -0,0 +1,10 @@
/**
 * CAlert
 * @author Tevin
 */

import CAlert from '@components/layout/alert/CAlert.vue';

export {
    CAlert,
}