在main.js增加:
//自定义事件指令,点击需要判断登录的指令
Vue.directive('clickWithAuthLogin', {
bind: function (el, binding, vnode) {
el.onclick = function (event) {
//阻止事件冒泡
event.stopPropagation();
//监听点击事件,判断是否登录
if (!vnode.context.$store.state.isLogin) {
//未登录,跳转登录,附带当前页面的path,登录成功再跳转到本页面
vnode.context.$router.replace({path: '/login', query: {lastUrl: vnode.context.$route.fullPath}})
} else {
if (binding.expression) {
//已登录则,如果有后续执行的函数,则继续做组件自己的事件
binding.value()
}
}
}
// el.addEventListener('click', (event) => {
// }, true)
}
});
在业务组件中,需要点击的按钮样式中增加指令:
<mt-button v-else type='primary' :plain=true size='small' v-click-with-auth-login="openFocusClickApp">关注</mt-button>
methods: {
openFocusClickApp(){
console.log('关注某人')
},
}