-
Vuetify3：固定快捷按钮在屏幕右边
在Vuetify 3中，要将元素固定在屏幕右边中间，可以通过设置样式来实现这一效果。以下是一个例子，演示如何在Vuetify3中实现这个布局
- <v-list>
- <div class="position-fixed right-0 bottom-0" style="top:50%;">
- <v-list-item >
- <v-btn icon="mdi-information">最v-btn>
- v-list-item>
- <v-list-item >
- <v-btn icon="mdi-information">常v-btn>
- v-list-item>
- <v-list-item >
- <v-btn icon="mdi-information">专v-btn>
- v-list-item>
- div>
- v-list>
因为显示不美观的问题设置一个字，但是用户通常不知道什么意思，我们可以在原来基础上添加一个 tooltip 气泡提示来告诉用户这个是什么功能。代码如下：
- <v-list>
- <div class="position-fixed right-0 bottom-0" style="top:50%;">
- <v-list-item >
- <v-btn icon="mdi-information">
- <v-tooltip activator="parent" location="start">最新更新v-tooltip>
- 最
- v-btn>
- v-list-item>
- <v-list-item >
- <v-btn icon="mdi-information">
- <v-tooltip activator="parent" location="start">常用工具v-tooltip>
- 常
- v-btn>
- v-list-item>
- <v-list-item >
- <v-btn icon="mdi-information">专v-btn>
- v-list-item>
- div>
- v-list>
最终效果：
这个按钮样式，可以根据产品需求来设计，可以参考Button 按钮 — Vuetify
-
相关阅读:
异地公司如何文件共享？
【云原生】Kubernetes----Metrics-Server组件与HPA资源
不容错过！跨境卖家必须知道的十大海外社媒运营方法！
python经典百题之打印楼梯
Go-Excelize API源码阅读（十六）——GetSheetViewOptions、SetPageLayout
vcomp100.dll丢失怎样修复？5个靠谱的修复方法分享
linux clickhouse 密码设置
虹科教您 | 虹科TSN配置软件RELY-TSN-Configurator基本操作指南
01路由选择原理
安卓APT技术讲解(下)-实现安卓组件化的路由功能
- 原文地址：https://blog.csdn.net/yao_guai/article/details/140002433