Browse Source

feat: the Button component extends the and attributes

vben 4 years ago
parent
commit
8f5016e3f3
3 changed files with 15 additions and 2 deletions
  1. 2 0
      CHANGELOG.zh_CN.md
  2. 12 1
      src/components/Button/index.vue
  3. 1 1
      src/views/demo/feat/msg/index.vue

+ 2 - 0
CHANGELOG.zh_CN.md

@@ -3,6 +3,7 @@
 ### ✨ Features
 ### ✨ Features
 
 
 - 新增`pwa`功能,可在`.env.production`开启
 - 新增`pwa`功能,可在`.env.production`开启
+- Button 组件扩展 `preIcon`和`postIcon`属性用于在文本前后添加图标
 
 
 ### 🎫 Chores
 ### 🎫 Chores
 
 
@@ -25,6 +26,7 @@
 
 
 - 修复热更新时多次注册组件警告问题
 - 修复热更新时多次注册组件警告问题
 - 修复登录后出现登录标签页
 - 修复登录后出现登录标签页
+- 修复路由切换参数消失问题
 
 
 ## 2.0.0-rc.5 (2020-10-26)
 ## 2.0.0-rc.5 (2020-10-26)
 
 

+ 12 - 1
src/components/Button/index.vue

@@ -1,7 +1,12 @@
 <template>
 <template>
   <Button v-bind="getBindValue" :class="[getColor, $attrs.class]">
   <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" />
       <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>
     </template>
   </Button>
   </Button>
 </template>
 </template>
@@ -44,6 +49,12 @@
         type: Boolean as PropType<boolean>,
         type: Boolean as PropType<boolean>,
         default: false,
         default: false,
       },
       },
+      preIcon: {
+        type: String as PropType<string>,
+      },
+      postIcon: {
+        type: String as PropType<string>,
+      },
     },
     },
     setup(props, { attrs }) {
     setup(props, { attrs }) {
       const getListeners = computed(() => {
       const getListeners = computed(() => {

+ 1 - 1
src/views/demo/feat/msg/index.vue

@@ -1,7 +1,7 @@
 <template>
 <template>
   <div class="p-4">
   <div class="p-4">
     <CollapseContainer class="px-20 bg-white w-full h-32 rounded-md" title="Message">
     <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">
       <a-button @click="successMsg('Success message')" class="mr-2" color="success">
         Success
         Success
       </a-button>
       </a-button>