weui-vue
带说明的列表项
<wv-cells-title>带说明的列表项</wv-cells-title>
<wv-cells>
<wv-cell>
<span slot="body">标题文字</span>
<span slot="footer">说明文字</span>
</wv-cell>
</wv-cells>
带图标和说明的列表项
<wv-cells-title>带图标、说明的列表项</wv-cells-title>
<wv-cells type="split">
<wv-cell>
<img slot="header" :src="imageUrl" alt="" style="width:20px;margin-right:5px;display:block">
<span slot="body">标题文字</span>
<span slot="footer">说明文字</span>
</wv-cell>
<wv-cell>
<img slot="header" :src="imageUrl" alt="" style="width:20px;margin-right:5px;display:block">
<span slot="body">标题文字</span>
<span slot="footer">说明文字</span>
</wv-cell>
</wv-cells>
| 参数 | 说明 | 类型 | 必须 | 默认值 |
|---|
| src | 图片url | String | true | — |
带跳转的列表项
<wv-cells-title>带跳转的列表项</wv-cells-title>
<wv-cells type="access">
<wv-link-cell to="javascript:;">
<span slot="body">cell standard</span>
<span slot="footer"></span>
</wv-link-cell>
<wv-link-cell to="javascript:;">
<span slot="body">cell standard</span>
<span slot="footer"></span>
</wv-link-cell>
</wv-cells>
| 参数 | 说明 | 类型 | 必须 | 默认值 |
|---|
| to | 跳转地址 | String | true | — |
带说明、跳转的列表项
<wv-cells-title>带说明、跳转的列表项</wv-cells-title>
<wv-cells type="access">
<wv-link-cell to="javascript:;">
<span slot="body">cell standard</span>
<span slot="footer">说明文字</span>
</wv-link-cell>
<wv-link-cell to="javascript:;">
<span slot="body">cell standard</span>
<span slot="footer">说明文字</span>
</wv-link-cell>
</wv-cells>
| 参数 | 说明 | 类型 | 必须 | 默认值 |
|---|
| src | 图片url | String | true | — |
| to | 跳转地址 | String | true | — |
带图标、说明、跳转的列表项
<wv-cells-title>带图标、说明、跳转的列表项</wv-cells-title>
<wv-cells type="access">
<wv-link-cell to="javascript:;">
<img slot="header" :src="imageUrl" alt="" style="width:20px;margin-right:5px;display:block">
<span slot="body">标题</span>
<span slot="footer">说明文字</span>
</wv-link-cell>
<wv-link-cell to="javascript:;">
<img slot="header" :src="imageUrl" alt="" style="width:20px;margin-right:5px;display:block">
<span slot="body">标题</span>
<span slot="footer">说明文字</span>
</wv-link-cell>
</wv-cells>
| 参数 | 说明 | 类型 | 必须 | 默认值 |
|---|
| src | 图片url | String | true | — |
| to | 跳转地址 | String | true | — |
单选列表框
<wv-cells-title>单选列表项</wv-cells-title>
<wv-cells type="radio">
<wv-radio-cell :ids="radioParams.ids" :values="radioParams.values" :labels="radioParams.labels" name="radio" v-model="RadioPicked"
/>
</wv-cells>
| 参数 | 说明 | 类型 | 必须 | 默认值 |
|---|
| ids | 选项id数组 | Array | true | — |
| values | 选项value数组 | Array | true | - |
| name | 选项name | string | true | - |
| v-model | 选中项Value | null | false | — |
复选列表项
<wv-cells-title>复选列表项</wv-cells-title>
<wv-cells type="checkbox">
<wv-checkbox-cell id="checkbox1" name="checkbox" label="复选项目1" v-model="checkboxPicked_1"></wv-checkbox-cell>
<wv-checkbox-cell id="checkbox2" name="checkbox" label="复选项目2" v-model="checkboxPicked_2"></wv-checkbox-cell>
</wv-cells>
| 参数 | 说明 | 类型 | 必须 | 默认值 |
|---|
| id | 选项id | String | true | — |
| name | 选项name | String | true | - |
| label | 选项text | String | true | - |
| v-model | 是否选中 | Boolen | true | — |
Switch开关
<wv-cells-title>开关</wv-cells-title>
<wv-cells type="form">
<wv-switch-cell label="标题文字" v-model="switchValue"></wv-switch-cell>
</wv-cells>
| 参数 | 说明 | 类型 | 必须 | 默认值 |
|---|
| label | 开关显示文字 | String | false | — |
| v-model | 是否打开 | Boolen | true | false |
Input
<wv-cells-title>表单</wv-cells-title>
<wv-cells type="form">
<wv-input-cell type="number" label="qq" placeholder="请输入qq号" v-model="inputQqValue" />
<wv-input-cell type="text" label="验证码" placeholder="请输入验证码" :vcode="vcode"></wv-input-cell>
<wv-input-cell type="number" label="银行卡" placeholder="请输入银行卡号"></wv-input-cell>
</wv-cells>
| 参数 | 说明 | 类型 | 必须 | 默认值 |
|---|
| type | input类型 | String | false | text |
| label | 提示文字 | String | true | - |
| placeholder | placeholder | String | false | - |
| vcode | 验证码图片 | String | false | - |
文本域
<wv-cells-title>文本域</wv-cells-title>
<wv-cells type="form">
<wv-input-cell type="textarea" placeholder="请输入评论" :maxlength="200" :rows="textareaRows" name="textarea" v-model="textareaValue"></wv-input-cell>
</wv-cells>
| 参数 | 说明 | 类型 | 必须 | 默认值 |
|---|
| maxlength | 最大字节数 | Number | false | - |
| rows | 行数 | Number | false | - |
| v-model | 文本内容 | String | true | - |
选择
<wv-cells-title>选择</wv-cells-title>
<wv-cells type="split">
<wv-select-cell :before="true" :options="areaCodeOptions" v-model="areaSelected">
<wv-cell-input slot="body" type="text" placeholder="请输入号码" v-model="inputPhoneValue">
</wv-cell-input>
</wv-select-cell>
</wv-cells>
<wv-cells-title>选择</wv-cells-title>
<wv-cells type="split">
<wv-select-cell :after="true" :options="nationCodeOptions" v-model="nationCodeSelect">
<label class="weui-label" slot="header">国家/地区</label>
</wv-select-cell>
</wv-cells>
| 参数 | 说明 | 类型 | 必须 | 默认值 |
|---|
| after | 后置 | Boolen | false | - |
| before | 前置 | Boolen | false | - |
| options | 选项 | Array | true | - |
| v-model | 选中项value | String | true | - |
本文由 admin 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Nov 23, 2017 at 11:27 am