@blueking/bkui-knowledge 0.0.1-beta.14 → 0.0.1-beta.15

package/knowledge/examples/vue2/cascade/basic-demo.vue

@@ -0,0 +1,76 @@
+<template>
+  <bk-cascade
+    v-model="value"
+    :list="list"
+    clearable
+    style="width: 250px;"
+    :ext-popover-cls="'custom-cls'"
+    @change="handleChange">
+  </bk-cascade>
+</template>
+<script>
+
+import { bkCascade } from '@'
+
+export default {
+  components: {
+    bkCascade
+  },
+  data (s) {
+    return {
+      value: [],
+      list: [
+        {
+          id: 'hunan',
+          name: '湖南',
+          children: [
+            {
+              id: 'changsha',
+              name: '长沙'
+            },
+            {
+              id: 'yueyang',
+              name: '岳阳'
+            }
+          ]
+        }, {
+          id: 'guangxi',
+          name: '广西'
+        }, {
+          id: 'yunnan',
+          name: '云南',
+          children: [
+            {
+              id: 'kunming',
+              name: '昆明',
+              children: [
+                {
+                  id: 'wuhuaqu',
+                  name: '五华区'
+                },
+                {
+                  id: 'guanduqu',
+                  name: '官渡区'
+                },
+                {
+                  id: 'xishanqu',
+                  name: '西山区'
+                }
+              ]
+            },
+            {
+              id: 0,
+              name: '大理'
+            },
+            {
+              id: '',
+              name: '玉溪'
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/cascade/change-on-select-demo.vue

@@ -0,0 +1,71 @@
+<template>
+  <bk-cascade
+    v-model="checkAnyValue"
+    :list="list"
+    :check-any-level="checkAnyLevel"
+    style="width: 250px;">
+  </bk-cascade>
+</template>
+<script>
+
+import { bkCascade } from '@'
+
+export default {
+  components: {
+    bkCascade
+  },
+  data (s) {
+    return {
+      checkAnyValue: ['yunnan', 'kunming'],
+      checkAnyLevel: true,
+      list: [
+        {
+          id: 'hunan',
+          name: '湖南',
+          children: [
+            {
+              id: 'changsha',
+              name: '长沙'
+            },
+            {
+              id: 'yueyang',
+              name: '岳阳'
+            }
+          ]
+        }, {
+          id: 'guangxi',
+          name: '广西'
+        }, {
+          id: 'yunnan',
+          name: '云南',
+          children: [
+            {
+              id: 'kunming',
+              name: '昆明',
+              children: [
+                {
+                  id: 'wuhuaqu',
+                  name: '五华区'
+                },
+                {
+                  id: 'guanduqu',
+                  name: '官渡区'
+                },
+                {
+                  id: 'xishanqu',
+                  name: '西山区'
+                }
+              ]
+            },
+            {
+              id: 'dali',
+              name: '大理'
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/cascade/custom-node-demo.vue

@@ -0,0 +1,81 @@
+<template>
+  <bk-cascade
+    v-model="slotvalue"
+    :list="disabledList"
+    style="width: 250px;">
+    <template slot="option" slot-scope="{ node }">
+      <span v-bk-tooltips="node.name">
+        <i class="round mr5" v-if="node.children"></i>{{ node.name }} / {{node.id}}</span>
+    </template>
+    <template slot="prepend" slot-scope="{ node }">
+      <span v-if="node.children" class="bk-slot-item">{{ node.children.length }}</span>
+    </template>
+  </bk-cascade>
+</template>
+<script>
+
+import { bkCascade } from '@'
+
+export default {
+  components: {
+    bkCascade
+  },
+  data (s) {
+    return {
+      slotvalue: [],
+      disabledList: [{
+        id: 'hunan',
+        name: '湖南',
+        children: [
+          {
+            id: 'changsha',
+            disabled: true,
+            name: '长沙'
+          },
+          {
+            id: 'yueyang',
+            name: '岳阳'
+          }
+        ]
+      }, {
+        id: 'guangxi',
+        name: '广西',
+        disabled: true
+      }, {
+        id: 'yunnan',
+        name: '云南',
+        children: [
+          {
+            id: 'kunming',
+            name: '昆明',
+            children: [
+              {
+                id: 'wuhuaqu',
+                disabled: true,
+                name: '五华区'
+              },
+              {
+                id: 'guanduqu',
+                name: '官渡区'
+              },
+              {
+                id: 'xishanqu',
+                name: '西山区'
+              }
+            ]
+          },
+          {
+            id: 0,
+            name: '大理'
+          },
+          {
+            id: '',
+            name: '玉溪'
+          }
+        ]
+      }]
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/cascade/custom-trigger-demo.vue

@@ -0,0 +1,80 @@
+<template>
+  <bk-cascade
+    v-model="value"
+    :list="list"
+    clearable
+    style="width: 250px;"
+    :ext-popover-cls="'custom-cls'"
+    @change="handleChange">
+    <template #trigger="{ selected, isShow }">
+      <p>选中项: {{selected}}</p>
+      <p>下拉面板是否展示: {{isShow}}</p>
+    </template>
+  </bk-cascade>
+</template>
+<script>
+
+import { bkCascade } from '@'
+
+export default {
+  components: {
+    bkCascade
+  },
+  data (s) {
+    return {
+      value: [],
+      list: [
+        {
+          id: 'hunan',
+          name: '湖南',
+          children: [
+            {
+              id: 'changsha',
+              name: '长沙'
+            },
+            {
+              id: 'yueyang',
+              name: '岳阳'
+            }
+          ]
+        }, {
+          id: 'guangxi',
+          name: '广西'
+        }, {
+          id: 'yunnan',
+          name: '云南',
+          children: [
+            {
+              id: 'kunming',
+              name: '昆明',
+              children: [
+                {
+                  id: 'wuhuaqu',
+                  name: '五华区'
+                },
+                {
+                  id: 'guanduqu',
+                  name: '官渡区'
+                },
+                {
+                  id: 'xishanqu',
+                  name: '西山区'
+                }
+              ]
+            },
+            {
+              id: 0,
+              name: '大理'
+            },
+            {
+              id: '',
+              name: '玉溪'
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/cascade/disabled-demo.vue

@@ -0,0 +1,77 @@
+<template>
+  <bk-cascade
+    v-model="value"
+    :list="disabledList"
+    class="mb20"
+    style="width: 250px;">
+  </bk-cascade>
+  <bk-cascade
+    v-model="value"
+    :list="disabledList"
+    disabled
+    style="width: 250px;">
+  </bk-cascade>
+</template>
+<script>
+
+import { bkCascade } from '@'
+
+export default {
+  components: {
+    bkCascade
+  },
+  data (s) {
+    return {
+      value: [],
+      disabledList: [{
+        id: 'hunan',
+        name: '湖南',
+        children: [
+          {
+            id: 'changsha',
+            disabled: true,
+            name: '长沙'
+          },
+          {
+            id: 'yueyang',
+            name: '岳阳'
+          }
+        ]
+      }, {
+        id: 'guangxi',
+        name: '广西',
+        disabled: true
+      }, {
+        id: 'yunnan',
+        name: '云南',
+        children: [
+          {
+            id: 'kunming',
+            name: '昆明',
+            children: [
+              {
+                id: 'wuhuaqu',
+                disabled: true,
+                name: '五华区'
+              },
+              {
+                id: 'guanduqu',
+                name: '官渡区'
+              },
+              {
+                id: 'xishanqu',
+                name: '西山区'
+              }
+            ]
+          },
+          {
+            id: 0,
+            name: '大理'
+          }
+        ]
+      }]
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/cascade/dynamic-load-demo.vue

@@ -0,0 +1,64 @@
+<template>
+  <bk-cascade
+    v-model="value"
+    :multiple="true"
+    :list="remoteList"
+    :is-remote="isRemote"
+    :remote-method="remoteMethod"
+    style="width: 250px;">
+  </bk-cascade>
+</template>
+<script>
+
+import { bkCascade } from '@'
+
+export default {
+  components: {
+    bkCascade
+  },
+  data (s) {
+    return {
+      value: [],
+      isRemote: true,
+      remoteList: [{
+        id: 'hunan',
+        name: '湖南'
+      }, {
+        id: 'guangxi',
+        name: '广西',
+        disabled: true
+      }, {
+        id: 'yunnan',
+        name: '云南'
+      }]
+    }
+  },
+  methods: {
+    remoteMethod (item, resolve) {
+      if (item.isLoading === false) {
+        resolve(item)
+      } else {
+        this.$set(item, 'isLoading', true)
+        setTimeout(() => {
+          const res = {}
+          res.data = []
+          for (let i = 1; i <= 3; i++) {
+            this.id += i
+            res.data.push({
+              id: this.id,
+              name: '选项' + this.id
+            })
+          }
+          if (this.id > 20) {
+            res.data = []
+          }
+          item.children = res.data
+          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
+          resolve(item)
+        }, 1000)
+      }
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/cascade/extension-demo.vue

@@ -0,0 +1,88 @@
+<template>
+  <bk-cascade
+    v-model="value"
+    :list="list"
+    clearable
+    style="width: 250px;"
+    :ext-popover-cls="'custom-cls'"
+    @change="handleChange">
+    <div slot="extension" @click="addCity">
+      新增城市
+    </div>
+  </bk-cascade>
+</template>
+<script>
+
+import { bkCascade } from '@'
+
+export default {
+  components: {
+    bkCascade
+  },
+  data () {
+    return {
+      value: [],
+      list: [
+        {
+          id: 'hunan',
+          name: '湖南',
+          children: [
+            {
+              id: 'changsha',
+              name: '长沙'
+            },
+            {
+              id: 'yueyang',
+              name: '岳阳'
+            }
+          ]
+        }, {
+          id: 'guangxi',
+          name: '广西'
+        }, {
+          id: 'yunnan',
+          name: '云南',
+          children: [
+            {
+              id: 'kunming',
+              name: '昆明',
+              children: [
+                {
+                  id: 'wuhuaqu',
+                  name: '五华区'
+                },
+                {
+                  id: 'guanduqu',
+                  name: '官渡区'
+                },
+                {
+                  id: 'xishanqu',
+                  name: '西山区'
+                }
+              ]
+            },
+            {
+              id: 0,
+              name: '大理'
+            },
+            {
+              id: '',
+              name: '玉溪'
+            }
+          ]
+        }
+      ]
+    }
+  },
+  methods: {
+    addCity () {
+      const id = Math.floor(Math.random() * 100)
+      this.list.push({
+        id: id,
+        name: 'City' + id
+      })
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/cascade/max-width-demo.vue

@@ -0,0 +1,76 @@
+<template>
+  <bk-cascade
+    v-model="value"
+    :list="list"
+    clearable
+    style="width: 250px;"
+    :max-width="500"
+    :ext-popover-cls="'custom-cls'">
+  </bk-cascade>
+</template>
+<script>
+
+import { bkCascade } from '@'
+
+export default {
+  components: {
+    bkCascade
+  },
+  data (s) {
+    return {
+      value: [],
+      list: [
+        {
+          id: 'hunan',
+          name: '湖南',
+          children: [
+            {
+              id: 'changsha',
+              name: '长沙'
+            },
+            {
+              id: 'yueyang',
+              name: '岳阳'
+            }
+          ]
+        }, {
+          id: 'guangxi',
+          name: '广西'
+        }, {
+          id: 'yunnan',
+          name: '云南',
+          children: [
+            {
+              id: 'kunming',
+              name: '昆明',
+              children: [
+                {
+                  id: 'wuhuaqu',
+                  name: '五华区'
+                },
+                {
+                  id: 'guanduqu',
+                  name: '官渡区'
+                },
+                {
+                  id: 'xishanqu',
+                  name: '西山区'
+                }
+              ]
+            },
+            {
+              id: 0,
+              name: '大理'
+            },
+            {
+              id: '',
+              name: '玉溪'
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/cascade/multiple-demo.vue

@@ -0,0 +1,84 @@
+<template>
+  <bk-cascade
+    v-model="multipleValue"
+    multiple
+    :list="list"
+    class="mb20"
+    filterable
+    clearable
+    style="width: 250px;"
+    @change="handleChange"
+    @clear="handleClear">
+  </bk-cascade>
+  <bk-cascade
+    v-model="multipleValue"
+    multiple
+    :limit-one-line="true"
+    clearable
+    :list="list"
+    :check-any-level="checkAnyLevel"
+    style="width: 250px;">
+  </bk-cascade>
+</template>
+<script>
+
+import { bkCascade } from '@'
+
+export default {
+  components: {
+    bkCascade
+  },
+  data (s) {
+    return {
+      multipleValue: [['yunnan', 'kunming', 'guanduqu'], ['yunnan', 'dali']],
+      list: [
+        {
+          id: 'hunan',
+          name: '湖南',
+          children: [
+            {
+              id: 'changsha',
+              name: '长沙'
+            },
+            {
+              id: 'yueyang',
+              name: '岳阳'
+            }
+          ]
+        }, {
+          id: 'guangxi',
+          name: '广西'
+        }, {
+          id: 'yunnan',
+          name: '云南',
+          children: [
+            {
+              id: 'kunming',
+              name: '昆明',
+              children: [
+                {
+                  id: 'wuhuaqu',
+                  name: '五华区'
+                },
+                {
+                  id: 'guanduqu',
+                  name: '官渡区'
+                },
+                {
+                  id: 'xishanqu',
+                  name: '西山区'
+                }
+              ]
+            },
+            {
+              id: 'dali',
+              name: '大理'
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
+
+</script>