zhanghuiqing
/
fiction-admin
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

更新基础静态按钮

master
Eddie 3 years ago
parent
5a8f960118
commit
1515dd09a1
2 changed files with 143 additions and 113 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +131
    -82
      src/components/ActionButton/index.vue
  2. +12
    -31
      src/views/sort-management/index.vue

+ 131
- 82
src/components/ActionButton/index.vue View File

@@ -3,60 +3,105 @@
<!-- 左边 --> <!-- 左边 -->
<div class="top-action-button-left"> <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 --> <!-- 按钮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" /> <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> <span v-if="textBtn1.length > 0">{{ textBtn1 }}</span>
</el-button> </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" /> <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> <span v-if="textBtn2.length > 0">{{ textBtn2 }}</span>
</el-button> </el-button>



<!-- 按钮3 --> <!-- 按钮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" /> <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> <span v-if="textBtn3.length > 0">{{ textBtn3 }}</span>
</el-button> </el-button>


<!-- 按钮4 --> <!-- 按钮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" /> <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> <span v-if="textBtn4.length > 0">{{ textBtn4 }}</span>
</el-button> </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>

</div> </div>
</template> </template>


<script> <script>

/** /**
* 数据表格上面的操作按钮 * 数据表格上面的操作按钮
* openRefresh： 左边是否打开刷新按钮 * openRefresh： 左边是否打开刷新按钮
@@ -81,193 +126,197 @@ export default {
// 基础设置 // 基础设置
openSearch: { openSearch: {
type: Boolean, type: Boolean,
default: true
default: true,
}, },
openRefresh: { openRefresh: {
type: Boolean, type: Boolean,
default: true
default: true,
}, },
btnSize: { btnSize: {
type: String, type: String,
default: 'mini'
default: "mini",
}, },
// 按钮1 // 按钮1
openBtn1: { openBtn1: {
type: Boolean, type: Boolean,
default: false
default: false,
}, },
isSvgBtn1: { isSvgBtn1: {
type: Boolean, type: Boolean,
default: false
default: false,
}, },
typeBtn1: { typeBtn1: {
type: String, type: String,
default: 'primary'
default: "primary",
}, },
iconBtn1: { iconBtn1: {
type: String, type: String,
default: 'el-icon-plus'
default: "el-icon-plus",
}, },
textBtn1: { textBtn1: {
type: String, type: String,
default: ''
default: "",
}, },
disabledBtn1: { disabledBtn1: {
type: Boolean, type: Boolean,
default: false
default: false,
}, },
plainBtn1: { plainBtn1: {
type: Boolean, type: Boolean,
default: false
default: false,
}, },
// 按钮2 // 按钮2
openBtn2: { openBtn2: {
type: Boolean, type: Boolean,
default: false
default: false,
}, },
isSvgBtn2: { isSvgBtn2: {
type: Boolean, type: Boolean,
default: false
default: false,
}, },
typeBtn2: { typeBtn2: {
type: String, type: String,
default: 'primary'
default: "primary",
}, },
iconBtn2: { iconBtn2: {
type: String, type: String,
default: 'el-icon-plus'
default: "el-icon-plus",
}, },
textBtn2: { textBtn2: {
type: String, type: String,
default: ''
default: "",
}, },
disabledBtn2: { disabledBtn2: {
type: Boolean, type: Boolean,
default: false
default: false,
}, },
plainBtn2: { plainBtn2: {
type: Boolean, type: Boolean,
default: false
default: false,
}, },
// 按钮3 // 按钮3
openBtn3: { openBtn3: {
type: Boolean, type: Boolean,
default: false
default: false,
}, },
isSvgBtn3: { isSvgBtn3: {
type: Boolean, type: Boolean,
default: false
default: false,
}, },
typeBtn3: { typeBtn3: {
type: String, type: String,
default: 'primary'
default: "primary",
}, },
iconBtn3: { iconBtn3: {
type: String, type: String,
default: 'el-icon-plus'
default: "el-icon-plus",
}, },
textBtn3: { textBtn3: {
type: String, type: String,
default: ''
default: "",
}, },
disabledBtn3: { disabledBtn3: {
type: Boolean, type: Boolean,
default: false
default: false,
}, },
plainBtn3: { plainBtn3: {
type: Boolean, type: Boolean,
default: false
default: false,
}, },
// 按钮4 // 按钮4
openBtn4: { openBtn4: {
type: Boolean, type: Boolean,
default: false
default: false,
}, },
isSvgBtn4: { isSvgBtn4: {
type: Boolean, type: Boolean,
default: false
default: false,
}, },
typeBtn4: { typeBtn4: {
type: String, type: String,
default: 'primary'
default: "primary",
}, },
iconBtn4: { iconBtn4: {
type: String, type: String,
default: 'el-icon-plus'
default: "el-icon-plus",
}, },
textBtn4: { textBtn4: {
type: String, type: String,
default: ''
default: "",
}, },
disabledBtn4: { disabledBtn4: {
type: Boolean, type: Boolean,
default: false
default: false,
}, },
plainBtn4: { plainBtn4: {
type: Boolean, type: Boolean,
default: false
default: false,
}, },
// 按钮5 // 按钮5
openBtn5: { openBtn5: {
type: Boolean, type: Boolean,
default: false
default: false,
}, },
isSvgBtn5: { isSvgBtn5: {
type: Boolean, type: Boolean,
default: false
default: false,
}, },
typeBtn5: { typeBtn5: {
type: String, type: String,
default: 'primary'
default: "primary",
}, },
iconBtn5: { iconBtn5: {
type: String, type: String,
default: 'el-icon-plus'
default: "el-icon-plus",
}, },
textBtn5: { textBtn5: {
type: String, type: String,
default: ''
default: "",
}, },
disabledBtn5: { disabledBtn5: {
type: Boolean, type: Boolean,
default: false
default: false,
}, },
plainBtn5: { plainBtn5: {
type: Boolean, type: Boolean,
default: false
}
default: false,
},
}, },
methods: { methods: {
handleRefresh() { handleRefresh() {
this.$emit('handle-refresh')
this.$emit("handle-refresh");
}, },
handleSearch() { handleSearch() {
this.$emit('handle-search')
this.$emit("handle-search");
}, },
handleButton1() { handleButton1() {
this.$emit('handle-button1')
this.$emit("handle-button1");
}, },
handleButton2() { handleButton2() {
this.$emit('handle-button2')
this.$emit("handle-button2");
}, },
handleButton3() { handleButton3() {
this.$emit('handle-button3')
this.$emit("handle-button3");
}, },
handleButton4() { handleButton4() {
this.$emit('handle-button4')
this.$emit("handle-button4");
}, },
handleButton5() { handleButton5() {
this.$emit('handle-button5')
}
}
}
this.$emit("handle-button5");
},
},
};
</script> </script>


<style lang="scss" scoped> <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> </style>

+ 12
- 31
src/views/sort-management/index.vue View File

@@ -1,36 +1,15 @@
<template> <template>
<el-container> <el-container>
<el-main> <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 <ActionButton
:openBtn1="true"
:textBtn1="'新增分类'"
:openBtn5="true"
:textBtn5="'书源'"
:typeBtn5="'warning'"
:iconBtn5="'el-icon-tickets'"
@handle-refresh="refreshData" @handle-refresh="refreshData"
@handle-search="isSearchVisible = !isSearchVisible"
@handle-button1="refreshData1"
/> />


<div> <div>
@@ -91,9 +70,6 @@ export default {
}, },
data() { data() {
return { return {
formData: {},
isSearchVisible: false,

// 分页数据 // 分页数据
totalCount: 0, totalCount: 0,
currentPage: 1, currentPage: 1,
@@ -107,6 +83,11 @@ export default {
console.log("刷新"); console.log("刷新");
}, },


// 新增分类
refreshData1() {
console.log("新增分类");
},

handleDelete(index) { handleDelete(index) {
console.log(index, "删除"); console.log(index, "删除");
}, },


Write Preview
Loading…
Cancel
Save