ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
### List 列表 列表组件,组件名:`ts-list`、`ts-list-item`。 **使用方式:** 在`script`中引用组件 ~~~ import tsList from "./components/teaset/components/ts-list/ts-list.vue"; import tsListItem from "./components/teaset/components/ts-list/ts-list-item.vue"; export default { components: {tsList ,tsListItem } } ~~~ List 一般用法 ~~~ <ts-list> <ts-list-item title="标题文字" show-arrow="false"></ts-list-item> <ts-list-item title="标题文字"></ts-list-item> <ts-list-item title="标题文字" :show-badge="true" badge-text="12"></ts-list-item> <ts-list-item title="禁用状态" :disabled="true" :show-badge="true" badge-text="12"></ts-list-item> </ts-list> ~~~ 带描述信息 ~~~ <ts-list> <ts-list-item title="标题文字" note="描述信息"></ts-list-item> <ts-list-item title="标题文字" note="描述信息" :show-badge="true" badge-text="12"></ts-list-item> </ts-list> ~~~ 包含图片 ~~~ <ts-list> <ts-list-item title="标题文字" thumb="http://img-cdn-qiniu.dcloud.net.cn/new-page/hx.png"></ts-list-item> </ts-list> ~~~ 包含图标 ~~~ <ts-list> <ts-list-item title="标题文字" show-extra-icon="true" :extra-icon="{color: '#4cd964',size: '22',type: 'spinner'}"> </ts-list-item> </ts-list> ~~~ 显示Switch ~~~ <ts-list> <ts-list-item title="标题文字" show-switch="true" show-arrow="false"></ts-list-item> </ts-list> ~~~ **tsListItem 属性说明:** | 属性名 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | title | String | \- | 标题 | | note | String | \- | 描述 | | disabled | Boolean | false | 是否禁用 | | show-arrow | Boolean | true | 是否显示箭头图标 | | show-badge | Boolean | false | 是否显示数字角标 | | badge-text | String | \- | 数字角标内容 | | badge-type | String | \- | 数字角标类型,参考[Badge 数字角标](https://ext.dcloud.net.cn/plugin?id=21) | | show-switch | Boolean | false | 是否显示Switch | | switch-checked | Boolean | false | Switch是否被选中 | | show-extra-icon | Boolean | false | 左侧是否显示扩展图标 | | extra-icon | Object | \- | 扩展图标参数,格式为`{color: '#4cd964',size: '22',type: 'spinner'}`,参考[Iocn 图标](https://ext.dcloud.net.cn/plugin?id=28) | | thumb | String | \- | 左侧缩略图,若thumb有值,则不会显示扩展图标 | **tsListItem 事件说明:** | 事件称名 | 说明 | 返回参数 | | --- | --- | --- | | click | 点击 tsListItem 触发事件 | \- | | switchChange | 点击切换 Switch 时触发 | {value:checked} |