theme-desktop
简介
特斯联统一 UI 的桌面端的主题库,需要配合 Element-UI 或 者特斯联增强组件库使用
更新日志
点击阅读更新日志
开发说明
如果您仅是使用,请跳过. 参与开发前,请仔细阅 读开发说明
使用
安装
npm i @tslsmart/theme-desktop引入
需要自行安装 element-ui 的依赖。
// 入口文件中
import ElementUI from "element-ui";
import "@tslsmart/theme-desktop"; // 重点，引入主题样式,这样可以使用一些通用变量
Vue.use(ElementUI);其他主题
特斯联桌面主题库目前支持以下几种主题
| 主题 | 主色 | rgb 色值 | 英文名 | 备注 |
|---|---|---|---|---|
| 云梦兰 | #6266ea | 98, 102, 234 | dribble-purple | 默认主题,无需额外处理 |
| 凝夜紫 | #4C3776 | 76, 55, 118 | purple | - |
| 宇鲜蓝 | #3776F3 | 55, 118, 243 | blue | - |
| 靛燕蓝 | #2343EB | 35, 67, 235 | klein-blue | - |
| 缙红螯 | #F15E2E | 241, 94, 46 | orange | - |
| 漆墨黑 | #000000 | 0, 0, 0 | black | - |
| 库盏金 | #B5996B | 181, 153, 107 | golden | - |
::: tip
除了默认主题外,在使用时你需要给你的body 标签加上 tsl-theme-${englishName}的
类名,例如:
:::demo
<!-- public/index.html中 -->
<body class="tsl-theme-orange">
<el-tag>这是一个缙红螯的tag标签</el-tag>
</body>:::
这样做的原因是弹窗之类的组件是插入到 body 中的,如果不将 css 变量插入到 body 中, 可能会存在样式问题
:::
动态切换主题
你可能还需要动态切换主题,我们在 @tslsmart/theme-desktop/themeList.js
中导出了所有的主题列表数组供你直接使用,你只需要动态地给body元素绑定类名就可以了。下面给出了案例的同时,给出了完整的主题的 label-value数组,以便你有选择地向用户提供主题模板。
:::demo
<div class="layout">
<el-select v-model="activeTheme" @change="setTheme">
<el-option
v-for="item in themeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-tag>这是一个{{themeName}}主题的tag标签</el-tag>
</div>
<script>
// import themeList from '@tslsmart/theme-desktop/themeList.js'
// 你可以直接从themeList.js中导入完整的数组
export default {
data() {
return {
activeTheme: "dribble-purple",
themeList: [
{
label: "云梦兰",
value: "dribble-purple",
},
{
label: "凝夜紫",
value: "purple",
},
{
label: "宇鲜蓝",
value: "blue",
},
{
label: "靛燕蓝",
value: "klein-blue",
},
{
label: "缙红螯",
value: "orange",
},
{
label: "漆墨黑",
value: "black",
},
{
label: "库盏金",
value: "golden",
},
],
};
},
computed: {
themeClass({ activeTheme }) {
return "tsl-theme-" + activeTheme;
},
themeName({ activeTheme, themeList }) {
const theme = themeList.find((each) => each.value === activeTheme);
return theme.label;
},
},
methods: {
setTheme() {
document.body.className = this.themeClass;
},
},
};
</script>:::
项目结构
theme-desktop
├── README.md
├── lib // css文件输出目录
├── src // scss文件输出目录
├── themeList.js // 主题列表数组
└── package.json