一、封装组件

article/components/ArticleEdit.vue

二、完善结构

1.准备数据

const formModel = ref({

title: '',

cate_id: '',

cover_img: '',

content: '',

state: ''

})

const open = async (row) => {

visibleDrawer.value = true

if (row.id) {

console.log('编辑回显')

} else {

console.log('添加功能')

}

}

2.准备 form 表单结构

import ChannelSelect from './ChannelSelect.vue'

3.一打开默认重置添加的 form 表单数据

const defaultForm = {

title: '',

cate_id: '',

cover_img: '',

content: '',

state: ''

}

const formModel = ref({ ...defaultForm })

const open = async (row) => {

visibleDrawer.value = true

if (row.id) {

console.log('编辑回显')

} else {

console.log('添加功能')

formModel.value = { ...defaultForm }

}

}

4.扩展 下拉菜单 width props

defineProps({

modelValue: {

type: [Number, String]

},

width: {

type: String

}

})

...

:style="{ width }"

>

三、上传文件模块

Element Plus 是一个基于 Vue 3 的组件库,它提供了一个 组件用于文件上传。以下是如何使用 Element Plus 的 组件进行文件上传的基本步骤:

引入 组件:在你的 Vue 组件中,你需要先引入 Element Plus 的 组件。 import { Upload } from 'element-plus'; 在模板中添加 :在你的 Vue 组件的模板中,添加 标签。 定义方法:在你的 Vue 组件的