初始上传
This commit is contained in:
310
app/component/view/quick_nav/css/design.css
Executable file
310
app/component/view/quick_nav/css/design.css
Executable file
@@ -0,0 +1,310 @@
|
||||
@CHARSET "UTF-8";
|
||||
|
||||
/*快捷导航组件*/
|
||||
.quick-navigation .preview-draggable .preview-box {
|
||||
padding: 8px 0;
|
||||
margin: 0 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.quick-navigation .preview-draggable ul {
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.quick-navigation .preview-draggable li {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.quick-navigation .preview-draggable li img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.quick-navigation .preview-draggable li:last-child {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.quick-navigation .preview-draggable li span {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
height: 20px;
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/*.quick-navigation .preview-draggable .quick-nav{visibility: hidden;}*/
|
||||
.quick-navigation .preview-draggable .quick-nav > .wrap {
|
||||
/* overflow-x: hidden;white-space: nowrap; background: #ffffff; */
|
||||
display: flex;
|
||||
/* justify-content: space-around; */
|
||||
flex-wrap: wrap;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.quick-navigation .quick-nav-list .template-list .template-item {
|
||||
float: left;
|
||||
text-align: center;
|
||||
border: 1px solid #e5e5e5;
|
||||
margin-right: 20px;
|
||||
padding: 5px;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.quick-navigation .quick-nav-list .template-list .template-item img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.quick-navigation .add-item {
|
||||
padding: 10px;
|
||||
border: 1px dashed #e5e5e5;
|
||||
margin: 16px 0 10px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.quick-navigation .add-item i {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
font-size: 18px;
|
||||
margin-right: 10px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.quick-navigation .add-item span {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.quick-navigation .quick-nav {
|
||||
display: flex;
|
||||
/*overflow-x: auto;*/
|
||||
overflow: hidden;
|
||||
padding:5px 0;
|
||||
}
|
||||
|
||||
.quick-navigation .quick-nav::-webkit-scrollbar {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.quick-navigation .quick-nav::-webkit-scrollbar-track {
|
||||
background-color: #e4e4e4;
|
||||
}
|
||||
|
||||
.quick-navigation .quick-nav::-webkit-scrollbar-thumb {
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
.quick-navigation .quick-nav .quick-nav-item {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.quick-navigation .quick-nav .quick-nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 10px;
|
||||
border-radius: 20px;
|
||||
box-sizing: border-box;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.quick-navigation .quick-nav .quick-nav-item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.quick-navigation .quick-nav .quick-nav-item .quick-img {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.quick-navigation .quick-nav .quick-nav-item .quick-img img {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.quick-navigation .quick-nav .quick-nav-item .quick-img .icon-wrap {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.quick-navigation .quick-nav .quick-nav-item .quick-img i {
|
||||
font-size: 30px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.quick-navigation .quick-nav .quick-nav-item .quick-text {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height:20px;
|
||||
line-height: 20px;
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
.quick-navigation .quick-nav-list > ul {
|
||||
}
|
||||
|
||||
.quick-navigation .quick-nav-list > ul > li {
|
||||
padding: 10px 10px 10px 0px;
|
||||
background: #ffffff;
|
||||
border: 1px dashed #e5e5e5;
|
||||
position: relative;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.quick-navigation .quick-nav-list > ul > li > .iconfont {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 10px;
|
||||
cursor: move;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.quick-navigation .quick-nav-list > ul > li:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.quick-navigation .quick-nav-list > ul > li:hover .del {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.quick-navigation .edit-attribute .attr-wrap .restore-wrap .img-block, .quick-navigation .edit-attribute .attr-wrap .restore-wrap .img-block.has-choose-image > div {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.quick-navigation .edit-attribute .attr-wrap .restore-wrap .img-block.has-choose-image img {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.quick-navigation .edit-attribute .icon-box {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 60px;
|
||||
border: 1px dashed #ddd;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 !important;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.quick-navigation .edit-attribute .icon-box .select-icon {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.quick-navigation .edit-attribute .icon-box .select-icon .add {
|
||||
font-size: 26px;
|
||||
color: var(--base-color);
|
||||
}
|
||||
|
||||
.quick-navigation .edit-attribute .icon-box .operation {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
flex-direction: column;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.quick-navigation .edit-attribute .icon-box:hover .operation {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.quick-navigation .edit-attribute .icon-box .operation-warp {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.quick-navigation .edit-attribute .icon-box .iconfont {
|
||||
margin: 0 3px;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
.quick-navigation .edit-attribute .icon-box .operation .js-replace {
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
background: rgba(0, 0, 0, .7);
|
||||
font-size: 12px;
|
||||
height: unset;
|
||||
}
|
||||
|
||||
.quick-navigation .edit-attribute .quick-nav-list .icon-box .icon-wrap:hover .operation {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.quick-navigation .edit-attribute .quick-nav-list .img-upload .upload-img-box:hover .operation {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.quick-navigation .edit-attribute .navigation-set-list li {
|
||||
|
||||
}
|
||||
|
||||
.quick-navigation .edit-attribute .navigation-set-list li .layui-form-item:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.quick-navigation .edit-attribute .navigation-set-list li .layui-form-label.sm {
|
||||
width: 75px !important;
|
||||
}
|
||||
|
||||
|
||||
.quick-navigation .edit-attribute .navigation-set-list .img-upload {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.quick-navigation .edit-attribute .navigation-set-list .img-upload img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.quick-navigation .edit-attribute .navigation-set-list .action-box {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.quick-navigation .edit-attribute .navigation-set-list .action {
|
||||
margin-right: 3px;
|
||||
width: 42px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
border: 1px solid #EEEEEE;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.quick-navigation .edit-attribute .navigation-set-list .iconfont {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.quick-navigation .edit-attribute .navigation-set-list .action:hover {
|
||||
border-color: var(--base-color);
|
||||
color: var(--base-color);
|
||||
}
|
||||
|
||||
.quick-navigation .img-icon-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
108
app/component/view/quick_nav/design.html
Executable file
108
app/component/view/quick_nav/design.html
Executable file
@@ -0,0 +1,108 @@
|
||||
<nc-component :data="data[index]" class="quick-navigation">
|
||||
|
||||
<!-- 预览 -->
|
||||
<template slot="preview">
|
||||
<template v-if="nc.lazyLoad">
|
||||
<div class="quick-nav" :style="{
|
||||
backgroundColor: nc.componentBgColor,
|
||||
borderTopLeftRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
|
||||
borderTopRightRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
|
||||
borderBottomLeftRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0),
|
||||
borderBottomRightRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0),
|
||||
boxShadow: nc.ornament.type == 'shadow' ? ('0 0 5px ' + nc.ornament.color) : '',
|
||||
border: nc.ornament.type == 'stroke' ? '1px solid ' + nc.ornament.color : ''
|
||||
}">
|
||||
<div class="quick-nav-item" v-for="(item) in nc.list" :key="item.id" :style="{background : 'linear-gradient(to right,' + item.bgColorStart ? item.bgColorStart : '' + ',' + item.bgColorEnd ? item.bgColorEnd : '' + ')'}">
|
||||
<div class="quick-img" v-if="item.imageUrl || item.icon">
|
||||
<img v-if="item.iconType == 'img'" :src="changeImgUrl(item.imageUrl) || changeImgUrl('public/static/img/default_img/square.png')">
|
||||
<iconfont v-if="item.iconType == 'icon'" :icon="item.icon" :value="(item.style ? item.style : null)"></iconfont>
|
||||
</div>
|
||||
<span class="quick-text" :style="{color: item.textColor }">{{item.title}}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 内容编辑 -->
|
||||
<template slot="edit-content">
|
||||
<template v-if="nc.lazyLoad">
|
||||
<quick-nav-list></quick-nav-list>
|
||||
|
||||
<div class="template-edit-title">
|
||||
<h3>快捷导航项</h3>
|
||||
<div class="quick-nav-list">
|
||||
<ul class="navigation-set-list">
|
||||
<li v-for="(item,previewIndex) in nc.list" :key="item.id">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label sm">图片</label>
|
||||
<div class="layui-input-block">
|
||||
<quick-image-upload :data="{ data : item }" data-disabled="1"></quick-image-upload>
|
||||
</div>
|
||||
<div class="word-aux diy-word-aux">宽度自适应，高度20px</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label sm">标题</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name='title' v-model="item.title" maxlength="20" class="layui-input" autocomplete="off" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nc-link :data="{ field : item.link, label:'链接' }"></nc-link>
|
||||
|
||||
<color :data="{ id : item.id, field : 'bgColorStart,bgColorEnd', label : '背景颜色', parent : item, defaultColor : '#FFFFFF,#FFFFFF' }"></color>
|
||||
|
||||
<color :data="{ id : item.id, field : 'textColor', label : '文字颜色', parent : item, defaultColor : '#303133' }"></color>
|
||||
|
||||
<i class="del" @click="nc.list.splice(previewIndex,1)" data-disabled="1">x</i>
|
||||
<div class="iconfont icontuodong"></div>
|
||||
</li>
|
||||
|
||||
<div class="add-item text-color" @click="nc.tempData.methods.addNav()">
|
||||
<i>+</i>
|
||||
<span>添加一个快捷导航</span>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
|
||||
<!-- 样式编辑 -->
|
||||
<template slot="edit-style">
|
||||
<template v-if="nc.lazyLoad">
|
||||
<div class="template-edit-title">
|
||||
<h3>快捷导航</h3>
|
||||
|
||||
<div class="layui-form-item tag-wrap">
|
||||
<label class="layui-form-label sm">样式</label>
|
||||
<div class="layui-input-block">
|
||||
<div v-for="(item,ornamentIndex) in nc.tempData.ornamentList" :key="ornamentIndex" @click="nc.ornament.type=item.type" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.ornament.type==item.type) }">
|
||||
<i class="layui-anim layui-icon">{{ nc.ornament.type == item.type ? "" : "" }}</i>
|
||||
<div>{{item.text}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<color v-if="nc.ornament.type != 'default'" :data="{ field : 'color', 'label' : '边框颜色', parent : 'ornament', defaultColor : '#EDEDED' }"></color>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 资源 -->
|
||||
<template slot="resource">
|
||||
<js>
|
||||
var quickNavResourcePath = "{$resource_path}"; // http路径
|
||||
var quickNavRelativePath = "{$relative_path}"; // 相对路径
|
||||
</js>
|
||||
<css src="{$resource_path}/css/design.css"></css>
|
||||
<js src="{$resource_path}/js/design.js"></js>
|
||||
|
||||
</template>
|
||||
|
||||
</nc-component>
|
||||
207
app/component/view/quick_nav/js/design.js
Executable file
207
app/component/view/quick_nav/js/design.js
Executable file
@@ -0,0 +1,207 @@
|
||||
/**
|
||||
* [图片导航的图片]·组件
|
||||
*/
|
||||
var quickNavListHtml = '<div style="display: none;"></div>';
|
||||
Vue.component("quick-nav-list", {
|
||||
template: quickNavListHtml,
|
||||
data: function () {
|
||||
return {
|
||||
data: this.$parent.data,
|
||||
list: this.$parent.data.list,
|
||||
ornamentList: [
|
||||
{
|
||||
type: 'default',
|
||||
text: '默认',
|
||||
},
|
||||
{
|
||||
type: 'shadow',
|
||||
text: '投影',
|
||||
},
|
||||
{
|
||||
type: 'stroke',
|
||||
text: '描边',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created: function () {
|
||||
if (!this.$parent.data.verify) this.$parent.data.verify = [];
|
||||
this.$parent.data.verify.push(this.verify);//加载验证方法
|
||||
|
||||
this.$parent.data.ignore = ['textColor', 'elementBgColor', 'elementAngle'];//加载忽略内容 -- 其他设置中的属性设置
|
||||
this.$parent.data.ignoreLoad = true; // 等待忽略数组赋值后加载
|
||||
|
||||
// 组件所需的临时数据
|
||||
this.$parent.data.tempData = {
|
||||
...this.$parent.data.tempData,
|
||||
ornamentList: this.ornamentList,
|
||||
methods: {
|
||||
addNav: this.addNav
|
||||
}
|
||||
};
|
||||
|
||||
this.list.forEach(function (e, i) {
|
||||
if(!e.id) e.id = ns.gen_non_duplicate(6);
|
||||
});
|
||||
this.$parent.data.list = this.list;
|
||||
|
||||
var moveBeforeIndex = 0;
|
||||
var _this = this;
|
||||
setTimeout(function () {
|
||||
var componentIndex = _this.data.index;
|
||||
$('[data-index="' + componentIndex + '"] .navigation-set-list').DDSort({
|
||||
target: 'li',
|
||||
floatStyle: {
|
||||
'border': '1px solid #ccc',
|
||||
'background-color': '#fff'
|
||||
},
|
||||
//设置可拖拽区域
|
||||
draggableArea: "icontuodong",
|
||||
down: function (index) {
|
||||
moveBeforeIndex = index;
|
||||
},
|
||||
up: function () {
|
||||
var index = $(this).index();
|
||||
var temp = _this.list[moveBeforeIndex];
|
||||
_this.list.splice(moveBeforeIndex, 1);
|
||||
_this.list.splice(index, 0, temp);
|
||||
_this.$parent.data.list = _this.list;
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
addNav() {
|
||||
this.list.push({
|
||||
"title": "",
|
||||
"icon": "",
|
||||
"iconType": "img",
|
||||
"imageUrl": "",
|
||||
"style": {
|
||||
"fontSize": "60",
|
||||
"iconBgColor": [],
|
||||
"iconBgColorDeg": 0,
|
||||
"iconBgImg": "",
|
||||
"bgRadius": 0,
|
||||
"iconColor": [
|
||||
"#000000"
|
||||
],
|
||||
"iconColorDeg": 0
|
||||
},
|
||||
"link": {
|
||||
"name": ""
|
||||
},
|
||||
"bgColorStart": "",
|
||||
"bgColorEnd": "",
|
||||
"textColor": "#303133",
|
||||
id: ns.gen_non_duplicate(6)
|
||||
});
|
||||
},
|
||||
verify: function (index) {
|
||||
var res = {code: true, message: ""};
|
||||
$(".draggable-element[data-index='" + index + "'] .quick-navigation .quick-nav-list .navigation-set-list>li").each(function (i) {
|
||||
if (vue.data[index].list[i].title === "") {
|
||||
res.code = false;
|
||||
res.message = "请输入标题";
|
||||
$(this).find("input[name='title']").attr("style", "border-color:red !important;").focus();
|
||||
return res;
|
||||
} else {
|
||||
$(this).find("input[name='title']").removeAttr("style");
|
||||
}
|
||||
});
|
||||
|
||||
return res;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var quickUploadImgHtml = '<div class="img-icon-box">';
|
||||
quickUploadImgHtml += '<img-icon-upload :data="{data:myData.data}"></img-icon-upload>';
|
||||
quickUploadImgHtml += '<div class="action-box">';
|
||||
quickUploadImgHtml += '<div class="action" v-if="myData.data.iconType == \'icon\'" title="风格" @click="iconStyle($event)"><i class="iconfont iconpifu"></i></div>';
|
||||
quickUploadImgHtml += '<div class="action" v-if="myData.data.iconType == \'icon\'" title="背景" @click="selectColor(\'quick-nav-color-\' +id)" :id="\'quick-nav-color-\' +id"><i class="iconfont iconyanse"></i></div>';
|
||||
quickUploadImgHtml += '</div>';
|
||||
quickUploadImgHtml += '</div>';
|
||||
|
||||
Vue.component("quick-image-upload", {
|
||||
template: quickUploadImgHtml,
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {
|
||||
data: {},
|
||||
field: "",
|
||||
callback: null
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
myData: this.data,
|
||||
list: [],
|
||||
parent: this.$parent.data,
|
||||
id: '',
|
||||
colorPicker:{}
|
||||
};
|
||||
},
|
||||
created: function () {
|
||||
this.id = ns.gen_non_duplicate(10);
|
||||
},
|
||||
methods: {
|
||||
// 选择图标风格
|
||||
iconStyle(event) {
|
||||
var self = this;
|
||||
selectIconStyle({
|
||||
elem: event.currentTarget,
|
||||
icon: self.myData.data.icon,
|
||||
callback: function (data) {
|
||||
if (data) {
|
||||
self.myData.data.style = data;
|
||||
} else {
|
||||
iconStyleSet({
|
||||
style: JSON.stringify(self.myData.data.style),
|
||||
query: {
|
||||
icon: self.myData.data.icon
|
||||
}
|
||||
}, function (style) {
|
||||
self.myData.data.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)
|
||||
}
|
||||
});
|
||||
$('#' + id).click();
|
||||
}, 10)
|
||||
},
|
||||
selectColor(id) {
|
||||
let self = this;
|
||||
this.colorRender(id, '', function (elem, color) {
|
||||
if (self.myData.data.style['iconBgImg'] || self.myData.data.style['iconBgColor'].length) {
|
||||
self.myData.data.style['iconBgColor'] = [color];
|
||||
} else {
|
||||
self.myData.data.style['iconColor'] = [color];
|
||||
}
|
||||
self.$forceUpdate();
|
||||
})
|
||||
},
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user