vw-list-item
更新时间：
列表选项可以作为列表的子项，当列表的每一项不同时可以用列表选项拼接实现。 list-item 代表一类组件，命名上我们用 li 缩写代替 list-item
参考当前需求，将列表选项分为以下几种：
1.vw-li:最简单的列表子项，只有标题（itemData 必填属性为 title）
2.vw-li-arrow:右侧带箭头的列表子项（itemData 必填属性为 title）
3.vw-li-des:带辅助文本的列表子项（itemData 必填属性为 title、des）
4.vw-li-des-arrow:带辅助文本和箭头的列表子项（itemData 必填属性为 title、des）
5.vw-li-des-sw:带辅助文本和开关的列表子项（itemData 必填属性为 title、des、checked）
6.vw-li-icon:带图标的列表子项（itemData 必填属性为 icon、title）
7.vw-li-icon-arrow:带图标和箭头的列表子项（itemData 必填属性为 icon、title）
8.vw-li-icon-des-arrow:带图标、描述文本和箭头的列表子项（itemData 必填属性为 icon、des、title）
9.vw-li-icon-des-sw:带图标、描述文本和开关的列表子项（itemData 必填属性为 icon、des、title、checked）
10.vw-li-icon-sw:带图标和开关的列表子项（itemData 必填属性为 icon、title、checked）
10.vw-li-sw:带开关的列表子项（itemData 必填属性为 title、checked）
11.vw-li-lit:小标题列表子项（itemData 必填属性为 title）
12.vw-li-lit-icon:小标题带图标的列表子项（itemData 必填属性为 title、icon）
13.vw-li-radio:带标题和单选的列表子项（itemData 必填属性为 title、checked）
注意：带 radio 的列表子项，在选项变化时需要同时更新其他选项绑定的的 checked 标志位，否则会出现诸多显示问题
属性
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| itemData | <Object> |
- | 是 | 列表子项对象 |
| disabled | <boolean> |
false | 否 | 列表选项是否为禁用状态 |
| remind | <boolean> |
false | 否 | 是否显示红点（只有 vw-li-icon-arrow、vw-li-arrow 支持） |
| widgetDisabled | <boolean> |
false | 否 | 列表右侧有 switch/radio/checkbox 时，用来仅禁用右侧的部件但文字不会置灰 |
itemData 需要填哪些必填属性根据类型确定，可以包含的属性有：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| icon | <string> |
- | 根据 list 类型确定 | 列表选项的图标路径 |
| title | <string> |
- | 是 | 列表选项的标题 |
| des | <string> |
- | 根据 list 类型确定 | 列表选项的辅助文本 |
| checked | <boolean> |
true | 根据 list 类型确定 | 列表选项的 switch/radio/checkbox 开关状态 |
事件
| 名称 | 回调参数 | 说明 |
|---|---|---|
| itemclick | - | 列表选项点击事件 |
| widgetclick | { event} | 右边小组件点击事件（只在有 checkbox、radio、switch 组件的时候有此参数，event 和对应的原生组件点击事件一致） |
| animationend | 单选点击事件（目前只有带 radio 的 list-item 有） |
vw-list-item 用法
vw-list
<template>
<list>
<list-item type="liIconArrow">
<vw-li-icon-arrow item-data="{{listArray[0]}}" onitemclick="handleClick"></vw-li-icon-arrow>
</list-item>
<list-item type="liIconSw">
<vw-li-icon-sw item-data="{{listArray[1]}}" onwidgetclick="handleWidgetClick"></vw-li-icon-sw>
</list-item>
<list-item type="liIcon">
<vw-li-icon item-data="{{listArray[2]}}"></vw-li-icon>
</list-item>
<list-item type="liIconDesArr">
<vw-li-icon-des-arrow item-data="{{listArray[3]}}"></vw-li-icon-des-arrow>
</list-item>
<list-item type="liIconDesSw">
<vw-li-icon-des-sw
item-data="{{listArray[4]}}"
onwidgetclick="handleWidgetClick"
></vw-li-icon-des-sw>
</list-item>
<list-item type="li">
<vw-li item-data="{{listArray[5]}}"></vw-li>
</list-item>
<list-item type="liArr">
<vw-li-arrow item-data="{{listArray[6]}}"></vw-li-arrow>
</list-item>
<list-item type="liDes">
<vw-li-des item-data="{{listArray[7]}}"></vw-li-des>
</list-item>
<list-item type="liDesArr">
<vw-li-des-arrow item-data="{{listArray[8]}}"></vw-li-des-arrow>
</list-item>
<list-item type="liSw">
<vw-li-sw item-data="{{listArray[9]}}" onwidgetclick="handleWidgetClick"></vw-li-sw>
</list-item>
<list-item type="liDesSw">
<vw-li-des-sw item-data="{{listArray[10]}}" onwidgetclick="handleWidgetClick"></vw-li-des-sw>
</list-item>
<list-item type="liLit">
<vw-li-lit item-data="{{listArray[11]}}"></vw-li-lit>
</list-item>
<list-item type="liLitIcon">
<vw-li-lit-icon item-data="{{listArray[12]}}"></vw-li-lit-icon>
</list-item>
<list-item type="liRadio">
<vw-li-radio item-data="{{listArray[13]}}"></vw-li-radio>
</list-item>
</list>
</template>
<script>
export default {
data: {
listArray: [
{
icon: '/assets/images/logo.png',
title: '图标+标题+箭头',
},
{
icon: '/assets/images/logo.png',
title: '图标+标题+开关',
checked: true,
},
{
icon: '/assets/images/logo.png',
title: '图标+标题',
},
{
icon: '/assets/images/logo.png',
title: '图标+标题+辅助文本',
des: '辅助文本',
},
{
icon: '/assets/images/logo.png',
title: '图标+标题+辅助文本+开关',
des: '辅助文本超长示例辅助文本超长示例辅助文本超长示例',
checked: true,
},
{
title: '只有标题',
},
{
title: '标题+箭头',
},
{
title: '标题+辅助文本',
des: '辅助文本',
},
{
title: '标题+辅助文本+箭头',
des: '辅助文本',
},
{
title: '标题+开关',
checked: true,
},
{
title: '标题+开关+辅助文本',
des: '辅助文本',
checked: true,
},
{
title: '小标题',
},
{
icon: '/assets/images/logo.png',
title: '小标题+图标',
},
],
},
handleWidgetClick() {},
handleClick() {},
}
</script>