精华内容
下载资源
问答
  • vuecss样式管理

    万次阅读 2019-02-21 17:44:45
    在每个CSS选择器末尾(编译后生成的CSS)加一个当前组件的data属性选择器(如[data-v-7ba5bd90])来私有化样式。选择器末尾的data属性和其对应的DOM中的data属性相匹配 子组件的元素上有一个类已经在这个父组件中...

    1. Vue中scoped属性的渲染规则:

    1. 给DOM节点添加一个不重复的data属性(比如data-v-7ba5bd90)来表示他的唯一性
    2. 在每个CSS选择器末尾(编译后生成的CSS)加一个当前组件的data属性选择器(如[data-v-7ba5bd90])来私有化样式。选择器末尾的data属性和其对应的DOM中的data属性相匹配
    3. 子组件最外层标签上有一个类已经在这个父组件中定义过了,那么这个父组件的样式就也会应用到子组件上。只不过其权重没有子组件同类名的重。
    4. 如果组件内部包含有其他组件,只会给其他组件的最外层标签加上当前组件的data属性
    5. 如果父组件想要改变子组件中某个标签样式可以使用>>>连接符或者/deep/来解决
    <!-- Button.vue -->
       <template> 
         <button class="btn"> 
            <span> <slot></slot> </span>
         </button>
       </template>
        <style scoped> 
            .btn { color: red; }
         </style>
    <!-- App.vue -->
    <template>
    	<div id="app">
    		<Button class="btn-lg">click</Button> </div>
    </template>
    <script>
    	import Button from "./components/Button";
    	export default {
    		name: "App",
    		components: {
    			Button
    		}
    	};
    </script>
    <style scoped>
    	.btn>>> span {
    		color: green;
    		font-weight: bold;
    		border: 1px solid green;
    		padding: 10px;
    	}
    </style>
    
    1. 子组件(‘button class=“btn”’) v-html中内在的标签样式不生效,原理以及解决方案同4、5

    其实上述中父组件想要修改子组件的样式,在开发中其实是经常遇到的,就我个人开发项目过程中就会遇到在使用element-ui时,对element-ui封装的组件样式并不是很满意,想要修改,我用到的是个比较笨的方法,

    <style lang="scss" type="text/scss" rel="stylesheet/scss" scoped>
    	//这里可以写该父组件的样式,以及子组件最外层元素样式
    </style>
    <style lang="scss" type="text/scss" rel="stylesheet/scss">
    	//这里可以写子组件中的样式,但是一定要父组件的唯一标识,表明这个样式只是在特定父组件下的这个组件内部的样式才有变化
    	#父组件id{
    		.子组件样式{
    			.子组件标题样式
    		}
    	}
    </style>
    

    但是不论上面的使用>>>连接符或者/deep/来解决,还是我的笨方法其实都破坏了已封装好的组件中的样式,但这也失去了组件封装的效果。再次回到以前CSS中令人头痛的问题:CSS作用域。

    2. Vue中使用CSS Modules:

    这里只是简单说一下,因为还没有使用过CSS Modules接触scope较多,再者个人觉得CSS Modules的使用太过繁琐,而且scope就够解决Css样式管理了,以上只是个人的一点见解,如果下面有不对的地方请多指教!
    1. 基本使用方式

    在style标签中添加module属性,表示打开CSS-loader的模块模式

    <style module> 
    	.btn {
    		 color: red;
    	 }
    </style>
    

    在模板中使用动态类绑定:class,并在类名前面加上’$style.’

    <template> <button :class="$style.btn">{{msg}}</button> </template>
    

    效果如下所示::class="$style.btn"会被编译成为.Button_btn_3ykLd这个类名,并且样式的选择器也自动发生了相应的变化。
    在这里插入图片描述
    需要注意的点:

    • 如果类名包含中划线,或者类名是驼峰式命名,则使用中括号语法
    	<h4 :class="$style['header-tit']">类别推荐</h4>
    
    • 也可以使用数组或对象语法
    	<p :class="{ [$style.red]: isRed }">
          Am I red?
        </p>
        <p :class="[$style.red, $style.bold]">
          Red and bold
        </p>
    
    • 更复杂的对象语法
    	<ul 
        :class="{
            [$style.panelBox]:true,
            [$style.transitionByPanelBox]:needTransition
          }">
        </ul>
    

    相当不好用啊,scss不能用,二层嵌套样式也不能选择生效,

    <template>
    	<div class="warp">
    		<div :class="$style['aa']">
    			123
    			<div :class="$style['bb']">
    				ffff
    			</div>
    		</div>
    		<div :class="$style['bb']">
    			ddddddd
    		</div>
    	</div>
    	
    </template>
    
    <script>
    </script>
    //错误示例
    <style module  lang="scss">
    	.aa{
    		background-color: #00B43C;
    		.bb{
    			border: 1px solid #66512C;
    		}
    	}
    	/*.aa*/ 
    </style>
    正确示例:
    <style module>
    	.aa{
    		background-color: #00B43C;
    	}
    	.aa .bb{
    		border: 1px solid #66512C;
    	}
    </style>
    

    2.子组件调用父组件样式

    <!-- Button.vue -->
    <template> <button :class="[$style.btn, primaryClass]">{{msg}}</button> </template>
    <script>
    	export default {
    		name: 'Button',
    		props: {
    			msg: String,
    			primaryClass: ''
    		}
    	}
    </script>
    <style module>
    	.btn {
    		border: 1px solid #ccc;
    		border-radius: 3px;
    		padding: 5px 15px;
    		background: #fefefe;
    		margin: 5px;
    	}
    </style>
    <!-- App.vue -->
    <template>
    	<div id="app">
    		<Button msg="Default Button" />
    		<Button :class="{[$style['btn-lg']]: isLg}" msg="Larger Button" />
    		<Button :class="{[$style['btn-sm']]: isSm}" msg="Smaller Button" />
    		<Button msg="Primary Button" :primaryClass="$style['btn-primary']" /> </div>
    </template>
    <script>
    	import Button from './components/Button'
    	export default {
    		name: 'app',
    		components: {
    			Button
    		},
    		data() {
    			return {
    				isLg: true,
    				isSm: false
    			}
    		}
    	}
    </script>
    <style module>
    	.btn-lg {
    		padding: 15px 30px;
    	}
    	
    	.btn-sm {
    		padding: 5px;
    	}
    	
    	.btn-primary {
    		background: rgb(54, 152, 244);
    		border-color: rgb(32, 108, 221);
    		color: #fff;
    	}
    </style>
    

    效果图如下所示:
    在这里插入图片描述
    (虽然上面的方法可以实现子组件调用父组件的样式,但是我还是想吐槽,子组件的样式不就应该写在子组件的样式里吗?这样写不是扰乱了组件样式封装的原本意图了吗?r如果真的想要修改子组件的样式,就像上诉遇到的vue项目中element-ui封装的组件样式并不是很满意,想要修改也不能往element-ui封装的组件里传入一个props来修改样式吧???)
    3.配置
    官方配置:

    // webpack.config.js
    {
      module: {
        rules: [
          // ... 其它规则省略
          {
            test: /\.css$/,
            use: [
              'vue-style-loader',
              {
                loader: 'css-loader',
                options: {
                  // 开启 CSS Modules
                  modules: true,
                  // 自定义生成的类名
                  localIdentName: '[local]_[hash:base64:8]'
                }
              }
            ]
          }
        ]
      }
    }
    

    还有一种方式:在vue.config.js中添加如下配置

    css: {
     loaderOptions: {
      css: {
      localIdentName: '[name]__[local]-[hash:base64:5]',
      camelCase: true
      }
     }
     }
    //localIdentName是格式化类名:name是当前文件名称,local是当前定义的类名名,hash是hash生成的字符串,长度为5
    //camelCase:在类名有中横线时,'only'在标签上绑定类名时只支持大驼峰,true:支持大驼峰也支持中括号命名
    

    反正两种方式我都没有成功,求大神指教!出来的样式都是这样
    在这里插入图片描述

    总结:

    就目前情况可能更适合用scope来实现css样式的局域化管理。通过项目功能的越来越多,由于前期没有一个很好的css样式规划管理,经常删除没用组件页面时需要调整整个项目样式,这就是因为css样式没有局域化的后果。维护起来找不到导致现在标签样式变化的CSS文件等等,综上以下是开发时要注意的点。

    1. css一定要有标识:方便样式修改查找。

    在这里插入图片描述在这里插入图片描述
    2. 使用scope区域化Css样式
    3. 想要修改子组件封装好的样式,一定要在外层写清楚哪个父组件下的子组件的样式,以免修改全局的样式

    <style lang="scss" type="text/scss" rel="stylesheet/scss" scoped>
       //这里可以写该父组件的样式,以及子组件最外层元素样式
    </style>
    <style lang="scss" type="text/scss" rel="stylesheet/scss">
       //这里可以写子组件中的样式,但是一定要父组件的唯一标识,表明这个样式只是在特定父组件下的这个组件内部的样式才有变化
       #父组件id{
       	.子组件样式{
       		.子组件标题样式
       	}
       }
    </style>
    
    展开全文
  • 主要介绍了Vue打包部署到Nginx时,css样式不生效的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 二、vue中引入样式文件 1)在index.html模板html文件中引入,这种方式引入的原样编译在生成的html文件中,如果想要通过link引入外部的样式文件,建议使用这种方式: <!DOCTYPE html> <html> <head>...
  • 使用v-bind:class或者v-bind:style或者直接通过操作dom来对其样式进行更改;接下来通过本文给大家分享Vue.js中对css操作(修改)具体方式,感兴趣的朋友跟随小编一起看看吧
  • 在css的使用中,我们对一些常用、公共的css样式,可以单独提取出来,在用到地方再使用,可以保证一些公共的样式一致性、增强代码的维护性等。 1.新建css样式的文件 新建一个“对象内文本溢出时显示省略号”的样式:...

    在css的使用中,我们对一些常用、公共的css样式,可以单独提取出来,在用到地方再使用,可以保证一些公共的样式一致性、增强代码的维护性等。

    1.新建css样式的文件

    新建一个“对象内文本溢出时显示省略号”的样式:ellipsis.styl

    ellipsis()
      overflow: hidden
      white-space: nowrap
      text-overflow: ellipsis
    

    新建一个“公共的颜色、字号”的样式:varibles.styl

    $bgColor = #00bcd4
    

    2.对样式的使用

    在使用的时候,我们需要引入这个文件,
    @代表src目录 在css中使用时,需要前面加个~(波浪线)
    @import ‘…/…/…/assets/styles/varibles.styl’ 等价于
    @import ‘~@/assets/styles/varibles.styl’ 等价于
    这里我们也可以对路径起一个别名,需要在webpack.base.conf.js中做出修改(改后需要重启):

    module.exports = {
    	resolve: {
    	    extensions: ['.js', '.vue', '.json'],
    	    alias: {
    	      'vue$': 'vue/dist/vue.esm.js',
    	      '@': resolve('src'),
    	      'styles': resolve('src/assets/styles')
    	    }
        }
    }
    

    src/assets/styles 起一个别名:styles,之后就可以用这个别名了,
    @import ‘~styles/varibles.styl’
    在这个文件中,我们还能看到@代表了sre目录。

    <style lang="stylus" scoped>
     @import '~styles/varibles.styl'
     @import '~styles/ellipsis.styl'
     .aa {
    	background $bgColor
     }
     .bb {
       ellipsis()
     }
    </style>
    

    这样子,在样式中我们就可以这么使用了!

    展开全文
  • vuecss样式穿透

    千次阅读 2019-12-17 10:49:42
    当在两个子组件中引入时,header 中并未编辑样式,footer写了自己的样式,因为同有一个main的class,所以,在渲染时生成的全局的样式,header组件也捡了footer的便宜,但是,项目中我们不希望看到这样的效果,我们想...

    问题由来

    当在两个子组件中引入时,header 中并未编辑样式,footer写了自己的样式,因为同有一个main的class,所以,在渲染时生成的全局的样式,header组件也捡了footer的便宜,但是,项目中我们不希望看到这样的效果,我们想要的是组件作用域内的样式。

    代码截图
    在这里插入图片描述
    效果
    在这里插入图片描述

    解决办法

    在 style 添加一属性 scoped, 生成组件作用域内的 CSS
    在这里插入图片描述
    如此,这样就各个组件就可以写各自的样式而不互相污染了,
    在这里插入图片描述

    引入其他插件时的样式穿透

    具体写法

     /* 父元素  /deep/  插件元素*/
     .parent /deep/ .swiper-silder{
        width: 30px;
    }
    
    展开全文
  • 项目前端使用vue.js和element-ui,由于想要对输入框进行验证,输入值非法时输入框颜色变红,就想要根据el-input编译 后的class进行修改,但是直接在html页面中调用class无效,在网上查资料后,发现把html中的<...

    问题背景:

    项目前端使用vue.js和element-ui,由于想要对输入框进行验证,输入值非法时输入框颜色变红,就想要根据el-input编译
    后的class进行修改,但是直接在html页面中调用class无效,在网上查资料后,发现把html中的<style scoped>里面
    的scoped去掉即可,由于达到效果了就没仔细研究scoped的作用,入坑...
    本地测试没有问题后,便直接上线了,but上线后发现其它页面的表格样式全部被覆盖,显示不正常。。。
    
    

    解决思路

    F12发现这些出问题的页面均加载出了同class名的其它页面(去掉scoped的html页面)的样式,经过查资料,发现了问题
    所在:在vue.js中,<style scoped>的作用域在本html页面,<style>样式的作用域则是全局(即所有html页面),由
    于我把其中一个html页面的<style scoped>中的scoped去掉,这个页面的样式就变成了全局样式,当其它页面和这些全
    局样式重class名时,样式会被覆盖(vue默认全局样式覆盖局部样式),这样就导致上述情况的发生。
    
    

    后续

    如何在<style scoped>局部样式中覆盖全局样式:
        
    
    • 父组件cssName+ /deep/+第三方库需要更改的cssName
        例如 .parentCssName  /deep/  .libCssName{}
    

    参考链接
    链接描述

    链接描述

    展开全文
  • 样式冲突原因:样式会继承,子组件会继承父组件;样式都会写入style标签。解决方法:BEM、scoped、模块化npm i node-sass sass-loader -S安装环境方法1 样式定义: 样式要以类或者id 打头作为选择器.box{...}#box2...
  • vue 添加css样式的三种方式

    千次阅读 2020-07-02 15:27:57
    1. 内部样式表 在 .vue文件里直接写 2. 外部样式表 1.在pulic文件加下创建 2.在vue文件中引用 3. 在 public/index.html文件中引入 这里引入的是 公共组件,对整个项目都有效 一边在哪里用,在哪里引入/写。 ...
  • vue.js弹窗插件css样式

    2020-03-05 15:24:13
    vue.js Dialog插件,支持页面挂载对象和按钮配置,博客有js代码和示例,可以按需求自行修改,链接地址:https://blog.csdn.net/weixin_40885323/article/details/104675450
  • 主要介绍了Vue 样式切换及三元判断样式关联操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue 自定义css样式覆盖elementUI的样式

    万次阅读 2018-08-12 23:31:20
    在开发中,我们大多要结合自己实际情况,去做符合本项目要求的样式,那么自定义css样式怎样覆盖原来已经写好的样式呢?今天主要讲的就是结合vue与elementui来写自己的自定义样式。 引入自己写的css位置如下: 1、...
  • vue项目之CSS样式

    千次阅读 2020-05-14 23:56:51
    vue项目中CSS样式 初始化页面样式 注意: element-UI中提供的组件,组件名称就是类名 .el-header{} 页面单独的样式,从外部引入css <style scoped> @import '../assets/css/member.css'; </...
  • 相信有很多小伙伴入门使用组件库时,设置样式不生效,下面分析一下为什么出现这种问题,以及解决方式 我们在使用vue开发时,在style中加入scoped
  • vue点击切换css样式

    千次阅读 2021-04-01 18:11:10
    vue动态点击切换css样式 <template> <div v-for="i in 5" class="el-personal" :class="{active:isActive==i}" @click="show(i)"> 切换css样式 </div> </template> <script>...
  • vue中修改css样式和添加CSS样式

    万次阅读 2018-09-04 10:32:39
    a表示添加的css样式,f 表执行条件,满足条件就添加写好的Css样式。用于添加Css样式 style语法格式=&amp;amp;amp;gt; :style=”{ ’ Q ’ : R }” Q表示具体修改的Css样式,R表示修改的值。用于修改CSS某一个...
  • VUECSS样式加scoped不起作用的解决办法-CSS样式穿透 样式穿透的三种方法 1.使用>>> .wrapper >>> .swiper-pagination-bullet-active background: #fff 2.使用 /deep/ <style scoped> /...
  • 主要为大家详细介绍了Vue2.0设置全局样式(less/sass和css),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 我就废话不多说了,大家还是直接看代码吧~ <!--此div的高度取屏幕可视区域的高度--> <h5>{{ msg }} ... msg: Welcome to Your Vue.js App, }; }, computed: { getClientHeight:function () { /
  • vue中的scoped属性的效果主要通过PostCSS转译实现,如下是转译前的vue代码: &lt;style scoped&gt; .example { color: red; } &lt;/style&gt; &lt;template&gt; &lt;div class=&...
  • .vue文件怎么写css样式

    2021-01-11 20:40:02
    .vue文件怎么请求api.vue文件怎么请求api1、首先我们安装axios网络请求库cdtest//进入项目根目录 npmiaxios-S//执行安装2、在需要使用请求的vue组件内,引入axios 请求示例 //引.vue文件怎么引入本地图片.vue文件...
  • 1.vue文件引入css样式刚开始写的时候代码量比较小 ,越到后面代码量越大,这样css样式也就会越大,代码不仅不美观,而且也违背了模块化的道理。以APP.vue文件为例,如何引入css文件。试过很多方法,但感觉都没有成功...
  • 脚本简介基于VUE步骤进度条样式代码是一款响应式带图标的步骤进度条代码。
  • 主要介绍了vue单页面修改样式无法覆盖问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=“”就可以了,使用 Vue 呢之前也介绍过一个 v-bing:class=...
  • Vue 导入外部css样式文件

    千次阅读 2020-07-14 13:06:39
    2.引入文件,在app.vue中添加如下: <template> <div id="app"> <router-view /> </div> </template> <style lang="scss"> //取消页面的默认外边距。 body { margin: 0; ...
  • 首先注释掉webpack.prod.conf.js中下面的代码 new OptimizeCSSPlugin({ cssProcessorOptions: config.build....const cssLoader = { loader: 'css-loader', options: { sourceMap: options.sourceMap, mini
  • 下面小编就为大家分享一篇vue 引入公共css文件的简单方法(推荐),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 在项目中,我们时常会遇到动态的去绑定操作切换不同的CSS样式,结合自身项目中遇到的一些情况,也参考了一些文档,针对vue.js样式的动态绑定切换做出如下小结: 动态切换的核心思想: 利用vue指令v-bind来实现动态...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 78,491
精华内容 31,396
关键字:

vue操作css样式

vue 订阅