标签 vue 下的文章 - 农学网

登录

标签搜索

苏苏

公告：有问题可直接留言哦！

累计撰写 66 篇文章
累计收到 80 条评论

搜索到 1 篇标签 vue 下的文章

2022-07-20
[Vue3]Toast组件组件代码 Toast.vue <template> <div class="toast" :style="{ background: background }">{{ message }}</div> </template> <script> import { reactive } from 'vue' export default { name: 'Toast', props: ['message', 'status'], metheds: { status2color: function (status){ let color = '#5FB878'; switch (status) { case 'error': color = '#FF5722'; break; case 'success': color = '#5FB878'; break; case 'warn': color = '#FFB800'; break; case 'info': color = '#1E9FFF'; break; case 'dark': color = '#393D49'; break; } return color; } }, computed: { background() { return this.status2color(this.status); } } } export const useToastEffect = () => { const toastData = reactive({ showToast: false, toastMessage: '', status: '', }) const showToast = (message, status, timeout) => { toastData.showToast = true toastData.toastMessage = message toastData.status = status; if (!timeout) { timeout = 2000; } setTimeout(() => { toastData.showToast = false toastData.toastMessage = '' }, timeout) } return { toastData, showToast } } </script> <style> .toast { position: fixed; z-index: 2000; right: 0; padding-right: 5%; top: 100px; transition: all .5s; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); text-align: center; border-radius: 5px; color: #FFF; background: rgba(17, 17, 17, 0.7); height: 45px; line-height: 45px; padding: 0 15px; } </style>使用组件<template> <Toast v-if="toastData.showToast" :message="toastData.toastMessage" :status="toastData.status" /> </template> <script> import Toast, { useToastEffect } from '@/components/layui/Toast.vue'; export default { setup() { const { toastData, showToast } = useToastEffect(); return { toastData, showToast }; }, methods: { // 定义事件方法 test: function (type) { this.showToast("发生错误", 'warn'); that.showToast("保存成功"); } }, components: { Toast }, }; </script>
- 2022年07月20日
- 14 阅读
- 0 评论
- 0 点赞