vant-联系人卡片

vant

https://vant-contrib.gitee.io/vant/#/zh-CN/

安装:npm i vant

1 使用vant

1.1 按需引入组件

npm i babel-plugin-import -D

1.2 配置babel（新增配置）

{"plugins": [["import", {"libraryName": "vant","libraryDirectory": "es","style": true}]]
}

重启

2 全局注册

import { Button } from 'vant';       main.js
Vue.use(Button);

3 局部注册

import { Button } from 'vant';export default {name: 'App',components: {[Button.name]: Button,}}

4 使用

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>                app.vue
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

5 联系人卡片

main.js配置环境并下载依赖 npm i vue-router axios vant

注册总线                              Vue.prototype.$bus = new Vue()
路由环境   ==>router routes  pages    import router from "router/router"
vant     ==>utils                    import "util/vant"
axios    ==>api
vuex     ==>store                    import store from "store/store"

配置环境：

① 路由环境：

router.js

import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)
// 引入routes
import routes from "routes/routes"
// 暴露
export default new VueRouter({routes
})

routes.js

import contact from "pages/contact"export default [{path:"contact",component:contact},{path:"/",redirect:"/contact"}
]

pages/contact.vue

在main.js中引入

卡片内容直接复制网址：

② vant环境：util/vant

// 将全局引入的vant环境在这里单独引入，便于管理 在main.js中单一当前环境
import Vue from "vue"
import { ContactCard, ContactList, ContactEdit ,Popup } from 'vant';
Vue.use(ContactCard).use(ContactList).use(ContactEdit).use(Popup);

在main.js中引入

③ axios/api环境contact.js

import axios from "axios"
const contact = axios.create({timeout:5000,baseURL:"http://localhost:9000/api"
})
// 添加请求拦截器
contact.interceptors.request.use(function (config) {return config;
});
// 添加响应拦截器
contact.interceptors.response.use(function (response) {return response.data;
}, function (error) {return Promise.reject(error);
});
//暴露api
//获取联系人列表数据
export const getContactList = ()=>contact.get("/contactList")
//新增联系人
export const addContactByForm= ({name,tel})=>{//对name,tel进行格式转化const formData = new  FormData()formData.append("name",name)formData.append("tel",tel)return contact.post("/contact/new/form",formData)
}
export const addContactByJson= ({name,tel})=>contact.post("/contact/new/json",{name,tel})
//编辑联系人
export const editContact= ({name,tel,id})=>contact.put("/contact/edit",{name,tel,id})
//删除联系人
export const delContact= id    =>contact.delete("/contact",{params:{id}})

在main.js中引入

④ vuex/store环境

目前只配置store.js环境

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
import actions from "./actions"
import getters from "./getters"
import mutations from "./mutations"
import state from "./state"
export default new Vuex.Store({actions,getters,mutations,state
})

在main.js中引入

⑤ 引入环境main.js入口文件

import Vue from 'vue'
import App from './App'Vue.config.productionTip = false
//注册总线
Vue.prototype.$bus = new Vue()
//注册路由环境
import router from "router/router"
//注册vuex环境
import store from "store/store"
//注册axios环境
//注册vant
import "util/vant"new Vue({el: '#app',components: { App },template: '<App/>',router,store
})

打开后台数据库，进行后台数据的请求

contact.vue

