更新底部链接和隐藏回应

components/RespondAdd.vue

@@ -0,0 +1,123 @@
+<template>
+    <el-popover ref="addPopper" :width="470" trigger="click" popper-class="add-popper" :teleported="false"  :show-arrow="true" @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" v-for="(item, key) in item.data" :key="key" v-html="jointriposte(key)" @click="selectEomji(key)"></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: rgba(98, 177, 255, 1);
+    border-radius: 50%;
+    cursor: pointer;
+    position: relative;
+    // margin: 5px;
+
+    &.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;
+        }
+    }
+}
+</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>