# tdesign-ext-ui-docs

**Repository Path**: kitom/tdesign-ext-ui-docs

## Basic Information

- **Project Name**: tdesign-ext-ui-docs
- **Description**: 一个基于后端ruoyi-plus扩展的tdesign-ext-ui文档说明
- **Primary Language**: HTML
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2024-03-13
- **Last Updated**: 2024-03-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# penk-ui
This template should help get you started developing with Vue 3 in Vite.
是基于vue3项目，对element-plus进行的二次封装.

# 完整的文档
https://github-zyp.github.io/penk-ui-official/

# 使用方式
## 1. 安装penk-ui
```shell
npm i penk-ui
```

## 2. main.js 引用

```js
import { createApp } from "vue";
import App from "./App.vue";
import PenkUi from "penk-ui";

import "./assets/main.css";
import "penk-ui/dist/style.css"

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
let app = createApp(App);

app.use(ElementPlus);

app.use(PenkUi);
app.mount("#app");
```

## 3. 页面中使用penk-ui组件
```xml
<script setup>
import { ref, reactive } from "vue";

const visible = ref(false);
let formData = reactive({});

let formConfig = {
  formItemConfig: [
    {
      label: "App类型",
      prop: "appType",
      type: "select",
      placeholder: "请选择任务状态",
      data: [],
      rules: [{ required: true, message: "请选择任务状态", trigger: "change" }],
    },
    {
      label: "任务类型",
      prop: "taskType",
      type: "select",
      placeholder: "请选择任务状态",
      data: [],
      rules: [{ required: true, message: "请选择任务状态", trigger: "change" }],
    },
    {
      label: "任务名",
      prop: "name",
      type: "input",
      placeholder: "请输入任务名",
      rules: [{ required: true, message: "请输入任务名", trigger: "change" }],
    },
    {
      label: "任务佣金",
      prop: "commission",
      type: "input",
    },
    {
      label: "任务状态",
      prop: "status",
      type: "select",
      data: [
        // 1 待审核，2 审核通过，3 审核不通过，4 结束
        { label: "待审核", value: 1 },
        { label: "审核通过", value: 2 },
        { label: "审核不通过", value: 3 },
        { label: "任务关闭", value: 4 },
      ],
      rules: [{ required: true, message: "请选择任务状态", trigger: "change" }],
    },
    // {
    //   label: "任务指令",
    //   prop: "taskOrder",
    //   type: "input",
    //   inputType: "textarea",
    //   rules: [{ required: true, message: "请输入任务指令", trigger: "blur" }],
    // },
    {
      label: "审核原因",
      prop: "reason",
      type: "input",
      inputType: "textarea",
    },
  ],
  // 自定义校验
  rules: {
    commission: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (!value) {
            callback(new Error("请输入佣金"));
          }

          let regExp = /^(?:[1-9][0-9]?|100)$/;
          if (!regExp.exec(value)) {
            callback(new Error("请输入1-100"));
          }
          callback();
        },
        trigger: "blur",
      },
    ],
  },
};

function open(){
  visible.value=true;
}
</script>

<template>
  <el-button @click="open">test</el-button>
  <PenkButton></PenkButton>
  <!-- 表单弹框 -->
  <PenkForm
    title="title"
    :formConfig="formConfig"
    :formData="formData"
    v-model:visible="visible"
    append-to-body
  >
  </PenkForm>
</template>

<style scoped></style>

```

---

# element-plus
是基于element-plus的二次封装，所以需要安装element-plus

# package.json 
里面已经配置了peerDependencies，测试了会自动安装element-plus了~

# npm-package.json
https://docs.npmjs.com/cli/v9/configuring-npm/package-json