@tslsmart/theme-desktop

v2.2.0

Published

a year ago

特斯联统一UI的主题库,需要配合Element-UI使用

Downloads

0High
0Medium
0Low

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme