@wbiokr/vue2 v0.13.4

1. 组件列表

1.1 WMarker

基于阿里iconfont的Icon组件

<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

文本省略组件

<template>
    <div style='width: 50px'>
        <WWhite text='我是省略号我是省略号我是省略号我是省略号我是省略号' />
    </div>
</template>

1.3 WCopy

复制组件

<template>
    <div style='width: 50px'>
        <WCopy content='复制我吧复制我吧复制我吧' />
    </div>
</template>

1.4 WFullScreen

全屏组件

<template>
    <div style='width: 50px'>
        <WFullScreen />
    </div>
</template>

1.5 WToast

toast提示语组件

<template>
    <div style='width: 50px'>
        <WToast content='跟随鼠标拖拽' />
    </div>
</template>

1.6 WRangePicker

时间（开始、结束）选择组件

<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

时间（开始、结束）选择组件

<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

区域选择组件（省、市、区）

<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

搜索条件组件

<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

下载组件

<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

下载组件

<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

删除组件

<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

提示组件

<template>
    <WNotice content="哈喽哈喽" />
    <WNotice :content="['哈喽哈喽', 'hihihi']" />
</template>

2 公共参数

2.1 Field参数

2.2 Action参数

2.3 AreaSelect参数

2.4 ButtonOptions参数

2.5 url参数

exportUrl类型解释: 
1、当为string类型的时候，表示带query参数的get请求导出/其他地址；
2、当为object类型的时候，表示post请求/详细的get请求，里面包含
    {
        type: 'post',
        url: '', 
        params: {}, 
        headers: {}, 
        nameOrKey: '' 
    }
    其中nameOrKey可以表示名称或接口返回字段(非必填)
3、当为function类型的时候，表示自定义导出/其他行为

2.6 PageOptions参数

2.7 TableOptions参数

2.8 Column参数