xyy-m/src/components/CreateNote/InsertTitleSection.vue

<template>
  <div
    class="relative box-border flex min-h-60 items-center justify-between space-x-10 rounded-lg border border-dashed border-primary bg-white px-10 py-10"
    ref="target"
  >
    <van-cell-group class="border" inset>
      <van-field
        v-model="title"
        rows="1"
        autosize
        label-width="5"
        type="textarea"
        placeholder="请输入段落标题..."
        maxlength="50"
        show-word-limit
      ></van-field>
    </van-cell-group>
    <span class="text-3xl text-black-3">{{ title }}</span>
    <div
      v-show="!isOutside"
      class="absolute right-0 top-0 flex h-26 items-center justify-center space-x-15 bg-[rgba(0,0,0,0.7)] px-12 transition-all"
    >
      <span
        @click="$emit('onEdit')"
        class="iconfont icon-edit-square cursor-pointer text-white"
        style="font-size: 18px"
      ></span>
      <span
        @click="$emit('onDelete')"
        class="iconfont icon-delete cursor-pointer text-white"
        style="font-size: 18px"
      ></span>
    </div>
  </div>
</template>

<script setup>
import { useMouseInElement } from '@vueuse/core'

const target = ref(null)
const { isOutside } = useMouseInElement(target)

const props = defineProps({
  title: String
})

defineEmits(['onEdit', 'onDelete'])
</script>

<style lang="scss" scoped></style>