Vue3中CSS的新玩法-CSS模块 & 动态CSS

Vue3对CSS支持加入了更多的特性支持，这样的话，我们在项目当中使用CSS就变得更加灵活了，来吧我们直接上干货

在style的标签上加一个module的属性，这样style里面的内容就会被编译成CSS Modules（模块），默认情况下，我们可以在模板代码里，或者JS里通过$style拿到所有样式属性并使用

我们也可以给CSS Modules自定义一个名称，在style的module属性设置一个名称就可以了,这样的话在模板和JS里就通过自定义的名称来引入CSS里的属性

与组合式 API 一同使用，注入的类可以通过 useCssModule API 在 setup() 和.success { color: #090}

可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上

这个语法同样也适用于

<ul class="rs_tree">

<li v-for="node in treeData">

<div @click="childrenShow(node,$event)" class="rs_tree_text">

<span class="rs_tree_dot" v-if="!isFolder(node)"></span>

<em class="fa fa-folder" v-if="isFolder(node)&&!node.isShow"></em>

<em class="fa fa-folder-open" v-if="isFolder(node)&&node.isShow"></em>

<span class="rs_tree_label">{{node.text}}</span>

<input type="text" class="rs_edit_input" v-model="node.text" @click="stop($event)" @keyup.enter="editEnd()">

<div class="rs_tree_icon" v-if="node.add" @click="addItem(node,$event)" title="新增"><i class="fa fa-plus"></i></div>

<div class="rs_tree_icon" v-if="node.edit" @click="editItem(node,$event)" title="编辑"><i class="fa fa-edit"></i></div>

<div class="rs_tree_icon" v-if="node.del" @click="delItem(node,$event)" title="删除"><i class="fa fa-trash"></i></div>

</div>

<items v-if="isFolder(node)" v-show="node.isShow" :tree-data="node.children" transition="node-down"></items>

</li>

Vue3支持使用CSS来定义激活样式。你可以通过在CSS中设置类选择器来设置激活样式，例如：

.active {

background-color: blue

color: white

}

你也可以使用v-bind:class来动态添加激活样式，例如：

<div v-bind:class="{ active: isActive }">...</div>

或者使用v-bind:style来动态添加激活样式：

<div v-bind:style="{ backgroundColor: color }">...</div>

---