搜索到
24
篇
分类 代码 下的文章
-
![[Joe]评论正确显示Windows11版本]()
-
![[插件]将 Typecho 图片/附件存储到 COS]()
-
![[Joe主题]解除Live2D小人宽屏幕(width>1760px)才显示的限制]()
-
![[Typecho]Markdown解析增强]()
-
![[Vue3]Toast组件]()
[Vue3]Toast组件 组件代码 Toast.vue<!-- * @Description: 提示组件 * @Version: 1.0.0 * @Autor: susu<nongxuewang@qq.com> * @Date: 2022-07-07 23:17:35 * @LastEditTime: 2022-07-20 14:06:09 --> <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> -
![Javascript 遍历对象的四种方法]()
-
![Linux学习笔记-文本编辑器Vim(常用操作)]()
-
![Linux学习笔记-基本命令(开关机命令)]()
-
![Linux学习笔记-基本命令(网络命令)]()
-
![Windows10复制文件时保留文件夹时间戳+文件时间戳(原封不动复制文件)]()
![[Joe]评论正确显示Windows11版本](https://static.94021.top/Joe//assets/thumb/25.jpg)
![[插件]将 Typecho 图片/附件存储到 COS](https://nongxue.top/VKCEYUGU-fd645def-1b68-4e3c-a341-0710d0eaf81b/5abbe8a0-1fd3-4b05-8522-721febd1ca0c.png)
![[Joe主题]解除Live2D小人宽屏幕(width>1760px)才显示的限制](https://nongxue.top/VKCEYUGU-fd645def-1b68-4e3c-a341-0710d0eaf81b/5658e0ed-cbf4-4a59-92a8-faf9eb3f7104.png)
![[Typecho]Markdown解析增强](https://static.94021.top/Joe//assets/thumb/23.jpg)
![[Vue3]Toast组件](https://static.94021.top/Joe//assets/thumb/34.jpg)