进行后台的请求后，列表中（list“【】）的数据就为空

 import {getContactList,addContactByForm,addContactByJson,editContact,delContact} from "api/contact.js"export default {data() {return {chosenContactId: null,//代表被选中的联系人的ideditingContact: {}, //联系人编辑组件的回显数据showList: false, //控制联系人列表是否隐藏showEdit: false, //控制联系人编辑是否隐藏isEdit: false,  // 控制联系人编辑组件;是否多一个删除按钮list: []// 联系人列表};},computed: {//cardType 依赖于 chosenContactId//卡片类型cardType() {//chosenContactId 有值代表是编辑卡片//chosenContactId 无值代表是新增卡片return this.chosenContactId !== null ? 'edit' : 'add';},//currentContact 依赖于 chosenContactId list//当前选中的联系人信息currentContact() {const id = this.chosenContactId;return id !== null ? this.list.filter(item => item.id === id)[0] : {};}},methods: {// 添加联系人onAdd() {this.editingContact = {};//清空编辑页面的数据this.isEdit = false;  //不显示编辑界面的删除按钮this.showEdit = true; //显示编辑界面},// 编辑联系人onEdit(item) {//item 当前修改的联系人的信息this.editingContact = item;this.isEdit = true; //显示编辑界面的删除按钮this.showEdit = true;//显示编辑界面},// 保存联系人async onSave(info) {this.showEdit = false; //关闭编辑页this.showList = false; //关闭列表页if (this.isEdit) {//做修改操作(保证按钮 删除按钮)//this.list = this.list.map(item => item.id === info.id ? info : item);const {data:{id}} =await editContact(info)//修改完毕后 修改的那个联系人就是 选中的联系人await this.getContactList()this.chosenContactId = id} else {//做新增操作(保存按钮)  发送请求新增数据 只是数据库中多了一条数据//const {data:{id}} = await addContactByJson(info)const {data:{id}} = await addContactByForm(info)//一定要保证list先更新 chosenContactId再更新//没有await会报错 但是不影响界面的渲染 报错的原因是因为currentContact为undefinedawait this.getContactList()//新增完毕后 新增的那个联系人就是 选中的联系人this.chosenContactId = id;}},// 删除联系人async onDelete(info) {//info:当前联系人this.showEdit = false; //关闭编辑页await delContact(info.id)//删除的那一条正好是选中的那一条 则清空chosenContactId (先动id 再动list)if (this.chosenContactId === info.id) {this.chosenContactId = null;}await this.getContactList()},// 选中联系人onSelect() {this.showList = false;//关闭列表界面},//发送请求获取list数据async getContactList(){const {code,data} = await getContactList()if(code === 200){this.list = data;}}},async created() {//发送请求获取list数据await this.getContactList()//后续操作需要在请求完成之后再进行的 加await}};

1 解构赋值：的用途这两种用途不能同时使用

① 代表匹配模式

② 代表起别名

2 解构赋值时，如果去解构一个对象属性，最好要赋值一个默认的空对象

3 要区分解构赋值语法和函数实参传递形参的语法，当形参的写法中包含{}时，才会运用上解构赋值语法

vant-联系人卡片相关推荐

sitecore系列教程之如何以编程方式将访客数据关联到联系人卡片
在我之前关于Sitecore体验资料的帖子中,我们看到了我们如何了解访问者的一切,包括访问他们在访问期间触发的事件.在这篇博客文章中,我将引导您完成识别匿名用户并将用户访问与联系人记录联系起来的过程, ...
如何在WhatsApp中添加联系人
Khamosh Pathak Khamosh Pathak WhatsApp on Android and iPhone directly integrates with your contact b ...
Vue 实现商品分类、列表、详情、购物车、搜索（vant）
商品分类Classify: <template><div><div style="display: flex;"><div class=& ...
ios 绕过mfi_如何让联系人绕过iOS的免打扰模式
ios 绕过mfi Khamosh Pathak Khamosh Pathak The iPhone's Do Not Disturb feature is a great way to make s ...
不小心合并了icloud通讯录_如何在macOS和iCloud中合并和删除重复的联系人？
如果您多年来一直在Mac上维护和迁移相同的"联系人"列表,那么您可能会遇到很多重复的联系人卡片.首次在Mac上设置iCloud联系人后,它们似乎也可能出现在任何地方.在这里,我们将 ...
常用的几款Vue移动端UI推荐
收录几个常用的移动端UI框架,不定时更新. 1. Ionic / Ionic Framework 官网地址 | Github地址 An open source mobile UI toolkit fo ...
《统一沟通-微软-实战》-7-配置-3-响应组
1. 创建响应组代理组 2. 创建响应组队列 3. 定义响应组工作时间和假日 4. 创建响应组工作流 5. 测试响应组是一项企业语音功能,用于将传入呼叫路由至人员组(称为代理,如技术支持或客户服务台 ...
Windows phone 7 Mango 更新发布会Session 整理
这周5月24日迎来MS官方对Windows phone 7 Mango Update更新的发布会. 在美国太平洋夏季时间上午7点,即东部时间上午10点[北京时间5月24日22点]直播纽约的活动现场 ...
如何正确使用AD构造企业的组织架构
AD(活动目录)有一个非常基础,非常重要的功能,就是形成企业的组织架构.由于AD里面的数据是基础数据,所以全球所有主流应用都会使用AD里面的组织架构数据. 最常见的就是Outlook,当你打开在Out ...

vant-联系人卡片

vant

1 使用vant

1.1 按需引入组件

1.2 配置babel（新增配置）

2 全局注册

3 局部注册

4 使用

5 联系人卡片

配置环境：

① 路由环境：

② vant环境：util/vant

③ axios/api环境contact.js

④ vuex/store环境

⑤ 引入环境main.js入口文件

vant-联系人卡片相关推荐

最新文章

热门文章