搜索到
4
篇
标签 JS 下的文章
-
![[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 遍历对象的四种方法]()
-
![[Typecho小试牛刀]给Joe编辑器增加热键]()
-
![[Typecho小试牛刀]Joe主题增加文章目录（非插件方式）]()
![[Vue3]Toast组件](https://static.94021.top/Joe//assets/thumb/33.jpg)
![[Typecho小试牛刀]给Joe编辑器增加热键](https://nongxue.top/VKCEYUGU-fd645def-1b68-4e3c-a341-0710d0eaf81b/67065aa2-5e18-4389-a735-0fd4a199ccbe.png)
![[Typecho小试牛刀]Joe主题增加文章目录（非插件方式）](https://statics.nongxue.top/VKCEYUGU-fd645def-1b68-4e3c-a341-0710d0eaf81b/2023/04/1345475802.png?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKIDPED3zm14WpyvhGQssgKn9LLFxUwFQHza%26q-sign-time%3D1680749205%3B1680752865%26q-key-time%3D1680749205%3B1680752865%26q-header-list%3Dhost%26q-url-param-list%3D%26q-signature%3Da26b46eb537b9f79df296561f98229a51c80ed6d&)