自定义组件按钮

src/views/monitor/errorLog/index.vue

@@ -69,25 +69,28 @@
         <el-button type="primary" size="small" @click="handleQuery">查询</el-button>
       </el-form-item>
       <el-form-item style="float: right">
-        <el-button
-          v-hasPermi="['monitor:errorLog:delete']"
-          type="danger"
-          size="small"
-          :disabled="ids.length === 0"
-          @click="handleDelete"
-        >删除</el-button>
-        <el-button
-          v-hasPermi="['zt:errlog:clear']"
-          type="danger"
-          size="small"
-          @click="handleClean"
-        >清空</el-button>
-        <el-button
-          v-hasPermi="['zt:errlog:export']"
-          type="success"
-          size="small"
-          @click="handleExport"
-        >导出</el-button>
+<!--        <el-button-->
+<!--          v-hasPermi="['monitor:errorLog:delete']"-->
+<!--          type="danger"-->
+<!--          size="small"-->
+<!--          :disabled="ids.length === 0"-->
+<!--          @click="handleDelete"-->
+<!--        >删除</el-button>-->
+        <coolbutton style="padding: 8px 7px;" :type="deletetypePrimary" :name="deleteName" :size="deleteSize" :disabled="deleteDisabled" :haspermi="deleteHaspermi" @btn-click="handleDelete" />
+<!--        <el-button-->
+<!--          v-hasPermi="['zt:errlog:clear']"-->
+<!--          type="danger"-->
+<!--          size="small"-->
+<!--          @click="handleClean"-->
+<!--        >清空</el-button>-->
+        <coolbutton style="padding: 8px 7px;" :type="cleantypePrimary" :name="cleanName" :size="cleanSize" :haspermi="cleanHaspermi" @btn-click="handleClean" />
+<!--        <el-button-->
+<!--          v-hasPermi="['zt:errlog:export']"-->
+<!--          type="success"-->
+<!--          size="small"-->
+<!--          @click="handleExport"-->
+<!--        >导出</el-button>-->
+        <coolbutton style="padding: 8px 7px;" :type="exporttypePrimary" :name="exportName" :size="exportSize" :haspermi="exportHaspermi" @btn-click="handleExport" />
         <!--          <el-button size="small" @click="resetQuery">重置</el-button>-->
       </el-form-item>
     </el-form>
@@ -209,11 +212,27 @@
 
 <script>
 import { list, delErrLog, cleanErrLog, exportErrLog } from '@/api/monitor/errorLog'
