el-dialog el-tabs结合样式改造

效果：

dialog.vue (封装好的组件)

<template><div><el-dialog :visible.sync="dialogVisibles" class="theme1" @close="$emit('update:show', false)"><el-tabs v-model="activeName" type="card" @tab-click="handleClick"><el-tab-pane :label="item.label" :name="'first'+index" v-for="(item,index) in panes" :key="index"><div class="el-tab-pane-box" :style="'height:'+height+'px;'"><slot name="pane" :data="index+1">{{item.label}}</slot></div></el-tab-pane></el-tabs></el-dialog></div>
</template><script>export default {name: 'dialogTheme',components: {},props: {panes: {type: Array,default: () => ([])},height: {type: Number,default: 300},show: {type: Boolean,default: false}},data() {return {activeName: 'first0',dialogVisibles: this.show}},created() {},mounted() {},methods: {handleClick(item) {this.$emit('tab-click', item)}},watch: {show() {this.dialogVisibles = this.show}}}
</script>

common.scss

// 组件样式调整
.theme1{.el-dialog {background-color: rgba(0, 0, 0, 0);box-shadow: 1px 1px 3px rgba(0, 0, 0, 0);}.el-dialog__header {padding: 0;}.el-dialog__headerbtn {top: 64px;z-index: 9999;.el-dialog__close {color: #000;}}.el-dialog__body {padding: 0;}.el-tabs--card>.el-tabs__header .el-tabs__nav {border: none;}.el-tabs__header {margin: 0;}.el-tabs__content {background-color: #fff;padding: 20px;}.el-tabs--card>.el-tabs__header .el-tabs__item.is-active {border-bottom: 1px solid transparent;background: #fff;}.el-tabs--card>.el-tabs__header .el-tabs__item {border-bottom: 1px solid #a3a7af;border-left: 1px solid #a3a7af;background: #ddd;border-top-left-radius: 20px;border-top-right-radius: 20px;&:first-child {border-left: 1px solid transparent;}}.el-tabs__item:focus.is-active.is-focus:not(:active) {box-shadow: none;border-top-left-radius: 20px;border-top-right-radius: 20px;}}

组件使用：
index.vue

<template><div class="app-container"><button class="pan-btn yellow-btn" @click="OpenDialogVisible">点击打开 Dialog</button><dialog-theme :height="height" :panes="panes" @tab-click="tabClick" :show.sync="show"><div slot="pane" slot-scope="{data}"><component :is="currentComponent[data]"></component></div></dialog-theme></div>
</template><script>
import One from './demo01'
import Two from './demo02'
import Three from './demo03'
import Four from './demo04'
import DialogTheme from './dialog'
export default {name: 'dialogUse',components: {DialogTheme,One,Two,Three,Four},data() {return {panes: [{ label: '用户管理' },{ label: '配置管理' },{ label: '角色管理' },{ label: '定时任务补偿' }], // 传入tabs的名字height: 300, // 弹框高度show: false, // 弹框显示currentComponent: {1: 'One',2: 'Two',3: 'Three',4: 'Four'} // 当前tab页现实的组件，组件名对应tab窗口1,2,3。。。}},created() {},mounted() {},methods: {OpenDialogVisible() {this.show = true},// 点击tab切换事件tabClick(item) {console.log(item)}}}
</script><style lang="scss" scoped>
</style>

特别提示：silot是可以多级传递的

el-dialog el-tabs结合样式改造相关推荐

java el jstl_java -EL技术JSTL技术
EL技术 EL 表达式概述 EL(Express Lanuage)表达式可以嵌入在jsp页面内部,减少jsp脚本的编写,EL出现的目的是要替代jsp页面中脚本(java代码)的编写. EL从域中取出数 ...
vue获取dom元素节点并操作元素的样式（$el的用法操作元素样式）
在vue中操作dom元素第一种:$refs <div ref="box"></div> 在标签身上可以写一个ref属性,然后就可以通过this.$refs ...
JSP→JSTL标准标签库简介与环境搭建、JSTL助手EL表达式EL隐式对象、标签→out、set、if、多选择配合、foreach、redirect、格式化、JSTL函数标签、自定义标签、标签类架构
JSTL标准标签库简介与环境搭建 EL表达式与EL隐式对象 out标签 set标签 remove标签 catch标签 if标签 choose.when.otherwise配合标签 foreach标签 ...
CDI services--Scope（生命周期）EL.(Sp El)
一.EL/SpEL 1.EL语言(CDI与表达式语言(EL)集成,允许在JavaServer Faces页面或JavaServer Pages页面中直接使用任何组件) 1)概述: EL是JSP内置的表 ...
CDI Services *Decoretions *Intercepters * Scope * EL\(Sp EL) *Eventmodel
1.Decorators装饰器综述拦截器是一种强大的方法在应用程序捕捉运行方法和解耦.拦截器可以拦截任何java类型的调用. 这使得拦截器适合解决事务管理,安全性,以及日记记录. 本质上说,拦截 ...
如何修改elementUI里面Dialog组件标题的样式
项目的需求是将箭头处的标题设计成UI稿上的样式! 然后我发现,代码是这样的, 于是去elementUI源码一探究竟: 源码实际上是在这一块做了一个具名插槽然后将我们在父组件中将标题传进来就可以了: ...
android dialog内嵌listview样式,android 開發dialog 嵌套listview布局
示例代碼: 示例:public void setDialog(){ LayoutInflater inflater=LayoutInflater.from(this);//將xml布局轉換為view ...
elementUI步骤条样式改造
修改的效果图如上.下面详细介绍修改的步骤.(通过动态添加类名的方式改进样式) 结构部分 <el-steps :active="milepostActive" >< ...
MySQL、JDBC、HTML、CSS、JavaScript、jQuery、tomcat、Http、Servlet、JSP、EL、JSTL、Maven、Cookie、Session（框架第一部分）
第一章 MySQL 一 .数据库 1.什么是数据库? 所谓的数据库就是指存储和管理数据的仓库 2.数据库有哪些分类? 3.什么是关系型数据库? 底层以二维表的形式保存数据的库就是关系型数据库 stu- ...

el-dialog el-tabs结合样式改造

el-dialog el-tabs结合样式改造

el-dialog el-tabs结合样式改造相关推荐

最新文章

热门文章

el-dialog el-tabs结合样式改造

el-dialog el-tabs结合 样式改造

el-dialog el-tabs结合样式改造相关推荐

最新文章

热门文章

el-dialog el-tabs结合样式改造