xelf-ui

我自己使用的一些组件、样式、方法，有我自己写的也有从网络收集的，这个版本是适用于VUE 2.x。

1. 更新日志

v1.1.13 2024-06-07

1. 下拉选择组件增加多种选中模式，click=单击，debounce=单击防抖，dbclick=双击，sdbclick=单击+双击，默认单击防抖

v1.0.112 2024-05-30

1. 提供全局指令 - 拖拽握把指令 [v-grip] 使用这个指令的元素变化为拖拽握把，自动处理鼠标按下、抬起、拖动，计算拖动距离
2. 下拉选择组件增加属性 open-on-enter, 控制回车键是否可以展开下拉面板
3. 增加停靠面板组件 [XDockPanel]

v1.0.96 2024-05-20

1. 提供全局指令 - tabindex 指令 [v-tabindex]

v1.0.91 2024-05-13

1. 增加日期时间选择组件 [XDatePicker] 由Html5元素日期组件+自制的选择面板组合封装
2. 增加按钮组件 [XButton]

v1.0.82 2024-05-06

1. 解决日期时间组件 [XDateTimePickerH5el] 组件在右侧显示时，面板超出画面问题。

v1.0.81 2024-05-06

1. 增加日期时间组件 [XDateTimePickerH5el] 由Html5元素日期组件+Element-UI DatePicker组件组合封装
2. 选择器组件 [XSelect] 增加 autoSelect 属性
3. 修改选择器组件 [XSelect] 的一些BUG
4. 增加多选框组件 [XCheckbox]

v1.0.18 2024-04-19

1. 选择器组件 [XSelect] 增加 itemSelected 事件的触发来源

v1.0.16 2024-04-16

1. 增加空状态组件 [XEmpty]

v1.0.15 2024-04-16

1. 日期时间组件 [XDateTimePickerH5] 增加超小尺寸
2. 选择器组件 [XSelect] 增加超小尺寸
3. 选择器组件 [XSelect] 指示器图标更换为线性图标
4. 增加标签组件 [XTag]
5. 增加字体图标

v1.0.11 2024-04-09

1. 日期时间组件更名 [XDateTimePickerH5]
2. 日期时间组件 [XDateTimePickerH5] 增加 size 属性
3. 日期时间组件 [XDateTimePickerH5] 获取焦点样式调整
4. 日期时间组件 [XDateTimePickerH5] 禁用样式调整
5. 日期时间组件 [XDateTimePickerH5] 鼠标悬停样式调整
6. 日期时间组件 [XDateTimePickerH5] 自定义样式调整
7. 增加选择器组件 [XSelect]

v1.0.3 2024-04-07

1. 日期时间组件 [DateTimePickerH5] 增加 focus 方法

1.0.0 2024-04-01

首次发布

1. 提供基础的颜色变量定义
2. 提供基础的字号变量定义
3. 提供一个基于html5 input组件的日期时间组件 [DateTimePickerH5]
4. 提供全局指令 - 元素权限控制指令 [v-permis]
5. 提供全局指令 - 元素外点击指令 [v-outside]
6. 提供全局指令 - 元素自动获取焦点指令 [v-focus]
7. 提供全局指令 - 点击防抖指令 [v-debounce]
8. 提供全局指令 - 点击节流指令 [v-throttle]
9. 提供全局指令 - 快捷键指令 [v-shortcut]

2. 安装

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')

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

引入样式：@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

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

引入样式：@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

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

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

使用样例：

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

参数说明

6. 元素外点击指令说明

元素上使用 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
}

参数说明

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

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

使用样例

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

8. 点击防抖指令说明

一般用于按钮，避免用户连续多次点击，导致前端连续请求后端接口，为后端带来不必要的压力。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
}

参数说明

9. 点击节流指令说明

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

使用样例

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


hClick() {
  this.cnum += 1
}

参数说明

10. 快捷键指令说明

使用 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)触发') 
}

参数说明

按键码说明

11. 日期时间控件

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

基础用法

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

参数说明

方法说明

12. 下拉选择控件

下拉选择组件，暂时仅支持单选

基础用法

基础单选下拉框，只需要绑定 v-model 并指定 options 属性，就可以简单使用下拉框。下拉框会自动选中v-model绑定值对应的选项。

<x-select v-model="value1" :options="options"  />

参数说明

事件说明

方法说明

13. 标签控件

基础用法

由type属性来选择tag的类型，也可以通过color属性来自定义背景色。

  <x-tag>标签一</x-tag>
  <x-tag type="success">标签二</x-tag>
  <x-tag type="info">标签三</x-tag>
  <x-tag type="warning">标签四</x-tag>
  <x-tag type="danger">标签五</x-tag>

参数说明

事件说明