【Vant 】组件基础使用

1、ImagePreview 图片预览

<template>
  <van-cell title="图片预览" center>
    <img :src="images" @click="choosePicture(images)" />
  </van-cell>
</template>
<script>
  import { ImagePreview } from 'vant' 
  export default{
    data(){
      return{
        // 当前图片的索引值
        index: 0,  
        //需要预览的图片 URL 数组
        images: ['https://img01.yzcdn.cn/vant/leaf.jpg'], 
      },
    },
    methods:{
      // 图片预览
      choosePicture() {
        ImagePreview({
          images: this.images,
          showIndex: true,
        })
      },
    }
  }
</script>

2、NavBar 导航栏 - 返回上一页

<template>
  <div>
     <van-nav-bar 
      title="导航栏标题" 
      left-text="返回" 
      left-arrow 
      @click-left="onClickLeft"
     />
  </div>
</template>
<script>
  export default(){
    data(){
      return{

      }
    },
    methods:{
      // 返回上一页
      onClickLeft() {
        this.$router.go(-1)
      },
    }
  }
</script>

3. Cell 单元格

// JumpFile为要跳转到的页面 ? 传的参数
<van-cell is-link :to="`/JumpFile?id=${xxx.id}`">
   <van-icon name="idcard"></van-icon> &nbsp; 该单元格的标题
</van-cell>

4. List 列表以及触底加载

<van-list
  v-model:loading="loading"
  :finished="finished"
  finished-text="没有更多了"
  :offset="2"
  @load="onLoad"
>
  <div class="cardList" v-for="details in detailsList" :key="details">
      <van-cell is-link :to="`/JumpFlie?id=${details.id}`">
         <van-icon name="idcard"></van-icon>
          &nbsp; {{ details.title }}
      </van-cell>
      <div class="bgcolor" style="margin-bottom: 15px">
         <van-row :gutter="20" class="card_details">
           <span class="ellipsis">
              序号：{{ details.number }}
            </span>
          </van-row>
          <van-row class="card_details">
            <span class="ellipsis">
              单位： {{ details.unit }}
            </span>
          </van-row>
          <van-row class="card_details">
            <span class="ellipsis">
              时间：{{ new Date(details.date).toLocaleString() }}
            </span>
          </van-row>
          <div>
            // 文本溢出隐藏（坑）
            <van-row class="card_details" style="margin-bottom: 10px">
              <span class="ellipsis" style="padding-bottom: 10px">
                接收：{{ details.delivery }}
              </span>
            </van-row>
            <van-row class="refuserow">
              <van-button
                plain
                hairline
                icon="success"
                size="small"
                type="primary"
                @click="方法名(details.id)"
              >
                确认
              </van-button>
              <van-button
                style="margin-left: 25px"
                plain
                icon="cross"
                hairline
                size="small"
                type="danger"
                @click="方法名(details.id)"
              >
                取消
              </van-button>
            </van-row>
          </div>
        </div>
      </div>
    </van-list>
    
    // detailsList (略)
    
    // 文本溢出隐藏的style (仅ellipsis)
    // 坑 van-row 自带 flex 布局，和溢出隐藏冲突。在文字上另外包裹一个标签
    <style>
      .ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    </style>

5. 滚动条穿透 | 双滚动条

 // 根目录APP.VUE中，添加：
 
 <style lang="less">
   ::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
      display: none;
    }
    #app {
      width: 100vw;
      height: 100vh;
      overflow-y: auto;
    }
  </style>

.内层滚动条页面的总div的clss类名 {
    width: 100%;
    height: calc(100vh - 1px);
    overflow-y: auto;
  }

6. van-button

        问题：APP端真机测试，按钮的边框显示不完整；PC端则显示完整

        原因：不同的手机有不同的像素密度。

        本质：我设置边框的时候 直接用的<van-button plain hairline></button>

        解释：hairline是0.5px 显示在APP上过细

        解决：把hairline去掉

<van-button  plain size="small" type="danger" @click="事件方法名">
    细边框导致按钮显示不完整
</van-button>

7. 登录时，发现第一次首次进入页面，验证码加载失败

        解决：在输入用户名或密码的第一个字符时，使用Ajax异步请求一次验证码，来模拟用户手动刷新

8. 后台传的图片路径是文件流
   最开始用blob处理，处理结果为blob:http://路径，发现不能预览图片
   然后用另一种方法

9. 当从后端访问到的数据有多条，客户要求每条数据展示一行，这时候可以直接用标签br换行

10. 数组1里边嵌套数组2，那么可以先遍历数组1，完了遍历数组2，让数组2按行遍历。
    想让遍历出来的数据部分展示。例如只想要展示三条，这时候可以用slice(0，3)处理，超过三行则用… … 表示，这里只需要用v-if做判断，如果超过三条就…

11. 后台返回的数据里有不用的状态，要求以不同的图标显示。我用的vue3，在阿里矢量图库 下载的图png格式，用到vue项目中。
    先下载 在vue的assets下新建文件夹iconfont，将图片拖拽进去，页面直接使用