van-dropdownMenu下拉选项实现单选和多选功能

最新推荐文章于 2024-07-05 14:03:54 发布

sunshine 覃糖

最新推荐文章于 2024-07-05 14:03:54 发布

阅读量1.9k

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/tan_xiao_tan/article/details/130406167

版权

本文详细介绍了如何使用Vue.js和 vant UI 框架中的 van-dropdownMenu 组件，实现下拉选项的单选和多选功能。通过结合 Vue 的数据绑定和事件监听，创建交互式的下拉菜单，提升用户体验。

摘要由CSDN通过智能技术生成

<template>
	<div>
		<van-dropdownMenu>
	      <van-dropdown-item title="选项1" ref="item">
	        <van-tag
	          v-for="(item, index) in tagsList"
	          plain
	          size="medium"
	          :key="index"
	          :class="item.isCheck ? 'sCor' : ''"
          	  @click="selected_1(item, index)"
	        >
	          {
   {
    item.title }}
	        </van-tag>
	        <div style="padding: 5px 16px">
	          <van-button type="danger" block round 	@click="onConfirm">
	            确认
	          </van-button>
        	</div>
	      </van-dropdo