在编写 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 | 移除任何应用的 box-shadow |
no-outline | 移除边框上应用的任何轮廓 |
rounded-borders | 应用通用的边框圆角 |
border-radius-inherit | 从父元素继承边框圆角 |