battlenet-client-web-package

v0.0.9

Published

2 years ago

海外PC游戏平台H5组件库

Downloads

0High
0Medium
0Low

benjiaoxz

battlenet-client-web-package

海外PC游戏平台H5组件库

Package scripts

yarn install
yarn serve
yarn build

Project frame

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

Template

template

Basic

icon 图标（持续更新...）

// 直接通过设置类名为 e-icon-iconName 来使用即可
<i class="e-icon-media"></i>

说明：

icon为字体，使用时，通过font-size调整大小，字体包assets/fonts
icon使用svg格式创建，https://icomoon.io/app
类名与组件库一致

e-button 按钮

<e-button>按钮</e-button>

| 属性 | 类型 | 可选 | 默认 | 说明 | | :--- | :--- | :--- | :--- | :--- | | size | String | medium / small / mini | \ | 尺寸 | | type | String | primary / success / warning / danger / text / link | \ | 类型 | | round | Boolean | \ | false | 是否圆角按钮 | | circle | Boolean | \ | false | 是否圆形按钮 | | disabled | Boolean | \ | false | 是否禁用状态 | | quiet | Boolean | \ | false | 是否静默状态 | | icon | String | \ | \ | 图标类名 |

Data

e-skeleton 骨架屏

<e-skeleton :rows="6" animated />

| 属性 | 类型 | 可选 | 默认 | 说明 | | :--- | :--- | :--- | :--- | :--- | | animated | Boolean | \ | false | 是否使用动画 | | count | Number | \ | 1 | 渲染多少个 template, 建议使用尽可能小的数字 | | loading | Boolean | \ | true | 是否显示 skeleton 骨架屏 | | rows | Number | \ | 4 | 骨架屏段落数量 | | throttle | Number | \ | 0 | 延迟占位 DOM 渲染的时间, 单位是毫秒 |

e-skeleton-item 骨架屏 item

<e-skeleton-item variant="image" style="width: 240px; height: 240px;" />

| 属性 | 类型 | 可选 | 默认 | 说明 | | :--- | :--- | :--- | :--- | :--- | | variant | String | p / h1 / h3 / text / caption / button / image / circle / rect | text | 当前显示的占位元素的样式 |

skeleton slots 骨架屏 slot

| 属性 | 说明 | | :--- | :--- | | default | 用来展示真实 UI | | template | 用来展示自定义占位符 |

e-empty 空状态

<e-empty
    image="image"
    :image-size="200"
    title="Connection is failed"
    description="However rare side effects observed among children can be metabolic acidosis, coma, respiratory depression, and hypoglycemia."
    confirmText="Try again"
    @confirm="onConfirm"
></e-empty>

| 属性 | 类型 | 可选 | 默认 | 说明 | | :--- | :--- | :--- | :--- | :--- | | image | String | \ | \ | 图片 | | image-size | Number | \ | 166 | 图片大小 | | title | String | \ | \ | 标题 | | description | String | \ | \ | 内容 | | confirmText | String | \ | \ | 按钮文案 |

empty slots

| 属性 | 说明 | | :--- | :--- | | default | 自定义标题和内容 | | content | 自定义：图片、标题、内容、按钮 |

empty event

| 属性 | 说明 | | :--- | :--- | | confirm | 按钮点击回调 |

Notice

e-alert 警告

// $alert
<e-button size="mini" @click="$alert('Here is an information text')">基础用法</e-button>
<e-button size="mini" @click="$alert.success('Here is an Success text')">成功</e-button>
<e-button size="mini" @click="$alert.warning('Here is an Warning text')">异常</e-button>
<e-button size="mini" @click="$alert.error('Here is an Error text')">错误</e-button>

// $alert title
<e-button size="mini" @click="$alert('Here is an information text', {
    title: 'Info'
})">标题用法</e-button>

// alert element
<e-alert>Here is an information text</e-alert>

