在编写 Vue 模板时,您可以使用许多 CSS 类。这些类非常方便,可以简化您的 VueModels 和模板的复杂性。
下面的列表并不完整。还请查看其他 CSS 文档页面,如排版、可见性、阴影、定位等。
鼠标相关
| 类名 | 描述 |
|---|
non-selectable | 用户无法选择 DOM 节点及其文本 |
no-pointer-events | DOM 元素不会成为鼠标事件的目标 - 点击、悬停等 |
all-pointer-events | no-pointer-events 的反义词 |
cursor-pointer | 将 DOM 元素上的鼠标指针更改为可点击链接的样式 |
cursor-not-allowed | 将 DOM 元素上的鼠标指针更改为表示操作不会执行的样式 |
cursor-inherit | 将 DOM 元素上的鼠标指针更改为与父元素相同的样式 |
cursor-none | 不渲染鼠标指针 |
滚动相关
| 类名 | 描述 |
|---|
scroll | 应用 CSS 调整以使滚动在所有平台上都能最佳工作 |
no-scroll | 在 DOM 节点上隐藏滚动条 |
overflow-auto | 设置 overflow 为 auto |
overflow-hidden | 设置 overflow 为 hidden |
overflow-hidden-y | 在 y 轴上设置 overflow 为 hidden |
hide-scrollbar | 移除滚动条 |
尺寸相关
| 类名 | 描述 |
|---|
fit | 宽度和高度设置为 100% |
full-height | 高度设置为 100% |
full-width | 宽度设置为 100%,左右边距为 0 |
window-height | 高度设置为 100vh,上下边距为 0 |
window-width | 宽度设置为 100vw,左右边距为 0 |
block | 设置 display 属性为 block |
方向相关
| 类名 | 描述 |
|---|
rotate-45 | 旋转 45 度 |
rotate-90 | 旋转 90 度 |
rotate-135 | 旋转 135 度 |
rotate-180 | 旋转 180 度 |
rotate-225 | 旋转 225 度 |
rotate-270 | 旋转 270 度 |
rotate-315 | 旋转 315 度 |
flip-horizontal | 水平翻转 DOM 元素 |
flip-vertical | 垂直翻转 DOM 元素 |
边框相关
| 类名 | 描述 |
|---|
no-border | 移除所有边框 |
no-border-radius | 移除边框可能具有的任何圆角 |
no-box-shadow | 移除所有应用的阴影 |
no-outline | 移除边框上应用的所有轮廓 |
rounded-borders | 应用通用边框圆角 |
border-radius-inherit | 从父元素继承边框圆角 |