refactor: use script setup for Alert & Breadcrumbs

wxsms · wxsms · commit fe4387d84aca · 2021-11-21T17:20:01.000+08:00
diff --git a/src/components/affix/Affix.vue b/src/components/affix/Affix.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import vScroll from './../../directives/scroll';
-import { computed, defineProps, ref, nextTick } from 'vue';
+import { computed, ref, nextTick } from 'vue';
 
 const props = defineProps({
   offset: {
diff --git a/src/components/alert/Alert.vue b/src/components/alert/Alert.vue
@@ -13,50 +13,46 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    dismissible: {
-      type: Boolean,
-      default: false,
-    },
-    duration: {
-      type: Number,
-      default: 0,
-    },
-    type: {
-      type: String,
-      default: 'info',
-    },
-  },
-  emits: ['dismissed'],
-  data() {
-    return {
-      timeout: 0,
-    };
-  },
-  computed: {
-    alertClass() {
-      return {
-        alert: true,
-        [`alert-${this.type}`]: Boolean(this.type),
-        'alert-dismissible': this.dismissible,
-      };
-    },
-  },
-  mounted() {
-    if (this.duration > 0) {
-      this.timeout = setTimeout(this.closeAlert, this.duration);
-    }
+<script setup>
+import { computed, onMounted, onUnmounted } from 'vue';
+
+const props = defineProps({
+  dismissible: {
+    type: Boolean,
+    default: false,
   },
-  unmounted() {
-    clearTimeout(this.timeout);
+  duration: {
+    type: Number,
+    default: 0,
   },
-  methods: {
-    closeAlert() {
-      clearTimeout(this.timeout);
-      this.$emit('dismissed');
-    },
+  type: {
+    type: String,
+    default: 'info',
   },
-};
+});
+
+const emit = defineEmits(['dismissed']);
+
+let timeout = 0;
+
+const alertClass = computed(() => ({
+  alert: true,
+  [`alert-${props.type}`]: !!props.type,
+  'alert-dismissible': props.dismissible,
+}));
+
+function closeAlert() {
+  clearTimeout(timeout);
+  emit('dismissed');
+}
+
+onMounted(() => {
+  if (props.duration > 0) {
+    timeout = setTimeout(closeAlert, props.duration);
+  }
+});
+
+onUnmounted(() => {
+  clearTimeout(timeout);
+});
 </script>
diff --git a/src/components/breadcrumbs/BreadcrumbItem.vue b/src/components/breadcrumbs/BreadcrumbItem.vue
@@ -1,28 +1,28 @@
 <template>
   <li :class="{ active }">
     <slot v-if="active" />
-    <router-link
+    <RouterLink
       v-else-if="to"
       :to="to"
       :replace="replace"
       :append="append"
       :exact="exact"
       ><slot
-    /></router-link>
+    /></RouterLink>
     <a v-else :href="href" :target="target"><slot /></a>
   </li>
 </template>
 
-<script>
-import linkMixin from '../../mixins/link.mixin';
-
-export default {
-  mixins: [linkMixin],
-  props: {
-    active: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
+<script setup>
+defineProps({
+  // <a> props
+  href: { type: String, default: undefined },
+  target: { type: String, default: undefined },
+  // <router-link> props
+  to: { type: null, default: undefined },
+  replace: { type: Boolean, default: false },
+  append: { type: Boolean, default: false },
+  exact: { type: Boolean, default: false },
+  active: { type: Boolean, default: false },
+});
 </script>
diff --git a/src/components/breadcrumbs/Breadcrumbs.vue b/src/components/breadcrumbs/Breadcrumbs.vue
@@ -3,12 +3,8 @@
     <slot />
     <BreadcrumbItem
       v-for="(item, index) of items"
-      :key="hasOwnProperty(item, 'key') ? item.key : index"
-      :active="
-        hasOwnProperty(item, 'active')
-          ? item.active
-          : index === items.length - 1
-      "
+      :key="item.key ?? index"
+      :active="item.active ?? index === items.length - 1"
       :href="item.href"
       :to="item.to"
       :replace="item.replace"
@@ -19,18 +15,10 @@
   </ol>
 </template>
 
-<script>
+<script setup>
 import BreadcrumbItem from './BreadcrumbItem.vue';
-import { hasOwnProperty } from '../../utils/object.utils';
 
-export default {
-  functional: true,
-  components: { BreadcrumbItem },
-  props: {
-    items: { type: Array, default: () => [] },
-  },
-  methods: {
-    hasOwnProperty,
-  },
-};
+defineProps({
+  items: { type: Array, default: () => [] },
+});
 </script>
