insigma-modal-vue

vue
6,557
Install
npm install insigma-modal-vue
Latest Version:1.5.5
Vue:2
License:MIT
Last Updated:Aug 28, 2024
Links: npm
Maintainer: xuyy

更新说明

v1.0.19 修改消息弹窗样式
v1.0.20 表单组件入参增加picker-options
v1.0.21 弹窗组件入参增加modal-append-to-body、append-to-body
v1.0.22 搜索栏组件增加表单校验方法
v1.0.23 表单组件选择框label和value的key值可自定义
v1.0.24 bug修复
v1.0.25 添加focus、blur、change事件，表单组件添加textarea
v1.1.2 表单组件添加移除检验结果、重置事件恢复默认值、输入框添加保留两位小数功能、添加pdf预览组件
v1.1.9 README.md修改
v1.1.10 修复隐藏表单的重置bug
v1.1.11 修改pdf预览组件
v1.1.16 修改bug
v1.1.17 表单选择框增加多选
v1.1.22 表单选择框增加全选框
v1.1.23 表单组件添加级联选择器
v1.1.29 下拉框添加筛选功能filterable
v1.1.30 表单组件添加clearable
v1.2.1 添加导出excel、csv、txt 方法
v1.2.14 打印模糊问题
v1.2.16 表单添加form-inline参数，控制是否横竖向显示
v1.2.20 form-template添加display参数，控制表单项是否显示
v1.2.22 弹出框bug修复
v1.2.40 pdf预览，若未查询，点击点击按钮提示请先查询
v1.2.49 表单项为级联时，监听change事件,增加返回选中的node

bl-from

自定义表单组件

bl-from Attributes

参数 说明 类型 可选值 默认值
label-width 表单域标签的宽度 string — 130px
form-template 需要渲染的模板表单 array — —
form-data 需要渲染的模板表单 Object — —
form-rules 需要渲染的模板表单 Object — —
form-append 是否展开 Boolean — true
form-shownum 收起时显示的个数，默认显示所有 Number — —
form-inline 行内表单模式 boolean — true

form-template

参数 说明 类型 可选值 默认值
label 表单标签 string — —
size 表单元素大小 number — —
prop 表单标签key string — —
type 表单元素类型 string select / cascader / number / input / range / textarea / checkbox / radio / date / week / month / year / datetime / timerange(时间区间) / monthrange(月区间) / daterange(日期区间) / datetimerange(日期时间区间)/ ta-number(数字输入框) input
options 当表单元素类型为select时的选项列表 Array — —
disabled 表单元素是否为禁用 boolean — false
isFullReturn 当表单元素类型为select时,是否完整返回对象 boolean — false
valueFormat 当表单元素日期选择器时 string — —
icons 当表单元素为input时 Array code、idcard、search —
placeholder 输入框占位文本 string —
keyEnter 是否触发回车搜索事件 boolean false
pickerOptions 当前时间日期选择器特有的选项参考picker-options表 object —
optionProp 选择框下拉项配置 object —
maxlength 当表单元素为textarea时设置最大长度 number -
isFocus 是否监听选中事件 boolean -
isBlur 是否监听失去焦点事件 boolean -
isChange 是否监听change事件 boolean -
isDecimals 输入框是否保留两位小数 boolean -
isMultiple select是否多选 boolean -
isAllCheck select是否加全选,默认开启多选模式 boolean -
checked 全选标识,isAllCheck为true时，checked必须存在 boolean - false
isIndeterminate 半选标识,checkbox类型，isAllCheck为true时 boolean - false
defaultTime 选中默认时间 Array -
showAllLevels 级联输入框中是否显示选中值的完整路径 boolean -
cascaderProps 级联选项框配置参考Props表 object -
filterable 是否过滤 boolean false
clearable 是否清除 boolean true
range-separator 区间中间文字 string '至'
start-placeholder 区间第一个输入框占位文本 string -
end-placeholder 区间第二个输入框占位文本 string -
prefix-icon 区间输入框首部图标<element图标库可选> string -
prepend 输入框前置内容 string -
append 输入框后置内容 string -
isPrefix 显示选择框搜索 boolean - false
display 是否隐藏 boolean - false
taProp 特殊级联框占位prop string - -
fieldNames 特殊级联框自定义 options 中 label name children 的字段 object - -
asAmount ta-number类型设置为金额数字框，每三位用逗号隔开 boolean - false
alignRight ta-number类型数字居右显示 boolean - false
max ta-number类型最大值 number - -
min ta-number类型最小值 number - -
decimalSeparator ta-number类型小数点 string - -
precision ta-number类型数值精度 number - -
step ta-number类型每次改变步数，可以为小数 number string -
formatter ta-number类型指定输入框展示值的格式 function(value: number / string): string - -
parser ta-number类型指定从 formatter 里转换回数字的方式，和 formatter 搭配使用 function( string): number - -
codeType 字典对应编码 string - -
initValue 表单初始值 any - -
filterArr 搭配codeType使用,不显示的字典值数组，例:['01','02'] array - -
isReverse 搭配filterArr使用,是否反向过滤，默认否 boolean - false

picker-options

参数 说明 类型 可选值 默认值
shortcuts 设置快捷选项，需要传入 { text, onClick } 对象用法参考 element Object[] — —
disabledDate 设置禁用状态，参数为当前日期，要求返回 Boolean Function — —
cellClassName 设置日期的 className Function(Date) — —
firstDayOfWeek 周起始日 Number 1 到 7 7
onPick 选中日期后会执行的回调，只有当 daterange 或 datetimerange 才生效 Function({ maxDate, minDate }) — —

option-prop

参数 说明 类型 可选值 默认值
label 选项的标签 — — label
value 选项的标签 — — value

bl-from 事件

事件名称 说明 回调参数
suffixClick 输入框icon点击事件 icon
keyEnter 输入框回车事件，表单参数中keyEnter为true时生效 prop
focus 监听选中事件 prop
blur 监听失去焦点事件 prop
change 监听change事件,当输入框类型为级联时返回选中的node {prop,node}

bl-from 方法

方法名 说明 参数
getValidateResult 获取校验结果 —
clearValidate 移除表单项的校验结果 表单prop 属性或者 prop 组成的数组 array、string
clearFields 重置表单 —

bl-button

按钮组件

bl-button Attributes

参数 说明 类型 可选值 默认值
config-obj 按钮配置参数 object — —

config-obj

参数 说明 类型 可选值 默认值
type 按钮类型 string primary / success / warning / error / info / text —
size 按钮尺寸 string medium / small / mini small
loading 按钮是否加载中状态 boolean — false
disabled 按钮是否禁用状态 boolean — false
icon 图标类名 string — —
wait 点击后按钮等待时间（单位ms） number — 1000

bl-title

标题组件

bl-title Attributes

参数 说明 类型 可选值 默认值
title 标题文本 string — —
append 是否显示展开图标 boolean — false
defaultAppend 默认是否展开 boolean — true

bl-title 事件

事件名称 说明 回调参数
changeAppend 展开切换事件 isAppend:当前展开收起的状态

bl-search-card

搜索栏组件

bl-search-card Attributes

参数 说明 类型 可选值 默认值
title 搜索栏标题(默认不显示) string — —
append 是否可收起 boolean — —
showNum 搜索栏收起时显示的输入框数量(append为true时生效) number — —
other-btn-list 除展开、重置、查询按钮外的按钮列表 Array — —
表单属性同自定义表单组件

other-btn-list

参数 说明 类型 可选值 默认值
name 按钮名称 string — —
config 按钮配置,属性同config-obj Object — —
fun 按钮函数 string — —

bl-search-card 事件

事件名称 说明 回调参数
resetSearch 重置 —
search 搜索 —
btnClick 按钮点击事件，返回函数名称，传入other-btn-list时生效 fun
keyEnter 输入框回车事件，表单参数中keyEnter为true时生效 prop
suffixClick 输入框icon点击事件 icon
change 监听表单变化 prop

