Vue3样式引入和使用

一、全局样式引入

• 1.main.ts 引入（推荐）
  一般src目录下新建styles文件夹, 该方式能解析less的语法

import "@/styles/index.less";

• 2.vue.config.js 引入，该方式能解析less语法

css: {
    loaderOptions: {
      less: {
        lessOptions: {
          javascriptEnabled: true,
          modifyVars: {},
        },
        additionalData: `
          @import "ant-design-vue/lib/style/themes/default.less";
          @import "~@/styles/variables.less";
        `,
      },
    },
  },

• 3.App.vue的style标签内引入

<style>
@import "./styles/index.less"
</style>

• 4.index.html 引入

<link href="index.css" type="text/css" rel="stylesheet" /> #文件引入
#或者
<style>
.test{
  color: red;
}
</style>

二、组件样式

1、<style scoped >

使用scoped属性，它的css只会应用到当前组件的元素上，只作用到子组件的根结点，支持采用深度选择器，插槽选择器，全局选择器 实现作用域扩展，也支持响应式动态CSS。lang 设置样式语言，默认是css。

<style lang="less" scoped>
  .example {
    color: red;
  }
</style>
<template>
  <div class="example">hi</div>
</template>

转换为：

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

综上所述，实现组件作用域样式是通过增加元素属性 比如data-v-f3f3eg9 实现的

• 动态样式

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
}
</style>

• 深度选择器
  使用:deep() 影响到子组件的元素

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

• 插槽选择器
  作用域样式不会影响到 <slot/>，因为它们是父组件持有传入的，采用:slotted() 伪类

<style scoped>
:slotted(div) {
  color: red;
}
</style>

• 全局选择器
  采用:global（）伪类来实现让样式规则应用到全局

<style scoped>
:global(.red) {
  color: red;
}
</style>

2、 <style module>

默认名称$style

<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>

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

自定义注入名称

<template>
  <p :class="classes.red">red</p>
</template>

<style module="classes">
.red {
  color: red;
}
</style>

• 与组合式API一起使用

// 默认, 返回 <style module> 中的类
useCssModule()

// 命名, 返回 <style module="classes"> 中的类
useCssModule('classes')

三、 模版使用样式

v-bind:style 简写:style

绑定内联样式，看起来十分直观，非常像css，CSS property 名可以用camelCase或kebab-case，支持对象语法和数组

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

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

v-bind:class简写:class

实现动态切换class，可以与普通的class属性共存，支持绑定计算属性，三元运算符，支持传递数组给:class

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

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

渲染结果：

<div class="static active"></div>

绑定计算属性

<div :class="classObject"></div>

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

三元运算符

<div :class="[isActive ? activeClass : '', errorClass]"></div>