简单跟一个healessui的使用
快速创建一个vue3项目
npm create vite@latest my-app-vue -- --template vue
cd my-app-vue
npm install
npm run dev安装@headlessui/vue
npm install @headlessui/vue抄写一个headlessui的组件样式listbox
<template><Listbox v-model="selectedRegion"><ListboxButton>{{ selectedRegion?.name || '请选择' }}</ListboxButton><ListboxOptions><ListboxOptionv-for="item in regions":key="item.id":value="item":disabled="item.unavailable">{{ item.name }}</ListboxOption></ListboxOptions></Listbox></template><script setup>import { ref } from 'vue'import {Listbox,ListboxButton,ListboxOptions,ListboxOption,} from '@headlessui/vue'const regions = [{ id: 1, name: '北京', unavailable: false },{ id: 2, name: '上海', unavailable: false },{ id: 3, name: '广州', unavailable: false },{ id: 4, name: '深圳', unavailable: true },{ id: 5, name: '香港', unavailable: false },{ id: 5, name: '澳门', unavailable: false },]const selectedRegion = ref()</script>
运行看一下：
headless使用基本就是这样了。不明白的看看官方介绍：
https://github.com/tailwindlabs/headlessui
https://headlessui.com/v1/vue/listbox
)
