316 lines
10 KiB
JavaScript
316 lines
10 KiB
JavaScript
var floatBtnListHtml = '<div class="float-btn-list">';
|
||
floatBtnListHtml += '<p class="hint" style="font-size: 12px; margin: 5px 0 8px;">建议上传正方形图片，大小建议为33px * 33px</p>';
|
||
floatBtnListHtml += '<ul>';
|
||
floatBtnListHtml += '<li v-for="(item,index) in list" :key="item.id">';
|
||
floatBtnListHtml += '<img-icon-upload :data="{data : item}"></img-icon-upload>';
|
||
floatBtnListHtml += '<div class="right-wrap">';
|
||
floatBtnListHtml += '<div class="action-box" v-show="item.iconType == \'icon\'">';
|
||
floatBtnListHtml += '<div class="action" @click="iconStyle($event, index)"><i class="iconfont iconpifu"></i></div>';
|
||
floatBtnListHtml += '<div class="action" :id="\'float-btn-color-\' + index"><i class="iconfont iconyanse"></i></div>';
|
||
floatBtnListHtml += '</div>';
|
||
floatBtnListHtml += '<nc-link :data="{field: $parent.data.list[index].link}"></nc-link>';
|
||
floatBtnListHtml += '</div>';
|
||
floatBtnListHtml += '<i class="del" @click="del(index)" data-disabled="1">x</i>';
|
||
floatBtnListHtml += '<div class="error-msg"></div>';
|
||
floatBtnListHtml += '</li>';
|
||
floatBtnListHtml += '</ul>';
|
||
floatBtnListHtml += '<div class="add-item text-color" v-if="showAddItem" @click="add">';
|
||
floatBtnListHtml += '<i>+</i>';
|
||
floatBtnListHtml += '<span>添加一个浮动按钮</span>';
|
||
floatBtnListHtml += '</div>';
|
||
floatBtnListHtml += '</div>';
|
||
|
||
Vue.component("float-btn-list",{
|
||
data: function () {
|
||
return {
|
||
list: this.$parent.data.list,
|
||
maxTip : 3,//最大上传数量提示
|
||
showAddItem : true,
|
||
screenWidth:0,
|
||
colorPicker:{}
|
||
};
|
||
},
|
||
created : function(){
|
||
if(!this.$parent.data.verify) this.$parent.data.verify = [];
|
||
this.$parent.data.verify.push(this.verify);//加载验证方法
|
||
|
||
this.$parent.data.ignore = ['textColor','pageBgColor','componentBgColor','elementBgColor','marginTop','marginBottom','marginBoth','componentAngle','elementAngle'];//加载忽略内容 -- 其他设置中的属性设置
|
||
this.$parent.data.ignoreLoad = true; // 等待忽略数组赋值后加载
|
||
|
||
getElementPosition(this.$parent);
|
||
window.onresize = () => {
|
||
return (() => {
|
||
window.screenWidth = document.body.clientWidth;
|
||
this.screenWidth = window.screenWidth
|
||
})()
|
||
};
|
||
this.changeShowAddItem();//获取默认值
|
||
|
||
this.list.forEach(function (item) {
|
||
if (!item.id) item.id = ns.gen_non_duplicate(10)
|
||
})
|
||
},
|
||
watch : {
|
||
list : function(){
|
||
this.changeShowAddItem();
|
||
setTimeout(()=>{
|
||
getElementPosition(this.$parent)
|
||
},10);
|
||
},
|
||
screenWidth(val){
|
||
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||
getElementPosition(this.$parent);
|
||
},
|
||
"$parent.data.btnBottom": function () {
|
||
getElementPosition(this.$parent);
|
||
}
|
||
},
|
||
mounted(){
|
||
this.fetchAllMenuIconColor();
|
||
},
|
||
methods: {
|
||
verify :function () {
|
||
var res = { code: true, message: "" };
|
||
if(this.list.length >0){
|
||
for(var i=0;i < this.list.length;i++){
|
||
if(this.$parent.data.list[i].imageUrl == "" && this.$parent.data.list[i].icon == ""){
|
||
res.code = false;
|
||
res.message = "请添加图片";
|
||
break;
|
||
}
|
||
}
|
||
}else{
|
||
res.code = false;
|
||
res.message = "请添加一个浮动按钮";
|
||
}
|
||
return res;
|
||
},
|
||
//改变添加浮动按钮
|
||
changeShowAddItem(){
|
||
if(this.list.length >= this.maxTip) this.showAddItem = false;
|
||
else this.showAddItem = true;
|
||
},
|
||
/**
|
||
* 选择图标风格
|
||
* @param event
|
||
* @param index
|
||
*/
|
||
iconStyle(event, index){
|
||
var self = this;
|
||
selectIconStyle({
|
||
elem: event.currentTarget,
|
||
icon: self.list[index].icon,
|
||
callback: function (data) {
|
||
if (data) {
|
||
self.list[index].style = data;
|
||
} else {
|
||
iconStyleSet({
|
||
style: JSON.stringify(self.list[index].style),
|
||
query: {
|
||
icon: self.list[index].icon
|
||
}
|
||
}, function(style){
|
||
self.list[index].style = style;
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* 渲染颜色组件
|
||
* @param id
|
||
* @param color
|
||
* @param callback
|
||
*/
|
||
colorRender(id, color, callback){
|
||
var self = this;
|
||
if (this.colorPicker[id]) return;
|
||
setTimeout(function () {
|
||
self.colorPicker[id] = Colorpicker.create({
|
||
el: id,
|
||
color: color,
|
||
change: function (elem, hex) {
|
||
callback(elem, hex)
|
||
}
|
||
});
|
||
})
|
||
},
|
||
/**
|
||
* 渲染全部菜单颜色选择器
|
||
*/
|
||
fetchAllMenuIconColor(){
|
||
var self = this;
|
||
this.list.forEach(function (item, index) {
|
||
self.colorRender('float-btn-color-' + index, '', function (elem, color) {
|
||
index = $(elem).parents('li').index();
|
||
if (self.list[index].style.iconBgColor.length || self.list[index].style.iconBgImg) {
|
||
self.list[index].style.iconBgColor = [color];
|
||
} else {
|
||
self.list[index].style.iconColor = [color];
|
||
}
|
||
self.$forceUpdate();
|
||
})
|
||
})
|
||
},
|
||
add(){
|
||
var self = this;
|
||
this.list.push({ imageUrl : '', title : '', link : {name: ''}, iconType: 'img', icon: '', style: {fontSize: 60, iconBgColor: [], iconBgColorDeg: 0,iconBgImg: '',bgRadius: 0,iconColor: ['#000'],iconColorDeg: 0}})
|
||
|
||
this.colorRender('float-btn-color-' + (this.list.length - 1), '', function (elem, color) {
|
||
index = $(elem).parents('li').index();
|
||
if (self.list[index].style.iconBgColor.length || self.list[index].style.iconBgImg) {
|
||
self.list[index].style.iconBgColor = [color];
|
||
} else {
|
||
self.list[index].style.iconColor = [color];
|
||
}
|
||
self.$forceUpdate();
|
||
})
|
||
},
|
||
del(index){
|
||
this.list.splice(index, 1);
|
||
delete this.colorPicker['float-btn-color-' + index];
|
||
}
|
||
},
|
||
template: floatBtnListHtml
|
||
});
|
||
|
||
/**
|
||
* 按钮位置
|
||
*/
|
||
var btnPosition = '<div class="layui-form-item icon-radio">';
|
||
btnPosition += '<label class="layui-form-label sm">{{data.label}}</label>';
|
||
btnPosition += '<div class="layui-input-block">';
|
||
btnPosition += '<template v-for="(item,index) in list">';
|
||
btnPosition += '<span :class="[parent[data.field] == item.value ? \'\' : \'layui-hide\']">{{item.label}}</span>';
|
||
btnPosition += '</template>';
|
||
btnPosition += '<ul class="icon-wrap">';
|
||
btnPosition += '<template v-for="(item,index) in list">';
|
||
btnPosition += '<li @click="clickFun(item.value)" :class="{\'text-color border-color\':parent[data.field] == item.value}">';
|
||
btnPosition += '<i class="iconfont" :class="item.icon_img"/>';
|
||
btnPosition += '</li>';
|
||
btnPosition += '</template>';
|
||
btnPosition += '</ul>';
|
||
btnPosition += '</div>';
|
||
btnPosition += '</div>';
|
||
Vue.component("btn-position", {
|
||
props: {
|
||
data: {
|
||
type: Object,
|
||
default: function () {
|
||
return {
|
||
field: "bottomPosition",
|
||
label: "按钮位置"
|
||
};
|
||
}
|
||
}
|
||
},
|
||
data: function () {
|
||
return {
|
||
list: [
|
||
{
|
||
label: "左上",
|
||
value: "1",
|
||
icon_img: "iconzuoshangjiao",
|
||
},
|
||
{
|
||
label: "右上",
|
||
value: "2",
|
||
icon_img: "iconyoushangjiao",
|
||
},
|
||
{
|
||
label: "左下",
|
||
value: "3",
|
||
icon_img: "iconzuoxiajiao",
|
||
},
|
||
{
|
||
label: "右下",
|
||
value: "4",
|
||
icon_img: "iconyouxiajiao",
|
||
},
|
||
],
|
||
parent: this.$parent.data,
|
||
imglist:this.$parent.data.list,
|
||
bottomPos:1,
|
||
};
|
||
},
|
||
created: function () {
|
||
this.bottomPos = this.parent.bottomPosition;
|
||
// 将边框进行隐藏掉
|
||
$('.float-btn').parent('.draggable-element').css({"border": "none"});
|
||
},
|
||
watch: {
|
||
imglist:function(val, oldVal){
|
||
var height = val.length > 1 ? ((val.length - 1) * 50) + 40 :40;
|
||
$(".draggable-element .float-btn").css({
|
||
height:height
|
||
});
|
||
$(".float-btn .float-btn-box").css({
|
||
height:height
|
||
})
|
||
},
|
||
},
|
||
methods: {
|
||
clickFun:function(val){
|
||
this.bottomPos = val;
|
||
this.parent[this.data.field] = val;
|
||
getElementPosition(this.$parent)
|
||
}
|
||
},
|
||
template: btnPosition
|
||
});
|
||
|
||
function getElementPosition(data) {
|
||
var type = parseInt(data.data.bottomPosition), //布局类型，1为第一种，2为第二种依次类推
|
||
bottomNumber = parseInt(data.data.btnBottom); //上下偏移的变量
|
||
/**
|
||
* #diyView .diy-view-wrap .preview-block =》 显示框【定位的参照对象是body】，#diyView =》 外边框【定位的参照对象是body】
|
||
* 1、弹窗按钮是根据“外边框”进行定位的,但弹窗按钮是需要在“显示框”中展示
|
||
* 2、弹窗按钮与显示框的上下间距定义为50px,左右为30px，这个是常量
|
||
* 3、计算弹窗按钮的四个位置，都是根据 top，left进行计算的
|
||
* */
|
||
|
||
var box = document.querySelector("#diyView .diy-view-wrap .preview-block").getBoundingClientRect();
|
||
var box1 = document.querySelector("#diyView").getBoundingClientRect();
|
||
var floatBtn = document.querySelector(".float-btn-box").getBoundingClientRect(); //弹窗按钮
|
||
var topVal = 0; //弹窗按钮的top
|
||
var leftVal = 0; //弹窗按钮的left
|
||
var leftOff = 30; //弹窗按钮左右的偏移量
|
||
var topOff = 50; //弹窗按钮上下的偏移量
|
||
|
||
if (type == 1) {
|
||
// topVal = 显示框的top - 外边框的top + 距离显示框下边距的50px + 偏移量
|
||
// leftVal = 显示框的left - 外边框的left + 距离显示框右边距的30px
|
||
topVal = box.top - box1.top + topOff + bottomNumber + "px";
|
||
leftVal = box.left - box1.left + leftOff + "px";
|
||
} else if (type == 2) {
|
||
// topVal = 显示框的top - 外边框的top + 距离显示框下边距的50px + 偏移量
|
||
// leftVal = 显示框的left - 外边框的left + 显示框的width - 弹窗按钮的width - 距离显示框右边距的30px
|
||
topVal = box.top - box1.top + topOff + bottomNumber + "px";
|
||
leftVal = box.left - box1.left + box.width - floatBtn.width - leftOff + "px";
|
||
} else if (type == 3) {
|
||
// topVal = 显示框的top - 外边框的top + 显示框的height - 弹窗按钮的height - 距离显示框下边距的50px - 偏移量
|
||
// leftVal = 显示框的left - 外边框的left + 距离显示框左边距的30px
|
||
topVal = box.top - box1.top + box.height - floatBtn.height - topOff - bottomNumber + "px";
|
||
leftVal = box.left - box1.left + leftOff + "px";
|
||
|
||
topVal = $("#diyView .preview-wrap .div-wrap").height() - 90 - bottomNumber + 'px';
|
||
} else if (type == 4) {
|
||
// topVal = 显示框的top - 外边框的top + 显示框的height - 弹窗按钮的height - 距离显示框下边距的50px - 偏移量
|
||
// leftVal = 显示框的left - 外边框的left + 显示框的width - 弹窗按钮的width - 距离显示框右边距的30px
|
||
topVal = $("#diyView .preview-wrap .div-wrap").height() - 90 - bottomNumber + 'px';
|
||
leftVal = box.left - box1.left + box.width - floatBtn.width - leftOff + "px";
|
||
|
||
}
|
||
|
||
$(".draggable-element .float-btn").css({
|
||
left: leftVal,
|
||
top: topVal,
|
||
'z-index': 999
|
||
});
|
||
|
||
$(".draggable-element .float-btn .edit-attribute").css({
|
||
position: 'fixed',
|
||
right: '10px',
|
||
top: Math.abs(box1.top)
|
||
})
|
||
} |