element组件popper-class属性设置弹出框类名

应用场景：

我们在做vue项目时，根据页面的ui设计，element的样式会被公共的去修改，而不是在vue组件中，但是有的地方element有特例，需要我们单独去修改，而el-cascader、el-time-select、el-date-picker、el-select等有弹出框的组件，我们发现，我们在组件scoped限制下通过class是取不到弹出框的（当然我们可以将scoped的限制去掉，可以取到，但是会影响到项目其他地方的样式）。

解决方式：

利用popper-class属性，为弹出框设置class，我们以el-select为例。

当没有popper-class属性时：

    <el-select v-model="select"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>

class是element自动给设置的

当我们用了popper-class时：

    <el-select v-model="select" popper-class="heiBoyNextDoor"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>

class除了有element自动给设置的，最后一个class名是我们手动添加的

同理：el-cascader、el-time-select、el-date-picker等一些有弹出框的组件也是可以用的

element组件popper-class属性设置弹出框类名相关推荐

小程序安全设置-弹出框输入获取值
小程序安全设置 Page({/*** 页面的初始数据*/data: {anquan: '',detailanquan: '',hiddenmodalput: true,//可以通过hidden是否掩藏 ...
JS -------------------设置弹出框位置屏幕的中间
2019独角兽企业重金招聘Python工程师标准>>> 1.创建背景div /*背景div的css*/ .black_overlar{ display:none; p ...
Vue项目流程7，交易页面，提交订单，支付页面，利用element UI 以及 QRCode 完成微信支付，弹出框按钮的相关工作，个人中心以及子路由我的订单
目录交易页面提交订单支付页面微信支付个人中心我的订单交易页面 1.静态组件及路由跳转 2.获取交易页数据 (1)接口 //获取用户地址信息地址:/api/user/userAddres ...
弹出框设置在页面居中
思路: 1.获取当前页面的高和宽.针对顶部和左侧的滑动距离. 2.将弹出框的位置设为绝对位置. 3.设置弹出框针对屏幕的左侧和顶部的距离. 代码: html : <div class=" ...
4.6Bootstrap学习js插件篇之弹出框
案例为页面内容添加一个小的覆盖层,就像iPad上的效果一样,为页面元素增加额外的信息. 插件依赖弹出框依赖工具提示插件,因此需要先加载工具提示插件. 选择性加入的功能出于性能方面的考虑,工具提示 ...
modal vue 关闭_Vue弹出框的优雅实践
引言页面引用弹出框组件是经常碰见的需求,如果强行将弹出框组件放入到页面中,虽然功能上奏效但没有实现组件与页面间的解耦,非常不利于后期的维护和功能的扩展.下面举个例子来说明一下这种做法的弊端. @cl ...
Bootstrap 弹出框（Popover）插件
弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图.如需激活弹出框,用户只需把鼠标悬停在元素上即可.弹出框的内容完全可使用 Bootstrap 数据 API(Bootstr ...
OpenLayers标记地图点及点击地图点显示自定义弹出框
css代码(设置弹出框样式) /*设置弹出框样式*/.ol-popup {position: absolute;background-color: #eeeeee;-webkit-filter: dr ...
安卓如何使用layout布局的弹出框AlertDialog
先看效果: 功能:后台webview访问andorid某个js函数时,弹出AlertDialog弹出框. 一.创建Layout 1.右键 Android studio 项目的layout,在弹出框中选 ...

element组件popper-class属性设置弹出框类名

应用场景：

解决方式：

element组件popper-class属性设置弹出框类名相关推荐

最新文章

热门文章