组件使用

逻辑圈选组件

import BiCrowdTree from "bi-vi-tree-crowd-web";
import "bi-vi-tree-crowd-web/dist/bi-crowd-tree.css";
// import BiCrowdTree from './bi-crowd-tree.vue';
export default {
  name: "Bi",
  components: {
    BiCrowdTree,
  },
  data() {
    return {
      treeValue: {
        isLeafNode: false,
        operate: 'and',
        children: [{
          isLeafNode: true,
          value: {
            labelValue: 2,
            sex: 'ad'
          }
        }, {
          isLeafNode: true,
          value: {
            labelValue: 3,
            sex: 'dashjkh'
          }
        }, {
          isLeafNode: false,
          operate: 'or',
          children: [{
            isLeafNode: true,
            value: {
              labelValue: 4,
              sex: 'djs'
            }
          }]
        }]
      },
      rules: [
        {
          title: '添加节点',
          value: 'node'
        }, {
          title: '添加集合',
          value: 'set'
        }
      ],
    };
  },
  watch: {
    treeValue: {
      deep: true,
      handler: function(newVal, oldVal) {
        console.log(newVal, oldVal)
      }
    }
  },
  methods: {
    add() {
      console.log('添加')
    }
  }
};

<BiCrowdTree
  :value="treeValue"
  :content="{labelValue: 1, sex: '男'}"
  :iconStyle="{size: 14, color: 'red'}"
  :popoerContent="{title: '这是title',content: '这是内容', cancelText: '取消', confirmText: '确定'}"
  lang="en"
  @add="add"
>
  <template v-slot="{contents}">
    <byted-input v-model="contents.labelValue"></byted-input>
    <byted-input v-model="contents.sex"></byted-input>
  </template>
  <template :slot="rule.value" v-for="rule in rules">
    {{rule.title}}
  </template>
  <template slot="setIcon">
    集合
  </template>
  <template slot="nodeIcon">
    节点
  </template>
</BiCrowdTree>

组件属性

|参数|说明|类型|默认值|参数要求| |--|--|--|--|--| |value|该组件输出的逻辑关系值|Oject|无|传参结构{isLeafNode: false,operate: 'and',children:[]}| |content|设置插槽绑定的属性，给自定义的插槽内容进行使用|Object|{}|无| |lang|多语言|String|'cn'|无| |iconStyle|默认icon样式，使用插槽不支持|Object|{size: 14, color: '#C6C6CC'}|size为icon尺寸大小,color为icon颜色| |deep|允许嵌套的层级|Number|3|无| |popoverContent|删除确定弹窗相关文案|Object||title: 标题，content: 内容，cancelText: 取消按钮文案，confirmText：确定按钮文案| |isCRFinalItem|是否允许删除最后一项|Boolean|false|可选值 true/false|

插槽

|插槽名|说明| |--|--| |nodeIcon|删除节点的icon| |setIcon|删除组合icon| |node|节点添加菜单文案| |set|集合添加菜单文案| |default(默认插槽)|节点内容| |and|and按钮| |or|or按钮|

事件

|事件名|事件描述| |--|--| |add|当点击添加事件时触发|