vant——Vue组件库的使用(Vue2)

vant——Vue组件库的使用(Vue2)

1、安装vant

   通过npm安装

   在vue2项目执行npm

npm i vant@latest-v2 -S

2、引入vant组件(在vue全局main.js中引入 )

import Vue from 'vue'; 
import Vant from 'vant'; 
import 'vant/lib/index.css'; 
Vue.use(Vant); 

3、查看文档 使用需求的组件(演示组件)

Area省市区选择组件

   1、在项目文件下下载@vant/area-data

​

   2、在全局main.js中导入Area组件

   3、在页面中引用(不要写在全局main.js中,写在引用的页面中)

​

   4、最后在页面中使用

结束，完整代码(引用几个组件)

   全局 main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 导入vant
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

// 导入Cascader 级联选择组件
import {
	Area
} from 'vant';
Vue.use(Area);

// 导入加载
import { Loading } from 'vant';
Vue.use(Loading);

// 弹窗
import { Popup } from 'vant';
Vue.use(Popup);
// 全局css
import './assets/css/test.css'

Vue.config.productionTip = false

new Vue({
	router,
	store,
	render: h => h(App)
}).$mount('#app')

   引用页面 Vant.vue

<template>
	<div>
		<!-- 按钮 -->
		<van-button type="primary">主要按钮</van-button>
		<van-button type="info">信息按钮</van-button>
		<van-button type="default">默认按钮</van-button>
		<van-button type="warning">警告按钮</van-button>

		<!-- 选择地区 -->
		<van-area title="标题" :area-list="areaList" /><br>

		<!-- 加载 -->
		<div class="loading">
			<van-loading color="#1989fa" />
			<van-loading type="spinner" color="#1989fa" />
		</div><br>


		<!-- 弹窗 -->
		<van-cell is-link @click="showPopup">圆角弹窗</van-cell>
		<!-- <van-popup v-model="show">内容</van-popup> -->
		<van-popup v-model="show" round position="bottom" 
				:style="{ height: '30%' }" 
				closeable close-icon="close" />
		<!-- 
			弹窗关闭按钮
			closeable  close-icon="close" 
		-->
	</div>
</template>

<script>
	import {areaList} from '@vant/area-data';
	export default {
		data() {
			return {
				areaList,
				show: false,
			};
		},
		methods: {
			showPopup() {
				this.show = true;
			},
		},
	};
</script>

<style scoped>
	.loading {
		display: flex;
		justify-content: space-around
	}
</style>

效果展示