PushBar 列表展示

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

最新组件修改：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>

FAQ

关于此文档暂时还没有FAQ

有用(0) 我要提问

开放平台

天猫精灵IoT开放平台

PushBar 列表展示

参数

Event

使用示例

FAQ