Vant 内置样式介绍
发布时间：2023-04-19 14:09:32 所属栏目：教程 来源：
导读：Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。
当文本内容长度超过容器最大宽度时，自动省略多余的文本。
<!-- 最多显示一行 -->
<div class="van-ellipsis">这是一段最多显示一行的文
当文本内容长度超过容器最大宽度时，自动省略多余的文本。
<!-- 最多显示一行 -->
<div class="van-ellipsis">这是一段最多显示一行的文
|
Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。 当文本内容长度超过容器最大宽度时，自动省略多余的文本。 <!-- 最多显示一行 --> <div class="van-ellipsis">这是一段最多显示一行的文字，多余的内容会被省略</div> <!-- 最多显示两行 --> <div class="van-multi-ellipsis--l2">这是一段最多显示两行的文字，多余的内容会被省略</div> <!-- 最多显示三行 --> <div class="van-multi-ellipsis--l3">这是一段最多显示三行的文字，多余的内容会被省略</div> 1px 边框 为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。 <!-- 上边框 --> <div class="van-hairline--top"></div> <!-- 下边框 --> <div class="van-hairline--bottom"></div> <!-- 左边框 --> <div class="van-hairline--left"></div> <!-- 右边框 --> <div class="van-hairline--right"></div> <!-- 上下边框 --> <div class="van-hairline--top-bottom"></div> <!-- 全边框 --> <div class="van-hairline--surround"></div> 动画 可以通过 transition 组件使用内置的动画 <!-- 淡入 --> <transition name="van-fade"> <div v-show="visible">Fade</div> </transition> <!-- 上滑进入 --> <transition name="van-slide-up"> <div v-show="visible">Slide Up</div> </transition> <!-- 下滑进入 --> <transition name="van-slide-down"> <div v-show="visible">Slide Down</div> </transition> <!-- 左滑进入 --> <transition name="van-slide-left"> <div v-show="visible">Slide Left</div> </transition> <!-- 右滑进入 --> <transition name="van-slide-right"> <div v-show="visible">Slide Right</div> </transition> （编辑：汽车网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
