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;
}