详情公共弹窗

shuishen

2024-01-17 3236aa26ce0ad86c23a5518e49933c532256bd32

详情公共弹窗

 src/components/detailsPopup/index.vue

New file
@@ -0,0 +1,118 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-01-17 16:04:08
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-01-17 16:29:57
 * @FilePath: \srs-police-affairs\src\components\detailsPopup\index.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
-->
<template>
    <!-- 宽度、高度，自己调整合适的 -->
    <el-dialog class="place-info-box" :title="popupTile" append-to-body :visible.sync="popupShow" center
        @close="popupClose">
        <div>
            <div v-for="(item, index) in data" :key="index">
                <div>
                    {{ item.label }}
                </div>

                <div>
                    {{ item.value }}
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: 'DetailsPopup',

    props: {
        popupTile: {
            type: String,
            default: ''
        }
    },

    data () {
        return {
            popupShow: false,

            data: []
        }
    },

    methods: {
        // 传入的data是要组装后的
        initOpen (data) {
            /**
             * 
             *  接口返回的数据，详情 
                {
                    name: '林东东',
                    phone: '13735689044'
                }

             *  data 格式 组装之前
             *  默认为
             *  [
                    {
                        label: '姓名',
                        props: 'name',
                        value: ''
                    },
                    {
                        label: '手机号',
                        props: 'phone',
                        value: ''
                    }
                ]
             * 
                data 格式 组装之后
                [
                    {
                        label: '姓名',
                        props: 'name',
                        value: '林东东'
                    },
                    {
                        label: '手机号',
                        props: 'phone',
                        value: '13735689044'
                    }
                ]
             * 
             * 
             * 
             */

            // this.data = data

            // 假数据
            this.data = [
                {
                    label: '姓名',
                    props: 'name',
                    value: '林东东'
                },
                {
                    label: '手机号',
                    props: 'phone',
                    value: '13735689044'
                }
            ]

            this.popupShow = true
        },

        popupClose () {
            this.popupShow = false
        }
    },
}
</script>

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