如何创建小程序_Vue组件之Tooltip的示例代码

  • 栏目:行业动态 时间:2021-01-11 13:40 分享新闻到:
<返回列表

Vue组件之Tooltip的示例代码       这篇文章主要介绍了Vue组件之Tooltip的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

本文主要Alert 组件的大致框架, 提供少量可配置选项。 旨在大致提供思路

tooltip

常用于展示鼠标 hover 时的提示信息。

模板结构

 template 
 div 
 span ref="trigger" 
 slot 
 /slot 
 /span 
 div v-bind:class="{
 'top': placement === 'top',
 'left': placement === 'left',
 'right': placement === 'right',
 'bottom': placement === 'bottom',
 'disable': type === 'disable',
 'delete': type === 'delete',
 'visible': show === true 
 ref="popover"
 role="tooltip" 
 div /div 
 div 
 slot name="content" v-html="content" /slot 
 /div 
 /div 
 /div 
 /template 

大致结构DOM结构 一个div 包含 箭头 及 气泡内容。

v-bind中可选tooltip位置,是否禁用,及显示隐藏

slot 差值供自定义 默认接收content内容

script

import EventListener from '../utils/EventListener.js';
export default {
 pro凡科抠图: {
 // 需要监听的事件
 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 ponent 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();

* @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。

 d-tooltip content="我是tooltip" 
 d-button type="text" 鼠标移动到我上面试试 /d-button 
 /d-tooltip 
 d-tooltip content="我是tooltip" trigger="click" 
 d-button type="text" 点我试试 /d-button 
 /d-tooltip 

content内容分发

设置一个名为content的slot。

 d-tooltip 
 d-button type="text" 鼠标移动到我上面试试 /d-button 
 p slot="content" 我是内容分发的conent。 /p 
 /d-tooltip 

Attributes

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


分享新闻到:

更多阅读

如何创建小程序_Vue组件之Tooltip的示例代

行业动态 2021-01-11
Vue部件之Tooltip的实例编码 本文关键详细介绍了Vue部件之Tooltip的实例编码,网编感觉挺好...
查看全文

广州凡科互联网科技股份有限公司招聘销

行业动态 2021-01-11
招聘人数:9职位信息1、制定部门的各项工作流程、标准用语规范、绩效考核等基础制度,并执...
查看全文

广州凡科互联网科技股份有限公司招聘门

行业动态 2021-01-10
招聘人数:13职位信息岗位职责:1、指导门店运营,提高门店每月考评数据及业绩2、统计门店...
查看全文
返回全部新闻


区域站点: 南丰县主图制作软件   南宫市自动抠图   囊谦县图片加水印   南和县怎么p图   南华县主图制作软件   南江县自动抠图   南京市图片加水印   南靖县怎么p图   南康市主图制作软件   南乐县自动抠图   南陵县图片加水印   南宁市怎么p图   南平市主图制作软件   南皮县自动抠图   南市区图片加水印   南通市怎么p图   南投县主图制作软件   南雄市自动抠图   南溪县图片加水印   南阳市怎么p图   南漳县主图制作软件   南召县自动抠图   南郑县图片加水印   那坡县怎么p图   那曲县主图制作软件   纳雍县自动抠图   讷河市图片加水印   内黄县怎么p图   内江市主图制作软件   内丘县自动抠图   内乡县图片加水印   嫩江市怎么p图   聂荣县主图制作软件   尼玛县自动抠图   尼木县图片加水印   宁安市怎么p图   宁波市主图制作软件   宁城县自动抠图   宁德市图片加水印   宁都县怎么p图   宁国市主图制作软件   宁海县自动抠图   宁化县图片加水印   宁晋县怎么p图   宁陵县主图制作软件   宁明县自动抠图   宁南县图片加水印   宁强县怎么p图   宁陕县主图制作软件   宁武县自动抠图   宁乡市图片加水印   宁阳县怎么p图   宁远县主图制作软件   农安县自动抠图   磐安县图片加水印   盘锦市怎么p图   盘山县主图制作软件   磐石市自动抠图   盘州市图片加水印   蓬安县怎么p图   澎湖县主图制作软件   蓬莱市自动抠图   彭山县图片加水印   蓬溪县怎么p图   彭阳县主图制作软件   彭泽县自动抠图   彭州市图片加水印   偏关县怎么p图   平安县主图制作软件   平昌县自动抠图   平定县图片加水印   屏东县怎么p图   平度市主图制作软件   平果县自动抠图   平和县图片加水印   平湖市怎么p图   平江县主图制作软件   平乐县自动抠图   平凉市图片加水印   平利县怎么p图   平罗县主图制作软件   平陆县自动抠图   屏南县图片加水印   平泉市怎么p图   屏山县主图制作软件   平顺县自动抠图   平塘县图片加水印   平潭县怎么p图   平武县主图制作软件   萍乡市自动抠图   平乡县图片加水印   平阳县怎么p图   平遥县主图制作软件   平阴县自动抠图   平邑县图片加水印   平远县怎么p图   平舆县主图制作软件   皮山县自动抠图   普安县图片加水印   浦北县怎么p图   浦城县主图制作软件   普洱市自动抠图   普格县图片加水印   浦江县怎么p图   普兰县主图制作软件   普宁市自动抠图   莆田市图片加水印   迁安市怎么p图   乾安县主图制作软件   潜江市自动抠图   潜山市图片加水印  

友情链接: 一键抠图在线 在线ps抠图 在线ps抠图 免费做图 手机版

Copyright © 2002-2020 图片加水印_怎么p图_主图制作软件_自动抠图_抠图网址 版权所有 (网站地图) 备案号:粤ICP备10235580号