2018-09-05 10:30题主

请教大神,如何增加Vue框架下的一些自定义控件

我理解,是在“控件管理”里针对“控件箱”,增加Vue的目录,在这个目录下,再增加“控件条目”
但是如何针对这个新控件条目,来设置对应的“general”、“config”、“Event”的内容?
比如我打算采用Vue的前端框架,增加一个可以自动统计本次网页打开后按钮点击次数的控件:
Vue的写法如下:
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
    data: function () {
       return {
          count: 0
       }
    },
    template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
 
这个希望可以复用的组件,名字是'button-counter',
调用时:
HTML代码:
<div id="components-demo">
      <button-counter></button-counter>
      <button-counter></button-counter>

</div>
 
 
Java Script代码:
  new Vue({ el: '#components-demo' })
2018-09-05 20:19#1
我根据Vue组件的基本属性: new Vue({ el, // 要绑定的 DOM element template, // 要解析的模板,可以是 #id, HTML 或某個 DOM element data, // 要绑定的数据 computed, // 依赖于别的数据计算出来的数据, name = firstName + lastName watch, // 监听方法, 监听到某一数据变化时, 需要做的对应操作 methods, // 定义可以在元件或模板內使用的方法 }) 针对VueButton 定义了以下内容: el: {"type":"string"} template: {"type":"text"} data: {"type":"exp"} computed: {"type":"expBool"} watch: {"type":"string"} props: {"type":"expJson"} methods: {"type":"exp"} script: {"bold":true,"params":["request","response","app"],"type":"js"} 可是后续应该怎么把这些组件属性,对应到Vue的框架模型中呢?
2018-09-06 19:50#2
控件的实现分为3类,
1、前端控件
2、后台控件
3、前后台混合控件
具体可以参考控件箱中的对应前后台控件实现
vue.js控件的实现可以参考百度echarts控件的添加方式

返回开发者社区