# safe-edu-components

**Repository Path**: work_96/safe-edu-components

## Basic Information

- **Project Name**: safe-edu-components
- **Description**: 昆仑安全微课业务组件库
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-21
- **Last Updated**: 2025-04-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 昆仑安全微课业务组件库
## kunlun-safe-edu-components

* TypeScript 
* Vue3
* Rollup
* Animate.css

#### node版本：16.14.0

### 组件
* 选择 LCheck
* 分割线 LDivider
* 图片 LImage
* 文字 LText

### 安装
```javascript
npm install kunlun-safe-edu-components --save
```

### 使用

#### 首先引入css文件
```javascript
import 'kunlun-safe-edu-components/dist/bundle.css'
```

#### vue中
```vue
<template>
  <div class="layout">
    <component
      v-for="(component, index) in data.components"
      :is="componentNames[component.label]"
      :key="component.id"
      v-bind="component.props"
      class="canvas-component"
      :class="[
        ...component.animateInfo.animateList,
        component.animateInfo.delay,
        component.animateInfo.repeat,
        component.animateInfo.speed,
      ]"
      :style="{ zIndex: index + 1 }"
    >
    </component>
  </div>
</template>

<script setup lang="ts">
import { LCheck, LDivider, LImage, LText } from 'kunlun-safe-edu-components'
import { shallowRef } from 'vue'

const componentNames: { [key: string]: any } = shallowRef({
  'l-text': LText,
  'l-image': LImage,
  'l-divider': LDivider,
  'l-check': LCheck,
})

const data = {
    components: [...],
    page: {...}
}
</script>
```