基础使用

一些下拉内容

<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

<template>
  <c-dropdown v-model="show">
    <c-button label="点击展开下拉" />
    <template #drop-content>
      <p>一些下拉内容</p>
    </template>
  </c-dropdown>
</template>

点击展开/收起代码

点击打开交互式编辑器

自定义内容宽度

自定义内容宽度

<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

<template>
  <c-dropdown
    v-model="show"
    :width-within-parent="false"
  >
    <c-button label="点击展开下拉" />
    <template #drop-content>
      <div class="custom-width">
        自定义内容宽度
      </div>
    </template>
  </c-dropdown>
</template>

<style scoped>
.custom-width {
  width: 400px;
  padding: 24px;
}
</style>

点击展开/收起代码

点击打开交互式编辑器

手动控制

点击左边按钮收起/展开下拉

自定义内容宽度

<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

<template>
  <c-button
    label="点击收起/展开下拉"
    @click="show = !show"
  />
  <c-dropdown
    v-model="show"
    manual
    :width-within-parent="false"
  >
    <h3>点击左边按钮收起/展开下拉</h3>
    <template #drop-content>
      <div class="custom-width">
        自定义内容宽度
      </div>
    </template>
  </c-dropdown>
</template>

<style scoped>
.custom-width {
  width: 400px;
  padding: 24px;
}
</style>

点击展开/收起代码

点击打开交互式编辑器

CDropdown API

Props

Slots

Events

modelValue

boolean

*

下拉是否展示，用于v-model绑定用

disabled

boolean

默认值  false

是否禁用

widthWithinParent

boolean

默认值  true

是否自动与默认内容保持一致宽度

manual

boolean

默认值  false

是否手动控制