chore: change classname style.

Author: leezng

example/Basic.vue

@@ -34,10 +34,6 @@
           <label>collapsedOnClickBrackets</label>
           <input v-model="collapsedOnClickBrackets" type="checkbox" />
         </div>
-        <div>
-          <label>useNodeValueSlot</label>
-          <input v-model="useNodeValueSlot" type="checkbox" />
-        </div>
         <div>
           <label>deep</label>
           <select v-model="deep">
@@ -46,9 +42,13 @@
             <option :value="4">4</option>
           </select>
         </div>
+      </div>
+
+      <h3>Slots:</h3>
+      <div class="options">
         <div>
-          <label>deepCollapseChildren</label>
-          <input v-model="deepCollapseChildren" type="checkbox" />
+          <label>nodeValue</label>
+          <input v-model="useNodeValueSlot" type="checkbox" />
         </div>
       </div>
     </div>
@@ -57,7 +57,6 @@
       <vue-json-pretty
         :data="data"
         :deep="deep"
-        :deepCollapseChildren="deepCollapseChildren"
         :show-double-quotes="showDoubleQuotes"
         :show-length="showLength"
         :show-line="showLine"
@@ -124,7 +123,6 @@ export default {
       collapsedOnClickBrackets: true,
       useNodeValueSlot: false,
       deep: 3,
-      deepCollapseChildren: false,
       showIcon: false,
     };
   },

src/components/Brackets/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <span class="vjs-tree__brackets" @click.stop="toggleBrackets">{{ data }}</span>
+  <span class="vjs-tree-brackets" @click.stop="toggleBrackets">{{ data }}</span>
 </template>
 
 <script>

src/components/Brackets/styles.less

@@ -1,6 +1,6 @@
 @import '~src/themes.less';
 
-.@{css-prefix}-tree__brackets {
+.@{css-prefix}-tree-brackets {
   cursor: pointer;
   &:hover {
     color: @color-primary;

src/components/Carets/index.vue

@@ -1,7 +1,7 @@
 <template>
   <span
     v-if="isOpen || isClose"
-    :class="`vjs-carets vjs-carets__${isOpen ? 'open' : 'close'}`"
+    :class="`vjs-carets vjs-carets-${isOpen ? 'open' : 'close'}`"
     @click="handleClick"
   >
     <svg

src/components/Carets/styles.less

@@ -14,6 +14,6 @@
   }
 }
 
-.@{css-prefix}-carets__close {
+.@{css-prefix}-carets-close {
   transform: rotate(-90deg);
 }

src/components/CheckController/index.vue

@@ -1,10 +1,10 @@
 <template>
   <!-- click.stop 避免向上冒泡触发 tree.vue 的 click 事件-->
   <label :class="[`vjs-check-controller`, checked ? 'is-checked' : '']" @click.stop>
-    <span :class="`vjs-check-controller__inner is-${uiType}`" />
+    <span :class="`vjs-check-controller-inner is-${uiType}`" />
     <input
       :checked="model"
-      :class="`vjs-check-controller__original is-${uiType}`"
+      :class="`vjs-check-controller-original is-${uiType}`"
       :type="uiType"
       @change="$emit('change', model)"
     />

src/components/CheckController/styles.less

@@ -4,7 +4,7 @@
   position: absolute;
   left: 0;
 
-  &.is-checked .@{css-prefix}-check-controller__inner {
+  &.is-checked .@{css-prefix}-check-controller-inner {
     background-color: @color-primary;
     border-color: darken(@color-primary, 10%);
 
@@ -17,7 +17,7 @@
     }
   }
 
-  .@{css-prefix}-check-controller__inner {
+  .@{css-prefix}-check-controller-inner {
     display: inline-block;
     position: relative;
     border: 1px solid @border-color;
@@ -61,7 +61,7 @@
     }
   }
 
-  .@{css-prefix}-check-controller__original {
+  .@{css-prefix}-check-controller-original {
     opacity: 0;
     outline: none;
     position: absolute;

src/components/Tree/index.vue

@@ -12,11 +12,11 @@
   >
     <div class="vjs-tree-list" :style="virtual && { height: `${height}px` }">
       <div
-        class="vjs-tree-list__holder"
+        class="vjs-tree-list-holder"
         :style="virtual && { height: `${flatData.length * itemHeight}px` }"
       >
         <div
-          class="vjs-tree-list__holder-inner"
+          class="vjs-tree-list-holder-inner"
           :style="virtual && { transform: `translateY(${translateY}px)` }"
         >
           <tree-node

src/components/Tree/styles.less

@@ -8,7 +8,7 @@
   &.is-virtual {
     overflow: auto;
 
-    .@{css-prefix}-tree__node {
+    .@{css-prefix}-tree-node {
       white-space: nowrap;
     }
   }

src/components/TreeNode/index.vue

@@ -1,14 +1,14 @@
 <template>
   <div
     :class="{
-      'vjs-tree__node': true,
+      'vjs-tree-node': true,
       'has-selector': showSelectController,
       'has-carets': showIcon,
       'is-highlight': highlightSelectedNode && checked,
     }"
     @click="handleNodeClick"
   >
-    <span v-if="showLineNumber" class="vjs-node__index">
+    <span v-if="showLineNumber" class="vjs-node-index">
       {{ node.id + 1 }}
     </span>
 
@@ -26,7 +26,7 @@
         v-for="(item, index) in node.level"
         :key="index"
         :class="{
-          'vjs-indent__unit': true,
+          'vjs-indent-unit': true,
           'has-line': showLine,
         }"
       />
@@ -148,7 +148,7 @@ export default {
   },
   computed: {
     valueClass() {
-      return `vjs-value vjs-value__${this.dataType}`;
+      return `vjs-value vjs-value-${this.dataType}`;
     },
 
     dataType() {