欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

使用 Vue-Toastification 的 VUE3

最编程 2024-06-16 15:10:38
...

官方地址：https://vue-toastification.maronato.dev/?from=madewith.cn

需求：

要搞一个实时提醒弹窗，刚开始用的element plus里的Notification,但后面原型图又改了，加上了交互

 element plus 这时候就显得很鸡肋了，而且他的自定义html只支持原生，做个点击功能都费劲，这时候是祭出杀器Toastification了

他可以支持组建直接引入

 自定义内容在component里写就好了，然后在用的页面直接引入就行。

安装： 

npm install --save vue-toastification@next

main.js里引入

import 'vue-toastification/dist/index.css'

使用页面引入

import { useToast } from 'vue-toastification'

const toast = useToast();
toast.error({
        component: AlarmInfoDialog,
        listeners: {
            showDialog: () => alarmDetail.value.open()
        }
    }, {
        position: voiceParams.remindposition ?? 'bottom-left', //出现位置
        timeout: 6000, // 延时关闭时间
        closeOnClick: false, // 单击即关闭
        pauseOnFocusLoss: true,
        pauseOnHover: true, // 鼠标移入暂停
        draggable: false, // 允许通过拖动和滑动事件关闭
        draggablePercent: 0.6,
        showCloseButtonOnHover: false,
        hideProgressBar: false, // 显示/隐藏进度条
        closeButton: false,
        icon: false,
        rtl: false
    });

options具体设置在 另一篇文章中

css样式：

.Vue-Toastification__toast{
    padding: 0 0 5px 0;
}

不调css会有边框。你写的内容被包着，而且还有自带的背景色，很难看

component组件

<template>
        <div class="alarmInfo" style="background: #ffffff;border-radius: 5px">
            <div class="top">
                <div class="leftInfo"></div>
                <div class="centerInfo">报警</div>
                <div class="rightInfo" >
                    <img src="../assets/imgs/alarmDialog/bianji.svg" @click="edit" alt="" width="30">
                    <img src="../assets/imgs/alarmDialog/fuzhi.svg" @click="copyToClipboard" alt="" width="30">
                    <img src="../assets/imgs/alarmDialog/duihao.svg" @click="edit" alt="" width="30">
                    <img src="../assets/imgs/alarmDialog/chahao.svg" @click="edit" alt="" width="30">
                </div>
            </div>
            <div class="content">
                <div class="info">
                    <div class="info-head">车牌号</div>
                    <span class="info-icon">:</span>
                    <div class="info-text">${waringInfoObj.carNo}</div>
                </div>
                <div class="info">
                    <div class="info-head">车辆颜色</div>
                    <span class="info-icon">:</span>
                    <div class="info-text">黄色</div>
                </div>
                <div class="info">
                    <div class="info-head">报警等级</div>
                    <span class="info-icon">:</span>
                    <div class="info-text">一级报警</div>
                </div>
                <div class="info">
                    <div class="info-head">报警类型</div>
                    <span class="info-icon">:</span>
                    <div class="info-text" style="color: crimson">超速报警 </div>
                </div>
                <div class="info">
                    <div class="info-head">报警详情</div>
                    <span class="info-icon">:</span>
                    <div class="info-text">超速报警</div>
                </div>
                <div class="info">
                    <div class="info-head">速度</div>
                    <span class="info-icon">:</span>
                    <div class="info-text">超速报警101km/h(超速时长:51秒)</div>
                </div>
                <div class="info">
                    <div class="info-head">限速</div>
                    <span class="info-icon">:</span>
                    <div class="info-text">60km/h</div>
                </div>
                <div class="info">
                    <div class="info-head">时间</div>
                    <span class="info-icon">:</span>
                    <div class="info-text">2022-08-01 12:15:00</div>
                </div>
                <div class="info">
                    <div class="info-head">驾驶员</div>
                    <span class="info-icon">:</span>
                    <div class="info-text">张三(15609199638)</div>
                </div>
                <div class="info">
                    <div class="info-head">报警位置</div>
                    <span class="info-icon">:</span>
                    <div class="info-text">四川省 成都市 简阳市 双桥子街道 成简快速路10米 大堰</div>
                </div>
            </div>
        </div>
</template>
<script setup>
import { defineExpose, defineEmits } from "vue";
import useClipboard from 'vue-clipboard3'
import { ElMessage } from "element-plus";

const { toClipboard } = useClipboard()
const emit = defineEmits(['showDialog'])

// 点击编辑按钮
const edit = () => {
    emit('showDialog')
}</script>

原文地址：https://www.cnblogs.com/alannero/p/16919352.html

上一篇： 使用 docker 容器化开发部署 Vue 项目

下一篇： vue 脚手架安装和安装失败问题解决方案

推荐阅读