<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2023-04-04 16:24:42
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-04-07 15:59: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">
|
<img :src="item.url" alt="">
|
</div>
|
<div class="name">
|
{{ item.name }}
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import axios from "axios"
|
export default {
|
name: 'ImagesSelect',
|
|
data () {
|
return {
|
imageUrls: [],
|
loading: false
|
}
|
},
|
|
created () {
|
this.requireImage()
|
},
|
|
methods: {
|
requireImage () {
|
axios.get('/icons').then(res => {
|
res.data.forEach(item => {
|
this.imageUrls.push({
|
url: `/icons/${item}`,
|
name: item.substring(0, item.length - 4)
|
})
|
})
|
|
this.loading = false
|
})
|
},
|
|
curImgClick (item) {
|
this.$emit('curClick', item)
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.container {
|
position: absolute;
|
left: 0;
|
top: 100%;
|
z-index: 999999;
|
display: flex;
|
flex-wrap: wrap;
|
|
width: 560px;
|
height: 360px;
|
overflow-x: hidden;
|
overflow-y: auto;
|
background: $el-dialog-bg-color;
|
border-radius: 10px;
|
|
&>div {
|
padding: 6px;
|
margin: 10px;
|
width: 100px;
|
height: 60px;
|
cursor: pointer;
|
border: 1px solid #fff;
|
border-radius: 8px;
|
box-sizing: content-box;
|
|
&:hover {
|
color: #409EFF;
|
border-color: #409EFF;
|
}
|
|
.content {
|
position: relative;
|
height: 40px;
|
|
img {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
margin: auto;
|
width: 40px;
|
height: 40px;
|
}
|
}
|
|
.name {
|
height: 20px;
|
line-height: 20px;
|
font-size: 12px;
|
overflow: hidden; //超出的文本隐藏
|
text-overflow: ellipsis; //溢出用省略号显示
|
white-space: nowrap; //溢出不换行
|
}
|
}
|
}
|
</style>
|
