今天做项目时,突然想起前几天自己修改el-dialog的样式修改,我感觉后期也会用到,现在在csdn做一个记录,方便以后查找。
之前的el-dialog样式:
弹窗内容过长,页面就会出现滚动条,而不是弹窗出现滚动条,如果有提交按钮的话,就会在最底部,需要滚动页面在提交,不是想要的样式。
最终样式:
弹窗的代码:
<template>
<div>
<el-dialog
:visible.sync="outInnerVisible"
append-to-body
width="70%"
style="overflow:auto;"
title="短文"
class="aboutDialog"
>
<div>
每日名言
<br/>人生伟业的建立 ,不在能知,乃在能行。
<br/>每日自励
<br/>环境不会改变,解决之道在于改变自己。
<br/>每日短文 年轻没有失败
<br/>从前,有一头老驴,一天它不小心掉到了一个废弃的陷阱里,很深,根本爬不上来,主人看它是老驴,懒得去救它了,让它在那里自生自灭。那头驴一开始也放弃了求生的希望。
<br/>每天还不断地有人往陷阱里面倒垃圾,按理说老驴应该很生气,应该天天去抱怨,自己掉到了陷阱里,它的主人不要它,就算死也不让它死得舒服点,每天还有那么多垃圾仍在它旁边。可是有一天,它决定改变它的人生态度,它每天都把垃圾踩到自己脚下,从垃圾中找到残羹来维持自己的生命,而不是被垃圾所淹没,终于有一天,它重新回到了地面上。
<br/>不要抱怨你的专业不好,不要抱怨你的学校不好,不要抱怨你住在破宿舍里,不要抱怨你没有一个好爸爸,不要抱怨你的工作差,工资少,不要抱怨你空怀一身绝技没人赏识你,现实有太多的不如意,就算生活给你的是垃圾,你同样能把垃圾踩在脚底下,登上世界之巅。
<br/>这个世界只在乎你是否在到达了一定的高度,而不在乎你是踩在巨人的肩膀上上去的,还是踩在垃圾上上去的,踩在垃圾上上去的人更值得尊重。
<br/>年轻没有失败,看吾生豪迈,不过重头再来!!
<br/>每日文摘 这就是底价!
<br/>他拼命地工作,拼命地节衣缩食,数十年下来,从伦勃朗、毕加索到其他著名画家的作品,他是应有尽有。
<br/>他早年丧妻,仅有一子。儿子长大后成了一名收藏家。父亲对此感到十分自豪。
<br/>时光流逝,这个国家突然卷入了一场战争。儿子参军去了。
<br/> 一天,父亲收到一封信,信上说:“我们很抱歉地通知您,令郎在战斗中牺牲了。”
<br/>儿子的死无疑是一个重大打击,父亲一下子苍老了许多。圣诞节到了,但父亲一点心情也没有,甚至连床都懒得起,因为他实在无法想象,没有儿子的圣诞节该怎么过?
<br/>就在这天,门铃响了,打开门,只见一个年轻人拿着个小包站在那里。
<br/>“先生,也许您不认识我。我就是您儿子牺牲时背着的那个伤兵。”说到这里,年轻人的眼圈红了,“我不是个有钱人,没有什么值钱的东西送给您,以感谢您儿子对我的救命之恩。我记得您儿子说过您爱好艺术,虽然我不是个了不起的艺术家,但我还是为他画了幅肖像,希望您收下。”
<br/>父亲接过包裹,一层一层打开来,然后一步一步走上楼,来到画室,取下了壁炉前伦勃朗的画,然后挂上他儿子的肖像。父亲泪流满面地对年轻人说:“孩子,这是我最珍贵的收藏。对我来说,它比我家任何一件作品都值钱!”
<br/>父亲与年轻人吃了顿饭,一起过了圣诞节,然后年轻人就走了。
<br/>一年后,忧郁不乐的父亲终于去世了。他收藏的所有艺术品都要拍卖。
<br/>拍卖会于圣诞节举行。世界各地的博物馆长和私人收藏家纷纷赶来,他们急切地想在这场拍卖会上投标。
<br/>拍卖师站起来说:“感谢各位光临!现在开始拍卖:第一件拍卖品是我身后这幅肖像画。”后排有人大声叫喊:“这不过是老人儿子的画像。我们跳过这个,直接进入名画拍卖吧!”拍卖师解释:“不行,先得拍卖完了这幅画像,其他才能继续。”
<br/>会场静下来了。拍卖师说:“起价100美元。谁愿意投标?”没人答话。
<br/>他又问:“有人愿意出50美元吗?”还是没人答话。
<br/>他继续问:“有人愿意出40美元吗?”仍然没有人吭声。
<br/>拍卖师看起来神情有些沮丧,连声音都有些颤抖了,他问:“是不是没人愿意对这幅画投标?”
<br/>就在这时,一个老人站起来说:“先生,10美元可以吗?你瞧,10美元是我的全部家当了。我是收藏家的邻居,我认识这个孩子,我是看着他长大的。说实话,我确实很喜欢他,我想买这幅画,10美元可以吗?”
<br/>拍卖师说:“可以。10美元,一次;10美元,两次,成交!”
<br/>人群中立即爆发出一阵欢呼,人们议论纷纷:“嘿,伙计,现在终于进入正题了。”
<br/>拍卖师立即说:“再次感谢各位的光临!很高兴各位能来参加这个拍卖会。今天的拍卖会到此结束!”人们似乎被激怒了:“这什么意思?你还要拍卖其他作品呢!”
<br/>拍卖师神情严肃地说:“很抱歉,各位,拍卖会已经结束了。根据那位父亲的遗嘱,谁买了他儿子的画像,谁就拥有他所有的藏品。这就是底价!”
<br/>每日一诗 励志话语
<br/>发生一件事,如果你
<br/>喜欢它,那么享受它。
<br/>不喜欢,那么避开它。
<br/>避不开,那么改变它。
<br/>改不了,那么接受它。
<br/>改变观念,你就能接受它。
<br/>复杂的事情要简单做。
<br/>简单的事情要认真做。
<br/>认真的事情要重复做。
<br/>重复的事情要创造性地做。
<br/>过去的快乐留待回忆,
<br/>未来的快乐正在计划,
<br/>但快乐只能现在感受!
<br/>生命是一次奇遇,用心感受,会有属于自己的惊喜!
<br/>如果你要等有了实验室才来做实验的话,那么有了实验室你也不会做实验。
<br/>得意淡然,失意坦然
<br/>生命不是用来寻找答案 也不是用来解决问题 它是用来愉快的过生活的。
<br/>你可以高烧40度还坚持工作,但你解决的问题和你制造的麻烦一样多!
<br/>不论你在什么时候开始,重要的是开始之后就不要停止。
<br/>不论你在什么时候结束,重要的是结束之后就不要悔恨。
</div>
<div slot="footer">
<el-button type="primary" size="small" @click="onSubmit">确定</el-button>
<el-button size="small" @click="cancel">取消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data(){
return{
outInnerVisible: false,
}
},
methods: {
// 数据回显
open(isEdit, obj){
this.outInnerVisible = true
},
// 提交
onSubmit(){
this.outInnerVisible = false
// 传给父级
this.$emit('childClosed',this.newRuleForm.newTableDataList);
},
cancel(){
this.outInnerVisible = false
},
},
}
</script>
<style scoped>
.aboutDialog >>> .el-dialog__body {
padding: 0px !important;
padding:15px !important;
}
.aboutDialog >>> .el-dialog__header {
padding: 10px 20px;
height: 25px;
line-height: 25px;
text-align: left;
background: #3378df;
border-bottom: solid 1px #3378df;
}
.aboutDialog >>> .el-dialog__title {
color: #fff;
font-size: 14px;
}
.aboutDialog >>> .el-dialog__headerbtn .el-dialog__close {
color: #fff;
}
.aboutDialog >>> .el-dialog__headerbtn:hover .el-dialog__close {
color: #fff;
}
.aboutDialog >>> .el-dialog__headerbtn {
top: 13px;
}
.aboutDialog >>> .el-dialog__footer{
padding:10px 20px ;
border-top: solid 1px #3378df;
}
</style>
<style>
.aboutDialog .abow_dialog {
justify-content: center;
align-items: Center;
overflow: hidden;
}
.aboutDialog .el-dialog {
margin: 0 auto !important;
height: 90%;
overflow: hidden;
top: 5%;
}
.aboutDialog .el-dialog__body {
position: absolute;
left: 0;
top: 48px;
bottom: 55px;
right: 0;
padding: 0;
z-index: 1;
overflow: hidden;
overflow-y: auto;
}
.aboutDialog .el-dialog__footer{
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
</style>
如果不需要弹窗底部,只需要弹窗顶部和body,修改.aboutDialog .el-dialog__body 的底部距离(如下面代码),去掉.aboutDialog .el-dialog__footer:
.aboutDialog .el-dialog__body {
position: absolute;
left: 0;
top: 48px;
bottom: 5px;
right: 0;
padding: 0;
z-index: 1;
overflow: hidden;
overflow-y: auto;
}
修改弹窗高度,修改.aboutDialog .el-dialog中的height.
修改弹窗顶部局页面的高度修改.aboutDialog .el-dialog中的top.