@cctl/ui-vue3
v1.0.7
Published
此组件库是基于 vue3.0 + elementui-plus 的组件库,项目如要使用，则需要确保对 Elementui 进行了全局引用安装
Downloads
17
Readme
介绍
此组件库是基于 vue3.0 + elementui-plus 的组件库,项目如要使用，则需要确保对 Elementui 进行了全局引用安装
npm i @cctl/ui-vue3注册
// main.js
import { createApp } from "vue";
import App from "./App.vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import DUI from "@cctl/ui-vue3";
import "@cctl/ui-vue3/dist/index.css"
const app = createApp(App);
app.use(ElementPlus, {
locale: zhCn,
});
app.use(DUI);
app.mount("#app");全局属性默认值配置
Vue.use(DUI,{
table:{
autoHeight:true
}
})组件
DForm
对 el-form 、el-form-item、el-row、el-col 及输入框、选择器、单选框、多选框等控件组成
可参考element-ui文档 https://element.eleme.io/#/zh-CN/component/form
示例
基本使用
<template>
<DForm :formItems="formItems" :model="formModel"></DForm>
</template>
<script>
import { DForm } from "@cctl/ui-vue2";
export default {
name: "App",
components: {
DForm,
},
data() {
return {
formItems: [
{
label: "文本框",
prop: "input",
type: "Input",
span: 24,
},
{
label: "选择器",
prop: "select",
type: "Select",
span: 24,
props: {
options: [
{
label: "上海",
value: 1,
},
{
label: "西安",
value: 2,
},
],
},
},
],
formModel: {
select: 1,
input: "",
},
};
},
};
</script>插槽使用
<template>
<Form :formItems="formItems" :model="formModel">
<template #slot>
<el-form-item prop="slot" label="插槽">
<el-input v-model="formModel.slot"></el-input>
</el-form-item>
</template>
</Form>
</template>
<script>
import { DForm } from "@cctl/ui-vue2";
export default {
name: "App",
components: {
Form,
},
data() {
return {
formItems: [
{
label: "插槽",
prop: "slot",
span: 24,
slot: true,
},
],
formModel: {
input: "",
},
};
},
};
</script>事件绑定
<template>
<Form :formItems="formItems" :model="formModel">
</Form>
</template>
<script>
export default {
name: "App",
data() {
return {
formItems: [
{
label: "事件",
prop: "input",
type: "Input"
span: 24,
events:{
input:()=>{
console.log("input事件触发")
}
}
},
],
formModel: {
input: "",
},
};
},
};
</script>DForm 属性
完全兼容 el-form 属性原生属性
| 参数 | 说明 | 类型 | 默认值 | | ---------- | ------------------------------ | ------- | ------ | | formItems | 表单配置项 | array | - | | readonly | 只读模式（优先级高于禁用模式） | boolean | - | | disabled | 禁用模式（优先级高于单项配置） | boolean | - | | label-show | 是否显示标签 | boolean | true |
FormItem 属性
| 参数 | 说明 | 类型 | 可选值 | | ---------- | -------------------------------- | ---------------- | ------------------------------------------------------------ | | type | 表单类型 | string | Input、Checkbox、Radio、Select、Cascader、Switch、DatePicker | | span | 栅格占据的列数 | number | - | | props | 表单控件属性 | object | - | | isSlot | 开启插槽 | boolean | - | | show | 是否显示，用于动态切换显隐 | boolean/function | - | | label-show | 是否显示标签优先级高于 Form 属性 | boolean | - |
DTable
对 el-table 、el-table-column 及输入框、选择器、单选框、多选框等控件组成
可参考element-ui文档 https://element.eleme.io/#/zh-CN/component/table
示例
基本使用
<template>
<DTable :data="tableData" :tableItems="tableItems" :pageConfig="pageConfig">
<template #header>
header插槽
</template>
</DTable>
</template>
<script>
import { DTable } from "@cctl/ui-vue2";
export default {
name: "App",
components: {
DTable,
},
data() {
return {
pageConfig:{
page:1, // 页码
size:10, // 单页数量
total:0, // 总条数
},
tableData: [
{
input: "1",
checkbox: [],
select: [],
datePicker: "2025-01-24",
},
],
tableItems: [
{
label: "文本框",
prop: "input",
type: "Input",
},
{
label: "文本域",
prop: "textarea",
type: "Input",
props: {
type: "textarea",
},
},
{
label: "选择器",
prop: "select",
type: "Select",
props: {
options: [
{
label: "上海",
value: 1,
},
{
label: "西安",
value: 2,
},
],
props: {
label: "name",
value: "id",
},
},
},
{
label: "级联选择器",
prop: "cascader",
type: "Cascader",
props: {
"show-all-levels": false,
options: [
{
label: "中国",
value: 1,
children: [
{
label: "陕西",
value: 11,
children: [
{
label: "西安",
value: 111,
},
],
},
{
label: "河北",
value: 22,
},
],
},
],
},
},
],
};
},
};
</script>插槽使用
<template>
<DTable :data="tableData" :tableItems="tableItems">
<template slot-scope="scope" slot="input">
{{ scope.row.input }}
</template>
</DTable>
</template>
<script>
import { DTable } from "@cctl/ui-vue2";
export default {
name: "App",
components: {
DTable,
},
data() {
return {
tableData: [
{
input: "1",
},
],
tableItems: [
{
label: "文本框",
prop: "input",
type: "Input",
isSlot: true,
},
};
},
};
</script>自定义渲染
<template>
<DTable :data="tableData" :tableItems="tableItems" ></DTable>
</template>
<script>
import { DTable } from "@cctl/ui-vue2";
export default {
name: "App",
components: {
DTable,
},
data() {
return {
tableData: [
{
id: "1",
},
],
tableItems: [
{
label: “自定义渲染”,
render(h,{row}){
return h('span',row.id)
}
},
]
};
},
};
</script>状态
<template>
<DTable :data="tableData" :tableItems="tableItems" ></DTable>
</template>
<script>
import { DTable } from "@cctl/ui-vue2";
export default {
name: "App",
components: {
DTable,
},
data() {
return {
tableData: [
{
status:1
},
],
tableItems: [
{
type:"Status",
label: “自定义渲染”,
prop:"status",
props:{
options:[
{
label:"成功",
value:1,
color:"green"
},
{
label:"失败",
value:2,
color:"red"
}
]
}
},
]
};
},
};
</script>DTable 属性
完全兼容 el-table 原生属性
| 参数 | 说明 | 类型 | 默认值 | | --------- | ---------- | ----- | ------ | | tableItems | 表格配置项 | array | - | | operable | 是否可编辑 | boolean | false | | pageConfig | 分页配置，设置后自动开启分页{page:1,size:10,total:100} | object | - | | isSlot | 开启插槽 | boolean | - |
TableItems 属性
| 参数 | 说明 | 类型 | 可选值 | | ------ | ---------------------------------- | ---------------- | ------------------------------------------------------------ | | type | 列类型 | string | Status、Input、Checkbox、Radio、Select、Cascader、Switch、DatePicker | | props | 列控件属性 | object | - | | render | 自定义渲染，只针对只读状态下的渲染 | (h,{row})=>VNode | |
Events 事件
完全兼容 el-table 原生事件
| 事件名 | 说明 | 回调参数 | | ------------------- | ------------------------ | -------- | | page-size-change | pageSize 改变时会触发 | 每页条数 | | page-current-change | currentPage 改变时会触发 | 当前页 |