WeUi-Vue使用手册(三)—组件—Cell

in WV手册 with 0 comment

带说明的列表项

<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图片urlStringtrue

带跳转的列表项

<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跳转地址Stringtrue

带说明、跳转的列表项

<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图片urlStringtrue
to跳转地址Stringtrue

带图标、说明、跳转的列表项

<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图片urlStringtrue
to跳转地址Stringtrue

单选列表框

<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数组Arraytrue
values选项value数组Arraytrue-
name选项namestringtrue-
v-model选中项Valuenullfalse

复选列表项

<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选项idStringtrue
name选项nameStringtrue-
label选项textStringtrue-
v-model是否选中Boolentrue

Switch开关

<wv-cells-title>开关</wv-cells-title>
<wv-cells type="form">
  <wv-switch-cell label="标题文字" v-model="switchValue"></wv-switch-cell>
</wv-cells>
参数说明类型必须默认值
label开关显示文字Stringfalse
v-model是否打开Boolentruefalse

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>
参数说明类型必须默认值
typeinput类型Stringfalsetext
label提示文字Stringtrue-
placeholderplaceholderStringfalse-
vcode验证码图片Stringfalse-

文本域

<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最大字节数Numberfalse-
rows行数Numberfalse-
v-model文本内容Stringtrue-

选择

<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后置Boolenfalse-
before前置Boolenfalse-
options选项Arraytrue-
v-model选中项valueStringtrue-
Comments are closed.