后台使用文档

发布于:2018-11-01 11:14     更新于:17天前

对后台做了一部分修改,功能的拓展

1.单图上传在html中写入

//代码区域

<div uploadone data-required="0" data-title="图片" data-tip="图片规格为100*100" data-name="titlepic" data-value="{{d.data.titlepic}}" data-src="{{d.data.titlepicsrc}}"></div>
//属性说明
//data-required 是否必须 1是 0否 默认为0
//data-title 标题 默认为图片
//data-tip 提示
//data-name input的name
//data-value 传到后台的图片地址的值,没有域名前缀
//data-src 显示的图片url 加上了域名前缀等。

2.多图上传

<div uploadmore data-name="pics" data-title="项目多图" data-value="{{d.data.pics}}" data-valuearr="{{d.data.pics_arr}}"></div>
//属性说明
//data-required 是否必须 1是 0否 默认为0
//data-title 标题 默认为多图
//data-tip 提示
//data-name input的name
//data-value 已有图片数组或者,拼接字符串 没有域名前缀
//data-valuearr 已有图片数组或者,拼接字符串 有域名前缀

3.富文本编辑器

后台使用的富文本编辑器为 百度 ueditor。

<div ueditor data-name="content" data-title="内容">{{d.data.content}}</div>
//属性说明
//data-name input name
//data-title 标题 默认 内容
//将值填入在div标签中即可
//默认宽100%

4.省市区选择器

<div pca data-title="地区" data-value="{{d.data.province}},{{d.data.city}},{{d.data.area}}" data-province="province" data-city="city" data-area="area"></div>
//属性说明
//data-title 标题 默认 地区
//data-value 选中值
//data-province 省的select 的name
//data-city 市的select 的name
//data-area 区的select 的name

5.联动select使用

<div class="layui-form-item">
    <label class="layui-form-label">联动select</label>
    <div class="layui-input-block" id="pickerx">
    </div>
</div>
js调用
layui.pickerx({
	selected:['1','2','7'],
	mode:'',//如果这个填入region 数据会自动读取全国省市
	id:'#pickerx',//此参数必须
	datas:[
		{id:1,name:'第一个',sons:[{id:2,name:'子x',sons:[{id:6,name:'子32'},{id:7,name:'子36'}]},{id:3,name:'子2'}]},
		{id:4,name:'第二个',sons:[{id:5,name:'子3'},{id:7,name:'子4'}]}
	],
	field:{value:'id',name:'name','sons':'sons'},
	placeholder:['请选择1','请选择2','请选择3'],
	selectname:['name1','name2','name3'],
	callback:function(data){
		console.log(data);
	}
});
//最高支持3级。理论上无限级

6.打开地图选中坐标

$("#web_map").click(function(){//绑定点击事件
    layui.banlv.open({
	data:{
	    lat:$("input[name='data[lat]']").val(),
	    lng:$("input[name='data[lng]']").val(),
	    address:$("input[name='data[address]']").val()
	},//传入默认值 如果不传则默认选中当前城市
	url:'map',
	title:'定位',//窗口名称
	callback:function(data){//回调函数
	    $("input[name='data[lat]']").val(data.lat);//地理位置的经纬度
	    $("input[name='data[lng]']").val(data.lng);//地理位置的经纬度
	    if(data.address)
	    {//如果有地址的话会传所选的位置的地理信息过来
		$("input[name='data[address]']").val(data.address);
	    }
	}
    });
});

持续更新中

技术支持 可以联系我  qq:1669608739 

阅读 198