zmp-vue/esm/shared/use-tooltip.js

Build full featured iOS & Android apps using ZMP & Vue

import { watch, onMounted, onBeforeUnmount } from 'vue';
import { zmp, zmpready } from './zmp';
export var useTooltip = function useTooltip(elRef, props) {
  var zmpTooltip = null;
  var tooltip = props.tooltip,
      tooltipTrigger = props.tooltipTrigger;
  onMounted(function () {
    if (!elRef.value) return;
    if (!tooltip) return;
    zmpready(function () {
      zmpTooltip = zmp.tooltip.create({
        targetEl: elRef.value,
        text: tooltip,
        trigger: tooltipTrigger
      });
    });
  });
  onBeforeUnmount(function () {
    if (zmpTooltip && zmpTooltip.destroy) {
      zmpTooltip.destroy();
      zmpTooltip = null;
    }
  });
  watch(function () {
    return props.tooltip;
  }, function (value) {
    if (!value && zmpTooltip) {
      zmpTooltip.destroy();
      zmpTooltip = null;
      return;
    }

    if (value && !zmpTooltip && zmp) {
      zmpTooltip = zmp.tooltip.create({
        targetEl: elRef.value,
        text: value,
        trigger: tooltipTrigger
      });
      return;
    }

    if (!value || !zmpTooltip) return;
    zmpTooltip.setText(value);
  });
};