zlan.visual.design
v0.1.56
Published
## Project setup ``` npm install ```
Downloads
18
Readme
版本修改 1.52版本 —— 页面配置添加活动配置 1.53版本 —— 页面配置添加动态参数 1.54版本 —— 广告位组件添加上下移动 1.55版本 —— slider-design组件添加动态传值控制大小值 1.56版本 —— image-editor支持上传gif
打包npm 1、修改package.json文件的version版本号(每次更新版本号都不能相同) 2、npm run build-bundle(打包) 3、npm login(登录npm 账号) 账号:lilinfan 密码:q07242513(密码输入时不会显示出来) 邮箱:[email protected] 4、npm publish –access public(提交到线上) 5、npm update zlan.visual.design (更新包,每次提交完要更新包时修改代码里面的package.json的对应包版本号)
1)、npm安装zlan.visual.design包
npm install zlan.visual.design --save
2)、全局引入属性设计器
// 全局引入设计器npm包样式 import 'zlan.visual.design/dist/zlan.visual.design.css';
import { colorDesign,
visualComponent,
textareaDesign,
pageDesigner,
ueditorDesign,
backgroundDesign,
fontSizeDesign,
imgUploadDesign,
sliderDesign,
productDesign,
propertyEditor,
radioDesign,
selectDesign } from 'zlan.visual.design';
const Components = {
colorDesign, //字体颜色
visualComponent, //业务组件封装继承
textareaDesign, //多文本框
pageDesigner, //拖拽页面组件
ueditorDesign, //富文本框
backgroundDesign, //背景
fontSizeDesign, //字体大小
imgUploadDesign, //图片上传(广告位)
sliderDesign, // 滑块属性设计器(圆角,字体,边距...)
productDesign, // 产品
propertyEditor, // 属性设计器渲染封装
radioDesign, // 单选
selectDesign // 下拉
}
Object.keys(Components).forEach(key => { Vue.component(key,Components[key]); });
3)、全局注册本地组件
import notice from '@/components/page-components/notice' Vue.component('notice',notice)
4)、处理属性设计器结构 //data propsData:{ "color":'#000', "content":'最新商品', "background":'transparent', "fontSize":12, "padding":0, "url":[] },
propertyList:[ {name:'content',text:'文本',propertyName:'textarea-design'}, {name:'color',text:'文本颜色',propertyName:'color-design'}, {name:'background',text:'背景颜色',propertyName:'background-design'}, {name:'fontSize',text:'字体大小',propertyName:'fontSize-design'}, {name:'padding',text:'页面边距',propertyName:'slider-design'}, {name:'url',text:'跳转链接',propertyName:'select-design', data:{ api:'/api/cms/GetCmsLinkerList', parameter:{"subjectCode": "", "subjectType": ""}, propsValue:{ //接口返回数据结构处理 "label": "$.title", "value": "$", }, selectParam:'url' }, }, ],
created(){ var property = [] this.propertyList.forEach(e=>{ var data ={name:e.name,text:e.text,propertyName:e.propertyName,value:this.propsData[e.name]}; if(e.data){ data.data = e.data } property.push(data) }) this.propertyList = property },
watch:{ //监听值的改变 propertyList:{ handler(val,oldVal){ this.propertyList.forEach(e=>{ this.propsData[e.name] = e.value }) }, deep:true } }
属性设计器结构 name:参数名 text:名称 propertyName:设计器 1).colorDesign {name:'color',text:'文本颜色',propertyName:'color-design'} 2).textareaDesign {name:'content',text:'文本',propertyName:'textarea-design'} 3).ueditorDesign {name:'content',text:'文本',propertyName:'ueditor-design'} 4).backgroundDesign {name:'background',text:'背景颜色',propertyName:'background-design'} 5).fontSizeDesign {name:'fontSize',text:'字体大小',propertyName:'fontSize-design'} 6).imgUploadDesign { name:'imgList',text:'图片',propertyName:'imgUpload-design', data:{ api:'/api/user/SaveImage?param={}', //图片上传接口 parameter:{}, selectProps:{ //链接选择(不传时默认不显示下拉选择) data:{ api:'/api/cms/GetCmsLinkerList', parameter:{"subjectCode": "", "subjectType": ""}, propsValue:{ //接口返回数据结构处理 "label": "$.title", "value": "$", }, selectParam:'url', //选择的字段(二次渲染时匹配选中的数据)必须 propsApi:[ { dataType:"shop", api:'/api/user/GetProductList', parameter:{"pageIndex": 1,"pageSize": 10,"deptCode": "","productNoList": [],"type": ""}, propsValue:{ "productNo": "$.productNo", "url": "/pages/activity/activity-detail/activity-detail?id={productNo}", "marketPrice":"$.marketPrice", "salePrice":"$.salePrice", "shippingType":"$.shippingType", "imageUrl": "$.thumbImage", "link_title": "$.productName", "productSummary": "$.productSummary", "type": "$.type" }, tableColumns:[ //弹窗时显示结构(type==image显示图片,只能传图片路径,其他类型一律为文本,value对应propsValue字段) {type:'image',name:'图标',value:'imageUrl'}, {type:'itemText',name:'名称',value:'link_title'}, ] },{ dataType:"store", api:'/api/user/GetWxStoreList', parameter:{"pageIndex": 1,"pageSize": 10,"branchName": "","businessName": "","status": 0}, propsValue:{ "imageUrl":"$.thumbImage", "branchName":"$.branchName", "link_title":"$.businessName" }, tableColumns:[ {type:'image',name:'图标',value:'imageUrl'}, {type:'businessName',name:'名称',value:'link_title'}, ] } ] } } } }, 7).sliderDesign {name:'imgRadio',text:'图片倒角',propertyName:'slider-design'} 8).productDesign { name:'goods',text:'商品',propertyName:'product-design', data:{ api:'/api/user/GetProductList', parameter:{pageIndex:1,pageSize:10,type:''}, propsValue:{ "productNo": "$.productNo", "url": "/pages/activity/activity-detail/activity-detail?id={productNo}", "marketPrice":"$.marketPrice", "salePrice":"$.salePrice", "shippingType":"$.shippingType", "imageUrl": "$.thumbImage", //必须(单图路径) "productName": "$.productName", //必须 "productSummary": "$.productSummary", "type": "$.type" }, imageApi:'/api/user/SaveImage?param={}' //必须(图片上传接口) }, }, 9).radioDesign { name:'listType',text:'列表样式',propertyName:'radio-design', data:{ propsType:[{name:'大图模式',value:'1'},{name:'一行两个',value:'2'},{name:'一行三个',value:'3'}] } }, 10).selectDesign {name:'url',text:'跳转链接',propertyName:'select-design', data:{ api:'/api/cms/GetCmsLinkerList', //接口里面需要有dataType字段 parameter:{"subjectCode": "", "subjectType": ""}, propsValue:{ //接口返回数据结构处理 "label": "$.title", "value": "$", }, selectParam:'url', propsApi:[ { dataType:"shop", //根据上面接口里面的datatype字段判断调用接口 api:'/api/user/GetProductList', parameter:{"pageIndex": 1,"pageSize": 10,"deptCode": "","productNoList": [],"type": ""}, propsValue:{ "productNo": "$.productNo", "url": "/pages/activity/activity-detail/activity-detail?id={productNo}", "marketPrice":"$.marketPrice", "salePrice":"$.salePrice", "shippingType":"$.shippingType", "imageUrl": "$.thumbImage", "productName": "$.productName", "productSummary": "$.productSummary", "type": "$.type" }, tableColumns:[ {type:'image',name:'图标',value:'imageUrl'}, {type:'itemText',name:'名称',value:'productName'}, ] },{ dataType:"store", api:'/api/user/GetWxStoreList', parameter:{"pageIndex": 1,"pageSize": 10,"branchName": "","businessName": "","status": 0}, propsValue:{ "imageUrl":"$.thumbImage", "branchName":"$.branchName", "businessName":"$.businessName" }, tableColumns:[ {type:'image',name:'图标',value:'imageUrl'}, {type:'businessName',name:'名称',value:'businessName'}, ] } ] }, },
组件结构:
{
name: 'notice',
hover:false,
propsData:{ }
}
拖拽页面结构
{
id:0,
pageConfig:{ //pageConfig结构固定
title:'',
background:'',
hover:false,
pageType:"",页面类型
},
componentsData:[{
name: 'notice',
hover:false,
propsData:{
color:'#f00',
content:'文本组件123',
background:'',
fontSize:12,
type:'notice'
}
},{
name: 'notice',
hover:false,
propsData:{ }
}]
}