vue动态绑定class, style + scss

vue中动态绑定class style + scss

动态绑定class

一般用法

<div :class="{active: isActive}"></div>

data() {
	return {
		isActive: true
    }
}
// isActive 为true, 有active这个类, 否则没有

多个类

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

data() {
    return {
        isActive: true,
  		hasError: false
    }
}

// 多个类可以采用对象的形式
// static 一定会有, active 和 text-danger 受data里面值的影响
// 如果类里面有 - 或特殊字符 , 用""

变种写法

<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

// 用的少, 至少我没用过

使用数组

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}
// 这个实例没啥用, 就是给下面的做铺垫

数组里面使用三元表达式

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
同
<div class="errorClass" :class={activeClass: isActive}></div>
同
<div v-bind:class="[{ active: isActive }, errorClass]"></div>

使用场景, elementui中button里面的例子

:class="[
      type ? 'el-button--' + type : '',
      buttonSize ? 'el-button--' + buttonSize : '',
      {
        'is-disabled': buttonDisabled,
        'is-loading': loading,
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle
      }
    ]"

动态style

一般用法

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data(){
  return {
	activeColor: 'red',
 	fontSize: 30
  }
}

对象语法

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

数组语法

<div v-bind:style="[baseStyles, overridingStyles]"></div>

data() {
    return {
        baseStyles {
        fontSize: 20px
    	}
    }
}

实际用法

<div :style="{backgroundImage: `url($(image))`}" class="pam-thu"></div>

data() {
    return {
		image: '../image/1.png'
    }
}

<div :style="activeStyle(item)" item in list :key="item"></div>

methods: {
	activeStyle(item) {
        return {
            'font-size': 13px
        }
    }
}

// 动态设置width
<div v-for="item in list"
:style="{'width': (item.width ? (item.width + 'px') : '200px')}">
 </div>

v-for="(item i) in list"
:style="{background: color[i]}"

data: {
	color: ['#111', '#222']
}

style 绑定scss

使用场景: el-menu里面有改变主题的方法, 这里是改变el-menu-item的背景色

<el-menu
	:default-active="activeMenu"
	"collapse="isCollapse"
	:background-color="settings.sideTheme==='theme-dark'?variables.menuBg:variables.menuLightBg"
	:text-color="settings.sideTheme==='theme-dark'?variables.menuText:'rgba(0,0,0,.65)'"
...
	>
</el-menu>
    
import variables from '@/assets/styles/variables.scss'

computed() {
    variables() {
        reutrn variables
    }
}

在variables.scss里面, 定义并输出一堆变量

$green: #30B08F;
$tiffany: #4AB7BD;
$yellow:#FEC171;
$panGreen: #30B08F;


:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
}