Zlan.visual.design NPM

版本修改 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(密码输入时不会显示出来) 邮箱：1226405800@qq.com 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,Componentskey); });

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.propsDatae.name}; if(e.data){ data.data = e.data } property.push(data) }) this.propertyList = property },

watch:{ //监听值的改变 propertyList:{ handler(val,oldVal){ this.propertyList.forEach(e=>{ this.propsDatae.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:{ }  
}]

}