80 lines
2.6 KiB
Vue
80 lines
2.6 KiB
Vue
<template>
|
||
<el-popover placement="bottom" :width="470" trigger="click" v-model:visible="selectEomjiPop">
|
||
<template #reference>
|
||
<div class="respond-add flexcenter" ref="add">
|
||
<img class="respond-add-icon" src="@/img/plus-sign.svg" />
|
||
</div>
|
||
</template>
|
||
<div class="respond-list-box" :style="{ 'top': top + 'px', 'left': left + 'px' }" @click.stop="">
|
||
<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>
|
||
<!-- <div class="respond-add flexcenter" ref="add" @click="open">
|
||
<img class="respond-add-icon" src="@/img/plus-sign.svg" />
|
||
<template v-if="selectEomjiPop">
|
||
<div class="respond-list-mask" @click.stop="close"></div>
|
||
<div class="respond-list-box" :style="{ 'top': top + 'px', 'left': left + 'px' }" @click.stop="">
|
||
<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>
|
||
</template>
|
||
</div> -->
|
||
</template>
|
||
|
||
<script setup>
|
||
const props = defineProps({
|
||
riposteoptions: Array,
|
||
index: Number,
|
||
})
|
||
|
||
const add = ref(null)
|
||
const top = ref(0)
|
||
const left = ref(0)
|
||
|
||
const open = () => {
|
||
console.log("add", add)
|
||
const addBox = add.value
|
||
const rect = addBox.getBoundingClientRect()
|
||
|
||
top.value = rect.top + 30 + 15
|
||
left.value = rect.left - 235 + 15
|
||
// top.value = rect.top - 150 + rect.height / 2
|
||
// left.value = rect.left + rect.width + 20
|
||
|
||
console.log("top", top.value)
|
||
console.log("left", left.value)
|
||
// console.log("pageYOffset", window.pageYOffset);
|
||
|
||
// this.respondTop = top
|
||
// this.respondLeft = left
|
||
|
||
selectEomjiPop.value = true
|
||
}
|
||
|
||
const close = () => {
|
||
selectEomjiPop.value = false
|
||
}
|
||
|
||
let selectEomjiPop = ref(false)
|
||
const emit = defineEmits(["selectEomji"])
|
||
|
||
const selectEomji = key => {
|
||
close()
|
||
emit("selectEomji", key, props.index, true)
|
||
}
|
||
|
||
const jointriposte = item => {
|
||
return `&#x${item};`
|
||
}
|
||
</script>
|
||
<style scoped></style>
|