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

npm i penk-ui

2. main.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组件

<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