cyber-web-ui/es/page-label/index.js

spring-cyber前端ui框架

import { createVNode as _createVNode } from "vue";
import Icon from '../icon';
import { defineComponent, computed } from 'vue';
import { historyBack } from '../_utils/history.js';
import { DOCUMENT_ADDRESS } from '../_utils/config.js';
var PageLabel = defineComponent({
  name: 'CPageLabel',
  props: {
    // 标题
    title: {
      type: String,
      default: "标题"
    },
    // 提示
    tips: {
      type: String,
      default: ""
    },
    // 图标
    icon: {
      type: String,
      default: ""
    },
    // 显示顶部导航栏
    showHeader: {
      type: Boolean,
      default: false
    },
    // 默认返回路径
    back: {
      type: String,
      default: ''
    },
    // 文档链接
    documentLink: String,
    // 文档提示文本
    documentText: {
      type: String,
      default: '了解更多'
    }
  },
  setup: function setup(props, _ref) {
    var attrs = _ref.attrs,
      slots = _ref.slots,
      emit = _ref.emit,
      expose = _ref.expose;
    var documentLink = computed(function () {
      if (!props.documentLink) return;
      if (/^http(s?):\/\//.test(props.documentLink)) return props.documentLink;
      return DOCUMENT_ADDRESS + props.documentLink;
    });
    function backHandler() {
      // 若有自定义返回方法，则调用该方法
      if (props.onBack) {
        props.onBack();
        return;
      }
      // 默认返回方法，若无可返回路径，则跳转到指定返回路径
      historyBack(props.back);
    }
    expose({
      back: backHandler
    });
    return function () {
      var _slots$right;
      function breadcrumbSlot() {
        var _slots$breadcrumb;
        return slots.header ? slots.header() : props.showHeader ? _createVNode("div", {
          "class": "cyber-page-label-header"
        }, [_createVNode(Icon, {
          "icon": "cyber-fanhui",
          "isSvg": true,
          "size": "21",
          "class": "cyber-back-icon",
          "onClick": backHandler
        }, null), (_slots$breadcrumb = slots.breadcrumb) === null || _slots$breadcrumb === void 0 ? void 0 : _slots$breadcrumb.call(slots)]) : undefined;
      }
      function iconSlot() {
        var _slots$icon;
        return slots.icon ? (_slots$icon = slots.icon) === null || _slots$icon === void 0 ? void 0 : _slots$icon.call(slots) : _createVNode(Icon, {
          "isSvg": true,
          "icon": props.icon,
          "size": "64"
        }, null);
      }
      function titleSlot() {
        var _slots$title;
        return _createVNode("div", {
          "class": "cyber-page-label-title"
        }, [slots.title ? (_slots$title = slots.title) === null || _slots$title === void 0 ? void 0 : _slots$title.call(slots) : props.title]);
      }
      function tipsSlot() {
        return slots.tips || props.tips ? _createVNode("div", {
          "class": "cyber-page-label-tips"
        }, [slots.tips ? slots.tips() : props.tips, documentLink.value ? _createVNode("a", {
          "href": documentLink.value,
          "target": "_blank",
          "class": "document_link"
        }, [props.documentText]) : undefined]) : undefined;
      }
      return _createVNode("div", {
        "class": "cyber-page-label"
      }, [breadcrumbSlot(), _createVNode("div", {
        "class": "cyber-page-label-body"
      }, [_createVNode("div", {
        "class": "cyber-page-label-body-left"
      }, [_createVNode("div", {
        "class": "title-icon"
      }, [iconSlot()]), _createVNode("div", {
        "class": "cyber-page-label-content"
      }, [titleSlot(), tipsSlot()])]), (_slots$right = slots.right) === null || _slots$right === void 0 ? void 0 : _slots$right.call(slots)])]);
    };
  }
});
PageLabel.install = function (app) {
  app.component(PageLabel.name, PageLabel);
};
export default PageLabel;