mediaAll/src/view/allMedia/components/H5Editor/van_field.vue

<template>
  <div class="van_field_bg">
    <van-field
      :required="isRequired"
      :label="label"
      :placeholder="placeholder"
      readonly
    >
      <template v-if="item.child_list && item.child_list.length" #input>
        <template v-for="(v, i) in item.child_list" :key="i">
          <h5-van-radio-group
            :item="v"
            v-if="v.type === 'van-radio-group'"
          ></h5-van-radio-group>
          <h5-van-uploader
            :item="v"
            v-if="v.type === 'van-uploader'"
          ></h5-van-uploader>
        </template>
      </template>
    </van-field>
    <div class="van_field_item"></div>
  </div>
</template>
<script setup>
import H5VanRadioGroup from './van_radio_group.vue';
import H5VanUploader from './van_uploader.vue';
import { ref, defineProps } from 'vue';
const label = ref('');
const placeholder = ref('');
const isRequired = ref(false);
const props = defineProps({
  item: Object,
});
const item = JSON.parse(JSON.stringify(props.item || '{}'));
label.value = item.attr.label || item.attr.name;
placeholder.value = item.attr.placeholder;
</script>

<style scoped>
.van_field_bg {
  position: relative;
}
.van_field_item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.van_field_item:hover{
    background-color: #00000080;
}
</style>