github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
ant-design-vue/4d3a8cbc.async.js

1 line
76 KiB
JavaScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{1238:function(s,a,t){},1239:function(s,a,t){},1240:function(s,a,t){},1241:function(s,a,t){},1242:function(s,a,t){},1243:function(s,a,t){},1334:function(s,a,t){"use strict";var n=t(1238);t.n(n).a},1335:function(s,a,t){"use strict";var n=t(1239);t.n(n).a},1336:function(s,a,t){"use strict";var n=t(1240);t.n(n).a},1337:function(s,a,t){"use strict";var n=t(1241);t.n(n).a},1338:function(s,a,t){"use strict";var n=t(1242);t.n(n).a},1339:function(s,a,t){"use strict";var n=t(1243);t.n(n).a},1434:function(s,a,t){"use strict";t.r(a);var n=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-slider id="test" :defaultValue="30" :disabled="disabled"/>\n <a-slider range="" :defaultValue="[20, 50]" :disabled="disabled"/>\n Disabled: <a-switch size="small" :checked="disabled" @change="handleDisabledChange"/>\n </div>\n',script:"\n export default {\n data() {\n return {\n disabled: false,\n };\n },\n methods: {\n handleDisabledChange(disabled) {\n this.disabled = disabled;\n },\n },\n };\n",style:null,us:"\n#### Basic\nBasic slider. When `range` is `true`, display as dual thumb mode. When `disable` is `true`, the slider will not be interactable.\n",cn:"\n#### 基本\n基本滑动条。当 `range` 为 `true` 时，渲染为双滑块。当 `disabled` 为 `true` 时，滑块处于不可用状态。\n",sourceCode:'<template>\n <div>\n <a-slider id="test" :defaultValue="30" :disabled="disabled" />\n <a-slider range :defaultValue="[20, 50]" :disabled="disabled" />\n Disabled: <a-switch size="small" :checked="disabled" @change="handleDisabledChange" />\n </div>\n</template>\n<script>\n export default {\n data() {\n return {\n disabled: false,\n };\n },\n methods: {\n handleDisabledChange(disabled) {\n this.disabled = disabled;\n },\n },\n };\n<\/script>\n<style scoped>\n .code-box-demo .ant-slider {\n margin-bottom: 16px;\n }\n</style>\n'}}},[t("template",{slot:"component"},[t("div",[t("a-slider",{attrs:{id:"test",defaultValue:30,disabled:s.disabled}}),s._v(" "),t("a-slider",{attrs:{range:"",defaultValue:[20,50],disabled:s.disabled}}),s._v("\n Disabled: "),t("a-switch",{attrs:{size:"small",checked:s.disabled},on:{change:s.handleDisabledChange}})],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"基本"}},[s._v("基本 "),t("a",{staticClass:"anchor",attrs:{href:"#基本"}},[s._v("#")])]),s._v(" "),t("p",[s._v("基本滑动条。当 "),t("code",[s._v("range")]),s._v(" 为 "),t("code",[s._v("true")]),s._v(" 时，渲染为双滑块。当 "),t("code",[s._v("disabled")]),s._v(" 为 "),t("code",[s._v("true")]),s._v(" 时，滑块处于不可用状态。")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Basic"}},[s._v("Basic "),t("a",{staticClass:"anchor",attrs:{href:"#Basic"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Basic slider. When "),t("code",[s._v("range")]),s._v(" is "),t("code",[s._v("true")]),s._v(", display as dual thumb mode. When "),t("code",[s._v("disable")]),s._v(" is "),t("code",[s._v("true")]),s._v(", the slider will not be interactable.")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-slider")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"test"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultValue")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"30"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"disabled"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-slider")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("range")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultValue")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"[20, 50]"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"disabled"')]),s._v(" />")]),s._v("\n Disabled: "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-switch")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":checked")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"disabled"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"handleDisabledChange"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),t("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n };\n },\n "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleDisabledChange(disabled) {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".disabled = disabled;\n },\n },\n };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("scoped")]),s._v(">")]),t("span",{staticClass:"css"},[s._v("\n "),t("span",{staticClass:"hljs-selector-class"},[s._v(".code-box-demo")]),s._v(" "),t("span",{staticClass:"hljs-selector-class"},[s._v(".ant-slider")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("16px")]),s._v(";\n }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])],2)]],2)};n._withStripped=!0;var l={data:function(){return{disabled:!1}},methods:{handleDisabledChange:function(s){this.disabled=s}}},e=(t(1334),t(31)),v=Object(e.a)(l,n,[],!1,null,"295b2010",null);v.options.__file="components/slider/demo/basic.md";var i=v.exports,_=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-row>\n <a-col :span="12">\n <a-slider :min="1" :max="20" v-model="inputValue1"/>\n </a-col>\n <a-col :span="4">\n <a-input-number :min="1" :max="20" style="marginLeft: 16px" v-model="inputValue1"/>\n </a-col>\n </a-row>\n <a-row>\n <a-col :span="12">\n <a-slider :min="0" :max="1" v-model="inputValue" :step="0.01"/>\n </a-col>\n <a-col :span="4">\n <a-input-number :min="0" :max="1" :step="0.01" style="marginLeft: 16px" v-model="inputValue"/>\n </a-col>\n </a-row>\n </div>\n',script:"\n export default {\n data() {\n return {\n inputValue: 0,\n inputValue1: 1,\n };\n },\n };\n",style:null,us:"\n#### Slider with InputNumber\nSynchronize with [InputNumber](/components/input-number/) component.\n",cn:"\n#### 带输入框的滑块\n和 [数字输入框](/components/input-number-cn/) 组件保持同步。\n",sourceCode:'<template>\n <div>\n <a-row>\n <a-col :span="12">\n <a-slider :min="1" :max="20" v-model="inputValue1" />\n </a-col>\n <a-col :span="4">\n <a-input-number :min="1" :max="20" style="marginLeft: 16px" v-model="inputValue1" />\n </a-col>\n </a-row>\n <a-row>\n <a-col :span="12">\n <a-slider :min="0" :max="1" v-model="inputValue" :step="0.01" />\n </a-col>\n <a-col :span="4">\n <a-input-number\n :min="0"\n :max="1"\n :step="0.01"\n style="marginLeft: 16px"\n v-model="inputValue"\n />\n </a-col>\n </a-row>\n </div>\n</template>\n<script>\n export default {\n data() {\n return {\n inputValue: 0,\n inputValue1: 1,\n };\n },\n };\n<\/script>\n<style scoped>\n .code-box-demo .ant-slider {\n margin-bottom: 16px;\n }\n</style>\n'}}},[t("template",{slot:"component"},[t("div",[t("a-row",[t("a-col",{attrs:{span:12}},[t("a-slider",{attrs:{min:1,max:20},model:{value:s.inputValue1,callback:function(a){s.inputValue1=a},expression:"inputValue1"}})],1),s._v(" "),t("a-col",{attrs:{span:4}},[t("a-input-number",{staticStyle:{marginLeft:"16px"},attrs:{min:1,max:20},model:{value:s.inputValue1,callback:function(a){s.inputValue1=a},expression:"inputValue1"}})],1)],1),s._v(" "),t("a-row",[t("a-col",{attrs:{span:12}},[t("a-slider",{attrs:{min:0,max:1,step:.01},model:{value:s.inputValue,callback:function(a){s.inputValue=a},expression:"inputValue"}})],1),s._v(" "),t("a-col",{attrs:{span:4}},[t("a-input-number",{staticStyle:{marginLeft:"16px"},attrs:{min:0,max:1,step:.01},model:{value:s.inputValue,callback:function(a){s.inputValue=a},expression:"inputValue"}})],1)],1)],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"带输入框的滑块"}},[s._v("带输入框的滑块 "),t("a",{staticClass:"anchor",attrs:{href:"#带输入框的滑块"}},[s._v("#")])]),s._v(" "),t("p",[s._v("和 "),t("a",{attrs:{href:"/components/input-number-cn/"}},[s._v("数字输入框")]),s._v(" 组件保持同步。")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Slider-with-InputNumber"}},[s._v("Slider with InputNumber "),t("a",{staticClass:"anchor",attrs:{href:"#Slider-with-InputNumber"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Synchronize with "),t("a",{attrs:{href:"/components/input-number/"}},[s._v("InputNumber")]),s._v(" component.")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-slider")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"inputValue1"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-input-number")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"marginLeft: 16px"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"inputValue1"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-slider")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"inputValue"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"0.01"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-input-number")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"0.01"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"marginLeft: 16px"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"inputValue"')]),s._v("\n />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),t("span",{staticClass:"hljs-attr"},[s._v("inputValue")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("inputValue1")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n };\n },\n };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("scoped")]),s._v(">")]),t("span",{staticClass:"css"},[s._v("\n "),t("span",{staticClass:"hljs-selector-class"},[s._v(".code-box-demo")]),s._v(" "),t("span",{staticClass:"hljs-selector-class"},[s._v(".ant-slider")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("16px")]),s._v(";\n }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])],2)]],2)};_._withStripped=!0;var r={data:function(){return{inputValue:0,inputValue1:1}}},c=(t(1335),Object(e.a)(r,_,[],!1,null,"7338cc58",null));c.options.__file="components/slider/demo/input-number.md";var o=c.exports,p=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <div class="icon-wrapper">\n <a-icon :style="{color: preColor}" type="frown-o"/>\n <a-slider :min="0" :max="20" @change="handleChange" :value="value"/>\n <a-slider :min="0" :max="20" v-model="value"/>\n <a-icon :style="{color: nextColor}" type="smile-o"/>\n </div>\n',script:"\n export default {\n data() {\n return {\n value: 0,\n min: 0,\n max: 20,\n };\n },\n methods: {\n handleChange(value) {\n this.value = value;\n },\n },\n computed: {\n preColor() {\n const { max, min, value } = this;\n const mid = ((max - min) / 2).toFixed(5);\n return value >= mid ? '' : 'rgba(0, 0, 0, .45)';\n const nextColor = value >= mid ? 'rgba(0, 0, 0, .45)' : '';\n },\n nextColor() {\n const { max, min, value } = this;\n const mid = ((max - min) / 2).toFixed(5);\n return value >= mid ? 'rgba(0, 0, 0, .45)' : '';\n },\n },\n };\n",style:null,us:"\n#### Slider with icon\nYou can add an icon beside the slider to make it meaningful.\n",cn:"\n#### 带 icon 的滑块\n滑块左右可以设置图标来表达业务含义。\n",sourceCode:'<template>\n <div class="icon-wrapper">\n <a-icon :style="{color: preColor}" type="frown-o" />\n <a-slider :min="0" :max="20" @change="handleChange" :value="value" />\n <a-slider :min="0" :max="20" v-model="value" />\n <a-icon :style="{color: nextColor}" type="smile-o" />\n </div>\n</template>\n<script>\n export default {\n data() {\n return {\n value: 0,\n min: 0,\n max: 20,\n };\n },\n methods: {\n handleChange(value) {\n this.value = value;\n },\n },\n computed: {\n preColor() {\n const { max, min, value } = this;\n const mid = ((max - min) / 2).toFixed(5);\n return value >= mid ? \'\' : \'rgba(0, 0, 0, .45)\';\n const nextColor = value >= mid ? \'rgba(0, 0, 0, .45)\' : \'\';\n },\n nextColor() {\n const { max, min, value } = this;\n const mid = ((max - min) / 2).toFixed(5);\n return value >= mid ? \'rgba(0, 0, 0, .45)\' : \'\';\n },\n },\n };\n<\/script>\n<style scoped>\n .icon-wrapper {\n position: relative;\n padding: 0px 30px;\n }\n\n .icon-wrapper .anticon {\n position: absolute;\n top: -2px;\n width: 16px;\n height: 16px;\n line-height: 1;\n font-size: 16px;\n color: rgba(0, 0, 0, 0.25);\n }\n\n .icon-wrapper .anticon:first-child {\n left: 0;\n }\n\n .icon-wrapper .anticon:last-child {\n right: 0;\n }\n</style>\n'}}},[t("template",{slot:"component"},[t("div",{staticClass:"icon-wrapper"},[t("a-icon",{style:{color:s.preColor},attrs:{type:"frown-o"}}),s._v(" "),t("a-slider",{attrs:{min:0,max:20,value:s.value},on:{change:s.handleChange}}),s._v(" "),t("a-slider",{attrs:{min:0,max:20},model:{value:s.value,callback:function(a){s.value=a},expression:"value"}}),s._v(" "),t("a-icon",{style:{color:s.nextColor},attrs:{type:"smile-o"}})],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"带-icon-的滑块"}},[s._v("带 icon 的滑块 "),t("a",{staticClass:"anchor",attrs:{href:"#带-icon-的滑块"}},[s._v("#")])]),s._v(" "),t("p",[s._v("滑块左右可以设置图标来表达业务含义。")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Slider-with-icon"}},[s._v("Slider with icon "),t("a",{staticClass:"anchor",attrs:{href:"#Slider-with-icon"}},[s._v("#")])]),s._v(" "),t("p",[s._v("You can add an icon beside the slider to make it meaningful.")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"icon-wrapper"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"{color: preColor}"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"frown-o"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-slider")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-slider")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"{color: nextColor}"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"smile-o"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("min")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("max")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("20")]),s._v(",\n };\n },\n "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleChange(value) {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".value = value;\n },\n },\n "),t("span",{staticClass:"hljs-attr"},[s._v("computed")]),s._v(": {\n preColor() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" { max, min, value } = "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(";\n "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" mid = ((max - min) / "),t("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(").toFixed("),t("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(");\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" value >= mid ? "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(" : "),t("span",{staticClass:"hljs-string"},[s._v("'rgba(0, 0, 0, .45)'")]),s._v(";\n "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" nextColor = value >= mid ? "),t("span",{staticClass:"hljs-string"},[s._v("'rgba(0, 0, 0, .45)'")]),s._v(" : "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n },\n nextColor() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" { max, min, value } = "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(";\n "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" mid = ((max - min) / "),t("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(").toFixed("),t("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(");\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" value >= mid ? "),t("span",{staticClass:"hljs-string"},[s._v("'rgba(0, 0, 0, .45)'")]),s._v(" : "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n },\n },\n };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("scoped")]),s._v(">")]),t("span",{staticClass:"css"},[s._v("\n "),t("span",{staticClass:"hljs-selector-class"},[s._v(".icon-wrapper")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("position")]),s._v(": relative;\n "),t("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("0px")]),s._v(" "),t("span",{staticClass:"hljs-number"},[s._v("30px")]),s._v(";\n }\n\n "),t("span",{staticClass:"hljs-selector-class"},[s._v(".icon-wrapper")]),s._v(" "),t("span",{staticClass:"hljs-selector-class"},[s._v(".anticon")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("position")]),s._v(": absolute;\n "),t("span",{staticClass:"hljs-attribute"},[s._v("top")]),s._v(": -"),t("span",{staticClass:"hljs-number"},[s._v("2px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("16px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("16px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("16px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),t("span",{staticClass:"hljs-built_in"},[s._v("rgba")]),s._v("(0, 0, 0, 0.25);\n }\n\n "),t("span",{staticClass:"hljs-selector-class"},[s._v(".icon-wrapper")]),s._v(" "),t("span",{staticClass:"hljs-selector-class"},[s._v(".anticon")]),t("span",{staticClass:"hljs-selector-pseudo"},[s._v(":first-child")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("left")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n\n "),t("span",{staticClass:"hljs-selector-class"},[s._v(".icon-wrapper")]),s._v(" "),t("span",{staticClass:"hljs-selector-class"},[s._v(".anticon")]),t("span",{staticClass:"hljs-selector-pseudo"},[s._v(":last-child")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("right")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])],2)]],2)};p._withStripped=!0;var d={data:function(){return{value:0,min:0,max:20}},methods:{handleChange:function(s){this.value=s}},computed:{preColor:function(){var s=this.max,a=this.min,t=this.value,n=((s-a)/2).toFixed(5);return t>=n?"":"rgba(0, 0, 0, .45)"},nextColor:function(){var s=this.max,a=this.min;return this.value>=((s-a)/2).toFixed(5)?"rgba(0, 0, 0, .45)":""}}},h=(t(1336),Object(e.a)(d,p,[],!1,null,"4c4e8951",null));h.options.__file="components/slider/demo/icon-slider.md";var u=h.exports,m=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-slider :tipFormatter="formatter"/>\n <a-slider :tipFormatter="null"/>\n </div>\n',script:"\n export default {\n data() {\n return {\n disabled: false,\n };\n },\n methods: {\n formatter(value) {\n return `${value}%`;\n },\n },\n };\n",style:null,us:"\n#### Customize tooltip\nUse `tipFormatter` to format content of `Toolip`. If `tipFormatter` is null, hide it.\n",cn:"\n#### 自定义提示\n使用 `tipFormatter` 可以格式化 `Tooltip` 的内容，设置 `tipFormatter={null}`，则隐藏 `Tooltip`。\n",sourceCode:'<template>\n <div>\n <a-slider :tipFormatter="formatter" />\n <a-slider :tipFormatter="null" />\n </div>\n</template>\n<script>\n export default {\n data() {\n return {\n disabled: false,\n };\n },\n methods: {\n formatter(value) {\n return `${value}%`;\n },\n },\n };\n<\/script>\n'}}},[t("template",{slot:"component"},[t("div",[t("a-slider",{attrs:{tipFormatter:s.formatter}}),s._v(" "),t("a-slider",{attrs:{tipFormatter:null}})],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"自定义提示"}},[s._v("自定义提示 "),t("a",{staticClass:"anchor",attrs:{href:"#自定义提示"}},[s._v("#")])]),s._v(" "),t("p",[s._v("使用 "),t("code",[s._v("tipFormatter")]),s._v(" 可以格式化 "),t("code",[s._v("Tooltip")]),s._v(" 的内容，设置 "),t("code",[s._v("tipFormatter={null}")]),s._v("，则隐藏 "),t("code",[s._v("Tooltip")]),s._v("。")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Customize-tooltip"}},[s._v("Customize tooltip "),t("a",{staticClass:"anchor",attrs:{href:"#Customize-tooltip"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Use "),t("code",[s._v("tipFormatter")]),s._v(" to format content of "),t("code",[s._v("Toolip")]),s._v(". If "),t("code",[s._v("tipFormatter")]),s._v(" is null, hide it.")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-slider")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":tipFormatter")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"formatter"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-slider")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":tipFormatter")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"null"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),t("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n };\n },\n "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n formatter(value) {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("`"),t("span",{staticClass:"hljs-subst"},[s._v("${value}")]),s._v("%`")]),s._v(";\n },\n },\n };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};m._withStripped=!0;var C={data:function(){return{disabled:!1}},methods:{formatter:function(s){return s+"%"}}},j=Object(e.a)(C,m,[],!1,null,null,null);j.options.__file="components/slider/demo/tip-formatter.md";var g=j.exports,f=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <div class="code-box-demo">\n <a-slider :defaultValue="30" @change="onChange" @afterChange="onAfterChange"/>\n <a-slider range="" :step="10" :defaultValue="[20, 50]" @change="onChange" @afterChange="onAfterChange"/>\n </div>\n',script:"\n export default {\n data() {\n return {\n disabled: false,\n };\n },\n methods: {\n onChange(value) {\n console.log('change: ', value);\n },\n onAfterChange(value) {\n console.log('afterChange: ', value);\n },\n },\n };\n",style:null,us:"\n#### Event\nThe `onChange` callback function will fire when the user changes the slider's value.\nThe `onAfterChange` callback function will fire when `onmouseup` fired.\n",cn:"\n#### 事件\n当 Slider 的值发生改变时，会触发 `onChange` 事件，并把改变后的值作为参数传入。在 `onmouseup` 时，会触发 `onAfterChange` 事件，并把当前值作为参数传入。\n",sourceCode:'<template>\n <div class="code-box-demo">\n <a-slider :defaultValue="30" @change="onChange" @afterChange="onAfterChange" />\n <a-slider\n range\n :step="10"\n :defaultValue="[20, 50]"\n @change="onChange"\n @afterChange="onAfterChange"\n />\n </div>\n</template>\n<script>\n export default {\n data() {\n return {\n disabled: false,\n };\n },\n methods: {\n onChange(value) {\n console.log(\'change: \', value);\n },\n onAfterChange(value) {\n console.log(\'afterChange: \', value);\n },\n },\n };\n<\/script>\n<style scoped>\n .code-box-demo .ant-slider {\n margin-bottom: 16px;\n }\n</style>\n'}}},[t("template",{slot:"component"},[t("div",{staticClass:"code-box-demo"},[t("a-slider",{attrs:{defaultValue:30},on:{change:s.onChange,afterChange:s.onAfterChange}}),s._v(" "),t("a-slider",{attrs:{range:"",step:10,defaultValue:[20,50]},on:{change:s.onChange,afterChange:s.onAfterChange}})],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"事件"}},[s._v("事件 "),t("a",{staticClass:"anchor",attrs:{href:"#事件"}},[s._v("#")])]),s._v(" "),t("p",[s._v("当 Slider 的值发生改变时，会触发 "),t("code",[s._v("onChange")]),s._v(" 事件，并把改变后的值作为参数传入。在 "),t("code",[s._v("onmouseup")]),s._v(" 时，会触发 "),t("code",[s._v("onAfterChange")]),s._v(" 事件，并把当前值作为参数传入。")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Event"}},[s._v("Event "),t("a",{staticClass:"anchor",attrs:{href:"#Event"}},[s._v("#")])]),s._v(" "),t("p",[s._v("The "),t("code",[s._v("onChange")]),s._v(" callback function will fire when the user changes the slider's value."),t("br"),s._v("\nThe "),t("code",[s._v("onAfterChange")]),s._v(" callback function will fire when "),t("code",[s._v("onmouseup")]),s._v(" fired."),t("br")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"code-box-demo"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-slider")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultValue")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"30"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"onChange"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@afterChange")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"onAfterChange"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-slider")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("range")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultValue")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"[20, 50]"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"onChange"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("@afterChange")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"onAfterChange"')]),s._v("\n />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),t("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n };\n },\n "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n onChange(value) {\n "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),t("span",{staticClass:"hljs-string"},[s._v("'change: '")]),s._v(", value);\n },\n onAfterChange(value) {\n "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),t("span",{staticClass:"hljs-string"},[s._v("'afterChange: '")]),s._v(", value);\n },\n },\n };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("scoped")]),s._v(">")]),t("span",{staticClass:"css"},[s._v("\n "),t("span",{staticClass:"hljs-selector-class"},[s._v(".code-box-demo")]),s._v(" "),t("span",{staticClass:"hljs-selector-class"},[s._v(".ant-slider")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("16px")]),s._v(";\n }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])],2)]],2)};f._withStripped=!0;var b={data:function(){return{disabled:!1}},methods:{onChange:function(s){console.log("change: ",s)},onAfterChange:function(s){console.log("afterChange: ",s)}}},x=(t(1337),Object(e.a)(b,f,[],!1,null,"62432a0c",null));x.options.__file="components/slider/demo/event.md";var y=x.exports,k=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <div id="components-slider-demo-mark">\n <h4>included=true</h4>\n <a-slider :marks="marks" :defaultValue="37"/>\n <a-slider range="" :marks="marks" :defaultValue="[26, 37]"/>\n\n <h4>included=false</h4>\n <a-slider :marks="marks" :included="false" :defaultValue="37"/>\n\n <h4>marks & step</h4>\n <a-slider :marks="marks" :step="10" :defaultValue="37"/>\n\n <h4>step=null</h4>\n <a-slider :marks="marks" :step="null" :defaultValue="37"/>\n </div>\n',script:"\n export default {\n data() {\n return {\n marks: {\n 0: '0°C',\n 26: '26°C',\n 37: '37°C',\n 100: {\n style: {\n color: '#f50',\n },\n label: <strong>100°C</strong>,\n },\n },\n };\n },\n methods: {\n onChange(value) {\n console.log('change: ', value);\n },\n onAfterChange(value) {\n console.log('afterChange: ', value);\n },\n },\n };\n",style:null,us:"\n#### Graduated slider\nUsing `marks` property to mark a graduated slider, use `value` or `defaultValue` to specify the position of thumb.\nWhen `included` is false, means that different thumbs are coordinative.\nwhen `step` is null, users can only slide the thumbs onto marks.\n",cn:"\n#### 带标签的滑块\n使用 `marks` 属性标注分段式滑块，使用 `value` / `defaultValue` 指定滑块位置。当 `included=false` 时，表明不同标记间为并列关系。当 `step=null` 时，Slider 的可选值仅有 `marks` 标出来的部分。\n",sourceCode:'<template>\n <div id="components-slider-demo-mark">\n <h4>included=true</h4>\n <a-slider :marks="marks" :defaultValue="37" />\n <a-slider range :marks="marks" :defaultValue="[26, 37]" />\n\n <h4>included=false</h4>\n <a-slider :marks="marks" :included="false" :defaultValue="37" />\n\n <h4>marks & step</h4>\n <a-slider :marks="marks" :step="10" :defaultValue="37" />\n\n <h4>step=null</h4>\n <a-slider :marks="marks" :step="null" :defaultValue="37" />\n </div>\n</template>\n<script>\n export default {\n data() {\n return {\n marks: {\n 0: \'0°C\',\n 26: \'26°C\',\n 37: \'37°C\',\n 100: {\n style: {\n color: \'#f50\',\n },\n label: <strong>100°C</strong>,\n },\n },\n };\n },\n methods: {\n onChange(value) {\n console.log(\'change: \', value);\n },\n onAfterChange(value) {\n console.log(\'afterChange: \', value);\n },\n },\n };\n<\/script>\n<style scoped>\n #components-slider-demo-mark h4 {\n margin: 0 0 16px;\n }\n #components-slider-demo-mark .ant-slider-with-marks {\n margin-bottom: 44px;\n }\n</style>\n'}}},[t("template",{slot:"component"},[t("div",{attrs:{id:"components-slider-demo-mark"}},[t("h4",[s._v("included=true")]),s._v(" "),t("a-slider",{attrs:{marks:s.marks,defaultValue:37}}),s._v(" "),t("a-slider",{attrs:{range:"",marks:s.marks,defaultValue:[26,37]}}),s._v(" "),t("h4",[s._v("included=false")]),s._v(" "),t("a-slider",{attrs:{marks:s.marks,included:!1,defaultValue:37}}),s._v(" "),t("h4",[s._v("marks & step")]),s._v(" "),t("a-slider",{attrs:{marks:s.marks,step:10,defaultValue:37}}),s._v(" "),t("h4",[s._v("step=null")]),s._v(" "),t("a-slider",{attrs:{marks:s.marks,step:null,defaultValue:37}})],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"带标签的滑块"}},[s._v("带标签的滑块 "),t("a",{staticClass:"anchor",attrs:{href:"#带标签的滑块"}},[s._v("#")])]),s._v(" "),t("p",[s._v("使用 "),t("code",[s._v("marks")]),s._v(" 属性标注分段式滑块，使用 "),t("code",[s._v("value")]),s._v(" / "),t("code",[s._v("defaultValue")]),s._v(" 指定滑块位置。当 "),t("code",[s._v("included=false")]),s._v(" 时，表明不同标记间为并列关系。当 "),t("code",[s._v("step=null")]),s._v(" 时，Slider 的可选值仅有 "),t("code",[s._v("marks")]),s._v(" 标出来的部分。")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Graduated-slider"}},[s._v("Graduated slider "),t("a",{staticClass:"anchor",attrs:{href:"#Graduated-slider"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Using "),t("code",[s._v("marks")]),s._v(" property to mark a graduated slider, use "),t("code",[s._v("value")]),s._v(" or "),t("code",[s._v("defaultValue")]),s._v(" to specify the position of thumb."),t("br"),s._v("\nWhen "),t("code",[s._v("included")]),s._v(" is false, means that different thumbs are coordinative."),t("br"),s._v("\nwhen "),t("code",[s._v("step")]),s._v(" is null, users can only slide the thumbs onto marks."),t("br"),t("br")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"components-slider-demo-mark"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("h4")]),s._v(">")]),s._v("included=true"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("h4")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-slider")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":marks")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"marks"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultValue")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"37"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-slider")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("range")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":marks")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"marks"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultValue")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"[26, 37]"')]),s._v(" />")]),s._v("\n\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("h4")]),s._v(">")]),s._v("included=false"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("h4")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-slider")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":marks")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"marks"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":included")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultValue")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"37"')]),s._v(" />")]),s._v("\n\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("h4")]),s._v(">")]),s._v("marks & step"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("h4")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-slider")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":marks")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"marks"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultValue")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"37"')]),s._v(" />")]),s._v("\n\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("h4")]),s._v(">")]),s._v("step=null"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("h4")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-slider")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":marks")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"marks"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"null"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultValue")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"37"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),t("span",{staticClass:"hljs-attr"},[s._v("marks")]),s._v(": {\n "),t("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'0°C'")]),s._v(",\n "),t("span",{staticClass:"hljs-number"},[s._v("26")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'26°C'")]),s._v(",\n "),t("span",{staticClass:"hljs-number"},[s._v("37")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'37°C'")]),s._v(",\n "),t("span",{staticClass:"hljs-number"},[s._v("100")]),s._v(": {\n "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v(": {\n "),t("span",{staticClass:"hljs-attr"},[s._v("color")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'#f50'")]),s._v(",\n },\n "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"xml"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("strong")]),s._v(">")]),s._v("100°C"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("strong")]),s._v(">")])]),s._v(",\n },\n },\n };\n },\n "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n onChange(value) {\n "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),t("span",{staticClass:"hljs-string"},[s._v("'change: '")]),s._v(", value);\n },\n onAfterChange(value) {\n "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),t("span",{staticClass:"hljs-string"},[s._v("'afterChange: '")]),s._v(", value);\n },\n },\n };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("scoped")]),s._v(">")]),t("span",{staticClass:"css"},[s._v("\n "),t("span",{staticClass:"hljs-selector-id"},[s._v("#components-slider-demo-mark")]),s._v(" "),t("span",{staticClass:"hljs-selector-tag"},[s._v("h4")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(" "),t("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(" "),t("span",{staticClass:"hljs-number"},[s._v("16px")]),s._v(";\n }\n "),t("span",{staticClass:"hljs-selector-id"},[s._v("#components-slider-demo-mark")]),s._v(" "),t("span",{staticClass:"hljs-selector-class"},[s._v(".ant-slider-with-marks")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("44px")]),s._v(";\n }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])],2)]],2)};k._withStripped=!0;var w={data:function(){return{marks:{0:"0°C",26:"26°C",37:"37°C",100:{style:{color:"#f50"},label:(0,this.$createElement)("strong",["100°C"])}}}},methods:{onChange:function(s){console.log("change: ",s)},onAfterChange:function(s){console.log("afterChange: ",s)}}},V=(t(1338),Object(e.a)(w,k,[],!1,null,"4d6deb97",null));V.options.__file="components/slider/demo/mark.md";var T=V.exports,S=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <div style="height: 300px">\n <div style="float:left;height: 300px;marginLeft: 70px">\n <a-slider vertical="" :defaultValue="30"/>\n </div>\n <div style="float:left;height: 300px;marginLeft: 70px">\n <a-slider vertical="" range="" :step="10" :defaultValue="[20, 50]"/>\n </div>\n <div style="float:left;height: 300px;marginLeft: 70px">\n <a-slider vertical="" range="" :marks="marks" :defaultValue="[26, 37]"/>\n </div>\n </div>\n',script:"\n export default {\n data() {\n return {\n marks: {\n 0: '0°C',\n 26: '26°C',\n 37: '37°C',\n 100: {\n style: {\n color: '#f50',\n },\n label: <strong>100°C</strong>,\n },\n },\n };\n },\n methods: {\n handleDisabledChange(disabled) {\n this.disabled = disabled;\n },\n },\n };\n",style:null,us:"\n#### Vertical\nThe vertical Slider.\n",cn:"\n#### 垂直\n垂直方向的 Slider。\n",sourceCode:'<template>\n <div style="height: 300px">\n <div style="float:left;height: 300px;marginLeft: 70px">\n <a-slider vertical :defaultValue="30" />\n </div>\n <div style="float:left;height: 300px;marginLeft: 70px">\n <a-slider vertical range :step="10" :defaultValue="[20, 50]" />\n </div>\n <div style="float:left;height: 300px;marginLeft: 70px">\n <a-slider vertical range :marks="marks" :defaultValue="[26, 37]" />\n </div>\n </div>\n</template>\n<script>\n export default {\n data() {\n return {\n marks: {\n 0: \'0°C\',\n 26: \'26°C\',\n 37: \'37°C\',\n 100: {\n style: {\n color: \'#f50\',\n },\n label: <strong>100°C</strong>,\n },\n },\n };\n },\n methods: {\n handleDisabledChange(disabled) {\n this.disabled = disabled;\n },\n },\n };\n<\/script>\n<style scoped>\n .code-box-demo .ant-slider {\n margin-bottom: 16px;\n }\n</style>\n'}}},[t("template",{slot:"component"},[t("div",{staticStyle:{height:"300px"}},[t("div",{staticStyle:{float:"left",height:"300px",marginLeft:"70px"}},[t("a-slider",{attrs:{vertical:"",defaultValue:30}})],1),s._v(" "),t("div",{staticStyle:{float:"left",height:"300px",marginLeft:"70px"}},[t("a-slider",{attrs:{vertical:"",range:"",step:10,defaultValue:[20,50]}})],1),s._v(" "),t("div",{staticStyle:{float:"left",height:"300px",marginLeft:"70px"}},[t("a-slider",{attrs:{vertical:"",range:"",marks:s.marks,defaultValue:[26,37]}})],1)])]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"垂直"}},[s._v("垂直 "),t("a",{staticClass:"anchor",attrs:{href:"#垂直"}},[s._v("#")])]),s._v(" "),t("p",[s._v("垂直方向的 Slider。")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Vertical"}},[s._v("Vertical "),t("a",{staticClass:"anchor",attrs:{href:"#Vertical"}},[s._v("#")])]),s._v(" "),t("p",[s._v("The vertical Slider.")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"height: 300px"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"float:left;height: 300px;marginLeft: 70px"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-slider")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("vertical")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultValue")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"30"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"float:left;height: 300px;marginLeft: 70px"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-slider")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("vertical")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("range")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultValue")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"[20, 50]"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"float:left;height: 300px;marginLeft: 70px"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-slider")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("vertical")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("range")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":marks")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"marks"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultValue")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"[26, 37]"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),t("span",{staticClass:"hljs-attr"},[s._v("marks")]),s._v(": {\n "),t("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'0°C'")]),s._v(",\n "),t("span",{staticClass:"hljs-number"},[s._v("26")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'26°C'")]),s._v(",\n "),t("span",{staticClass:"hljs-number"},[s._v("37")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'37°C'")]),s._v(",\n "),t("span",{staticClass:"hljs-number"},[s._v("100")]),s._v(": {\n "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v(": {\n "),t("span",{staticClass:"hljs-attr"},[s._v("color")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'#f50'")]),s._v(",\n },\n "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"xml"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("strong")]),s._v(">")]),s._v("100°C"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("strong")]),s._v(">")])]),s._v(",\n },\n },\n };\n },\n "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleDisabledChange(disabled) {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".disabled = disabled;\n },\n },\n };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("scoped")]),s._v(">")]),t("span",{staticClass:"css"},[s._v("\n "),t("span",{staticClass:"hljs-selector-class"},[s._v(".code-box-demo")]),s._v(" "),t("span",{staticClass:"hljs-selector-class"},[s._v(".ant-slider")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("16px")]),s._v(";\n }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])],2)]],2)};S._withStripped=!0;var F={data:function(){return{marks:{0:"0°C",26:"26°C",37:"37°C",100:{style:{color:"#f50"},label:(0,this.$createElement)("strong",["100°C"])}}}},methods:{handleDisabledChange:function(s){this.disabled=s}}},A=(t(1339),Object(e.a)(F,S,[],!1,null,"ca1cb264",null));A.options.__file="components/slider/demo/vertical.md";var D=A.exports,E=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <a-slider :defaultValue="30" :tooltipVisible="true"/>\n',script:null,style:null,us:"\n#### Control visible of ToolTip\nWhen `tooltipVisible` is `true`, ToolTip will show always, or ToolTip will not show anyway, even if dragging or hovering.\n",cn:"\n#### 控制 ToolTip 的显示\n当 `tooltipVisible` 为 `true` 时，将始终显示ToolTip；反之则始终不显示，即使在拖动、移入时也是如此。\n",sourceCode:'<template>\n <a-slider :defaultValue="30" :tooltipVisible="true" />\n</template>\n'}}},[t("template",{slot:"component"},[t("a-slider",{attrs:{defaultValue:30,tooltipVisible:!0}})],1),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"控制-ToolTip-的显示"}},[s._v("控制 ToolTip 的显示 "),t("a",{staticClass:"anchor",attrs:{href:"#控制-ToolTip-的显示"}},[s._v("#")])]),s._v(" "),t("p",[s._v("当 "),t("code",[s._v("tooltipVisible")]),s._v(" 为 "),t("code",[s._v("true")]),s._v(" 时，将始终显示ToolTip；反之则始终不显示，即使在拖动、移入时也是如此。")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Control-visible-of-ToolTip"}},[s._v("Control visible of ToolTip "),t("a",{staticClass:"anchor",attrs:{href:"#Control-visible-of-ToolTip"}},[s._v("#")])]),s._v(" "),t("p",[s._v("When "),t("code",[s._v("tooltipVisible")]),s._v(" is "),t("code",[s._v("true")]),s._v(", ToolTip will show always, or ToolTip will not show anyway, even if dragging or hovering.")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-slider")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultValue")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"30"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":tooltipVisible")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" />")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])],2)]],2)};E._withStripped=!0;var I=Object(e.a)({},E,[],!1,null,null,null);I.options.__file="components/slider/demo/show-tooltip.md";var L=I.exports,N=function(){var s=this.$createElement;this._self._c;return this._m(0)};N._withStripped=!0;var $=Object(e.a)({},N,[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[t("h2",{attrs:{id:"API"}},[s._v("API "),t("a",{staticClass:"anchor",attrs:{href:"#API"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("参数")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("类型")]),s._v(" "),t("th",[s._v("默认值")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("autoFocus")]),s._v(" "),t("td",[s._v("自动获取焦点")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("defaultValue")]),s._v(" "),t("td",[s._v("设置初始取值。当 "),t("code",{pre:!0},[s._v("range")]),s._v(" 为 "),t("code",{pre:!0},[s._v("false")]),s._v(" 时，使用 "),t("code",{pre:!0},[s._v("number")]),s._v("，否则用 "),t("code",{pre:!0},[s._v("[number, number]")])]),s._v(" "),t("td",[s._v("number|number[]")]),s._v(" "),t("td",[s._v("0 or [0, 0]")])]),s._v(" "),t("tr",[t("td",[s._v("disabled")]),s._v(" "),t("td",[s._v("值为 "),t("code",{pre:!0},[s._v("true")]),s._v(" 时，滑块为禁用状态")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("dots")]),s._v(" "),t("td",[s._v("是否只能拖拽到刻度上")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("included")]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("marks")]),s._v(" 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("true")])]),s._v(" "),t("tr",[t("td",[s._v("marks")]),s._v(" "),t("td",[s._v("刻度标记，key 的类型必须为 "),t("code",{pre:!0},[s._v("number")]),s._v(" 且取值在闭区间 [min, max] 内，每个标签可以单独设置样式")]),s._v(" "),t("td",[s._v("object")]),s._v(" "),t("td",[s._v("{ number: string|VNode } or { number: { style: object, label: string|VNode } } or { number: () => VNode }")])]),s._v(" "),t("tr",[t("td",[s._v("max")]),s._v(" "),t("td",[s._v("最大值")]),s._v(" "),t("td",[s._v("number")]),s._v(" "),t("td",[s._v("100")])]),s._v(" "),t("tr",[t("td",[s._v("min")]),s._v(" "),t("td",[s._v("最小值")]),s._v(" "),t("td",[s._v("number")]),s._v(" "),t("td",[s._v("0")])]),s._v(" "),t("tr",[t("td",[s._v("range")]),s._v(" "),t("td",[s._v("双滑块模式")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("step")]),s._v(" "),t("td",[s._v("步长，取值必须大于 0，并且可被 (max - min) 整除。当 "),t("code",{pre:!0},[s._v("marks")]),s._v(" 不为空对象时，可以设置 "),t("code",{pre:!0},[s._v("step")]),s._v(" 为 "),t("code",{pre:!0},[s._v("null")]),s._v("，此时 Slider 的可选值仅有 marks 标出来的部分。")]),s._v(" "),t("td",[s._v("number|null")]),s._v(" "),t("td",[s._v("1")])]),s._v(" "),t("tr",[t("td",[s._v("tipFormatter")]),s._v(" "),t("td",[s._v("Slider 会把当前值传给 "),t("code",{pre:!0},[s._v("tipFormatter")]),s._v("，并在 Tooltip 中显示 "),t("code",{pre:!0},[s._v("tipFormatter")]),s._v(" 的返回值，若为 null，则隐藏 Tooltip。")]),s._v(" "),t("td",[s._v("Function|null")]),s._v(" "),t("td",[s._v("IDENTITY")])]),s._v(" "),t("tr",[t("td",[s._v("value(v-model)")]),s._v(" "),t("td",[s._v("设置当前取值。当 "),t("code",{pre:!0},[s._v("range")]),s._v(" 为 "),t("code",{pre:!0},[s._v("false")]),s._v(" 时，使用 "),t("code",{pre:!0},[s._v("number")]),s._v("，否则用 "),t("code",{pre:!0},[s._v("[number, number]")])]),s._v(" "),t("td",[s._v("number|number[]")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("vertical")]),s._v(" "),t("td",[s._v("值为 "),t("code",{pre:!0},[s._v("true")]),s._v(" 时，Slider 为垂直方向")]),s._v(" "),t("td",[s._v("Boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("tooltipVisible")]),s._v(" "),t("td",[s._v("值为"),t("code",{pre:!0},[s._v("true")]),s._v("时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时。")]),s._v(" "),t("td",[s._v("Boolean")]),s._v(" "),t("td")])])]),s._v(" "),t("h3",{attrs:{id:"事件"}},[s._v("事件 "),t("a",{staticClass:"anchor",attrs:{href:"#事件"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("事件名称")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("回调参数")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("afterChange")]),s._v(" "),t("td",[s._v("与 "),t("code",{pre:!0},[s._v("mouseup")]),s._v(" 触发时机一致，把当前值作为参数传入。")]),s._v(" "),t("td",[s._v("Function(value)")])]),s._v(" "),t("tr",[t("td",[s._v("change")]),s._v(" "),t("td",[s._v("当 Slider 的值发生改变时，会触发 change 事件，并把改变后的值作为参数传入。")]),s._v(" "),t("td",[s._v("Function(value)")])])])]),s._v(" "),t("h2",{attrs:{id:"方法"}},[s._v("方法 "),t("a",{staticClass:"anchor",attrs:{href:"#方法"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("名称")]),s._v(" "),t("th",[s._v("描述")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("blur()")]),s._v(" "),t("td",[s._v("移除焦点")])]),s._v(" "),t("tr",[t("td",[s._v("focus()")]),s._v(" "),t("td",[s._v("获取焦点")])])])])])}],!1,null,null,null);$.options.__file="components/slider/index.zh-CN.md";var z=$.exports,W=function(){var s=this.$createElement;this._self._c;return this._m(0)};W._withStripped=!0;var O=Object(e.a)({},W,[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[t("h2",{attrs:{id:"API"}},[s._v("API "),t("a",{staticClass:"anchor",attrs:{href:"#API"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("Property")]),s._v(" "),t("th",[s._v("Description")]),s._v(" "),t("th",[s._v("Type")]),s._v(" "),t("th",[s._v("Default")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("autoFocus")]),s._v(" "),t("td",[s._v("get focus when component mounted")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("defaultValue")]),s._v(" "),t("td",[s._v("The default value of slider. When "),t("code",{pre:!0},[s._v("range")]),s._v(" is "),t("code",{pre:!0},[s._v("false")]),s._v(", use "),t("code",{pre:!0},[s._v("number")]),s._v(", otherwise, use "),t("code",{pre:!0},[s._v("[number, number]")])]),s._v(" "),t("td",[s._v("number|number[]")]),s._v(" "),t("td",[s._v("0 or [0, 0]")])]),s._v(" "),t("tr",[t("td",[s._v("disabled")]),s._v(" "),t("td",[s._v("If true, the slider will not be interactable.")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("dots")]),s._v(" "),t("td",[s._v("Whether the thumb can drag over tick only.")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("included")]),s._v(" "),t("td",[s._v("Make effect when "),t("code",{pre:!0},[s._v("marks")]),s._v(" not null，"),t("code",{pre:!0},[s._v("true")]),s._v(" means containment and "),t("code",{pre:!0},[s._v("false")]),s._v(" means coordinative")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("true")])]),s._v(" "),t("tr",[t("td",[s._v("marks")]),s._v(" "),t("td",[s._v("Tick mark of Slider, type of key must be "),t("code",{pre:!0},[s._v("number")]),s._v(", and must in closed interval [min, max], each mark can declare its own style.")]),s._v(" "),t("td",[s._v("object")]),s._v(" "),t("td",[s._v("{ number: string|VNode } or { number: { style: object, label: string|VNode } } or { number: () => VNode }")])]),s._v(" "),t("tr",[t("td",[s._v("max")]),s._v(" "),t("td",[s._v("The maximum value the slider can slide to")]),s._v(" "),t("td",[s._v("number")]),s._v(" "),t("td",[s._v("100")])]),s._v(" "),t("tr",[t("td",[s._v("min")]),s._v(" "),t("td",[s._v("The minimum value the slider can slide to.")]),s._v(" "),t("td",[s._v("number")]),s._v(" "),t("td",[s._v("0")])]),s._v(" "),t("tr",[t("td",[s._v("range")]),s._v(" "),t("td",[s._v("dual thumb mode")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("step")]),s._v(" "),t("td",[s._v("The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When "),t("code",{pre:!0},[s._v("marks")]),s._v(" no null, "),t("code",{pre:!0},[s._v("step")]),s._v(" can be "),t("code",{pre:!0},[s._v("null")]),s._v(".")]),s._v(" "),t("td",[s._v("number|null")]),s._v(" "),t("td",[s._v("1")])]),s._v(" "),t("tr",[t("td",[s._v("tipFormatter")]),s._v(" "),t("td",[s._v("Slider will pass its value to "),t("code",{pre:!0},[s._v("tipFormatter")]),s._v(", and display its value in Tooltip, and hide Tooltip when return value is null.")]),s._v(" "),t("td",[s._v("Function|null")]),s._v(" "),t("td",[s._v("IDENTITY")])]),s._v(" "),t("tr",[t("td",[s._v("value(v-model)")]),s._v(" "),t("td",[s._v("The value of slider. When "),t("code",{pre:!0},[s._v("range")]),s._v(" is "),t("code",{pre:!0},[s._v("false")]),s._v(", use "),t("code",{pre:!0},[s._v("number")]),s._v(", otherwise, use "),t("code",{pre:!0},[s._v("[number, number]")])]),s._v(" "),t("td",[s._v("number|number[]")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("vertical")]),s._v(" "),t("td",[s._v("If true, the slider will be vertical.")]),s._v(" "),t("td",[s._v("Boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("tooltipVisible")]),s._v(" "),t("td",[s._v("If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering.")]),s._v(" "),t("td",[s._v("Boolean")]),s._v(" "),t("td")])])]),s._v(" "),t("h3",{attrs:{id:"events"}},[s._v("events "),t("a",{staticClass:"anchor",attrs:{href:"#events"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("Events Name")]),s._v(" "),t("th",[s._v("Description")]),s._v(" "),t("th",[s._v("Arguments")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("afterChange")]),s._v(" "),t("td",[s._v("Fire when "),t("code",{pre:!0},[s._v("mouseup")]),s._v(" is fired.")]),s._v(" "),t("td",[s._v("Function(value)")])]),s._v(" "),t("tr",[t("td",[s._v("change")]),s._v(" "),t("td",[s._v("Callback function that is fired when the user changes the slider's value.")]),s._v(" "),t("td",[s._v("Function(value)")])])])]),s._v(" "),t("h2",{attrs:{id:"Methods"}},[s._v("Methods "),t("a",{staticClass:"anchor",attrs:{href:"#Methods"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("Name")]),s._v(" "),t("th",[s._v("Description")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("blur()")]),s._v(" "),t("td",[s._v("remove focus")])]),s._v(" "),t("tr",[t("td",[s._v("focus()")]),s._v(" "),t("td",[s._v("get focus")])])])])])}],!1,null,null,null);O.options.__file="components/slider/index.en-US.md";var B=O.exports,P="# Slider 滑动输入条\n 滑动型输入器，展示当前值和可选范围。\n ## 何时使用\n 当用户需要在数值区间/自定义区间内进行选择时，可为连续或离散值。\n ## 代码演示",U="# Slider\n A Slider component for displaying current value and intervals in range.\n # When To Use\n To input a value in a range.\n ## Examples\n ",M={category:"Components",subtitle:"滑动输入条",type:"Data Entry",title:"Slider",render:function(){var s=arguments[0];return s("div",[s("md",{attrs:{cn:P,us:U}}),s(i),s(o),s(u),s(g),s(y),s(T),s(D),s(L),s("api",[s("template",{slot:"cn"},[s(z)]),s(B)])])}},G=Object(e.a)(M,void 0,void 0,!1,null,null,null);G.options.__file="components/slider/demo/index.vue";a.default=G.exports}}]);
Reference in New Issue View Git Blame Copy Permalink