Fantasia UI 组件库

Upload 组件

详细Api使用方法参考 基于 el-upload 二次封装，实现多功能上传-CSDN博客

main.ts 引入样式 import 'fantasia-ui/dist/index.css'

发现没有图标？需要安装 Element-plus 的 icon 才会显示图标

<script lang="ts">
import { FUpload } from 'fantasia-ui';

export default {
  components: {
    FUpload
  },
  methods: {
    handleUpload: (file, done, error) => {
      try {
        console.log(file);
        done();
      } catch (err) {
        error(err);
      }
    }
  }
}
</script>

<template>
  <FUpload crop mosaic @upload="handleUplaod" />
</template>

Table 组件

<script lang="ts" setup>
import { FTable } from 'fantasia-ui';
import type { Actions, Columns } from 'fantasia-ui/dist';
import { reactive } from 'vue';

const data = [
  {
    id: 1,
    nickname: '测试用户'
  }
]

const columns = reactive<Columns[]>([
  {
    prop: 'id',
    label: 'ID'
  },
  {
    prop: 'nickname',
    label: '昵称'
  }
])

const actions = reactive<Actions[]>([
  {
    action: 'switch',
    event: 'change',
    prop: 'change',
    config: {
      activeText: '启用',
      inactiveText: '禁用',
      activeValue: 0,
      inactiveValue: 1
    }
  },
  {
    action: 'button',
    event: 'delete',
    label: '删除',
    type: 'danger',
    icon: 'delete'
  }
])

const handleAction = (row: any, event: string) => {
  switch (event) {
    case 'change':
      console.log("切换了");
      break;
    case 'delete':
      console.log("删除了");
      break;
  }
}
</script>

<template>
  <FTable :data="data" :columns="columns" :actions="actions" @action="handleAction">
    <template #id="{ row }">
      <h1>{{ row }}</h1>
    </template>
  </FTable>
</template>