Vue开发Vant组件问题

最新推荐文章于 2026-04-23 03:00:40 发布

原创最新推荐文章于 2026-04-23 03:00:40 发布 · 902 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

VUE 同时被 2 个专栏收录

5 篇文章

订阅专栏

前端

3 篇文章

订阅专栏

本文详细介绍了在Vue开发中使用Vant组件，包括吸顶组件和与返回顶部功能的结合。同时，文章深入讲解了Markdown编辑器的新特性，如界面设计、代码高亮、图片拖拽、数学公式、甘特图、流程图等功能，帮助提升写作和展示效果。

Vant组件

①吸顶组件(搜索栏和nav导航实例)

 <van-sticky :offset-top="0">
      <van-search
        sticky
        left-icon="none"
        right-icon="none"
        background="#381111"
        v-model="searchName"
        input-align="center"
        @focus="onSearch"
        placeholder="试试搜索盒马鲜生"/>
    </van-sticky>

    <van-tabs v-model="active" :offset-top="54" scrollspy sticky>
      <van-tab v-for="(item,index) in navTab" :title="item.title" :key="index">
        <van-index-anchor index="4" :key="index">标题{{ index }}</van-index-anchor>
        <div class="goods-content">
          <div class="goods-list">
            <div class="goods-item" >
              
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>

②吸顶和返回顶部同时使用时候

App中html和body高度100%时候, 其他页面如果设置高100%或者min-height100%, 会导致吸顶和返回顶部其中一个会失效.  
解决方式:不设置页面高,同时不使用overflow标签.

Flex布局自动换行均等布局(三个)

    <div class="goods-content">
      <div class="goods-list" v-if="!searchStatus">
        <div class="goods-item" v-for="(item,index) in goodsList" :key="index">
          <div class="content">
            <div class="card-top">
              <img class="img" src="../../assets/home/banner.jpg" alt="">
            </div>
            <div class="name">100元卡</div>
            <div class="price">
              <div class="sale-price">￥96</div>
              <div class="old-price">￥196</div>
            </div>
            <div class="go-buy" @click="goDetails(item.id,1)">马上抢 ></div>
          </div>
        </div>
      </div>
    </div>

<style scoped lang='scss'>
.goods-content {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;

  .goods-list {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    height: 200px;
    box-sizing: border-box;
    padding: 0 0.5%;

    .goods-item {
      width: 33%;
      margin-bottom: 30px;

      &:nth-child(3n) {
        .content {
          float: right;
        }
      }

      &:nth-child(3n-1) {
        .content {
          margin: 0 auto;
        }
      }

      .content {
        width: 90%;
        padding-bottom: 1px;
        background: #ffffff;
        border-radius: 16px;
        overflow: hidden;

        .card-top {
          width: 100%;
          height: 180px;
          background-color: #FFEDE3;
          overflow: hidden;

          .img {
            width: 80%;
            height: 100px;
            margin: 46px auto;
          }
        }

        .name {
          width: 100%;
          box-sizing: border-box;
          padding: 0 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          font-size: 26px;
          font-weight: 400;
          text-align: left;
          color: #1a1a1a;
        }

        .price {
          display: flex;
          justify-content: start;
          align-items: center;
          margin-top: 10px;

          .sale-price {
            margin-left: 14px;
            font-size: 22px;
            font-weight: 500;
            color: #cb1c37;
          }

          .old-price {
            margin-left: 11px;
            font-size: 20px;
            font-weight: 400;
            text-decoration: line-through;
          }
        }

        .go-buy {
          width: 180px;
          height: 38px;
          margin: 14px auto 16px;
          background: #cb1c37;
          border-radius: 8px;
          font-size: 20px;
          font-weight: 400;
          text-align: center;
          color: #ffffff;
        }
      }
    }
  }
}
</style>

欢迎使用Markdown编辑器

你好！这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

全新的界面设计 ，将会带来全新的写作体验；
在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
全新的 KaTeX数学公式 语法；
增加了支持甘特图的mermaid语法¹ 功能；
增加了 多屏幕编辑 Markdown文章功能；
增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
增加了 检查列表 功能。

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

~~删除文本~~

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: link.

图片: Alt

带尺寸的图片:

居中的图片: Alt

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

项目
- 项目
  - 项目

项目1
项目2
项目3

计划任务
完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	`'Isn't this fun?'`	‘Isn’t this fun?’
Quotes	`"Isn't this fun?"`	“Isn’t this fun?”
Dashes	`-- is en-dash, --- is em-dash`	– is en-dash, — is em-dash