淘宝开放平台

登录
文档中心 > 天猫精灵IoT开放平台

天猫精灵IoT开放平台

PushBar 列表展示

更新时间：2019/06/28 访问次数：2128

最新组件修改：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 点击事件回调 ——

使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<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>

FAQ

关于此文档暂时还没有FAQ
有用(0) 我要提问
返回
顶部