当前位置: 首页 > news >正文

关于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"

根据属性的变化,而调用对应的方法,即可

这就是整个使用了

http://www.dtcms.com/a/35550.html

相关文章:

  • dubbo转http方式调用
  • 爱普生SG-8101CE可编程晶振赋能智能手机的精准心脏
  • 6.3 - UART串口数据发送之中断
  • MessageAuthenticator
  • 设计模式-(单例,简单工厂,工厂,抽象工厂)
  • 【组态PLC】基于三菱西门子S7-200PLC和组态王自动洗衣机组态设计【含PLC组态源码 M012期】
  • [创业之路-326]:两种事业部授权模式:战略管控与运营管控
  • 数位dp-
  • el-select滚动获取下拉数据;el-select滚动加载
  • 【信息系统项目管理师-案例真题】2011上半年案例分析答案和详解
  • 使用python接入腾讯云DeepSeek
  • 数据类型转换
  • 项目范围管理--从规划到控制项目范围的核心思想
  • 多弹协同末制导律设计
  • C++与Python实现LiDAR点云投影对比:关键差异与易错点详解
  • CAESAR II 14管道应力和柔性分析软件
  • 【WSL2】 Ubuntu20.04 GUI图形化界面 VcXsrv ROS noetic Vscode 配置
  • Scratch032(百发百中)
  • Kafka RecordTooLargeException问题解决
  • 第三章 语言基础
  • 2025年信息科学与工程学院科协机器学习介绍——机器学习基本模型介绍
  • 智慧后勤的消防管理:豪越科技为安全护航
  • TDengine数据订阅新手入门避坑指南1/3
  • 2025/2/17--2/23学习笔记(week1)_C语言
  • C语言进阶习题【3】(5 枚举)——找单身狗2进阶版本
  • 【前沿探索篇七】【DeepSeek自动驾驶:端到端决策网络】
  • AWS Bedrock平台引入DeepSeek-R1 模型,推动深度学习
  • 网站搭建wp
  • unity学习51:所有UI的父物体:canvas画布
  • AI大模型趣味实战专栏 预告篇