快速开始

安装

# npm
npm install yoyoo-ui

# yarn
yarn add yoyoo-ui

# pnpm
pnpm add yoyoo-ui

依赖说明

yoyoo-ui 依赖以下 对等依赖（peer dependencies），需自行安装：

pnpm add vue element-plus dayjs xlsx

dayjs — 日期格式化 xlsx — 导出 Excel 功能

全局注册

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import yoyooUi from 'yoyoo-ui'
import 'yoyoo-ui/dist/style.css'

const app = createApp(App)

app.use(ElementPlus, { locale: zhCn })
app.use(yoyooUi, {
  // 全局配置（可选）
  debug: true,
  // upload: { ... },
  // table: { page: { page: 1, limit: 20 } }
})

app.mount('#app')

按需引入

import { DataTable, DataForm, useRequest } from 'yoyoo-ui'
import 'yoyoo-ui/dist/style.css'

使用示例

DataTable 表格

import { DataTable } from 'yoyoo-ui'
import { ref } from 'vue'

export default defineComponent({
  setup() {
    const columns = [
      { label: '姓名', field: 'name' },
      { label: '年龄', field: 'age' },
      { label: '创建时间', field: 'createdAt', type: 'date' },
      { label: '状态', field: 'status', type: 'whether' },
    ]

    const query = (params) => {
      return fetch('/api/list', { body: JSON.stringify(params) })
        .then(res => res.json())
    }

    return () => (
      <DataTable
        columns={columns}
        query={query}
        pageSize={10}
      />
    )
  },
})

DataForm 动态表单

import { DataForm } from 'yoyoo-ui'
import { reactive } from 'vue'

export default defineComponent({
  setup() {
    const model = reactive({ name: '', email: '' })
    const columns = [
      {
        label: '姓名',
        field: 'name',
        type: 'el-input',
        rules: [{ required: true, message: '请输入姓名' }],
      },
      {
        label: '邮箱',
        field: 'email',
        type: 'el-input',
        rules: [{ type: 'email', message: '邮箱格式不正确' }],
      },
    ]

    return () => (
      <DataForm
        model={model}
        columns={columns}
        onConfirm={() => console.log('submit:', model)}
      />
    )
  },
})