现在遇到一个需求,希望下拉框为九宫格样式,内容为图标,可以点击图标,就像select框一样的功能,但是下拉框展示为九宫格
2条回答 默认 最新
- 崽崽的谷雨 2023-06-27 09:36关注
那你还不如自己写个 select组件呢 。改 ui库的更麻烦 。
不过 我看 api 里有个 #dropdownRender 可以自定义 内容 你可以尝试一下 写个九宫格试试或者:
使用Ant Design Vue可以很方便地实现一个九宫格下拉框。你可以使用组件来包裹九宫格内容,使用<Dropdown.Button>组件来渲染九宫格的触发按钮,使用组件来渲染九宫格内容。以下是一个简单的示例代码:<template> <div> <a-dropdown> <a-dropdown-button> <span>九宫格下拉框</span> <a-icon type="down" /> </a-dropdown-button> <a-menu slot="overlay"> <a-menu-item-group title="九宫格内容"> <a-menu-item v-for="item in gridData" :key="item.key" @click="handleMenuClick(item)"> <a-icon :type="item.icon" /> <span>{{item.title}}</span> </a-menu-item> </a-menu-item-group> </a-menu> </a-dropdown> </div> </template> <script> export default { data() { return { gridData: [ { key: '1', icon: 'user', title: '用户管理' }, { key: '2', icon: 'tag', title: '标签管理' }, { key: '3', icon: 'setting', title: '设置' }, { key: '4', icon: 'profile', title: '个人资料' }, { key: '5', icon: 'logout', title: '退出登录' } ] } }, methods: { handleMenuClick(item) { console.log('你点击了', item.title) } } } </script>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报 编辑记录
悬赏问题
- ¥15 Hadoop的部署与安装的一些疑问
- ¥15 短剧的sdk在哪里接入
- ¥30 智能割草机自动化割草
- ¥15 求:可不可以提供一些 在国内可以用,低代码不要太难 在电脑上可以下载的 制作app的软件
- ¥15 fluke高精度万用表8845A型号测交流电压一直跳动,且去掉输入后显示不归零
- ¥15 不同模型怎么用同一个shader
- ¥15 安卓启动没有ais proxy与v4l2的log打印
- ¥15 go怎么读取mdb文件里面的数据
- ¥60 Matlab联合CRUISE仿真编译dll文件报错
- ¥15 脱敏项目合作,ner需求合作