Ct-adc-list-editor NPM

ct-adc-list-editor

列表编辑组件，适用于项目中的列表类编辑，如添加多个时间段等

!img

暂无

从npm安装ct-adc-list-editor

npm install ct-adc-list-editor --save

在代码中使用

import {Inline, Block} from 'index.js';

new Vue({
    components: {
        Inline,
        Block
    },
    ...
});

参数	说明	类型	默认值	可选值	描述
removeButtonText	删除按钮的文字	String	删除	任意字符串	删除按钮上显示的文字
orderUpButtonText	上移按钮的文字	String	上移	任意字符串	上移按钮上显示的文字
orderDownButtonText	下移按钮的文字	String	下移	任意字符串	下移按钮上显示的文字
buttons	按钮显示	Object	{remove: true, order: true}	修改两个属性的值为true/false	操作按钮的定制
addButtonText	添加按钮的文字	String	添加	任意字符串	添加按钮上显示的文字
minCount	至少几项	Number	0	任意正整数 / 0	列表至少要配几项
maxCount	最多几项	Number	-1(即不限制)	任意正整数 / 0 / -1	列表最多可以配几项
initialCount	起始有几项	Number	0	任意正整数 / 0	初始化时显示几项
step	步长	Number	1	任意正整数	点一次添加按钮添加几项
emptyText	为空文字	String	暂无数据	任意字符串	列表数量为0时显示的文字
is-removable	是否可删	Boolean Array / Object / Function	()=>true	和外部数据length相同的数组，其中每一项为一个Boolean类型的值，表示该项是否可删除	每项是否可被删除
is-orderable	是否可移动	Boolean Array / Object / Function	()=>true	见下方详情	每项是否可被移动

针对Block类型有以下几个属性：

参数	说明	类型	默认值	可选值	描述
visible	是否可见	Boolean Array	[]	和外部数据length相同的数组，其中每一项为一个Boolean类型的值，表示该项是否可见	每项是否可见
duration	动画持续时长	Number	500	任意正整数	动画持续时长单位 ms

针对Inline类型有以下几个属性：

参数	说明	类型	默认值	可选值	描述
hasHead	是否需要头部	Boolean	true	false/true	是否需要头部
grid	栅格布局配置	Object	{lg: 9, 3,sm: 8, 4,xs: 8, 4}	指定不同size下布局的对象，如默认	栅格布局配置

slot名称	说明	是否有默认内容	scope
head	头部slot	是	index(当前项的索引)
head-form	头部的form部分，即title的位置	是	index(当前项的索引)
head-remove	头部的删除按钮所在部分，一般不会配置相关的内容	是	index(当前项的索引)
list	列表slot	是	index(当前项的索引)
list-form	列表的form部分，用来放置编辑的内容	是	index(当前项的索引)
list-button	列表的删除按钮所在部分，一般是一个删除按钮	是	index(当前项的索引)

slot名称	说明	是否有默认内容	scope
list	列表slot	是	index(当前项的索引)
list-head	标题栏	是	index(当前项的索引)
list-head-title	标题栏title	是	index(当前项的索引)
list-head-button	标题栏删除按钮部分	是	index(当前项的索引)
list-form	列表的form部分，用来放置编辑的内容	是	index(当前项的索引)