mirror of
https://gitee.com/zoujingli/ThinkAdmin.git
synced 2025-04-25 10:56:38 +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.urls = [];
|
||||||
this.data.forEach(function (file) {
|
this.data.forEach(function (file) {
|
||||||
app.setValue(file.xurl);
|
app.setValue(file.xurl);
|
||||||
}), this.setInput();
|
});
|
||||||
|
this.setInput();
|
||||||
},
|
},
|
||||||
// 格式文件大小
|
// 格式文件大小
|
||||||
formatSize: function (size) {
|
formatSize: function (size) {
|
||||||
@ -78,7 +79,8 @@
|
|||||||
this.list.forEach(function (item) {
|
this.list.forEach(function (item) {
|
||||||
item.checked = !!app.idxs[item.id]
|
item.checked = !!app.idxs[item.id]
|
||||||
item.style = 'background-image:url(' + item.xurl + ')';
|
item.style = 'background-image:url(' + item.xurl + ')';
|
||||||
}), this.addPage(count);
|
});
|
||||||
|
this.addPage(count);
|
||||||
},
|
},
|
||||||
// 设置选择数据
|
// 设置选择数据
|
||||||
setValue: function (xurl) {
|
setValue: function (xurl) {
|
||||||
@ -128,9 +130,23 @@
|
|||||||
<label class="layui-hide" id="ImageDialogUploadLayout">
|
<label class="layui-hide" id="ImageDialogUploadLayout">
|
||||||
<!-- 图片上传组件 开始 -->
|
<!-- 图片上传组件 开始 -->
|
||||||
{if isset($get.file) && $get.file eq 'image'}
|
{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}
|
{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}
|
{/if}
|
||||||
<!-- 图片上传组件 结束 -->
|
<!-- 图片上传组件 结束 -->
|
||||||
</label>
|
</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