Skip to content

Instantly share code, notes, and snippets.

@hiiightower

hiiightower/ItemList.vue

Forked from vivekascoder/ItemList.vue
Created June 7, 2021 12:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hiiightower/cf0b4a32b65f4e82c5a0b57ccab40a23 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hiiightower/cf0b4a32b65f4e82c5a0b57ccab40a23 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @vivekascoder vivekascoder created this gist Jun 7, 2021.
    98 changes: 98 additions & 0 deletions ItemList.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,98 @@
    <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>