@tslsmart/theme-desktop

2.2.0 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i @tslsmart/theme-desktop

Weekly Downloads

6

Version

2.2.0

License

ISC

Unpacked Size

1.14 MB

Total Files

106

Last publish

Collaborators

  • junex
  • leano_z
  • gin_black