vant2部分组件的示例代码

//main.js
//官方的示例有部分不清不楚
import Vue from 'vue'
import App from './App.vue'
import vant from 'vant'
import { Lazyload } from 'vant'
// import 'vant/lib/index.css';
// import 'vant/lib/index.less'
import '../src/less/home.less'
import { ImagePreview } from 'vant';
import { Dialog } from 'vant';
import { ActionSheet } from 'vant';
import { ShareSheet } from 'vant';Vue.use(ShareSheet);
Vue.use(ActionSheet);
Vue.use(Dialog);
Vue.use(ImagePreview);
Vue.use(Lazyload);
Vue.use(vant)// import { Notify } from 'vant'// import { Toast } from 'vant'// import { ImagePreview } from 'vant'// import { Cell, CellGroup } from 'vant'// import { Button } from 'vant'// Vue.use(Button)
// Vue.use(Notify)
// Vue.use(Toast)
// Vue.use(ImagePreview)
// Vue.use(Cell)
// Vue.use(CellGroup)Vue.config.productionTip = false
new Vue({render: h => h(App)
}).$mount('#app')

//HelloWorld.vue
<template><div class="hello"><van-button round type="warning" class="sfasfasfsafasfasf" @click="myNotify">myNotify</van-button><van-button round type="warning" class="sfasfasfsafasfasf" @click="myToast">myToast</van-button><van-button round type="theme">theme</van-button><van-tabs v-model="active" animated><van-tab v-for="index in 4" :key="index" :title="'tab' + index">content {{ index }}</van-tab></van-tabs><van-uploaderv-model="fileList"multiple:max-count="4":max-size="3 * 1024 * 1024"@oversize="onOversize"/><van-tabbarv-model="active"active-color="#07c160"inactive-color="#000"@change="onTabberChange"><van-tabbar-item><span>Custom</span><template #icon="props"><img :src="props.active ? icon.active : icon.inactive" /></template></van-tabbar-item><van-tabbar-item icon="search">Tab</van-tabbar-item><van-tabbar-item icon="setting-o">Tab</van-tabbar-item></van-tabbar><van-button type="primary" text="显示遮罩层" @click="show = true" /><van-overlay :show="show"><div class="wrapper" @click="show = false"><p class="block" @click.stop>Embedded Content</p></div></van-overlay><van-grid :column-num="5"><van-grid-item v-for="value in 5" :key="value" icon="photo-o" text="Text" /></van-grid><van-steps direction="vertical" :active="0"><van-step><h3>【City】Status1</h3><p>2016-07-12 12:40</p></van-step><van-step><h3>【City】Status2</h3><p>2016-07-11 10:00</p></van-step><van-step><h3>【City】Status3</h3><p>2016-07-10 09:30</p></van-step></van-steps><van-searchv-model="value"show-actionlabel="Address"placeholder="Placeholder"@search="onSearch"><template #action><div @click="onSearch">Search</div></template></van-search><!-- <van-overlay:show="show"@click="show = false"/>--><van-count-downref="countDown"millisecond:time="3000":auto-start="false"format="ss:SSS"@finish="finish"/><van-grid clickable :column-num="3"><van-grid-item text="Start" icon="play-circle-o" @click="start" /><van-grid-item text="Pause" icon="pause-circle-o" @click="pause" /><van-grid-item text="Reset" icon="replay" @click="reset" /></van-grid><van-cell title="分享链接" @click="showShare = true" /><van-share-sheet v-model="showShare" title="Share" :options="options" @select="onSelect" /><!-- 轮播图 --><!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"><van-swipe-item v-for="(image, index) in gallaryImages" :key="index"><img v-lazy="image" /></van-swipe-item></van-swipe>--><div class="demo-swipe"><van-swipe><van-swipe-itemv-for="(image,index) in imgList":key="image.banner_id"@click="picBanner(index)"><img v-lazy="image.banner_thumb" /></van-swipe-item></van-swipe></div><!-- 图片预览 --><van-buttonroundtype="warning"class="sfasfasfsafasfasf"@click="myImagePreview">myImagePreview</van-button><!-- 对话框 --><van-buttonroundtype="warning"class="sfasfasfsafasfasf"@click="myConfirmClose">myConfirmClose</van-button><!-- 底部弹框 --><van-cell is-link title="基础用法" @click="panelShow = true" />
<van-buttonroundtype="warning"@click="panelShow2 = true">基础用法2</van-button><!-- <van-action-sheet v-model="panelShow" title="标题" :actions="actions" @select="onPanelSelect" /> --><van-action-sheet v-model="panelShow" title="标题" :actions="actions" @select="onPanelSelect" /><van-action-sheet v-model="panelShow2" title="标题"><div class="content">内容</div>
</van-action-sheet>
<!-- 日期检索 --><van-buttonroundtype="warning"class="sfasfasfsafasfasf"@click="showCalender = true">showCalender</van-button>
<van-calendar v-model="showCalender"  type="range"  :min-date="minDate" :max-date="maxDate" color="#07c160" /><!-- import { Toast } from 'vant';export default {data() {return {};},methods: {},
}; --><!-- 时间选择组件 --><!-- 欢迎内容 --><h1>2323{{ msg }}</h1><p>For a guide and recipes on how to configure / customize this project,<br />check out the<ahref="https://cli.vuejs.org"target="_blank"rel="noopener">vue-cli documentation</a>.</p><h3>Installed CLI Plugins</h3><ul><li><ahref="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"target="_blank"rel="noopener">babel</a></li><li><ahref="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"target="_blank"rel="noopener">eslint</a></li></ul><h3>Essential Links</h3><ul><li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li><li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li><li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li><li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li><li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li></ul><h3>Ecosystem</h3><ul><li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li><li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li><li><ahref="https://github.com/vuejs/vue-devtools#vue-devtools"target="_blank"rel="noopener">vue-devtools</a></li><li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li><li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li></ul></div>
</template><script>
import { ImagePreview } from "vant";
// import { Dialog } from "vant";
import { Toast } from 'vant';
export default {// mounted() {//   this.$notify('Notify Message');// },name: "HelloWorld",props: {msg: String},data() {return {active: 2,fileList: [{url: "https://img.yzcdn.cn/vant/leaf.jpg",status: "success",message: "success..."},{url: "https://img.yzcdn.cn/vant/leaf.jpg",status: "uploading",message: "Uploading..."},{url: "https://img.yzcdn.cn/vant/tree.jpg",status: "failed",message: "Failed"}],icon: {active: "https://img.yzcdn.cn/vant/user-active.png",inactive: "https://img.yzcdn.cn/vant/user-inactive.png"},show: false,value: "",showShare: false,options: [{ name: "Wechat", icon: "wechat" },{ name: "Weibo", icon: "weibo" },{ name: "Link", icon: "link" },{ name: "Poster", icon: "poster" },{ name: "Qrcode", icon: "qrcode" }],// 轮播images: ["https://img.yzcdn.cn/vant/apple-1.jpg","https://img.yzcdn.cn/vant/apple-2.jpg"],current: 0,//图片查看//  showGallary: false,// gallaryIndex: 0,gallaryImages: ["https://img.yzcdn.cn/vant/apple-1.jpg","https://img.yzcdn.cn/vant/apple-2.jpg"],imgList: [{ banner_id: 1, banner_thumb: "https://img.yzcdn.cn/vant/apple-1.jpg" },{ banner_id: 2, banner_thumb: "https://img.yzcdn.cn/vant/apple-2.jpg" }],// show: false,index: 0,showImagesDialog: "",// images: [//   'https://img.yzcdn.cn/vant/apple-1.jpg',//   'https://img.yzcdn.cn/vant/apple-2.jpg',// ],// show: false,//底部弹窗CustomPanelshow: false,CustomPanelTitle: "CustomPanelTitle",BasicPanelShow: false,BasicPanelActions: [{ name: "Option 1" },{ name: "Option 2" },{ name: "Option 3" }],panelShow: false,panelShow2: false,// 时间选择和检索showCalender:false,minDate: new Date(2010, 0, 1),maxDate: new Date(2020, 0, 31),};},methods: {afterRead(file) {console.log(file);},onOversize(file) {console.log(file);alert("onOversize");},onTabberChange() {// Notify('通知内容');},//音频播放start() {this.$refs.countDown.start();},pause() {this.$refs.countDown.pause();},reset() {this.$refs.countDown.reset();},finish() {this.Toast("Finished");},showModal() {this.show = !this.show;},//搜索onSearch(val) {console.log(val);},//分享onSelect(option) {console.log(option);this.showShare = false;},//轮播onChange(index) {this.current = index;console.log(index);},picBanner(index) {for (var i = 0; i < this.bannerlength; i++) {this.bannerlist[i] = this.imgList[i].banner_thumb;}ImagePreview({images: this.bannerlist,startPosition: index});},//图片showImages(imgs, index) {console.log(imgs);console.log(index);// this.showImagesDialog = ImagePreview([//   'https://img.yzcdn.cn/vant/apple-1.jpg',//   'https://img.yzcdn.cn/vant/apple-2.jpg',// ]);},// onGallaryChange(gallaryIndex) {//   this.gallaryIndex = gallaryIndex;// },myNotify() {// this.$notify('myNotify Message');this.$notify({ type: "warning", message: "Notify Message" });},myToast() {this.$toast.loading({mask: false,message: "加载中...",loadingType: "spinner"});},showNotify() {this.show = true;setTimeout(() => {this.show = false;}, 2000);},myImagePreview() {ImagePreview({images: ["https://img.yzcdn.cn/vant/apple-1.jpg","https://img.yzcdn.cn/vant/apple-2.jpg"],closeable: true});},// 确认弹窗onPanelSelect(item) {// 默认情况下点击选项时不会自动收起// 可以通过 close-on-click-action 属性开启自动收起this.show = false;console.log(Toast);console.log(item);this.$toast.loading({mask: false,message: "加载中...",loadingType: "spinner"});// Toast(item.name);},}
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

//home.less@import "../../node_modules/vant/lib/index.less";
//主题设置
@gold: #c6945a;
@main-theme-color:@gold;//主题按钮
@button-theme-background-color:@main-theme-color;
@button-theme-color: #fff;
@button-border-width: 1px;
@button-theme-border-color:@main-theme-color;
.van-button {&--theme {color: @button-theme-color;background-color: @button-theme-background-color;border: @button-border-width solid @button-theme-border-color;}&--plain {&.van-button--theme {color: @button-theme-background-color;}}
}
.van-tab--active{color:@main-theme-color;
}//home
.wrapper {display: flex;align-items: center;justify-content: center;height: 100%;
}
.block {width: 120px;height: 120px;background-color: #fff;
}
.van-search__label,.van-search__action{color:#323233;
}
.van-cell{color:#323233;
}
//轮播图
// .my-swipe .van-swipe-item {
//     color: #fff;
//     font-size: 20px;
//     line-height: 150px;
//     text-align: center;
//     background-color: #39a9ed;
//   }
//   .custom-indicator {
//     position: absolute;
//     right: 5px;
//     bottom: 5px;
//     padding: 2px 5px;
//     font-size: 12px;
//     background: rgba(0, 0, 0, 0.1);
//   }
.demo-swipe .van-swipe img {display: block;box-sizing: border-box;width: 100%;height: 240px;// padding: 30px 60px;background-color: #fff;pointer-events: none;
}
.img-banner{width:100%;height:300px;overflow: hidden;
}
.content {padding: 16px 16px 160px;
}