loong3-dv v0.1.1

简介

基于 ant-desgin-vue 二次封装组件库。

• 与 ant-desgin-vue ConfigProvider 搭配自定义主题
• typescript
• 国际化

安装

yarn add loong3-dv 或 npm install loong3-dv

lg-table

import { lgTable } from "loong3-dv"
import type { TableProps } from "loong3-dv"

//template
<lg-table
  :tableSource="tableData"
  :columns="columns"
  @onload="getList"
  @add="handleOpen"
  :initParam="{}"
>

</lg-table>

// script

const tableData = ref<TableProps['tableSource']>()

const getList = async (params:any)=>{
  // axios 请求
  const {data:{current,total,pageSize,list}} = await fetchApi.sysUserList(params)
  tableData.value = {
    current,total,pageSize,list
  }
}

// 点击新增按钮触发方法
const handleOpen = ()=> {}

// 列配置项 配置参数参考下方
const columns:TableProps['columns'] = [{
    title: "tanStar",
    search: true,
    dataIndex: "name",
  },]

组件参数

column 列参数

SearchType 表格搜索项参数

'text'
'select'
'number'
'switch'
'slider'
'radio'
'checkbox'
'rate'
'date'
'rangeDate'
'time'
'treeSelect'
'textarea'

EnumProps

事件

插槽

// 示例
<template #title="item">
  <div v-if="item.dataIndex == 'index'">hahah</div>
  <div v-else>{{ item.title }}</div>
</template>

lg-form

import { lgForm } from 'loong3-dv';
import type { FormProps, FormInstance } from 'loong3-dv';

// template

<lg-form
  ref="lgformRef"
  :initParam="{}"
  :configure="configure"
  :validate="validate"
  :hiddenRule="hiddenRule"
  :colNum="1"
  @onFinish="onFinish"
  @onFinishFailed="onFinishFailed"
>
  <template #title="item">
    {{ item.label }}
  </template>
  <template #d="{ searchParam, item }">
    <a-upload
      v-model:fileList="searchParam[item.prop]"
      v-bind="item.searchProps"
      name="files"
    >
      <a-button>
        <template #icon>
          <UploadOutlined />
        </template>
        中英文
      </a-button>
    </a-upload>
  </template>
</lg-form>

// script
const lgformRef = ref<FormInstance>()
const configure: FormProps['configure'] = [
  {
    label: '名称',
    prop: 'a',
    searchInitParam: '1',
    searchProps: {},
  }
]

const validate: FormProps['validate'] = {
  a: [
    {
      type: 'string',
      required: true,
      max: 6,
      min: 3,
      message: '请输入3-6个字符的名称',
      trigger: ['change', 'blur'],
    },
     {
    type: 'date',
    prop: 'b',
    label: '时间',
    searchInitParam: '2023-04-03',
  },
  {
    type: 'select',
    prop: 'c',
    label: '下拉选择',
    enum: [
      { label: '男', value: 1 },
      { label: '女', value: 2 },
      { label: '中立', value: 3 },
    ],
  },
  {
    type: 'upload',
    prop: 'd',
    label: '上传',
  },
  {
    type: 'textarea',
    prop: 'e',
    label: '描述',
  },
  {
    type: 'checkbox',
    prop: 'f',
    label: '复选框',
    enum: [
      { label: '男', value: 1 },
      { label: '女', value: 2 },
      { label: '中立', value: 3 },
    ],
    searchInitParam: [1],
  },
  {
    type: 'number',
    prop: 'h',
    label: '数字输入',
    searchProps: { max: 10, min: 0, precision: 2, step: 0.1 },
  },
  {
    type: 'radio',
    prop: 'i',
    label: '单选',
    enum: [
      { label: '男', value: 1 },
      { label: '女', value: 2 },
      { label: '中立', value: 3 },
    ],
  },
  {
    type: 'rangeDate',
    prop: 'j',
    label: '时间段',
  },
  {
    type: 'treeSelect',
    prop: 'k',
    label: '树菜单',
    enum: [
      { label: '男', value: 1, locale: { ch: '男', en: 'man' } },
      { label: '女', value: 2, locale: { ch: '女', en: 'woman' } },
      { label: '中立', value: 3, locale: { ch: '中立', en: 'other' } },
    ],
  },
  ],
};

// 表单项是否展示
const hiddenRule = {
  d: ({ c }: { c: number }) => c === 1,
  f: ({ c }: { c: number }) => c === 1,
};

const onFinish = (params)=>{}
const onFinishFailed = (error)=>{error}

组件参数

configure 参数

SearchType 表格搜索项参数

'text'
'select'
'number'
'switch'
'slider'
'radio'
'checkbox'
'rate'
'date'
'rangeDate'
'time'
'treeSelect'
'textarea'
'upload'

EnumProps

事件

插槽

// 示例
  <template #upload="{searchParam,item}">
    <a-upload
      v-model:fileList="searchParam[item.prop!]"
      v-bind="item.searchProps"
      name="files"
      >
      <a-button>
        <template #icon>
          <UploadOutlined />
        </template>
        中英文
      </a-button>
    </a-upload>
  </template>