zk-vue-ant-design

基于vue3+ant-design的前端组件库
2,078
Install
npm install zk-vue-ant-design
Latest Version:0.1.86
Vue:3
License:MIT
Last Updated:May 19, 2023
Links: npm
Maintainer: zk-dffytt

zk-vue-ant-design

v0.1.82 更新内容

上传图片设置墙纸可拖拽调整顺序

示例代码

{
    type: 'upload',
    label: '上传文件',
    prop: 'upload',
    isDrag: true, // 是否可拖拽
    limit: 3,
    returnType:'file_id',
    eventList:{
      sortChange(fileList){
        // 拖拽排序后的回调
        console.log('-------',fileList);
      }
    }
}
## v0.1.74 更新内容

1、select下拉选择增加搜索

```javascript
  {
    type: 'select',
    label: '下拉选择',
    prop: 'select',
    showSearch: true,
    filterOption: function(inputValue, it){
      const key = Object.keys(it)[0];
      return it[key].indexOf(inputValue) !== -1
    },
    options: [
        {
            label: '选项1',
            value: '1'
        },
        {
            label: '选项2',
            value: '2'
        },
        {
            label: '选项3',
            value: '3'
        }
    ]
}

v0.1.70 更新内容

1、日历组件新增picker属性,可选值为date | week | month | quarter | year

示例代码

  {
    type: "datePicker",
    disabled: false,
    showTime: false,
    picker: "date", // date | week | month | quarter | year
    placeholder: "请输入",
    label: '注册时间',
    key:'id5',
  }

v0.1.69 更新内容

1、上传文件组件新增返回值类型自定义,returnType属性,可选值为url、file_id,默认为url,
当类型是file_id时 返回的是文件id和url对象{url:xxx.xxx,id:id},需要配合后端使用

示例代码

{
    type: 'upload',
    label: '上传文件',
    prop: 'upload',
    limit: 3,// 限制上传数量,默认为1
    returnType:'file_id',
    eventList:{}
}

v0.1.67 更新内容

1、select类型支持自定义mode,支持多选
2、上传文件组件支持数据回显设置、支持图片墙纸

示例代码

{
    type: 'upload',
    label: '上传文件',
    prop: 'upload',
    limit: 3,// 限制上传数量,默认为1
    eventList:{
      created(that){
        // 设置回显
        that.setFileList([
          {
            uid: '-1',
            name: 'image.png',
            status: 'done',
            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          },
          {
            uid: '-2',
            name: 'image.png',
            status: 'done',
            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          },
          {
            uid: '-3',
            name: 'image.png',
            status: 'done',
            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          },
        ]);
      }
    }
}
{
    type: 'select',
    label: '多选',
    prop: 'select',
    mode: 'multiple',
    options: [
        {
            label: '选项1',
            value: '1'
        },
        {
            label: '选项2',
            value: '2'
        },
        {
            label: '选项3',
            value: '3'
        }
    ]
}

v0.1.66 更新内容

dynamicForms组件增加增加插槽功能
使用方式,传入的表单配置增加isSlot属性

v0.1.65 更新内容

zkTable组件增加高度自适应功能

Project setup

yarn add zk-vue-ant-design
yarn upgrade zk-vue-ant-design

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Customize configuration

See Configuration Reference.

import ui from 'zk-vue-ant-design' const app = createApp(App) app.use(ui) app.mount('#app')

发版npm

npm publish

Version History

Version Released Vue License
0.1.86 ^3.2.47 MIT
0.1.85 ^3.2.47 MIT
0.1.84 ^3.2.47 MIT
0.1.83 ^3.0.0 MIT
0.1.82 ^3.0.0 MIT