element-ui Vue 封装组件按钮工具栏,使用slot插槽-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui Vue 封装组件按钮工具栏,使用slot插槽。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

封装常用按钮工具栏,方便其它页面调用

缺点:工具栏下面div会显示工具栏下面,下面需要使用margin-top:40px(小学生一个没整明白)希望大神能帮解决

运行效果

element-ui Vue 封装组件按钮工具栏,使用slot插槽,element ui,vue,vue.js,javascript,前端,elementui

组件代码 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文章来源地址https://www.toymoban.com/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='不固定-加左右侧按钮' 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>

到了这里，关于element-ui Vue 封装组件按钮工具栏,使用slot插槽的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！