middle-admin-ant/src/application/mk/components/toolbar/toolbar.vue

94 lines
1.6 KiB
Vue

<template>
<!-- 新增 设置 日志 工具条 -->
<div :class="cls">
<a-tooltip placement="topRight" title="日志" v-if="isShowLog">
<a class="iconlink" @click="toolbarClick({name:'log'})"> <a-icon type="file-text"></a-icon></a>
</a-tooltip>
<a-tooltip placement="topRight" title="设置" v-if="isShowSetting">
<a class="iconlink" title="设置" @click="toolbarClick({name:'setting'})"> <a-icon type="setting"></a-icon></a>
</a-tooltip>
<a-button type="primary" @click="toolbarClick({name:'add'})">
新增
</a-button>
<a-button v-if="isShowDelete" type="primary" @click="toolbarClick({name:'delete'})">
批量删除
</a-button>
<a-button @click="toolbarClick(btn)" type="primary" v-for="btn in buttons" :key="btn.name" >
{{btn.label}}
</a-button>
</div>
</template>
<script>
export default {
name: "mktoolbar",
props: {
isShowLog : {
type: Boolean,
default: true
},
isShowSetting : {
type: Boolean,
default: true
},
isShowDelete : {
type: Boolean,
default: false
},
buttons : {
type: Array
},
cls:{
type :String,
default:'mk-toolbar mk-toolbar-right'
}
},
data() {
return {
};
},
methods: {
toolbarClick(e){
this.$emit("toolbarClick",e);
},
gotoLog(){
},
gotoSetting(){
}
},
};
</script>
<style>
/* .mk-toolbar {
width:200px;
position: absolute;
right: 20px;
top: 50px;
z-index: 1;
} */
.mk-toolbar .ant-btn{
position: relative;
top:6px;
}
.iconlink svg{
width:25px;
height: 25px;
}
</style>