vue3使用css通过按钮替换主题
定义一个对象用来存放颜色
const theme = reactive({ fontColor: "", backgroundColor: "", });
写个方法用来存储对象
const setWhiteTheme = () => { theme.fontColor = "#DA7093"; theme.backgroundColor = "#fff"; }; const setBlackTheme = () => { theme.fontColor = "#fff"; theme.backgroundColor = "#DA7093"; };
最后弄一个按钮来控制这个颜色的变化
const checkedStatus = ref("未选中"); const select = (e: any) => { if (e.target.checked == true) { //当判断复选框被选中时，可以做一些处理事件 checkedStatus.value = "选中"; window.sessionStorage.setItem("xzz", checkedStatus.value); setBlackTheme(); } else { checkedStatus.value = "未选中"; window.sessionStorage.setItem("xzz", checkedStatus.value); setWhiteTheme(); } };
最后通过v-bind给最外层的盒子添加需要替换的颜色
.main { color: v-bind("theme.fontColor"); background-color: v-bind("theme.backgroundColor"); } <div class="main"> <input type="checkbox" class="dn" id="dn" ref="e" @click="select"> </div>
效果如下：
