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-uploader v-model="fileList" multiple :max-count="4" :max-size="3 * 1024 * 1024" @oversize="onOversize" /> <van-tabbar v-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-search v-model="value" show-action label="Address" placeholder="Placeholder" @search="onSearch" > <template #action> <div @click="onSearch">Search</div> </template> </van-search> <!-- <van-overlay :show="show" @click="show = false" />--> <van-count-down ref="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-item v-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-button round type="warning" class="sfasfasfsafasfasf" @click="myImagePreview" >myImagePreview</van-button> <!-- 对话框 --> <van-button round type="warning" class="sfasfasfsafasfasf" @click="myConfirmClose" >myConfirmClose</van-button> <!-- 底部弹框 --> <van-cell is-link title="基础用法" @click="panelShow = true" /> <van-button round type="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-button round type="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 <a href="https://cli.vuejs.org" target="_blank" rel="noopener" >vue-cli documentation</a>. </p> <h3>Installed CLI Plugins</h3> <ul> <li> <a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener" >babel</a> </li> <li> <a href="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> <a href="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; }