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

关于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.kler.cn/a/556775.html

相关文章:

  • 命令执行漏洞 Command Execute
  • 深入解析Textual库:打造现代化的终端用户界面(TUI)
  • 深度学习之图像回归(二)
  • 华为云镜像加速器
  • HTML 的 script 标签中 defer 和 async 的区别
  • 中国游戏厂商出海拉美市场策略及收单方式
  • Windows10配置C++版本的Kafka,并进行发布和订阅测试
  • LeetCode2595
  • 【Spring Bean如何保证并发安全?】
  • 华为动态路由-OSPF-综合案例
  • 客户关系管理系统(源码+文档+演示+讲解)
  • 计算机专业知识【深入理解 IP 地址与子网掩码:从 /27 到不同 CIDR 表示】
  • FPGA DSP:Vivado 中带有 DDS 的 FIR 滤波器
  • adb shell setprop获取日志
  • 解锁外观模式:Java 编程中的优雅架构之道
  • 【HeadFirst系列之HeadFirst设计模式】第6天之单件模式:独一无二的对象,如何优雅实现?
  • eBPF驱动的实时内核安全防护体系:构建零日漏洞免疫的云原生基础设施
  • Git介绍和使用
  • 使用爬虫获得亚马逊按关键字搜索商品的实战指南
  • qt:输入控件操作