@wbiokr/vue2
v0.13.4
Published
基于Vue2的工具组件
Downloads
23
Readme
1. 组件列表
1.1 WMarker
基于阿里iconfont的Icon组件
| Property | Type | 默认值 | Description | | ----- | ------------- | ------------- | ------------------------ | | color | String | #333 | Icon填充色 | | width | Number | 16 | Icon宽度 | | height | Number | 16 | Icon高度 | | loading | Boolean | false | 是否加载中 | | isUse | Boolean | false | 是否使用symbol标记 | | isBtn | Boolean | false | 是否为按钮 | | disabled | Boolean | false | 是否不可点击 | | type | String | | 预制的icon（loading、close、layer、copy） | | d | String|Array | 空 | 来自iconfont的d属性（当d和type同时存在，则d的优先级更高） |
<template>
<div>
<WMarker type='close' />
<WMarker d='M853.32992 102.4H170.67008C133.13024 102.4 102.4 133.13024 102.4 170.67008v682.65984C102.4 890.86976 133.13024 921.6 170.67008 921.6h682.65984C890.86976 921.6 921.6 890.86976 921.6 853.32992V170.67008C921.6 133.13024 890.86976 102.4 853.32992 102.4zM819.2 546.12992H546.12992V819.2h-68.25984V546.12992H204.8v-68.25984h273.07008V204.8h68.25984v273.07008H819.2v68.25984z' />
</div>
</template>1.2 WWhite
文本省略组件
| Property | Type | 默认值 | Description | | ----- | ------------- | ------------- | ------------------------ | | placement | String | top | tooltip的位置 | | text | String | | 文本主体 | | maxWidth | String | 100% | 最大宽度 | | white | Number | 1 | 省略的行数 | | direction | String | center | flex布局的justify-content属性，start end center around between |
<template>
<div style='width: 50px'>
<WWhite text='我是省略号我是省略号我是省略号我是省略号我是省略号' />
</div>
</template>1.3 WCopy
复制组件
| Property | Type | 默认值 | Description | | ----- | ------------- | ------------- | ------------------------ | | copyTitle | String | 复制 | 按钮的title | | copyMsg | String | 复制成功 | 复制成功后的提示语，为空的时候则不提示 | | color | String | #189fff | 按钮颜色 | | size | Number | 16 | 按钮尺寸 | | content | String | | 要复制的内容 | | disabled | Boolean | false | 是否置灰 |
<template>
<div style='width: 50px'>
<WCopy content='复制我吧复制我吧复制我吧' />
</div>
</template>1.4 WFullScreen
全屏组件
| Property | Type | 默认值 | Description | | ----- | ------------- | ------------- | ------------------------ | | type | String | primary | 按钮的类型(ant) | | size | String | 'small' | 按钮尺寸 | | closeTxt | String | 退出全屏 | 关闭提示语 | | openTxt | String | 打开全屏 | 开启提示语 | | placement | String | top | 提示语位置 |
<template>
<div style='width: 50px'>
<WFullScreen />
</div>
</template>1.5 WToast
toast提示语组件
| Property | Type | 默认值 | Description | | ----- | ------------- | ------------- | ------------------------ | | content | String | | 提示语 | | left | Number | 0 | 业务计算位置-left | | top | Number | 0 | 业务计算位置-top | | autoEvent | Boolean | true | 是否开启组件内部自动计算位置，当开启的时候left、top无效 |
<template>
<div style='width: 50px'>
<WToast content='跟随鼠标拖拽' />
</div>
</template>1.6 WRangePicker
时间（开始、结束）选择组件
| Property | Type | 默认值 | Description | 是否必填 | | ----- | ------------- | ------------- | ------------------------ | ----- | | value/v-model | Object | {} | 包含开始、结束属性的参数对象 | true | | fieldInfo | Object | {} | Field相关信息 | true |
<template>
<div style='width: 150px'>
<WRangePicker v-model='params' :fieldInfo='fieldInfo' />
</div>
</template>
<script>
export default {
data() {
return {
params: {
sDate: '',
eDate: '',
},
fieldInfo: {
key: 'sDate,eDate',
extraAttrs: {
class: 'w-200',
showTime: true,
format: 'YYYY-MM-DD HH:mm:ss',
placeholder: ['开始时间', '结束时间'],
},
},
}
},
}
</script>1.7 WDatePicker
时间（开始、结束）选择组件
| Property | Type | 默认值 | Description | 是否必填 | | ----- | ------------- | ------------- | ------------------------ | ----- | | value/v-model | String | '' | 字符串时间 | true | | fieldInfo | Object | {} | Field相关信息 | true |
<template>
<div style='width: 150px'>
<WDatePicker v-model='params.date' :fieldInfo='fieldInfo' />
</div>
</template>
<script>
export default {
data() {
return {
params: {
date: '',
},
fieldInfo: {
key: 'date',
extraAttrs: {
class: 'w-200',
format: 'YYYY-MM-DD',
},
},
}
},
}
</script>1.8 WArea
区域选择组件（省、市、区）
| Property | Type | 默认值 | Description | 是否必填 | | ----- | ------------- | ------------- | ------------------------ | ----- | | value/v-model | Object | {} | 包含省市区的参数对象 | true | | fieldInfo | Object | {} | Field相关信息 | true | | httpOptions | Object | {} | Http相关信息 | 当需要动态请求省市区选项的时候必传 | | provinceOptions | Object | AreaSelect | 省份配置信息 | false | | cityOptions | Object | AreaSelect | 城市配置信息 | false | | countyOptions | Object | AreaSelect | 区县配置信息 | false |
<template>
<a-form layout="inline">
<WArea v-model="params" :httpOptions="httpOptions" :fieldInfo="fieldInfo" />
</a-form>
</template>
<script>
export default {
data() {
return {
httpOptions: {
baseURL: 'http://localhost:8855',
error: message.error,
dataKey: 'result',
beforeRequest(config) {
config.headers['Token'] = '12fsfsafafsfafsfsfsa'
},
},
params: {
cityCode: '140300',
countyCode: '140311',
provinceCode: '140000',
},
fieldInfo: {
type: 'county',
extraAttrs: {
mode: 'multiple',
class: 'w-400',
},
actions: [
{
url: '/conf/city/provinceList',
},
{
url: '/conf/city/cityList',
params(o) {
return { id: o.id }
},
},
{
url: '/conf/city/district',
params(o) {
return { id: o.id }
},
},
],
},
}
},
}
</script>1.9 WFields
搜索条件组件
| Property | Type | 默认值 | Description | 是否必填 | | ----- | ------------- | ------------- | ------------------------ | ----- | | fields | | <Field>[] | [] | true | | httpOptions | Object | {} | Http相关信息 | 当需要动态请求省市区选项的时候必传 | | buttonOptions | Object | ButtonOptions | 按钮配置信息 | false | | commonParams | Object | {} | 公共参数 | false | | columns | <Column>[] | [] | 当需要列设置的时候 | false | | isSearching | Boolean | false | 是否搜索中 | false | | emit('search') | Event | null | 搜索事件 | false | | emit('fields') | Event | null | 整理fields事件 | false | | slot('beforeField') | Slot | null | beforeField插槽，位于整个组件开始位置---slot-scoped='{params}' | false | | slot('afterField') | Slot | null | afterField插槽，位于整个组件结束位置---slot-scoped='{params}' | false | | slot('button') | Slot | null | button插槽，位于导出按钮后面---slot-scoped='{params}' | false |
<template>
<Fields
:fields="fields"
:commonParams="{app: 'haha'}"
:httpOptions="httpOptions"
@search="onList(1)"
@fields="(v) => (newFields = v)"
>
<a-form-item slot="afterField">
<a-button>afterField</a-button>
</a-form-item>
</Fields>
</template>
<script>
export default {
data() {
return {
httpOptions: {
baseURL: 'http://localhost:8855',
error: message.error,
dataKey: 'result',
beforeRequest(config) {
config.headers['Token'] = '12fsfsafafsfafsfsfsa'
},
},
params: {
cityCode: '140300',
countyCode: '140311',
provinceCode: '140000',
},
fields: [
{
key: 'date',
extraAttrs: {
class: 'w-200',
format: 'YYYY-MM-DD',
},
},
{
type: 'county',
key: 'area',
label: '区域',
extraAttrs: {
// mode: 'multiple',
class: 'w-400',
provinceKey: 'pcode',
cityKey: 'ccode',
countyKey: 'tcode',
},
},
{
type: 'select',
label: '用户',
key: 'username',
extraAttrs: {
class: 'w-130',
},
actions: [
{
url: '/sys/user/getListByUserName',
labelKey: 'realname',
valueKey: 'username',
},
],
},
]
}
},
}
</script>1.10 WDownload
下载组件
| Property | Type | 默认值 | Description | 必填 | | ----- | ------------- | ------------- | ------------------------ | --- | | extraAttrs | Object | { disabled: false, ghost: false, icon: 'download', size: 'default', type: 'primary', nameOrKey: '' } | button组件配置+nameOrKey（优先级最低）| false | | httpOptions | Object | {} | Http相关信息 | 当url参数不为function时候必传 | | url | String, Function, Object | '' | 请求主体 | true | | slot(默认) | Slot | 下载 | | false |
<template>
<WDownload
:httpOptions="httpOptions"
:extraAttrs="{
type: 'primary',
ghost: true,
icon: 'export',
nameOrKey: 'hahah.xls',
}"
url="/export/abc"
class="m-r-10"
>导出</WDownload
>
</template>1.11 WTable
下载组件
| Property | Type | 默认值 | Description | 必填 | | ----- | ------------- | ------------- | ------------------------ | --- | | httpOptions | Object | {} | Http相关信息 | true | | buttonOptions | Object | ButtonOptions | Fields部分的buttonOptions参数 | false | | fields | Field[] | [] | Field部分配置主体 | false | | pageOptions | Object | PageOptions | 分页配置 | false | | tableOptions | Object | TableOptions | list配置 | true | | slot('beforeField') | Slot | null | beforeField插槽，位于整个组件开始位置---slot-scoped='{params}' | false | | slot('afterField') | Slot | null | afterField插槽，位于整个组件结束位置---slot-scoped='{params}' | false | | slot('button') | Slot | null | button插槽，位于导出按钮后面---slot-scoped='{params}' | false |
<template>
<WTable
:fields="fields"
:httpOptions="httpOptions"
:pageOptions="{
pageKey: 'current',
}"
:tableOptions="{
listUrl: '/abc',
columns: columns,
bottomOffset: 200,
}"
:buttonOptions="{
exportUrl: '/export',
}"
>
<a-form-item slot="afterField">
<a-button>afterField</a-button>
</a-form-item>
</WTable>
</template>1.12 WDelete
删除组件
| Property | Type | 默认值 | Description | 必填 | | ----- | ------------- | ------------- | ------------------------ | --- | | extraAttrs | Object | { } | button组件配置+nameOrKey（优先级最低）| false | | httpOptions | Object | {} | Http相关信息 | true> | | url | String, Function, Object | '' | 请求主体 | true | | title | String | '删除' | tooltip的title | false | | notice | String | '确定要删除吗？' | 弹窗确认提示 | false | | record | Object | {} | 行数据 | true | | method | String | 'get' | 方法类型 | false | | disabled | Boolean | 'false' | 是否不可点击 | false | | slot(默认) | Slot | '' | | true |
<template>
<WDownload
:httpOptions="httpOptions"
:extraAttrs="{
type: 'primary',
ghost: true,
icon: 'export',
nameOrKey: 'hahah.xls',
}"
url="/export/abc"
class="m-r-10"
>导出</WDownload
>
</template>1.12 WNotice
提示组件
| Property | Type | 默认值 | Description | 必填 | | ----- | ------------- | ------------- | ------------------------ | --- | | size | Number | 16 | icon大小 | false | | color | String | #aaa | icon颜色 | false | | placement | String | top | popover位置 | false | | title | String | '' | popover的title | false | | content | String,Array | '' | 提示内容 | true |
<template>
<WNotice content="哈喽哈喽" />
<WNotice :content="['哈喽哈喽', 'hihihi']" />
</template>2 公共参数
2.1 Field参数
| Property | Type | 默认值 | Description | 是否必填 | | ----- | ------------- | ------------- | ------------------------ | ----- | | type | String | input | 类型(被用到WFields组件的时候有用), W_TYPES为所有常量(input、range、date、select、province、city、county等类型) | 使用在WFields时必填 | | label | String | | 使用在WFields组件上时候的属性名称 | 使用在WFields时必填 | | key | String | | 格式必须为逗号隔开的开始、结束属性集合（如startDate,endDate） | true | | defaultValue | String|Array | | 默认值 | false | | options | Array | [] | 当类型为select，treeSelect等时候的下拉选项 | false | | extraAttrs | Object | | 对应ant组件上的其他属性 | false | | slot | String | | 当使用自定义组件时候的slot名称 | false | | actions | Array | [] | 当类型为select，treeSelect等组件需要动态获取options时候的配置 | false |
2.2 Action参数
| Property | Type | 默认值 | Description | 是否必填 | | ----- | ------------- | ------------- | ------------------------ | ----- | | url | String | | 获取options的接口 | true | | method | String | get | 请求方法 | false | | params | Object | {} | 请求参数 | false | | optionPath | String | | 字段路径，组件会自动识别data、result、record、list、results、records响应属性 | false | | labelKey | String | label | 下拉框名称 | false | | valueKey | String | value | 选中项目的值 | false | | callback | null|function | null | 回调函数 | false |
2.3 AreaSelect参数
| Property | Type | 默认值 | Description | 是否必填 | | ----- | ------------- | ------------- | ------------------------ | ----- | | label | String | 分别为省份、城市、区县 | 名称 | false | | width | String | 100% | select宽度 | false | | labelCol | Object | {} | label 标签布局 | false | | wrapperCol | Object | {} | 控件 布局 | false | | labelAlign | String | right | label的文本对齐方式 | false | | required | Boolean | false | 是否必填 | false |
2.4 ButtonOptions参数
| Property | Type | 默认值 | Description | 是否必填 | | ----- | ------------- | ------------- | ------------------------ | ----- | | searchTxt | String | 搜索 | 搜索按钮名称 | false | | resetTxt | String | 重置 | 重置按钮名称 | false | | exportTxt | String | 导出 | 导出按钮名称 | false | | showReset | Boolean | true | 是否展示重置 | false | | showExport | Boolean | true | 是否展示导出 | false | | exportUrl | String|Object|Function | 导出url配置 | false |
2.5 url参数
exportUrl类型解释:
1、当为string类型的时候，表示带query参数的get请求导出/其他地址；
2、当为object类型的时候，表示post请求/详细的get请求，里面包含
{
type: 'post',
url: '',
params: {},
headers: {},
nameOrKey: ''
}
其中nameOrKey可以表示名称或接口返回字段(非必填)
3、当为function类型的时候，表示自定义导出/其他行为2.6 PageOptions参数
| Property | Type | 默认值 | Description | 是否必填 | | ----- | ------------- | ------------- | ------------------------ | ----- | | isPage | Boolean | true | 是否分页 | false | | defaultSize | Number | 20 | 分页默认大小 | false | | exportTxt | String | 导出 | 导出按钮名称 | false | | size | String | '' | 分页组件的size | false | | pageKey | String | pageNo | 传给后台的分页数key | false | | sizeKey | String | pageSize | 传给后台的分页大小key | false | | totalKey | String | total | 后台响应基于response的总数key | false | | recordKey | String | '' | 后台响应基于response的list主体key（默认情况下会自动找出最合适的数组，不准的情况下请自己手动传入） | false |
2.7 TableOptions参数
| Property | Type | 默认值 | Description | 是否必填 | | ----- | ------------- | ------------- | ------------------------ | ----- | | listUrl | String | '' | 请求list地址 | true | | listMethod | String | get | 请求方式 | false | | listParams | Object|Function | {} | 外部单独业务参数/处理参数 | false | | autoLoad | Boolean | true | 页面打开是否自动请求第一页数据 | false | | bottomOffset | Number | 0 | table组件距离底部留白距离（用于自动计算滚动使用） | false | | columns | Column[] | [] | table组件的列配置 | true | | extraAttrs | Object | {} | AntTable其他想要自定义的属性 | false | | afterList | null|Function | null | 请求完数据后的钩子 | false |
2.8 Column参数
| Property | Type | 默认值 | Description | 是否必填 | | ----- | ------------- | ------------- | ------------------------ | ----- | | dataIndex | String | '' | 唯一key | true | | title | String | '' | 标题 | false | | template | String | '' | 有内置的label、index、white、tag、其他自定义slot | false | | textFilter | Function|null | null | tag组件的时候需要自定义内容时候的配置 | false | | fieldKey | String|null | null | label组件的时候dataIndex在Field里面的可以不一致的情况下手动配置项 | false | | hidden | Boolean | false | 设置column是否隐藏 | false | | extraAttrs | Object | {} | 各个自定义组件tag、label等的自定义属性 | false |