neicanCMS/src/view/allMedia/components/H5Editor/from.vue

<template>
  <div style="position: relative" class="formbg">
    <van-form class="pragraph">
      <van-cell-group inset>
        <div class="text" v-text="item.title" @click.stop="select" :style="item.title_style"></div>
        <slot></slot>
      </van-cell-group>
    </van-form>
    <br />

    <div class="com addTop" @click.stop="addTop">
      <el-icon><Upload /></el-icon>
    </div>
    <div class="com addBottom" @click.stop="addBottom">
      <el-icon><Download /></el-icon>
    </div>
  </div>
</template>

<script setup>
import { defineProps, inject, defineEmits } from 'vue';
import 'vant/lib/index.css';
const starEditorFormwork = inject('starEditorFormwork');
const emit = defineEmits(['addComponent']);

const props = defineProps({
  item: Object,
  index: String,
});

const select = () => {
  const newItem = JSON.parse(JSON.stringify(props.item || {}));
  newItem.leftEle = true;
  newItem.nodetail = true;
  starEditorFormwork(newItem, props.index);
};

const addTop = () => {
  emit('addComponent', 'top', props.item.type, props.index);
};
const addBottom = () => {
  emit('addComponent', 'bottom', props.item.type, props.index);
};
</script>

<style scoped>
.pragraph {
  font-weight: 400;
}
.text {
  outline: none;
  border: 1px solid #fff;
  cursor: pointer;
}

.com {
  position: absolute;
  display: none;
  right: 0;
  color: #fff;
  background: #409eff;
  border-radius: 3px;
  padding: 3px;
  text-align: center;
  cursor: pointer;
}

.formbg:hover .com{
    display: block;
}

.addTop {
  top: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.addBottom {
  bottom: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.van_field_item:hover .addTop,
.van_field_item:hover .addBottom {
  display: block;
}
</style>