在前一篇介绍了如何实现一个高扩展的在线网页制做平台,推荐先移驾到这里查看如何设计高扩展的在线网页制做平台 这样才知道是啥东西。前一篇文章也提到过咱们一直在计划在合适的时候把项目放出来让你们一块儿用用,提提建议,通过接近1年的不断迭代,以及在公司各个活动的挑战下不断优化,最终以为是时候放出来了。目前仍是有不少要优化的地方,因此也但愿使用者多提供反馈和关注。javascript
都欢迎你们体验和反馈。以及加加 star 什么的。后期的项目源码咱们会放到这个项目。 欢迎你们提早star github.com/ymm-tech/go…html
此次先为你们来介绍下在码良平台如何去对一个组件进行功能扩展。此次咱们作个简单的功能,拖动一个图片,给图篇添加点击事件,而后在点击事件里面进行打点和页面跳转。vue
你能够先去 godspen.ymm56.com/doc/cookboo… 了解下项目里面的团队,项目,页面各自的意思。这里就当你已经看过。咱们建立好了一个页面并进入了编辑界面以下。 java
咱们添加了一段demo2脚本以下,前面的文章咱们介绍过全部添加的脚本其实就是一个标准的vue 对象。对熟悉vue的同窗会很是容易理解和使用。git
return {
props: {
// 这里还能配置不少类型的属性,能够查看文档 http://godspen.ymm56.com/doc/develop/script.html#%E6%B7%BB%E5%8A%A0%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7
url: {
type: String,
editor: {
label: '网页跳转地址',
}
},
},
// 自定义方法的使用详细文档 http://godspen.ymm56.com/doc/develop/script.html#%E6%B7%BB%E5%8A%A0%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%B9%E6%B3%95
editerMethods: {
myjump:{
label:'页面跳转',
params:[]
},
logTrack: {
label: '通用打点',
params: [
{
label: '动做(action)',
desc: '可输入字母、数字、下划线,用以区分打点动做,本页面内需惟一,如 play_music',
type: 'string'
},
{
label: '标签(label)',
desc: '可输入字母、数字、下划线,用以表示动做的状态、特征、种类、结果等,如 classic_music',
type: 'string'
}
]
}
},
methods: {
async logTrack (action = '', label = '') {
if (!action) return
// 这里你能够进行打点,或者其余的处理
var Truck = this.$options.Truck
var ESlog = Truck && Truck.ESlog
await ESlog.track({
page_id: this.$route.params && this.$route.params.pageKey || '',
app_id: 'tview',
action: action,
label: label
})
},
myjump(){
window.location.href = this.url;
}
}
}
复制代码
该脚本添加后就会在组件的属性上多出一些可设置的属性和可调用的方法方便再编辑器里面选择。 github
这样你就为一个简单的图片添加了点击跳转并打点的功能。 你能够把你此次编辑的脚本保存为模板脚本。为其余人提供使用。为后面本身快速使用。 docker
此次比较初略的介绍了下码良的脚本添加功能,须要总体了解功能和实现仍是推荐先阅读第一篇设计介绍。本次主要的目的是告诉你们码良这个项目开始对外提供服务和自行部署。也欢迎你们使用提建议。咱们会在过段时间进行源代码开源。服务器
钉钉群微信
微信群(二维码可能会过时) 推荐添加上面的钉钉群app