VaryUI

安装

# 如果你使用pnpm
pnpm add vary-ui --save

# 如果你使用yarn
yarn add vary-ui --save

# 如果你使用npm
npm install vary-ui --save

项目中引用

import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);

// 引入UI组件库
import VaryUI from "vary-ui";
import "vary-ui/dist/vary-ui.css";
app.use(VaryUI);

app.mount("#app");

全局配置

组件在引用的时候, 支持一些全局配置, 目前支持全局配置的组件有:

// 引入UI组件库
import VaryUI from "vary-ui";
import "vary-ui/dist/vary-ui.css";
app.use(VaryUI, {
  loading: {
    // Loading props相关配置
  },
});

颜色主题

本库中的颜色都是从以下内容中的var(--vary-xxx-color)取值的, vue 项目可以自行定义对应的色值, 以代替组件库中的通用颜色

// root.scss
:root {
  --vary-default-inline-width: 16em;
  --vary-font-color: #999;
  --vary-font-hover-color: #666;
  --vary-primary-color-hover: rgb(2, 101, 215);
  --vary-primary-color: rgb(0, 119, 255);
  --vary-success-color-hover: rgb(64, 171, 3);
  --vary-success-color: rgb(76, 204, 2);
  --vary-warning-color-hover: #eab002;
  --vary-warning-color: #ffc107;
  --vary-danger-color-hover: rgb(178, 13, 29);
  --vary-danger-color: #dc3545;
  --vary-tips-color-hover: #404040;
  --vary-tips-color: #808080;

  --vary-inline-height: 2.3em;
  --vary-inline-width: 16em;

  --vary-border-color: #f0f0f0;
  --vary-border-light-color: #f0f0f095;

  --vary-button-inline-width: auto;
  --vary-card-border-color: #f0f0f0;

  --vary-message-danger-background-color: #ffe4e6;
  --vary-message-danger-border-color: #facdd1;
  --vary-message-danger-color: #dc3545;
  --vary-message-success-background-color: rgb(244, 252, 239);
  --vary-message-success-border-color: rgb(202, 247, 176);
  --vary-message-success-color: rgb(76, 204, 2);
  --vary-message-tips-background-color: #f4f4f4;
  --vary-message-tips-border-color: #e6e6e6;
  --vary-message-tips-color: #808080;
  --vary-message-warning-background-color: #fff9e9;
  --vary-message-warning-border-color: #ffeebb;
  --vary-message-warning-color: #ffc107;
  --vary-message-width: 26em;

  --vary-confirm-cover-background-color: rgba(0, 0, 0, 0.4);
  --vary-confirm-width: 26em;
  --vary-confirm-top: 20vh;
  --vary-confirm-index: 99;

  --vary-prefix-background-color: #ececec86;
  --vary-suffix-background-color: transparent;

  --vary-focus-border-color: var(--vary-primary-color);

  --vary-input-disabled-background-color: #f0f0f095;

  --vary-select-checked-color: var(--vary-primary-color);
  --vary-select-prefix-background-color: transparent;
  --vary-select-suffix-background-color: transparent;

  --vary-date-disabled-background-color: #f0f0f095;
  --vary-date-prefix-background-color: transparent;
  --vary-date-suffix-background-color: transparent;

  --vary-radio-checked-color: var(--vary-primary-color);
  --vary-radio-checked-border-color: var(--vary-primary-color);
  --vary-radio-disabled-color: #c0c0c0;
  --vary-radio-disabled-border-color: #c8c8c8;
  --vary-radio-disabled-background-color: #ececec;

  --vary-checkbox-checked-color: var(--vary-primary-color);

  --vary-tab-color: #999;
  --vary-tab-active-color: var(--vary-primary-color);

  --vary-table-th-color: rgb(23, 55, 81);
  --vary-table-th-background-color: rgb(231, 243, 254);
  --vary-table-td-color: rgb(114, 114, 114);
  --vary-table-hover-background-color: #f1f5fdb8;

  --vary-tree-hover-color: rgb(245, 251, 255);

  --vary-menu-background-color: white;
  --vary-menu-hover-color: #999;
  --vary-menu-hover-background-color: rgb(238, 248, 255);

  --vary-scroll-background-color: transparent;
  --vary-scroll-thumb-width: 6px;
  --vary-scroll-thumb-color: rgba(207, 207, 207, 0.872);
  --vary-scroll-thumb-hover-color: rgba(140, 140, 140, 0.872);

  --vary-dialog-background-color: rgba(0, 0, 0, 0.301);

  --vary-tree-checked-color: var(--vary-primary-color);
  --vary-tree-prefix-background-color: transparent;
  --vary-tree-suffix-background-color: transparent;

  --vary-form-item-label-color: #666;

  --vary-loading-default-index: 20;
  --vary-loading-background: rgba(122, 122, 122, 0.3);
}

字号与字体

本库中很少特意指定元素的字号, 一些尺寸单位也大多是以em为单位定义的, 因此某些组件(比如 Button)的尺寸会根据实际项目中的字号尺寸自动缩放

v-model

组件库中支持使用v-model实现数据双向绑定的组件Input, Select , 都在内部实现了数据绑定, 因此在使用时, 完全可以脱离v-model, 仅使用@change获取改变后的内容

prefix 与 suffix

本组件库中有一部分组件提供了prefix与suffix属性与插槽, 比如Input,Select,Date等

这些组件既可以通过prefix与suffix属性设置前置或者后置插槽, 也可以通过同名插槽设置, 而且插槽的优先级要高于属性

单位

元

<template>
  <div class="code">
    <var-input
      v-model="name"
      placeholder="请输入单位"
      prefix="单位"
      suffix="元"
    />

    <var-select
      :data="tree"
      v-model="treeValue"
      placeholder="请选择爱好"
      :props="{ value: 'id' }"
      prefix-background="#f2f2f2"
      suffix-background="#f2f2f2"
      prefix="pre"
      suffix="suf"
    >
    </var-select>
  </div>
</template>
<script setup>
import { ref } from "vue";

const name = ref("");

const treeValue = ref("");

const tree = [
  {
    id: "1",
    label: "运动",
  },
  {
    id: "2",
    label: "娱乐",
  },
  {
    id: "3",
    label: "学习",
  },
];
</script>

如果使用属性设置前置或者后置内容, 插槽的背景色可以通过两种方式设置:

通过覆盖--vary-prefix-background-color与--vary-suffix-background-color设置样式
通过prefix-background与suffix-background属性设置

# 安装

# 项目中引用

# 全局配置

# 颜色主题

# 字号与字体

# v-model