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