昆仑安全微课业务组件库

kunlun-safe-edu-components

• TypeScript
• Vue3
• Rollup
• Animate.css

node版本：16.14.0

组件

• 选择 LCheck
• 分割线 LDivider
• 图片 LImage
• 文字 LText

安装

npm install kunlun-safe-edu-components --save

使用

首先引入css文件

import 'kunlun-safe-edu-components/dist/bundle.css'

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>