vue vant 通讯录组件

1.处理数据

引入第三方库将汉字转换成拼音，再提取首字母去完成匹配

import pinyin from "wl-pinyin"

定义一个字母表数组

index:["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"]

格式化数据

this.index.forEach((item) => {this.allResidentList[item] = [];//this.allResidentList后台传的数据details.data.forEach((el) => {let first = pinyin.getFirstLetter(el.fullName).substring(0, 1);if (first == item) {this.allResidentList[item].push(el)}})})

格式化之后的数据

2.组件引入

<van-index-bar :class="{ hideSidebar: hideSidebar }" :sticky="false"><van-index-anchor :index="index" v-for="(item,index) in resident" :key="index"><span class="indexWord">{{index}}</span><div class="item" @click="goMsgReply" v-for="citem of item" :key="citem.id"><van-row class="patient bor"><van-col span="12"><div class="patient-left"><img v-if="citem.imgUrl" :src="citem.imgUrl" alt="" /><img v-else src="../../../assets/defaultHeadImg.png" alt="" /><div class="patient-msg"><div class="patient-txt"><div class="name">{{ citem.fullName }}</div><span>{{ citem.sex==0?'女':'男' }}</span><span>{{ citem.age }}岁</span></div><div class="flex"><span class="tag" v-for="tag of citem.diseaseTags" :key="tag">{{ tag }}</span></div></div></div></van-col><van-col span="12"><div class="patient-right"><div class="txt">{{ citem.dossierFlag }} {{ citem.signFlag }}</div></div></van-col></van-row></div></van-index-anchor></van-index-bar>

vue vant 通讯录组件相关推荐

vue vant Area组件使用详解
文章目录 1. 下载areaList.js 2. 组件注册 3. 封装组件 4. 使用组件 5. 效果图 6. 项目源码 1. 下载areaList.js 见文章末尾 2. 组件注册 main.js引 ...
vue vant Calendar组件日历开始时间结束时间的范围控制时间戳标准时间转换获得月份的最后一天
功能: 开始时间范围选择: 最小时间:去年的今天最大时间:当前时间结束时间范围选择: 最小时间:开始时间最大时间: 开始时间月份的最后一天比如:当前时间2021-07-24,开始时间选择范围就 ...
vue vant Image组件图片加载时与加载失败的处理方法
增强版的 img 标签,提供多种图片填充模式,支持图片懒加载.加载中提示.加载失败提示鉴于百度搜索不到vant官方网址,分享一下vant组件库官网地址,方便新手使用 vant官网地址 Vant 3 ...
Vue2 - 网易云音乐项目笔记（基于Vant UI组件库）
目录一.项目技术二.准备工作 1.初始化Vue项目 2.配置Vant UI组件库 3.下载并使用vue-router库 4.接口API 5.postcss插件三.分析页面实现功能 1.路由页面准 ...
vant引入组件报错_强烈推荐优秀的Vue UI组件库
在我们实际开发中常常因为项目周期短不得不引入一些UI框架来辅助开发那常见的比较好的UI框架有那些呢(基于VUE) Element UI组件库 (pc端) Element,一套为开发者.设计师和产品经 ...
html5地区级联选择,【JS】vue+vant移动端地区级联选择组件
首页专栏 javascript 文章详情 0 vue+vant移动端地区级联选择组件 quanta发布于今天 08:25 写在开头:项目的框架是vue+vant,业务需求一个级联的地区选择,写完才 ...
[Vue+Vant] 使用 Vant 组件的详细操作流程
目录 1. 序言 2. 在 main.js 中注册组件 3. 在 components 目录中创建组件 4. 在 App.vue 中引用组件 1. 序言首先创建一个基于 Vue 和 Vant 的项目 ...
Vue移动端 Vant的组件使用自定义图标
Vant自带的图标比较少,有时候不能满足使用. 普通使用第三方图标我一般使用阿里图标找到自己想要的图片然后加入购物车 1.点击下载代码 2.下载完成后放在项目中,如放在src/assets下, ...
小猿圈web前端之移动端Vue+Vant实现上传压缩旋转图片功能
小猿圈web前端讲师为了大家更好的学习前端知识决定每天分享一个web前端案例,希望对你与学习前端的你有所帮助,今天分享的是移动端Vue+Vant的Uploader实现上传.压缩.旋转图片等功能的详细介 ...

vue vant 通讯录组件

1.处理数据

vue vant 通讯录组件相关推荐

最新文章

热门文章