其他CSS辅助类

在编写Vue模板时可以使用很多CSS类。对减轻VueModels和模板的复杂性上非常有用。

以下所列是不完整的。同时检查其他CSS文档页面,如排版、可见性、阴影、定位。

鼠标相关

类名说明
non-selectable用户将无法选择DOM节点及其文本
no-pointer-eventsDOM元素不会成为鼠标事件的目标 - 点击、悬停等
all-pointer-eventsno-pointer-events的反义词
cursor-pointer改变DOM元素上的鼠标指针,看起来好像在可点击的链接上
cursor-not-allowed更改DOM元素上的鼠标指针,使其看起来好像不会执行任何操作
cursor-inherit将DOM元素上的鼠标指针更改为与父选项相同
cursor-none没有鼠标光标被渲染

Scroll有关

类名说明
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
blockdisplay属性设置为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从父元素继承边框半径