封装常用按钮工具栏,方便其它页面调用
缺点:工具栏下面div会显示工具栏下面,下面需要使用margin-top:40px(小学生一个没整明白)希望大神能帮解决
运行效果
组件代码 tt-btnBar.vue
<template>
<div>
<div class="btnbarP">
<div class="btnbar" :class="isFix=='1'?'fix':''">
<div class="left">
<i class="iconfont icon-biaodan" style="cursor: pointer;margin:0 6px"></i>
{{title}}
<!-- slot插槽使用name属性固定显示位置 -->
<slot name="lbtn"></slot>
<el-button-group>
<slot name="lbtngroup"></slot>
</el-button-group>
</div>
<div class="right">
<slot name="btn"></slot>
<el-button-group>
<slot name="btngroup"></slot>
<!--
<el-button size="mini" type="primary">保存</el-button>
<el-button size="mini">打印</el-button>
<el-button size="mini" type="info">取消</el-button>
-->
</el-button-group>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:{
title: {
type: String,
default: ""
},
// 默认固定顶部不动,
isFix:{
type: String,
default: "1"
}
},
data() {
return {
property: 'value',
};
},
}
</script>
<style lang="scss" scoped>
/* 固定工具栏 */
.btnbarP{
/* 父窗占位 */
width: 100%;
height: 32px;
// background-color: #fff;
}
.btnbar {
display: flex;
justify-content: space-between;
width: 100%;
height: 32px;
padding: 2px 10px ;
line-height: 26px;
border-radius: 8px 8px 0 0;
background-color: rgb(212, 211, 211);
overflow: auto;
&.fix{
/* 固定悬浮 */
position: fixed;
z-index: 999;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
}
</style>父窗口调用 testbtnbar.vue
<template>
<div>
<div style="height: 100px;background-color:rebeccapurple">
<ttbtnbar title='固定到顶部' isFix="1">
<template slot="lbtn">
<span>选择日期 </span>
<el-date-picker class="datebox"
style="width: 150px;padding:0px 5px ;"
align="right"
v-model="date"
type="date"
value-format="yyyy-MM-dd"
placeholder="">
</el-date-picker>
</template>
<template slot="btngroup">
<el-button size="mini" @click="msg('11')" type="primary">保存</el-button>
<el-button size="mini" @click="msg('12')">打印</el-button>
<el-button size="mini" @click="msg('13')" type="info">取消</el-button>
</template>
</ttbtnbar>
</div>
<div style="display: flex;justify-content: space-between;">
<div style="height: 100px;width: 60%;margin: 4px;border:2px solid #24941e;background-color: aqua;">
<ttbtnbar title='不固定-加左右侧按钮' isFix="0">
<template slot="lbtngroup">
<el-button size="mini" @click="msg('1')">按钮1</el-button>
<el-button size="mini" @click="msg('2')">按钮2</el-button>
<el-button size="mini" @click="msg('3')">按钮3</el-button>
</template>
<template slot="btngroup">
<el-button size="mini" @click="msg('11')" type="primary">保存</el-button>
<el-button size="mini" @click="msg('12')">打印</el-button>
<el-button size="mini" @click="msg('13')" type="info">取消</el-button>
</template>
</ttbtnbar>
</div>
<div style="height: 100px;width: 40%;margin: 4px;border:2px solid #24941e;background-color: red;">
<ttbtnbar title='不固定-加左侧按钮' isFix="0">
<template slot="lbtn">
<el-button size="mini" @click="msg('l1')">按钮1</el-button>
<el-button size="mini" @click="msg('l2')">按钮2</el-button>
<el-button size="mini" @click="msg('l3')">按钮3</el-button>
</template>
</ttbtnbar>
</div>
</div>
<div style="height: 100px;width: 100%;margin: 4px;border:2px solid #24941e;background-color: red;">
<ttbtnbar title='不固定-加左侧按钮' isFix="0">
<template slot="lbtn">
<el-button size="mini" @click="msg('l1')">按钮1</el-button>
<el-button size="mini" @click="msg('l2')">按钮2</el-button>
<el-button size="mini" @click="msg('l3')">按钮3</el-button>
</template>
<template slot="lbtngroup">
<el-button size="mini" @click="msg('l11')">按钮1</el-button>
<el-button size="mini" @click="msg('l22')">按钮2</el-button>
<el-button size="mini" @click="msg('l33')">按钮3</el-button>
</template>
</ttbtnbar>
</div>
{{ property }}
<div>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
<h1>2222</h1>
</div>
</div>
</template>
<script>
import ttbtnbar from '@/components/tt-btnBar'
import {getNowDate} from '@/utils/formatTime';
export default {
components: {
ttbtnbar
},
data() {
return {
property: 'btbar测试',
date:getNowDate()
};
},
methods:{
msg(str){
console.log('msg',str);
}
}
}
</script>
<style lang="scss" scoped>
.datebox{
height: 28px ;
::v-deep .el-input__inner{
height: 28px ;
}
::v-deep .el-input__icon{
line-height: 28px;
}
}
</style>
