[vue3]vue3中引入class类的写法
vue3中引入class类的写法
·
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>
更多推荐
已为社区贡献2条内容
所有评论(0)