174~197

<template>

<el-button text @click="dialogVisible = true">

click to open the Dialog

</el-button>

<el-dialog

v-model="dialogVisible"

title="Tips"

width="30%"

:before-close="handleClose"

>

<span>This is a message</span>

<template #footer>

<span class="dialog-footer">

<el-button @click="dialogVisible = false">Cancel</el-button>

<el-button type="primary" @click="dialogVisible = false">

Confirm

</el-button>

</span>

</template>

</el-dialog>

</template>

组件对外暴露一个方法 open,基于open传来的参数,区分添加还是编辑

open({}) => 表单无需渲染,说明是添加

open({ id, cate_name,... }) => 表单需要渲染,说明是编辑

open调用后,可以打开弹窗

Vue2 => v-model :value 和 @input 的简写

Vue3 => v-model :modelValue 和 @update:modelValue 的简写

<channel-select v-model:modelValue="params.cate_id"></channel-select>

组件对外暴露一个方法 open,基于open传来的参数,区分添加还是编辑

open({}) => 表单无需渲染,说明是添加

open({ id,...,.. }) => 表单需要渲染,说明是编辑

open调用后,可以打开抽屉

相关推荐
神仙姐姐QAQ7 分钟前
vue3更改.el-dialog__header样式不生效
前端·javascript·vue.js
AI_567810 分钟前
Vue.js 深度开发指南:从数据绑定到状态管理的最佳实践
前端·javascript·vue.js
前端-文龙刚13 分钟前
浅记Vue3中 ref 和 reactive 是两种主要的响应式数据声明方式,它们有以下主要区别
前端·javascript·vue.js
源心锁9 小时前
👋 手搓 gzip 实现的文件分块压缩上传
前端·javascript
phltxy10 小时前
从零入门JavaScript:基础语法全解析
开发语言·javascript
Kagol10 小时前
JavaScript 中的 sort 排序问题
前端·javascript
cos11 小时前
Fork 主题如何更新?基于 Ink 构建主题更新 CLI 工具
前端·javascript·git
摸鱼的春哥12 小时前
AI编排实战:用 n8n + DeepSeek + Groq 打造全自动视频洗稿流水线
前端·javascript·后端
Coder_Boy_13 小时前
基于SpringAI的在线考试系统设计总案-知识点管理模块详细设计
android·java·javascript
冴羽15 小时前
2026 年 Web 前端开发的 8 个趋势!
前端·javascript·vue.js