ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

移动端Vue组件库-Vant学习

2020-03-28 21:03:54  阅读:340  来源: 互联网

标签:Vue obj Vant selectedClassify export 组件 id name


全局引入

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,obj,Vant,selectedClassify,export,组件,id,name
来源: https://www.cnblogs.com/for-you/p/12567085.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有