shiziyu18/static/diycomponent/text/js/style.js

/**
 * 空的验证组件，后续如果增加业务，则更改组件
 */
 var emptyHtml = '<div class="text-slide">';
 emptyHtml += '<slide v-bind:data="{ field : \'marginTop\', label : \'页面间距\' }"></slide>';
 // emptyHtml += '<slide v-bind:data="{ field : \'padding\', label : \'上下边距\' }"></slide>';
emptyHtml += '</div>';


var styleHtml = '<div class="layui-form-item">';
 styleHtml += '<label class="layui-form-label sm">模板样式</label>';
 styleHtml += '<div class="layui-input-block" style="margin-left: 100px;">';
     styleHtml += '<div v-if="data.styleName" class="ns-input-text ns-text-color selected-style" v-on:click="selectTestStyle">{{data.styleName}} <i class="layui-icon layui-icon-right"></i></div>';
     styleHtml += '<div v-else class="ns-input-text selected-style" style="color: #323233;" v-on:click="selectTestStyle">选择 <i class="layui-icon layui-icon-right"></i></div>';
 styleHtml += '</div>';
styleHtml += '</div>';

Vue.component("text-empty", {
template: emptyHtml,
data: function () {
 return {
     data : this.$parent.data,
     marginTop: this.$parent.data.marginTop,
 }
},
created:function() {
 if(!this.$parent.data.verify) this.$parent.data.verify = [];
 this.$parent.data.verify.push(this.verify);//加载验证方法
},
methods: {

 verify : function () {
     var res = { code : true, message : "" };
     var _self = this;
     if(this.data.title.length == 0){
         res.code = false;
         res.message = "文本不能为空";
         setTimeout(function(){
             $("#title_" + _self.data.index).focus();
         },10);
     }
     return res;
 },
}
});

Vue.component("text-style", {
template: styleHtml,
data: function() {
 return {
     data: this.$parent.data,
 }
},
created:function() {
 if(!this.$parent.data.verify) this.$parent.data.verify = [];
 this.$parent.data.verify.push(this.verify);//加载验证方法
},
methods: {
 verify: function () {
     var res = { code: true, message: "" };
     return res;
 },
 selectTestStyle: function() {
     var self = this;
     layer.open({
         type: 1,
         title: '风格选择',
         area:['930px','630px'],
         btn: ['确定', '返回'],
         content: $(".draggable-element[data-index='" + self.data.index + "'] .edit-attribute .style-list-box").html(),
         success: function(layero, index) {
             $(".layui-layer-content input[name='style']").val(self.data.style);
             $(".layui-layer-content input[name='sub']").val(self.data.sub);
             $(".layui-layer-content input[name='style_name']").val(self.data.styleName);
             $("body").on("click", ".layui-layer-content .style-list-con .style-li", function () {
                 $(this).addClass("selected ns-border-color").siblings().removeClass("selected ns-border-color ns-bg-color-after");
                 $(".layui-layer-content input[name='style']").val($(this).index() + 1);
                 $(".layui-layer-content input[name='sub']").val($(this).find("input").val());
                 $(".layui-layer-content input[name='style_name']").val($(this).find("span").text());
             });
         },
         yes: function (index, layero) {
             self.data.style = $(".layui-layer-content input[name='style']").val();
             self.data.sub = $(".layui-layer-content input[name='sub']").val();
             self.data.styleName = $(".layui-layer-content input[name='style_name']").val();
             layer.closeAll()
         }
     });
 },
 /* fontWeight: function(data, obj) {
     var self = this;
     self.data.fontWeight = data;
     $(obj).attr("checked", true);
     $(obj).siblings().attr("checked", false);
     layui.use('form', function(){
         form = layui.form;
         form.render();
     })
 } */
}
});


