gamechat-packages

Package scripts

yarn install
yarn serve
yarn build

Project frame

Root
  |– packages
  |– examples
  |- config
  |- lib

Drawer

modal, picker, ant都是基于drawer二次开发

e-drawer 弹窗

<e-drawer
    v-model="show"
    name="name"
    title="title"
    isClose="isClose"
    isCloseEvent="isCloseEvent"
    isMaskEvent="isMaskEvent"
    direction="direction"
    @close="onClose"
>
    <div>Content</div>
</e-drawer>

this.$drawer({
    name: 'name',
    title: 'title',
    message: 'message',
    direction: 'direction',
    isClose: true,
    isCloseEvent: true,
    isMaskEvent: true,
    onClose: () => {}
})

| 属性 | 类型 | 默认 | 说明 | | :--- | :--- | :--- | :--- | | name | String | \ | 标识；可以为空 | | title | String | \ | 标题；可以为空 | | message | String|Element | \ | 内容：$drawer调用才有效 | | direction | String | center | 展示位置 | | isClose | Boolean | true | 是否展示关闭按钮 | | isCloseEvent | Boolean | true | 关闭触发后销毁VM | | isMaskEvent | Boolean | true | 是否允许点击蒙层执行关闭效果 | | onClose | Function|Boolean | \ | 关闭回调 |

direction 展示位置

| 值 | 说明 | | :--- | :--- | | ltr/left | 左向右 | | rtl/right | 右向左 | | ttb/up | 上至下 | | btt/down | 下至上 | | center | 居中 |

e-modal 模态弹窗

this.$modal('message', {
    name: 'name',
    title: 'title',
    confirmText: 'ok',
    cancelText: 'cancel',
    onConfirm: () => {},
    onCancel: () => {}
})

| 属性 | 类型 | 默认 | 说明 | | :--- | :--- | :--- | :--- | | name | String | \ | 标识 | | title | String | \ | 标题 | | message | String | \ | 内容 | | confirmText | String | ok | 确定按钮文本 | | cancelText | String | \ | 取消按钮文本 | | onConfirm | Function | \ | 点击确定按钮回调 | | onCancel | Function | \ | 点击取消按钮回调 | | isMaskEvent | Boolean | false | 是否允许点击蒙层执行关闭效果 |

e-picker 选择器

