自定义图片标注的更改

shuishen

2023-04-04 c8a9715c9b37397ce51f00cb1613815cc80af68d

自定义图片标注的更改

 src/components/imagesSelect/index.vue

@@ -1,7 +1,19 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-04-04 16:24:42
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-04-04 18:28:44
 * @FilePath: \srs-police-affairs\src\components\imagesSelect\index.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <div class="container">
        <div v-for="(item, index) in imageUrls" :key="index">
            <img :src="item.url" alt="">
        <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>
@@ -20,10 +32,8 @@
        }
    },

    mounted () {
        setTimeout(() => {
            this.requireImage()
        }, 5000)
    created () {
        this.requireImage()
    },

    methods: {
@@ -40,6 +50,10 @@

                console.log(this.imageUrls, 4555)
            })
        },

        curImgClick (item) {
            this.$emit('curClick', item)
        }
    },
}
@@ -50,13 +64,40 @@
    // position: absolute;
    // left: 0;
    // bottom: -10px;
    display: flex;

    width: 400px;
    height: 360px;

    &>div {
        margin: 10px;
        width: 60px;
        height: 80px;
        cursor: pointer;
        border: 1px solid #fff;
        border-radius: 8px;

        .content {
            position: relative;
            height: 60px;

            img {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                width: 60px;
                height: 60px;
            }
        }

        .name {
            height: 20px;
            line-height: 20px;
            font-size: 14px;
        }
    }
}
</style>

 src/views/activity/components/customImageBox.vue

New file
@@ -0,0 +1,75 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-04-04 18:30:49
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-04-04 18:35:29
 * @FilePath: \srs-police-affairs\src\views\activity\components\customImageBox.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <div>
        <el-dialog :title="curDialogTitle" :visible.sync="curDialogShow" class="activity-custom-img-box"
            :before-close="closeCurDialog">
            <div class="describe">
                <div class="label">
                    描述
                </div>
                <div class="val"></div>
            </div>
            <div class="select-image">
                <div class="label">
                    选择图片
                </div>
                <div class="image-button">
                    <el-button type="primary">选择图片</el-button>
                </div>
            </div>
            <div class="edit-line-btn-box">
                <el-button @click="editCustomImage">编辑</el-button>
                <el-button @click="saveCustomImage">保存</el-button>
                <el-button @click="deleteCustomImage">删除</el-button>
                <el-button @click="addCustomImage">添加</el-button>
                <el-button @click="closeCurDialog">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data () {
        return {
            curDialogTitle: '',
            curDialogShow: false,

        }
    },

    methods: {
        addCustomImage () {

        },

        editCustomImage () {

        },

        saveCustomImage () {

        },

        deleteCustomImage () {

        },

        closeCurDialog () {
            this.curDialogShow = false
        },
    },

}
</script>

<style lang="scss" scoped></style>