1

guanqb

2024-01-20 f13afcb61276061871b30bce17a7877287df0b67

 src/components/imagesSelect/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-04-04 16:24:42
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-04-07 15:59:41
 * @LastEditTime: 2023-05-04 12:24:41
 * @FilePath: \srs-police-affairs\src\components\imagesSelect\index.vue
 * @Description: 
 * 
@@ -12,17 +12,16 @@
    <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 }}
                <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
                    <img :src="item.url" alt />
                </el-tooltip>
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios"
import { getIconsAll } from "@/api/icons/index"
export default {
    name: 'ImagesSelect',

@@ -39,20 +38,25 @@

    methods: {
        requireImage () {
            axios.get('/icons').then(res => {
                res.data.forEach(item => {
            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: `/icons/${item}`,
                        name: item.substring(0, item.length - 4)
                        url: item,
                        title
                    })
                })

                this.loading = false
            })
        },

        curImgClick (item) {
            this.$emit('curClick', item)
            this.$emit('curClick', item.url, 1)
        }
    },
}
@@ -67,8 +71,8 @@
    display: flex;
    flex-wrap: wrap;

    width: 560px;
    height: 360px;
    min-width: 420px;
    max-height: 360px;
    overflow-x: hidden;
    overflow-y: auto;
    background: $el-dialog-bg-color;
@@ -77,21 +81,21 @@
    &>div {
        padding: 6px;
        margin: 10px;
        width: 100px;
        height: 60px;
        width: 50px;
        height: 20px;
        cursor: pointer;
        border: 1px solid #fff;
        border-radius: 8px;
        box-sizing: content-box;

        &:hover {
            color: #409EFF;
            border-color: #409EFF;
            color: #409eff;
            border-color: #409eff;
        }

        .content {
            position: relative;
            height: 40px;
            height: 20px;

            img {
                position: absolute;
@@ -100,18 +104,9 @@
                right: 0;
                bottom: 0;
                margin: auto;
                width: 40px;
                height: 40px;
                width: 20px;
                height: 20px;
            }
        }

        .name {
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            overflow: hidden; //超出的文本隐藏
            text-overflow: ellipsis; //溢出用省略号显示
            white-space: nowrap; //溢出不换行
        }
    }
}