Vue中动态使用JavaScript修改CSS样式

---

前言

今天遇到一个需求，页面中的一个模块具有动态切分的功能，即一块区域切分成多个相同而显示内容不同的组件。组件中用到了ElementUI的Slider滑块组件，因为Slider组件中的样式大多是固定的，比如按钮的大小不符合切分后的画面，因此需要根据划分的个数动态的调整按钮的大小。以下给出简易的案例截图：

---

---

---

一、实现目标效果的难点

因为我们难以使用行内属性来设置ElementUI组件内的div，比如说我们想要修改el-slider组件中的button大小一般都是使用css样式来进行设置。也正是因为如此，所以动态修改封装好的组件内部的元素样式就变得有些困难，那么我们应该怎么做呢？

---

二、使用Computed配合CSS变量完成动态修改CSS

1.设置Computed属性以及slider行内属性

2. 设置css样式(这里使用的是原生css，less、scss同理)

3. 上述两步即可完成Vue动态修改Css样式

可以看到当前的页面已经可以根据分屏的数量动态的修改按钮的大小，图片如下：

---

总结

  以上便是本次想要分享、记录的内容。之前并没有考虑到使用ElementUI框架使用到一些动态样式的问题，因此这次的知识点也是一个下午慢慢摸索、查找到的，分享给大家希望对大家有所帮助。对于自定义组件也是可以使用该方法来动态设置组件中的子元素样式。