bl-search-card 方法

方法名 说明 参数
getValidateResult 获取校验结果 —
clearFields 清空表单内容 —
clearValidate 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果 Function(props: array

bl-search-card 参数

参数 说明 类型 可选值 默认值
formAppend 表单是否展开 boolean — —

bl-dialog

弹窗组件

bl-dialog Attributes

参数 说明 类型 可选值 默认值
width 弹窗的宽度 string — 50%
top 弹窗CSS 中的 margin-top 值 string — 10vh
showClose 是否显示关闭按钮 boolean — false
destroyOnClose 关闭时销毁 Dialog 中的元素 boolean — true
modal-append-to-body 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上 boolean — true
append-to-body Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true boolean — false

bl-dialog 事件

事件名称 说明 回调参数
beforeClose 关闭弹窗前调用的方法 -

bl-dialog 方法

方法名 说明 参数
open 打开弹窗 (title)接收一个string类型的参数：弹窗标题
close 关闭弹窗 -

container

布局容器

标签名 说明
search-page-container 外层容器
search-page-result 搜索结果容器
result-header 搜索结果容器头部
result-handle-btnbar 搜索结果容器头部按钮栏

bl-svg-icon

图标组件

bl-svg-icon Attributes

参数 说明 类型 可选值 默认值
icon-class 图标名称 string — —
class-name 图标样式 详见class-name 列表 — —
###class-name
参数 说明
---- ----
code 条形码
idcard 身份证
search 搜索

bl-preview-pdf

pdf预览

bl-preview-pdf Attributes

参数 说明 类型 可选值 默认值
pdf-url pdf地址 string — —
is-downLoad 是否显示下载按钮 boolean - -
is-scale 是否缩放按钮 boolean - -
is-show 是否显示工具栏 boolean - true
init-scale 自定义初始化缩放大小 number - 1
print-direction 打印默认方向 string portrait(纵向)/landscape(横向) -
download-options 下载类型选项 Array - EXCEL/PDF

bl-preview-pdf 方法

方法名 说明 参数
onPrevPage 上一页 -
onNextPage 下一页 -
printPdf 打印 -
scaleBig 放大 -
scaleSmall 缩小 -

bl-pagination

分页组件

bl-pagination Attributes

参数 说明 类型 可选值 默认值
current 当前页数 number — —
pageList 每页显示个数选择器的选项设置 number[] — [20, 50, 100]
pageSize 每页显示条目个数 number — —
total 总条目数 number — —
disabled 是否禁用 boolean — false

bl-pagination 事件

方法名 说明 参数
handleCurrent current 改变时会触发 当前页
handleSize pageSize 改变时会触发 每页条数

export

文件导出方法

导出xlsx

this.$export.excel({
  columns,
  data
})
  .then(() => {
    // ...可选回调
  })
参数 说明 类型 可选值 默认值
columns 列 Array - 空数组
data 行数据 Array - 空数组
title 文件名 String - table
header 第一行文字 String - null
merges 要合并的单元格 String - 空数组

合并单元格，根据 Excel 的表达方式，从第一行第一个单元格，到第一行第三个单元格：merges: ['A1', 'A3']， 多个合并区域，用二维数组表示：merges: [['A1', 'B1'], ['A2', B2]]，单元格从A1到B1、从A2到B2，分别进行合并。

示例: 
const columns = [
  {
    label: '姓名',
    prop: 'name'
  },
  {
    label: '年龄',
    prop: 'age'
  }
]
const data = [
  {
    name: 'lucy',
    age: 24
  },
  {
    name: 'bob',
    age: 26
  }
]
this.$export.excel({
  columns,
  data,
  header: 'Excel 第一行标题',
  merges: ['A1', 'A2']
})

导出csv

this.$export.csv({
  columns,
  data
})
  .then(() => {
    // ...可选回调
  })
参数 说明 类型 可选值 默认值
columns 列 Array - 空数组
data 行数据 Array - 空数组
title 文件名 String - table
noHeader 不导出表头 Boolean - false
separator 数据分隔符 String - ,
quoted 每项数据是否加引号 Boolean - false

示例: 
const columns = [
  {
    label: '姓名',
    prop: 'name'
  },
  {
    label: '年龄',
    prop: 'age'
  }
]
const data = [
  {
    name: 'lucy',
    age: 24
  },
  {
    name: 'bob',
    age: 26
  }
]
this.$export.csv({
  columns,
  data
})

导出txt

this.$export.txt({
  text: '文本内容',
  title: '文件名'
})
  .then(() => {
    // ...可选回调
  })
参数 说明 类型 可选值 默认值
text 文件内容 String - 空
title 文件名 String - 文本

bl-tables

bl-tables-attributes

参数 说明 类型 可选值 默认值
current 当前页数 number — —
pageList 每页显示个数选择器的选项设置 number[] — [10, 20, 50]
pageSize 每页显示条目个数 number — —
total 总条目数 number — —
offsetBottom 距离底部的距离 number — 0
stripe 是否为斑马纹 table boolean — false
selection 是否多选 boolean — false
loading 表格loading boolean — false
loadingText 表格加载文字 string — -
indexFixed 序号固定 string, boolean true, left, right -
currentRowKey 行数据的 Key，用来优化 Table 的渲染 string, number - -
paginationShow 是否需要分页 boolean - false
tableColumn 表格列 array - []
selectable 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 Function(row, index) - -
showHead 头部展示 boolean - -
title 头部title string - -
buttonName 头部按钮名字 string - -
fileName 导出文件名 string - table
span-method 合并行或列的计算方法 Function({ row, column, rowIndex, columnIndex }) - -

bl-tables-table-column-attributes

参数 说明 类型 可选值 默认值
type 对应列的类型 selection 多选框/index 该行的索引（从 1 开始计算）/expand 显示为一个可展开的按钮,slot插槽显示 String - 空
columnKey column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 String - 文本
label 显示的标题 String - -
prop 对应列内容的字段名 String - -
width 对应列的宽度 String - -
minWidth 对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 String -
fixed 列是否固定在左侧或者右侧，true 表示固定在左侧 string,boolean true, left, right -
sortable 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 boolean, String true, false, 'custom' false
showOverflowTooltip 当内容过长被隐藏时显示 tooltip Boolean - false
align 对齐方式 String left/center/right left
headerAlign 表头对齐方式，若不设置该项，则使用表格的对齐方式 String left/center/right -
className 列的 className String - -
operation 操作栏 Array -
collectionType 使用字典API对值进行解析，如 collectionType: 'sex' String - -
slot 插槽名 String -
format 时间格式 String - YYYY-MM-DD HH:mm:ss
dataSources 数据源 dic:字典值，custom:自定义 string -
options 自定义数据源，数据源为custom时需要传入 Array - -
formatter 用来格式化内容 Function(row, column, cellValue, index) - -

bl-tables-methods

方法名 说明 参数
rowClick 当某一行被点击时会触发该事件 row, column, event
handleCurrent current 改变时会触发 当前页
handleSize pageSize 改变时会触发 每页条数
rowOperation 操作按钮点击触发 row, $index, prop, columIndex, optionIndex (row.loading,row.disabled)
switchChange 开关切换 row, $index, prop, columIndex
editInputBlur 可编辑input失去焦点 row, $index, prop, columIndex
selectChange 当选择项发生变化时会触发该事件 selection
handleExport 导出数据 传入data，不传则导出当前的数据
getData 获取数据 设置了dataUrl和searchData时可以使用

Version History

Version Released Vue License
1.5.5 ^2.6.11 MIT
1.5.4 ^2.6.11 MIT
1.5.3 ^2.6.11 MIT
1.5.1 ^2.6.11 MIT
1.4.99 ^2.6.11 MIT