gamechat-packages v1.1.0

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: () => {}
})

direction 展示位置

e-modal 模态弹窗

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

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: () => {}
})

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
})

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"
/>

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

e-input 输入控件

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

e-textarea 文本输入控件

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

e-checkbox 选项控件

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

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

e-select 选择控件

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

select控件是对picker的二次开发

Plugin

e-copy 复制

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

e-date-format 日期格式化

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

e-emoji

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

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

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)
}

e-version-compare 版本比较

this.$versionCompare(version1, version2)

返回 | 值 | 说明 | | :--- | :--- | | 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>

说明： 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>

说明： 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.')
    })

Other

e-empty 空状态

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

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>

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()