<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2023-04-04 16:24:42
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-05-04 12:24:41
|
* @FilePath: \srs-police-affairs\src\components\imagesSelect\index.vue
|
* @Description:
|
*
|
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
|
-->
|
<template>
|
<div class="container" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
|
<div v-for="(item, index) in imageUrls" :key="index" @click.stop="curImgClick(item)">
|
<div class="content">
|
<el-tooltip class="item" effect="dark" :content="item.title" placement="top">
|
<img :src="item.url" alt />
|
</el-tooltip>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getIconsAll } from "@/api/icons/index"
|
export default {
|
name: 'ImagesSelect',
|
|
data () {
|
return {
|
imageUrls: [],
|
loading: false
|
}
|
},
|
|
created () {
|
this.requireImage()
|
},
|
|
methods: {
|
requireImage () {
|
this.imageUrls = []
|
|
getIconsAll().then(res => {
|
res.data.data.forEach(item => {
|
let imgArr = item.split('/')
|
|
let title = imgArr[imgArr.length - 1].split('.')[0]
|
|
this.imageUrls.push({
|
url: item,
|
title
|
})
|
})
|
this.loading = false
|
})
|
},
|
|
curImgClick (item) {
|
this.$emit('curClick', item.url)
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.container {
|
position: absolute;
|
left: 0;
|
top: 100%;
|
z-index: 999999;
|
display: flex;
|
flex-wrap: wrap;
|
|
min-width: 420px;
|
max-height: 360px;
|
overflow-x: hidden;
|
overflow-y: auto;
|
background: $el-dialog-bg-color;
|
border-radius: 10px;
|
|
& > div {
|
padding: 6px;
|
margin: 10px;
|
width: 50px;
|
height: 20px;
|
cursor: pointer;
|
border: 1px solid #fff;
|
border-radius: 8px;
|
box-sizing: content-box;
|
|
&:hover {
|
color: #409eff;
|
border-color: #409eff;
|
}
|
|
.content {
|
position: relative;
|
height: 20px;
|
|
img {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
margin: auto;
|
width: 20px;
|
height: 20px;
|
}
|
}
|
}
|
}
|
</style>
|
