位置: IT常识 - 正文

ant-design-vue 自由切换 暗黑模式dark(ant-design-vue pro)

编辑:rootadmin
ant-design-vue 自由切换 暗黑模式dark ant-design-vue 自由切换 暗黑模式dark

推荐整理分享ant-design-vue 自由切换 暗黑模式dark(ant-design-vue pro),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:ant design vue tabs,ant design vue3,ant design vue3,ant design vue3,ant vue design,ant vue design,ant-design-vue pro,ant-design-vue pro,内容如对您有帮助,希望把文章链接给更多的朋友!

项目演示代码

思路 引入 dark.css 文件 动态切换 prefixCls 实现效果

我们来看看官网怎么说的 官网地址

除了 less 定制主题 外,我们还提供了 CSS Variable 版本以支持动态切换主题能力。你可以在 < ConfigProvider 进行体验。

ant-design-vue 自由切换 暗黑模式dark(ant-design-vue pro)

调用 ConfigProvider 配置方法设置主题色:

import { ConfigProvider } from 'ant-design-vue';可以根据你的需求定制主题ConfigProvider.config({ theme: { primaryColor: '#25b864', },});

默认情况下,CSS Variable 会以 --ant 作为前缀。当你的项目中引用多份 css 文件时,可以通过修改前缀的方式避免冲突。

**思路 引入 dark.css 文件 动态切换 Variable 实现效果

编译 less # 由于前缀变更,你需要重新生成一份对应的 css 文件。

打包dark.lees 为css ant-prefix=dark你的自定义名称 运行命令 lessc --js --modify-var=“ant-prefix=dark” ant-design-vue/dist/antd.dark.less modified.css

打包出来的css 都是 .custom-dark- 开头 代码调整

通过 ConfigProvider 在顶层修改 prefixCls:

<template> <a-config-provider prefix-cls="custom-dark"> <my-app /> </a-config-provider></template>

mian.js 引入css 文件

// import 'ant-design-vue/dist/antd.css';import 'ant-design-vue/dist/antd.variable.min.css'// import 'ant-design-vue/dist/antd.dark.less';// import "ant-design-vue/dist/antd.less"// data-theme="dark"import "@/common/themes/dark.css"// 在app.vue 里面配置 a-config-provider <a-config-provider :component-size="modulesSize" :prefixCls="themes?'custom-dark':'ant'" :locale="locale"> <a-spin :spinning="loading" :delay="500" tip="飞速加载中..."> <router-view :class="themes ?'custom-dark':''" ></router-view> </a-spin>
本文链接地址:https://www.jiuchutong.com/zhishi/284152.html 转载请保留说明!

上一篇:axios—使用axios请求REST接口—发送get、post、put、delete请求(axios怎么使用)

下一篇:Chat GPT介绍(chat gpt介绍开头)

  • 当月出口的货物,可以过几个月申报吗
  • 增值税纳税申报时间
  • 累计扣除税额
  • 小规模纳税人免税会计分录
  • 车辆购置税和车船税的区别在哪
  • 计提年终奖可以冲减利润
  • 资产管理公司的使命
  • 直接抵免和间接抵免的区别
  • 未核定印花税
  • 专用发票二维码压线
  • 企业注销未抵扣完的进项税
  • 一般纳税人转让二手车增值税税率
  • 合同一方按手印另一方没按有效吗
  • 购买车位需要交哪些税
  • 大额虚开发票做转出税款入什么会计科目?
  • 建筑业确认主营业务收入
  • 收到样品费计入什么科目
  • 超市预付卡开票内容
  • 企业卖固定资产
  • 出租车库收入是否需要计算缴纳土地增值税
  • 印花税减免税额需要做账吗
  • 发给客户补货的产品怎么做?
  • 小规模减免的税额怎么做账
  • 残保金必须交社保才能领吗
  • 电脑管家系统异常要修复吗
  • 成品油企业自用油需要开具发票吗
  • 企业注销后账上有结余怎么办
  • 微软发布windows
  • 其他应付款结转什么科目
  • php image
  • 科技财政支出的意义
  • php根据经纬度计算距离
  • 你应该知道的数学常识纪录片
  • 违约赔偿金要交税吗
  • 生产企业成本会计做账流程
  • 土地补偿款会议纪要
  • 销售折扣收货方法有哪些
  • 发票的规格型号有字数限制吗
  • 个人收到承兑汇票
  • 总结一周内学习的Sql经验(一)
  • sqlserver2019配置
  • 实收资本变化
  • 哪些发票不可以报销入账
  • 调整以前年度少计收入
  • 房地产企业所得税预缴毛利率
  • 第一次建账要填期初余额吗
  • 无形资产摊销是按原值吗
  • 印花税计入会计什么科目
  • 差旅费报销会计分录题目
  • 水处理设备行业发展
  • 每月材料进出库明细表
  • 增值税申报开具其他发票包含哪些
  • 车费报销记入哪个账户
  • 小规模纳税人销售货物税率是多少
  • 新车一次能开多少时间
  • 员工话费实报实销分录
  • 无形资产自行开发
  • 无形资产入股交税吗
  • 公司购买的办公楼怎么交房产税
  • 计提利息为什么贷方是应付利息
  • 航天信息发票全额抵扣
  • 辅助生产成本应计入什么
  • iis怎么用
  • windows 进程管理
  • 操作系统运行慢怎么解决
  • 帮我打开双击锁屏
  • win8旗舰版官方下载
  • windows 10 build 9888
  • 什么是bash命令
  • 设置使用资源管理器查看文件时,显示已知文件的扩展名
  • synergy linux
  • jquery插件怎么写
  • nodejs基础教程
  • 服务器总是自动关机
  • jquery日历框有长期的选项
  • JavaScript弹出窗口
  • python3新增特性
  • 向境外付款需要代扣代缴所得税吗
  • 西安车位过户需要多少费用
  • 邮政清关费用怎么算
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设