vue移动端h5伪类active没有效果问题
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
设置伪类:active样式以后,点击按钮发现没效果,仔细研究发现是click事件在点击态没有出现的时候就触发了,如果没有绑定click,或者click里没有进行页面跳转、dom节点删除等操作的话还是可以看到点击态的,尤其特别的是,自定义组件中不会有这个问题,因为在自定义组件中click以后emit将事件向组件调用者传递,vue的事件触发、事件分发系统是有时间延迟的,有了时间延迟也就看到了点击态。
vue项目解决方案
自定义clicked指令,路径./directives/clicked.js
/*
自定义指令:clicked
使用方法:
<button v-clicked @clicked="handleClick"></button>
要点:
1:使用v-clicked指令
2:监听clicked事件
适用场景:
vue 在移动端监听click事件的时候,click在点击态出现前就触发了,
如果回调中有dom删除、页面跳转等操作,导致点击态还没来得及出现,
就页面切换或者删除dom节点了
*/
import Util from "../util/index.js";
const EVENT_NAME = "clicked";
function emit(el){
/*
令节点触发clicked事件
*/
if(el && el.dispatchEvent){
let evt = document.createEvent("HTMLEvents")
evt.initEvent(EVENT_NAME,false,false)
el.dispatchEvent(evt)
}
else {
console.error("invalid el for no dispatchEvent method found.",el)
}
}
class EmitterProxy {
/*
click事件代理器
*/
constructor(el){
this.el = el;
}
click(){
if(Util.isPhone()){
setTimeout(this.emit.bind(this), 200);
}
else{
this.emit()
}
}
on(){
/*
事件监听接口,由子类实现
子类需要监听click事件,将this.click作为click事件监听器,
将click事件触发以后的逻辑委托到this.click处理
*/
// do nothing
}
emit(){
/*
事件触发接口,由子类实现
子类需要在此接口中实现触发clicked事件的具体逻辑
*/
// do nothing
}
}
class EmitterProxy4HtmlElement extends EmitterProxy {
/*
针对原生html元素的click事件代理器
*/
constructor(el){
super(el)
}
on(){
this.el.addEventListener("click",this.click.bind(this))
}
emit(){
emit(this.el)
}
}
class EmitterProxy4Vnode extends EmitterProxy {
/*
针对Vue生成的Vnode的 click事件代理器
*/
constructor(vnode){
super(vnode.componentInstance)
}
on(){
this.el.$on("click",this.click.bind(this))
}
emit(){
this.el.$emit(EVENT_NAME,{})
}
}
export default {
install( Vue ){
Vue.directive(EVENT_NAME, {
// 只调用一次,指令第一次绑定到元素时调用
bind: function (el, _, vnode) {
/*
监听click事件,通过事件代理,在click事件触发的时候,
判断是否在移动端,是的话,延迟200ms触发clicked事件,
否则立即触发clicked事件,用户通过监听clicked事件来
等待click和点击态的完成
*/
let emitter = new EmitterProxy4HtmlElement(el)
if(vnode && vnode.componentInstance){
emitter = new EmitterProxy4Vnode(vnode)
}
emitter.on()
}
})
}
};
使用指令:
import Vue from 'vue'
import Clicked from "./directives/clicked.js";
Vue.use(Clicked);
<button v-clicked @clicked="handleClick"></button>
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)