1-在src/utils/topu下创建一个ts文件 topu.ts

class Topu {
	// Topu类中涉及到的变量,都要提前在这个部分定义好
	width: Number;		// 结尾必须顿号,不然报错
	height: Number;
	data: any;
	edges: any;	
	svg: any;
	...  // 有多少就定义多少,这是vue3+ts的写法,如果是vue2的话,不用事先声明,直接在constructor里面this.变量名,Topu类上就会出现该变量
	
	constructor(option) {		// 形参,实参会在实例化这个类的时候传进来
		console.log(this)		// this指向的是Topu这个类
		this.data = option		
	}
	
	// 写函数,挂载在Topu类上的函数,调用时就用this.函数名()即可
	函数名() {
		...
	}
	
	// 如果当前这个类中的方法比较多,还需同时调用,可以再写个方法,将其他方法都写在里面,最后只调用这一个就好
	render() {
		this.函数1()
		this.函数2()
		this.函数3()
		...
	}	
}

2- 在vue文件中引用这个Topu类

<script>
// 引入类
import Topu from '@/utils/Topu.ts'

// 使用类
let T = new Topu(optionData)
T.render()		// 调用Topu类中的方法
</script>
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