badge.tsx 3.2 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154
import { VNode } from 'vue';
import { Util } from 'ibiz-core';
import './badge.less';

/**
 * 微标指令
 *
 * @export
 * @class Badge
 */
export const Badge: any = {
    /**
     * 指令初始化
     *
     * @param {HTMLDivElement} el
     * @param {*} binding
     * @param {VNode} vNode
     * @param {VNode} oldVNode
     */
    bind(el: HTMLDivElement, binding: any, vNode: VNode, oldVNode: VNode) {
        bc.init(el,binding);
    },

    /**
     * 指令更新
     *
     * @param {HTMLDivElement} el
     * @param {*} binding
     * @param {VNode} vNode
     * @param {VNode} oldVNode
     */
    componentUpdated(el: HTMLDivElement, binding: any, vNode: VNode, oldVNode: VNode) {
        bc.update(el,binding);
    },
};

/**
 * 微标控制器
 *
 * @export
 * @class BadgeController
 */
 export class BadgeController {
  /**
   * 唯一实例
   *
   * @private
   * @static
   * @memberof BadgeControllerController
   */
  private static readonly instance = new BadgeController();

  /**
   * 容器
   *
   * @protected
   * @type {HTMLDivElement}
   * @memberof NotificationSignalController
   */
  protected el!: HTMLElement;

  /**
   * Creates an instance of BadgeControllerController.
   * @memberof BadgeControllerController
   */
  private constructor() {
      if (BadgeController.instance) {
          return BadgeController.instance;
      }
  }

  /**
   * 初始化
   *
   * @param {HTMLDivElement} 
   * @param {any} 
   * @memberof BadgeController
   */
  public init(el: HTMLDivElement, binding: any): void {
    const item: any = binding.value;
    if (item && Object.keys(item).length > 0 && Util.isExistAndNotEmpty(item.count)) {
      if(!item.showZero && item.count == 0) {
        return;
      }
      let badge: HTMLElement = document.createElement("sup");
      badge.innerHTML = String(item.count);
      badge.classList.add('ibiz-badge');
      this.el = badge;
      el.append(badge);
      this.setBadgeclass(item.type);
      this.setBadgeclass(item.className);
      this.setBadgeOffset(item.offset);
    }
  }

  /**
   * 更新
   *
   * @param {HTMLDivElement} 
   * @param {any} 
   * @memberof BadgeController
   */
   public update(el: HTMLDivElement, binding: any): void {
    const item: any = binding.value;
    if (item && Object.keys(item).length > 0 && Util.isExistAndNotEmpty(item.count)) {
      if(!item.showZero && item.count == 0) {
        return;
      }
      this.el.innerHTML = String(item.count);
    }
  }

  /**
   * 设置徽标类型样式
   *
   * @param {string} 
   * @memberof BadgeController
   */
  public setBadgeclass(type: string) {
    if (!type) {
      return;
    }
    this.el.classList.add(type);
  }

  /**
   * 设置徽标偏移量
   *
   * @param {string} 
   * @memberof BadgeController
   */
  public setBadgeOffset(offset: Array<number>) {
    if (offset && offset.length == 2) {
      this.el.style.transform = `translate(${offset[0]}px, ${offset[1]}px)`;
    }
  }


  /**
   * 获取唯一实例
   *
   * @static
   * @returns {BadgeController}
   * @memberof BadgeController
   */
  public static getInstance(): BadgeController {
      return BadgeController.instance;
  }
}

// 导出服务
export const bc: BadgeController = BadgeController.getInstance();