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调用后,可以打开抽屉

相关推荐
江城开朗的豌豆2 小时前
Vue组件CSS防污染指南:让你的样式乖乖“宅”在自家地盘!
前端·javascript·vue.js
江城开朗的豌豆2 小时前
Vue组件花式传值:祖孙组件如何愉快地聊天?
前端·javascript·vue.js
拉不动的猪3 小时前
pc和移动页面切换的两种基本方案对比
前端·javascript·vue.js
Hilaku3 小时前
前端日志调试也能专业化?我们这样设计日志系统
前端·javascript
花果山总钻风4 小时前
Debian 编译安装 ruby3.2
前端·javascript·debian
BUG收容所所长4 小时前
深入理解 AJAX,从 XMLHttpRequest 到现代 Fetch API
前端·javascript·ajax
Sun_light4 小时前
「一文看懂 JS 深浅拷贝,彻底告别面试踩坑!」
前端·javascript
YG9084 小时前
微信小程序页面传参乱码问题如何解决?
前端·javascript
Hilaku4 小时前
前端权限系统怎么做才不会写吐?我们项目踩过的 3 套失败方案总结
前端·javascript·vue.js
nbsaas-boot4 小时前
Vue 组件数据流与状态控制最佳实践规范
前端·javascript·vue.js