Search code examples
vue.jsvuejs3naiveui

How to recreate the elipsis components in vue3?


I am trying to recreate the ellipsis components in the naive-ui css library for Vue3, here are the source code and demo codesandbox:

https://github.com/tusen-ai/naive-ui/blob/main/src/ellipsis/src/Ellipsis.tsx

https://codesandbox.io/s/pne1kq

I spent a lot of time watching the source code, for now I figure out most of the source code. But one thing I can't trace is where is the logic that judges how long the tooltip should appear and make the text to have ... at the end.

Can anyone help trace what part of the logic exists in the above link?


Solution

  • The ... is set through style declarations on the parent element. Look at the computed property ellipsisStyleRef, particularly where the value of textOverflow is set (line 66):

    export default defineComponent({
      ...
      setup (props, { slots, attrs }) {
        ...
        const ellipsisStyleRef = computed(() => {
          const { lineClamp } = props
          const { value: expanded } = expandedRef
          if (lineClamp !== undefined) {
            return {
              textOverflow: '',
              '-webkit-line-clamp': expanded ? '' : lineClamp
            }
          } else {
            return {
              textOverflow: expanded ? '' : 'ellipsis',  // <------------- here
              '-webkit-line-clamp': ''
            }
          }
        })
    

    As to length, I am not sure if you mean width or duration. But it looks like there is no duration, the tooltip is shown as long as mouse hovers over trigger, and width does not seem to be restricted.