关于uniapp使用renderJS中调用父类方法和参数的使用
首先,页面这样下:
<template>
<view class="model-container">
<view v-if="isLoading" class="loading-container">
<text style="color: white;">加载中: {{ loadingProgress }}%</text>
<progress style="width: 110px;" border-radius="20" :percent="loadingProgress" color="#007AFF"></progress>
</view>
<view id="map" :modelUrl="modelUrl" :modelname="modelname" :change:modelname="renderjs.ModeladdName"
:change:modelUrl="renderjs.ModeladdUrl" :prop="isHide" :change:prop="renderjs.handleAction"
@click="callParentMethod">
<canvas id="webgl" type="webgl" class="model-canvas"></canvas>
</view>
</view>
</template>
<script>
export default {
name: 'threeModel',
props: {
modelUrl: {
type: [String],
default: ''
},
modelname: {
type: [String],
default: ''
},
height: {
type: [Number, String],
default: '300px'
},
parentMethod: {
type: Function,
required: true
}
},
data() {
return {
isHide: false,
isLoading: false,
loadingProgress: 0
}
},
methods: {
callParentMethod() {
this.parentMethod()
},
changeLoading(isLoading) {
this.isLoading = isLoading
},
changeProgress(loadingProgress) {
console.log(loadingProgress)
this.loadingProgress = loadingProgress
}
},
onHide() {
this.isHide = true
},
onUnload() {
this.isHide = true
}
}
</script>
<script module="renderjs" lang="renderjs">
export default {
data() {
return {
}
},
methods: {
},
created() {
}
}
</script>
<style>
</style>
1、如果想在renderJS中调用 changeProgress 这个方法,这样写:
this.$ownerInstance.callMethod('changeProgress', Math.round(percentComplete))
2、如果需要在点击这个组件的时候,调用外面的方法:比如这样:
<ThreeModelViewer :parentMethod="showSeting" :modelname="modelname" :modelUrl="modelUrl"
style="width: 100vw; height: 280px; justify-content: center;display: flex;margin-top: 60px;" />
这是使用这个组件,在这个组件中传递一个方法:showSeting这个方法,在组件内这样写:
<view id="map" @click="callParentMethod">
还需要再组件的属性中,添加接收父类的函数属性:
props: {
parentMethod: {
type: Function,
required: true
}
},
然后再方法中这样写:
methods: {
callParentMethod() {
this.parentMethod()
}
},
这样就可以调用到父类的方法了
3、如果在组件内,想要调用renderJS中的方法,这样写:
:change:modelUrl="renderjs.ModeladdUrl"
根据属性的变化,而调用对应的方法,即可
这就是整个使用了