picker: [
    {
        currentIndex: 0,
        list: [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h' ]
    }
]

<e-picker
    title="title"
    :data="picker"
    @confirm="onConfirm"
    @cancel="onCancel"
/>

this.$picker({
    name: 'name',
    title: 'title',
    data: picker,
    onConfirm: () => {},
    onCancel: () => {}
})

| 属性 | 类型 | 默认 | 说明 | | :--- | :--- | :--- | :--- | | name | String | \ | 标识 | | title | String | \ | 标题 | | data | Array | [] | 内容 | | isHistory | Boolean | true | 是否保存历史记录；$picker需要手动保存 | | confirmText | String | confirm | 确定按钮文本 | | cancelText | String | \ | 取消按钮文本 | | onConfirm | Function | \ | 点击确定按钮回调 | | onCancel | Function | \ | 点击取消按钮回调 | | isMaskEvent | Boolean | true | 是否允许点击蒙层执行关闭效果 |

e-ant 操作弹窗

ant: [
    { name: 'line', label: 'Line', icon: 'https://gc.fp.ps.easebar.com/file/60dc2ea1f5e7bb647424c7fdF0833Iwi02' },
    { name: 'twitter', label: 'Twitter', icon: 'https://gc.fp.ps.easebar.com/file/60dc2ec61b741242f3186c6cjBhXa0ji02' },
    { name: 'link', label: 'Copy', icon: 'https://gc.fp.ps.easebar.com/file/60dc2ed76793671b649fd125pLGaEZ7y02' }
]

<e-ant
    name="name"
    :data="ant"
    position="relative"
    @ant="onAnt"
>
    <div slot="before">Ant Before Slot.</div>
    <div class="ant-default">Ant Default Slot.</div>
</e-ant>

this.$ant({
    name: 'name',
    data: ant,
    onAnt: () => {},
    defaultSlot: null,
    beforeSlot: null
})

| 属性 | 类型 | 默认 | 说明 | | :--- | :--- | :--- | :--- | | name | String | \ | 标识 | | data | Array | \ | 内容 | | onAnt | Function | \ | 点击回调 | | direction | String | ttb | 展示位置：$ant调用才有效 | | isMaskEvent | Boolean | true | 是否允许点击蒙层执行关闭效果 | | defaultSlot | String|Element | \ | 默认插槽 | | beforeSlot | String|Element | \ | before插槽 |

Form

e-form 表单：混合了input, checkbox, select, textare, input-group

form: [
    {
        name: 'form-input',
        label: 'Input',
        type: 'input',
        input: {
            inline: true,
            label: 'inline',
            model: '',
            placeholder: 'input',
            maxlength: 20
        }
    },
    {
        name: 'form-select',
        label: 'Select',
        type: 'select',
        select: {
            title: 'select',
            model: '',
            placeholder: 'input',
            option: [
                {
                    currentIndex: 0,
                    list: [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h' ]
                }
            ],
            confirmText: 'ok',
            cancelText: 'cancel'
        }
    },
    {
        name: 'form-checkbox',
        label: 'Checkbox',
        type: 'checkbox',
        checkbox: {
            disabled: false,
            multiple: false,
            model: [
                {
                    id: 1,
                    is_default: 0,
                    selected: 0,
                    text: 'man'
                },
                {
                    id: 2,
                    is_default: 0,
                    selected: 0,
                    text: 'woman'
                },
                {
                    id: 0,
                    is_default: 0,
                    selected: 1,
                    text: 'x'
                }
            ],
            type: 'text',
            attr: 'text'
        }
    },
    {
        name: 'form-textarea',
        label: 'Textarea',
        type: 'textarea',
        textarea: {
            model: '',
            placeholder: 'input',
            maxlength: 20
        }
    },
    {
        name: 'form-inputgroup',
        label: 'Inputgroup',
        type: 'inputgroup',
        inputgroup: [
            {
                inline: false,
                label: 'block',
                model: '',
                placeholder: 'input',
                maxlength: 20
            },
            {
                inline: true,
                label: 'inline',
                model: '',
                placeholder: 'input',
                maxlength: 20
            },
            {
                inline: true,
                label: 'inline',
                model: '',
                placeholder: 'input',
                maxlength: 20
            }
        ]
    }
]

<e-form
    :data="form"
    @selectconfirm="onSelectconfirm"
    @checkboxcheck="onCheckboxcheck"
    @disabled="onDisabled"
/>

| 属性 | 类型 | 默认 | 说明 | | :--- | :--- | :--- | :--- | | selectconfirm | Function | \ | select确认回调 | | checkboxcheck | Function | \ | checkbox回调 | | disabled | Function | \ | checkbox禁止选项点击回调 |

其他控件参数参考对应的控件属性说明

e-input 输入控件

<e-input
    v-model="model"
    :inline="false"
    label="label"
    type="text"
    placeholder="placeholder"
    maxlength="15"
    :replaceEmoji="true"
    @input="onInput"
/>

| 属性 | 类型 | 默认 | 说明 | | :--- | :--- | :--- | :--- | | inline | Boolean | false | 是否行内展示 | | label | String | \ | 标题 | | type | String | text | 输入类型，同html的input | | placeholder | String | \ | input说明文案 | | maxlength | String|Number | 15 | 值的长度 | | replaceEmoji | Boolean | true | 是否过滤emoji | | onInput | Function | \ | 输入回调 |

e-textarea 文本输入控件

<e-textarea
    v-model="model"
    placeholder="placeholder"
    maxlength="15"
    :replaceEmoji="true"
    @input="onInput"
/>

| 属性 | 类型 | 默认 | 说明 | | :--- | :--- | :--- | :--- | | placeholder | String | \ | textarea说明文案 | | maxlength | String|Number | 50 | 值的长度 | | replaceEmoji | Boolean | true | 是否过滤emoji | | onInput | Function | \ | 输入回调 |

e-checkbox 选项控件

<e-checkbox
    v-model="model"
    type="text"
    attr="text"
    :multiple="true"
    :disabled="false"
    @check="onCheckboxCheck"
    @disabled="onDisabled"
/>

| 属性 | 类型 | 默认 | 说明 | | :--- | :--- | :--- | :--- | | model | Array | [] | 选项 | | type | String | text | 选择展示类型 | | attr | String | text | 选项对象用于展示的值；例如data.text: 'text'，data.str: 'text' | | multiple | Boolean | true | 是否多选 | | disabled | Boolean | false | 是否禁止选择 | | check | Function | \ | 选择回调 | | disabled | Function | \ | 禁止选项点击回调 |

type | 值 | 说明 | | :--- | :--- | | text | 文本 | | img | 图片 | | backgroundImage | 背景图片 | | backgroundColor | 背景颜色 |

e-select 选择控件

<e-select
    v-model="model"
    placeholder="placeholder"
    title="title"
    option="option"
    confirmText="confirmText"
    cancelText="cancelText"
    @confirm="onSelectConfirm"
/>

| 属性 | 类型 | 默认 | 说明 | | :--- | :--- | :--- | :--- | | model | String|Number | \ | 选中的值 | | placeholder | String | \ | select下的input的说明文案 | | title | String | \ | select下的input的title | | option | Array | [] | 选项组 | | confirmText | String | confirm | 确认按钮文案 | | cancelText | String | \ | 取消按钮文案 | | confirm | Function | \ | 点击确认按钮回调 |

select控件是对picker的二次开发

Plugin

e-copy 复制

this.$copy('text', e => {
    console.log('copy', e)
})

| 属性 | 类型 | 默认 | 说明 | | :--- | :--- | :--- | :--- | | text | String | \ | 文本 | | callback | Function | \ | 回调 |

e-date-format 日期格式化

<p>{{ time | date-format }}</p>

e-emoji

// 检查内容是否含有emoji：Boolean
this.$emoji.has(str)

// 替换内容中的emoji
this.$emoji.replace(str, substitute)

| 属性 | 类型 | 默认 | 说明 | | :--- | :--- | :--- | :--- | | str | String | \ | 文本 | | substitute | String | \ | 替换的字符串 |

e-longpress 长按触发

<button v-longpress="onLongpress">Long Press</button>

e-toast

this.$toast.show(text, () => {}, 2500)

// 支持队列
const arr = new Array(5)

for (let i = 0; i < arr.length; i++) {
    this.$toast.show(`queue ${i + 1}`, () => {}, 1000)
}

| 属性 | 类型 | 默认 | 说明 | | :--- | :--- | :--- | :--- | | tip | String | \ | 内容 | | complete | Function | \ | 回调函数 | | duration | Number | 2500 | 显示时长 |

e-version-compare 版本比较

this.$versionCompare(version1, version2)

| 属性 | 类型 | 默认 | 说明 | | :--- | :--- | :--- | :--- | | version1 | String | \ | 要进行比较的版本号1 | | version2 | String | \ | 要进行比较的版本号2 |

返回 | 值 | 说明 | | :--- | :--- | | 1 | version1 > version2 | | -1 | version1 < version2 | | 0 | version1 = version2 |

e-auth 预设权限组，根据给定权限判断是否可操作

auths: 'admin,user'
auth: 'admin'

<p v-auth:[auths]="auth">{{ auth }} in {{ auths }}</p>
// 选择display样式方式隐藏/显示
<p v-auth:[auths].display="auth">{{ auth }} in {{ auths }}</p>

| 属性 | 类型 | 默认 | 说明 | | :--- | :--- | :--- | :--- | | auths | String | \ | 权限组：用逗号(,)分割 | | auth | String | \ | 权限 | | display | Boolean | \ | 是否使用display样式方式隐藏/显示 |

说明：

1. 第一次绑定元素时，进行了一次初始化：装载auths，添加el.permission
2. 绑定元素插入父元素时，会检查auth是否在auths内，否则移除元素
3. 更新auth后，重新检查auth是否在auths内

e-debounce click事件防抖

<button v-debounce="onCount">Count</button>

// 绑定事件函数和传参
arr: [1, 2, 3, 4, 5, 6]
<template v-for="(item, index) of arr">
    <button v-debounce:[item]="onHandler" :key="index">Click me!</button>
</template>

| 属性 | 类型 | 默认 | 说明 | | :--- | :--- | :--- | :--- | | value | Any | \ | 可以传任何类型v-debounce="any"；注意非函数类型会立即执行，给函数传参要使用v-debounce:[arg]="fn"的形式 | | prevent | Any | \ | 同click事件，调用event.preventDefault() |

说明：

1. 绑定元素插入父元素时，给元素添加click监听事件，即函数的参数后期有调整也不会发生变化；如果想调整函数参数，需要重新挂载
2. 当value为函数时，默认第一个为event对象，如果有传参，则自定义参数为第一，event对象在第二位；可打印arguments查看

e-to-promise 将普通函数转换为Promise

function obj() {
    console.log('Function obj to Promise.')
}

this.$toPromise(obj)
    .then(() => {
        console.log('It`s Promise.')
    })

| 属性 | 类型 | 默认 | 说明 | | :--- | :--- | :--- | :--- | | obj | Function|Object | \ | 要执行的函数或对象 |

Other

e-empty 空状态

<e-empty icon="icon">
    <div>text</div>
    <div slot="content">Empty Content.</div>
</e-empty>

| 属性 | 类型 | 默认 | 说明 | | :--- | :--- | :--- | :--- | | icon | String | | 图标 | | text | String | \ | 文本 | | contentSlot | Element | \ | content插槽；其他内容 |

e-html-to-canvas html转canvas，生成图片

<e-html-to-canvas
    :clickEmit="true"
    :emitPicture="emitPicture"
    @prehandle="onPrehandle"
    @picture="onPicture"
>
    <div class="canvas">Canvas</div>
</e-html-to-canvas>

<img :src="picture" />
<button @click="emitPicture = true">Emit Picture</button>

| 属性 | 类型 | 默认 | 说明 | | :--- | :--- | :--- | :--- | | width | String|Number | 1000 | 生成图片的宽度；默认1000px | | clickEmit | Boolean | true | 是否开启点击html生成 | | scale | String|Number | 1 | 缩放比例 | | emitInit | Boolean | false | 开启初始化 | | emitPicture | Boolean | false | 开启生成 | | prehandle | Function | \ | 生成前执行 | | picture | Function | \ | 生成后执行 |

Picture返回 | 值 | 说明 | | :--- | :--- | | event | 事件对象 | | picture | 图片地址；data:image/jpeg;base64 | | canvas | canvas对象 |

scale 缩放可能会异常，通过设置.to-canvas的width: auto尝试解决

e-spin 加载

<e-spin>
    <div class="spin">Spin</div>
</e-spin>

// 全屏
this.$spin()
// 销毁全屏
this.$spin_destroy()

| 属性 | 类型 | 默认 | 说明 | | :--- | :--- | :--- | :--- | | name | String | \ | 标识 | | type | String | default | 类型 | | size | String | default | 尺寸 | | tip | String | \ | 文案 | | dotSkin | String | \ | 动画样式 | | full | Boolean | true | 是否全屏；$spin默认全屏 |