vue 自定义单选和多选组件

最新推荐文章于 2024-08-26 17:21:56 发布

原创最新推荐文章于 2024-08-26 17:21:56 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue单选 #vue多选

vue 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了一种基于Vue.js的列表选择器组件实现方法，包括单选与多选效果的切换，通过自定义样式和事件监听实现了动态的UI反馈。代码示例展示了如何使用v-for循环遍历数据列表，并通过@click事件实现选项的选择与取消选择。

单选效果：

多选效果：

代码：

<template>
  <div class="custom">
    <ul class="checked-list">
      <li v-for="(item, index) in list" :key="index" :class="item.checked ? 'active' : ''" @click="selectChecked(item)">
        {{item.label}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      checked: [],
      list: [
        {
          label: '第一项',
          value: 1,
          checked: true
        },
        {
          label: '第二项',
          value: 2,
          checked: false
        },
        {
          label: '第三项',
          value: 3,
          checked: false
        },
        {
          label: '第四项',
          value: 4,
          checked: false
        }
      ]
    }
  },
  methods: {
    selectChecked (item) {
      item.checked = !item.checked // 注释本行，放开下面代码开启多选效果
      // const value = item.value
      // this.list.forEach(item => {
      //   item.value === value ? item.checked = true : item.checked = false
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.checked-list{display:flex;
  li{margin-right:40px;
    &.active::after{display:block;content:'';clear:both;width:10px;height:10px;background:#f00}
  }
}
</style>