vue iview less实现换肤功能

vue—CSS框架选择的项目建设和iview的cli

1.先安装较少的支架

npm安装-保存-开发减少-加载器减少

然后转到构建文件夹下的webpack.base.conf.js文件，添加对less的支持

2.准备工作完成了，皮肤也变了

2.1创建一个新的文件夹样式，并在其中创建一个新的文件主题

定义一个. theme()方法，写出所需的颜色参数，如图：

2.2创建一个新的color.less文件，用于在styles文件夹下存储各种主题，根据自己的需要定义各种主题，记得介绍一下theme.less文件

@import url('。/theme . less’)； theme1{。主题()；//默认样式}。主题2 {。主题(RGB (141，139，219)，# FFF，# EEE，RGB (130，126，240))；} .theme3 {。主题(rgb(172，214，200)，#615f5f，#fff，rgb(91，139，123))；} 2.3在main.js中引入文件color.less

“进口”。/样式/颜色. less '

2.4在。vue文件进行主题选择，请执行以下操作

下拉A href=' JavaScript : void(0)' rel=' external no follow '下拉菜单Icon type='arrow-down-b'/Icon/A下拉菜单slot=' list '下拉项@ click . native=' change color(1)' rock theme/下拉项下拉项@ click.native=' changecolor (2)'新时代主题/Dropdown item Dropdown item @ click。Native=' ChangeColor (3)'基本主题/DropDownItem/DropDownMenu/DropDownMenu//更改主题更改颜色(num){ //更改类名主题1、主题2、主题3安装在app . vue document . getelementbyid(' app ')的div id='app'/div上。主题号；This.localStorageDate() }，//用于存储本地目标。进入系统时，记住用户最后的选择，自动加载用户最后一次选择的主题，记得调用local storagedate(){ local storage . setitem(' app '，document.getelementbyid ('app ')。类名称)装入()

以上是边肖介绍的vue iview less的换肤功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！