当前位置: 首页 > 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"

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

这就是整个使用了

相关文章:

  • 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问题解决
  • 第三章 语言基础
  • 一周观展|一批重量级考古博物馆开馆:从凌家滩看到孙吴大墓
  • 农行再回应客户办理业务期间离世:亲属连续三次输错密码,理解亲属悲痛,将协助做好善后
  • “大型翻车现场”科技满满,黄骅打造现代化港口和沿海新城典范
  • 湃书单|澎湃新闻编辑们在读的14本书:后工作时代
  • 奥运“四朝元老”华天回国参赛,伤势未愈谨慎出战全国锦标赛
  • 娃哈哈:自4月起已终止与今麦郎的委托代工关系,未来将坚持自有生产模式