a 2d-teaching-center
npm install @tmesoft/2d-teaching-centervue
import { ref } from 'vue'
import TeachingCenter from '@tmesoft/2d-teaching-center'
import { ThemeEnum } from '@tmesoft/2d-teaching-center/consts'
// 监听点击实验室
const labClickHandle = (lab) => {
console.log('lab', lab)
}
const teachingCenterRef = ref()
const currentTheme = ref(ThemeEnum.blue)
// 传入json数据
const setJson = (modelData:string)=>{
teachingCenterRef.value?.setJSON(modelData)
}
// 修改实验室状态
// 支持两种状态:using,unused
const changeLabStatus = () => {
teachingCenterRef.value?.setLabStatus(labId, 'using')
}
// 设置主题
const setTheme = (theme: ThemeEnum) => {
teachingCenterRef.value?.setTheme(theme)
// 或者通过props传递
currentTheme.value = theme
}
@onLabClick="labClickHandle"
ref="teachingCenterRef"
:theme="currentTheme"
/>
`
Props
| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| autoComputedUrl | Boolean | true | 是否自动计算URL |
| theme | ThemeEnum | ThemeEnum.blue | 主题颜色,可选值:ThemeEnum.blue, ThemeEnum.yellow, ThemeEnum.green |
方法
| Name | Description | type | default |
|--------------|--------------|-------------------------------|---------|
| setJSON | 设置模型json内容 | string | '' |
| getJSON | 获取组件内的json内容 | | |
| setLabStatus | 设置模型的实验室状态 | {labId:string,status:'using'/'unused'} | |
| setTheme | 设置主题颜色 | theme: ThemeEnum | void |
| getTheme | 获取当前主题颜色 | - | ThemeEnum |
事件
| Name | Description |
|------------|-------------------|
| onLabClick | 实验室被点击,返回当前实验室的信息 |
主题功能
$3
该Vue组件包支持三种主题颜色:
- ThemeEnum.blue (默认): #236EAD
- ThemeEnum.yellow: #6D561B
- ThemeEnum.green: #1F636C
主题颜色会应用到SVG图标中的 path 元素上,实现动态主题切换。
$3
#### 1. 通过 Props 传递主题
`vue
`
#### 2. 通过组件实例方法设置主题
`vue
`
$3
`typescript
export enum ThemeEnum {
blue = 'blue',
yellow = 'yellow',
green = 'green'
}
export enum BlueTheme{
border='236EAD',
background='F0F8FF',
}
export enum YellowTheme{
border='6D561B',
background='FFF8E1',
}
export enum GreenTheme{
border='1F636C',
background='E6F9F5',
}
export const THEME_COLORS = {
[ThemeEnum.blue]:BlueTheme,
[ThemeEnum.yellow]: YellowTheme,
[ThemeEnum.green]: GreenTheme,
} as const
``