简单跟一个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

javascript"><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