test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-05 04:37:47 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refactor(components): [message] use useNamespace (#5720)

Browse Source
This commit is contained in:
bqy 2022-02-09 00:25:19 +08:00 committed by GitHub
parent 6ec9da0563
commit cc7384854b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/components/message/src/message.vue
View File

@ -1,6 +1,6 @@
<template>
<transition
name="el-message-fade"
:name="ns.b('fade')"
@before-leave="onClose"
@after-leave="$emit('destroy')"
>
@ -8,10 +8,10 @@
v-show="visible"
:id="id"
:class="[
'el-message',
type && !icon ? `el-message--${type}` : '',
center ? 'is-center' : '',
showClose ? 'is-closable' : '',
ns.b(),
{ [ns.m(type)]: type && !icon },
ns.is('center', center),
ns.is('closable', showClose),
customClass,
]"
:style="customStyle"
@ -23,24 +23,20 @@
v-if="repeatNum > 1"
:value="repeatNum"
:type="badgeType"
class="el-message__badge"
:class="ns.e('badge')"
>
</el-badge>
<el-icon v-if="iconComponent" class="el-message__icon" :class="typeClass">
<el-icon v-if="iconComponent" :class="[ns.e('icon'), typeClass]">
<component :is="iconComponent" />
</el-icon>
<slot>
<p v-if="!dangerouslyUseHTMLString" class="el-message__content">
<p v-if="!dangerouslyUseHTMLString" :class="ns.e('content')">
{{ message }}
</p>
<!-- Caution here, message could've been compromised, never use user's input as message -->
<p v-else class="el-message__content" v-html="message"></p>
<p v-else :class="ns.e('content')" v-html="message"></p>
</slot>
<el-icon
v-if="showClose"
class="el-message__closeBtn"
@click.stop="close"
>
<el-icon v-if="showClose" :class="ns.e('closeBtn')" @click.stop="close">
<close />
</el-icon>
</div>
@ -54,6 +50,7 @@ import ElBadge from '@element-plus/components/badge'
import { ElIcon } from '@element-plus/components/icon'
import { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'
import { useNamespace } from '@element-plus/hooks'
import { messageEmits, messageProps } from './message'
import type { BadgeProps } from '@element-plus/components/badge'
@ -72,6 +69,7 @@ export default defineComponent({
emits: messageEmits,
setup(props) {
const ns = useNamespace('message')
const visible = ref(false)
const badgeType = ref<BadgeProps['type']>(
props.type ? (props.type === 'error' ? 'danger' : props.type) : 'info'
@ -80,7 +78,7 @@ export default defineComponent({
const typeClass = computed(() => {
const type = props.type
return type && TypeComponentsMap[type] ? `el-message-icon--${type}` : ''
return { [ns.bm('icon', type)]: type && TypeComponentsMap[type] }
})
const iconComponent = computed(() => {
@ -135,6 +133,7 @@ export default defineComponent({
useEventListener(document, 'keydown', keydown)
return {
ns,
typeClass,
iconComponent,
customStyle,