下面是重点代码,不完整。只是给大家一个思路。
<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>