// 文本对齐方式
/* var textAlignStyle = '<div class="layui-form-item ns-icon-radio">'
textAlignStyle +=	 '<label class="layui-form-label sm">对齐方式</label>';
textAlignStyle +=	 '<div class="layui-input-block">';
textAlignStyle +=		 '<template v-for="(item, index) in alignStyleList" v-bind:k="index">';
textAlignStyle +=			 '<span :class="[item.className == data.alignStyle ? \'\' : \'layui-hide\']">{{item.name}}</span>';
textAlignStyle +=		 '</template>';
textAlignStyle +=		 '<ul class="ns-icon">';
textAlignStyle +=			 '<li v-for="(item, index) in alignStyleList" v-bind:k="index" :class="[item.className == data.alignStyle ? \'ns-text-color ns-border-color ns-bg-color-diaphaneity\' : \'\']" @click="changeSelectedStyle(index)">';
textAlignStyle +=				 '<img v-if="item.className == data.alignStyle" :src="item.selectedSrc" />';
textAlignStyle +=				 '<img v-else :src="item.src" />';
textAlignStyle +=			 '</li>';
textAlignStyle +=		 '</ul>';
textAlignStyle +=	 '</div>';
textAlignStyle += '</div>';

Vue.component("text-align-style", {
template: textAlignStyle,
data: function () {
 return {
     data: this.$parent.data,
     alignStyleList: [] // 对齐方式集合
 };
},
created: function () {
 if(!this.$parent.data.verify) this.$parent.data.verify = [];
 this.$parent.data.verify.push(this.verify);//加载验证方法
 
 this.initAlignStyleList();
},
methods: {
 verify : function () {
     var res = { code : true, message : "" };
     return res;
 },
 initAlignStyleList: function () {
     var prefix = textResourcePath + "/text/img";
     
     this.alignStyleList.push({name: "居左", src: prefix+ "/left.png", selectedSrc: prefix+ "/left_1.png", className: "left"});
     this.alignStyleList.push({name: "居中", src: prefix+ "/center.png", selectedSrc: prefix+ "/center_1.png", className: "center"});
     this.alignStyleList.push({name: "居右", src: prefix+ "/right.png", selectedSrc: prefix+ "/right_1.png", className: "right"});
 },
 changeSelectedStyle: function(index) {
     for (var i=0; i<this.alignStyleList.length; i++) {
         if (i == index) {
             this.data.alignStyle = this.alignStyleList[i].className;
         }
     }
 }
},
}); */


// 主标题文字粗细
var fontWeightHtml = '<div class="layui-form-item ns-icon-radio">';
fontWeightHtml +=	 '<label class="layui-form-label sm">文字粗细</label>';
fontWeightHtml +=	 '<div class="layui-input-block">';
fontWeightHtml +=		 '<template v-for="(item, index) in alignStyleList" v-bind:k="index">';
fontWeightHtml +=			 '<span :class="[item.className == data.fontWeight ? \'\' : \'layui-hide\']">{{item.name}}</span>';
fontWeightHtml +=		 '</template>';
fontWeightHtml +=		 '<ul class="ns-icon">';
fontWeightHtml +=			 '<li v-for="(item, index) in alignStyleList" v-bind:k="index" :class="[item.className == data.fontWeight ? \'ns-text-color ns-border-color ns-bg-color-diaphaneity\' : \'\']" @click="changeSelectedStyle(index)">';
fontWeightHtml +=				 '<img v-if="item.className == data.fontWeight" :src="item.selectedSrc" />'
fontWeightHtml +=				 '<img v-else :src="item.src" />'
fontWeightHtml +=			 '</li>';
fontWeightHtml +=		 '</ul>';
fontWeightHtml +=	 '</div>';
fontWeightHtml += '</div>';

Vue.component("font-weight", {
template: fontWeightHtml,
data: function () {
 return {
     data: this.$parent.data,
     alignStyleList: [] // 对齐方式集合
 };
},
created: function () {
 if(!this.$parent.data.verify) this.$parent.data.verify = [];
 this.$parent.data.verify.push(this.verify);//加载验证方法
 
 this.initAlignStyleList();
},
methods: {
 verify : function () {
     var res = { code : true, message : "" };
     return res;
 },
 initAlignStyleList: function () {
     var prefix = textResourcePath + "/text/img";
     
     this.alignStyleList.push({name: "粗", src: prefix+ "/blod.png", selectedSrc: prefix+ "/blod_1.png", className: "600"});
     this.alignStyleList.push({name: "细", src: prefix+ "/normal.png", selectedSrc: prefix+ "/normal_1.png", className: "500"});
 },
 changeSelectedStyle: function(index) {
     for (var i=0; i<this.alignStyleList.length; i++) {
         if (i == index) {
             this.data.fontWeight = this.alignStyleList[i].className;
         }
     }
 }
},
});


