封裝常用按鈕工具欄,方便其它頁面調(diào)用
缺點:工具欄下面div會顯示工具欄下面,下面需要使用margin-top:40px(小學(xué)生一個沒整明白)希望大神能幫解決
運行效果
????????
組件代碼?tt-btnBar.vue文章來源：http://www.zghlxwxcb.cn/news/detail-785930.html
<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: ""
},
// 默認(rèn)固定頂部不動,
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>父窗口調(diào)用?testbtnbar.vue文章來源地址http://www.zghlxwxcb.cn/news/detail-785930.html
<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='不固定-加左右側(cè)按鈕' 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='不固定-加左側(cè)按鈕' 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='不固定-加左側(cè)按鈕' 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>到了這里，關(guān)于element-ui Vue 封裝組件按鈕工具欄,使用slot插槽的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
