更新基础静态按钮

src/components/ActionButton/index.vue

@@ -3,60 +3,105 @@
     <!-- 左边 -->
     <div class="top-action-button-left">
       <!-- 刷新按钮 -->
-      <el-button v-if="openRefresh" type="primary" icon="el-icon-refresh-right" :size="btnSize" @click="handleRefresh" />
+      <el-button
+        v-if="openRefresh"
+        type="primary"
+        icon="el-icon-refresh-right"
+        :size="btnSize"
+        @click="handleRefresh"
+      />
 
       <!-- 按钮1 -->
-      <el-button v-if="openBtn1" :disabled="disabledBtn1" :size="btnSize" :type="typeBtn1" :plain="plainBtn1" @click="handleButton1">
+      <el-button
+        v-if="openBtn1"
+        :disabled="disabledBtn1"
+        :size="btnSize"
+        :type="typeBtn1"
+        :plain="plainBtn1"
+        @click="handleButton1"
+      >
         <i v-if="!isSvgBtn1" :class="iconBtn1" />
-        <svg-icon v-else :icon-class="iconBtn1" style="margin-right: 6px;" />
+        <svg-icon v-else :icon-class="iconBtn1" style="margin-right: 6px" />
         <span v-if="textBtn1.length > 0">{{ textBtn1 }}</span>
       </el-button>
 
-      <!-- 按钮2 -->
-      <el-button v-if="openBtn2" :disabled="disabledBtn2" :size="btnSize" :type="typeBtn2" :plain="plainBtn2" @click="handleButton2">
+      <el-button
+        v-if="openBtn2"
+        :disabled="disabledBtn2"
+        :size="btnSize"
+        :type="typeBtn2"
+        :plain="plainBtn2"
+        @click="handleButton2"
+      >
         <i v-if="!isSvgBtn2" :class="iconBtn2" />
-        <svg-icon v-else :icon-class="iconBtn2" style="margin-right: 6px;" />
+        <svg-icon v-else :icon-class="iconBtn2" style="margin-right: 6px" />
         <span v-if="textBtn2.length > 0">{{ textBtn2 }}</span>
       </el-button>
 
+
       <!-- 按钮3 -->
-      <el-button v-if="openBtn3" :disabled="disabledBtn3" :size="btnSize" :type="typeBtn3" :plain="plainBtn3" @click="handleButton3">
+      <el-button
+        v-if="openBtn3"
+        :disabled="disabledBtn3"
+        :size="btnSize"
+        :type="typeBtn3"
+        :plain="plainBtn3"
+        @click="handleButton3"
+      >
         <i v-if="!isSvgBtn3" :class="iconBtn3" />
-        <svg-icon v-else :icon-class="iconBtn3" style="margin-right: 6px;" />
+        <svg-icon v-else :icon-class="iconBtn3" style="margin-right: 6px" />
         <span v-if="textBtn3.length > 0">{{ textBtn3 }}</span>
       </el-button>
 
       <!-- 按钮4 -->
-      <el-button v-if="openBtn4" :disabled="disabledBtn4" :size="btnSize" :type="typeBtn4" :plain="plainBtn4" @click="handleButton4">
+      <el-button
+        v-if="openBtn4"
+        :disabled="disabledBtn4"
+        :size="btnSize"
+        :type="typeBtn4"
+        :plain="plainBtn4"
+        @click="handleButton4"
+      >
         <i v-if="!isSvgBtn4" :class="iconBtn4" />
-        <svg-icon v-else :icon-class="iconBtn4" style="margin-right: 6px;" />
+        <svg-icon v-else :icon-class="iconBtn4" style="margin-right: 6px" />
         <span v-if="textBtn4.length > 0">{{ textBtn4 }}</span>
       </el-button>
 
-      <el-button v-if="openBtn5" :disabled="disabledBtn5" :size="btnSize" :type="typeBtn5" :plain="plainBtn5" @click="handleButton5">
-        <i v-if="!isSvgBtn5" :class="iconBtn5" />
-        <svg-icon v-else :icon-class="iconBtn5" style="margin-right: 6px;" />
-        <span v-if="textBtn5.length > 0">{{ textBtn5 }}</span>
-      </el-button>
 
-    </div>
 
-    <!-- 右边 -->
-    <div class="top-action-button-right">
-      <!-- 搜索按钮 -->
-      <el-button
-        v-if="openSearch"
-        type="primary"
-        icon="el-icon-search"
-        :size="btnSize"
-        @click="handleSearch"
-      ></el-button>
+
+            <!-- 下拉按钮 -->
+      <el-dropdown v-if="openBtn5" style="margin-left: 10px">
+        <!-- 按钮2 -->
+        <el-button
+          :disabled="disabledBtn5"
+          :size="btnSize"
+          :type="typeBtn5"
+          :plain="plainBtn5"
+          @click="handleButton5"
+        >
+          <span class="el-dropdown-link">
+            <i v-if="!isSvgBtn5" :class="iconBtn5" />
+            <svg-icon v-else :icon-class="iconBtn5" style="margin-right: 6px" />
+            <span v-if="textBtn5.length > 0">{{ textBtn5 }}</span>
+            <i class="el-icon-caret-bottom" style="margin-left: 5px" />
+          </span>
+        </el-button>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item>黄金糕</el-dropdown-item>
+          <el-dropdown-item>狮子头</el-dropdown-item>
+          <el-dropdown-item>螺蛳粉</el-dropdown-item>
+          <el-dropdown-item disabled>双皮奶</el-dropdown-item>
+          <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
     </div>
+
+ 
   </div>
 </template>
 
 <script>
