移动端Vue组件库-Vant学习
全局引入
import Vant from 'vant'; //嫌麻烦就全部一次导出,虽然包会稍微有点大
import 'vant/lib/index.css'; //注意导入全局的这个css,否则布局组件无法正确使用
Vue.use(Vant)
下拉选框
只能单选,不支持多选
返回obj对象,填充picker, 并取选择对象的ID
<div>
<van-field readonly clickable name="picker" :value="selectedClassify" label="分类"
placeholder="点击选择分类" @click="showPicker = true" />
<van-popup v-model="showPicker" position="bottom">
<van-picker show-toolbar :columns="columns" value-key="name" @confirm="onConfirm" @cancel="showPicker = false" />
</van-popup>
</div>
export default {
data() {
return {
selectedClassify: [],
columns: [{id:1, name:"名称A"}, {id:2, name:"名称B"}]
};
},
methods: {
onConfirm(obj) {
this.selectedClassify.push(obj.id);
this.showPicker = false;
}
}
};
checkbox 多选框
<div>
<van-checkbox-group v-model="selectedClassify" direction="horizontal">
<van-checkbox shape="square" v-for="item in tags" v-bind:name="item.id" >{{item.name}}</van-checkbox>
</van-checkbox-group>
</div>
export default {
data() {
return {
selectedClassify: [],
tags: []
};
},
methods: {
}
};
注意:这里的v-bind要放在v-for后面,否则selectedClassify的第一个元素是item.id的字符串,未明白为什么
消息提示
this.$toast('创建成功')
或者
this.$notify('成功')
移动端Vue组件库-Vant学习的更多相关文章
- ElementUI 不维护了?供我们选择的 Vue 组件库还有很多!
前文回顾:Vue+Spring Boot 前后端分离的商城项目开源啦! Vue 组件千千万,只要不行咱就换. ElementUI 近况 根据我最近的观察,得知一些关于 ElementUI 维护人员都退 ...
- 一、移动端商城 Vue 组件库
一.组件库 移动端商城 Vue 组件库
- 发布 Vant - 高效的 Vue 组件库,再造一个有赞移动商城也不在话下
发布 Vant - 高效的 Vue 组件库,再造一个有赞移动商城也不在话下:https://segmentfault.com/a/1190000011377961 vantUI框架在vue项目中的应用 ...
- Vue组件库的那些事儿,你都知道吗?
前段时间一直在研究Vue组件库,终于在组内派上了用场.来给大家贡献一篇关于Vue组件库的相关知识.经验不多,如果有不合理的地方还请多多指出哦--- 回想一下,在你们公司或者你们小组是否有一个以上的项目 ...
- 滴滴开源 Vue 组件库— cube-ui
cube-ui 是滴滴去年底开源的一款基于 Vue.js 2.0 的移动端组件库,主要核心目标是做到体验极致.灵活性强.易扩展以及提供良好的周边生态-后编译. 自 17 年 11 月开源至今已有 5 ...
- 利用webpack打包自己的第一个Vue组件库
先说一下这篇文章的诞生原因.我们有一个这样的项目,类似或者说就是一个仪表板-Dashboard,其中的各个部分可能不是一个部门写的……我们需要提供拖拽布局(大小和位置)和展示的能力.要实现这样一个功能 ...
- 使用VitePress搭建及部署vue组件库文档
每个组件库都有它们自己的文档.所以当我们开发完成我们自己的组件库必须也需要一个组件库文档.如果你还不了解如何搭建自己的组件库可以看这里->从零搭建Vue3组件库.看完这篇文章你就会发现原来搭建和 ...
- 仿ElementUI构建自己的Vue组件库用babel-plugin-component按需加载组件及自定义SASS主题
最近使用ElementUI做项目的时候用Babel的插件babel-plugin-component做按需加载,使得组件打包的JS和CSS包体积大大缩小,加载速度也大大提升,所有想模仿做一个组件库也来 ...
- vue组件库用markdown生成文档
前言: 开发vue组件库需要提供组件的使用文档,最好是有渲染到浏览器的demo实例,既能操作又能查看源代码.markdown作为常用的文档编写载体,如果能在里面直接写vue组件,同时编写使用说明就再好 ...
随机推荐
- vue封装axios
一.安装axios npm install --save axios 二.在src下面创建文件夹api=>api.js(接口集合)+http.js(封装的请求) 三.在main.js中引用api ...
- Spring----注释----开启Annotation <context:annotation-config> 和 <context:component-scan>诠释及区别
来源:http://www.cnblogs.com/leiOOlei/p/3713989.html <context:annotation-config> 和 <context:co ...
- Windows平台安装Beautiful Soup
Windows平台安装Beautiful Soup 2013-04-01 09:31:23| 分类: Python|举报|字号 订阅 Beautiful Soup是一个Python的一个库, ...
- 使用 keras 和 tfjs 构建血细胞分类模型
欢迎大家关注我们的网站和系列教程:http://www.tensorflownews.com/,学习更多的机器学习.深度学习的知识!
- C++ STL 常用容器之 stack
C++ STL Container--Stack 栈是一种先进后出(LIFO)的数据结构,限制只能在一端完成插入和删除操作,这一端叫做栈顶(top),另一端即为栈底(bottom).C++ STL(S ...
- Docker笔记(十三):容器日志采集实践
日志是服务运行过程中的一个关键环节,借助日志,我们可以排查定位问题,也可以借助集中化的日志管理平台(如ELK)来做一些必要的数据统计分析.在Docker环境中,日志的采集比传统环境更为复杂,因此了解D ...
- coding++:MD5加密(JAVA加密 与 JS加密不一致问题)
要求:根据指定 字符加密 JS中的加密方法 要和 JAVA中的算法保持一致,解决如下: var rotateLeft = function (lValue, iShiftBits) { retur ...
- iOS 优化实例
一.接口请求优化 在工程项目中,多个一级界面包含状态,如:服务入口的动态配置,未读消息数量,图片文字等,因此产品设计要每次切换 tab 时都请求数据,及时的更新页面状态.在实际开发中,频繁的调用接口, ...
- iOS 应用签名
一.密码学简介 1.1 base64 Base64 是一种通过查表的编码方法,不能用于加密,即使使用自定义的编码表也不行. Base64 适用于小段内容的编码,比如数字证书签名.Cookie 的内容等 ...
- Kaggle竞赛入门(二):如何验证机器学习模型
本文翻译自kaggle learn,也就是kaggle官方最快入门kaggle竞赛的教程,强调python编程实践和数学思想(而没有涉及数学细节),笔者在不影响算法和程序理解的基础上删除了一些不必要的 ...