示例

Base Form-Input

默认

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="默认">
        <form type="base" layout="horizontal">
            <item node="input" label="label" placeholder="请输入" />
        </form>
    </module>
</page>

export default XPage({
    data: {},
    show() {}
});

输入限制

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="输入限制">
        <form type="base" layout="horizontal">
            <item node="input" label="label" placeholder="请输入最多10个字符" maxlength="10" show-word-limit />
        </form>
    </module>
</page>

export default XPage({
    data: {},
    show() {}
});

文本域

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="文本域">
        <form type="base" layout="horizontal">
            <item node="input" type="textarea" label="默认" placeholder="请输入" colspan="{{span:3}}"></item>
            <item node="input" type="textarea" label="自动高度" placeholder="最小高度2，最大高度6" autosize="{{minRows: 2, maxRows: 6}}" colspan="{{span:3}}"></item>
        </form>
    </module>
</page>

export default XPage({
    data: {},
    show() {}
});

前置图标

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="前置图标">
        <form type="base" confirmButton="{{false}}" clearButton="{{false}}">
            <item node="input" placeholder="请输入" icon="x-icon-universally-location" />
        </form>
    </module>
</page>

export default XPage({
    data: {},
    show() {}
});

前后缀

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="前后缀">
        <form type="base" layout="horizontal">
            <item node="input" label="前缀" prefix="共计" colspan="{{span:3}}" placeholder="Placeholder"  />
            <item node="input" label="后缀" suffix="KG" colspan="{{span:3}}" placeholder="Placeholder"  />
            <item node="input" label="前后缀" prefix="共计" suffix="件" colspan="{{span:3}}" placeholder="Placeholder"  />
        </form>
    </module>
</page>

export default XPage({
    data: {},
    show() {}
});

格式化

输入金额，数字的格式化支持类型

数字-Quantity

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="数字-Quantity">
        <form type="base" layout="horizontal">
            <item node="input" type="amount" label="默认-全局配置" formatter="quantity" colspan="{{span:3}}" value="{{100000}}" />
            <item node="input" type="amount" label="自定义" formatter="quantity" format="{{quantityFormat}}" colspan="{{span:3}}" value="{{100000}}" />
        </form>
    </module>
</page>

export default XPage({
    data: {
        quantityFormat: {
            prefix: '',
            separator: ',',
            decimal: '.',
            precision: 0,
            min: undefined,
            max: undefined,
        },
    },
    show() {}
});

金额-Amount

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="金额-Amount">
        <form type="base" layout="horizontal">
            <item node="input" type="amount" label="默认-全局配置" formatter="amount" colspan="{{span:3}}" value="{{19800}}" />
            <item node="input" type="amount" label="自定义" formatter="amount" format="{{amountFormat}}" colspan="{{span:3}}" value="{{19800}}" />
        </form>
    </module>
</page>

export default XPage({
    data: {
        amountFormat: {
            prefix: '$',
            separator: ',',
            decimal: '.',
            precision: 0,
            min: undefined,
            max: undefined,
        },
    },
    show() {}
});

Search form-Input

搜索类输入框

默认

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="默认">
        <form type="search">
            <item node="input" label="label" placeholder="Placeholder" />
        </form>
    </module>
</page>

export default XPage({
    data: {},
    show() {}
});

下拉-默认

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="下拉-默认">
        <form type="search">
            <item node="input" label="label" categories="{{categories}}" placeholder="Placeholder" />
        </form>
    </module>
</page>

export default XPage({
    data: {
        categories: [{
            label: 'Row Label',
            value: 1
        }]
    },
    show() {}
});

下拉-条件名称

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="下拉-条件名称">
        <form type="search">
            <item node="input" label="label" categories="{{categories}}" default-category="{{1}}" placeholder="Placeholder" />
        </form>
    </module>
</page>

export default XPage({
    data: {
        categories: [{
            label: 'Row Label',
            value: 1
        }]
    },
    show() {}
});

Attributes

参数	说明	类型	可选值	默认值	端	版本
type	类型	String	text/textarea/number/stepper/scan(仅手机可用)/amount	text	PC/Mobile	--
name	名称	String	--	--	PC/Mobile	--
value	绑定值	String/Number	--	--	PC/Mobile	--
maxlength	允许输入的字符长度限制	String	--	--	PC/Mobile	--
showWordLimit	是否显示输入字数统计	Boolean	--	false	PC/Mobile	--
prefix	前缀	String	--	--	PC	--
suffix	后缀	String	--	--	PC/Mobile	--
placeholder	输入框占位文本	String	--	--	PC/Mobile	--
disabled	禁用	Boolean	--	false	PC/Mobile	--
icon	头部图标	String	--	--	PC	--
autosize	优先级高于rows，设置了autosize，rows不起作用	Object	--	null	PC	--
rows	textarea展示的行数/高度	Number	--	5	PC/Mobile	--
categories	类别，下拉框变化后，变化会体现在input的placeholder上边	Array<{ label, value }>	--	--	PC/Mobile	--
categoriesPosition	类别的位置	String	prefix/suffix	prefix	PC	--
default-category	默认类别	any	--	--	PC/Mobile	--
max	当type=Number时 通过步长器可以控制的最大值	Number	--	--	PC/Mobile	--
min	当type=Number时 通过步长器可以控制的最小值	Number	--	--	PC/Mobile	--
step	当type=Number时 通过步长器可以控制的步长	Number	--	--	PC/Mobile	--
precision	当type=stepper时 控制数值精度	Number	--	--	PC/Mobile	--
formatter	格式化类型，未配置format时会默认获取全局配置中对应类型的formatter。目前仅type为amount时有效	String/Object	Formatter	--	PC	--
format	格式化配置，目前仅type为amount时支持，主要针对数字进行展示的格式化	Object		{ prefix: '', separator: ',', decimal: '.', precision: 2, min: undefined, max: undefined }	PC	--
separators	输入框分隔符连接符(仅type=text,scan),使用separators[0]对应的字符分割value，并用separators[1]（默认为','）连接生新的value,完整接入详见	Array/Boolean	--	false	PC	--
not-cabinx-tag	如果需要用原生标签，可以 使用这个参数，编译器将不会对 select 转成 x-select 。注意， 这个标签只在命令行编译阶段生效，而不是运行阶段， 所以，赋值对他是没有用的	--	--	--	--	--

Attributes - Formatter

类型 FormatterString

参数	说明	类型	可选值	默认值	端	版本
amount	金额	String	--	--	PC/Mobile	--
quantity	数量	String	--	--	PC/Mobile	--
unitPrice	单价	String	--	--	PC/Mobile	--
unit	单位(在使用前确认当前系统是否支持)	String	--	--	PC/Mobile	--

类型 FormatterObject

当用有自定义需求时，支持配置为对象，以用户给出format格式配置的优先 { type: FormatterString, ...format }

Events

名称	说明	回调参数	端	版本
changed	值改变后触发	(value)	PC/Mobile	--
blur	失焦	(value)	PC/Mobile	--
show-scan	点击scan icon触发，type='scan'	(value)	Mobile	--
category-changed	多重查询的选项更改后触发	(value)	PC/Mobile	--

Methods

名称	说明	回调参数	端	版本
focus	聚焦	--	PC/Mobile	--
blur	失焦	--	PC/Mobile	--