修改elementUI的el-popconfirm 气泡确认框样式不起效果

问题描述

在控制台上能够修改宽高度，把该元素拿来放在源文件中不能起效果；

修改前：

修改后：

解决思路

1.元素没有取对（其实一般改这种官方组件，不是写一长串的类名，以及深度处理器；相反它反而很简单，外面写一个组件定义的类名，里面写这个组件封装的类名就好了）
2.可以用不加scoped的全局样式
3.看elementUI官方文档，里面有一个poper-class属性

总结：我没改对样式，是从源头上就错了，并且方法上也有问题；比如我之前取的是这个玩意，并且在编写源码的时候，我有将p写成.p，并且就是我有将同级的类在源码中用空格将它隔开，这表示的将会是从属包含关系。

css类之间是空格和逗号的区别：
1、css类中用逗号隔开表示两个不同类的样式类名用同一个样式；
2、空格隔开表示从属包含关系，是当前的元素子元素；
3、逗号隔开表示并列关系，两者之间没有任何关系，可以使用同一个样式。

源代码

 <el-table-column prop="operation" :label="$t('lang.operation')"><template slot-scope="scope"><div class="icon-box" v-if="scope.$index == 0"><el-popconfirm:popper-append-to-body="false"hide-iconplacement="left":title="$t('lang.undo')":ref="`popover-${scope.$index}`"@confirm="undo(scope.row.id)"popper-class="my-popper"><div class="delete-icon" slot="reference"><Icon link="icon-chehui" :allowProp="true"></Icon></div></el-popconfirm></div></template></el-table-column>

<style lang="scss">
.my-popper {width: 197px;height: 106px;box-shadow: 0px 2px 10px 0px rgba(51, 70, 84, 0.2);.el-popconfirm__main {width: 100%;height: 22px;font-size: 16px;font-weight: 500;text-align: left;color: #333333;line-height: 22px;margin: 10px 0 12px 0;padding-left: 9px;}.el-popconfirm__action {display: flex;align-items: flex-start;padding-left: 29px;// 交换 确定 和 取消 按钮的位置.el-button:nth-child(1) {width: 50px;height: 28px;background: #ffffff;border: 1px solid #499fa9;border-radius: 6px;text-align: center;}.el-button:nth-child(2) {width: 50px;height: 28px;background: #499fa9;border-radius: 6px;text-align: center;}}
}
</style>

修改elementUI的el-popconfirm 气泡确认框样式不起效果相关推荐

Element-ui Popconfirm气泡确认框的确认及取消事件不生效
Element-ui 官方文档对 Popconfirm气泡确认框的一些属性及事件的描述不够详细,导致第一次使用时会遇到各种各样的问题对确定事件及取消事件描述如下: 但是如果给组件绑定@confirm ...
饿了么UI/element Popconfirm气泡确认框 confirm事件
本文:饿了么UI/element Popconfirm气泡确认框 confirm/cancel事件饿了么官网说: 属性Attributes 参数说明类型可选值默认值 title 标题 Str ...
【表格操作栏删除确认弹出框 Popconfirm 气泡确认框变形，导致确认和取消不在同一行】
vben admin 中表格操作栏删除确认弹出框 Popconfirm 气泡确认框变形,导致确认和取消按钮不在同一行如图: 原因:因弹出框默认顶部弹出,又在页面边上受到挤压导致,更改弹出方向可解决 ...
042_Popconfirm气泡确认框
1. Popconfirm气泡确认框 1.1. 点击元素, 弹出气泡确认框.Popconfirm的属性与Popover很类似, 因此对于重复属性, 请参考Popover的文档. 1.2. Attrib ...
element ui的气泡确认框点击确定没反应的问题
官网解释但是我们加上此点击事件后, 点击确定并没有执行相对应的方式正确方式 @onConfirm定义事件,而不是@confirm
修改Element-ui中tree组件最底层节点的样式
最近在项目中,设计将tree组件里最底层的节点布局设计成了多列,那要怎么实现呢? 首先用自定义节点的方式渲染节点,在渲染方法里给最底层节点添加class renderContent(h, { node ...
bootstrap搜索框样式代码及效果
<div class="container"> <div class="input-group"> <input type=&qu ...
Vue ElementUI 修改消息提示框样式---messageBox 的大小
在窄屏模式下(移动端),提示框的宽度太宽,会出现显示不完全的问题. 应当如何修改 ElementUI 的样式呢? open() {this.$confirm(window.vm.$i18n.t(&qu ...
ElementUI的消息提示框及确认框
前提:在使用以下功能时,都需要引入/导入ElementUI 第一种:消息提示框包含:成功 / 警告 / 信息 / 错误四种类型官方地址:Element - The ...

修改elementUI的el-popconfirm 气泡确认框样式不起效果

问题描述

解决思路

源代码

修改elementUI的el-popconfirm 气泡确认框样式不起效果相关推荐

最新文章

热门文章