fix: slider marks class error

antdv-demo

@@ -1 +1 @@
-Subproject commit d76dd882c7b266a479533515b428c90b5630a92a
+Subproject commit fc551d5148a4b72ca5a8c119d3d141ec6190ffd9

components/slider/__tests__/__snapshots__/index.test.js.snap

@@ -1,22 +1,56 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Slider should show tooltip when hovering slider handler 1`] = `
-<div>
+<div id="app" data-v-app=""></div>
-  <div class="ant-tooltip ant-slider-tooltip ant-tooltip-placement-top" style="left: -999px; top: -1003px; transform-origin: 50% 4px;">
+<div id="app" data-v-app="">
+  <div tabindex="-1" class="ant-slider">
+    <div class="ant-slider-rail"></div>
+    <div class="ant-slider-track" style="left: 0%; width: 30%;"></div>
+    <div class="ant-slider-step"></div>
+    <!--teleport start-->
+    <!--teleport end-->
+    <div class="ant-tooltip-open ant-slider-handle" style="left: 30%; transform: translateX(-50%);" role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30" aria-disabled="false"></div>
+    <div class=""></div>
+  </div>
+</div>
+<div style="position: absolute; top: 0px; left: 0px; width: 100%;">
+  <div>
+    <!---->
+    <div class="ant-tooltip  ant-slider-tooltip ant-tooltip-placement-top" style="left: -999px; top: -1003px;">
       <div class="ant-tooltip-content">
-      <div class="ant-tooltip-arrow"></div>
+        <div class="ant-tooltip-arrow">
-      <div role="tooltip" class="ant-tooltip-inner">30</div>
+          <!---->
+        </div>
+        <div class="ant-tooltip-inner" role="tooltip">30</div>
+      </div>
     </div>
   </div>
 </div>
 `;
 
 exports[`Slider should show tooltip when hovering slider handler 2`] = `
-<div>
+<div id="app" data-v-app=""></div>
-  <div class="ant-tooltip ant-slider-tooltip ant-tooltip-placement-top" style="display: none;">
+<div id="app" data-v-app="">
+  <div tabindex="-1" class="ant-slider">
+    <div class="ant-slider-rail"></div>
+    <div class="ant-slider-track" style="left: 0%; width: 30%;"></div>
+    <div class="ant-slider-step"></div>
+    <!--teleport start-->
+    <!--teleport end-->
+    <div class="ant-slider-handle" style="left: 30%; transform: translateX(-50%);" role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30" aria-disabled="false"></div>
+    <div class=""></div>
+  </div>
+</div>
+<div style="position: absolute; top: 0px; left: 0px; width: 100%;">
+  <div>
+    <!---->
+    <div class="ant-tooltip ant-slider-tooltip ant-tooltip-placement-top zoom-down-leave" style="left: -999px; top: -1003px;">
       <div class="ant-tooltip-content">
-      <div class="ant-tooltip-arrow"></div>
+        <div class="ant-tooltip-arrow">
-      <div role="tooltip" class="ant-tooltip-inner">30</div>
+          <!---->
+        </div>
+        <div class="ant-tooltip-inner" role="tooltip">30</div>
+      </div>
     </div>
   </div>
 </div>

components/slider/__tests__/index.test.js

@@ -11,43 +11,17 @@ describe('Slider', () => {
         defaultValue: 30,
       },
       sync: false,
+      attachTo: 'body',
     });
     await asyncExpect(() => {
-      wrapper
+      wrapper.findAll('.ant-slider-handle')[0].trigger('mouseenter');
-        .findAll('.ant-slider-handle')
-        .at(0)
-        .trigger('mouseenter');
-    });
-    let dropdownWrapper = null;
-    await asyncExpect(() => {
-      dropdownWrapper = mount(
-        {
-          render() {
-            return wrapper.find({ name: 'Trigger' }).vm.getComponent();
-          },
-        },
-        { sync: false },
-      );
     });
     await asyncExpect(() => {
-      expect(dropdownWrapper.html()).toMatchSnapshot();
+      expect(document.body.innerHTML).toMatchSnapshot();
-      wrapper
+      wrapper.findAll('.ant-slider-handle')[0].trigger('mouseleave');
-        .findAll('.ant-slider-handle')
-        .at(0)
-        .trigger('mouseleave');
     });
     await asyncExpect(() => {
-      dropdownWrapper = mount(
+      expect(document.body.innerHTML).toMatchSnapshot();
-        {
-          render() {
-            return wrapper.find({ name: 'Trigger' }).vm.getComponent();
-          },
-        },
-        { sync: false },
-      );
-    });
-    await asyncExpect(() => {
-      expect(dropdownWrapper.html()).toMatchSnapshot();
     });
   });
 });

components/vc-slider/src/common/Marks.jsx

@@ -3,7 +3,7 @@ import { isValidElement } from '../../../_util/props-util';
 
 const Marks = (_, { attrs }) => {
   const {
-    className,
+    class: className,
     vertical,
     reverse,
     marks,

examples/App.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import demo from '../antdv-demo/docs/spin/demo/index';
+import demo from '../antdv-demo/docs/slider/demo/index';
 
 export default {
   components: {