mirror of https://gitee.com/godoos/godoos.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 lines
11 KiB
1 lines
11 KiB
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d20791c"],{a0a8:function(s,a,t){"use strict";t.r(a);var l=function(){var s=this;s._self._c;return s._m(0)},n=[function(){var s=this,a=s._self._c;return a("div",[a("h1",[s._v("如何渲染滚动条")]),a("blockquote",[a("p",[s._v("v0.7.1+, 需要先注册 Scrollbar 插件")])]),a("p",[s._v("滚动条分为水平和垂直滚动条,所以你需要创建如下模板:")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-comment"},[s._v("\x3c!-- 垂直 --\x3e")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scrollbar verticalScrollbar"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"verticalScrollbarRef"')]),s._v(" @"),a("span",{staticClass:"hljs-attr"},[s._v("click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"onVerticalScrollbarClick"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scrollbarInner"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"verticalScrollbarStyle"')]),s._v("\n @"),a("span",{staticClass:"hljs-attr"},[s._v("click.stop")]),s._v("\n @"),a("span",{staticClass:"hljs-attr"},[s._v("mousedown")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"onVerticalScrollbarMousedown"')]),s._v("\n >")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("\x3c!-- 水平 --\x3e")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scrollbar horizontalScrollbar"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"horizontalScrollbarRef"')]),s._v(" @"),a("span",{staticClass:"hljs-attr"},[s._v("click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"onHorizontalScrollbarClick"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scrollbarInner"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"horizontalScrollbarStyle"')]),s._v("\n @"),a("span",{staticClass:"hljs-attr"},[s._v("click.stop")]),s._v("\n @"),a("span",{staticClass:"hljs-attr"},[s._v("mousedown")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"onHorizontalScrollbarMousedown"')]),s._v("\n >")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("外层元素为滚动条容器元素,内层为滚动条元素。")]),a("p",[s._v("内层滚动条元素一般需要设置成绝对定位,样式示例如下:")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-selector-class"},[s._v(".scrollbar")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("position")]),s._v(": relative;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#f5f5f5")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("overflow")]),s._v(": hidden;\n\n &"),a("span",{staticClass:"hljs-selector-class"},[s._v(".verticalScrollbar")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("500px")]),s._v(";\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".scrollbarInner")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("left")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n }\n\n &"),a("span",{staticClass:"hljs-selector-class"},[s._v(".horizontalScrollbar")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("500px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".scrollbarInner")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".scrollbarInner")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("position")]),s._v(": absolute;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#ccc")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n }\n}\n")])]),a("p",[s._v("垂直滚动条的"),a("code",[s._v("top")]),s._v("和"),a("code",[s._v("height")]),s._v("、水平滚动条的"),a("code",[s._v("left")]),s._v("和"),a("code",[s._v("width")]),s._v("值需要根据插件返回的数据进行设置。")]),a("p",[s._v("首先你需要调用"),a("code",[s._v("setScrollBarWrapSize")]),s._v("方法传递你的滚动条容器的宽和高:")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-comment"},[s._v("// 水平滚动条容器的宽度")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" { width } = "),a("span",{staticClass:"hljs-built_in"},[s._v("this")]),s._v(".$refs.horizontalScrollbarRef.getBoundingClientRect()\n"),a("span",{staticClass:"hljs-comment"},[s._v("// 垂直滚动条容器的高度")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" { height } = "),a("span",{staticClass:"hljs-built_in"},[s._v("this")]),s._v(".$refs.verticalScrollbarRef.getBoundingClientRect()\nmindMap.scrollbar.setScrollBarWrapSize(width, height)\n")])]),a("p",[s._v("如果容器大小发生了改变需要再次调用该方法传递改变后的大小。")]),a("p",[s._v("然后你需要监听"),a("code",[s._v("scrollbar_change")]),s._v("方法来获取滚动条大小和位置数据:")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("mindMap.on("),a("span",{staticClass:"hljs-string"},[s._v("'scrollbar_change'")]),s._v(", "),a("span",{staticClass:"hljs-built_in"},[s._v("this")]),s._v(".updateScrollbar)\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("// 根据事件返回的滚动条数据更新滚动条元素:")]),s._v("\n{\n "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-title"},[s._v("updateScrollbar")]),s._v("("),a("span",{staticClass:"hljs-params"},[s._v("data")]),s._v(")")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" {\n vertical,\n horizontal\n } = data\n "),a("span",{staticClass:"hljs-built_in"},[s._v("this")]),s._v(".verticalScrollbarStyle = {\n "),a("span",{staticClass:"hljs-attr"},[s._v("top")]),s._v(": vertical.top + "),a("span",{staticClass:"hljs-string"},[s._v("'%'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v(": vertical.height + "),a("span",{staticClass:"hljs-string"},[s._v("'%'")]),s._v("\n }\n "),a("span",{staticClass:"hljs-built_in"},[s._v("this")]),s._v(".horizontalScrollbarStyle = {\n "),a("span",{staticClass:"hljs-attr"},[s._v("left")]),s._v(": horizontal.left + "),a("span",{staticClass:"hljs-string"},[s._v("'%'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v(": horizontal.width + "),a("span",{staticClass:"hljs-string"},[s._v("'%'")]),s._v("\n }\n }\n}\n")])]),a("p",[s._v("事件返回数据的是百分比数值,所以需要添加"),a("code",[s._v("%")]),s._v("。")]),a("p",[s._v("最后,需要给滚动条元素绑定"),a("code",[s._v("mousedown")]),s._v("事件,并且调用插件的"),a("code",[s._v("onMousedown")]),s._v("方法:")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-comment"},[s._v("// 垂直滚动条元素")]),s._v("\nmindMap.scrollbar.onMousedown(e, "),a("span",{staticClass:"hljs-string"},[s._v("'vertical'")]),s._v(")\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("// 水平滚动条元素")]),s._v("\nmindMap.scrollbar.onMousedown(e, "),a("span",{staticClass:"hljs-string"},[s._v("'horizontal'")]),s._v(")\n")])]),a("p",[s._v("这样就能实现鼠标拖动滚动条更新画布位置的功能。")]),a("p",[s._v("如果你还需要实现点击滚动条容器元素实现滚动条位置的跳变功能,那么需要给滚动条元素绑定点击事件,并且调用插件的"),a("code",[s._v("onClick")]),s._v("方法:")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-comment"},[s._v("// 垂直滚动条元素")]),s._v("\nmindMap.scrollbar.onClick(e, "),a("span",{staticClass:"hljs-string"},[s._v("'vertical'")]),s._v(")\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("// 水平滚动条元素")]),s._v("\nmindMap.scrollbar.onClick(e, "),a("span",{staticClass:"hljs-string"},[s._v("'horizontal'")]),s._v(")\n")])]),a("p",[s._v("以上就是实现滚动条渲染的全部步骤。")])])}],v={},_=v,i=t("2877"),c=Object(i["a"])(_,l,n,!1,null,null,null);a["default"]=c.exports}}]);
|