feat: the Button component extends the and attributes

vben
1 parent 6bffdb5c
Showing 3 changed files with 15 additions and 2 deletions
CHANGELOG.zh_CN.md
src/components/Button/index.vue
src/views/demo/feat/msg/index.vue
@@ -3,6 +3,7 @@
 ### ✨ Features
 - 新增`pwa`功能，可在`.env.production`开启
+- Button 组件扩展 `preIcon`和`postIcon`属性用于在文本前后添加图标
 ### 🎫 Chores
@@ -25,6 +26,7 @@
 - 修复热更新时多次注册组件警告问题
 - 修复登录后出现登录标签页
+- 修复路由切换参数消失问题
 ## 2.0.0-rc.5 (2020-10-26)
 <template>
   <Button v-bind="getBindValue" :class="[getColor, $attrs.class]">
-    <template #[item]="data" v-for="item in Object.keys($slots)">
+    <!-- <template #[item]="data" v-for="item in Object.keys($slots)">
       <slot :name="item" v-bind="data" />
+    </template> -->
+    <template #default="data">
+      <g-icon :icon="preIcon" class="mr-1" v-if="preIcon" />
+      <slot v-bind="data" />
+      <g-icon :icon="preIcon" class="ml-1" v-if="postIcon" />
     </template>
   </Button>
 </template>
@@ -44,6 +49,12 @@
         type: Boolean as PropType<boolean>,
         default: false,
       },
+      preIcon: {
+        type: String as PropType<string>,
+      },
+      postIcon: {
+        type: String as PropType<string>,
+      },
     },
     setup(props, { attrs }) {
       const getListeners = computed(() => {
 <template>
   <div class="p-4">
     <CollapseContainer class="px-20 bg-white w-full h-32 rounded-md" title="Message">
-      <a-button @click="infoMsg('Info message')" class="mr-2">Info</a-button>
+      <a-button @click="infoMsg('Info message')" class="mr-2"> Info </a-button>
       <a-button @click="successMsg('Success message')" class="mr-2" color="success">
         Success
       </a-button>