背景
产品需求在离开当前tab之前要对页面填写信息进行校验,若没有任何改动则可以直接切换tab,若有改动,则需要在跳转之前进行拦截,提示用户:当前页面信息未保存,确定离开吗?确定或取消由用户选择。
代码实现
<kc-tabs v-model="activeName" @tab-click="handleClick" :before-leave="beforeLeave">
<kc-tab-pane :label="menuName.appointName" name="first">
<!--First-component和Second-component为自定义组件-->
<First-component ref="first" v-if="activeName === 'first'" @tabChange="tabChange">
</First-component>
</kc-tab-pane>
<kc-tab-pane :label="menuName.historyName" name="second">
<Second-component ref="second" v-if="activeName === 'second