nutui-uniapp/components/ellipsis/ellipsis.ts

京东风格的轻量级移动端 Uniapp、Vue3 组件库（支持小程序开发）

import type { ExtractPropTypes } from 'vue'
import { CLICK_EVENT } from '../_constants'
import { commonProps, makeNumericProp, makeStringProp } from '../_utils'

export interface EllipsisedValue {
  leading?: string
  tailing?: string
}
export const ellipsisProps = {
  ...commonProps,
  /**
   * @description 文本内容
   */
  content: makeStringProp(''),

  /**
   * @description 省略位置，可选值 `start` \| `end` \| `middle`
   */
  direction: makeStringProp<'start' | 'end' | 'middle'>('end'),

  /**
   * @description 展示几行
   */
  rows: makeNumericProp(1),

  /**
   * @description 展开操作的文案
   */
  expandText: makeStringProp(''),

  /**
   * @description 收起操作的文案
   */
  collapseText: makeStringProp(''),

  /**
   * @description 省略的符号
   */
  symbol: makeStringProp('...'),

  /**
   * @description 容器的行高
   */
  lineHeight: makeNumericProp('20'),
}

export type EllipsisProps = ExtractPropTypes<typeof ellipsisProps>

export const ellipsisEmits = {
  change: (val: 'expand' | 'collapse') => val,
  [CLICK_EVENT]: () => true,
}

export type EllipsisEmits = typeof ellipsisEmits