技术分享 | 弹窗开发中，如何使用 Hook 封装 el-dialog？

在弹窗开发中使用 Hook 封装 Element UI 的 el-dialog 是一种常见且有效的做法，它可以使你的代码更加模块化、可维护。下面是一个简单的示例，演示如何使用 Vue.js 的 Hook 封装 Element UI 的 el-dialog：

// useDialog.js import { ref } from 'vue'; export default function useDialog() { // 使用 ref 创建响应式数据 const dialogVisible = ref(false); // 控制弹窗显示与隐藏的方法 const showDialog = () => { dialogVisible.value = true; }; const hideDialog = () => { dialogVisible.value = false; }; // 将需要暴露的数据和方法通过 return 返回 return { dialogVisible, showDialog, hideDialog }; } 

然后，你可以在你的组件中使用这个 Hook：

// YourComponent.vue <template> <div> <el-button @click="showDialog">打开弹窗</el-button> <el-dialog :visible="dialogVisible" @closed="hideDialog"> <!-- 这里放置弹窗内容 --> </el-dialog> </div> </template> <script> import useDialog from './useDialog'; export default { setup() { // 使用 useDialog Hook const { dialogVisible, showDialog, hideDialog } = useDialog(); return { dialogVisible, showDialog, hideDialog }; } }; </script> 

通过这种方式，你可以将 el-dialog 的逻辑与状态封装到一个 Hook 中，并在需要的地方重复使用。这样做不仅使代码更具可读性和可维护性，而且可以提高开发效率。