xelf ui plus

这是一套针对VUE3的UI组件库，收录的组件一部分为原创一部分为从网络获取。

更新日志

1.0.0 2024-04-03

1. 调整字体图标
2. 增加快捷键指令 [v-shortcut]
3. 提供基础颜色变量定义
4. 提供基础字号变量定义

0.3.16 2023-04-30

1. 更新字体图标

0.3.13 2023-04-25

1. 增加日期选择框 [DateTimePickerH5];

0.1.8 2023-02-15

1. 增加权限控制指令 [v-permis]；
2. 增加元素外点击指令 [v-outside]；
3. 增加自动获取焦点指令 [v-focus]；
4. 增加防抖指令 [v-debounce]；
5. 增加节流指令 [v-throttle];

0.1.0 2022-12-08

1. 首次提交

安装

npm安装

npm i xelf-ui -S

全局引用

修改项目的main.js文件如下内容：

import { createApp } from 'vue'
import xelf from 'xelf-ui'

const app = createApp(App)
app.use(xelf)
app.mount('#app')

基础变量

1. 基础的颜色变量定义说明

引入样式：@import 'xelf-ui/theme/index.scss'

蓝色，这里定义了9个等级的颜色，变量名称如下：

--x-color-blue、--x-color-blue-100、--x-color-blue-200、--x-color-blue-300、--x-color-blue-400、--x-color-blue-500、--x-color-blue-600、--x-color-blue-700、--x-color-blue-800、--x-color-blue-900

靛蓝，这里定义了9个等级的颜色，变量名称如下：

--x-color-indigo、--x-color-indigo-100、--x-color-indigo-200、--x-color-indigo-300、--x-color-indigo-400、--x-color-indigo-500、--x-color-indigo-600、--x-color-indigo-700、--x-color-indigo-800、--x-color-indigo-900

紫色，这里定义了9个等级颜色，变量名称如下：

--x-color-purple、--x-color-purple-100、--x-color-purple-200、--x-color-purple-300、--x-color-purple-400、--x-color-purple-500、--x-color-purple-600、--x-color-purple-700、--x-color-purple-800、--x-color-purple-900

粉色，这里定义了9个等级的颜色，变量名称如下：

--x-color-pink、--x-color-pink-100、--x-color-pink-200、--x-color-pink-300、--x-color-pink-400、--x-color-pink-500、--x-color-pink-600、--x-color-pink-700、--x-color-pink-800、--x-color-pink-900

红色，这里定义了9个等级的颜色，变量名称如下：

--x-color-red、--x-color-red-100、--x-color-red-200、--x-color-red-300、--x-color-red-400、--x-color-red-500、--x-color-red-600、--x-color-red-700、--x-color-red-800、--x-color-red-900

橙色，这里定义了9个等级的颜色，变量名称如下：

--x-color-orange、--x-color-orange-100、--x-color-orange-200、--x-color-orange-300、--x-color-orange-400、--x-color-orange-500、--x-color-orange-600、--x-color-orange-700、--x-color-orange-800、--x-color-orange-900

黄色，这里定义了9个等级的颜色，变量名称如下：

--x-color-yellow、--x-color-yellow-100、--x-color-yellow-200、--x-color-yellow-300、--x-color-yellow-400、--x-color-yellow-500、--x-color-yellow-600、--x-color-yellow-700、--x-color-yellow-800、--x-color-yellow-900

绿色，这里定义了9个等级的颜色，变量名称如下：

--x-color-green、--x-color-green-100、--x-color-green-200、--x-color-green-300、--x-color-green-400、--x-color-green-500、--x-color-green-600、--x-color-green-700、--x-color-green-800、--x-color-green-900

青绿色，这里定义了9个等级的颜色，变量名称如下：

--x-color-teal、--x-color-teal-100、--x-color-teal-200、--x-color-teal-300、--x-color-teal-400、--x-color-teal-500、--x-color-teal-600、--x-color-teal-700、--x-color-teal-800、--x-color-teal-900

青色，这里定义了9个等级的颜色，变量名称如下：

--x-color-cyan、--x-color-cyan-10、--x-color-cyan-200、--x-color-cyan-300、--x-color-cyan-400、--x-color-cyan-500、--x-color-cyan-600、--x-color-cyan-700、--x-color-cyan-800、--x-color-cyan-900

灰色，这里定义了9个等级的颜色，变量名称如下：

