安装
# 如果你使用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
属性设置前置或者后置插槽, 也可以通过同名插槽设置, 而且插槽的优先级要高于属性
单位
元
pre
请选择爱好
suf
<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
属性设置