mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-01-24 11:05:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(components): [alert] switch to script-setup syntax (#6066)

Browse Source
This commit is contained in:
bqy 2022-02-17 10:48:05 +08:00 committed by GitHub
parent c2fe2a4f05
commit 56b37b6a34
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 32 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
packages/components/alert/src/alert.vue
View File

@ -32,62 +32,49 @@
{{ closeText }}
</div>
<el-icon v-else :class="ns.e('close-btn')" @click="close">
<close />
<Close />
</el-icon>
</template>
</div>
</div>
</transition>
</template>
<script lang="ts">
import { defineComponent, computed, ref } from 'vue'
<script lang="ts" setup>
import { computed, ref, useSlots } from 'vue'
import { ElIcon } from '@element-plus/components/icon'
import { TypeComponents, TypeComponentsMap } from '@element-plus/utils'
import { useNamespace } from '@element-plus/hooks'
import { alertProps, alertEmits } from './alert'
export default defineComponent({
const { Close } = TypeComponents
defineOptions({
name: 'ElAlert',
components: {
ElIcon,
...TypeComponents,
},
props: alertProps,
emits: alertEmits,
setup(props, { emit, slots }) {
const ns = useNamespace('alert')
// state
const visible = ref(true)
// computed
const iconComponent = computed(
() => TypeComponentsMap[props.type] || TypeComponentsMap['info']
)
const isBigIcon = computed(() =>
props.description || slots.default ? ns.is('big') : ''
)
const isBoldTitle = computed(() =>
props.description || slots.default ? ns.is('bold') : ''
)
// methods
const close = (evt: MouseEvent) => {
visible.value = false
emit('close', evt)
}
return {
ns,
visible,
iconComponent,
isBigIcon,
isBoldTitle,
close,
}
},
})
const props = defineProps(alertProps)
const emit = defineEmits(alertEmits)
const slots = useSlots()
const ns = useNamespace('alert')
// state
const visible = ref(true)
// computed
const iconComponent = computed(
() => TypeComponentsMap[props.type] || TypeComponentsMap['info']
)
const isBigIcon = computed(
() => props.description || { [ns.is('big')]: slots.default }
)
const isBoldTitle = computed(
() => props.description || { [ns.is('bold')]: slots.default }
)
// methods
const close = (evt: MouseEvent) => {
visible.value = false
emit('close', evt)
}
</script>