el-popover彈窗二次封裝1.0

el-popover彈窗二次封裝1.0

使用案例

<template>
    <div class="flex-center-g">
        <tooltip :row="row"></tooltip>
    </div>
</template>

<script>
import tooltip from '../components/common/tooltip'
export default {
    components: { tooltip },
    data() {
        return {
            row: [
                {
                    name: '項羽',
                    type: '電話回訪',
                    lastLinkupTime: '12',
                    lastLinkupInfo: '大撒大大'
                }
            ]
        }
    },
}
</script>

popover.vue

<template>
    <el-popover
        :placement="placement"
        class="popover_item"
        width="260"
        trigger="click"
        :disabled="disabled"
        v-model="popover.show"
        :visible-arrow="popover.arrowShow"
    >
        <div class="noticeTip">
            <div class="noticeTip_header">
                <p class="noticeTip-title">最近跟進記錄</p>
                <i class="el-icon-close" @click="popover.show = false"></i>
            </div>
            <div class="noticeTip-contect">
                <div
                    class="noticeItem"
                    v-for="(item, index) in row"
                    :key="index"
                >
                    <div class="noticeItem_p">
                        <span class="name">{{ item.name }}</span>
                        <span class="c-orgin">{{ item.type }}</span>
                    </div>
                    <div class="noticeItem_p">
                        <span>溝通時間：</span>
                        <span>{{ item.lastLinkupTime }}</span>
                    </div>
                    <div class="noticeItem_p">
                        <span>溝通備註：</span>
                        <span>{{ item.lastLinkupInfo }}</span>
                    </div>
                </div>
            </div>
        </div>
        <p slot="reference" class="c-default-g pointer-g">查看</p>
    </el-popover>
</template>
<script>
export default {
    props: {
        row: {
            type: Array,
            default: () => {
                return []
            }
        },
        popover: {
            type: Object,
            default: () => {
                return {
                    arrowShow: false, //是否顯示箭頭
                    show: false //彈窗顯示/隱藏
                }
            }
        },
         // 顯示方向
        placement: {
            type: String,
            default: 'right-start'
        },
        //是否禁用彈窗
        disabled: {
            type: Boolean,
            default: false
        }
    }
}
</script>
<style lang="less">
.el-popover {
    padding: 0;
}
</style>
<style lang="less" scoped>
.noticeTip {
    .name {
        padding-right: 10px;
        font-size: 20px;
    }
    .c-orgin {
        font-size: 12px;
        color: #ff7c35;
    }
    .noticeTip_header {
        background: #4e617c;
        justify-content: space-between;
        position: relative;
        display: flex;
        padding: 5px 20px;
        color: #fff;
        .el-icon-close {
            position: absolute;
            top: 5px;
            right: 10px;
            cursor: pointer;
        }
    }
    .noticeTip-contect {
        max-height: 250px;
        overflow-y: scroll;
        padding: 0 20px 20px 20px;
        .noticeItem {
            border-bottom: 1px dotted #ddd;
            padding: 20px 0;
        }
    }
}
</style>