| 属性 | 类型 | 可选 | 默认 | 说明 | | :--- | :--- | :--- | :--- | :--- | | model | String | alert / message / notice | alert | 模式 | | type | String | info \ success \ warning \ error | info | 类型 | | title | String | \ | \ | 标题 | | message | $slots.default | \ | \ | 内容 | | icon | String | \ | \ | 图标 | | direction | String | \ | center | 位置：alert、message、notice从上往下开；其他位置样式在多组场景会异常 | | duration | Number | \ | 3000 | 显示时间, 毫秒。设为 0 则不会自动关闭 | | isIcon | Boolean | \ | true | 是否展示图标 | | isClose | Boolean | \ | true | 是否展示关闭按钮 | | onClose | Function | \ | \ | 关闭按钮点击回调 | | onDestroy | Function | \ | \ | 元素销毁回调 | | fixed | Boolean | \ | true | 是否固定 | | offset | Number | \ | 20 | 距离顶部偏移量 |

alert slots 消失提示 slots

| 属性 | 说明 | | :--- | :--- | | default | 内容 | | handler | 顶部右侧控件，关闭按钮左边 |

direction 展示位置

事件

注：消息提示支持多组同时展示，动画为上至下展示，消失动画默认从上至下消失

e-message 消息提示

// $message
<e-button size="mini" @click="$message('This is a message!')">基础用法</e-button>
<e-button size="mini" @click="$message.success('This is a message!')">成功</e-button>
<e-button size="mini" @click="$message.warning('This is a message!')">异常</e-button>
<e-button size="mini" @click="$message.error('This is a message!')">错误</e-button>

// message element
<e-message>This is a message!</e-message>

配置同alert

e-notice 通知

// $notice
<e-button size="mini" @click="$notice('Which can be very long. It can be short and it can be punctuated.', {
    title: 'Notification',
    isIcon: false
})">基础用法</e-button>
<e-button size="mini" @click="$notice.warning('Which can be very long. It can be short and it can be punctuated.', {
    title: 'Notification'
})">异常</e-button>
<e-button size="mini" @click="$notice('Which can be very long. It can be short and it can be punctuated.', {
    title: 'Notification',
    isIcon: false,
    duration: 0
})">不会自动关闭</e-button>

// notice element
<e-notice title="Notification">Which can be very long. It can be short and it can be punctuated.</e-notice>

配置同alert

Others

e-card 卡片

<e-card>卡片</e-card>

| 属性 | 类型 | 可选 | 默认 | 说明 | | :--- | :--- | :--- | :--- | :--- | | headerType | String | img / text | img | header 类型 |

e-carousel 走马灯

<e-carousel>
    <e-carousel-item v-for="item in 4" :key="item">
        <h3>{{ item }}</h3>
    </e-carousel-item>
</e-carousel>

Carousel 事件

| 事件名称 | 回调参数 | 说明 | | :--- | :--- | :--- | | change | 目前激活的幻灯片的索引，原幻灯片的索引 | 幻灯片切换时触发 |

e-carousel-item 走马灯 item

| 属性 | 类型 | 可选 | 默认 | 说明 | | :--- | :--- | :--- | :--- | :--- | | enter-class | String | \ | \ | 进入动画 | | leave-class | String | \ | \ | 离开动画 |

Carousel Item 事件

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: confirmText,
    cancelText: cancelText,
    onConfirm: () => {
        console.log('Confirm')
    },
    onCancel: () => {
        console.log('Cancel')
    },
    size: 'small'
})

| 属性 | 类型 | 可选 | 默认 | 说明 | | :--- | :--- | :--- | :--- | :--- | | message | String|Element | \ | \ | 内容 | | name | String | \ | \ | 标识；可以为空 | | title | String | \ | \ | 标题；可以为空 | | confirmText | String | \ | \ | 确认按钮文案；可以为空 | | cancelText | String | \ | \ | 取消按钮文案；可以为空 | | onConfirm | Function | \ | \ | 确认按钮点击回调 | | onCancel | Function | \ | \ | 取消按钮点击回调 | | size | String | small / medium | small | 尺寸 |

e-popper 弹出框

<e-popper content="Top Center 提示文字" placement="top">
    <e-button>上边</e-button>
</e-popper>

// 指令方式
<e-button v-popper="'指令 激活 提示文字'">指令 激活</e-button>

| 属性 | 类型 | 可选 | 默认 | 说明 | | :--- | :--- | :--- | :--- | :--- | | trigger | String | hover / click | hover | 触发方式 | | content | String\Object | \ | \ | 显示的内容，可以是VNode | | placement | String | top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end | bottom | 出现位置 | | offset | Number | \ | 0 | 出现位置的偏移量 |

