From fa38b108c5b9ccef23d0003dd56afbf02d679409 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Fri, 22 Dec 2023 12:07:14 +0800
Subject: [PATCH] 实现 alert 弹窗组件
---
layout/alert/CAlert.vue | 89 ++++++++++++++++++++++++++++++++++++++++++++
layout/alert/index.js | 10 +++++
2 files changed, 99 insertions(+), 0 deletions(-)
diff --git a/layout/alert/CAlert.vue b/layout/alert/CAlert.vue
new file mode 100644
index 0000000..b92feec
--- /dev/null
+++ b/layout/alert/CAlert.vue
@@ -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>
\ No newline at end of file
diff --git a/layout/alert/index.js b/layout/alert/index.js
new file mode 100644
index 0000000..557cc1d
--- /dev/null
+++ b/layout/alert/index.js
@@ -0,0 +1,10 @@
+/**
+ * CAlert
+ * @author Tevin
+ */
+
+import CAlert from '@components/layout/alert/CAlert.vue';
+
+export {
+ CAlert,
+}
\ No newline at end of file
--
Gitblit v1.9.1