概述
列表视图，webapp 上最常用的内容结构，采用flex布局，适应各类结构；
按需引入
import Vue from 'vue';
import {CellGroup, CellItem} from 'vue-ydui/dist/lib.rem/cell';
/* 使用px：import {CellGroup, CellItem} from 'vue-ydui/dist/lib.px/cell'; */
Vue.component(CellGroup.name, CellGroup);
Vue.component(CellItem.name, CellItem);代码示例
<template>
<div>
<yd-cell-group>
<yd-cell-item>
<span slot="left">左边内容一</span>
<span slot="right">右边内容一</span>
</yd-cell-item>
<yd-cell-item>
<span slot="left">左边内容二</span>
<span slot="right">右边内容二</span>
</yd-cell-item>
</yd-cell-group>
<yd-cell-group>
<yd-cell-item>
<span slot="left">左边内容一</span>
<span slot="right">右边内容一</span>
</yd-cell-item>
<yd-cell-item>
<span slot="left">左边内容二</span>
<span slot="right">右边内容二</span>
</yd-cell-item>
</yd-cell-group>
</div>
</template>
<script type="text/babel">
export default {
}
</script>使用yd-cell-group将列表分组；
通过slot="left"和slot="right"自定义每行列表左右内容。
<template>
<yd-cell-group>
<yd-cell-item arrow>
<span slot="left">左边内容一</span>
<span slot="right">右边内容一</span>
</yd-cell-item>
</yd-cell-group>
</template>
<script type="text/babel">
export default {
}
</script>
在yd-cell-item上添加:arrow="true"或arrow属性即可添加右向箭头。
<template>
<yd-cell-group>
<yd-cell-item arrow type="a" href="tel:400-888-8888">
<span slot="left">这里是一个A链接</span>
<span slot="right">href不会解析</span>
</yd-cell-item>
<yd-cell-item arrow type="link" href="#">
<span slot="left">这里是一个Router-Link链接</span>
<span slot="right">href会解析为路由</span>
</yd-cell-item>
<yd-cell-item arrow type="label">
<span slot="left">这里是一个Label</span>
</yd-cell-item>
<yd-cell-item arrow>
<span slot="left">这里是一个普通DIV</span>
</yd-cell-item>
</yd-cell-group>
</template>
<script>
export default {
}
</script>生成后的列表共有三种DOM类型<a>,<label>,<div>；
DOM类型<a>有两种实现方式：type="link"和type="a"；
设置yd-cell-item的type属性即可改变列表类型，另外type="link"需额外设置href属性。
<template>
<yd-cell-group>
<yd-cell-item arrow>
<yd-icon slot="icon" name="order" size=".42rem"></yd-icon>
<span slot="left">我的订单</span>
<span slot="right">查看全部订单</span>
</yd-cell-item>
<yd-cell-item arrow>
<img slot="icon" src="http://static.ydcss.com/ydui/img/logo.png">
<span slot="left">图标</span>
<span slot="right">图标是image</span>
</yd-cell-item>
</yd-cell-group>
</template>
<script type="text/babel">
export default {
}
</script>
图标
图标是image
通过slot="icon"自定义图标。
<template>
<yd-cell-group title="这里是一个标题">
<yd-cell-item arrow href="#" type="link">
<yd-icon slot="icon" name="order" size=".42rem"></yd-icon>
<span slot="left">我的订单</span>
<span slot="right">查看全部订单</span>
</yd-cell-item>
<yd-cell-item arrow href="#" type="link">
<yd-icon slot="icon" name="like-outline" size=".42rem"></yd-icon>
<span slot="left">我的收藏</span>
</yd-cell-item>
</yd-cell-group>
<yd-cell-group title="这里是另外一个标题">
<yd-cell-item arrow href="#" type="link">
<yd-icon slot="icon" name="order" size=".42rem"></yd-icon>
<span slot="left">我的订单</span>
<span slot="right">查看全部订单</span>
</yd-cell-item>
<yd-cell-item arrow href="#" type="link">
<yd-icon slot="icon" name="like-outline" size=".42rem"></yd-icon>
<span slot="left">我的收藏</span>
</yd-cell-item>
</yd-cell-group>
</template>
<script type="text/babel">
export default {
}
</script>
设置yd-cell-group的title属性即可。
<template>
<yd-cell-group>
<yd-cell-item>
<span slot="left">手机号：</span>
<input slot="right" type="number" placeholder="请输入手机号">
</yd-cell-item>
<yd-cell-item arrow type="label">
<select slot="right">
<option value="">支付方式</option>
<option value="1">支付宝</option>
<option value="2">微信</option>
<option value="3">财付通</option>
</select>
</yd-cell-item>
<yd-cell-item arrow type="label">
<span slot="left">性别：</span>
<select slot="right">
<option value="">请选择性别</option>
<option value="1">男</option>
<option value="2">女</option>
<option value="3">未知</option>
</select>
</yd-cell-item>
</yd-cell-group>
</template>
<script type="text/babel">
export default {
}
</script>
使用slot="right"定义内容即可。
<template>
<yd-cell-group title="多选">
<yd-cell-item type="checkbox">
<span slot="left">多选一</span>
<input slot="right" type="checkbox" value="Han MeiMei" v-model="checkedNames"/>
</yd-cell-item>
<yd-cell-item type="checkbox">
<span slot="left">多选二</span>
<input slot="right" type="checkbox" value="Li Lei" v-model="checkedNames"/>
</yd-cell-item>
<yd-cell-item type="checkbox">
<span slot="left">多选三</span>
<input slot="right" type="checkbox" value="Jim Green" v-model="checkedNames"/>
</yd-cell-item>
<yd-cell-item>
<span slot="left">选中的值：</span>
<span slot="right">{{checkedNames}}</span>
</yd-cell-item>
</yd-cell-group>
</template>
<script type="text/babel">
export default {
data() {
return {
checkedNames: ['Han MeiMei']
}
}
}
</script>
设置yd-cell-item的type属性为checkbox即可。
<template>
<yd-cell-group title="单选">
<yd-cell-item type="radio">
<span slot="left">单选一</span>
<input slot="right" type="radio" value="Lili" v-model="picked"/>
</yd-cell-item>
<yd-cell-item type="radio">
<span slot="left">单选二</span>
<input slot="right" type="radio" value="Lucy" v-model="picked"/>
</yd-cell-item>
<yd-cell-item>
<span slot="left">选中的值：</span>
<span slot="right">{{picked}}</span>
</yd-cell-item>
</yd-cell-group>
</template>
<script type="text/babel">
export default {
data() {
return {
picked: 'Lucy'
}
}
}
</script>
设置yd-cell-item的type属性为radio即可。
<template>
<yd-cell-group>
<yd-cell-item type="label">
<div slot="left">设为默认地址 - {{ydswitch}}</div>
<yd-switch slot="right" v-model="ydswitch"></yd-switch>
</yd-cell-item>
</yd-cell-group>
</template>
<script type="text/babel">
export default {
data() {
return {
ydswitch: false
}
}
}
</script>
设为默认地址 - {{ydswitch}}
前提已经导入并注册yd-switch组件。
<template>
<yd-cell-group title="文本域">
<yd-cell-item>
<yd-textarea slot="right" placeholder="请输入您的银行卡卡号和密码" maxlength="100"></yd-textarea>
</yd-cell-item>
</yd-cell-group>
</template>
<script type="text/babel">
export default {
}
</script>需额外引入 yd-textarea 组件，具体使用请看