popper 指令方式

| 值 | 说明 | | :--- | :--- | | content | 文字/对象类型，对象参数同元素形式 |

注：基于floating-ui开发

e-video 视频

videoOptions: {
    url: '//vjs.zencdn.net/v/oceans.mp4'
}

<e-video :options="videoOptions" />

| 属性 | 类型 | 可选 | 默认 | 说明 | | :--- | :--- | :--- | :--- | :--- | | options | Object | \ | \ | 参考xgplayer可选配置 | | url | String | \ | \ | 视频源 | | lang | String | \ | en | 国际化 | | controlPlugins | Array | \ | play / time / progress / volume / fullscreen / flex / poster / loading / memoryPlay | 内置插件，参考xgplayer插件 |

video 已支持插件：加载顺序会影响展示

e-lazyload 图片预加载

<img v-lazy="img.src" />

<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
    <img data-src="//domain.com/img1.jpg">
    <img data-src="//domain.com/img2.jpg">
    <img data-src="//domain.com/img3.jpg">
</div>

注：使用参考vue-lazyload；暂不支持lazy component

Form

e-input 输入框

<e-input v-model="value" label="标题" placeholder="请输入内容"></e-input>

| 属性 | 类型 | 可选 | 默认 | 说明 | | :--- | :--- | :--- | :--- | :--- | | inline | Boolean | \ | false | 是否行内模式 | | label | String | \ | \ | label | | type | String | \ | text | 类型；原生 | | value | String | \ | \ | 值；v-model获取 | | placeholder | String | \ | \ | 提示文案 | | maxlength | String|Number | \ | 15 | 长度 | | disabled | Boolean | \ | false | 是否禁用 | | readonly | Boolean | \ | false | 是否只读 | | error | Boolean | \ | false | 是否异常 | | size | String | medium / small | \ | 输入框尺寸 | | icon | String | \ | \ | 图标，右侧 | | tips | String | \ | \ | 底部提示文案 |

事件

e-password 密码输入框

<e-password v-model="value" label="标题" placeholder="请输入内容"></e-password>

| 属性 | 类型 | 可选 | 默认 | 说明 | | :--- | :--- | :--- | :--- | :--- | | icon | String | \ | \ | 开启状态图标，右侧 | | offIcon | String | \ | \ | 关闭状态图标，右侧 |

注：其他属性值和事件参考e-input

e-checkbox 多选框

<e-checkbox v-model="value" value="选项">选项</e-checkbox>

// 禁用
<e-checkbox v-model="value" value="选项" disabled>选项</e-checkbox>

// 多选
<e-checkbox-group v-model="values">
    <e-checkbox value="选项">选项</e-checkbox>
    <e-checkbox value="选项2">选项2</e-checkbox>
    <e-checkbox value="选项3" disabled>选项3</e-checkbox>
</e-checkbox-group>

// 全选
<e-checkbox-group v-model="values">
    <div class="checkbox-all">
        <e-checkbox-all v-model="all">
            <e-button :type="all ? 'primary' : 'info'" size="mini">全选</e-button>
        </e-checkbox-all>
    </div>

    <e-checkbox value="选项">选项</e-checkbox>
    <e-checkbox value="选项2">选项2</e-checkbox>
    <e-checkbox value="选项3" disabled>选项3</e-checkbox>
</e-checkbox-group>

// 自定义
<e-checkbox v-model="value" :isIcon="false">
    <div class="checkbox-custom" :class="{ 'is-checked': value }">
        <div class="checkbox-icon e-layout-flex-center"><i :class="value ? 'e-icon-eye' : 'e-icon-eye_off'"></i></div>
        <img src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg" width="150" />
    </div>
</e-checkbox>

| 属性 | 类型 | 可选 | 默认 | 说明 | | :--- | :--- | :--- | :--- | :--- | | v-model | String|Number | \ | false | 动态值 | | value | String|Number | \ | \ | 值 | | label | $slots.default | \ | \ | label | | disabled | Boolean | \ | false | 是否禁用 | | isIcon | Boolean | \ | true | 是否使用icon：false后可自定义 |