// 是否启用更多按钮设置
var moreBtnHtml = '<div class="layui-form-item ns-checkbox-wrap">';
moreBtnHtml +=	 '<label class="layui-form-label sm">是否启用</label>';
moreBtnHtml +=	 '<div class="layui-input-block">';
moreBtnHtml +=		 '<span v-if="data.isShowMore == 1">是</span>';
moreBtnHtml +=		 '<span v-else>否</span>';
moreBtnHtml +=		 '<div v-on:click="changeState()" class="layui-unselect layui-form-checkbox" v-bind:class="{ \'layui-form-checked\': (data.isShowMore==1) }"  lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>';
moreBtnHtml +=	 '</div>';
moreBtnHtml += '</div>';

Vue.component("text-more-btn", {
template: moreBtnHtml,
data: function () {
 return {
     data: this.$parent.data,
 };
},
created: function () {
 if(!this.$parent.data.verify) this.$parent.data.verify = [];
 this.$parent.data.verify.push(this.verify);//加载验证方法
},
methods: {
 verify : function () {
     var res = { code : true, message : "" };
     return res;
 },
 changeState: function() {
     this.data.isShowMore = this.data.isShowMore ? 0 : 1;
 }
},
});


// 文字大小
var textFontSizeHtml = '<div class="layui-form-item ns-icon-radio">';
textFontSizeHtml +=	 '<label class="layui-form-label sm">{{data.label}}</label>';
textFontSizeHtml +=	 '<div class="layui-input-block">';
textFontSizeHtml +=		 '<template v-for="(item, index) in list" v-bind:k="index">';
textFontSizeHtml +=			 '<span :class="[item.value == parent[data.field] ? \'\' : \'layui-hide\']">{{item.value}}px</span>';
textFontSizeHtml +=		 '</template>';
textFontSizeHtml +=		 '<ul class="ns-icon">';
textFontSizeHtml +=			 '<li v-for="(item, index) in list" v-bind:k="index" :class="[item.value == parent[data.field] ? \'ns-text-color ns-border-color ns-bg-color-diaphaneity\' : \'\']" :title="item.value + \'px\'" @click="parent[data.field] = item.value">';
textFontSizeHtml +=				 '<img v-if="item.value == parent[data.field]" :src="item.selectedSrc" />'
textFontSizeHtml +=				 '<img v-else :src="item.src" />'
textFontSizeHtml +=			 '</li>';
textFontSizeHtml +=		 '</ul>';
textFontSizeHtml +=	 '</div>';
textFontSizeHtml += '</div>';

Vue.component("text-font-size", {
template: textFontSizeHtml,
props: {
 data: {
     type: Object,
     default: function () {
         return {
             field: "fontSize",
             label: "文字大小",
             max: 16
         };
     }
 }
},
data: function () {
 return {
     list: [],
     parent: this.$parent.data,
 };
},
created: function () {
 if (this.data.label == undefined) this.data.label = "文字大小";
 if (this.data.field == undefined) this.data.field = "fontSize";
 if (this.data.max == undefined) this.data.max = "16";
 
 if (this.data.max == 12) {
     this.list = [{label: "小", value: "12", src: textResourcePath + "/text/img/font_12.png", selectedSrc: textResourcePath + "/text/img/font_12_1.png"}];
 } else if (this.data.max == 14) {
     this.list = [
         {label: "小", value: "12", src: textResourcePath + "/text/img/font_12.png", selectedSrc: textResourcePath + "/text/img/font_12_1.png"},
         {label: "中", value: "14", src: textResourcePath + "/text/img/font_14.png", selectedSrc: textResourcePath + "/text/img/font_14_1.png"}
     ]
 } else {
     this.list = [
         {label: "小", value: "12", src: textResourcePath + "/text/img/font_12.png", selectedSrc: textResourcePath + "/text/img/font_12_1.png"},
         {label: "中", value: "14", src: textResourcePath + "/text/img/font_14.png", selectedSrc: textResourcePath + "/text/img/font_14_1.png"},
         {label: "大", value: "16", src: textResourcePath + "/text/img/font_16.png", selectedSrc: textResourcePath + "/text/img/font_16_1.png"}
     ];
 }
},
watch: {
 data: function (val, oldVal) {
     if (val.field == undefined) val.field = oldVal.field;
     if (val.label == undefined) val.label = "文字大小";
     if (val.max == undefined) val.max = "16";
 },
}
});