Form 表单

建议配合 xm-cell-group 和 xm-cell-item 一起使用

input

基础用法

使用type、name、max、value、readonly、disabled、autocomplete和placeholder属性来定义 Input 的样式。

  1. <xm-cell-group>
  2.     <xm-cell-item>
  3.         <span slot="left">用户名：</span>
  4.         <xm-input slot="right" v-model="value1" name="name1" max="10" placeholder="请输入用户名" @blur="inputAction1" @focus="inputAction2"></xm-input>
  5.     </xm-cell-item>
  6.     <xm-cell-item>
  7.         <span slot="left">密  码：</span>
  8.         <xm-input slot="right" type="password" v-model="value1" placeholder="请输入密码"></xm-input>
  9.     </xm-cell-item>
  10.     <xm-cell-item>
  11.         <span slot="leftIcon" class="xm__icon--phone"></span>
  12.         <xm-input slot="right" type="tel" v-model="value1" placeholder="请输入手机号"></xm-input>
  13.         <xm-button slot="right" type="warning" class="btn__block" style="padding: 6px;width: 120px;font-size: 12px;">获取验证码</xm-button>
  14.     </xm-cell-item>
  15.     <xm-cell-item>
  16.         <xm-input slot="right" :value="value1" placeholder="这里是readonly" readonly></xm-input>
  17.         <span slot="rightIcon" class="xm__icon--delete"></span>
  18.     </xm-cell-item>
  19.     <xm-cell-item>
  20.         <xm-input slot="right" :value="value1" placeholder="这里是disabled"   disabled></xm-input>
  21.         <span slot="rightIcon" class="xm__icon--delete"></span>
  22.     </xm-cell-item>
  23. </xm-cell-group>
属性
参数 说明 类型 可选值 默认值
type 设置类型 String text, password, email, number, tel, datetime-local, date, time text
name 设置input name String — —
max 设置maxlength String — —
value 绑定值 String — —
readonly 是否readonly Boolean — false
disabled 是否disabled Boolean — false
autocomplete 是否autocomplete Boolean — off
placeholder 设置placeholder String — —
API
参数 说明 类型 可选值 默认值
blur 失焦方法 Function — —
focus 聚焦方法 Function — —
input 输入方法 Function — —

textarea

基础用法

有placeholder、value、readonly、disabled和max属性

  1. <xm-cell-group>
  2.     <xm-cell-item>
  3.         <xm-textarea slot="right" placeholder="请输入留言，50字以内" :value="value" @input="textareaAction" max="50"></xm-textarea>
  4.     </xm-cell-item>
  5. </xm-cell-group>
属性
参数 说明 类型 可选值 默认值
placeholder 设置placeholder String — —
value 绑定值 String — —
max 设置maxlength String — —
readonly 是否readonly Boolean — false
disabled 是否disabled Boolean — false
API
参数 说明 类型 可选值 默认值
input 输入方法 Function — —

select

基础用法

有data和right属性

  1. <xm-cell-group>
  2.     <xm-cell-item>
  3.         <xm-select slot="right" :data="selectList" @change="selectAction" v-model="curSelected"></xm-select>
  4.         <span slot="rightIcon" class="xm__icon--right"></span>
  5.     </xm-cell-item>
  6.     <xm-cell-item>
  7.         <span slot="left">出行方式</span>
  8.         <xm-select slot="right" right :data="selectList"></xm-select>
  9.         <span slot="rightIcon" class="xm__icon--right"></span>
  10.     </xm-cell-item>
  11. </xm-cell-group>
属性
参数 说明 类型 可选值 默认值
data 传入的option数组 Array — —
right 设置居右显示 Boolean — false
disabled 设置不可选 Boolean — false
API
参数 说明 类型 可选值 默认值
change select改变时的方法 Function — —

switch

checkbox的另一种表现，有value属性

  1. <xm-cell-group>
  2.     <xm-cell-item>
  3.         <span slot="left">是否保存</span>
  4.         <xm-switch slot="right" value="switch" @input="switchAction"></xm-switch>
  5.     </xm-cell-item>
  6. </xm-cell-group>
属性
参数 说明 类型 可选值 默认值
value 绑定值 String — —
API
参数 说明 类型 可选值 默认值
input 输入方法 Function — —

radio

基础用法

需配合 xm-radio-group 使用，通过color属性改变 √ 颜色，disabled禁止选中,hor为水平单选框，默认不填为垂直

  1. <xm-radio-group v-model="radio" color="#4cd864">
  2.     <xm-radio value="巴士"></xm-radio>
  3.     <xm-radio value="火车"></xm-radio>
  4.     <xm-radio value="飞机" disabled>飞机--disabled</xm-radio>
  5.     <xm-radio value="单车">单车</xm-radio>
  6. </xm-radio-group>
  8. export default {
  9.   data () {
  10.     return {
  11.       radio: '巴士'
  12.     }
  13.   }
  14. }
属性
参数 说明 类型 可选值 默认值
color 设置颜色 String — —
disabled 禁止选中 Boolean — false
hor 水平显示 Boolean — false

checkbox

基础用法

需配合 xm-checkbox-group 使用，通过color属性改变 √ 颜色，disabled禁止选中

  1. <xm-checkbox-group v-model="checkbox" color="#4cd864">
  2.     <xm-checkbox value="1">巴士</xm-checkbox>
  3.     <xm-checkbox value="2">火车</xm-checkbox>
  4.     <xm-checkbox value="3" disabled>飞机--disabled</xm-checkbox>
  5.     <xm-checkbox value="4">单车</xm-checkbox>
  6. </xm-checkbox-group>
  8. export default {
  9.   data () {
  10.     return {
  11.       checkbox: ['1', '4']
  12.     }
  13.   }
  14. }
属性
参数 说明 类型 可选值 默认值
color 设置颜色 String — —
disabled 禁止选中 Boolean — false

原文: https://monw3c.github.io/xmui/#/components/form