item | CabinX

示例

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <form
        clear-button="{{false}}"
        confirm-button="{{false}}"
    >
        <item
            required
            label="输入框"
            node="input"
            name="a"
            colspan="{{ span: 6}}"
        />
        <item
            label="下拉框"
            node="select"
            name="b"
            colspan="3"
        />
        <item
            label="日期"
            node="date-picker"
            name="c"
            colspan="3"
        />
    </form>
</page>

export default XPage({});

表单验证

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <form x="form1">
        <item
            node="input"
            label="请输入人类性别"
            name="megValidator"
            :validators="megValidator"
            description="默认错误显示方法" ,
            :tips="msgTips"
        ></item>
        <item
            node="input"
            label="请输入人类性别"
            :validators="listValidator"
            name="listValidator"
            description="错误详情，以列表方式展示"
            :tips="listTips"
        ></item>
    </form>
</page>

export default XPage({
    data: {
        msgTips: '请输入男/女',
        listTips: {
            title: '列表类型tips',
            list: [
                '文案类型1',
                {type: 'string', value: '文案类型2'},
                {type: 'image', src: 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg'},
                {type: 'link', text: '链接类型', link: 'http://www.baidu.com'}
            ]
        }
    },
    megValidator(value) {
        if (!['男', '女'].includes(value)) {
            return new Promise((resolve, reject) => {
                // 传入string，则直接将string展示在组件下方
                resolve('人类性别有 男 女');
            });
        }
    },
    listValidator(value) {
        if (!['男', '女'].includes(value)) {
            return new Promise((resolve, reject) => {
                // 返回一个对象，text字段必传，默认显示在组件下方
                resolve({
                    text: '输入错误',
                    // 如果包含detail字段，则会展示错误详情pop的触发器
                    detail: {
                        title: '列表类型errordetail',
                        list: [
                            '文案类型1',
                            {type: 'string', value: '文案类型2'},
                            {
                                type: 'image',
                                src: 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg'
                            },
                            {type: 'link', text: '链接类型', link: 'http://www.baidu.com'}
                        ]
                    }
                });
            });
        }
    }
})

换行

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <form type="search" x="form">
        <actions>
            <button text="更多示例" bindclick="showMore"></button>
        </actions>
        <item @changed="lineBreakChange" node="select" name="lineBreakType"
              data="{[{label:'all',value:'all',tooltip:'参考css word-break:all'},{label:'word',value:'word',tooltip:'参考css word-break:break-word'}]}"
              value="all"
              label="lineBreak.type">
        </item>
        <item @changed="lineBreakChange" node="input" name="lineBreakSpliter" label="lineBreak.spliter"
              placeholder="请输入英文逗号！"></item>
    </form>
    <form type="info" layout="vertical" x="form2">
        <item label="不换行"
              node="text"
              value="文案很长文案很长文案很长文案很长文案很长文案很长文案很文案很长"
              lineBreak="{{lineBreak}}"
              status="success"
              ellipsis={{false}}
              name="b">
        </item>

        <item label="使用word展示最佳"
              node="text"
              value="Singapore may be small, but packs in quite a punch. Only about 655 square kilometers in area, it is one of the most densely populated cities in the world, with about 6430 people per square kilometer. Although it is one of the 20 smallest countries in the world, its economy is a world leader, and has the world's busiest port in terms of tonnage handled.Today the financial and technological hub of South East Asia, Singapore was once a sleepy Malay fishing village, which came into its own as a British trading colony in the 1800's. The population is a mix of Malays, Chinese and Indians with a smattering of other ethnic nationalities. There are four official languages in Singapore - Mandarin, Tamil, Malay and English. The Chin"
              lineBreak="{{lineBreak}}"
              ellipsis={{true}}
              name="b">
        </item>


        <item label="使用spliter+all展示最佳"
              node="text"
              value="13465309703,15862025878,15814263248,13491635048,13407114339,13479997836,15816155683,15817641308,13436516577,13417005883,13413839440,15863089744,13417774018,13489712392,15847443054,13462093698,13498508758,13496454963,15852106800,15866355809"
              lineBreak="{{lineBreak}}"
              ellipsis={{1}}
              name="b">
        </item>

        <item label="前边哪个例子，保留spliter"
              node="text"
              value="13465309703,15862025878,15814263248,13491635048,13407114339,13479997836,15816155683,15817641308,13436516577,13417005883,13413839440,15863089744,13417774018,13489712392,15847443054,13462093698,13498508758,13496454963,15852106800,15866355809"
              lineBreak="{{...lineBreak,keepSpliter:true}}"
              ellipsis={{2}}
              name="b">
        </item>


        <item label="使用spliter+word"
              node="text"
              value="I hava a long english name,I hava a long english name,I hava a long english name,I hava a long english name,I hava a long english name,I hava a long english name,I hava a long english name,I hava a long english name,I hava a long english name,I hava a long english name,"
              lineBreak="{{lineBreak}}"
              ellipsis={{3}}
              name="b">
        </item>
        <item label="注意事项"
              node="text"
              colspan="{{6}}"
              value="{{content}}"
              line-break="{{spliter:'。', type: 'all', keepSpliter: true}}"
              ellipsis={{false}}
              name="b">
        </item>


    </form>
</page>

const content = [
    '1.单门店导入请下载使用单门店模板',
    '2.单门店导入请下载使用单门店模板',
    '3.价格导入策略必选',
    '4.导入未税单价反算含税单价：未税单价必填，含税单价',
    '5.导入未税单价反算含税单价：未税单价必填，含未税单价',
].join('。');
export default XPage({
    data: {
        lineBreak: {
            type: 'all',
        },
        content
    },
    lineBreakChange() {
        const form = this.getComponent('form');
        const data = form.getData();
        const {lineBreakType, lineBreakSpliter} = data;
        this.setData({
            lineBreak: {
                type: lineBreakType,
                spliter: lineBreakSpliter
            }
        });
    },
    showMore() {
        CabinX.go('#index/cabinxdoc/cabinx/components/form/item/component/breakWord2', {target: 'new-window'});
    }
});

Attributes

参数	说明	类型	可选值	默认值
node	实际调用的控件	string	--	text
label	标签	string	--	--
description	描述	string/Object	--	--

description(Object)

参数	说明	类型	可选值	默认值	备注
status	状态	string	success/warning/error	--	--
text	描述的内容	string	文本内容	--	--
align	文字对齐	string	'right'/''	--	仅Mobile

Attributes - Form

参数	说明	类型	可选值	默认值	备注
required	必填	Boolean/Object{查看required的配置说明}	--	false
colspan	跨行	number/object	1/2/3/4/5/6	不同组件默认值不同
tips	贴士	string/object	--	--
validators	校验器	function/array<(function)>/array<(object)>	--	--	复杂情况参考表单验证示例
line-break	换行方式	Object		{type:'all'}	详情看考line-break详细配置
ellipsis	超长文本的隐藏方式	boolean/number	--	false	false: 默认展开,收起只展示一行;true: 默认收起,收起只展示一行，数字: 默认收起，收起展示指定行数
trim	当node=input且type=text(type默认为text)时,去除前后空格字符	boolean	--	--

Attributes - FormSearch

参数	说明	类型	可选值	默认值
before-render	自定义模式中的值转化	function	--	--
enableSearchValidators	开启搜索模式下的校验器	Boolean	--	false

line-break 详细配置

参数	说明	类型	可选值	默认值
type	换行方式	string	'all'/'word'	'all'
spliter	分行的标记，类似'a,b,c'.splite(',') = ['a','b','c']
keepSpliter	是否保留分行标记	Boolean	true/false	false

required 详细配置

required类型为Object时支持以下配置：

参数	说明	类型	可选值	默认值
byValidators	启动required时，校验使用自定义的validators，错误文案提示可在validators中返回	Boolean	--	false

tips & error popover入参格式

参数	说明	类型	可选值
title	popover的标题	string
list	popover内容的数据	array
list[i].type	popover每个数据项的展示类型	string	string/image/link
list[i].value	list[i].type为string的展示的文案	string
list[i].src	list[i].type为image图片的url	string
list[i].link	list[i].type为link链接的url	string
list[i].text	list[i].type为link链接的url	string

Events

名称	说明	回调参数
validated	触发数据校验后调用	(error

Slot

名称	说明	回调参数
errordetail	错误详情pop的内容定义(参考示例:表单验证)	errordetail

示例​

表单验证​

换行​

Attributes​

description(Object)​

Attributes - Form​

Attributes - FormSearch​

line-break 详细配置​

required 详细配置​

tips & error popover入参格式​

Events​

Slot​

示例

表单验证

换行

Attributes

description(Object)

Attributes - Form

Attributes - FormSearch

line-break 详细配置

required 详细配置

tips & error popover入参格式

Events

Slot