一、封装组件
article/components/ArticleEdit.vue
Hi there!
二、完善结构
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'
v-model="visibleDrawer" :title="formModel.id ? '编辑文章' : '添加文章'" direction="rtl" size="50%" > v-model="formModel.cate_id" width="100%" > 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 的组件库，它提供了一个 引入 大家都在找： vue.js：vue.js框架 前端：前端开发需要学什么 javascript：javascript 菜鸟教程
发表评论