Vue项目中使用iView组件库设置样式不生效的解决方案

目录
  • 使用iView组件库设置样式不生效问题
  • 解决使用iview或者element-ui组件修改样式不生效
    • 1.样式如果定义为
    • 2.样式如果没有定义

使用iView组件库设置样式不生效问题

找到要设置样式的类名，直接按照下面写法设置就可以了！

<style lang="less" scoped>
@deep: ~'>>>';
@{deep}.ivu-transfer-operation {
    visibility: hidden !important;
}
</style>

解决使用iview或者element-ui组件修改样式不生效

1.样式如果定义为

<style lang="less" scoped></style>

使用 &/deep/来修改组件的样式

在引用的组件外面套一层div，在div中定义一个class,例如class=“desinger”

修改样式时如下操作即可：添加&/deep/

2.样式如果没有定义

lang<style scoped></style>,则使用>>>来修改

eg：

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue中vant组件样式失效问题及解决

    目录 vant组件样式失效 通常有以下几种解决方法 修改vant组件样式 vant组件样式失效 vue项目中引入vant组件,若发现vant组件样式失效 通常有以下几种解决方法 方法一:引入全局样式   在引入vant组件的地方或者全局引入vant组件所有的样式,引入方法为:在vue引入vant的页面中,添加以下代码: import 'vant/lib/index.css' 这样可以引入vant全部样式,不过通常我们可以按需引入,如法二,局部引入部分样式即可. 方法二:局部引入样式   顾名思义

  • 关于iview和elementUI组件样式覆盖无效问题及解决

    目录 iview和elementUI组件样式覆盖无效 新建一个不含scoped的style标签覆盖组件样式 /deep/ 预处理器less下使用 Element-ui与IView中的样式覆盖问题 在Element-UI中覆盖样式 在IView中覆盖样式 iview和elementUI组件样式覆盖无效 iview和elementUI是我们在用vue开发项目时比较常用到的ui组件,在我们使用第三方UI组件库开发时有时需要对这些组件进行一些样式修改. 为了vue页面样式模块化,不对全局样式造成污染,我

  • vue 组件中添加样式不生效的解决方法

    如何产生 在开发项目中遇到在组件中添加样式不生效的情况.具体场景如下 //// vue 组件 <template> <div class="box" data-v-33f8ed40></div> <template> //我用js在上面div标签中插入一个<p class='text'>text goes here</p> <script> export default { ... mounted(){

  • vue中element组件样式修改无效的解决方法

    如下所示: <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写style注意不加scoped,然后用一个组件最外层的class包裹住,就不会改到所有的组件的样式了. 以上这篇vue中element组件样式修改无效的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue 组件间的样式冲突污染 浅谈vue中改elementUI默认样式引发的st

  • Vue项目中使用iView组件库设置样式不生效的解决方案

    目录 使用iView组件库设置样式不生效问题 解决使用iview或者element-ui组件修改样式不生效 1.样式如果定义为 2.样式如果没有定义 使用iView组件库设置样式不生效问题 找到要设置样式的类名,直接按照下面写法设置就可以了! <style lang="less" scoped> @deep: ~'>>>'; @{deep}.ivu-transfer-operation {     visibility: hidden !important

  • 在vue项目中引用Iview的方法

    关于 iView iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品. 特性 # 高质量.功能丰富 友好的 API ,自由灵活地使用空间 细致.漂亮的 UI 事无巨细的文档 可自定义主题 iview 安装 npm install iview --save 引入iview import Vue from 'vue' import App from './App' import router from './router' import iView fro

  • vue项目中公用footer组件底部位置的适配问题

    需求: footer为公用组件,其他页面都需要引入,这是会存在一种情况:有的页面高度很高,footer组件要放在内容的最后:有的页面内容很少,高度很低,footer需要放在浏览器可视窗口的最底部:窗口高度的变化时,footer的位置需要重新调整. 可能有的伙伴首先想到的 position: fixed; bottom: 0; 这确实能解决页面内容不足以撑满浏览器高度的情况,但由于footer组件是公用的,在内容很多的页面调用时,会出现内容被组件覆盖的情况. 我最终的解决方案: 给内容不足以撑满浏

  • vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法

    使用 Hbuilder新建好移动app项目后,mainfest.json这个文件里的 plus里设置 statusbar ..... "plus": { "statusbar": { "immersed": true }, ...... }, ..... 效果 总结 以上所述是小编给大家介绍的vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大

  • vue项目中进行svg组件封装及配置方法步骤

    vue项目中进行svg组件封装及配置方法步骤

    最近刚入新的公司,拿到项目之后,发现一个有趣的事情就是标题的icon是用svg来弄的,这篇文章彻底弄清楚怎么使用 1.创建vue项目(通过cli来搭建脚手架,该测试项目是用vue cli4进行配置的) 2.创建一个自定义组件 具体代码如下: <template> <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href=

  • vue项目中实现el-dialog组件可拖拽效果

    vue项目中实现el-dialog组件可拖拽效果

    目录 0. 首先上图,看效果 1. 实现方法 参考资料 0. 首先上图,看效果 1. 实现方法 第一步:创建 drag.js文件 实现拖拽源码 /**  * 拖拽移动  * @param  {elementObjct} bar 鼠标点击控制拖拽的元素  * @param {elementObjct}  target 移动的元素  * @param {function}  callback 移动后的回调  */ export function startDrag(bar, target, call

  • vue项目中v-model父子组件通信的实现详解

    vue项目中v-model父子组件通信的实现详解

    前言 我们在vue项目中,经常有这样的需求,父组件绑定v-model,子组件输入更改父组件v-model绑定的数值.很多朋友对这种操作不是很清楚,这需要对v-model有比较深入的了解,今天谈谈v-model. vue的双向数据绑定 v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相

  • vue 项目中使用Loading组件的示例代码

    什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参数是Vue构造函数,还可以接收一个可选的参数,用于配置插件: var myplugin = { install:function(Vue, options){ ... } } 从意义上来说,正如jQuery的$.fn使jQuery有了一个庞大的生态一样,Vue的插件机制使Vue形成了一个生态系统,你

  • 详解如何在vue项目中引入elementUI组件

    详解如何在vue项目中引入elementUI组件

    前提:已经安装好Vue 初始化vue vue init webpack itemname 运行初始化demo 运行一下初始后的demo,如果没有问题则进行安装elementUI npm run dev 安装 elementUI npm i element-ui -S 引入elementUI 在main.js中引入elementUI import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vu

  • 详解Vue 项目中的几个实用组件（ts）

    前言 这段时间使用 ts 和 vue 做了一个项目,项目从 0 开始搭建,在建设和优化的同时,实现了很多自己的想法,有那么一两个组件可能在我本人看来有意义,所以从头回顾一下当初的想法,同样也可以做到一个记录的作用.如果还没有使用过 ts 的同学可以通过使用 Vue Cli3 + TypeScript + Vuex + Jest 构建 todoList这边文章开始你的 ts 之旅,后续代码也是在 todoList 的结构上改进的 vue 路由中的懒加载 你真的用好了路由的懒加载吗? 在 2.x 的

随机推荐