Nougat Predominant Middleware

    zj-element

    1.0.10 • Public • Published

    Zj-Element

    基于ElementUI的VUE组件——Жидзин(Zidjin)系列组件库。

    安装

    推荐使用 npm 的方式安装。

    npm install element-ui
    npm install zj-element

    引入

    全局引入,在 main.js 中写入以下内容:

    import Vue from 'vue';
    import App from './App.vue';
    import ElementUI from 'element-ui'; // 引入ElementUI库,必须
    import 'element-ui/lib/theme-chalk/index.css'; // 引入ElementUI样式,必须
    
    import ZjTianditu from "zj-element"; // 引入ZjTianditu库
    
    Vue.use(ElementUI); // 注册ElementUI,必须
    Vue.use(ZjElement); // 注册ZjTianditu
    
    new Vue({
      el: '#app',
      render: h => h(App)
    });

    局部引入,在 vue页面文件中写入以下内容

    import {ZjForm, ZjTable, ZjDialog} from 'zj-element';
    export default {
        components: {
            ZjForm,
    		ZjTable,
    		ZjDialog,
        },
    };

    Zj-Table

    基于ElementUI的表格组件——Жидзин(Zidjin)系列组件库。

    安装

    推荐使用 npm 的方式安装。

    npm install zj-element

    引入

    局部引入,在 vue页面文件中写入以下内容

    import {ZjTable} from 'zj-element';
    export default {
        components: {
    		ZjTable,
        },
    };

    基本用法

    <zj-table :table-header="tableHeader" :table-data="tableData"></zj-table>
    <script>
        import {ZjTable} from 'zj-element';
        export default {
            components: {
                ZjTable,
            },
            data: ()=>({})
        };
    </script>

    Zj-Table Attributes

    参数 说明 类型 可选值 默认值
    table-header 表头配置 array - -
    table-data 表格数据 array - -
    height 表格高度 number - -
    config 表格配置 object {
    // 空数据时显示的文本内容
    emptyText: '暂无数据',
    //当内容过长被隐藏时显示 tooltip
    showOverflowTooltip: false,
    }
    -

    Table-Header Options

    参数 说明 类型 可选值 默认值
    type 单元格数据类型 array 'text', 'selection', select', 'image', 'button' -
    key 键名 string - -
    value 值,列名 string - -
    sortable 当前列是否支持排序 boolean true false
    width 列宽度。单位默认px number 100
    option 选项。将传入的值转为指定内容
    适用:select
    object 例:{1: '男', 2: '女'} -
    showOverflowTooltip 当内容过长被隐藏时显示 boolean true false
    buttons 按钮配置
    适用:button
    array 例:
    [{
    emit: 'emitA',
    text: '查看',
    key: 'sex', value: 2,/* 键值匹配则显示,否则不显示 /
    disabled: 'ban', /
    键不存在则禁止点击 /
    not_value: '神', /
    键值不匹配则显示,否则不显示 */,
    }]
    -
    hide 是否隐藏列 boolean true false

    Table-Data Options

    参数 说明 类型 可选值 默认值
    key 键名 string - -
    value 值,列名 string - -
    value 图片链接,
    适用:image
    string, array - -

    Zj-Form

    基于ElementUI的表格组件——Жидзин(Zidjin)系列组件库。

    安装

    推荐使用 npm 的方式安装。

    npm install zj-element

    引入

    局部引入,在 vue页面文件中写入以下内容

    import {ZjForm} from 'zj-element';
    export default {
        components: {
    		ZjForm,
        },
    };

    基本用法

    <zj-form :form-basics="basics"></zj-form>
    <script>
        import {ZjForm} from 'zj-element';
        export default {
            components: {
                ZjForm,
            },
            data: ()=>({
                basics: 
            })
        };
    </script>

    Zj-Form Attributes

    参数 说明 类型 可选值 默认值
    form-header 表单配置 array - -
    form-data 表单数据 object - -
    column 分列数 number,string 1, 2, 3, 4, 6, 12, 24 2
    size 表单格子尺寸 string medium / small / mini -
    label-width 表单域标签的宽度 string '50px' 'auto'
    inline 行内表单模式
    V1.0.10去除,不适用复杂表单,由search-bar代替
    boolean true false
    show-confirm 显示确认按钮 boolean true false
    show-reset 显示重置按钮 boolean true false
    show-cancel 显示取消按钮 boolean true false
    auto-clear 关闭时自动清除图像等数据 boolean false true

    Table-Header Options

    参数 说明 类型 可选值 默认值
    type 表单类型 array 'plain', 'text', 'textarea', 'number', 'password', 'stepper','switch', 'radio', 'checkBox', 'time', 'date', 'month', 'year', 'dateTime', 'dateTimeRange', 'select', 'cascader', upload'' -
    field 键名 string - -
    title 标题 string - -
    span 栅格占据的列数 number 1-24 根据column属性等分
    tip
    或place V1.0.9以前
    占位提示文字 string - -
    rules 验证规则 array { required: true, message: '枚举名称必填', trigger: 'blur' },
    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
    { pattern : /(^1[356789]\d{9}$)/, message: '手机号码错误', trigger: 'blur', },
    -
    prepend 前辍文字br />适用:text string - -
    append 后辍文字br />适用:text string - -
    icon 后辍图标br />适用:text string 'el-icon-edit',详见官方文档 -
    prependIcon 前辍图标br />适用:text string 'el-icon-edit',详见官方文档 -
    emit 自定义后辍按钮触发信号名br />适用:text string - -
    prependEmit 自定义前辍按钮触发信号名br />适用:text string - -
    multiple 是否多选
    适用:select
    boolean true false
    option 选项。
    适用:select, sex
    array 例:[{ value: 1, label: '男' }, { value: 2, label: '女', }] -
    position 位置
    适用:number
    string 'right' -
    start 开始
    适用:time
    string '08:30'
    end 结束
    适用:time
    string '00:15'
    step 步长
    适用:time
    string '18:30'
    defaultTime 默认时间
    适用:dateTime
    string '12:00:00'
    valueFormat 日期时间格式
    适用:date, time, dateTime
    string 'yyyy-MM-dd HH:mm:ss'
    Element 日期格式
    'yyyy-MM-dd HH:mm:ss'
    pickerOptions 不知道
    适用:dateTime
    string 'pickerOptions'
    startPlace 开始占位符
    适用:dateTimeRange
    'pickerOptions'
    endPlace 结束占位符
    适用:dateTimeRange
    fill 按钮激活填充色和边框色
    适用:radio
    string '#ffffff'
    textColor 激活时的文本颜色
    适用:radio
    string '#409eff'
    config 配置选项
    适用:select
    object { label: 'name', value: 'id', }
    size 尺寸
    适用:text, number, cascaders
    string medium / small / mini small
    showAllLevels 输入框中是否显示选中值的完整路径
    适用:cascaders
    boolean true
    row 文本域显示行数
    适用:textarea
    number 3 3
    ban 禁止编辑
    适用:text, select,

    Config Options of Table-Header Options

    参数 说明 类型 可选值 默认值
    label 标签键名
    适用:select, cascaders
    string - -
    value 键值键名
    适用:select, cascaders
    string, number 1, 2
    checkStrictly 父子节点均可选择
    适用:cascaders
    boolean true
    expandTrigger 次级节点的展开方式
    适用:cascaders
    string click / hover
    lazy 是否动态加载子节点,需与 lazyLoad 方法结合使用
    适用:cascaders
    boolean
    multiple 是否支持多选
    适用:cascaders
    boolean
    emitPath true返回各级菜单的数组,false返回该节点的值
    适用:cascaders
    string
    children 树枝键名
    适用:cascaders
    string
    disabled 禁用键名
    适用:cascaders
    string
    leaf 叶子键名
    适用:cascaders
    string
    name 上传文件指定的键名
    适用:upload
    string - 'file'
    showTitle 是否显示文件标题
    适用:upload
    boolean false true
    action 上传请求地址
    适用:upload
    string '/api/upload' -
    headers 上传请求头
    适用:upload
    object headers: {Authorization: '',} -
    autoUpload 是否自动上传
    适用:upload
    boolean false true
    fileType 允许上传的文件类型
    适用:upload
    array - ['jpg', 'png', 'jpge', 'pdf', 'doc']
    limit 限制上传个数
    适用:upload
    number - 9
    split 当为字符串时候的拆分符
    适用:upload
    string - ';'
    thumb 预览图标尺寸
    适用:upload
    string 'small'
    size 限制上传的文件大小,
    单位:M
    适用:upload
    number - 2
    data 上传时附带的额外参数
    适用:upload
    object data: {menu: '',} -
    node-status 上传状态判断的节点名称
    适用:upload
    string - err
    node-status-value 上传状态判断成功的节点值
    适用:upload
    string,number - 0
    node-url 上传成功后引用链接地址的节点名称,最多两层,用点"."隔开
    适用:upload
    string - 'data.url'
    node-title 上传成功后引用文件标题的节点名称,最多两层,用点"."隔开
    适用:upload
    string - 'data.name'
    node-size 上传成功后引用文件大小的节点名称,最多两层,用点"."隔开
    适用:upload
    string - 'data.size'

    Zj-Form Events

    事件名称 说明 回调参数
    confirm 点击确定触发 data: 键值对表单数据
    cancle 点击取消触发

    Zj-Form Methods

    方法名 说明 参数
    clear 清空表单 -

    版本说明

    V1.0.61.211028-release

    修正若干地图调用时不稳定的问题,早期稳定版,用于基本的地图数据展示,无鼠标交互事件等。已停止更新。

    V1.1.0.211028-alpha

    添加天地图原生坐标标记事件@marker、多边形事件@polygen、标签事件@label。

    V1.1.1.211029-beta

    支持天地图原生拖动事件@move、缩放事件@zoom。

    Zj-Search-Bar

    基于ElementUI的搜索组件——Жидзин(Zidjin)系列组件库。

    安装

    推荐使用 npm 的方式安装。

    npm install zj-element

    引入

    局部引入,在 vue页面文件中写入以下内容

    import {ZjSearchBar} from 'zj-element';
    export default {
        components: {
    		ZjSearchBar,
        },
    };

    基本用法

    <zj-search-bar :search-form="searchForm" show-search show-reset show-export></zj-search-bar>
    <script>
        import {ZjSearchBar} from 'zj-element';
        export default {
            components: {
                ZjSearchBar,
            },
            data: ()=>({
                searchForm: [
                    { key: 'company', value: '', title: '签约时间', tip: '公司名称', type: 'input' },
                    { key: 'month', value: '', title: '', tip: '', type: 'month' },
                    { key: 'data', value: '', title: '日期', tip: '日期', type: 'date' },
                    { key: 'kinds', value: '', title: '天气', tip: '天气', type: 'select', 
                     options: [
                         { value: 0, label: '' },
                         { value: 1, label: '' },
                         { value: 2, label: '多云' },
                     ],
                     config: {
                         /* porps属性 */
                         checkStrictly: true, // 父子节点均可选择
                         expandTrigger: 'hover', // 次级节点的展开方式 click / hover
                         lazy: false, // 是否动态加载子节点,需与 lazyLoad 方法结合使用
                         multiple: false, // 是否支持多选
                         emitPath: true, // true返回各级菜单的数组,false返回该节点的值
                         label: 'label', // 标签
                         value: 'value', // 键值
                         children: 'children', // 树枝键名
                         disabled: 'disabled', // 禁用键名
                         leaf: 'leaf', // 叶子键名
                     },
                    }
                ]
            })
        };
    </script>

    Zj-Search-Bar Attributes

    参数 说明 类型 可选值 默认值
    search-form 搜索配置 array - -
    show-search 显示搜索按钮 boolean true false
    show-reset 显示重置按钮 boolean true false
    show-export 显示导出按钮 boolean true false
    button-type 按钮类型 string medium / small / mini small

    Search-Form Option

    参数 说明 类型 可选值 默认值
    key 键名 string - -
    value 默认值 string - -
    title 标题 string - -
    tip 占位文字 string - -
    type 显示类型 string input / month / date / select / cascader -
    options 选项列表
    适用:select, cascader
    array [{ value: 0, label: '晴' },...] -
    config 选项的配置
    适用:select
    object {
    /* porps属性 */
    checkStrictly: true, // 父子节点均可选择
    expandTrigger: 'hover', // 次级节点的展开方式 click / hover
    lazy: false, // 是否动态加载子节点,需与 lazyLoad 方法结合使用
    multiple: false, // 是否支持多选
    emitPath: true, // true返回各级菜单的数组,false返回该节点的值
    label: 'label', // 标签
    value: 'value', // 键值
    children: 'children', // 树枝键名
    disabled: 'disabled', // 禁用键名
    leaf: 'leaf', // 叶子键名
    }
    -

    Event

    事件名称 说明 回调参数
    change 当内容值改变时触发 value, key, params,改变的值、键名、全部参数
    clear 点击任一格子清除时触发 key, params,清除的键名
    search 点击搜索按钮时触发 params,搜索的参数object
    reset 点击重置按钮时触发 -
    export 点击导出按钮时触发 -

    Zj-Dialog

    基于ElementUI的表格组件——Жидзин(Zidjin)系列组件库。

    安装

    推荐使用 npm 的方式安装。

    npm install zj-element

    引入

    局部引入,在 vue页面文件中写入以下内容

    import {ZjDialog} from 'zj-element';
    export default {
        components: {
    		ZjDialog,
        },
    };

    基本用法

    <zj-dialog :show.sync="show" :config="config"></zj-dialog>
    <script>
        import {ZjDialog} from 'zj-element';
        export default {
            components: {
                ZjDialog,
            },
            data: ()=>({
                show: true,
                config: {
                    width: '50%',
                    title: '新增',
                },
            })
        };
    </script>

    Zj-Dialog Attributes

    参数 说明 类型 可选值 默认值
    show 对话框名称 string true false
    config 对话框配置 object - -
    show-confirm 显示确认按钮 boolean true false
    show-reset 显示重置按钮 boolean true false
    show-cancel 显示取消按钮 boolean true false

    Config Options

    参数 说明 类型 可选值 默认值
    title 标题 string - -
    width 宽度 string - 50%
    destroyOnClose 关闭时销毁 Dialog 中的元素 boolean true
    modalAppendToBody 遮罩层是否插入至 body 元素上 boolean false true
    closeOnClickModal 是否可以通过点击 modal 关闭 Dialog boolean true false

    Zj-Pagination

    基于ElementUI的页面组件——Жидзин(Zidjin)系列组件库。

    安装

    推荐使用 npm 的方式安装。

    npm install zj-element

    引入

    局部引入,在 vue页面文件中写入以下内容

    import {ZjDialog} from 'zj-element';
    export default {
        components: {
    		ZjDialog,
        },
    };

    基本用法

    <zj-dialog :show.sync="show" :config="config"></zj-dialog>
    <script>
        import {ZjDialog} from 'zj-element';
        export default {
            components: {
                ZjDialog,
            },
            data: ()=>({
                show: true,
                config: {
                    width: '50%',
                    title: '新增',
                },
            })
        };
    </script>

    Zj-Dialog Attributes

    参数 说明 类型 可选值 默认值
    show 对话框名称 string true false
    config 对话框配置 object - -
    show-confirm 显示确认按钮 boolean true false
    show-reset 显示重置按钮 boolean true false
    show-cancel 显示取消按钮 boolean true false

    Config Options

    参数 说明 类型 可选值 默认值
    title 标题 string - -
    width 宽度 string - 50%
    destroyOnClose 关闭时销毁 Dialog 中的元素 boolean true
    modalAppendToBody 遮罩层是否插入至 body 元素上 boolean false true
    closeOnClickModal 是否可以通过点击 modal 关闭 Dialog boolean true false

    Install

    npm i zj-element

    DownloadsWeekly Downloads

    22

    Version

    1.0.10

    License

    MIT

    Unpacked Size

    168 kB

    Total Files

    36

    Last publish

    Collaborators

    • sieyoo