当前位置: 首页 > 工具软件 > RenderJS > 使用案例 >

uniapp中调用renderjs的方法(renderjs里面给地图加按钮,子组件给父组件传值)

鲍俊杰
2023-12-01

下面是重点代码,不完整。只是给大家一个思路。

  1. 如何给地图添加按钮
  2. 子组件给父组件传值
  3. 接受到子组件的参数对地图进行操作(list里面有我的列表内容,我点击列表内容想要地图做出处理,根据我子组件list传给父组件的value进行地图上具体位置放大)
<template>
	<view>
		<!-- 原理:通过监听searchValue,如果发生改变就调用renderjs的doQuery方法 -->
		<!-- 注意这里的m代指renderjs的module="m" -->
		<view id="map" class="map" :change:searchValue="m.doQuery" :searchValue="searchValue"></view>
		<view v-show="loading" class="loading">底图加载中...</view>
		
		<view id="mapBtn">
			<u-button type="primary" class="btn" :plain="true" @click="taskClick()">任务进度</u-button>
		</view>
		
		<!-- 点击按钮“任务进度”,显示出任务进度弹窗 -->
		<uni-popup id="popupDialog" ref="popupDialog" type="bottom" :animation="false">
			<view class="popup-action">
				<view class="text-center padding-sm text-bold text-lg">
					任务进度
				</view>
				<!-- 子组件list内部做的处理:子组件调用父组件的方法并传参给父组件 this.$emit('goto1','12345') -->
				<list @goto1="goTo"></list>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchValue: '',
			// 加载动画
			loading: true,
		}
	},
	components: {
		list
	},
	methods: {
		goTo(e) {
			// 传递过来的值进行赋值给到searchValue,然后值就会进行改变
			this.searchValue = e
			console.log('=================this.searchValue', this.searchValue)
		},
		popupDialogClose() {
			this.$refs.popupDialog.close()
		},
	}
}
</script>
<script module="m" lang="renderjs">
	methods: {
		init(){
			// 此处省略一大段代码,这里只是简单地给地图上面添加按钮
			viewMap.ui.add("mapBtn", "top-right");
		},
		doQuery(searchValue) {
			const _this = this
			// 我这里是为了获取参数然后进行操作地图
			// 此处省略逻辑代码,这里只是拿到了searchValue
			console.debug('searchValue',searchValue)
			// 调用上面js的popupDialogClose方法
			this.$ownerInstance.callMethod('popupDialogClose')
		}
	}
		
</script>
 类似资料: