refactor: use script setup for Btn

wxsms · wxsms · commit 4d8f6db57e5b · 2021-11-21T17:30:09.000+08:00
diff --git a/src/components/affix/Affix.vue b/src/components/affix/Affix.vue
@@ -11,10 +11,7 @@ import vScroll from './../../directives/scroll';
 import { computed, ref, nextTick } from 'vue';
 
 const props = defineProps({
-  offset: {
-    type: Number,
-    default: 0,
-  },
+  offset: { type: Number, default: 0 },
 });
 
 const emit = defineEmits(['affix', 'affixed', 'unfix', 'unfixed']);
diff --git a/src/components/alert/Alert.vue b/src/components/alert/Alert.vue
@@ -17,18 +17,9 @@
 import { computed, onMounted, onUnmounted } from 'vue';
 
 const props = defineProps({
-  dismissible: {
-    type: Boolean,
-    default: false,
-  },
-  duration: {
-    type: Number,
-    default: 0,
-  },
-  type: {
-    type: String,
-    default: 'info',
-  },
+  dismissible: { type: Boolean, default: false },
+  duration: { type: Number, default: 0 },
+  type: { type: String, default: 'info' },
 });
 
 const emit = defineEmits(['dismissed']);
diff --git a/src/components/button/Btn.vue b/src/components/button/Btn.vue
@@ -9,7 +9,7 @@
   >
     <slot />
   </a>
-  <router-link
+  <RouterLink
     v-else-if="to"
     :to="to"
     :class="classes"
@@ -20,7 +20,7 @@
     role="button"
     @click="onClick"
     ><slot
-  /></router-link>
+  /></RouterLink>
   <label v-else-if="inputType" :class="classes" @click="onClick">
     <input
       autocomplete="off"
@@ -53,102 +53,72 @@
   </button>
 </template>
 
-<script>
-import linkMixin from '../../mixins/link.mixin';
+<script setup>
 import BtnGroup from './BtnGroup.vue';
+import { computed } from 'vue';
 
-const INPUT_TYPE_CHECKBOX = 'checkbox';
-const INPUT_TYPE_RADIO = 'radio';
-
-export default {
-  components: { BtnGroup },
-  mixins: [linkMixin],
-  props: {
-    justified: {
-      type: Boolean,
-      default: false,
-    },
-    type: {
-      type: String,
-      default: 'default',
-    },
-    nativeType: {
-      type: String,
-      default: 'button',
-    },
-    size: {
-      type: String,
-      default: undefined,
-    },
-    block: {
-      type: Boolean,
-      default: false,
-    },
-    active: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    // <input> props
-    modelValue: {
-      type: null,
-      default: null,
-    },
-    inputValue: {
-      type: null,
-      default: null,
-    },
-    inputType: {
-      type: String,
-      validator(value) {
-        return value === INPUT_TYPE_CHECKBOX || value === INPUT_TYPE_RADIO;
-      },
-      default: undefined,
+const props = 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 },
+  justified: { type: Boolean, default: false },
+  type: { type: String, default: 'default' },
+  nativeType: { type: String, default: 'button' },
+  size: { type: String, default: undefined },
+  block: { type: Boolean, default: false },
+  active: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  // <input> props
+  modelValue: { type: null, default: null },
+  inputValue: { type: null, default: null },
+  inputType: {
+    type: String,
+    validator(value) {
+      return value === 'checkbox' || value === 'radio';
     },
+    default: undefined,
   },
-  emits: ['update:modelValue'],
-  computed: {
-    isInputActive() {
-      return this.inputType === INPUT_TYPE_CHECKBOX
-        ? this.modelValue.indexOf(this.inputValue) >= 0
-        : this.modelValue === this.inputValue;
-    },
-    classes() {
-      return {
-        btn: true,
-        active: this.inputType ? this.isInputActive : this.active,
-        disabled: this.disabled,
-        'btn-block': this.block,
-        [`btn-${this.type}`]: Boolean(this.type),
-        [`btn-${this.size}`]: Boolean(this.size),
-      };
-    },
-  },
-  methods: {
-    onClick(e) {
-      if (this.disabled && e instanceof Event) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    },
-    onInputChange() {
-      if (this.inputType === INPUT_TYPE_CHECKBOX) {
-        const valueCopied = this.modelValue.slice();
-        if (this.isInputActive) {
-          valueCopied.splice(valueCopied.indexOf(this.inputValue), 1);
-        } else {
-          valueCopied.push(this.inputValue);
-        }
-        this.$emit('update:modelValue', valueCopied);
-      } else {
-        this.$emit('update:modelValue', this.inputValue);
-      }
-    },
-  },
-};
-</script>
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const isInputActive = computed(() =>
+  props.inputType === 'checkbox'
+    ? props.modelValue.indexOf(props.inputValue) >= 0
+    : props.modelValue === props.inputValue
+);
+const classes = computed(() => ({
+  btn: true,
+  active: props.inputType ? isInputActive.value : props.active,
+  disabled: props.disabled,
+  'btn-block': props.block,
+  [`btn-${props.type}`]: Boolean(props.type),
+  [`btn-${props.size}`]: Boolean(props.size),
+}));
 
-<style scoped></style>
+function onClick(e) {
+  if (props.disabled && e instanceof Event) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+}
+
+function onInputChange() {
+  if (props.inputType === 'checkbox') {
+    const valueCopied = props.modelValue.slice();
+    if (isInputActive.value) {
+      valueCopied.splice(valueCopied.indexOf(props.inputValue), 1);
+    } else {
+      valueCopied.push(props.inputValue);
+    }
+    emit('update:modelValue', valueCopied);
+  } else {
+    emit('update:modelValue', props.inputValue);
+  }
+}
+</script>
diff --git a/src/components/button/BtnGroup.vue b/src/components/button/BtnGroup.vue
@@ -13,18 +13,10 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    size: { type: String, default: undefined },
-    vertical: {
-      type: Boolean,
-      default: false,
-    },
-    justified: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
+<script setup>
+defineProps({
+  size: { type: String, default: undefined },
+  vertical: { type: Boolean, default: false },
+  justified: { type: Boolean, default: false },
+});
 </script>
diff --git a/src/components/button/BtnToolbar.vue b/src/components/button/BtnToolbar.vue
@@ -3,3 +3,7 @@
     <slot />
   </div>
 </template>
+
+<script setup>
+// nothing
+</script>
