🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP
Sign In

@yqg/vue

Package Overview
Dependencies
Maintainers
16
Versions
287
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@yqg/vue

这个 package 主要定位于将非 BaseUI 的一些公用 vue 组件、插件等收敛在一起,便于在项目间共用。

latest
npmnpm
Version
1.21.3
Version published
Weekly downloads
17
-46.87%
Maintainers
16
Weekly downloads
 
Created
Source

这个 package 主要定位于将非 BaseUI 的一些公用 vue 组件、插件等收敛在一起,便于在项目间共用。

antd components

yqg-simple-form

表单组件

def-value

主要给yqg-simple-table、yqg-static-form使用的根据fieldDef展示field的组件, 也可单独使用

PropertyDescriptionTypeDefault Value
defdef option,详见yqg-simple-table、yqg-static-formObjectrequired
value字段值[String, Number, Array, Boolean, Object]''
defaultTextvalue 为空时展示String''
  • 展示类型
TypeValue TypeView
type: 'date'timestamp日期
type: 'dateTimetimestamp日期时间
type: 'time'timestamp时间
type: 'rich'stringHTML
配置了filter--filtered value
配置了formOptionsArrayyqg-static-form
配置了tableOptionsArrayyqg-simple-table

yqg-static-form 静态展示表单

  • Form
PropertyDescriptionTypeDefault Value
ctx一般是父级thisObjectthis.$parent
title表单标题,一般在使用modal时配置string|slot''
values数据对象Objectnull
options表单配置对象Objectrequired
layout表单布局 inline|horizontal|verticla| inline一般用于查询表单,horizontal一般用于弹窗提交表单,vertical可以配合column属性使用String'inline'
hideInvalid隐藏空值field (!value && value !== 0)Booleanfalse
  • Form.options
PropertyDescriptionTypeDefault Value
layout表单布局,同Form.layoutObject'inline'
column配合vertical,多列展示,如{span: 12}, 2列Objectnull
labelCollabel布局Object{span: 4}
wrapperCol输入控件布局Object24-labelCol.span
staticItemPropsForm.Item.propsObject{colon: false}
fieldDefs表单fields配置项Arrayrequired
  • FieldDefOption

注: 对于static-form,field内容展示有三种情况:slot | 通过staticComp配置的自定义组件 | def-value

PropertyDescriptionTypeDefault Value
field字段keyString|slotrequired
label字段名称String若不配置,则不展示label占位;若需要占位但不展示label,可配置为空格' '
type控件类型, def-value根据type对展示内容进行处理String--
enumTypeenum,枚举类控件需要配置String|Object|Enum--
enumOptions同@yqg/enum EnumOption, 若配置的i18n key 对应的是一个Array,则需配置Object--
format用于格式化value,详见util/format.js, 可自定义String|Object--
hide是否隐藏fieldBoolean|function({record, values, ctx}) => hideValue:Booleanfales
staticComp若配置则展示自定义组件Component--
staticPropsfield组件props, 可用于设置样式等Object--
staticItemPropsa-form-item propsObject--

yqg-simple-table

表格

  • Table
PropertyDescriptionTypeDefault Value
ctx一般为父组件thisObjectthis.$parent
optionstable配置Objectrequired
records数据数组Arraynull
pagination分页数据对象Object|Boolean{}
defaulPagination初始化分页对象配置Object{pageSizeOptions: ['10', '20', '50', '100', '200'],showSizeChanger: true}
simpleEmpty无数据时只展示“暂无数据“Booleanfalse
fontSize字号Number13
cellHorizontalPadding单元格内边距Number20
paginationInfinite是否启用无限翻页模式Booleanfalse
  • Table.options
PropertyDescriptionTypeDefault Value
colDefs数据列配置Array[]
search是否开启表内搜索Booleanfalse
enableClientSort是否开启客户端排序Booleanfalse
enableSelectColumn是否开启隐藏列Booleanfalse
scroll滚动条配置Object{x: true}
rowSelection配置可选行Objectnull

注:上述之外属性若放到options中,最后会bind到a-table上

配置可选行:

rowSelection: {
    rowKey: string,
    fixed: boolean,
    columnWidth: number,
    selectedRowKeys: array,
    onChange: function(selectedRowKeys: array, selectedRows: array): any,
    getCheckboxProps: record => ({
      props: {
        disabled: record.name === 'Disabled User', // Column configuration not to be checked
        name: record.name,
      },
    })
},
  • DefOption
PropertyDescriptionTypeDefault Value
field字段keyString|slotrequired
label列titleString--
labelParam$t(label, labelParam)Array--
column列描述数据对象Object{}
column.sorter列排序规则String|Function'string'
enumType枚举对象StringObject
filter全局注册过的过滤器String--
child折叠列配置对象{defaultVisible: Boolean, // 是否默认展示 colDefs: Array}null
children表头分组配置Arraynull
colSpan表头列合并Numbernull
rowSpan行合并Numbernull
  • slot
NameDescriptionSlotScope
title自定义表头{title, def}
footer表格尾部currentPageData
renderEmpty无数据时展示null
  • events
NameDescriptionparams
change分页、排序、筛选变化时触发Function(pagination, filters, sorter)
expand点击展开图标时触发Function(expanded, record)
expandedRowsChange展开的行变化时触发Function(expandedRowKeys)
export-current-page导出本页数据Function({header, data})

yqg-infinite-pagination

无限分页组件

PropertyDescriptionTypeDefault Value
pagination分页数据对象Object{}
dataSize当前页面数据量Numbernull
showSizeChanger是否可以改变 pageSizeBooleantrue
  • events
NameDescriptionparams
change分页,改变pageSize时触发Function(pageNo, pageSize)

FAQs

Package last updated on 29 Mar 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts