Viog UI

基础下拉框 dropdown 待优化 待新增

所有下拉框的基础，实现了select等组件

使用说明

简单引入

这是一个功能性组件，你需要通过通过绑定下拉绑定与下拉内容使用该组件

各部分的样式你需要自己调控

展开代码
<vi-dropdown>
    <vi-button>下拉框绑定的部分</vi-button>
    <template v-slot:content>
        这里是下拉框内容
    </template>
</vi-dropdown>

WARNING

下拉框会根据当前的list宽高自动计算展示位置

自操控开关

如果你需要自主控制下拉框开关，可以使用双向绑定modelValue为组件绑定一个布尔类型的Ref用于控制下拉框开关状态

展开代码
<template>
    <vi-dropdown v-model="myopen">
        <vi-button>下拉框绑定的部分</vi-button>
        <template v-slot:content>
            <ul style="background-color: pink">
            <li>一些内容</li>
            <li>一些内容</li>
            <li>一些内容</li>
            <li>一些内容</li>
            <li>一些内容</li>
            <li>一些内容</li>
            <li>一些内容</li>
            <li>一些内容</li>
            <li>一些内容</li>
            <li>一些内容</li>
            </ul>
        </template>
    </vi-dropdown>
    <vi-button @click="myopen = true">打开下拉框</vi-button>
    <vi-button @click="myopen = false">关闭下拉框</vi-button>
</template>
<script>
    const myopen = ref(false)
</script>

触发方式

通过trigger属性改变触发方式（hover、click），默认为click

展开代码
<vi-dropdown trigger="hover">
    <vi-button>下拉框绑定的部分</vi-button>
    <template v-slot:content>
        <ul style="background-color: pink">
          <li>一些内容</li>
          <li>一些内容</li>
          <li>一些内容</li>
          <li>一些内容</li>
          <li>一些内容</li>
          <li>一些内容</li>
          <li>一些内容</li>
          <li>一些内容</li>
          <li>一些内容</li>
          <li>一些内容</li>
        </ul>
    </template>
</vi-dropdown>

Props

属性名描述类型默认值

插槽

插槽名描述有无默认内容

事件支持

事件名描述参数列表

css变量

变量名描述默认值