+import Coolbutton from '@/components/coolbutton'
 
 export default {
   name: 'Operlog',
+  components: { Coolbutton },
   data() {
     return {
+      // 自定义按钮
+      deletetypePrimary: 'danger',
+      deleteName: '删除',
+      deleteSize: 'small',
+      deleteDisabled: 'ids.length === 0',
+      deleteHaspermi: ['monitor:errorLog:delete'],
+      cleantypePrimary: 'danger',
+      cleanName: '清空',
+      cleanSize: 'small',
+      cleanHaspermi: ['zt:errlog:clear'],
+      exporttypePrimary: 'success',
+      exportName: '导出',
+      exportSize: 'small',
+      exportHaspermi: ['zt:errlog:export'],
       // 遮罩层
       loading: true,
       // 选中数组

src/views/monitor/loginInfo/index.vue

@@ -54,24 +54,27 @@
       <div style="float: right">
         <el-form-item>
           <!--          v-hasPermi="['zt:loginlog:delete']"-->
-          <el-button
-            type="danger"
-            size="small"
-            :disabled="multiple"
-            @click="handleDelete"
-          >删除</el-button>
+<!--          <el-button-->
+<!--            type="danger"-->
+<!--            size="small"-->
+<!--            :disabled="multiple"-->
+<!--            @click="handleDelete"-->
+<!--          >删除</el-button>-->
+          <coolbutton style="padding: 8px 7px;" :type="deletetypePrimary" :name="deleteName" :size="deleteSize" :disabled="deleteDisabled" @btn-click="handleDelete" />
           <!--          v-hasPermi="['zt:loginlog:clear']"-->
-          <el-button
-            type="danger"
-            size="small"
-            @click="handleClean"
-          >清空</el-button>
+<!--          <el-button-->
+<!--            type="danger"-->
+<!--            size="small"-->
+<!--            @click="handleClean"-->
+<!--          >清空</el-button>-->
+          <coolbutton style="padding: 8px 7px;" :type="cleantypePrimary" :name="cleanName" :size="cleanSize" @btn-click="handleClean" />
           <!--          v-hasPermi="['zt:loginlog:export']"-->
-          <el-button
-            type="success"
-            size="small"
-            @click="handleExport"
-          >导出</el-button>
+<!--          <el-button-->
+<!--            type="success"-->
+<!--            size="small"-->
+<!--            @click="handleExport"-->
+<!--          >导出</el-button>-->
+          <coolbutton style="padding: 8px 7px;" :type="exporttypePrimary" :name="exportName" :size="exportSize" @btn-click="handleExport" />
           <!--          <el-button size="mini" @click="resetQuery">重置</el-button>-->
         </el-form-item>
       </div>
@@ -155,11 +158,23 @@
 import { list, delLogininfo, cleanLogininfo, exportLogininfo } from '@/api/monitor/loginInfo'
 import dictCons from '@/utils/dictCons'
 import Template from '@/views/instance/Template'
+import Coolbutton from '@/components/coolbutton'
 export default {
   name: 'LoginInfo',
-  components: { Template },
+  components: { Template, Coolbutton },
   data() {
     return {
+      // 自定义按钮
+      deletetypePrimary: 'danger',
+      deleteName: '删除',
+      deleteSize: 'small',
+      deleteDisabled: 'multiple',
+      cleantypePrimary: 'danger',
+      cleanName: '清空',
+      cleanSize: 'small',
+      exporttypePrimary: 'success',
+      exportName: '导出',
+      exportSize: 'small',
       // 遮罩层
       loading: true,
       // 选中数组

src/views/monitor/operLog/index.vue

@@ -69,25 +69,28 @@
         <el-button type="primary" size="small" @click="handleQuery">查询</el-button>
       </el-form-item>
       <el-form-item style="float: right">
-        <el-button
-          v-hasPermi="['zt:operLog:delete']"
-          type="danger"
-          size="small"
-          :disabled="ids.length === 0"
-          @click="handleDelete"
-        >删除</el-button>
-        <el-button
-          v-hasPermi="['zt:operLog:clear']"
-          type="danger"
-          size="small"
-          @click="handleClean"
-        >清空</el-button>
-        <el-button
-          v-hasPermi="['zt:operLog:export']"
-          type="success"
-          size="small"
-          @click="handleExport"
-        >导出</el-button>
+<!--        <el-button-->
+<!--          v-hasPermi="['zt:operLog:delete']"-->
+<!--          type="danger"-->
+<!--          size="small"-->
+<!--          :disabled="ids.length === 0"-->
+<!--          @click="handleDelete"-->
+<!--        >删除</el-button>-->
+        <coolbutton style="padding: 8px 7px;" :type="deletetypePrimary" :name="deleteName" :size="deleteSize" :disabled="deleteDisabled" :haspermi="deleteHaspermi" @btn-click="handleDelete" />
+<!--        <el-button-->
+<!--          v-hasPermi="['zt:operLog:clear']"-->
+<!--          type="danger"-->
+<!--          size="small"-->
+<!--          @click="handleClean"-->
+<!--        >清空</el-button>-->
+        <coolbutton style="padding: 8px 7px;" :type="cleantypePrimary" :name="cleanName" :size="cleanSize" :haspermi="cleanHaspermi" @btn-click="handleClean" />
+<!--        <el-button-->
+<!--          v-hasPermi="['zt:operLog:export']"-->
+<!--          type="success"-->
+<!--          size="small"-->
+<!--          @click="handleExport"-->
+<!--        >导出</el-button>-->
+        <coolbutton style="padding: 8px 7px;" :type="exporttypePrimary" :name="exportName" :size="exportSize" :haspermi="exportHaspermi" @btn-click="handleExport" />
         <!--          <el-button size="small" @click="resetQuery">重置</el-button>-->
       </el-form-item>
     </el-form>
@@ -209,11 +212,27 @@
 
 <script>
 import { list, delOperLog, cleanOperLog, exportOperLog } from '@/api/monitor/operLog'
+import Coolbutton from '@/components/coolbutton'
 
 export default {
   name: 'Operlog',
+  components: { Coolbutton },
   data() {
     return {
+      // 自定义按钮
+      deletetypePrimary: 'danger',
+      deleteName: '删除',
+      deleteSize: 'small',
+      deleteDisabled: 'ids.length === 0',
+      deleteHaspermi: ['zt:operLog:delete'],
+      cleantypePrimary: 'danger',
+      cleanName: '清空',
+      cleanSize: 'small',
+      cleanHaspermi: ['zt:operLog:clear'],
+      exporttypePrimary: 'success',
+      exportName: '导出',
+      exportSize: 'small',
+      exportHaspermi: ['zt:operLog:export'],
       // 遮罩层
       loading: true,
       // 选中数组