-
 /**
  *  数据表格上面的操作按钮
  *  openRefresh：   左边是否打开刷新按钮
@@ -81,193 +126,197 @@ export default {
     // 基础设置
     openSearch: {
       type: Boolean,
-      default: true
+      default: true,
     },
     openRefresh: {
       type: Boolean,
-      default: true
+      default: true,
     },
     btnSize: {
       type: String,
-      default: 'mini'
+      default: "mini",
     },
     // 按钮1
     openBtn1: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isSvgBtn1: {
       type: Boolean,
-      default: false
+      default: false,
     },
     typeBtn1: {
       type: String,
-      default: 'primary'
+      default: "primary",
     },
     iconBtn1: {
       type: String,
-      default: 'el-icon-plus'
+      default: "el-icon-plus",
     },
     textBtn1: {
       type: String,
-      default: ''
+      default: "",
     },
     disabledBtn1: {
       type: Boolean,
-      default: false
+      default: false,
     },
     plainBtn1: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 按钮2
     openBtn2: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isSvgBtn2: {
       type: Boolean,
-      default: false
+      default: false,
     },
     typeBtn2: {
       type: String,
-      default: 'primary'
+      default: "primary",
     },
     iconBtn2: {
       type: String,
-      default: 'el-icon-plus'
+      default: "el-icon-plus",
     },
     textBtn2: {
       type: String,
-      default: ''
+      default: "",
     },
     disabledBtn2: {
       type: Boolean,
-      default: false
+      default: false,
     },
     plainBtn2: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 按钮3
     openBtn3: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isSvgBtn3: {
       type: Boolean,
-      default: false
+      default: false,
     },
     typeBtn3: {
       type: String,
-      default: 'primary'
+      default: "primary",
     },
     iconBtn3: {
       type: String,
-      default: 'el-icon-plus'
+      default: "el-icon-plus",
     },
     textBtn3: {
       type: String,
-      default: ''
+      default: "",
     },
     disabledBtn3: {
       type: Boolean,
-      default: false
+      default: false,
     },
     plainBtn3: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 按钮4
     openBtn4: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isSvgBtn4: {
       type: Boolean,
-      default: false
+      default: false,
     },
     typeBtn4: {
       type: String,
-      default: 'primary'
+      default: "primary",
     },
     iconBtn4: {
       type: String,
-      default: 'el-icon-plus'
+      default: "el-icon-plus",
     },
     textBtn4: {
       type: String,
-      default: ''
+      default: "",
     },
     disabledBtn4: {
       type: Boolean,
-      default: false
+      default: false,
     },
     plainBtn4: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 按钮5
     openBtn5: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isSvgBtn5: {
       type: Boolean,
-      default: false
+      default: false,
     },
     typeBtn5: {
       type: String,
-      default: 'primary'
+      default: "primary",
     },
     iconBtn5: {
       type: String,
-      default: 'el-icon-plus'
+      default: "el-icon-plus",
     },
     textBtn5: {
       type: String,
-      default: ''
+      default: "",
     },
     disabledBtn5: {
       type: Boolean,
-      default: false
+      default: false,
     },
     plainBtn5: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   methods: {
     handleRefresh() {
-      this.$emit('handle-refresh')
+      this.$emit("handle-refresh");
     },
     handleSearch() {
-      this.$emit('handle-search')
+      this.$emit("handle-search");
     },
     handleButton1() {
-      this.$emit('handle-button1')
+      this.$emit("handle-button1");
     },
     handleButton2() {
-      this.$emit('handle-button2')
+      this.$emit("handle-button2");
     },
     handleButton3() {
-      this.$emit('handle-button3')
+      this.$emit("handle-button3");
     },
     handleButton4() {
-      this.$emit('handle-button4')
+      this.$emit("handle-button4");
     },
     handleButton5() {
-      this.$emit('handle-button5')
-    }
-  }
-}
+      this.$emit("handle-button5");
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  // 操作按钮
-  .top-action-button-container {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 16px;
-  }
+// 操作按钮
+.top-action-button-container {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.el-dropdown-link {
+  color: #fff;
+}
 </style>

src/views/sort-management/index.vue

@@ -1,36 +1,15 @@
 <template>
   <el-container>
     <el-main>
-      <el-form
-        v-if="isSearchVisible"
-        size="mini"
-        label-position="right"
-        label-width="100px"
-        :inline="true"
-        :model="formData"
-        style="margin-bottom: 30px"
-      >
-        <div class="head-box">
-          <el-form-item label="会员ID">
-            <el-input v-model="formData.uid"></el-input>
-          </el-form-item>
-          <el-form-item label="会员昵称">
-            <el-input v-model="formData.name"></el-input>
-          </el-form-item>
-          <el-form-item label="备注">
-            <el-input v-model="formData.comment"></el-input>
-          </el-form-item>
-
-          <el-form-item>
-            <el-button type="primary">搜索</el-button>
-            <el-button type="info">重置</el-button>
-          </el-form-item>
-        </div>
-      </el-form>
-
       <ActionButton
+        :openBtn1="true"
+        :textBtn1="'新增分类'"
+        :openBtn5="true"
+        :textBtn5="'书源'"
+        :typeBtn5="'warning'"
+        :iconBtn5="'el-icon-tickets'"
         @handle-refresh="refreshData"
-        @handle-search="isSearchVisible = !isSearchVisible"
+        @handle-button1="refreshData1"
       />
 
       <div>
@@ -91,9 +70,6 @@ export default {
   },
   data() {
     return {
-      formData: {},
-      isSearchVisible: false,
-
       // 分页数据
       totalCount: 0,
       currentPage: 1,
@@ -107,6 +83,11 @@ export default {
       console.log("刷新");
     },
 
+    // 新增分类
+    refreshData1() {
+      console.log("新增分类");
+    },
+
     handleDelete(index) {
       console.log(index, "删除");
     },