view-ui

基于 vue 3.x 的轻量化的 ui 组件库

Install

npm install view-ui@latest

Usage

按需引入，可参考配置示例代码"./import_example.js"，进行批量配置。

import app from "vue";
import tabs from "view-ui/tabs.vue";
import button from "view-ui/button.vue";
import theme from "view-ui/theme.js";

app.use(tabs);
app.use(button);

theme.use("black"); // 必须先添加组件，后定义主题，否则初始状态下无法获取动态样式

主题配色

view-ui 采用分级颜色主题配置方案，支持直接在组件内使用动态样式或扩展自定义主题配色方案

示例

{
  style({ main }) {
    return `
      .v-bubble-content{
         color: #fff;
         background-color: var(--main-background) !important;
      }
      .v-bubble-arrow-right:after{
         border-right-color: var(--main-background) !important;
      }
      .v-bubble-arrow-left:after{
         border-left-color: var(--main-background) !important;
      }
      .v-bubble-arrow-top:after{
         border-top-color: var(--main-background) !important;
      }
      .v-bubble-arrow-bottom:after{
         border-bottom-color: var(--main-background) !important;
      }
    `;
  }
}