PC-vote/components/RespondAdd.vue

<template>
    <el-popover ref="addPopper" :width="470" trigger="click" popper-class="add-popper" :teleported="false" :offset="10" :show-arrow="false" @show="catState(true)" @hide="catState(false)" v-model:visible="state" :placement="type == 'bottom' ? 'top' : 'bottom'">
        <template #reference>
            <div class="respond-add flexcenter" :class="{ 'angle': state }">
                <img class="respond-add-icon" src="@/assets/img/plus-sign.svg" />
            </div>
        </template>

        <div class="respond-list-box">
            <div class="respond-list-title">选择你的回应：</div>
            <div class="respond-list">
                <template v-for="item in riposteoptions" :key="item">
                    <div class="respond-item flexcenter" v-for="(item, key) in item.data" :key="key">
                        <div class="respond-item-key" v-html="jointriposte(key)" @click="selectEomji(key)"></div>
                    </div>
                </template>
            </div>
        </div>
    </el-popover>
</template>

<script setup>
let props = defineProps({
    type: Boolean,
})

let state = ref(false)

let riposteoptions = inject("riposteoptions")
let selectEomjiPop = inject("selectEomjiPop")
let jointriposte = inject("jointriposte")

const emit = defineEmits(["update:respondShowState"])

const catState = value => {
    state.value = value
    if (props.type == "bottom") {
        emit("update:respondShowState", value)
    }
}

const addPopper = ref(null)

const selectEomji = key => {
    selectEomjiPop(key)
    addPopper.value.hide()
}
</script>

<style lang="less" scoped>
.respond-add {
    width: 30px;
    height: 30px;
    background-color: var(--main-color);
    // background: rgba(114, 219, 134, 1);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    &.angle {
        &::after {
            content: "";
            background: #f6f6f6;
            border: 1px solid #e4e7ed;
            border-bottom-color: transparent !important;
            border-right-color: transparent !important;
            border-top-left-radius: 2px;
            width: 10px;
            height: 10px;
            position: absolute;
            bottom: -17px;
            left: 50%;
            transform: translateX(-50%) rotate(45deg);
            z-index: 3000;
        }
    }

    .respond-add-icon {
        width: 14px;
        height: 14px;
    }
}

.respond-list-box {
    width: 470px;

    .respond-list-title {
        font-size: 14px;
        line-height: 22px;
        color: #333333;
        padding-top: 16px;
        padding-left: 20px;
        padding-bottom: 25px;
    }

    .respond-list {
        display: flex;
        flex-wrap: wrap;
        display: grid;
        grid-template-columns: repeat(10, 1fr);

        .respond-item {
            font-size: 20px;
            font-family: "emojifont";
            text-align: center;
            margin-bottom: 20px;
            // cursor: pointer;
            .respond-item-key {
                cursor: pointer;
                font-family: "emojifont";
                position: relative;
                z-index: 1; 

                &:hover {
                    &::after {
                        content: "";
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        display: block;
                        width: 35px;
                        height: 35px;
                        background-color: #eee;
                        border-radius: 4px;
                        z-index: -1;
                    }
                }
            }
        }
    }
}
</style>

<style lang="less">
.el-popover.el-popper.add-popper {
    padding: 0;
    background: #f6f6f6;
    border: 1px solid #ebebeb;
    border-radius: 10px;
    box-shadow: none;
    left: 0 !important;
}
.el-popper.add-popper.is-light .el-popper__arrow::before {
    background: #f6f6f6;
}
</style>