其他 CSS 辅助类
在编写 Vue 模板时，你可以使用许多 CSS 类。非常方便，可以降低 VueModel 和模板的复杂性。
¥There are a lot of CSS classes that you can use while writing your Vue templates. Very handy to ease the complexity of your VueModels and templates.
以下列表并不完整。还要检查其他 CSS 文档页面，例如排版、可见性、阴影、定位。
¥The list below is not complete. Also check the other CSS documentation pages like Typography, Visibility, Shadows, Positioning.
鼠标相关(Mouse Related)
¥Mouse Related
| 类名 | 描述 |
|---|---|
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 Related)
¥Scroll Related
| 类名 | 描述 |
|---|---|
scroll | 应用 CSS 调整，使滚动效果在所有平台上达到最佳效果 |
no-scroll | 隐藏 DOM 节点上的滚动条 |
overflow-auto | 将溢出设置为自动 |
overflow-hidden | 将溢出设置为隐藏 |
overflow-hidden-y | 将 y 轴上的溢出设置为隐藏 |
hide-scrollbar | 移除滚动条 |
尺寸相关(Size Related)
¥Size Related
| 类名 | 描述 |
|---|---|
fit | 宽度和高度设置为 100% |
full-height | 高度设置为 100% |
full-width | 宽度设置为 100%，左右边距为 0 |
window-height | 高度设置为 100vh，上下边距为 0 |
window-width | 宽度设置为 100vw，左右边距为 0 |
block | 将 display 属性设置为 block |
方向相关(Orientation Related)
¥Orientation Related
| 类名 | 描述 |
|---|---|
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 元素 |
边框相关(Border Related)
¥Border Related
| 类名 | 描述 |
|---|---|
no-border | 移除所有边框 |
no-border-radius | 移除边框可能具有的任何半径 |
no-box-shadow | 移除所有应用的 box-shadow |
no-outline | 移除边框上的所有轮廓 |
rounded-borders | 应用通用边框半径 |
border-radius-inherit | 从父元素继承边框半径 |