Tip 弹出提示

用于在页面中展示简洁的提示信息,帮助用户更好地理解操作或内容

基础用法

跟所有的 UI 库一样,支持 9 种不同方向的展示

虚拟触发

虚拟触发的好处是可以节省渲染资源, 比如在列表中, 想象一下，如果每个列表项都使用 tip, 那么就会造成很大的渲染压力, 这时候就可以使用虚拟触发来节省渲染资源。

属性

type TipDirection = 'top' | 'bottom' | 'left' | 'right'

type TipAlign = 'start' | 'center' | 'end'

/** tip提示组件组件属性 */
interface TipProps {
  /**提示内容 */
  content?: string
  /** 是否显示 */
  visible: boolean
  /** 自定义tip样式 */
  style?: CSSProperties | string
  /** 自定义tip的class */
  class?: string | string[] | Record<string, boolean>
  /**触发tip方式 */
  trigger?: 'hover' | 'click'
  /**
   * 方向
   * @default 'auto'
   */
  direction?: TipDirection

  /** 隐藏箭头 */
  hideArrow?: boolean

  /**
   * 对齐方式
   * @default 'center'
   */
  alignment?: TipAlign

  /**
   * tip内容标签
   */
  contentTag?: string
}

事件

/** tip提示组件组件定义的事件 */
interface TipEmits {
  /** 显示状态变化 */
  (e: 'update:visible', value: boolean): void
}