@fe6/water-pro/es/basic-help/src/basic-help.js

An enterprise-class UI design language and Vue-based implementation

import { Fragment as _Fragment, createVNode as _createVNode } from "vue";
import { defineComponent, computed, unref } from 'vue';
import { isString, isArray } from '@fe6/shared';
import { InfoCircleOutlined } from '@ant-design/icons-vue';
import Tooltip from '../../tooltip';
import useConfigInject from '../../_util/hooks/useConfigInject';
import { getPopupContainer as _getPopupContainer } from '../../_util/dom';
import { getSlot } from '../../_util/vue';
import PropTypes from '../../_util/vue-types';
export default defineComponent({
  name: 'ABasicHelp',
  components: {
    Tooltip: Tooltip
  },
  props: {
    // max-width
    maxWidth: PropTypes.string.def('400px'),
    // Whether to display the serial number
    showIndex: PropTypes.bool,
    // color
    color: PropTypes.string.def('#ffffff'),
    fontSize: PropTypes.string.def('14px'),
    placement: PropTypes.string.def('bottom'),
    prefixCls: PropTypes.string,
    absolute: PropTypes.bool,
    // Text list
    text: PropTypes.stringArray,
    // 定位
    position: {
      type: [Object],
      default: function _default() {
        return {
          position: 'absolute',
          left: 0,
          bottom: 0
        };
      }
    }
  },
  setup: function setup(props, _ref) {
    var slots = _ref.slots;

    var _useConfigInject = useConfigInject('basic-help', props),
        prefixClsNew = _useConfigInject.prefixCls;

    var getOverlayStyle = computed(function () {
      return {
        maxWidth: props.maxWidth
      };
    });
    var getWrapStyle = computed(function () {
      return {
        color: props.color,
        fontSize: props.fontSize
      };
    });
    var getMainStyleRef = computed(function () {
      return props.absolute ? props.position : {};
    });

    var renderTitle = function renderTitle() {
      var list = props.text;

      if (isString(list)) {
        return _createVNode("p", {
          "class": "".concat(prefixClsNew.value, "-text")
        }, [list]);
      }

      if (isArray(list)) {
        var arrList = list;
        return arrList.map(function (item, index) {
          return _createVNode("p", {
            "key": item
          }, [_createVNode(_Fragment, null, [props.showIndex ? "".concat(index + 1, ". ") : '', item])]);
        });
      }

      return null;
    };

    return function () {
      return _createVNode(Tooltip, {
        "title": _createVNode("div", {
          "style": unref(getWrapStyle)
        }, [renderTitle()]),
        "overlayClassName": "".concat(prefixClsNew.value, "-wrap"),
        "autoAdjustOverflow": true,
        "overlayStyle": unref(getOverlayStyle),
        "placement": props.placement,
        "getPopupContainer": function getPopupContainer() {
          return _getPopupContainer();
        }
      }, {
        default: function _default() {
          return [_createVNode("span", {
            "class": prefixClsNew.value,
            "style": unref(getMainStyleRef)
          }, [getSlot(slots) || _createVNode(InfoCircleOutlined, {
            "class": "w-basic-help-icon"
          }, null)])];
        }
      });
    };
  }
});