@wbiokr/vue2

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	空

<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		默认值
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	回调函数

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配置

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	{}	外部单独业务参数/处理参数
autoLoad	Boolean	true	页面打开是否自动请求第一页数据	false
bottomOffset	Number	0	table组件距离底部留白距离（用于自动计算滚动使用）	false
columns	Column[]	[]	table组件的列配置	true
extraAttrs	Object	{}	AntTable其他想要自定义的属性	false
afterList	null	Function	null	请求完数据后的钩子

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组件的时候需要自定义内容时候的配置
fieldKey	String	null	null	label组件的时候dataIndex在Field里面的可以不一致的情况下手动配置项
hidden	Boolean	false	设置column是否隐藏	false
extraAttrs	Object	{}	各个自定义组件tag、label等的自定义属性	false

@wbiokr/vue2

1. 组件列表

1.1 WMarker

1.2 WWhite

1.3 WCopy

1.4 WFullScreen

1.5 WToast

1.6 WRangePicker

1.7 WDatePicker

1.8 WArea

1.9 WFields

1.10 WDownload

1.11 WTable

1.12 WDelete

1.12 WNotice

2 公共参数

2.1 Field参数

2.2 Action参数

2.3 AreaSelect参数

2.4 ButtonOptions参数

2.5 url参数

2.6 PageOptions参数

2.7 TableOptions参数

2.8 Column参数

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

@wbiokr/vue2

1. 组件列表

1.1 WMarker

1.2 WWhite

1.3 WCopy

1.4 WFullScreen

1.5 WToast

1.6 WRangePicker

1.7 WDatePicker

1.8 WArea

1.9 WFields

1.10 WDownload

1.11 WTable

1.12 WDelete

1.12 WNotice

2 公共参数

2.1 Field参数

2.2 Action参数

2.3 AreaSelect参数

2.4 ButtonOptions参数

2.5 url参数

2.6 PageOptions参数

2.7 TableOptions参数

2.8 Column参数

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads