0.0.9 • Published 3 years ago

battlenet-client-web-package v0.0.9

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

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>

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

e-button 按钮

<e-button>按钮</e-button>
属性类型可选默认说明
sizeStringmedium / small / mini\ 尺寸
typeStringprimary / success / warning / danger / text / link\ 类型
roundBoolean\ false是否圆角按钮
circleBoolean\ false是否圆形按钮
disabledBoolean\ false是否禁用状态
quietBoolean\ false是否静默状态
iconString\ \ 图标类名

Data

e-skeleton 骨架屏

<e-skeleton :rows="6" animated />
属性类型可选默认说明
animatedBoolean\ false是否使用动画
countNumber\ 1渲染多少个 template, 建议使用尽可能小的数字
loadingBoolean\ true是否显示 skeleton 骨架屏
rowsNumber\ 4骨架屏段落数量
throttleNumber\ 0延迟占位 DOM 渲染的时间, 单位是毫秒

e-skeleton-item 骨架屏 item

<e-skeleton-item variant="image" style="width: 240px; height: 240px;" />
属性类型可选默认说明
variantStringp / h1 / h3 / text / caption / button / image / circle / recttext当前显示的占位元素的样式

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>
属性类型可选默认说明
imageString\ \ 图片
image-sizeNumber\ 166图片大小
titleString\ \ 标题
descriptionString\ \ 内容
confirmTextString\ \ 按钮文案

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>
属性类型可选默认说明
modelStringalert / message / noticealert模式
typeStringinfo \ success \ warning \ errorinfo类型
titleString\ \ 标题
message$slots.default\ \ 内容
iconString\ \ 图标
directionString\ center位置:alert、message、notice从上往下开;其他位置样式在多组场景会异常
durationNumber\ 3000显示时间, 毫秒。设为 0 则不会自动关闭
isIconBoolean\ true是否展示图标
isCloseBoolean\ true是否展示关闭按钮
onCloseFunction\ \ 关闭按钮点击回调
onDestroyFunction\ \ 元素销毁回调
fixedBoolean\ true是否固定
offsetNumber\ 20距离顶部偏移量

alert slots 消失提示 slots

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

direction 展示位置

说明
ltr/left从左往右开
rtl/right从右往左开
ttb/up从上往下开
btt/down从下往上开
center中间

事件

事件名称回调参数说明
close关闭按钮点击回调
destroy元素销毁回调

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

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>
属性类型可选默认说明
headerTypeStringimg / textimgheader 类型

e-carousel 走马灯

<e-carousel>
    <e-carousel-item v-for="item in 4" :key="item">
        <h3>{{ item }}</h3>
    </e-carousel-item>
</e-carousel>
属性类型可选默认说明
heightString\ \ 走马灯的高度
initial-indexNumber\ 0初始状态激活的幻灯片的索引,从 0 开始
triggerStringclick\ 指示器的触发方式
autoplayBoolean\ true是否自动切换
durationNumber\ 3000自动切换的时间间隔,单位为毫秒
indicatorBoolean\ true是否显示指示器
indicator-typeStringline \ dot \ sliderline指示器类型
indicator-positionStringoutside / none\ 指示器的位置
arrowStringalways / hover / neverhover切换箭头的显示时机

Carousel 事件

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

e-carousel-item 走马灯 item

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

Carousel Item 事件

事件名称回调参数说明
show幻灯片被激活
hide幻灯片被隐藏

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: () => {}
})
属性类型默认说明
nameString\ 标识;可以为空
titleString\ 标题;可以为空
messageString|Element\ 内容:$drawer调用才有效
directionStringcenter展示位置
sizeString\ 尺寸
isCloseBooleantrue是否展示关闭按钮
isCloseEventBooleantrue关闭触发后销毁VM
isMaskEventBooleantrue是否允许点击蒙层执行关闭效果
onCloseFunction|Boolean\ 关闭回调

direction 展示位置

说明
ltr/left从左往右开
rtl/right从右往左开
ttb/up从上往下开
btt/down从下往上开
center中间

e-modal 模态窗

this.$modal(message, {
    name: 'name',
    title: 'title',
    confirmText: confirmText,
    cancelText: cancelText,
    onConfirm: () => {
        console.log('Confirm')
    },
    onCancel: () => {
        console.log('Cancel')
    },
    size: 'small'
})
属性类型可选默认说明
messageString|Element\ \ 内容
nameString\ \ 标识;可以为空
titleString\ \ 标题;可以为空
confirmTextString\ \ 确认按钮文案;可以为空
cancelTextString\ \ 取消按钮文案;可以为空
onConfirmFunction\ \ 确认按钮点击回调
onCancelFunction\ \ 取消按钮点击回调
sizeStringsmall / mediumsmall尺寸

