单页面cnd 引入 vant+vue+h5 应用vant

weixin_44057084

已于 2022-04-22 09:33:08 修改

阅读量2.1k

点赞数 2

于 2022-04-22 09:18:49 首次发布

本文链接：https://blog.csdn.net/weixin_44057084/article/details/124336969

版权

@[TOC] h5 Vue CND 引入vant 并使用
效果
在这里插入图片描述

废话不多说上代码
![在这里插入图片描述](https://img-blog.csdnimg.cn/c4f21cd3c8da413397083024523450b4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2VpeGluXzQ0MDU3MDg0,size_20,color_FFFFFF,t_70,g_se,x_16)

在这里插入图片描述

使用

请注意引入对应的vant 版本及JS，否则vant 组件会异常显示

<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<title>h5 vue vant </title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
		<script type="text/javascript" src="http://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
		<style>
			.van-dropdown-menu {
				box-shadow: 0;
			}

			.van-dropdown-menu__item {
				flex: 0 0 auto;
			}
		</style>
	</head>

	<body>
		<div id="app" class="hide">
			<div :style="{paddingTop:statusBarHeight+'px'}" v-cloak>
				<div>
					<div class="">
						<div class="section">
							<div class='search_box'>
								<div class="top_search">
									<div class='btn' id='postMessage'>返回</div>
									<div class="btn">
										列表
									</div>
								</div>
								
							</div>
							<div class="select">
								<van-dropdown-menu active-color='#F87B28'>
									<van-dropdown-item @change='chooseDistance' v-model="value1" :options="option1" />
								</van-dropdown-menu>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>


<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>

<script>
	let app = new Vue({
		el: '#app',
		data: {
			vant: {},
			option1: [{
					text: '搜索距离',
					value: 0
				},
				{
					text: '5公里',
					value: 5
				},
				{
					text: '10公里',
					value: 10
				},
				{
					text: '15公里',
					value: 15
				},
				{
					text: '20公里',
					value: 20
				},
			],


		},
		methods: {
			chooseDistance(e) {
				console.log(e)
			},

			//线路规划
			transportation(lng, lat) {
				this.isShow = true
				let _this = this
				_this.vant.Toast.loading({
					duration: 0,
					message: '线路规划中...',
					forbidClick: true,
				});
				_this.map.clearOverlays();
				let output = ''
				let start = new BMapGL.Point(this.centerLng, this.centerLat);
				let end = new BMapGL.Point(lng, lat);
				var searchComplete = function(results) {
					if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
						return;
					}
					var plan = results.getPlan(0);
					console.log(plan.getDuration(true))
					console.log(plan.getDistance(true))
					_this.isShow = false
					_this.vant.Toast.clear();
					_this.content = '需要' + plan.getDuration(true) + ',全程' + plan.getDistance(true),
						this.model = true
					this.showLoding = false
				}


				transit.search(start, end);
			},
			},
		created() {
			this.statusBarHeight = this.getQuery('h')
		},
		mounted() {
			this.vant = vant
		}

	})
</script>