自定图片显示调整

shuishen

2023-05-02 0c75e60824df1ab923078d90eaef75a52b5668ab

自定图片显示调整

 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-13 16:31:53
 * @LastEditTime: 2023-05-02 15:35:12
 * @FilePath: \srs-police-affairs\src\components\imagesSelect\index.vue
 * @Description: 
 * 
@@ -12,7 +12,9 @@
    <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" alt="">
                <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
                    <img :src="item.url" alt />
                </el-tooltip>
            </div>
        </div>
    </div>
@@ -36,8 +38,23 @@

    methods: {
        requireImage () {
            this.imageUrls = []

            getIconsAll().then(res => {
                this.imageUrls = res.data.data

                res.data.data.forEach(item => {
                    let imgArr = item.split('/')

                    let title = imgArr[imgArr.length - 1].split('.')[0]

                    console.log(item, title, 465)

                    this.imageUrls.push({
                        url: item,
                        title
                    })
                })
                this.loading = false
            })
        },
@@ -58,31 +75,31 @@
    display: flex;
    flex-wrap: wrap;

    width: 560px;
    min-width: 420px;
    max-height: 360px;
    overflow-x: hidden;
    overflow-y: auto;
    background: $el-dialog-bg-color;
    border-radius: 10px;

    &>div {
    & > div {
        padding: 6px;
        margin: 10px;
        width: 100px;
        height: 40px;
        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;
@@ -91,8 +108,8 @@
                right: 0;
                bottom: 0;
                margin: auto;
                width: 40px;
                height: 40px;
                width: 20px;
                height: 20px;
            }
        }
    }