PEDIT 是一个vue组件，通过修改json配置就可以生成相应操作界面，当用户在界面进行操作，如改颜色，上传图片、视频等操作，事先绑定的html模板便可以替换成图片，颜色、视频，最终得到替换后的html字符串。目的在于提供一个可视化操作的解决方案，可应场景：类似淘宝商家后台店铺装修，用户需要自定义较高的活动页面，自定义建站等。
1. 引入js和css
<!-- css -->
<link rel="stylesheet" href="//www.nibes.cn/puim/css/puim.css" type="text/css" />
<link rel="stylesheet" href="//www.nibes.cn/static/pedit/pedit_dev_module.css" type="text/css" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_1204022_vdkgo06c9iq.css" type="text/css" />
<!-- js -->
<script src="//www.nibes.cn/static/pedit/vue.min.js" type="text/javascript"></script>
<script src="//www.nibes.cn/static/pedit/pedit_pack_module.js" type="text/javascript"></script>
2. 准备一个写好的模块代码
- 其中
{{bgcolor}}对应着第3步模块配置文件controls[0].key的值，代表与这个控件绑定，当用户操作修改颜色时，会把{{bgcolor}}替换成controls[0].value的值
var templateMod=`
<style>
.one_mod{background-color: {{bgcolor}};line-height:50px;}
</style>
<div class="one_mod" id="J_mod">一个模块</div>
<script>
document.getElementById('J_mod').addEventListener("click",function(){
alert( '单击' );
},false);
<\/script>
`;
3. 准备一个模块配置文件
- 模块配置文件中
module .template对应上面的模块代码templateMod - 所有配置文件参考：https://www.jianshu.com/p/3bd8f1b3e359
// 界面配置内容
var module = {
title:'模块标题', //界面tab标题
description:'模块描述', //模块描述，待定
icon:'icon iconfont iconfuwenbenkuang', //界面tab标题左边图标
tabIndex:0, //默认显示的tab选项卡下标
topcss:'width:400px;', //模块顶级div的style样式
template:templateMod, //渲染前的 cssHTML 模板
tabs:[{
title:'tab标题',
description:'tab描述',
icon:'icon iconfont icondingwei',
groupIndex:0,
groups:[{
title:'组标题1',
description:'组描述',
icon:'icon iconfont iconzuzhijiagou',
controls:[{
input:'color',
title:'颜色控件',
placeholder:'控件描述拓展',
description:'控件描述',
icon:'图标',
key:'bgcolor',
value:'#bbddaa'
}]
}]
}]
}
4. 实例化一个vue实例
- 实例化一个vue，并加入
<iframes></iframes>和<module></module>两个组件 - 通过事件
EvenHup.$emit('moduleInit', module);初始化一个模块 - 通过事件
EvenHup.$on('moduleRender', function(data) {});监听用户操作后返回数据
<div id="app" style="height:100%">
<iframes></iframes>
<module></module>
<div v-html="renderData"></div>
</div>
// 根实例
var app = new Vue({
el: '#app',
created:function(){
var that=this;
// 监听用户操作后数据
EvenHup.$on('moduleRender', function(data) {
that.renderData=data;
});
},
mounted:function(){
// 初始化模块数据
EvenHup.$emit('moduleInit', module);
},
data:{
renderData:'' //渲染后的模块数据，这里仅是测试数据
}
})
5. 完整的demo如下：
<!doctype html>
<html>
<head>
<title>title</title>
<!-- css -->
<link rel="stylesheet" href="//www.nibes.cn/puim/css/puim.css" type="text/css" />
<link rel="stylesheet" href="//www.nibes.cn/static/pedit/pedit_dev_module.css" type="text/css" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_1204022_vdkgo06c9iq.css" type="text/css" />
</head>
<body>
<!-- vue实例标签 -->
<div id="app" style="height:100%">
<iframes></iframes>
<module></module>
<div v-html="renderData"></div>
</div>
<!-- js -->
<script src="//www.nibes.cn/static/pedit/vue.min.js" type="text/javascript"></script>
<script src="//www.nibes.cn/static/pedit/pedit_pack_module.js" type="text/javascript"></script>
<script>
var templateMod=`
<style>
.one_mod{background-color: {{bgcolor}};line-height:50px;}
</style>
<div class="one_mod" id="J_mod">一个模块</div>
<script>
document.getElementById('J_mod').addEventListener("click",function(){
alert( '单击' );
},false);
<\/script>
`;
// 界面配置内容
var module = {
title:'模块标题', //界面tab标题
description:'模块描述', //模块描述，待定
icon:'icon iconfont iconfuwenbenkuang', //界面tab标题左边图标
tabIndex:0, //默认显示的tab选项卡下标
topcss:'width:400px;', //模块顶级div的style样式
template:templateMod, //渲染前的 cssHTML 模板
tabs:[{
title:'tab标题',
description:'tab描述',
icon:'icon iconfont icondingwei',
groupIndex:0,
groups:[{
title:'组标题1',
description:'组描述',
icon:'icon iconfont iconzuzhijiagou',
controls:[{
input:'color',
title:'颜色控件',
placeholder:'控件描述拓展',
description:'控件描述',
icon:'图标',
key:'bgcolor',
value:'#bbddaa'
}]
}]
}]
}
// Vue根实例
var app = new Vue({
el: '#app',
created:function(){
var that=this;
// 监听用户操作后数据
EvenHup.$on('moduleRender', function(data) {
that.renderData=data;
});
},
mounted:function(){
// 初始化模块数据
EvenHup.$emit('moduleInit', module);
},
data:{
renderData:'' //渲染后的模块数据，这里仅是测试数据
}
})
</script>
</body>
</html>
网友评论