mirror of
https://gitee.com/zoujingli/ThinkAdmin.git
synced 2025-04-06 03:58:04 +08:00
优化图片选择器
This commit is contained in:
邹景立
parent
e61f624ce6
commit
2e2c8e1b49
@ -1,152 +0,0 @@
|
||||
<div class="image-dialog" id="ImageDialog">
|
||||
<div class="image-dialog-head">
|
||||
<div class="pull-left flex">
|
||||
<input class="layui-input margin-right-5" v-model="keys" style="height:30px;line-height:30px" placeholder="请输入搜索关键词">
|
||||
<a class="layui-btn layui-btn-sm layui-btn-normal" @click="search">搜 索</a>
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
<a class="layui-btn layui-btn-sm" @click="uploadImage">上传图片</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-dialog-body">
|
||||
<div class="image-dialog-item" v-for="x in items" v-if="show">
|
||||
<div class="uploadimage" :style="x.style" @click="setValue(x.xurl)"></div>
|
||||
<p class="image-dialog-item-name layui-elip" v-text="x.name"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-dialog-foot">
|
||||
<div id="ImageDialogPage" class="image-dialog-page"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.image-dialog-head {
|
||||
clear: both;
|
||||
height: 30px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.image-dialog-body {
|
||||
height: 470px;
|
||||
background: #efefef;
|
||||
padding-top: 12px;
|
||||
padding-left: 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.image-dialog-item {
|
||||
position: relative;
|
||||
margin-right: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.image-dialog-item-name {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
color: #fff;
|
||||
padding: 3px 10px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
line-height: 1.5em;
|
||||
white-space: nowrap;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.image-dialog-item .uploadimage {
|
||||
margin: 0;
|
||||
width: 145px;
|
||||
height: 145px;
|
||||
}
|
||||
|
||||
.image-dialog-foot {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.image-dialog-page {
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image-dialog-page .layui-laypage a,
|
||||
.image-dialog-page .layui-laypage span {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
require(['vue'], function (vue) {
|
||||
var app = new vue({
|
||||
el: '#ImageDialog',
|
||||
data: {
|
||||
page: 1,
|
||||
limit: 15,
|
||||
show: false,
|
||||
$btn: null,
|
||||
keys: '',
|
||||
items: [],
|
||||
},
|
||||
created: function () {
|
||||
this.$btn = $('#{$get.id|default=""}');
|
||||
this.loadPage();
|
||||
},
|
||||
methods: {
|
||||
// 创建分页工具条
|
||||
addPage: function (count) {
|
||||
var that = this;
|
||||
this.show = true;
|
||||
layui.laypage.render({
|
||||
curr: this.page, count: count, limit: that.limit,
|
||||
layout: ['count', 'prev', 'page', 'next', 'refresh'],
|
||||
elem: 'ImageDialogPage', jump: function (obj, first) {
|
||||
if (!first) that.loadPage(that.page = obj.curr);
|
||||
},
|
||||
});
|
||||
},
|
||||
// 搜索刷新数据
|
||||
search: function () {
|
||||
this.page = 1;
|
||||
this.loadPage();
|
||||
},
|
||||
// 设置选择数据
|
||||
setValue: function (url) {
|
||||
this.$btn.trigger('choose', url);
|
||||
if (this.$btn.data('input')) $(this.$btn.data('input')).val(url).trigger('change', url);
|
||||
$('#ImageDialog').parents('.layui-layer-content').next().find('.layui-layer-close').trigger('click');
|
||||
},
|
||||
// 加载页面数据
|
||||
loadPage: function () {
|
||||
var that = this;
|
||||
this.params = {page: this.page, limit: this.limit, output: 'layui.table', name: this.keys || ''};
|
||||
$.form.load('{:url("image")}', this.params, 'get', function (ret) {
|
||||
that.addPage(ret.count);
|
||||
that.items = ret.data;
|
||||
that.items.forEach(function (item) {
|
||||
item.style = 'background-image:url(' + item.xurl + ')';
|
||||
});
|
||||
return false;
|
||||
});
|
||||
},
|
||||
// 上传图片文件
|
||||
uploadImage: function () {
|
||||
$('[data-field="image-dialog-upload-input"]').click();
|
||||
$('[name="image-dialog-upload-input"]').one('change', function (e) {
|
||||
app.setValue(e.currentTarget.value);
|
||||
// e.currentTarget.value 取上传后的值
|
||||
// app.page = 1;
|
||||
// app.loadPage();
|
||||
});
|
||||
},
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<label class="layui-hide">
|
||||
<!-- 图片上传组件 开始 -->
|
||||
<input class="layui-input" name="image-dialog-upload-input">
|
||||
<button class="layui-btn" data-file data-type="png,jpg,jpeg,gif" data-field="image-dialog-upload-input"></button>
|
||||
<!-- 图片上传组件 结束 -->
|
||||
</label>
|
||||
@ -53,7 +53,8 @@
|
||||
this.urls = [];
|
||||
this.data.forEach(function (file) {
|
||||
app.setValue(file.xurl);
|
||||
}), this.setInput();
|
||||
});
|
||||
this.setInput();
|
||||
},
|
||||
// 格式文件大小
|
||||
formatSize: function (size) {
|
||||
@ -78,7 +79,8 @@
|
||||
this.list.forEach(function (item) {
|
||||
item.checked = !!app.idxs[item.id]
|
||||
item.style = 'background-image:url(' + item.xurl + ')';
|
||||
}), this.addPage(count);
|
||||
});
|
||||
this.addPage(count);
|
||||
},
|
||||
// 设置选择数据
|
||||
setValue: function (xurl) {
|
||||
@ -128,9 +130,23 @@
|
||||
<label class="layui-hide" id="ImageDialogUploadLayout">
|
||||
<!-- 图片上传组件 开始 -->
|
||||
{if isset($get.file) && $get.file eq 'image'}
|
||||
<button class="layui-btn" data-file data-path="{$get.path|default=''}" data-type="png,jpg,jpeg,gif"></button>
|
||||
<button data-file="one"
|
||||
data-type="png,jpg,jpeg,gif"
|
||||
data-path="{$get.path|default=''}"
|
||||
data-cut-width="{$get.cutWidth|default=0}"
|
||||
data-cut-height="{$get.cutHeight|default=0}"
|
||||
data-max-width="{$get.maxWidth|default=0}"
|
||||
data-max-height="{$get.maxHeight|default=0}"
|
||||
></button>
|
||||
{else}
|
||||
<button class="layui-btn" data-file="mul" data-path="{$get.path|default=''}" data-type="png,jpg,jpeg,gif"></button>
|
||||
<button data-file="mul"
|
||||
data-type="png,jpg,jpeg,gif"
|
||||
data-path="{$get.path|default=''}"
|
||||
data-cut-width="{$get.cutWidth|default=0}"
|
||||
data-cut-height="{$get.cutHeight|default=0}"
|
||||
data-max-width="{$get.maxWidth|default=0}"
|
||||
data-max-height="{$get.maxHeight|default=0}"
|
||||
></button>
|
||||
{/if}
|
||||
<!-- 图片上传组件 结束 -->
|
||||
</label>
|
||||
@ -1,152 +0,0 @@
|
||||
<div class="image-dialog" id="ImageDialog">
|
||||
<div class="image-dialog-head">
|
||||
<div class="pull-left flex">
|
||||
<input class="layui-input margin-right-5" v-model="keys" style="height:30px;line-height:30px" placeholder="请输入搜索关键词">
|
||||
<a class="layui-btn layui-btn-sm layui-btn-normal" @click="search">搜 索</a>
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
<a class="layui-btn layui-btn-sm" @click="uploadImage">上传图片</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-dialog-body">
|
||||
<div class="image-dialog-item" v-for="x in items" v-if="show">
|
||||
<div class="uploadimage" :style="x.style" @click="setValue(x.xurl)"></div>
|
||||
<p class="image-dialog-item-name layui-elip" v-text="x.name"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-dialog-foot">
|
||||
<div id="ImageDialogPage" class="image-dialog-page"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.image-dialog-head {
|
||||
clear: both;
|
||||
height: 30px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.image-dialog-body {
|
||||
height: 470px;
|
||||
background: #efefef;
|
||||
padding-top: 12px;
|
||||
padding-left: 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.image-dialog-item {
|
||||
position: relative;
|
||||
margin-right: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.image-dialog-item-name {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
color: #fff;
|
||||
padding: 3px 10px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
line-height: 1.5em;
|
||||
white-space: nowrap;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.image-dialog-item .uploadimage {
|
||||
margin: 0;
|
||||
width: 145px;
|
||||
height: 145px;
|
||||
}
|
||||
|
||||
.image-dialog-foot {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.image-dialog-page {
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image-dialog-page .layui-laypage a,
|
||||
.image-dialog-page .layui-laypage span {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
require(['vue'], function (vue) {
|
||||
var app = new vue({
|
||||
el: '#ImageDialog',
|
||||
data: {
|
||||
page: 1,
|
||||
limit: 15,
|
||||
show: false,
|
||||
$btn: null,
|
||||
keys: '',
|
||||
items: [],
|
||||
},
|
||||
created: function () {
|
||||
this.$btn = $('#{$get.id|default=""}');
|
||||
this.loadPage();
|
||||
},
|
||||
methods: {
|
||||
// 创建分页工具条
|
||||
addPage: function (count) {
|
||||
var that = this;
|
||||
this.show = true;
|
||||
layui.laypage.render({
|
||||
curr: this.page, count: count, limit: that.limit,
|
||||
layout: ['count', 'prev', 'page', 'next', 'refresh'],
|
||||
elem: 'ImageDialogPage', jump: function (obj, first) {
|
||||
if (!first) that.loadPage(that.page = obj.curr);
|
||||
},
|
||||
});
|
||||
},
|
||||
// 搜索刷新数据
|
||||
search: function () {
|
||||
this.page = 1;
|
||||
this.loadPage();
|
||||
},
|
||||
// 设置选择数据
|
||||
setValue: function (url) {
|
||||
this.$btn.trigger('choose', url);
|
||||
if (this.$btn.data('input')) $(this.$btn.data('input')).val(url).trigger('change', url);
|
||||
$('#ImageDialog').parents('.layui-layer-content').next().find('.layui-layer-close').trigger('click');
|
||||
},
|
||||
// 加载页面数据
|
||||
loadPage: function () {
|
||||
var that = this;
|
||||
this.params = {page: this.page, limit: this.limit, output: 'layui.table', name: this.keys || ''};
|
||||
$.form.load('{:url("image")}', this.params, 'get', function (ret) {
|
||||
that.addPage(ret.count);
|
||||
that.items = ret.data;
|
||||
that.items.forEach(function (item) {
|
||||
item.style = 'background-image:url(' + item.xurl + ')';
|
||||
});
|
||||
return false;
|
||||
});
|
||||
},
|
||||
// 上传图片文件
|
||||
uploadImage: function () {
|
||||
$('[data-field="image-dialog-upload-input"]').click();
|
||||
$('[name="image-dialog-upload-input"]').one('change', function (e) {
|
||||
app.setValue(e.currentTarget.value);
|
||||
// e.currentTarget.value 取上传后的值
|
||||
// app.page = 1;
|
||||
// app.loadPage();
|
||||
});
|
||||
},
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<label class="layui-hide">
|
||||
<!-- 图片上传组件 开始 -->
|
||||
<input class="layui-input" name="image-dialog-upload-input">
|
||||
<button class="layui-btn" data-file data-type="png,jpg,jpeg,gif" data-field="image-dialog-upload-input"></button>
|
||||
<!-- 图片上传组件 结束 -->
|
||||
</label>
|
||||
Loading…
x
Reference in New Issue
Block a user