🎨chore: 使用 oxlint, oxfmt&格式化代码
This commit is contained in:
@@ -1,24 +1,32 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
import type {Message, MessageApi, MessageProviderApi, MessageType} from "~/components/uni/Message/index";
|
||||
import type {
|
||||
Message,
|
||||
MessageApi,
|
||||
MessageProviderApi,
|
||||
MessageType,
|
||||
} from '~/components/uni/Message/index'
|
||||
|
||||
const props = defineProps({
|
||||
max: {
|
||||
type: Number,
|
||||
default: 5
|
||||
}
|
||||
default: 5,
|
||||
},
|
||||
})
|
||||
|
||||
const nuxtApp = useNuxtApp()
|
||||
const messageList = ref<Message[]>([])
|
||||
|
||||
const createMessage = (content: string, type: MessageType, duration: number = 3000) => {
|
||||
const {max} = props
|
||||
const createMessage = (
|
||||
content: string,
|
||||
type: MessageType,
|
||||
duration: number = 3000
|
||||
) => {
|
||||
const { max } = props
|
||||
messageList.value.push({
|
||||
id: (Date.now() + Math.random() * 100).toString(32).toUpperCase(),
|
||||
content,
|
||||
type,
|
||||
duration
|
||||
duration,
|
||||
})
|
||||
if (messageList.value.length > max) {
|
||||
messageList.value.shift()
|
||||
@@ -27,26 +35,29 @@ const createMessage = (content: string, type: MessageType, duration: number = 30
|
||||
|
||||
const providerApi: MessageProviderApi = {
|
||||
destroy: (id: string) => {
|
||||
messageList.value.splice(messageList.value.findIndex(message => message.id === id), 1)
|
||||
}
|
||||
messageList.value.splice(
|
||||
messageList.value.findIndex((message) => message.id === id),
|
||||
1
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
const api: MessageApi = {
|
||||
info: (content: string, duration: number = 3000) => {
|
||||
createMessage(content, 'info', duration);
|
||||
createMessage(content, 'info', duration)
|
||||
},
|
||||
success: (content: string, duration: number = 3000) => {
|
||||
createMessage(content, 'success', duration);
|
||||
createMessage(content, 'success', duration)
|
||||
},
|
||||
warning: (content: string, duration: number = 3000) => {
|
||||
createMessage(content, 'warning', duration);
|
||||
createMessage(content, 'warning', duration)
|
||||
},
|
||||
error: (content: string, duration: number = 3000) => {
|
||||
createMessage(content, 'error', duration);
|
||||
createMessage(content, 'error', duration)
|
||||
},
|
||||
destroyAll: function (): void {
|
||||
throw new Error('Function not implemented.');
|
||||
}
|
||||
throw new Error('Function not implemented.')
|
||||
},
|
||||
}
|
||||
|
||||
nuxtApp.vueApp.provide('uni-message-provider', providerApi)
|
||||
@@ -54,12 +65,16 @@ nuxtApp.vueApp.provide('uni-message', api)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<slot/>
|
||||
<slot />
|
||||
<teleport to="body">
|
||||
<div id="message-provider">
|
||||
<div class="message-wrapper">
|
||||
<TransitionGroup name="message">
|
||||
<UniMessage v-for="(message, k) in messageList" :key="message.id" :message="message"/>
|
||||
<UniMessage
|
||||
v-for="(message, k) in messageList"
|
||||
:key="message.id"
|
||||
:message="message"
|
||||
/>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
</div>
|
||||
@@ -73,11 +88,11 @@ nuxtApp.vueApp.provide('uni-message', api)
|
||||
|
||||
.message-move,
|
||||
.message-leave-active {
|
||||
transition: all .6s ease;
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
|
||||
.message-enter-active {
|
||||
transition: all .6s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
|
||||
.message-enter-from {
|
||||
|
||||
Reference in New Issue
Block a user