--x-color-gray、--x-color-gray-100、--x-color-gray-200、--x-color-gray-300、--x-color-gray-400、--x-color-gray-500、--x-color-gray-600、--x-color-gray-700、--x-color-gray-800、--x-color-gray-900

黑、白、透明

--x-color-black
--x-color-white
--x-color-tran

2. 基础的字号变量定义说明

引入样式：@import 'xelf-ui/theme/index.scss'

蓝色，这里定义了9个等级的颜色，变量名称如下：

--x-font-size-base
--x-font-size-xs
--x-font-size-sm
--x-font-size-lg
--x-font-size-xl
--x-font-size-xxl
--x-font-size-sl
--x-font-size-xsl

自定义指令

1. 元素权限控制指令说明

在需要控制权限的组件上使用 v-permis 指令，指令参数为一个对象，roles属性为字符串数组用于指定当前用户拥有的权限集合， permis属性也是字符串数组用于指定元素显示所需的权限集合，当用户拥有的权限集合中包含permis中的任何一个元素，元素即可正常显示。roles 参数指定 ['admin', 'edit', 'view']，permis 参数指定 ['admin'],此时permis中的权限‘admin’包含在roles列表中，所以用户拥有元素权限，元素会正常显示。

使用样例：

<button v-permis="{ roles: ['admin', 'edit', 'view'], permis: ['admin'] }">删除</button>

参数说明

2. 元素外点击指令说明

元素上使用 v-outside 指令，并指定fn参数，fn参数为一个方法。 在实际开发时会有点击某一个按钮出现一个弹窗，然后点弹窗的其他区域时需要关闭弹窗，如果是点击的弹窗本身则不关闭弹窗的需求。 以下示例可以满足需求，点击元素内部计数器不增加，点击元素外部计数器增加。

使用样例：

<div class="test-ctrl" v-outside="{ fn: hOutsideClick }">
  点击内部和外部试试
</div>
<div class="result-block">外部点击次数：0</div>

hOutsideClick() {
  this.osnum = this.osnum + 1
}

参数说明

3. 元素自动获取焦点指令说明

使用“自动聚焦”指令的元素会自动获取焦点，兄弟元素间只会有一个聚焦，即将该指令作用于两个兄弟输入框上，也只会自动聚焦一个。自动聚焦指令没有任何参数，只需要在组件上使用 “v-focus” 指令即可。

使用样例

<input type="text" v-focus />

4. 点击防抖指令说明

一般用于按钮，避免用户连续多次点击，导致前端连续请求后端接口，为后端带来不必要的压力。fn参数指定事件处理方法，event参数指定防抖事件，delay参数指定延迟时长。用防抖指令后并不是每次点击都会响应，多次点击在不超过延迟时间的情况下不管点击多少次都只执行最后一次。

使用样例

<button class="test-ctrl" v-debounce="{ fn: hClick, event: 'click', delay: 500 }">
  我是防抖的，点击试试
</button>
<div class="result-block">
  计数器：0
</div>

hClick() {
  this.cnum.value += 1
}

参数说明

5. 点击节流指令说明

节流和防抖类似，都是用于前端”限流“。不同的是，防抖是限制执行次数，多次密集的触发只会执行最后一次，无规律，更关注结果；节流是限制执行频率，有节奏的执行，有规律，更关注过程。fn参数指定事件处理方法，event参数指定防抖事件，delay参数指定延迟时长。使用节流指令后并不是每次点击都会响应，多次触发的情况会响应第一次触发，在延迟时间内的其他触发会被抛弃。

使用样例

<button class="test-ctrl" v-throttle="{ fn: hClick, event: 'click' }">
  我是有节流的，点击试试
</button>
<div class="result-block">计数器：0</div>


hClick() {
  this.cnum += 1
}

参数说明

6. 快捷键指令说明

使用 v-shortcut 指令为元素定义快捷键，通过 keys 属性指定快捷键组合，keys属性是一个数组，比如要指定快捷键 alt + p 那么keys属性值为[ 'alt', 'p' ]，handler属性为处理函数。

基础用法

<button v-shortcut="{ keys: ['alt', 'p'], handler: handler1 }" @click="hClick1">快捷键(Alt+P)</button>


handler1() { 
  console.log('键盘快捷键(alt + p)触发') 
}

参数说明

按键码说明

组件

1. 日期时间控件

此控件完全是HTML原生input组件的封装，重新定义了部分属性，自动完成输入输出格式转换。

基础用法

<date-time-picker-h5 v-model="value" type="date" width="120" />

参数说明