kd-admin-ui
v2.1.0
Published
基于vue3+vite+element-plus的动态表单/CRUD/可视化布局组件
Downloads
7
Readme
使用方法：
1、结合 vue3+vite+element-plus 使用
npm i kd-admin-ui
import kdUI from 'kd-admin-ui'
Vue.use(kdUI)一、动态表单组件----kdForm
1、使用方法
<kdForm :config="config" :model="model"></kdForm> config 动态表单的配置文件
model 表单绑定的属性2、示例
// config.js
import { reactive } from "vue";
const config = reactive({
labelWidth: "120px",
labelPosition: "top",
rules: {
tenantId: [{ required: true, message: "客户id是必填项", trigger: "blur" }],
username: [{ required: true, message: "用户名是必填项", trigger: "blur" }],
password: [
{ required: true, message: "密码是必填项", trigger: "blur" },
{ min: 3, max: 8, message: "密码最少3位，最大8位", trigger: "blur" },
],
rate: [[{ required: true, message: "评分是必填项", trigger: "blur" }]],
},
formRef: "formLogin",
formItemArr: [
{
id: 1,
label: "客户端",
prop: "tenantId",
name: "input",
beforeSlot: 'beforeInput',
options: {
placeholder: "请输入内容",
size: "small",
clearable: true,
modelName: 'input1',
// slotBefore: (scoped) => {
// const a = 1
// return `<div>这个是客户端的input${a+scoped}前边插入的内容</div>`
// },
inputValue: 123
},
},
{
id: 10,
label: "用户名",
name: "input",
options: {
placeholder: "请输入用户名",
size: "small",
clearable: true,
modelName: 'input2'
},
},
{
id: 2,
label: "下拉列表",
prop: "select",
name: "select",
options: {
modelName: 'select',
placeholder: "please select your zone",
optionArr: [
{
label: "上海",
value: "shanghai",
},
{
label: "北京",
value: "beijing",
},
{
label: "天津",
value: "tianjin",
},
],
},
},
{
id: 3,
label: "单选框",
prop: "radio",
name: "kdradio",
afterSlot: 'afterRadio',
options: {
modelName: 'radio1',
optionArr: [
{
label: "man",
text: "男",
},
{
label: "woman",
text: "女",
},
],
},
},
{
id: 11,
label: "单选框222",
prop: "radio",
name: "radio",
options: {
modelName: 'radio2',
optionArr: [
{
label: "man",
text: "男111",
},
{
label: "woman",
text: "女222",
},
],
},
},
{
id: 4,
label: "评分",
prop: "rate",
name: "rate",
options: {
modelName: 'aaaa',
allowHalf: true,
},
},
{
id: 5,
label: "开关",
prop: "switch",
name: "switch",
options: {
modelName: 'switch',
activeText: "开关111",
inactiveText: "开关222",
loading: true,
},
},
{
id: 6,
label: "虚拟下拉列表",
name: "vSelect",
options: {
modelName: 'vselect',
optionArr: [
{ value: "aaa", label: "aaa的文字" },
{ value: "bbb", label: "bbb的文字" },
{ value: "ccc", label: "ccc的文字" },
{ value: "ddd", label: "ddd的文字" },
],
style: "width: 240px; margin-right: 16px; vertical-align: middle",
},
},
{
id: 7,
label: "时间选择器",
name: "timepicker",
options: {
modelName: 'timepicker'
},
},
],
});
export default config;
// model.js
import { reactive } from "vue";
const model = reactive({
username: "13456789019",
password: "gao",
});
export default model;
3、参数
a、config = {}
属性 描述 默认值
labelWidth： 文字的宽度
labelPosition： 文字的位置
rules： 验证的规则
ref： 绑定表单
formItemArr： 表单的每一项 [] item = {}
id: 标识 --
label: 文字内容 --,
prop: rules验证规则的属性 --,
name: 表单组件的名字 --,
options: { 传入组件的参数
modelName 绑定提交表单对应的model属性 --
// 输入框 -- input
placeholder 文字提示 ''
size 尺寸 default
clearable 是否一键清除 false
disabled 是否禁用 false
type input类型 text
maxlength 最大长度 --
minlength 最小长度 --
showWordLimit 是否显示统计字数 false
showPassword 是否显示切换密码图标 false
prefixIcon 自定义前缀图标 --
suffixIcon 自定义后缀图标 --
// 数字框 -- inputnumber
step 步数 1
min 最小值 Infinity
max 最大值 Infinity
stepStrictly 是否只能输入 step 的倍数 false
precision 数值精度 --
size 尺寸 default
disabled 是否禁用 false
controls 是否使用控制按钮 true
controlsPosition 控制按钮位置 -- right
label 输入框关联的 label 文字 --
// 单选框 -- radios
size 尺寸 default
disabled 禁用 false
text-color 文字激活时的颜色 #ffffff
fill 激活时的填充色和边框色 #409EFF
validateEvent 输入时是否触发表单的校验 true
optionArr 单选项目 -- []
disabled 是否禁用 false
border 是否显示边框 false
label radio 的 value --
name 原生name属性 --
size 尺寸大小 --
// 评分 -- rate
max 最大分值 5
size 尺寸 default
disabled 是否为只读 false
allowHalf 是否允许半选 false
lowThreshold 低分和中等分数的界限值 2
// 自动补全 -- autocomplete
loadAll 总数据 []
querySearch 获取输入建议的方法 -- function
clearable 是否允许清除 false
class 类名 --
placeholder 占位文本 --
popperClass 下拉列表类名 ''
label 标签文本 ''
hideLoading 是否隐藏loading false
handleSelect 点击选中建议项时触发 选中的建议项
// 级联选择器 -- cascader
optionArr 总数居 []
size 尺寸 --
placeholder 输入框占位文本 --
disabled 是否禁用 false
clearable 是否允许清除 false
showAllLevels 输入框中是否显示选中值的完整路径 true
collapseTags 多选模式下是否折叠Tag false
// 复选框 -- checkbox
true-label 选中时的值 --
false-label 没有选中时的值 --
disabled 是否禁用 false
border 是否显示边框 false
size Checkbox 的尺寸 --
name 原生 name 属性 --
checked 当前是否勾选 false
indeterminate 设置 indeterminate 状态 false
validate-event 输入时是否触发表单的校验 true
// 颜色选择器 -- colorpicker
size 尺寸 --
show-alpha 透明度选择 false
color-format 写入 v-model 的颜色的格式 hex (当 show-alpha 为 false) / rgb (当 show-alpha 为 true)
popper-class 下拉框的类名 --
predefine 预定义颜色 --
disabled 是否禁用 false
validate-event 输入时是否触发表单的校验 true
// 日期选择器 -- datePicker
type 显示类型 date
placeholder 非范围选择时的占位内容 --
size 输入框尺寸 default
default-value 可选，选择器打开时默认显示的时间 --
validate-event 输入时是否触发表单的校验 true
cell-class-name 设置自定义类名 --
clearable 是否显示清除按钮 true
editable 文本框可输入 true
// 下拉列表 -- select
placeholder 占位文字 Select
multiple 是否多选 false
disabled 是否禁用 false
size 输入框尺寸 default
clearable 是否可以清空选项 false
collapse-tags 多选时是否将选中值按文字的形式展示 false
collapse-tags-tooltip 当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签 false
multiple-limit 用户最多可以选择的项目数， 为 0 则不限制 0
effect Tooltip 主题，内置了 dark / light 两种 light
autocomplete Select 输入框的原生 autocomplete 属性 off
filterable Select 组件是否可筛选 false
filter-method 自定义筛选方法 --
loading 是否正在从远程获取数据 false
loading-text 从服务器加载内容时显示的文本 Loading
no-data-text 无选项时显示的文字 No data
popper-class 选择器下拉菜单的自定义类名 --
clear-icon 自定义清除图标 CircleClose
placement 下拉框出现的位置 bottom-start
// 开关 -- switch
active-text switch 打开时的文字描述 --
inactive-text switch 的状态为 off 时的文字描述 --
loading 是否显示加载中 false
disabled 是否禁用 false
size switch 的大小 default
width switch 的宽度 --
active-icon switch 状态为 on 时所显示图标 --
inactive-icon switch 状态为 off 时所显示图标 --
active-value switch 状态为 on 时的值 --
inactive-value switch的状态为 off 时的值 --
// 虚拟下拉列表 -- vSelect
placeholder 占位文字 Select
multiple 是否多选 false
disabled 是否禁用 false
size 输入框尺寸 default
clearable 是否可以清空选项 false
collapse-tags 多选时是否将选中值按文字的形式展示 false
collapse-tags-tooltip 当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签 false
multiple-limit 用户最多可以选择的项目数， 为 0 则不限制 0
effect Tooltip 主题，内置了 dark / light 两种 light
autocomplete Select 输入框的原生 autocomplete 属性 off
filterable Select 组件是否可筛选 false
filter-method 自定义筛选方法 --
loading 是否正在从远程获取数据 false
loading-text 从服务器加载内容时显示的文本 Loading
no-data-text 无选项时显示的文字 No data
popper-class 选择器下拉菜单的自定义类名 --
clear-icon 自定义清除图标 CircleClose
placement 下拉框出现的位置 bottom-start
// 时间选择器 -- timePicker
arrow-control 是否使用箭头进行时间选择 false
placeholder 非范围选择时的占位内容 --
disabled 禁用 false
editable 文本框可输入 true
clearable 是否显示清除按钮 true
size 输入框尺寸 --
start-placeholder 范围选择时开始日期的占位内容 --
end-placeholder 范围选择时结束日期的占位内容 --
is-range 是否为时间范围选择 false
popper-class TimePicker 下拉框的类名 --
format 显示在输入框中的格式 HH:mm:ss
prefix-icon 自定义前缀图标 Clock
clear-icon 自定义清除图标 CircleClose
// 上传组件 -- upload
class 样式
action 请求 URL --
multiple 是否支持多选文件 false
handlePreview 点击文件列表中已上传的文件时的钩子
handleRemove 文件列表移除文件时的钩子 --
beforeRemove 删除文件之前的钩子，参数为上传的文件和文件列表， --
若返回 false 或者
返回 Promise 且被 reject，则停止删除
limit 允许上传文件的最大数量 --
handleExceed 当超出限制时，执行的钩子函数 --
method 设置上传请求方法 post
data 上传时附带的额外参数 --
name 上传的文件字段名 file
drag 是否启用拖拽上传 false
listType 文件列表的类型 text
disabled 是否禁用上传 false
// 时间选择器 -- timeSelect
max-time 最晚时间点，晚于该时间的时间段将被禁用 --
placeholder 非范围选择时的占位内容 --
start 开始时间 09:00
step 间隔时间 00:30
end 结束时间 18:00
disabled 禁用状态 false
editable 文本框可输入 true
clearable 是否显示清除按钮 true
size 输入框尺寸 default
effect Tooltip 主题，内置了 dark / light 两种主题 light
prefix-icon 自定义前缀图标组件 Clock
clear-icon 自定义清除图标组件 CircleClose
min-time 最早时间点，早于该时间的时间段将被禁用 00:00
format 设置时间格式 HH:mm
}
b、 model = {}
注：表单绑定的字段，提交表单时，可以更快捷的拿到表单对应的内容，model 的属性需要和 config 中的 modelName 一一对应。示例：
import { reactive } from "vue";
const model = reactive({
username: "13456789019",
password: "gao",
});
export default model;二、可视化拖拽组件----kdLayout
1、使用方法
<Kdlayout :layout="layout"></Kdlayout> layout 即可视化拖拽组件的配置项2、示例
// layout.js
import { reactive } from "vue";
import tableData from "./tableData";
const layout = reactive({
// isClear: true,
isCache: true,
layoutArr: [
{
x: 100,
y: 100,
w: 100,
h: 100,
componentName: "kdimage",
},
{
className: "myVideo",
componentName: "kdswiper",
options: {
perView: 1,
autoplay: { delay: 1000 },
swiperArr: [
{
swiperSlideName: "kdimage",
options: {
alt: "图片加载失败了",
},
},
{
swiperSlideName: "kdvideo",
},
{
swiperSlideName: "kdtable",
options: tableData,
},
],
},
},
],
});
export default layout;3、参数
a、layout = {}
属性 描述 默认值
isClear 是否清除缓存 false
isCache 是否需要缓存，即可视化布局 false
layoutArr 可视化组件 []
x x轴坐标 0
y y轴坐标 0
w 容器宽度 0
h 容器高度 0
draggable 容器是否允许推拽 true
resizable 容器是否允许缩放 true
className 容器类名 box
beforeSlot 前置插槽 --
afterSlot 后置插槽 --
componentName 子组件名字 --
options 往子组件传参的配置项 --
// 轮播图组件 -- kdswiper
perView 轮播项一屏展示的数量 1
spaceBetween 轮播项间隙 30
autoplay 自动轮播 { delay: 3000 }
swiperArr 轮播项目
swiperSlideName 项目组件名
clickable 项目导航是否显示和点击 { clickable: true }
draggable 滚动条是否显示和推拽 { draggable: true }
direction 轮播图方向 horizontal
slot 作用域插槽
// 视频组件 -- kdvideo
controls 控制面板 --
preload 预加载 --
autoplay 自动播放 --
className 类名 --
loop 循环 --
width 宽度 --
height 高度 --
muted 静音 --
poster 海报 --
videoArr 视频组 --
src 视频路径 --
type 视频类型 --
// 音频组件 -- kdaudio
controls 控制面板 --
preload 预加载 --
autoplay 自动播放 --
className 类名 --
loop 循环 --
width 宽度 --
height 高度 --
muted 静音 --
poster 海报 --
audioArr 视频组 --
src 视频路径 --
type 视频类型 --
// 图片组件 -- kdimage
imgUrl 图片路径 --
alt 图片加载失败时文字描述 --
title 图片鼠标移入时提示文字 --
width 图片初始宽度 --
height 图片初始高度 --
className 图片类名 --
// 图表组件 -- kdbar
width 图表宽度 100%
height 图表高度 100%
options 图表配置 --
// 表格组件 -- kdtable
tableData 表格数据 --
style 表格样式 --
height 表格高度 --
border 表格边框 --
stripe 表格条纹 --
className 表格类名 --
highlightCurrentRow 表格高亮 --
size 表格尺寸 --
fit 列的宽度是否自撑开 true
showHeader 是否显示表头 true
emptyText 空数据时显示的文本 No Data
optionsArr 表格item项 --
prop 字段名称 --
label 列的key --
width 列宽 --
fixed 固定表头 --
align 对齐方式 left
className 列的类名 --
slot 默认插槽 --
// 以及其它form表单组件，用法同kdForm组件用法
三、增删改查组件----kdcrud
1、使用方法
<kdcrud :options="options" :model="model" /> options
动态表单、动态表格、分页配置项 model 动态表单绑定的model2、示例
// options.js
import { reactive } from "vue";
import model from "./model";
import router from "../../router/router";
const options = reactive({
className: "kdcrud",
config: {
labelWidth: "120px",
labelPosition: "top",
rules: {
tenantId: [
{ required: true, message: "客户id是必填项", trigger: "blur" },
],
select: [{ required: true, message: "用户名是必填项", trigger: "blur" }],
timeSelect: [
{ required: true, message: "密码是必填项", trigger: "blur" },
],
timepicker: [
{ required: true, message: "评分是必填项", trigger: "blur" },
],
},
formRef: "formLogin",
formItemArr: [
{
id: 1,
label: "32453534",
name: "input",
options: {
modelName: "input",
placeholder: "请输入asdasd 内容",
size: "small",
clearable: true,
disabled: false,
},
},
{
id: 2,
label: "下拉列表",
prop: "select",
name: "select",
options: {
modelName: "select",
placeholder: "please select your zone",
optionArr: [
{
label: "上海",
value: "shanghai",
},
{
label: "北京",
value: "beijing",
},
{
label: "天津",
value: "tianjin",
},
],
},
},
{
id: 7,
label: "时间选择器11111",
name: "timePicker",
options: {
modelName: "timePicker",
},
},
{
id: 8,
label: "时间选择器22222",
prop: "timeSelect",
name: "timeSelect",
options: {
modelName: "timeSelect",
},
},
{
id: 9,
name: "button",
options: {
buttonText: "提交按钮",
onclick: async (formEl) => {
await formEl().validate((valid, fields) => {
if (!valid) {
console.log(fields);
return;
}
console.log(model);
router.push("/login");
});
},
},
},
],
},
options: {
tableData: [
{
date: "2016-05-03",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
date: "2016-05-02",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
date: "2016-05-04",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
date: "2016-05-01",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
date: "2016-05-08",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
date: "2016-05-06",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
date: "2016-05-07",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
],
height: 300,
size: "small",
optionsArr: [
{
prop: "address",
label: "Address",
width: 280,
slot(scope) {
return `<div>这个是作用域插槽${scope.row.name}</div>`;
},
},
{
prop: "date",
label: "Date",
},
{
prop: "name",
label: "Name",
width: 180,
},
],
},
background: true,
layout: "prev, pager, next",
total: 3500,
currentChange() {},
});
export default options;
// model.js
import { reactive } from "vue";
const model = reactive({
input: "",
select: "",
vSelect: "",
timePicker: "",
timeSelect: "",
});
export default model;
3、参数
a、options = {}
属性 描述 默认值
className 组件类名
config 动态表单配置
options 动态表格配置项
background 分页背景色
layout 分页布局
total 分页总数
currentChange 分页切换后的事件回调
model 动态表单绑定model
b、model = {}
import { reactive } from "vue";
const model = reactive({
input: "",
select: "",
vSelect: "",
timePicker: "",
timeSelect: "",
});
export default model;四、scss 封装
1、常用类封装----public
/* ************ flex ************ */
.flex {
display: flex;
}
.flex-center {
justify-content: center;
align-items: center;
}
.flex-between {
justify-content: space-between;
}
.flex-around {
justify-content: space-around;
}
.flex-start {
justify-content: flex-start;
}
.flex-end {
justify-content: flex-end;
}
.align-center {
align-items: center;
}
/* ************ text ************ */
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-indent {
text-indent: 2em;
}
.text-lower {
text-transform: lowercase;
}
.text-upper {
text-transform: uppercase;
}
.text-capitalize {
text-transform: capitalize;
}
.text-through {
text-decoration: line-through;
}
.text-underline {
text-decoration: underline;
}
.text-overline {
text-decoration: overline;
}
/* ************ display ************ */
.block {
display: block;
}
.inline {
display: inline;
}
.inline-block {
display: inline-block;
}
.hide {
display: none;
}
/* ************ overflow ************ */
.hidden {
overflow: hidden;
}
.overflow-x-scroll {
overflow-x: scroll;
}
.overflow-y-scroll {
overflow-y: scroll;
}
.overflow-auto {
overflow: auto;
}
.visible-hidden {
visibility: hidden;
}
/* ************ shadow ************ */
.shadow-dark {
box-shadow: 0 0 10px #666;
}
.shadow-light {
box-shadow: 0 0 10px #ccc;
}
/* ************ box modal ************ */
.border-box {
box-sizing: border-box;
}
.content-box {
box-sizing: content-box;
}
/* ************ others ************ */
.margin-auto {
margin: 0 auto;
}
.select-none {
user-select: none;
}
[class*="kd"] {
width: 100%;
height: 100%;
}2、主题变量封装----var
$black: #000;
$white: #fff;
$darker: #333;
$dark: #999;
$light: #aaa;
$lighter: #eee;
$main: rgb(26, 179, 190);
$danger: rgb(252, 199, 6);
$warning: rgb(237, 31, 12);
$info: rgb(5, 255, 21);
$primary: rgb(16, 73, 216);3、工具类封装----function
// 数值0-100，5为间隔，例如：
m5 就是上下左右外边距都是5px
plr10 就是左右内边距都是10px
f30 就是字体大小是30px
w45 就是宽度45%
border1 就是边框是1px
br20 就是圆角20px
size($w, $h) 就是宽高
square($w) 就是正方形
bg-white 就是白色背景
text-black 就是黑色字体
border-info 就是边框信息色（绿色）4、公共类封装----common