后台系统配置，开发新组件流程

1、 在 hook/useSubData.js中，组件类型数组中，新增组件名字name以及组件名称value

{label:'测试',value:'atest'}

如果有图片，且图片在的字段 不存在已有的配置项中，需要新增 case 判断，比如新增的组件，图片字段为 images

如果新增的组件是数组形式，配置方式如下：

case pickImg.name == 'images':
data.value[pickImg.valueIndex].images= res.value
break;

如果新增的组件不是数组形式，配置方式如下：

case pickImg.name == 'images':
data.value.images= res.value
break;

2、在 views/index/components 目录下 新增模板组件 atest.vue，组件基础结构可以直接使用组件模板.vue

<template>
<!-- 文本数据示例 -->
<input type="text" v-model="element.text">

<!-- 图片数据示例 -->
<!-- emit('selectImg','img') 向上传递需要选择图片的组件名称，img可以自定义，需要跟第一步，图片上传成功后的配置 case pickImg.name 一致 -->
<el-image @click="emit('selectImg','img')" :src="config.qnUrl + element.img" fit="scale-down" lazy/>
</template>

<script setup>
import publicJS from "@/hook/public.js";
const {config,defaultImg} = publicJS();

const emit = defineEmits(["selectImg"]);//自定义事件
const props = defineProps({
    element: {
    type:Object,
        default:()=>{
            return {}
        }
    }
})

//组件数据结构
const formData = {
    text: '',
}

//暴露方法给父组件 通过ref.value调用
defineExpose({
    formData
})
</script>

<style scoped>

</style>

3、在views/index/components/index 组件库中，引入并使用刚创建开发好的atest.vue组件，并做好组件名称判断

import aTest from "./test.vue"

<!-- 测试组件 -->
<aTest 
	v-if="name == 'atest'" 
	:element="element">
</aTest>

如果组件中涉及到图片，需要在组件中向上传递选择组件信息

<!-- 测试组件 -->
<aTest 
	v-if="name == 'atest'" 
	:element="element"
	@selectImg="emit('selectImg',$event)">
</aTest>

上一篇：解决一个页面中，组件多次调用触发回调，回调函数中加入索引

下一篇：php利用curl保存网络图片到到本地服务器