@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
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	必填
attrs	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"
        :attrs="{
            type: 'primary',
            ghost: true,
            icon: 'export',
            nameOrKey: 'hahah.xls',
        }"
        url="/export/abc"
        class="m-r-10"
        >导出</WDownload
    >
</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类型的时候，表示自定义导出

@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

2 公共参数

2.1 Field参数

2.2 Action参数

2.3 AreaSelect参数

2.4 ButtonOptions参数

2.5 url参数

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

2 公共参数

2.1 Field参数

2.2 Action参数

2.3 AreaSelect参数

2.4 ButtonOptions参数

2.5 url参数

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads