Skip to content

Commit

Permalink
Merge pull request #267 from ielgnaw/master
Browse files Browse the repository at this point in the history
feat: bump to 2.4.9
  • Loading branch information
ielgnaw authored May 19, 2022
2 parents c176dff + d56fcd9 commit 50b1476
Show file tree
Hide file tree
Showing 33 changed files with 718 additions and 229 deletions.
1 change: 1 addition & 0 deletions bkui-vue2-helper/attributes.json
Original file line number Diff line number Diff line change
Expand Up @@ -431,6 +431,7 @@
"bk-info-box/confirmLoading": { "description": "异步 confirmFn 确定按钮自动开启 loading", "default": "false" },
"bk-info-box/confirmFn": { "description": "确认按钮点击回调函数,支持异步函数,函数返回false可阻止弹窗关闭" },
"bk-info-box/cancelFn": { "description": "取消按钮点击回调函数" },
"bk-info-box/closeFn": { "description": "右上角的关闭 icon 点击回调函数,默认与取消按钮的回调函数一致" },
"bk-info-box/stateChangeFn": { "description": "弹框显示状态变化的回调函数" },
"bk-info-box/afterLeaveFn": { "description": "弹框消失的动画结束后触发的回调函数" },
"bk-link/href": { "description": "文字链接地址" },
Expand Down
1 change: 1 addition & 0 deletions bkui-vue2-helper/tags.json
Original file line number Diff line number Diff line change
Expand Up @@ -253,6 +253,7 @@
"confirmLoading",
"confirmFn",
"cancelFn",
"closeFn",
"stateChangeFn",
"afterLeaveFn"
],
Expand Down
1 change: 1 addition & 0 deletions example/components/big-tree/example.vue
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
<template>
<section>
<bk-big-tree ref="tree"
height="300"
default-expand-all
:show-checkbox="true"
:display-matched-node-descendants="true"
Expand Down
18 changes: 18 additions & 0 deletions example/components/changelog/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,24 @@

<div class="changelog-wrapper">

### 2.4.9 {page=#/changelog}
###### 2022.05.19

