在编写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% |
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 | 应用通用边框半径 |
borders-radius-inherit | 从父元素继承边框半径(v1.9+)) |