1.组件使用VUE语法的核心点

如果使用vue语法写组件，html中外层必须套一个<div>，等价于vue2.x中的<template>
在组件初始化方法init中，使用vbi.package.vue.creat(this, {})激活vue模式
bi组件中的this.data.vm = vue实例中的this
vue实例中的this.$com = bi组件的this

2.操作步骤

（1）进入自主分析 -> 组件库功能；
（2）点击右侧【新建组件】，进入组件开发界面；
（3）系统会给出组件样例模板，其中每个组件分为三个代码块：

2.1 HTML讲解

外层DOM必须保证有一个类名（作为约束样式的条件）

示例代码如下：

<!-- 如果是vue语法写组件，外层必须套一个<div> 等价于vue2.x中的<template>-->
<div class="com-demo">
  <div>
    <div style="height:30px;line-height:30px;">这是一个示例组件</div>
    <el-card class="box-card">
      <div slot="header" class="clear">
        <span>卡片名称</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="$com.method.btnClick">操作按钮</el-button>
      </div>
      <div v-for="(o,index) in content_list.value.list" :key="index" class="text item"
        :style="{color:text_color.value}">
        {{'列表内容：' + o + value_a }}
      </div>
    </el-card>
  </div>
</div>

2.2 Javascript讲解

组件对象详解：

Name：对象，定义组件名字，英文名、中文名。
Method：对象，定义组件事件（方法）的实现，支持使用ES6语法。
Custom：对象，定义组件自定义暴露到属性面板进行可视化属性。

组件编辑器支持以下属性编辑器类型（type）：

json	json编辑器
list	列表编辑器：object标识新增列表元素时的每个对象数据结构
text	文本编辑器
disabledText	只读文本
textarea	多行文本编辑器
font	字体编辑器
size	尺寸编辑器，支持px、%、calc三种单位
borderRadius	边框圆角编辑器
range	数字可选范围编辑器
offset	偏移编辑器
postion	对齐编辑器
padding	内距编辑器
border	边框编辑器
margin	边距编辑器
borderAdvanced	高级边框编辑器
boxShadow	容器阴影编辑器
image	图片选择器
file	文件选择器
slider	滑块编辑器
icon	图标选择器
boolean	开关
color	颜色拾取
colorGraident	渐变拾取
colorSets	颜色集选择器
select	单选
svgData	svg编辑器
multiselect	多选
dialogSelect	弹窗选择器

Style：对象，定义组件全局样式，等价于JS中的Style定义，可暴露到属性面板进行可视化编辑。
Binds：对象，定义组件数据模型绑定时的动作约束。（count定义该处可绑定字段数，不写则不限制）

示例代码如下：

return {
  name: {
    value: 'com-demo',
    CN: '示例组件',
  },
  method: {
    NFDW: function () {},
    init: function () {
      console.log('this指向：', this);
      vbi.package.vue.creat(this, {
        computed: {
          value_a: function () {
            return '--';
          },
        },
      });
    },
    btnClick: function () {
      alert('点击按钮事件');
    },
    click: function () {
      //这事组件默认的整体组件点击产生的事件
    },
  },
  attribute: {
    class: '',
  },
  // 暴露到界面的可编辑属性
  custom: {
    text_color: {
      value: '',
      type: 'color',
      name: '文字颜色',
    },
    content_list: {
      name: '自定结构',
      type: 'json',
      value: {
        list: ['text1', 'text2', 'text3', 'text4'],
      },
    },
  },
  // 暴露到界面的可编辑行内样式
  style: {
    width: '100%',
    height: '100%',
  },
  // 绑定面板定义 如果行、列、值字段绑定个数不设限制则直接移除count属性即可
  binds: {
    rows: {
      display: true,
      label: '行',
      info: '',
    },
    columns: {
      display: false,
      label: '列',
      info: '',
    },
    values: {
      display: true,
      label: '值',
      info: '',
    },
    wheres: {
      display: true,
      info: '',
    },
    orders: {
      display: true,
      info: '',
    },
    rowCount: {
      display: true,
      info: '',
    },
    options: {
      display: true,
      info: '',
    },
  },
  // 不支持IE9属性 默认false支持 true不支持
  nIE: false,
};

2.3 Css讲解

支持SASS、原生写法，加入前缀（示例：com-demo）限制作用域：

示例代码如下：

.com-demo {
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.com-demo .box-card {
  width: 100%;
  height: calc(100% - 30px);
}
.com-demo .box-card .el-card__body {
  height: calc(100% - 100px);
}

.com-demo .clear:before,
.com-demo .clear:after {
  display: table;
  content: '';
}
.com-demo .clear:after {
  clear: both;
}

.com-demo .text {
  font-size: 14px;
}
.com-demo .item {
  margin-bottom: 18px;
}