vue3+ts+pinia项目中的好写法

前端截取文字

 String(enterpriseName).length < 8
                  ? String(enterpriseName)
                  : String(enterpriseName).slice(0, 7) + '...'

多行省略号

@mixin ellipseText($lineNum: 2) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $lineNum;
  /*! autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}

验证码倒计时的usehooks方法

// hooks，返回关键数据和关键事件。具体的ui，在实际的界面中实现。
//每秒减一，减到0，重置

export function useSms(validator: () => Promise<any>, requestFn: () => Promise<AxiosResponse>) {
  type Timer = ReturnType<typeof setInterval>
  const text = ref('获取验证码')
  const disabled = ref(false)
  let countdown = 60
  let timer: Timer

  const handleClick = () => {
    validator()
      .then(start)
      .catch(() => {})
  }
  const start = () => {
    requestFn()
      .then(() => {
        text.value = `剩余${countdown}s`
        disabled.value = true
        timer = setInterval(() => {
          if (countdown < 1) {
            reset()
          } else {
            --countdown
            text.value = `剩余${countdown}s`
            disabled.value = true
          }
        }, 1000)
      })
      .catch(() => {})
  }
  const reset = () => {
    clearInterval(timer)
    countdown = 60
    text.value = '获取验证码'
    disabled.value = false
  }

  return {
    text,
    disabled,
    handleClick,
  }
}