感谢您的反馈！
天猫精灵IoT开放平台
PushBar 列表展示
更新时间：2019/06/28
访问次数：1987
最新组件修改：genie-ui 1.2.25 新增 type: radio 和 activeColor type和switch 主色调
参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| type | 类型 | string | ‘’ arrow switch radio | —— |
| disabled | 禁用 | boolean | —— | false |
| check | type为switch时的开关值 | boolean | —— | true |
| data | 展示数据 | object | —— | —— |
| data.title | 列表标题文字 悬在上方 | string | —— | —— |
| data.text | 列表文字 | string | —— | —— |
| data.textColor | 列表文字的颜色 | string | —— | —— |
| data.activeColor | 开关和radio的主颜色 | string | —— | #0082ff |
| data.desc | 右侧描述 | string | —— | —— |
| data.descColor | 右侧描述文字的颜色 | string | —— | —— |
| data.hint | 列表提示文字 落在上方 | string | —— | —— |
Event
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| handClick | 点击事件回调 | —— |
使用示例
<template>
<div class="pushBar">
<push-bar
v-for="(val, key) in list" v-bind:key="key"
:data="val" :type="val.type"
v-on:handClick="handClick"
:check="val.check"
>
</push-bar>
</div>
</template>
<script>
import { PushBar } from 'genie-ui'
export default {
components: {
PushBar
},
data() {
return {
list: [{
title: '标题文案',
text: '最普通的列表',
desc: '98%',
type: ''
}, {
text: '这里有一个小箭头',
desc: '97%',
type: 'arrow'
}, {
check: false,
text: '这里包含了开关',
desc: '96%',
type: 'switch',
clickBack: (val) => {
val.check = !val.check
// this.$store.commit('updateState', [['check', !this.check]])
}
}, {
check: false,
text: '这里包含了radio',
type: 'radio',
activeColor: 'blue',
hint: '提示说明文案',
clickBack: (val) => {
val.check = !val.check
}
}]
}
},
methods: {
// 点击
handClick(val) {
console.log(val, '点击返回数据')
}
}
}
</script>