Collapse 使用

最新推荐文章于 2024-01-20 21:36:07 发布

xiao_sier

最新推荐文章于 2024-01-20 21:36:07 发布

阅读量500

点赞数

分类专栏： Web 文章标签： vue.js

本文链接：https://blog.csdn.net/xiao_sier/article/details/128557309

版权

Web 专栏收录该内容

7 篇文章

订阅专栏

该文章展示了如何在Vue.js应用中使用Collapse组件与Panel配合，特别是在Panel的content部分使用slot。同时，文章提到了Checkbox组件的用法，包括状态控制和事件处理函数on-change。另外，还提及了如何阻止事件传播，例如使用@click.stop。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Collapse

<Collapse class="info-body">
  <Panel class="panel" v-for="(provinceItem, index) in goodList" :name="index.toString()" :key="index">
    {{ provinceItem.name }}
    <div slot="content" class="city-container">
      <Checkbox class="city" v-if="provinceItem.children" v-for="(cityItem, cityIndex) in provinceItem.children" 
                :disabled="cityItem.status === 1" :true-value="2" :false-value="3"
                v-model="cityItem.status" :key="cityIndex" @on-change="onItemChange">
        {{cityItem.name}}
      </Checkbox>
    </div>
  </Panel>
</Collapse>

collapse 的使用方法

配合 Panel 使用
panel 内部要使用 slot=“content” 标记，否则会错乱

防止事件继续传递

<Button v-show="curData && isFloat" class="float" size="small" @click="onOptionClick(curData)">
  {{curData.userName}}
  <Icon class="icon-close" type="md-close" @click.stop="doCloseFloat"/>
</Button>

@click.stop 防止事件传递