建设网站可以做什么,Wordpress生成密码加密方式,临沂企业自助建站,网站策划书免费在项目的制作过程中经常会用到弹窗组件#xff0c;这里假设一种情况当你在一个页面需要多个弹窗组件的时候怎么样才能精准的打开和关闭对应的弹窗呐#xff1f;#xff1f; ① 绑定一个点击事件----【给点击事件传入一个下标】这里是打开事件 ② 使用element-plus中的 :befo…在项目的制作过程中经常会用到弹窗组件这里假设一种情况当你在一个页面需要多个弹窗组件的时候怎么样才能精准的打开和关闭对应的弹窗呐 ① 绑定一个点击事件----【给点击事件传入一个下标】这里是打开事件 ② 使用element-plus中的 :before-close点击关闭事件但是在这里需要传入一个done,所以我的传递方式是这样的
div!-- 点击图标显示抽屉组件 --div :key1 clickdisplayDrawer(1) stylez-index:6666; position: absolute;left: 46%; top: 5%;svg-icon width30px height30px namezuopinxiangqing/svg-icon/div!-- 抽屉组件1 --el-drawer :key1 v-modeldrawerList[0].display title作品详情1 :directiondirection:before-close(done:any) handleClose(done, 2) :index1 styleright: 50%;spanHi there! This is drawer 1./span/el-drawer/div
div!-- 点击图标显示抽屉组件 --div :key2 clickdisplayDrawer(2)stylez-index:6666; width: 45px; display: flex; justify-content: flex-end; padding-right: 15px; svg-icon width30px height30px namezuopinxiangqing/svg-icon/div!-- 多个抽屉组件 --!-- 抽屉组件2 --el-drawer :key2 v-modeldrawerList[1].display title作品详情2 :directiondirection:before-close(done:any) handleClose(done, 2) :index2spanHi there! This is drawer 2./span/el-drawer/div这里有两个弹窗和对应的两个点击事件
script
const drawerList ref([{ index: 1, title: 作品详情1, display: false },{ index: 2, title: 作品详情2, display: false }
]);
const displayDrawer (index: any) {drawerList.value[index - 1].display true;
};const handleClose (done: any, index: any) {drawerList.value[index - 1].display false;done()
};
/script这里的
:before-close(done:any) handleClose(done, 2)这里我不是很清楚done的状态和类型方法所以使用了上面的方式将数据进行了传递最终效果。 这里实现了左右两个弹窗
