ItemList.vue

<template>
  <ul class="w-item-picker__list">
    <li
      v-for="item in value"
      :key="item.id"
      class="w-item-picker__item">
        <button class="btn">
            <span
              :ref="`item${item.id}`"
              @mouseover="mouseOver(item.id, item.name)"
            >{{ item.name }}</span>
        </button>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'ItemList',
  mounted() {
    // console.log(el.clientWidth < el.scrollWidth)
  },
  methods: {
    mouseOver(id, name) {
      let el = this.$refs[`item${id}`]
      if (el.clientWidth < el.scrollWidth) {
        el.setAttribute('title', name)
      }
    },
    isOverflow(id) {
      // let el = this.$refs[`tip${id}`]
      // return el.clientWidth < el.scrollWidth
      // return true
    }
  },
  computed: {
    
  },
  props: {
    title: {
      type: Object,
      default: {
        isOverflow: false,
        value: ''
      }
    },
    value: { 
      type: Array, default: () => ([
        {
          id: 1,
          name: 'v1'
        },
        {
          id: 2,
          name: 'tomato' 
        },
        { 
          id: 3, 
          name: 'cucumber' 
        },
        { 
          id: 4, 
          name: 'very long text with more than 20 char' 
        }
    ]) }
  }
};
</script>

<style lang="scss">
.w-item-picker__list {
  list-style: none;
  margin: 0;
  padding: 0;

  .w-item-picker__item {

    .btn {
      position: relative;
      border-radius: 50px;
      border: none;
      padding: 4px 12px;
      margin: 4px 8px;
      color: black;
      max-width: 210px;

      span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
        white-space: nowrap;
      }
    }
  }
}

</style>