摘要:前言本文主要组件的大致框架,提供少量可配置选项。旨在大致提供思路常用于展示鼠标时的提示信息。由属性决定展示效果属性值为方向对齐位置四个方向。属性用于设置触发的方式,默认为。
前言
本文主要Alert 组件的大致框架, 提供少量可配置选项。 旨在大致提供思路
tooltip常用于展示鼠标 hover 时的提示信息。
模板结构大致结构DOM结构 一个div 包含 箭头 及 气泡内容。
v-bind中可选tooltip位置,是否禁用,及显示隐藏
slot 差值供自定义 默认接收content内容
scriptimport EventListener from "../utils/EventListener.js"; export default { props: { // 需要监听的事件 trigger: { type: String, default: "click" }, effect: { type: String, default: "fadein" }, title: { type: String }, // toolTip消息提示 content: { type: String }, header: { type: Boolean, default: true }, placement: { type: String } }, data() { return { // 通过计算所得 气泡位置 position: { top: 0, left: 0 }, show: true }; }, watch: { show: function(val) { if (val) { const popover = this.$refs.popover; const triger = this.$refs.trigger.children[0]; // 通过placement计算出位子 switch (this.placement) { case "top" : this.position.left = triger.offsetLeft - popover.offsetWidth / 2 + triger.offsetWidth / 2; this.position.top = triger.offsetTop - popover.offsetHeight; break; case "left": this.position.left = triger.offsetLeft - popover.offsetWidth; this.position.top = triger.offsetTop + triger.offsetHeight / 2 - popover.offsetHeight / 2; break; case "right": this.position.left = triger.offsetLeft + triger.offsetWidth; this.position.top = triger.offsetTop + triger.offsetHeight / 2 - popover.offsetHeight / 2; break; case "bottom": this.position.left = triger.offsetLeft - popover.offsetWidth / 2 + triger.offsetWidth / 2; this.position.top = triger.offsetTop + triger.offsetHeight; break; default: console.log("Wrong placement prop"); } popover.style.top = this.position.top + "px"; popover.style.left = this.position.left + "px"; } } }, methods: { toggle() { this.show = !this.show; } }, mounted() { if (!this.$refs.popover) return console.error("Couldn"t find popover ref in your component that uses popoverMixin."); // 获取监听对象 const triger = this.$refs.trigger.children[0]; // 根据trigger监听特定事件 if (this.trigger === "hover") { this._mouseenterEvent = EventListener.listen(triger, "mouseenter", () => { this.show = true; }); this._mouseleaveEvent = EventListener.listen(triger, "mouseleave", () => { this.show = false; }); } else if (this.trigger === "focus") { this._focusEvent = EventListener.listen(triger, "focus", () => { this.show = true; }); this._blurEvent = EventListener.listen(triger, "blur", () => { this.show = false; }); } else { this._clickEvent = EventListener.listen(triger, "click", this.toggle); } this.show = !this.show; }, // 在组件销毁前移除监听,释放内存 beforeDestroy() { if (this._blurEvent) { this._blurEvent.remove(); this._focusEvent.remove(); } if (this._mouseenterEvent) { this._mouseenterEvent.remove(); this._mouseleaveEvent.remove(); } if (this._clickEvent) this._clickEvent.remove(); } };
// EventListener.js const EventListener = { /** * Listen to DOM events during the bubble phase. * * @param {DOMEventTarget} target DOM element to register listener on. * @param {string} eventType Event type, e.g. "click" or "mouseover". * @param {function} callback Callback function. * @return {object} Object with a `remove` method. */ listen(target, eventType, callback) { if (target.addEventListener) { target.addEventListener(eventType, callback, false); return { remove() { target.removeEventListener(eventType, callback, false); } }; } else if (target.attachEvent) { target.attachEvent("on" + eventType, callback); return { remove() { target.detachEvent("on" + eventType, callback); } }; } } }; export default EventListener;
封装的事件监听
使用使用content属性来决定hover时的提示信息。由placement属性决定展示效果:placement属性值为:方向-对齐位置;四个方向:top、left、right、bottom。trigger属性用于设置触发tooltip的方式,默认为hover。
content内容分发鼠标移动到我上面试试 点我试试
设置一个名为content的slot。
Attributes鼠标移动到我上面试试 我是内容分发的conent。
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
content | 显示的内容,也可以通过 slot#content 传入 DOM | String | — | — |
placement | Tooltip 的出现位置 | String | top/right/bottom/left | top |
trigger | tooltip触发方式 | String | — | hover |
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/89137.html
摘要:的组件拆解之的中的组件在目录下。这个组件核心部分是分别涉略了。 Element的组件拆解之Tooltipelement ui的中的 toolpic组件 在 packages/tooltip目录下。 这个组件核心部分是 showImg(https://segmentfault.com/img/bVbnFjF?w=332&h=214); toolpic 分别涉略了。《main.js vue...
摘要:的组件拆解之的中的组件在目录下。这个组件核心部分是分别涉略了。 Element的组件拆解之Tooltipelement ui的中的 toolpic组件 在 packages/tooltip目录下。 这个组件核心部分是 showImg(https://segmentfault.com/img/bVbnFjF?w=332&h=214); toolpic 分别涉略了。《main.js vue...
摘要:的组件拆解之的中的组件在目录下。这个组件核心部分是分别涉略了。 Element的组件拆解之Tooltipelement ui的中的 toolpic组件 在 packages/tooltip目录下。 这个组件核心部分是 showImg(https://segmentfault.com/img/bVbnFjF?w=332&h=214); toolpic 分别涉略了。《main.js vue...
摘要:组件结构同组件结构通过方法获取元素的大小及其相对于视口的位置,之后对提示信息进行定位。可以用来进行一些复杂带校验的弹窗信息展示,也可以只用于简单信息的展示。可以通过属性来显示任意标题,通过属性来修改显示区域的宽度。 手把手教你撸个vue2.0弹窗组件 在开始之前需要了解一下开发vue插件的前置知识,推荐先看一下vue官网的插件介绍 预览地址 http://haogewudi.me/k...
阅读 1830·2023-04-25 19:51
阅读 1139·2021-11-15 11:43
阅读 4459·2021-11-02 14:40
阅读 1957·2021-10-11 10:59
阅读 1300·2021-09-22 15:05
阅读 984·2021-09-09 09:32
阅读 608·2019-08-30 15:56
阅读 517·2019-08-30 15:52