From 56b37b6a348542acb5d74f0e4cea131440b860d8 Mon Sep 17 00:00:00 2001
From: bqy <1743369777@qq.com>
Date: Thu, 17 Feb 2022 10:48:05 +0800
Subject: [PATCH] refactor(components): [alert] switch to script-setup syntax
 (#6066)

---
 packages/components/alert/src/alert.vue | 77 ++++++++++---------------
 1 file changed, 32 insertions(+), 45 deletions(-)

diff --git a/packages/components/alert/src/alert.vue b/packages/components/alert/src/alert.vue
index bc9cc6e8f0..2e1d00cdf9 100644
--- a/packages/components/alert/src/alert.vue
+++ b/packages/components/alert/src/alert.vue
@@ -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>