KLPopoverList

考拉弹出框组件

效果

<script setup lang="ts">
import { ref } from 'vue';
const menus = [
  { id: 1, name: 'white' },
  { id: 2, name: 'black' },
  { id: 3, name: 'red' },
  { id: 4, name: 'green' },
  { id: 5, name: 'blue' },
  { id: 6, name: 'purple' },
]
const content = ref('选择pattern');
function to(menu: { id: number, name: string }) {
  content.value = menu.name;
}
</script>
<template>
  <div class="h-100 icons flex-vertical">
    <KLPopoverList :menus="menus" label="name" value="id" @to="to">
      <template #reference>
        <KLButton :content="content" />
      </template>
    </KLPopoverList>
  </div>
</template>

Attributes

属性	说明	类型	默认值
menus	列表	any[]	-
label	列表项显示字段	string	label
value	列表项值字段	string	value
trigger	popover 触发方式	click|focus|hover|contextmenu	click

事件

事件名	参数	说明
to	menus数组中的某项	选中弹出框某项值