docs: update

Author: NightCatSama

src/examples/color.ts

@@ -0,0 +1,94 @@
+export default {
+  example1: `
+<template>
+  <div>
+    <vue-slider
+      v-model="value"
+      class="color-slider"
+      :process="false"
+      :tooltip="'always'"
+    >
+      <template v-slot:dot>
+        <div class="custom-dot" :style="{ borderColor: color }"></div>
+      </template>
+      <template v-slot:tooltip>
+        <div class="custom-tooltip" :style="{ backgroundColor: color }"></div>
+      </template>
+    </vue-slider>
+  </div>
+</template>
+
+<style>
+  .color-slider .vue-slider-rail {
+    background: linear-gradient(to right,
+      rgb(255,0,0),
+      rgb(255,255,0),
+      rgb(0,255,0),
+      rgb(0,255,255),
+      rgb(0,0,255),
+      rgb(255,0,255),
+      rgb(255,0,0)
+    );
+  }
+  .color-slider .custom-dot {
+    width: 100%;
+    color: 100%;
+    background-color: #fff;
+    border: 2px solid #fff;
+  }
+  .color-slider .custom-tooltip {
+    width: 24px;
+    color: 24px;
+    border-radius: 50%;
+  }
+</style>
+
+<script>
+  module.exports = {
+    components: {
+      VueSlider
+    },
+    data: function () {
+      return {
+        value: 0
+      }
+    },
+    computed: {
+      color () {
+        var hue = ((this.value / 100) * 360).toFixed(0)
+        var hex = this.hsl2Hex(hue, 100, 50)
+        return hex
+      }
+    },
+    methods: {
+      hsl2Rgb(h, s, l) {
+        s = s / 100
+        l = l / 100
+        var c, x, m, rgb
+        c = (1 - Math.abs(2 * l - 1)) * s
+        x = c * (1 - Math.abs(((h / 60) % 2) - 1))
+        m = l - c / 2
+        if (h >= 0 && h < 60) rgb = [c, x, 0]
+        if (h >= 60 && h < 120) rgb = [x, c, 0]
+        if (h >= 120 && h < 180) rgb = [0, c, x]
+        if (h >= 180 && h < 240) rgb = [0, x, c]
+        if (h >= 240 && h < 300) rgb = [x, 0, c]
+        if (h >= 300 && h <= 360) rgb = [c, 0, x]
+
+        return rgb.map(function (v) {
+          return 255 * (v + m) | 0
+        })
+      },
+      rgb2Hex(r, g, b) {
+        var rgb = b | (g << 8) | (r << 16)
+        return '#' + (0x1000000 + rgb).toString(16).slice(1)
+      },
+      hsl2Hex(h, s, l) {
+        var rgb = this.hsl2Rgb(h, s, l)
+        return this.rgb2Hex(rgb[0], rgb[1], rgb[2])
+      }
+    }
+  }
+</script>
+  `,
+}

src/examples/components-slots.ts

@@ -2,7 +2,12 @@ export default {
   example1: `
 <template>
   <div>
-    <vue-slider v-model="value" :process-style="{ backgroundColor: 'pink' }">
+    <vue-slider
+      v-model="value"
+      :tooltip="'none'"
+      :process-style="{ backgroundColor: 'pink' }"
+      :tooltip-style="{ backgroundColor: 'pink', borderColor: 'pink' }"
+    >
       <template v-slot:dot="{ value, focus }">
         <div :class="['custom-dot', { focus }]"></div>
       </template>
@@ -38,5 +43,29 @@ export default {
     }
   }
 </script>
-        `,
+  `,
+  example2: `
+<template>
+  <div>
+    <vue-slider v-model="value" :tooltip="'always'">
+    </vue-slider>
+  </div>
+</template>
+
+<style>
+</style>
+
+<script>
+  module.exports = {
+    components: {
+      VueSlider
+    },
+    data: function () {
+      return {
+        value: 0
+      }
+    }
+  }
+</script>
+  `,
 }

src/nav/nav.json

@@ -24,6 +24,11 @@
       "name": "Slots",
       "route": "api/slots",
       "component": "Api/Slots.md"
+    },
+    {
+      "name": "Methods",
+      "route": "api/methods",
+      "component": "Api/Methods.md"
     }
   ],
   "Simple Example": [

src/nav/zh-CN.nav.json

@@ -24,6 +24,11 @@
       "name": "插槽",
       "route": "api/slots",
       "component": "Api/Slots.md"
+    },
+    {
+      "name": "方法",
+      "route": "api/methods",
+      "component": "Api/Methods.md"
     }
   ],
   "基础用例": [
@@ -78,6 +83,11 @@
       "name": "使用插槽",
       "route": "advanced/components-slots",
       "component": "Advanced/ComponentsSlots.md"
+    },
+    {
+      "name": "颜色选择器",
+      "route": "advanced/color",
+      "component": "Advanced/Colors.md"
     }
   ]
 }

src/pages/Api/Methods.md

@@ -0,0 +1,37 @@
+# Methods
+
+### focus([index])
+
+- **Arguments**:
+
+  - `{number} index` Slider index
+
+- **Usage**：
+
+  get focus
+
+  ```html
+  <vue-slider
+    ref="slider"
+    v-model="value"
+    :use-keyboard="true"
+  />
+
+  this.$refs.slider.focus()
+  ```
+
+### blur()
+
+- **Usage**：
+
+  remove focus
+
+  ```html
+  <vue-slider
+    ref="slider"
+    v-model="value"
+    :use-keyboard="true"
+  />
+
+  this.$refs.slider.blur()
+  ```

src/pages/zh-CN/Advanced/Color.md

@@ -0,0 +1,5 @@
+# 颜色选择器
+
+<example :value="example1"></example>
+
+::: example color :::

src/pages/zh-CN/Advanced/ComponentsSlots.md

@@ -8,5 +8,9 @@
 
 <example :value="example1"></example>
 
+### 工具提示插槽
+
+<example :value="example2"></example>
+
 ::: example components-slots :::
 

src/pages/zh-CN/Advanced/SyncSlider.md~HEAD

@@ -0,0 +1,37 @@
+# 方法
+
+### focus([index])
+
+- **参数**：
+
+  - `{number} index` 滑块的索引
+
+- **用法**：
+
+  滑块获取焦点
+
+  ```html
+  <vue-slider
+    ref="slider"
+    v-model="value"
+    :use-keyboard="true"
+  />
+
+  this.$refs.slider.focus()
+  ```
+
+### blur()
+
+- **用法**：
+
+  失去焦点
+
+  ```html
+  <vue-slider
+    ref="slider"
+    v-model="value"
+    :use-keyboard="true"
+  />
+
+  this.$refs.slider.blur()
+  ```

src/pages/zh-CN/Api/Methods.md

@@ -19,6 +19,9 @@
     "paths": {
       "@/*": [
         "src/*"
+      ],
+      "~/*": [
+        "*"
       ]
     },
     "lib": [

tests/unit/example.spec.ts

@@ -40,7 +40,8 @@ module.exports = {
   outputDir: process.env.VUE_APP_BUILD_MODE === 'package' ? 'dist' : 'docs',
   chainWebpack: config => {
     if (process.env.VUE_APP_BUILD_MODE !== 'package') {
-      config.resolve.alias.set('vue$', 'vue/dist/vue.common')
+      config.resolve.alias.set('vue$', 'vue/dist/vue.common').set('~', __dirname)
+
       config.module
         .rule('md')
         .test(/\.md/)