vue-metrics-config

基于 vue 的指标配置组件

Install

npm i vue-metrics-config

Dependency

// 该组件依赖 element-ui，需要先组册 element-ui 相关组件
import { Dialog, Loading, Button, Input } from 'element-ui'

[Dialog, Loading, Button, Input].forEach(component => Vue.use(component))

// or
import ElementUI from 'element-ui'
Vue.use(ElementUI)

Props

属性	类型	默认值	描述
groups	Array	[]	指标分组
selected-list	Array	[]	选中的指标
searchable	Boolean	false	是否可搜索指标，默认不可搜索
max-select-count	Number	无	最多可以选中几个指标，如果不设置，将不限制指标选中的数量
tip	String	无	右上角的提示语
confirm-btn-disabled	Boolean	false	确认按钮是否可以点击
title	String	指标配置	Dialog 标题
size	String	small	Dialog 大小，参见 element-dialog
top	String	50px	Dialog 距顶部距离

Evnets

事件名	描述	回调参数
change	点击确认按钮时触发	selectedList 选中的指标数组
temp-change	选中项改变时触发（包括拖拽排序），不要在这个事件中改变 selectedList, 会导致选中状态不同步，改变 selectedList 请在 change 事件中，可以在这个事件中对其他状态进行更改，如确定按钮的「可点击」状态	selectedList 选中的指标数组

groups && selected-list 结构

const selectedList = [{ id: '订单量', name: '订单量' }, { id: '交易额', name: '交易额' }, { id: '营业商户数', name: '营业商户数' }]
 
const groups = [{
  // group 信息，需要包含 id 和 name
  "id": "交易",
  "name": "交易",
  
  // items 里面每一项都是指标
  // 指标也都包含 id 和 name 属性
  "items": [{
    "id": "订单量",
    "name": "订单量"
  }, {
    "id": "交易额",
    "name": "交易额"
  }, {
    "id": "优惠力度",
    "name": "优惠力度"
  }, {
    "id": "饿了么补贴金额",
    "name": "饿了么补贴金额"
  }, {
    "id": "饿了么补贴力度",
    "name": "饿了么补贴力度"
  }, {
    "id": "商家自营销金额",
    "name": "商家自营销金额"
  }, {
    "id": "商家自营销力度",
    "name": "商家自营销力度"
  }, {
    "id": "单均价",
    "name": "单均价"
  }]
}]

Usage

<template>
  <div>
    <dt-metrics-config
      v-model="visible"
      searchable
      :max-select-count="4"
      :groups="groups"
      :selected-list="selectedList"
      @change="selectedList = arguments[0]">
    </dt-metrics-config>
    <button @click="visible = true">打开</button>
  </div>
</template>
 
<script>
import DtMetricsConfig from 'vue-metrics-config'
const GROUPS = [{
  "id": "交易",
  "name": "交易",
  "items": [{
    "id": "订单量",
    "name": "订单量"
  }, {
    "id": "交易额",
    "name": "交易额"
  }]
}, {
  "id": "商户",
  "name": "商户",
  "items": [{
    "id": "营业商户数",
    "name": "营业商户数"
  }, {
    "id": "有交易商户数",
    "name": "有交易商户数"
  }]
}, {
  "id": "流量",
  "name": "流量",
  "items": [{
    "id": "DAU",
    "name": "DAU"
  }, {
    "id": "转化率",
    "name": "转化率"
  }]
}, {
  "id": "用户",
  "name": "用户",
  "items": [{
    "id": "新客数",
    "name": "新客数"
  }, {
    "id": "用户数",
    "name": "用户数"
  }]
}, {
  "id": "物流",
  "name": "物流",
  "items": [{
    "id": "推单数",
    "name": "推单数"
  }, {
    "id": "接单数",
    "name": "接单数"
  }]
}]
 
export default {
  name: 'basic',
 
  components: {
    DtMetricsConfig
  },
 
  data () {
    this.groups = GROUPS
    return {
      visible: false,
      selectedList: [{ id: '订单量', name: '订单量' }, { id: '转化率', name: '转化率' }, { id: '推单数', name: '推单数' }]
    }
  }
}
</script>