使用vue 指令怎么实现气泡提示效果?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
10年的迪庆州网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。营销型网站建设的优势是能够根据用户设备显示端的尺寸不同,自动调整迪庆州建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联从事“迪庆州网站设计”,“迪庆州网站推广”以来,每个客户项目都认真落实执行。气泡指令
import { on , off , once, contains, elemOffset, position, addClass, removeClass } from '../utils/dom'; import Vue from 'vue' const global = window; const doc = global.document; const top = 15; export default { name : 'jc-tips' , bind (el , binding , vnode) { // 确定el 已经在页面里 为了获取el 位置信信 Vue.nextTick(() => { const { context } = vnode; const { expression } = binding; // 气泡元素根结点 const fWarpElm = doc.createElement('div'); // handleFn 气泡里的子元素(自定义) const handleFn = binding.expression && context[expression] || (() => ''); const createElm = handleFn(); fWarpElm.className = 'hide jc-tips-warp'; fWarpElm.appendChild(createElm); doc.body.appendChild(fWarpElm); // 给el 绑定元素待其他操作用 el._tipElm = fWarpElm; el._createElm = createElm; // 鼠标放上去的 回调函数 el._tip_hover_fn = function(e) { // 删除节点函数 removeClass(fWarpElm, 'hide'); fWarpElm.style.opacity = 0; // 不加延迟 fWarpElm的大小信息 (元素大小是 0 0)---> 删除 class 不是立即渲染 setTimeout(() => { const offset = elemOffset(fWarpElm); const location = position(el); fWarpElm.style.cssText = `left: ${location.left - offset.width / 2}px; top: ${location.top - top - offset.height}px;`; fWarpElm.style.opacity = 1; }, 16); }; //鼠标离开 元素 隐藏 气泡 const handleLeave = function (e) { fWarpElm.style.opacity = 0; // transitionEnd 不太好应该加入兼容 once({ el, type: 'transitionEnd', fn: function() { console.log('hide'); addClass(fWarpElm, 'hide'); } }) }; el._tip_leave_fn = handleLeave; // 解决 slider 移动结束 提示不消失 el._tip_mouse_up_fn = function (e) { const target = e.target; console.log(target); if (!contains(fWarpElm, target) && el !== target) { handleLeave(e) } }; on({ el, type: 'mouseenter', fn: el._tip_hover_fn }); on({ el, type: 'mouseleave', fn: el._tip_leave_fn }); on({ el: doc.body, type: 'mouseup', fn: el._tip_mouse_up_fn }) }); } , // 气泡的数据变化 依赖于 context[expression] 返回的值 componentUpdated(el , binding , vnode) { const { context } = vnode; const { expression } = binding; const handleFn = expression && context[expression] || (() => ''); Vue.nextTick( () => { const createNode = handleFn(); const fWarpElm = el._tipElm; if (fWarpElm) { fWarpElm.replaceChild(createNode, el._createElm); el._createElm = createNode; const offset = elemOffset(fWarpElm); const location = position(el); fWarpElm.style.cssText = `left: ${location.left - offset.width / 2}px; top: ${location.top - top - offset.height}px;`; } }) }, // 删除 事件 unbind (el , bind , vnode) { off({ el: dov.body, type: 'mouseup', fn: el._tip_mouse_up_fn }); el = null; } }
slider 组件
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。