124 lines
3.1 KiB
Vue
124 lines
3.1 KiB
Vue
|
<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>
|