Vant2 部分代码示例的实现(轮播图、图片预览、对话框、底部弹框、日期检索等)_vant2 demo

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')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

//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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48