u
This commit is contained in:
oneao committed
1 parent
c280cbf961
commit
b24015fbae
12 files changed
+760
-133
No files matched your search
@@ -0,0 +1,121 @@
|
||||
@use '../_styles/_variables.scss' as *;
|
||||
@use 'sass:color';
|
||||
|
||||
$notification-prefix: #{$prefix}-notification;
|
||||
|
||||
.#{$notification-prefix}-wrapper {
|
||||
position: fixed;
|
||||
z-index: 6000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.#{$notification-prefix} {
|
||||
width: 360px;
|
||||
padding: 12px 16px;
|
||||
border-radius: $border-radius;
|
||||
background-color: $bg-color-container;
|
||||
color: $text-color-base;
|
||||
box-shadow: $shadow-overlay;
|
||||
box-sizing: border-box;
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
|
||||
&-icon {
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&-main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&-title-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
small {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&-close {
|
||||
flex-shrink: 0;
|
||||
margin-left: 6px;
|
||||
color: $text-color-assist;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
&:hover {
|
||||
background-color: $default-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
color: $text-color-secondary;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
&-footer {
|
||||
}
|
||||
|
||||
&-info {
|
||||
color: $primary-color;
|
||||
}
|
||||
&-success {
|
||||
color: $success-color;
|
||||
}
|
||||
&-warning {
|
||||
color: $warning-color;
|
||||
}
|
||||
&-error {
|
||||
color: $danger-color;
|
||||
}
|
||||
&-question {
|
||||
color: $primary-color;
|
||||
}
|
||||
&-loading {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
&-placement {
|
||||
&-top-start {
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
&-top-end {
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
&-bottom-start {
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
flex-direction: column-reverse;
|
||||
align-items: flex-start;
|
||||
}
|
||||
&-bottom-end {
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
flex-direction: column-reverse;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
import type { VNode } from 'vue'
|
||||
import { createApp, h } from 'vue'
|
||||
import { getPrefixCls } from '../_utils/getPrefixCls'
|
||||
import MessageItem from './item'
|
||||
|
||||
type Placement
|
||||
= | 'top-start'
|
||||
| 'top-end'
|
||||
| 'bottom-start'
|
||||
| 'bottom-end'
|
||||
|
||||
type NotificationType = 'info' | 'success' | 'warning' | 'error' | 'loading' | 'question'
|
||||
|
||||
interface NotificationOptions {
|
||||
content: string | VNode | (() => VNode)
|
||||
|
||||
title: string
|
||||
subTitle?: string
|
||||
type?: NotificationType
|
||||
placement?: Placement
|
||||
duration?: number
|
||||
showClose?: boolean
|
||||
}
|
||||
|
||||
interface NotificationHandle {
|
||||
close: () => void
|
||||
}
|
||||
|
||||
interface MessageFn {
|
||||
(msg: NotificationOptions): NotificationHandle
|
||||
info: (msg: NotificationOptions) => NotificationHandle
|
||||
success: (msg: NotificationOptions) => NotificationHandle
|
||||
warning: (msg: NotificationOptions) => NotificationHandle
|
||||
error: (msg: NotificationOptions) => NotificationHandle
|
||||
closeAll: () => void
|
||||
}
|
||||
|
||||
const prefixCls = getPrefixCls('notification')
|
||||
const containers: Partial<Record<Placement, HTMLElement>> = {}
|
||||
const instances: NotificationHandle[] = []
|
||||
|
||||
function getContainer(placement: Placement = 'top-end') {
|
||||
if (!containers[placement]) {
|
||||
const wrapper = document.createElement('div')
|
||||
wrapper.className = `${prefixCls}-wrapper ${prefixCls}-placement-${placement}`
|
||||
document.body.appendChild(wrapper)
|
||||
containers[placement] = wrapper
|
||||
}
|
||||
return containers[placement]!
|
||||
}
|
||||
|
||||
function getTransform(placement: Placement, hidden: boolean) {
|
||||
if (placement.startsWith('top'))
|
||||
return hidden ? 'translateY(-10px)' : 'translateY(0)'
|
||||
if (placement.startsWith('bottom'))
|
||||
return hidden ? 'translateY(10px)' : 'translateY(0)'
|
||||
|
||||
return hidden ? 'translateY(-10px)' : 'translateY(0)'
|
||||
}
|
||||
|
||||
export function useNotification(): MessageFn {
|
||||
const createNotification = (
|
||||
opts: NotificationOptions,
|
||||
defaultType: NotificationType = 'info',
|
||||
): NotificationHandle => {
|
||||
const { content, title, subTitle, type = defaultType, placement = 'top-end', duration = 3000, showClose } = opts
|
||||
|
||||
const container = getContainer(placement)
|
||||
let timer: number | undefined
|
||||
let handle: NotificationHandle
|
||||
|
||||
const app = createApp({
|
||||
render() {
|
||||
return h(MessageItem, {
|
||||
type,
|
||||
title,
|
||||
subTitle,
|
||||
content,
|
||||
placement,
|
||||
showClose,
|
||||
style: {
|
||||
opacity: 0,
|
||||
transform: getTransform(placement, true),
|
||||
transition: 'all 0.3s ease-in-out',
|
||||
},
|
||||
onClose: () => handle?.close?.(),
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
const vm = app.mount(document.createElement('div'))
|
||||
container.appendChild(vm.$el)
|
||||
|
||||
// 出现动画
|
||||
requestAnimationFrame(() => {
|
||||
Object.assign(vm.$el.style, {
|
||||
opacity: '1',
|
||||
transform: getTransform(placement, false),
|
||||
})
|
||||
})
|
||||
|
||||
handle = {
|
||||
close: () => {
|
||||
if (timer)
|
||||
clearTimeout(timer)
|
||||
|
||||
Object.assign(vm.$el.style, {
|
||||
opacity: '0',
|
||||
transform: getTransform(placement, true),
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
if (container.contains(vm.$el))
|
||||
container.removeChild(vm.$el)
|
||||
app.unmount()
|
||||
const index = instances.indexOf(handle)
|
||||
if (index !== -1)
|
||||
instances.splice(index, 1)
|
||||
}, 300)
|
||||
},
|
||||
}
|
||||
|
||||
instances.push(handle)
|
||||
|
||||
if (duration > 0) {
|
||||
timer = window.setTimeout(() => {
|
||||
handle.close()
|
||||
}, duration)
|
||||
}
|
||||
|
||||
return handle
|
||||
}
|
||||
|
||||
const api = ((msg: NotificationOptions) => createNotification(msg)) as MessageFn
|
||||
api.info = msg => createNotification(msg, 'info')
|
||||
api.success = msg => createNotification(msg, 'success')
|
||||
api.warning = msg => createNotification(msg, 'warning')
|
||||
api.error = msg => createNotification(msg, 'error')
|
||||
api.closeAll = () => {
|
||||
instances.slice().forEach(instance => instance.close())
|
||||
}
|
||||
|
||||
return api
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import type { PropType, VNode } from 'vue'
|
||||
import { defineComponent, h } from 'vue'
|
||||
import { getPrefixCls } from '../_utils/getPrefixCls'
|
||||
import Icon from '../icon/index'
|
||||
|
||||
const prefixCls = getPrefixCls('notification')
|
||||
|
||||
export default defineComponent({
|
||||
name: 'NotificationItem',
|
||||
props: {
|
||||
type: { type: String, default: 'info' },
|
||||
title: { type: String, required: true },
|
||||
content: {
|
||||
type: [String, Object, Function] as unknown as () => string | VNode | (() => VNode),
|
||||
required: true,
|
||||
},
|
||||
subTitle: { type: String, required: false },
|
||||
placement: { type: String, required: true },
|
||||
showClose: { type: Boolean, default: false },
|
||||
onClose: {
|
||||
type: Function as PropType<() => void>,
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const iconMap: Record<string, string> = {
|
||||
success: 'ix:success-filled',
|
||||
error: 'ix:error-filled',
|
||||
warning: 'ix:warning-filled',
|
||||
info: 'ix:info-filled',
|
||||
question: 'ix:question-filled',
|
||||
loading: 'mingcute:loading-line',
|
||||
}
|
||||
const renderContent = (content: string | VNode | (() => VNode)) => {
|
||||
if (typeof content === 'function')
|
||||
return content()
|
||||
return content
|
||||
}
|
||||
return () => (
|
||||
<div
|
||||
class={`${prefixCls}`}
|
||||
>
|
||||
<Icon
|
||||
icon={iconMap[props.type ?? 'info']}
|
||||
size={26}
|
||||
class={`${prefixCls}-icon ${prefixCls}-${props.type ?? 'info'}`}
|
||||
spin={props.type === 'loading'}
|
||||
/>
|
||||
|
||||
<div class={`${prefixCls}-main`}>
|
||||
<div class={`${prefixCls}-title-wrapper`}>
|
||||
<span class={`${prefixCls}-title`}>
|
||||
<div>
|
||||
{props.title}
|
||||
<small>{props.subTitle}</small>
|
||||
</div>
|
||||
</span>
|
||||
{props.showClose
|
||||
? (
|
||||
<Icon
|
||||
icon="ix:close"
|
||||
size={16}
|
||||
class={`${prefixCls}-close`}
|
||||
onClick={() => props.onClose?.()}
|
||||
/>
|
||||
)
|
||||
: null}
|
||||
</div>
|
||||
|
||||
<div class={`${prefixCls}-content`}>
|
||||
{renderContent(props.content)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
Reference in new issue
Block a user