vue动态样式绑定改变伪元素等特殊样式(css var函数)_vue 动态伪元素_坏丶毛病的博客

相关文章推荐

耍酷的柳树 · WPF自学入门（六）WPF带标题的内容控件简 ...· 6 月前 ·

温柔的针织衫 · 解决：The ...· 1 年前 ·

仗义的竹笋 · Parallel ForEach For ...· 1 年前 ·

逼格高的土豆 · Solidity进阶之gas优化 - 知乎· 1 年前 ·

帅气的勺子 · Python Django Errno ...· 1 年前 ·

改变样式是我们实际开发中最常做的事情。
诸如在css中，我们添加鼠标滑入滑出效果添加不同的样式。
诸如在js中，我们根据某个条件，或者触发某个方法，去动态改变某个样式。
那么，在vue中，我们更能很轻松的达到这点。
看下常见的几种情景：

情景一：我们需要根据某个变量是否存在（触发），去动态添加样式
描述：当我们点击按钮触发了某个条件，我们需要给对应的元素添加激活效果

class="flip" :style="{ background:变量?'red':'black'

这里我们通过三目判断某个触发条件的变量是否为true以此来添加不同的样式（当然也可以动态绑定class，来添加不同的类名，实现不同的效果）

情景二：我们封装组件，希望外界可以自定义传入实现不同的样式
描述：通过props定义样式值，外界可自定义传入改变，不传入则使用默认值

<template>
   		<div class="rd-flop">
   					class="flip"
   					:style="{
   						width: width,
   						height: height,
   						lineHeight: lineHeight,
   						margin: margin,
   						fontSize: `${fontSize}px`,
   						fontWeight: fontWeight,
   						border: border,
   						borderRadius: `${borderRadius}px`,
   						boxShadow: boxShadow,
   				</div>
   		</div>
   </template>
