vue中使用bootstrap中的Dropdowns下拉框多选功能

功能需求：点击“生成二维码”按钮，出现可多选的下拉菜单项，下拉框中包含“取消”和“确认”按钮
效果图：
相关代码：

<div>
    <b-button variant="primary" 
	    size="sm" 
	    class="ms-2 me-2"
	    data-bs-toggle="dropdown"
	    data-bs-auto-close="inside"
	    aria-haspopup="true"
	    aria-expanded="false">
	    生成二维码
	</b-button>
    <div class="dropdown-menu dropdownmenu-info" 
    	 arialabelledby="dropdownMenuClickableOutside">
              <div
                class="mb-2 ms-2"
                v-for="(item, i) in menulist"
                :key="i"
              >
                <input
                  class="form-check-input me-1"
                  type="checkbox"
                  v-model="item.checked"
                />
                <label class="form-check-label">{{ item.name }}</label>
              </div>
              <div class="text-end">
                <b-button variant="outline-dark" 
                size="sm" 
                class="ms-2 me-2"
                @click="Cancel()"
                >取消</b-button>
                <b-button variant="primary" 
                size="sm" 
                class="ms-2 me-2"
                @click="Save()"
                >确认</b-button>
              </div>
            </div>
          </div>
//menulist结构为：[{id:'',name:'',checked:false}]

Dropdowns注意的点：
data-bs-auto-close="inside"和arialabelledby=“dropdownMenuClickableOutside”；是为了防止点击下拉框外区域后，下拉框消失，以免改变checkbox的选择结果