feature: 组件问题修复和优化

example/components/badge/readme.md

@@ -1,16 +1,45 @@
 <script>
-    import { bkBadge, bkButton } from '@'
+    import { bkBadge, bkTable, bkTableColumn, bkButton } from '@'
 
     export default {
         components: {
             bkBadge,
-            bkButton
+            bkButton,
+            bkTable,
+            bkTableColumn
         },
         data () {
             return {
                 customBadge: {
                     visible: true
-                }
+                },
+                badgeStatusMap: {
+                    '完成': 'success',
+                    '进行中': 'primary',
+                    '失败': 'danger',
+                },
+                tableData: [{
+                    date: '2016-05-02',
+                    name: '王小虎虎虎虎',
+                    status: '完成',
+                    order: 2,
+                    address: '上海市普陀区金沙江路 1518 弄',
+                    tag: '家'
+                }, {
+                  date: '2016-05-04',
+                  name: '王小虎',
+                  status: '进行中',
+                  order: 3,
+                  address: '上海市普陀区金沙江路 1517 弄',
+                  tag: '公司'
+                }, {
+                  date: '2016-05-01',
+                  name: '王小虎',
+                  status: '失败',
+                  order: 4,
+                  address: '上海市普陀区金沙江路 1519 弄',
+                  tag: '家'
+                }]
             }
         },
         methods: {
@@ -75,6 +104,86 @@
 ```
 :::
 
+### 可不包裹使用 {page=#/badge}
+
+:::demo 配置参数 `ext-cls` 可在不包裹使用情况下灵活对badge进行定位
+```html
+<template>
+    <bk-table
+    class="my-table"
+    :data="tableData"
+    style="width: 100%"
+    :max-height="400">
+        <bk-table-column prop="name" label="姓名" width="180">
+            <template slot-scope="props">
+                <span style="position: relative">
+                    {{props.row.name}}
+                    <bk-badge theme="danger" :val="props.row.order"></bk-badge>
+                </span>
+            </template>
+        </bk-table-column>
+        <bk-table-column prop="name" label="进度" width="180">
+            <template slot-scope="props">
+                <span style="position: relative">
+                    <bk-badge dot :theme="badgeStatusMap[props.row.status]"></bk-badge>
+                    {{props.row.status}}
+                </span>
+            </template>
+        </bk-table-column>
+        <bk-table-column prop="address" label="地址">
+        </bk-table-column>
+    </bk-table>
+</template>
+<script>
+  import { bkTable, bkTableColumn, bkBadge } from '{{BASE_LIB_NAME}}'
+  export default {
+    components: {
+        bkTable,
+        bkBadge,
+        bkTableColumn,
+        bkPopover
+    },
+    data () {
+        return {
+            badgeStatusMap: {
+                '完成': 'success',
+                '进行中': 'primary',
+                '失败': 'danger',
+            },
+            tableData: [
+                {
+                    date: '2016-05-02',
+                    name: '王小虎',
+                    status: '完成',
+                    order: 2,
+                    address: '上海市普陀区金沙江路 1518 弄',
+                    tag: '家'
+                },
+                {
+                    date: '2016-05-04',
+                    name: '王小虎',
+                    status: '进行中',
+                    order: 3,
+                    address: '上海市普陀区金沙江路 1517 弄',
+                    tag: '公司'
+                },
+                {
+                    date: '2016-05-01',
+                    name: '王小虎',
+                    status: '失败',
+                    order: 4,
+                    address: '上海市普陀区金沙江路 1519 弄',
+                    tag: '家'
+                }
+            ]
+        }
+    }
+  }
+</script>
+
+```
+:::
+
 ### 可自定义最大值 {page=#/badge}
 
 :::demo 配置参数 `val` 的值

example/components/big-tree/readme.md

@@ -88,12 +88,14 @@
 
 ### 基础用法 {page=#/big-tree}
 
-:::demo 同步数据渲染, 通过设置 `show-checkbox` 开启节点勾选功能。
+:::demo 同步数据渲染, 通过设置 `show-checkbox` 开启节点勾选功能，通过设置 `enable-title-tip` 开启节点的tip提示。
 
 ```html
 <template>
     <section>
-        <bk-big-tree ref="tree"
+        <bk-big-tree
+            ref="tree"
+            enable-title-tip
             :show-checkbox="isShowCheckbox"
             :data="data"
             :show-link-line="isShowLinkLine"
@@ -261,7 +263,9 @@
 ```html
 <template>
     <section>
-        <bk-big-tree ref="tree"
+        <bk-big-tree
+            enable-title-tip
+            ref="tree"
             :selectable="true"
             :default-expanded-nodes="['0']"
             :default-selected-node="'0-2'"
@@ -321,7 +325,9 @@
         <div class="mb10">
             <bk-button @click="isShowCheckbox=!isShowCheckbox">是否显示节点复选框</bk-button>
         </div>
-        <bk-big-tree ref="tree"
+        <bk-big-tree
+            enable-title-tip
+            ref="tree"
             :options="{ nameKey: 'name',folderKey: 'folder',idKey: 'identifier' }"
             :show-checkbox="isShowCheckbox"
             :data="tree"
@@ -401,7 +407,9 @@
                 </template>
             </bk-input>
         </div>
-        <bk-big-tree ref="tree3"
+        <bk-big-tree
+            enable-title-tip
+            ref="tree3"
             :show-checkbox="isShowCheckbox"
             :data="data"
             :show-link-line="isShowLinkLine2"
@@ -509,6 +517,7 @@
 | node-height | 单个节点的高度，用于虚拟滚动的数据计算， | Number | —— | `32` |
 | configurable | 仅作为数据展示用时，可将此属性配置为`false`，从而节省渲染开销，但会导致数据失去响应式的能力 | Boolean | —— | `true` |
 | padding | 节点左侧缩进的距离，默认为 16 | Number | —— | 16 |
+| enable-title-tip | 是否开启节点tip提示 | Boolean | —— | false |
 
 ### 事件 {page=#/big-tree}
 | 事件名称 | 说明 | 参数 |

src/components/affix/affix.vue

@@ -124,13 +124,16 @@ export default {
   methods: {
     // 解决设置滚动容器时window滚动Affix对象已固定不随滚的问题
     setTargetLoop () {
+      const rect = this.targetEl.getBoundingClientRect()
       if (this.offsetType === 'top') {
         this.styles = {
-          top: `${this.targetEl.getBoundingClientRect().top + this.offsetTop}px`
+          top: `${rect.top + this.offsetTop}px`,
+          width: `${rect.width}px`
         }
       } else {
         this.styles = {
-          bottom: `${window.innerHeight - this.targetEl.getBoundingClientRect().bottom + this.offsetBottom}px`
+          bottom: `${window.innerHeight - rect.bottom + this.offsetBottom}px`,
+          width: `${rect.width}px`
         }
       }
     },

src/components/big-tree/tree-item.vue

@@ -65,7 +65,7 @@
         :class="['node-icon', props.node.nodeIcon]">
       </i>
     </div>
-    <div class="node-content">
+    <div class="node-content" :title="props.enableTitleTip ? props.node.name : false">
       <slot
         :node="props.node"
         :data="props.node.data">

src/components/big-tree/tree.vue

@@ -43,6 +43,7 @@
     <!-- 非虚拟滚动 -->
     <template v-for="node in nodes" v-else>
       <tree-item
+        :enable-title-tip="enableTitleTip"
         :node="node"
         :ref="node.id"
         :key="node.id">
@@ -175,6 +176,10 @@ export default {
     size: {
       type: String,
       default: 'normal'
+    },
+    enableTitleTip: {
+      type: Boolean,
+      default: false
     }
   },
   data () {

src/components/cascade/cascade.vue

@@ -307,6 +307,10 @@ export default {
   },
   watch: {
     showCascade (val) {
+      if (!val) {
+        // 通知表单组件，可用于实时验证
+	this.dispatch('bk-form-item', 'form-blur')
+      }
       this.$emit('toggle', val)
       this.filterableStatus = this.searchContent !== ''
       if (val) {
@@ -547,6 +551,8 @@ export default {
         const selectedList = this.multiple ? this.multipleSelectedList : this.selectedList
         this.$emit('input', newId)
         this.$emit('change', newId, oldId, JSON.parse(JSON.stringify(selectedList)))
+        // 通知表单组件，可用于实时验证
+        this.dispatch('bk-form-item', 'form-change')
       }
     },
     exposeMultiple (oldId) {

src/components/input/input.vue

@@ -522,6 +522,7 @@ export default {
       }
     },
     handleNumberDelete (event) {
+      this.curValue === '' && (this.curValue = this.max)
       const curNumberValue = Number(this.curValue)
       if (curNumberValue - 1 >= this.min) {
         const curLenAfterDot = (String(curNumberValue) || '').split('.')[1] || ''
@@ -536,6 +537,7 @@ export default {
       }
     },
     handleNumberAdd (event) {
+      this.curValue === '' && (this.curValue = this.min)
       const curNumberValue = Number(this.curValue)
       if (curNumberValue <= this.max - 1) {
         const curLenAfterDot = (String(curNumberValue) || '').split('.')[1] || ''