1 line
13 KiB
JavaScript
1 line
13 KiB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{1230:function(t,s,a){},1326:function(t,s,a){"use strict";var n=a(1230);a.n(n).a},1474:function(t,s,a){"use strict";a.r(s);var n=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-back-top/>\n Scroll down to see the bottom-right\n <strong style="color: rgba(64, 64, 64, 0.6)"> gray </strong>\n button.\n </div>\n',script:null,style:null,us:"\n#### basic\nThe most basic usage.\n",cn:"\n#### 基本\n最简单的用法。\n",sourceCode:'<template>\n <div>\n <a-back-top />\n Scroll down to see the bottom-right\n <strong style="color: rgba(64, 64, 64, 0.6)"> gray </strong>\n button.\n </div>\n</template>\n'}}},[a("template",{slot:"component"},[a("div",[a("a-back-top"),t._v("\n Scroll down to see the bottom-right\n "),a("strong",{staticStyle:{color:"rgba(64, 64, 64, 0.6)"}},[t._v(" gray ")]),t._v("\n button.\n ")],1)]),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"基本"}},[t._v("基本 "),a("a",{staticClass:"anchor",attrs:{href:"#基本"}},[t._v("#")])]),t._v(" "),a("p",[t._v("最简单的用法。")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"basic"}},[t._v("basic "),a("a",{staticClass:"anchor",attrs:{href:"#basic"}},[t._v("#")])]),t._v(" "),a("p",[t._v("The most basic usage.")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-back-top")]),t._v(" />")]),t._v("\n Scroll down to see the bottom-right\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("strong")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"color: rgba(64, 64, 64, 0.6)"')]),t._v(">")]),t._v(" gray "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("strong")]),t._v(">")]),t._v("\n button.\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n")])])])],2)]],2)};n._withStripped=!0;var e=a(31),o=Object(e.a)({},n,[],!1,null,null,null);o.options.__file="components/back-top/demo/basic.md";var l=o.exports,v=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <div id="components-back-top-demo-custom">\n <a-back-top>\n <div class="ant-back-top-inner">UP</div>\n </a-back-top>\n Scroll down to see the bottom-right\n <strong style="color: #1088e9"> blue </strong>\n button.\n </div>\n',script:null,style:null,us:"\n#### Custom style\nYou can customize the style of the button, just note the size limit: no more than `40px * 40px`.\n",cn:"\n#### 自定义样式\n可以自定义回到顶部按钮的样式,限制宽高:`40px * 40px`。\n",sourceCode:'<template>\n <div id="components-back-top-demo-custom">\n <a-back-top>\n <div class="ant-back-top-inner">UP</div>\n </a-back-top>\n Scroll down to see the bottom-right\n <strong style="color: #1088e9"> blue </strong>\n button.\n </div>\n</template>\n<style scoped>\n #components-back-top-demo-custom .ant-back-top {\n bottom: 100px;\n }\n #components-back-top-demo-custom .ant-back-top-inner {\n height: 40px;\n width: 40px;\n line-height: 40px;\n border-radius: 4px;\n background-color: #1088e9;\n color: #fff;\n text-align: center;\n font-size: 20px;\n }\n</style>\n'}}},[a("template",{slot:"component"},[a("div",{attrs:{id:"components-back-top-demo-custom"}},[a("a-back-top",[a("div",{staticClass:"ant-back-top-inner"},[t._v("UP")])]),t._v("\n Scroll down to see the bottom-right\n "),a("strong",{staticStyle:{color:"#1088e9"}},[t._v(" blue ")]),t._v("\n button.\n ")],1)]),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"自定义样式"}},[t._v("自定义样式 "),a("a",{staticClass:"anchor",attrs:{href:"#自定义样式"}},[t._v("#")])]),t._v(" "),a("p",[t._v("可以自定义回到顶部按钮的样式,限制宽高:"),a("code",[t._v("40px * 40px")]),t._v("。")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Custom-style"}},[t._v("Custom style "),a("a",{staticClass:"anchor",attrs:{href:"#Custom-style"}},[t._v("#")])]),t._v(" "),a("p",[t._v("You can customize the style of the button, just note the size limit: no more than "),a("code",[t._v("40px * 40px")]),t._v(".")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("id")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"components-back-top-demo-custom"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-back-top")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"ant-back-top-inner"')]),t._v(">")]),t._v("UP"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-back-top")]),t._v(">")]),t._v("\n Scroll down to see the bottom-right\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("strong")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"color: #1088e9"')]),t._v(">")]),t._v(" blue "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("strong")]),t._v(">")]),t._v("\n button.\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("scoped")]),t._v(">")]),a("span",{staticClass:"css"},[t._v("\n "),a("span",{staticClass:"hljs-selector-id"},[t._v("#components-back-top-demo-custom")]),t._v(" "),a("span",{staticClass:"hljs-selector-class"},[t._v(".ant-back-top")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("bottom")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("100px")]),t._v(";\n }\n "),a("span",{staticClass:"hljs-selector-id"},[t._v("#components-back-top-demo-custom")]),t._v(" "),a("span",{staticClass:"hljs-selector-class"},[t._v(".ant-back-top-inner")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("height")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("40px")]),t._v(";\n "),a("span",{staticClass:"hljs-attribute"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("40px")]),t._v(";\n "),a("span",{staticClass:"hljs-attribute"},[t._v("line-height")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("40px")]),t._v(";\n "),a("span",{staticClass:"hljs-attribute"},[t._v("border-radius")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("4px")]),t._v(";\n "),a("span",{staticClass:"hljs-attribute"},[t._v("background-color")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("#1088e9")]),t._v(";\n "),a("span",{staticClass:"hljs-attribute"},[t._v("color")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("#fff")]),t._v(";\n "),a("span",{staticClass:"hljs-attribute"},[t._v("text-align")]),t._v(": center;\n "),a("span",{staticClass:"hljs-attribute"},[t._v("font-size")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("20px")]),t._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),t._v("\n")])])])],2)]],2)};v._withStripped=!0;a(1326);var _=Object(e.a)({},v,[],!1,null,"2ca48125",null);_.options.__file="components/back-top/demo/custom.md";var c=_.exports,i=function(){var t=this.$createElement;this._self._c;return this._m(0)};i._withStripped=!0;var r=Object(e.a)({},i,[function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[a("h2",{attrs:{id:"API"}},[t._v("API "),a("a",{staticClass:"anchor",attrs:{href:"#API"}},[t._v("#")])]),t._v(" "),a("blockquote",[a("p",[t._v("有默认样式,距离底部 "),a("code",{pre:!0},[t._v("50px")]),t._v(",可覆盖。")]),t._v(" "),a("p",[t._v("自定义样式宽高不大于 40px * 40px。")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("参数")]),t._v(" "),a("th",[t._v("说明")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("target")]),t._v(" "),a("td",[t._v("设置需要监听其滚动事件的元素,值为一个返回对应 DOM 元素的函数")]),t._v(" "),a("td",[t._v("Function")]),t._v(" "),a("td",[t._v("() => window")])]),t._v(" "),a("tr",[a("td",[t._v("visibilityHeight")]),t._v(" "),a("td",[t._v("滚动高度达到此参数值才出现 "),a("code",{pre:!0},[t._v("BackTop")])]),t._v(" "),a("td",[t._v("number")]),t._v(" "),a("td",[t._v("400")])])])]),t._v(" "),a("h3",{attrs:{id:"事件"}},[t._v("事件 "),a("a",{staticClass:"anchor",attrs:{href:"#事件"}},[t._v("#")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名称")]),t._v(" "),a("th",[t._v("说明")]),t._v(" "),a("th",[t._v("回调参数")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("click")]),t._v(" "),a("td",[t._v("点击按钮的回调函数")]),t._v(" "),a("td",[t._v("Function")])])])])])}],!1,null,null,null);r.options.__file="components/back-top/index.zh-CN.md";var p=r.exports,h=function(){var t=this.$createElement;this._self._c;return this._m(0)};h._withStripped=!0;var d=Object(e.a)({},h,[function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[a("h2",{attrs:{id:"API"}},[t._v("API "),a("a",{staticClass:"anchor",attrs:{href:"#API"}},[t._v("#")])]),t._v(" "),a("blockquote",[a("p",[t._v("The distance to the bottom is set to "),a("code",{pre:!0},[t._v("50px")]),t._v(" by default, which is overridable.")]),t._v(" "),a("p",[t._v("If you decide to use custom styles, please note the size limit: no more than "),a("code",{pre:!0},[t._v("40px * 40px")]),t._v(".")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Property")]),t._v(" "),a("th",[t._v("Description")]),t._v(" "),a("th",[t._v("Type")]),t._v(" "),a("th",[t._v("Default")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("target")]),t._v(" "),a("td",[t._v("specifies the scrollable area dom node")]),t._v(" "),a("td",[t._v("() => HTMLElement")]),t._v(" "),a("td",[t._v("() => window")])]),t._v(" "),a("tr",[a("td",[t._v("visibilityHeight")]),t._v(" "),a("td",[t._v("the "),a("code",{pre:!0},[t._v("BackTop")]),t._v(" button will not show until the scroll height reaches this value")]),t._v(" "),a("td",[t._v("number")]),t._v(" "),a("td",[t._v("400")])])])]),t._v(" "),a("h3",{attrs:{id:"events"}},[t._v("events "),a("a",{staticClass:"anchor",attrs:{href:"#events"}},[t._v("#")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Events Name")]),t._v(" "),a("th",[t._v("Description")]),t._v(" "),a("th",[t._v("Arguments")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("click")]),t._v(" "),a("td",[t._v("a callback function, which can be executed when you click the button")]),t._v(" "),a("td",[t._v("Function")])])])])])}],!1,null,null,null);d.options.__file="components/back-top/index.en-US.md";var m=d.exports,u="# BackTop 回到顶部\n 返回页面顶部的操作按钮。\n## 何时使用\n- 当页面内容区域比较长时;\n- 当用户需要频繁返回顶部查看相关内容时。\n ## 代码演示",b="# BackTop\n `BackTop` makes it easy to go back to the top of the page.\n## When To Use\n- When the page content is very long.\n- When you need to go back to the top very frequently in order to view the contents.\n## Examples \n",C={category:"Components",type:"Other",zhType:"其他",subtitle:"回到顶部",title:"BackTop",render:function(){var t=arguments[0];return t("div",[t("md",{attrs:{cn:u,us:b}}),t(l),t(c),t("api",[t(p,{slot:"cn"}),t(m)])])}},g=Object(e.a)(C,void 0,void 0,!1,null,null,null);g.options.__file="components/back-top/demo/index.vue";s.default=g.exports}}]); |