§ Input 输入框
§ fox-text 文本框
§ HTML
§ 基本用法
<fox-group no="1" title="基本用法" color="#e60012" column="3">
<fox-text v-model="val" placeholder="请输入">文本框</fox-text>
<fox-text v-model="val2" placeholder="请输入" unit="个">单位</fox-text>
<fox-text v-model="val3" placeholder="请输入" :readonly="true">只读</fox-text>
<fox-text v-model="val4" placeholder="请输入" tip="我是提示">提示</fox-text>
<fox-text v-model="val5" placeholder="请输入" :maxlength="5">最大长度5</fox-text>
<fox-text v-model="val6" placeholder="请输入" speech="true">语音支持</fox-text>
</fox-group>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
§ 校验+跨列
<fox-group no="2" title="校验+跨列" color="#e60012" column="3">
<fox-text v-model="val7" placeholder="请输入" require>必输</fox-text>
<fox-text v-model="val8" placeholder="请输入" require email>邮件</fox-text>
<fox-text v-model="val9" placeholder="请输入" require url>URL</fox-text>
<fox-text v-model="val10" placeholder="请输入" require number span="2">数字</fox-text>
</fox-group>
1
2
3
4
5
6
2
3
4
5
6
§ API
§ Props
组件支持以下属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| label | 标签名 | String | — |
| tip | 提示 | String | — |
| placeholder | 输入提示 | String | — |
| maxlength | 最大长度 | Number/String | — |
| readonly | 是否只读 | Boolean | false |
| disabled | 是否可用 | Boolean | false |
| unit | 单位 | String | — |
| speech | 语音输入支持 | Boolean/String | false |
| span | 跨列 | Number/String | 1 |
| value/v-model | 输入值 | String | — |
| icon | 图标 | String | — |
§ Event
支持以下事件:
| 事件 | 说明 |
|---|---|
| change | 输入改变 |
| focus | 获取焦点 |
| blur | 失去焦点 |
| action | 点击icon图标 |
§ Slots
支持以下插槽
| 名称 | 说明 |
|---|---|
| default | 标签名 |
§ fox-text-icon 带图标的文本框
§ HTML
§ 基本用法
<fox-group no="1" title="基本用法" color="#e60012" column="2">
<fox-text-icon icon="iconfont icon-my-custom-full icon-tupian"
v-model="val" placeholder="请输入" @action="onAction">有Icon</fox-text-icon>
<fox-text-icon v-model="val2" placeholder="请输入" >无Icon</fox-text-icon>
</fox-group>
1
2
3
4
5
2
3
4
5
§ API
§ Props
组件支持以下属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| label | 标签名 | String | — |
| tip | 提示 | String | — |
| placeholder | 输入提示 | String | — |
| maxlength | 最大长度 | Number/String | — |
| readonly | 是否只读 | Boolean | false |
| disabled | 是否可用 | Boolean | false |
| unit | 单位 | String | — |
| speech | 语音输入支持 | Boolean/String | false |
| span | 跨列 | Number/String | 1 |
| value/v-model | 输入值 | String | — |
| icon | 图标 | String | — |
§ Event
支持以下事件:
| 事件 | 说明 |
|---|---|
| change | 输入改变 |
| focus | 获取焦点 |
| blur | 失去焦点 |
| action | 点击icon图标 |
§ Slots
支持以下插槽
| 名称 | 说明 |
|---|---|
| default | 标签名 |
§ fox-money 金额框
§ HTML
§ 基本用法
<fox-group no="1" column="3" title="金额框例子">
<fox-money placeholder="请输入金额" v-model="money_val" :auto-padding="false" unit="元">金额框</fox-money>
<fox-money placeholder="请输入金额" v-model="money_val2" :decimal-length="2" :auto-padding="false" unit="万元">金额框2</fox-money>
<fox-money placeholder="请输入金额" v-model="money_val3" :decimal-length="4" :auto-padding="true" unit="百万元">金额框3</fox-money>
</fox-group>
1
2
3
4
5
2
3
4
5
§ API
§ Props
组件支持以下属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| label | 标签名 | String | — |
| tip | 提示 | String | — |
| placeholder | 输入提示 | String | — |
| maxlength | 最大长度 | Number/String | — |
| readonly | 是否只读 | Boolean | false |
| disabled | 是否可用 | Boolean | false |
| unit | 单位 | String | — |
| rates | 换算汇率 | Number | 1 |
| decimal-length | 小数点数量 | Number | 0 |
| autoPadding | 是否自动填充小数位 | Boolean | true |
| span | 跨列 | Number/String | 1 |
| value/v-model | 输入值 | String | — |
§ Event
支持以下事件:
| 事件 | 说明 |
|---|---|
| change | 输入改变 |
| focus | 获取焦点 |
| blur | 失去焦点 |
§ Slots
支持以下插槽
| 名称 | 说明 |
|---|---|
| default | 标签名 |
§ fox-number 数字框
§ HTML
§ 基本用法
<fox-group no="1" column="3" title="数字框例子">
<fox-number placeholder="请输入数字" v-model="num">数字框</fox-number>
</fox-group>
1
2
3
2
3
§ API
§ Props
组件支持以下属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| label | 标签名 | String | — |
| tip | 提示 | String | — |
| placeholder | 输入提示 | String | — |
| readonly | 是否只读 | Boolean | false |
| disabled | 是否可用 | Boolean | false |
| decimal-length | 小数长度 | Number | 0 |
| unit | 单位 | String | — |
| span | 跨列 | Number/String | 1 |
| value/v-model | 输入值 | String | — |
| pattern | 为了解决ios下无法限制数字输入问题 | String | [0-9]* |
§ Event
支持以下事件:
| 事件 | 说明 |
|---|---|
| change | 输入改变 |
| focus | 获取焦点 |
| blur | 失去焦点 |
§ Slots
支持以下插槽
| 名称 | 说明 |
|---|---|
| default | 标签名 |
§ fox-password 密码框
§ HTML
§ 基本用法
<fox-group no="1" column="3" title="密码框例子">
<fox-password v-model="pwd">密码框</fox-password>
</fox-group>
1
2
3
2
3
§ API
§ Props
组件支持以下属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| label | 标签名 | String | — |
| tip | 提示 | String | — |
| placeholder | 输入提示 | String | — |
| maxlength | 最大长度 | Number/String | — |
| readonly | 是否只读 | Boolean | false |
| disabled | 是否可用 | Boolean | false |
| unit | 单位 | String | — |
| span | 跨列 | Number/String | 1 |
| value/v-model | 输入值 | String | — |
§ Event
支持以下事件:
| 事件 | 说明 |
|---|---|
| change | 输入改变 |
| focus | 获取焦点 |
| blur | 失去焦点 |
| action | 点击icon图标 |
§ Slots
支持以下插槽
| 名称 | 说明 |
|---|---|
| default | 标签名 |
§ fox-textarea 多行文本框
§ HTML
§ 基本用法
<fox-group no="1" column="1" title="多行文本框">
<fox-textarea v-model="val" required>多行文本框</fox-textarea>
</fox-group>
1
2
3
2
3
§ API
§ Props
组件支持以下属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| label | 标签名 | String | — |
| tip | 提示 | String | — |
| rows | 行 | Number | — |
| cols | 列 | Number | — |
| placeholder | 输入提示 | String | — |
| maxlength | 最大长度 | Number/String | — |
| readonly | 是否只读 | Boolean | false |
| disabled | 是否可用 | Boolean | false |
| speech | 语音输入支持 | Boolean/String | false |
| span | 跨列 | Number/String | 1 |
| value/v-model | 输入值 | String | — |
§ Event
支持以下事件:
| 事件 | 说明 |
|---|---|
| change | 输入改变 |
| focus | 获取焦点 |
| blur | 失去焦点 |
§ Slots
支持以下插槽
| 名称 | 说明 |
|---|---|
| default | 标签名 |