//先插如效果图

里面内容均为传进来的.包括取消与确定按钮,因为每个页面的绑定事件不一样.

//下面这个图片为初始样式

//拖动模态框指令需要插件.详情看我下一篇,以下是地址

https://www.cnblogs.com/maruihua/p/10986082.html

<!--公用模态框
使用时传入
{
dialogtitle:'模态框的title',(可以为空)
dialogstatus:true显示模态框,false隐藏模态框(可以为空)
}
-->
<template>
<div class="dia " >
<el-dialog
:title="dialogtitle"
:visible.sync="dialogstatus"
:close-on-click-modal="false"
v-el-drag-dialog
@dragDialog="handleDrag"
:close-on-press-escape="false">
<slot></slot>
</el-dialog>
</div>
</template>
<script>
import elDragDialog from '../../directive/el-dragDialog/index'
export default {
//自定义指令:拖动模态框
directives: { elDragDialog },
//接受模态框数组[title,status]
props: ['publicdialogarray'],
components: {},
data() {
return {
dialogtitle: this.publicdialogarray.dialogtitle, //传入模态框的title
dialogstatus: this.publicdialogarray.dialogstatu //传入模态框的显示与隐藏
}
},
created() {},
methods: {
handleDrag() {} //拖动模态框事件
},
watch: {
//监听prop数组变化
publicdialogarray: {
handler() {
this.dialogtitle = this.publicdialogarray.dialogtitle || ''
this.dialogstatus = this.publicdialogarray.dialogstatu || false
},
immediate: true,
deep: true
}
}
}
</script>

//给dialog外边加一个div,然后在dialog添加/deep/就可以控制样式了

//因为添加scoped后不会污染全局样式,如果不怕污染全局样式可以直接不加scoped.即可!

<style lang="less" scoped>
//引用全局style样式
@import '../../styles/index.less';
// dialog的style样式
//自定义弧度
@border-radius: 4px !important; //border弧度
.dia {
/deep/.el-dialog {
border-radius: @border-radius;
box-shadow: 0px 0px 70px #333333;
top: 15%;
min-width: 570px;
min-height: 300px;
max-width: calc(100% - 1000px);
max-height: calc(100% - 30px);
display: flex;
flex-direction: column;
justify-content: space-between;
.el-dialog__body {
overflow: auto;
}
.el-dialog__header {
border-top-left-radius: @border-radius;
border-top-right-radius: @border-radius;
background-color: @dialogbackground;
line-height: 0em !important;
padding: 15px;
.el-dialog__title {
color: #fff; //字体颜色
}
}
.dialog-footer {
.el-button:nth-child(1) {
margin-left: 33%; //确定取消按钮中间间隔
}
.el-button:nth-child(2) {
margin-left: 10%; //确定取消按钮中间间隔
margin-right: 20%;
}
}
.divone {
float: left;
padding: 0px 15px;
margin-left: 10px;
margin-top: 10px;
background-color: #eeeeee;
}
.divonebottom {
clear: both;
border-bottom: 1px solid #eee;
height: 100%;
}
.el-icon-close:before {
color: #fff; //x的颜色
font-size: 1.4em; //x的大小
text-align: center;
position: relative;
bottom: 3px;
}
.el-input-number {
width: auto !important;
}
}
}
</style>

element-ui公用模态框自定义样式与scoped样式生效问题解决方案的更多相关文章

  1. 饿了么element UI<el-dialog>弹出层</el-dialog>修改默认样式不能在<style scoped>修改

    如果在非scoped下,修改el-dialog自动添加的DIV类名的style加上important,可以覆盖原来的width,但这样会让整个项目的样式都乱套. 如果在scoped下修改style.所 ...

  2. 基于element ui 实现七牛云自定义key上传文件,并监听更新上传进度

    借助上传Upload 上传组件的 http-request 覆盖默认的上传行为,可以自定义上传的实现 <el-upload multiple ref="sliderUpload&quo ...

  3. element ui change 传递带自定义参数

    @change="((val)=>{changeStatus(val, index)})" https://www.cnblogs.com/mmzuo-798/p/10438 ...

  4. element ui table单选框点击全选问题

    <template slot-scope="scope"> <el-radio-group v-model="scope.row.HandleState ...

  5. element ui下拉框如何实现默认选择?

    <template> <el-select v-model="value4" clearable placeholder="请选择"> ...

  6. element ui 下拉框绑定对象并且change传多个参数

    废话不说直接上代码说明真相. <template> <div class="hello"> <span>可以设置的属性 value-key=&q ...

  7. element ui,input框输入时enter健进行搜索

    <el-form-item label="企业名称"> <el-input v-model="formSearch.kw" @keyup.en ...

  8. BootStrap母版页布局.子页面布局.BootstrapTable.模态框.警告框.html导出tabl生成Excel.HTML生成柱图.饼图.时间控件中文版

    如上就是很多后台管理系统的母版页布局. 左边一列模板.上面一列系统标识. 空白处充填子页面 以ASP.NET MVC为基础 引入bootstrap.js.bootstrap.css body: < ...

  9. element ui form表单清空规则

    公司项目重构,经过商定使用element ui.在重构项目的时候发现一下element ui上很蛋疼的东西. 例如,这个form表单就是一个.趁着在高铁上没事,把想写的东西写一下. 先说一下eleme ...

随机推荐

  1. 我在使用eclipse配置Tomcat服务器的时候发现,默认情况下Tocmat把我们部署的项目放在了workspaces下面,而不是像Myeclipse默认的那样放在tomcat的安装路径下。

    1.我在使用eclipse配置Tomcat服务器的时候发现,默认情况下Tocmat把我们部署的项目放在了workspaces下面,而不是像Myeclipse默认的那样放在tomcat的安装路径下. 2 ...

  2. IPTABLES基本例子

    iptables –F #删除已经存在的规则 iptables -P INPUT DROP #配置默认的拒绝规则.基本规则是:先拒绝所有的服务,然后根据需要再添加新的规则. iptables -A I ...

  3. vue :src 文件路径错误

    首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形 ...

  4. 获取Windows用户所有的账户名

    /// <summary> /// 设置用户密码 /// </summary> [DllImport("Netapi32.dll")] extern sta ...

  5. Selenium系列之--03【转】页面元素找不到问题的分析思路

    如果在测试过程中遇到了NoSuchElementException 这个异常, 说明元素查找失败. Caused by: org.openqa.selenium.NoSuchElementExcept ...

  6. Atitit. 软件GUIbutton与仪表盘--webserver区--获取apache配置文件路径 linux and apache的启动、停止、重新启动

    Atitit.   软件GUIbutton与仪表盘--webserver区--获取apache配置文件路径 linux and apache的启动.停止.重新启动 能够通过"netstat  ...

  7. 各种“GND”

    资料来自网上,把个人觉得靠谱的摘取下来 1.地分类: a)直流地:直流电路“地”,零电位参考点: b)交流地:交流电的零线.要与地线区别开,不过,有时候拉电入户之前会把地线和零线接在一起: c)功率地 ...

  8. Angular45

    Angular 4 Tutorial for Beginners: Learn Angular 4 from Scratch https://www.youtube.com/watch?v=k5E2A ...

  9. WWDC笔记:2011 Session 125 UITableView Changes, Tips and Tricks

    What’s New Automatic Dimensions - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSect ...

  10. 2016/3/21 面向对象: ①定义类 ②实例化对象 ③$this关键字 ④构造函数 ⑤析构函数 ⑥封装 ⑦继承

    一:定义类   二:实例化对象 //定义类 class Ren { var $name; var $sex; var $age; function Say() { echo "{$this- ...