<script>
export default {
   name: '',
   props: {
       width: { type: String, default: '36px' }, // 宽度
       height: { type: String, default: '46px' }, // 高度
       lineHeight: { type: String, default: '46px' }, // 高度
       margin: { type: String, default: '2px' }, // 间距
       fontSize: { type: Number, default: 16 }, // 字体大小
       fontWeight: { type: Number, default: 900 }, // 字体加粗（100-500为不加粗，600-900加粗）
       border: { type: String, default: '1px solid transparent' }, // 边框
       borderRadius: { type: Number, default: 0 }, // 圆角
       boxShadow: { type: String, default: '0 0 6px rgba(0, 0, 0, 0.5)' }, // 容器阴影
</script>
上面的组件，我们再使用的时候，当我们不传入值的时候，也能正常显示默认值达到默认效果，我们也可以传入对应的值达到不同的复用效果 
情景三：动态绑定实现改变伪元素等样式
 描述：以上样式都是我们最普通的样式，但是我们如何通过绑定样式改变伪元素（::before、::after）、激活、滑入等复杂的样式呢？看下下面的示例吧： 
<template>
   <div class="rd-flop">
       <div class="rd-clock-card" v-if="currData" ref="rdFlop">
               class="flip"
               :style="{
                   width: width,
                   height: height,
                   lineHeight: lineHeight,
                   margin: margin,
                   fontSize: `${fontSize}px`,
                   fontWeight: fontWeight,
                   border: border,
                   borderRadius: `${borderRadius}px`,
                   boxShadow: boxShadow,
                   '--threeColumnMargin': threeColumnMargin,
               v-for="(item, index) in currValue.length"
               :key="index"
                   class="digital front"
                   :style="{
                       '--pseudoElementColor': pseudoElementColor,
                       '--pseudoElementBg': pseudoElementBg,
                       '--pseudoElementBorder': pseudoElementBorder,
                       '--pseudoElementTopBorderRadius': pseudoElementTopBorderRadius,
                       '--pseudoElementBotBorderRadius': pseudoElementBotBorderRadius,
                       '--pseudoElementBoxShadow': pseudoElementBoxShadow,
                   data-number="0"
               ></div>
                   class="digital back"
                   :style="{
                       '--pseudoElementColor': pseudoElementColor,
                       '--pseudoElementBg': pseudoElementBg,
                       '--pseudoElementBorder': pseudoElementBorder,
                       '--pseudoElementTopBorderRadius': pseudoElementTopBorderRadius,
                       '--pseudoElementBotBorderRadius': pseudoElementBotBorderRadius,
                       '--pseudoElementBoxShadow': pseudoElementBoxShadow,
                   data-number="1"
               ></div>
           </div>
       </div>
       <p :style="{ margin: titleMargin, fontSize: `${titleFontSize}px` }">
           {{ category }}
   </div>
</template>
<script>
export default {
   name: '',
   props: {
       title: String, // 标题
       width: { type: String, default: '36px' }, // 宽度
       height: { type: String, default: '46px' }, // 高度
       lineHeight: { type: String, default: '46px' }, // 高度
       margin: { type: String, default: '2px' }, // 间距
       threeColumnMargin: { type: String, default: '5px 30px 5px 5px' }, // 第三列间距（数字三个一组）
       fontSize: { type: Number, default: 16 }, // 字体大小
       fontWeight: { type: Number, default: 900 }, // 字体加粗（100-500为不加粗，600-900加粗）
       border: { type: String, default: '1px solid transparent' }, // 边框
       borderRadius: { type: Number, default: 0 }, // 圆角
       boxShadow: { type: String, default: '0 0 6px rgba(0, 0, 0, 0.5)' }, // 容器阴影
       pseudoElementColor: { type: String, default: '#fff' }, // 伪元素字体颜色
       pseudoElementBg: { type: String, default: '#3354e2' }, // 伪元素背景
       pseudoElementBorder: { type: String, default: '1px solid #666' }, // 伪元素边框
       pseudoElementTopBorderRadius: { type: String, default: '0 0 0 0' }, // 伪元素上半部分圆角
       pseudoElementBotBorderRadius: { type: String, default: '0 0 0 0' }, // 伪元素下半部分圆角
       pseudoElementBoxShadow: {
           type: String,
           default: '0 -2px 6px rgba(255, 255, 255, 0.3)',
       }, // 伪元素容器阴影
       titleMargin: { type: String, default: '20px 0 0 0' }, // 标题间距
       titleFontSize: {
           type: Number,
           default: 30,
       }, // 标题字体大小
</script>
<style scoped>
.rd-clock-card .flip .digital::before,
.rd-clock-card .flip .digital::after {
   position: absolute;
   content: attr(data-number);
   left: 0;
   right: 0;
   color: var(--pseudoElementColor);
   background: var(--pseudoElementBg);
   overflow: hidden;
   perspective: 160px;
.flip:nth-of-type(3n) {
   margin: var(--threeColumnMargin) !important;
.rd-clock-card .flip .digital::before {
   top: 0;
   bottom: 50%;
   border-bottom: var(--pseudoElementBorder);
   border-radius: var(--pseudoElementTopBorderRadius);
.rd-clock-card .flip .digital::after {
   top: 50%;
   bottom: 0;
   line-height: 0;
   border-radius: var(--pseudoElementBotBorderRadius);
.rd-clock-card .flip.running .front::before {
   transform-origin: center bottom;
   animation: frontFlipDown 1s ease-in-out;
   box-shadow: var(--pseudoElementBoxShadow);
   backface-visibility: hidden;
</style>
上述示例中，我们在对应的样式处，通过 var(–自定义命名) 的方式定义变量（括号里面是两条杠，别写错了），在vue的标签处通过 ‘–var中定义的命名’: props中对应的样式变量 就可以改变对应的样式。
 当然了，功能远不止于此，我们在使用一些公共ui库(比如element ui)时，它的一些标签都是自动生成的，比如我们只引入了 el-dropdown 下拉菜单，但是我们通过在控制台查阅发现内部可能嵌套生成很多标签，这时我们想改变内部嵌套的子元素的样式，就没办法直接给父元素绑定诸如宽、高的方式，我们可以找到对应的类名样式，通过 var的方式(参考如下) 
.VideoSurveillance .listArea .videoList .el-tree .el-tree-node__content {
    height: var(--itemGap);
    line-height: var(--itemGap);
    position: relative;
当然了，考虑用法前可以参考下兼容性
 
 好了，如上就是vue中动态改变特殊样式时的技巧。
 如有问题，请指出，接收批评。
 个人微信公众号：
 
                    改变样式是我们实际开发中最常做的事情。诸如在css中，我们添加鼠标滑入滑出效果添加不同的样式。诸如在js中，我们根据某个条件，或者触发某个方法，去动态改变某个样式。那么，在vue中，我们更能很轻松的达到这点。看下常见的几种情景：情景一：我们需要根据某个变量是否存在（触发），去动态添加样式描述：当我们点击按钮触发了某个条件，我们需要给对应的元素添加激活效果&lt;div     ...
				在项目中，我们时常会遇到动态的去绑定操作切换不同的CSS样式，结合自身项目中遇到的一些情况，也参考了一些文档，针对vue.js样式的动态绑定切换做出如下小结：
动态切换的核心思想：
利用vue指令v-bind来实现动态绑定，从而设置切换不同的样式～
vue的最大特点是数据驱动，利用特殊的语法将DOM“绑定”到底层数据，DOM与数据保持同步，每当数据发生变化，DOM视图就会做出相应的更新和响应，正是基于这种特性，我们得以实现class和style的动态绑定～
（一定要充分理解数据驱动的含义，共勉～）
特别说明：
1. v-bind在处理class和style时，专门增强了它。表达式的结
				今天的小实例是关于 Vue 框架动态绑定 css 样式，这也是非常常用的一个部分
首先说一下 动态绑定，相对的大家都知道静态绑定，静态绑定的话，直接加 class=“”就可以了，使用 Vue 呢之前也介绍过一个 v-bing:class="{{redClass:true}}" ，也可以实现绑定，但都不是动态绑定，动态绑定肯定是根据用户的某个操作实现动态的修改样式
先看下面的第一个小实例：
源代码 html 文件：
<!DOCTYPE html>
 <meta charset="utf-8" />
 <title>VueLearn-cnblogs/x
				UI需求：文字超过限定的行数，可点击“展开”“收起”，隐藏和显示文字内容。具体要求如下：
1.文章内容字数过多时默认展示三行，在第三行的末尾防止“展开”按钮，当点击展开时显示所有文章内容；
2.被展开的内容末尾有“收起”按钮，和最后一行内容在同一行中，如果最后一行内容过多，“收起”按钮可换到下一行，居右展示。
方法如下：
通过“用伪元素展示多行内容超出省略并在行末可点击展开”解决了此问题，直接上代码。
此方法处理起来虽然麻烦，但本人认为效果是最好的！
main.js
function refreshRe
声明css变量的时候，变量名前面要加两根连词线（–）。
变量名大小写敏感，–header-color和–Header-Color是两个不同变量。
var()函数用于读取变量。
var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。
第二个参数不处理内部的逗号或空格，都视作参数的一部分
根据css中使用变量的方法,我们可以结合vue中动态行内样式进行伪元素动态属性设置
声明css变量的时候，变量名前面要加两根连词线（–）。
变量名大小写敏感，–header-color和–Header-Color是两个不同变量。
var()函数用于读取变量。
var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。
第二个参数不处理内部的逗号或空格，都视作参数的一部分。
<style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title&
上面表示active这个class是否存在。取决于数据property isActive的真假，'text-danger'这个class同理
数组语法，可以把一个数组传给:class,以应用一个class列表
<div  class="rele
我们可以利用此属性实现vue组件动态传值，修改例如：::before、::after等，伪类的背景色，背景图等属性值。
因为vue利用无法直接在css中使用data里的变量，利用var(–变量名),以及style中定义变量（其实此步是模仿:root{}）方能修改。
动态切换主题也可利用此方式实现，由后端返回图片地址，以及颜色主题。
常规使用方式，但是很尴尬，人们并不喜欢这样写。
只有系统性，需要大量修改重复css属性，才会用到这个。
代码如下：（复制另存txt，修改.html直
				可以使用Vue的绑定语法来动态绑定CSS属性。例如，使用`:style`绑定属性，可以根据Vue实例中的数据动态设置CSS样式。下面是一个例子：
```html
<template>
  <div :style="{ backgroundColor: bgColor }"></div>
</template>
<script>
export default {
  data() {
    return {
      bgColor: 'red'
</script>
在上面的例子中，使用`:style`绑定了一个对象，该对象包含了一个`backgroundColor`属性，它的值是Vue实例中的`bgColor`数据。当`bgColor`的值发生变化时，动态绑定的CSS样式也会随之改变。