* **[add]**:
- [Table 表格](#/table) 翻页事件 `page-change`,返回参数增加`每页条数`
- [Pagination 分页](#/pagination) 支持[跳转分页](#/pagination?anchor=tiao-zhuan-fen-ye)
- [Info 提示框](#/info-box) 新增 `closeFn`,用来单独配置[关闭的回调函数](#/info-box?anchor=guan-bi-icon-hui-diao-zi-ding-yi),默认与 `cancelFn` 一致
- [Tab 选项卡](#/tab) 支持新增按钮前添加[自定义插槽内容](#/tab?anchor=xin-zeng-an-niu-qian-tian-jia-zi-ding-yi-cha-cao-nei-rong)
* **[fix]**:
- [Spin 加载中](#/spin) spin 组件增加 default 类型
- [ResizeLayout 可拉伸布局](#/resize-layout) 修复拖动中设置了 disabled=true 不再触发 handleMouseMove 方法的问题 [#251](https://github.com/TencentBlueKing/bkui-vue2/issues/251)
- [TimePicker 时间选择器](#/time-picker) 修复时间组件支持失焦后生效的问题 [#235](https://github.com/TencentBlueKing/bkui-vue2/issues/235)
- [Loading 加载](#/loading) 修复 loading 指令出现 el.viewmodel.$mount 读取错误的问题 [#258](https://github.com/TencentBlueKing/bkui-vue2/issues/258)
* **[update]**:
- [Select 下拉选框](#/select) 调整下拉框禁用时箭头颜色

---

### 2.4.8 {page=#/changelog}
###### 2022.04.21

Expand Down
3 changes: 1 addition & 2 deletions example/components/date-picker/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -180,8 +180,7 @@
```html
<template>
<div>
<bk-date-picker class="mr15" v-model="initDateTime"
cellClass="null" :placeholder="'选择日期'" :ext-popover-cls="'custom-popover-cls'"></bk-date-picker>
<bk-date-picker class="mr15" v-model="initDateTime" cellClass="null" :placeholder="'选择日期'" :ext-popover-cls="'custom-popover-cls'"></bk-date-picker>
</div>
</template>
<script>
Expand Down
4 changes: 3 additions & 1 deletion example/components/image/example.vue
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@

<template>
<div>
<bk-image style="width: 200px;" :src="previewSrc" :preview-src-list="srcList"></bk-image>
<bk-image :transfer="false" style="width: 200px;" :src="previewSrc" :preview-src-list="srcList"></bk-image>
<bk-image style="width: 400px;" :src="previewSrc" :preview-src-list="srcList"></bk-image>
</div>
</template>

Expand All @@ -40,6 +41,7 @@ export default {
},
data () {
return {
src: './example/static/images/preview/0.png',
previewSrc: './example/static/images/preview/0.png',
srcList: [
'./example/static/images/preview/0.png',
Expand Down
36 changes: 23 additions & 13 deletions example/components/image/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -268,7 +268,9 @@
### 大图预览 {page=#/image}

:::demo 可通过 `previewSrcList` 开启预览大图的功能。

```html

<template>
<div>
<bk-image style="width: 200px;" :src="previewSrc" :preview-src-list="srcList"></bk-image>
Expand All @@ -277,7 +279,11 @@

<script>
import { bkImage } from '{{BASE_LIB_NAME}}'
export default {
components: {
bkImage
},
data () {
return {
previewSrc: './example/static/images/preview/0.png',
Expand All @@ -296,7 +302,6 @@
}
}
</script>

```
:::

Expand Down Expand Up @@ -348,26 +353,28 @@
:::

### image 属性 {page=#/image}
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| src | 图片源,同原生 | String | —— | —— |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------------------------------------------------------------------------------------|---------- |------------- |-------- |
| src | 图片源,同原生 | String | —— | —— |
| fit | 确定图片如何适应容器框,同原生 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | String | fill / contain / cover / none / scale-down | - |
| alt | 原生 alt | String | —— | —— |
| referrer-policy | 原生 referrerPolicy | String | —— | —— |
| lazy | 是否开启懒加载 | Boolean | —— | false |
| scroll-container | 开启懒加载后,监听 scroll 事件的容器 | String / HTMLElement || 最近一个 overflow 值为 auto 或 scroll 的父元素 |
| fallback |加载失败容错地址,会被 Slots error 覆盖 | String | —— | —— |
| preview-src-list | 开启图片预览功能 | Array | —— | —— |
| z-index | 设置图片预览的 z-index | Number | —— | 2000 |
| isShowPreviewTitle |预览图片图片时,是否显示头部信息 | String | —— | —— |
| mask-close |是否允许点击遮罩关闭弹框 | Boolean | —— | true |
| alt | 原生 alt | String | —— | —— |
| referrer-policy | 原生 referrerPolicy | String | —— | —— |
| lazy | 是否开启懒加载 | Boolean | —— | false |
| scroll-container | 开启懒加载后,监听 scroll 事件的容器 | String / HTMLElement || 最近一个 overflow 值为 auto 或 scroll 的父元素 |
| fallback | 加载失败容错地址,会被 Slots error 覆盖 | String | —— | —— |
| preview-src-list | 开启图片预览功能 | Array | —— | —— |
| isShowPreviewTitle | 预览图片图片时,是否显示头部信息 | String | —— | —— |
| mask-close | 是否允许点击遮罩关闭弹框 | Boolean | —— | true |
| transfer | 控制图片预览弹框是否出现在 body 内 | Boolean | true / false | true |
| z-index | 设置图片预览的弹窗 z-index | Number | —— | 2000 |

### image 方法 {page=#/image}
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| load | 图片加载成功触发 | (e: Event) |
| error | 图片加载失败触发 | (e: Error) |


### Slots {page=#/image}
| 名称 | 说明 |
|---------|-------------|
Expand All @@ -382,6 +389,9 @@
| onSwitch |切换图片 | Function | —— | —— |
| onClose | 关闭预览 | Function | —— | —— |
| initialIndex | z-index | Number | —— | 2000 |
| transfer | 控制图片预览弹框是否出现在 body 内 | Boolean | true / false | true |
| z-index | 设置图片预览的弹窗 z-index | Number | —— | 2000 |


### image-viewer 方法 {page=#/image}
| 事件名称 | 说明 | 回调参数 |
Expand Down
73 changes: 73 additions & 0 deletions example/components/info-box/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,32 @@
subTitle: '请稍等…'
})
},
closeFnInfoBox1 () {
this.$bkInfo({
title: '是否保存当前修改?',
okText: '保存',
cancelText: '不保存',
cancelFn () {
console.log(11, 'cancel')
console.log('cancel')
}
})
},
closeFnInfoBox2 () {
this.$bkInfo({
title: '是否保存当前修改?',
okText: '保存',
cancelText: '不保存',
closeFn () {
console.log(22, 'close')
console.log('close')
},
cancelFn () {
console.log(22, 'cancel')
console.log('cancel')
}
})
},
vnodeInfoBox () {
const h = this.$createElement

Expand Down Expand Up @@ -405,6 +431,52 @@
```
:::

### 关闭 icon 回调自定义 {page=#/info-box}

:::demo 分别配置 `closeFn``cancelFn` 参数
```html
<template>
<bk-button theme="primary" @click="closeFnInfoBox1">提示框1</bk-button>
<bk-button theme="primary" @click="closeFnInfoBox2">提示框2</bk-button>
</template>

<script>
import { bkButton } from '{{BASE_LIB_NAME}}'
export default {
components: {
bkButton
},
methods: {
closeFnInfoBox1 () {
this.$bkInfo({
title: '是否保存当前修改?',
okText: '保存',
cancelText: '不保存',
cancelFn () {
console.log('cancle')
}
})
},
closeFnInfoBox2 () {
this.$bkInfo({
title: '是否保存当前修改?',
okText: '保存',
cancelText: '不保存',
closeFn () {
console.log('close')
},
cancelFn () {
console.log('cancle')
}
})
}
}
}
</script>
```
:::

### 控制弹窗出现在哪个容器内 {page=#/info-box}

:::demo 通过配置 `container` 属性,来控制弹窗出现在哪个容器内。`container` 支持 `HTMLElement`, `VNode`, `String`
Expand Down Expand Up @@ -554,5 +626,6 @@
| confirmLoading | 异步 confirmFn 确定按钮自动开启 loading | Boolean | —— | false |
| confirmFn | 确认按钮点击回调函数,支持异步函数,函数返回false可阻止弹窗关闭 | Function | —— | —— |
| cancelFn | 取消按钮点击回调函数 | Function | —— | —— |
| closeFn | 右上角的关闭 icon 点击回调函数,默认与取消按钮的回调函数一致 | Function | —— | —— |
| stateChangeFn | 弹框显示状态变化的回调函数 | Function | —— | —— |
| afterLeaveFn | 弹框消失的动画结束后触发的回调函数 | Function | —— | —— |
36 changes: 36 additions & 0 deletions example/components/pagination/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,41 @@
```
:::

### 跳转分页 {page=#/pagination}

:::demo 配置`showQuickJumper`来快速跳转到某一页

```html
<template>
<bk-pagination
:show-quick-jumper="true"
:current.sync="defaultPaging.current"
:count.sync="defaultPaging.count"
:limit="defaultPaging.limit">
</bk-pagination>
</template>

<script>
import { bkPagination } from '{{BASE_LIB_NAME}}'
export default {
components: {
bkPagination
},
data () {
return {
defaultPaging: {
current: 1,
limit: 10,
count: 300
}
}
}
}
</script>
```
:::

### 紧凑效果 {page=#/pagination}

:::demo 配置 `type` 字段
Expand Down Expand Up @@ -265,6 +300,7 @@
| small | 小型分页 | Boolean | `false` `true` | false |
| show-total-count | 总计 | Boolean | `false` `true` | false |
| popover-options | 透传至翻页下拉列表所在的popover组件的tippyOptions选项 | Object | —— | —— |
| show-quick-jumper | 是否可以快速跳转至某页,紧凑类型无效 | Boolean | `false` `true` | false |
| ext-cls | 配置自定义样式类名,传入的类会被加在组件最外层的 DOM `.bk-page`| String | —— | —— |

### 事件 {page=#/pagination}
Expand Down
66 changes: 66 additions & 0 deletions example/components/resize-layout/example.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<!--
* Tencent is pleased to support the open source community by making
* 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
*
* Copyright (C) 2021 THL A29 Limited, a Tencent company. All rights reserved.
*
* 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
*
* License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
*
*
* Terms of the MIT License:
* ---------------------------------------------------
* Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
* documentation files (the "Software"), to deal in the Software without restriction, including without limitation
* the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
* to permit persons to whom the Software is furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of
* the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
* THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
* CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
-->

<template>
<div>
<p>拖动中设置了disabled=true,不再执行handleMouseMove方法</p>
<bk-resize-layout
style="height: 500px;margin-top: 20px;"
immediate
:min="min"
:disabled="disabled"
@resizing="handleResizing"
@after-resize="() => disabled = false">
<div slot="aside">aside</div>
<div slot="main">main</div>
</bk-resize-layout>
</div>
</template>

<script>
import { bkResizeLayout } from '@'
export default {
name: 'demo',
components: {
bkResizeLayout
},
data () {
return {
disabled: false,
min: 100
}
},
methods: {
handleResizing (height) {
console.log(height)
this.disabled = (height - 3) <= this.min
}
}
}
</script>
4 changes: 2 additions & 2 deletions example/components/spin/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
<div>
<bk-spin></bk-spin>
<bk-spin theme="warning"></bk-spin>
<bk-spin theme="info"></bk-spin>
<bk-spin theme="default"></bk-spin>
</div>
</template>
<script>
Expand Down Expand Up @@ -166,7 +166,7 @@
### 属性 {page=#/spin}
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------|------|------|------|------|
| theme | 加载类型 | String | `primary` `success` `warning` `danger` `info` | `primary` |
| theme | 加载类型 | String | `default` `primary` `success` `warning` `danger` `info` | `primary` |
| size | 尺寸 | String |`large` `normal` `small` `mini`|`small`|
| icon | 自定义的加载图标 | String | 参考[蓝鲸 ICON](#/icon)| —— |
| spinning | 是否为加载中状态 | Boolean | true/false | true |
Expand Down
Loading

0 comments on commit 50b1476

Please sign in to comment.