e-popper 弹出框

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

// 指令方式
<e-button v-popper="'指令 激活 提示文字'">指令 激活</e-button>
属性类型可选默认说明
triggerStringhover / clickhover触发方式
contentString\Object\ \ 显示的内容,可以是VNode
placementStringtop / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-endbottom出现位置
offsetNumber\ 0出现位置的偏移量

popper 指令方式

说明
content文字/对象类型,对象参数同元素形式

注:基于floating-ui开发

e-video 视频

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

<e-video :options="videoOptions" />
属性类型可选默认说明
optionsObject\ \ 参考xgplayer可选配置
urlString\ \ 视频源
langString\ en国际化
controlPluginsArray\ play / time / progress / volume / fullscreen / flex / poster / loading / memoryPlay内置插件,参考xgplayer插件

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

属性说明
play控制条的播放/暂停按钮
time控制条的当前时间/视频时长显示组件
progress播放器进度条和预览图
volume控制条的音量控制组件
fullscreen控制条的全屏切换组件
flex控制条的样式自适应
poster播放器贴图
loading播放器加载提示
memoryPlay记忆播放

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>
属性类型可选默认说明
inlineBoolean\ false是否行内模式
labelString\ \ label
typeString\ text类型;原生
valueString\ \ 值;v-model获取
placeholderString\ \ 提示文案
maxlengthString|Number\ 15长度
disabledBoolean\ false是否禁用
readonlyBoolean\ false是否只读
errorBoolean\ false是否异常
sizeStringmedium / small\ 输入框尺寸
iconString\ \ 图标,右侧
tipsString\ \ 底部提示文案

事件

说明
change值改变时触发
blur失去焦点时触发
focus获取焦点时触发
icon图标点击时触发

e-password 密码输入框

<e-password v-model="value" label="标题" placeholder="请输入内容"></e-password>
属性类型可选默认说明
iconString\ \ 开启状态图标,右侧
offIconString\ \ 关闭状态图标,右侧

注:其他属性值和事件参考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-modelString|Number\ false动态值
valueString|Number\ \
label$slots.default\ \ label
disabledBoolean\ false是否禁用
isIconBoolean\ true是否使用icon:false后可自定义

事件

说明
change值改变时触发

e-checkbox-group 多选框组

<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>
属性类型可选默认说明
v-modelString|Number\ false动态值

事件

说明
change值改变时触发

e-checkbox-all 多选框全选

<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>
属性类型可选默认说明
v-modelString|Number\ false动态值

事件

说明
change值改变时触发

e-radio 单选框

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

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

// 单选框组
<e-radio-group v-model="value">
    <e-radio value="选项">选项</e-radio>
    <e-radio value="选项2">选项2</e-radio>
    <e-radio value="选项3" disabled>选项3</e-radio>
</e-radio-group>

// 自定义
<e-radio v-model="value" value="选项" :isIcon="false">
    <div class="radio-custom" :class="{ 'is-checked': value == '选项' }">
        <div class="radio-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-radio>
<e-radio v-model="value" value="选项2" :isIcon="false">
    <div class="radio-custom" :class="{ 'is-checked': value == '选项2' }">
        <div class="radio-icon e-layout-flex-center"><i :class="value == '选项2' ? 'e-icon-eye' : 'e-icon-eye_off'"></i></div>
        <img src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg" width="150" />
    </div>
</e-radio>
属性类型可选默认说明
v-modelString|Number|Boolean\ false动态值
valueString|Number|Boolean\ \
label$slots.default\ \ label
disabledBoolean\ false是否禁用
isIconBoolean\ true是否使用icon:false后可自定义

事件

说明
change值改变时触发

e-radio-group 单选框组

<e-radio-group v-model="value">
    <e-radio value="选项">选项</e-radio>
    <e-radio value="选项2">选项2</e-radio>
    <e-radio value="选项3" disabled>选项3</e-radio>
</e-radio-group>
属性类型可选默认说明
v-modelString|Number\ false动态值

事件

说明
change值改变时触发

Plugin

e-date-format 日期格式化

<p>{{ time | date-format }}</p>
属性类型可选默认说明
valueNumber\ \ 时间戳
formatStrString\ yyyy-MM-dd HH:mm格式

e-copy 文本复制

this.$copy(text, e => {
    console.log('Copy', e)
})
属性类型可选默认说明
textString\ \ 文本
callbackFunction\ \ 回调