Can uniapp use vant?

Uniapp can use vant, because vant ui has h5 version and WeChat applet version, and starting from "uni-app2.4.7", H5 and QQ applet also support WeChat applet components. The method of use is to introduce the required components in "globalStyle" of "pages.json".

The operating environment of this tutorial: windows7 system, uni-app2.5.1 version, Dell G3 computer.

Recommended (free): uni-app tutorial

uni-app uses Vant components

Preface

vant ui has h5 version and WeChat applet version. Its h5 version can only be used for h5, and its WeChat mini program version (vant weapp) can be used for WeChat and App. Starting from uni-app 2.4.7, H5 and QQ mini programs also support WeChat mini program components.

Use steps

Download code

• Create a new wxcomponents directory in the project root directory. This directory should be the same as components directory sibling.

• Download the vant-weapp latest source code directly through git and copy the dist directory to the newly createdwxcomponents directory, and rename dist to vant-weapp.

• Introduce the required components into globalStyle of pages.json

  

Try whether it is successful

<template>
  <p>
    <van-picker
      v-if="flag"
      :columns="columns"
      @change="changePicker"
    />
    <van-button @click="show">显示</van-button>
  </p>

</template>

<script>
export default {
  data() {
    return {
      columns: ["杭州", "宁波", "温州", "嘉兴", "湖州"],
      flag: false
    };
  },
  methods: {
    show() {
      console.log("1 =", "show");
      this.flag = !this.flag;
    },
    changePicker(event) {
      console.log("1 =", event);
    }
  }
};
</script>

Notes

The message prompt in the Vant componentNotify is quite special

Not only It needs to be introduced in globalStyle of pages.json and added to the vue prototype in main.js

//main.js

import Notify from './wxcomponents//vant/notify/notify';

Vue.prototype.$notify = Notify

and then used

<template>
    <view>
        <van-button @click="showNotify">弹出提示</van-button>
 	<van-notify id="van-notify" />
    </view>
</template>

<script>
export default {
  methods: {
    showNotify() {
       this.$notify({ type: "danger", message: "通知内容" });
    }
  }
};
</script>

in the page

The above is the detailed content of Can uniapp use vant?. For more information, please follow other related articles on the PHP Chinese website!