vue组件自定义脚本

• 自定义脚本的使得vue组件的灵活度大大加强.
  

vue组件自定义脚本的组件数据交互例子:

普通vue组件

• 脚本支撑lodash 模板 参考:lodash的模板教程
  脚本预设的变量: {cmp: 组件实例}
• this变量等于组件的实例,可以通过该组件实例来实现界面上的数据传递.

一个Vue的button组件的为了让它支持popover 功能 自定义脚本列子:

<template>
 <el-popover
    placement="top-start"
    title="<%= cmp.name%>"
    width="200"
    trigger="hover"
    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
    <%= cmp.getVueHtml() %>
  </el-popover>
</template>
<script>
    let cmp = this;
    export default cmp.getVueConfig()
</script>   

效果图:

一个Vue的ElDescriptions组件的绑定数据源的数据的自定义的脚本

如果继承VueDbCmpBase 的组件还会附带,见VueDbCmpBase的源码:

/**
 * vue自定义模板的参数传递函数 ,子组件可以根据需要定义返回的参数对象.
 * @reutrn 返回脚本的内置参数对象. 默认:组件的实例 {cmp:组件实例,data: 数据源当前行的数据}
 */
doTempleteScriptParams(): object {
    let ds = this.getDataSource();
    let data = {}
    if (ds && ds.getRows().length > 0) {
        data = ds.getCurrentRow().getDatas();
    } else {
        data = {}
    }
    return {
        cmp: this,
        data: data
    }
}

<template>
  <el-radio-group v-model="size">
    <el-radio label="">大型</el-radio>
    <el-radio label="medium">中等</el-radio>
    <el-radio label="small">小型</el-radio>
    <el-radio label="mini">超小</el-radio>
  </el-radio-group>

  <el-descriptions class="margin-top" title="带边框列表" :column="3" :size="size" border>
    <template slot="extra">
      <el-button type="primary" size="small">组件的名称:<%-cmp.name%></el-button>
    </template>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        日期
      </template>
      <%-data.RIQ%>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        名称
      </template>
      <%-data.MINGC%>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        编号
      </template>
      <%-data.BIANH%>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        备注
      </template>
      <el-tag size="small">学校</el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
        联系地址
      </template>
      江苏省苏州市吴中区吴中大道 1188 号
    </el-descriptions-item>
  </el-descriptions>
</template>

<script>
  let cmp = this;
  export default {
    data () {
      return {
        size: ''
      };
    }
  }
</script>

效果图:

参考

• [组件API]http://help.kdayun.com/api/component/modules.html)