@lw8/lw-ui-vue v0.0.3

vite-vue3-template

vite + vue3 + element-plus + ts 模板

包依赖

• vite
• elelemt-plus

项目设置

js/ts引用

import { createApp } from "vue";
import App from "./App.vue";
import LwUi from "lw-ui-vue";

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

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

app
.use(ElementPlus)
.use(LwUi);
.mount("#app");

页面使用

<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",
      },
    ],
  },
};
 

开发

项目结构

├── build
├── dist
├── node_modules
│   ├── @tsconfig
│   ├── @types
│   ├── @vitejs
│   └── @vue
├── public
└── src
    ├── assets
    ├── client
    ├── components
    │   ├── Form
    │   ├── Pagination
    │   ├── SearchFilter
    │   └── Table
    └── utils