webpackJsonp([68],{HlXn:function(s,t,a){s.exports=a("mCEb")},MgXj:function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"Popup"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Popup-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Popup")]),s._v(" "),a("p",[s._v("The underlying popup component, mainly used to implement upper component encapsulation based on itself. It only provides basic functions: specifying the type, whether there's a background layer, showing content (HTML) and whether the component is in center position.")]),s._v(" "),s._m(0),s._v(" "),s._m(1),s._v(" "),a("h3",{attrs:{id:"Example"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Example-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Example")]),s._v(" "),s._m(2),s._v(" "),a("h3",{attrs:{id:"Propsconfiguration"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Propsconfiguration-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Props configuration")]),s._v(" "),s._m(3),s._v(" "),a("h3",{attrs:{id:"Events"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Events-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Events")]),s._v(" "),s._m(4),s._v(" "),a("h3",{attrs:{id:"Instancemethods"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Instancemethods-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Instance methods")]),s._v(" "),s._m(5)])},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Most of the built-in popup type components are implemented based on this component, including "),a("a",{attrs:{href:"#/en-US/docs/toast"}},[s._v("Toast")]),s._v("、"),a("a",{attrs:{href:"#/en-US/docs/picker"}},[s._v("Picker")]),s._v("、"),a("a",{attrs:{href:"#/en-US/docs/cascade-picker"}},[s._v("CascadePicker")]),s._v("、"),a("a",{attrs:{href:"#/en-US/docs/date-picker"}},[s._v("DatePicker")]),s._v("、"),a("a",{attrs:{href:"#/en-US/docs/time-picker"}},[s._v("TimePicker")]),s._v("、"),a("a",{attrs:{href:"#/en-US/docs/segment-picker"}},[s._v("SegmentPicker")]),s._v("、"),a("a",{attrs:{href:"#/en-US/docs/dialog"}},[s._v("Dialog")]),s._v("、"),a("a",{attrs:{href:"#/en-US/docs/action-sheet"}},[s._v("ActionSheet")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("strong",[s._v("Notice:")]),s._v(" All the components above used create-api, so you should read "),a("a",{attrs:{href:"#/en-US/docs/create-api"}},[s._v("create-api")]),s._v(" first.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("Basic usage")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-popup")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"my-popup"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"myPopup"')]),s._v(">")]),s._v("\n  My Popup Content 1\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-popup")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"showPopup('myPopup')\"")]),s._v(">")]),s._v("\n  Show Popup\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("p",[s._v("Specifying "),a("code",{pre:!0},[s._v("type")]),s._v(" will help control class according to the type. In the example above, "),a("code",{pre:!0},[s._v("cube-my-popup")]),s._v(" will be added to the classList of the root element.")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n    showPopup(refId) {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" component = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[refId]\n      component.show()\n      setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n        component.hide()\n      }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(")\n    }\n  }\n}\n")])]),s._v(" "),a("p",[s._v("The component is hidden by default and won't show up unless invoking the "),a("code",{pre:!0},[s._v("show()")]),s._v(" method of the instance of the component. And of course, invoking the "),a("code",{pre:!0},[s._v("hide()")]),s._v(" method of the instance of the component will hide itself. That's what "),a("code",{pre:!0},[s._v("showPopup()")]),s._v(" does in the example above (first show and hide in one second).")])]),s._v(" "),a("li",[a("p",[s._v("Without background layer")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-popup")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"my-popup"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":mask")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"myPopup2"')]),s._v(">")]),s._v("\n  My Popup Content 2\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-popup")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"showPopup('myPopup2')\"")]),s._v(">")]),s._v("\n  Show Popup - no mask\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("p",[s._v("Setting "),a("code",{pre:!0},[s._v("mask")]),s._v(" to "),a("code",{pre:!0},[s._v("false")]),s._v(" and the background layer is hidden.")])]),s._v(" "),a("li",[a("p",[s._v("Show the HTML content")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-popup")]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"my-popup"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":mask")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"<i>My Popup Content 3</i>"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"myPopup3"')]),s._v(" />")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"showPopup('myPopup3')\"")]),s._v(">")]),s._v("\n  Show Popup - with content\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("p",[s._v("You only need to pass the HTML fragment on to "),a("code",{pre:!0},[s._v("content")]),s._v(".")])]),s._v(" "),a("li",[a("p",[s._v("Control the content position & mask closable"),a("sup",[s._v("1.9.6")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-popup")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"my-popup"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":position")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"position"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":mask-closable")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"myPopup4"')]),s._v(">")]),s._v("My Popup Content 4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-popup")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"showPopup"')]),s._v(">")]),s._v("top/right/bottom/left/center"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" positions = ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'top'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'right'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'bottom'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'left'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'center'")]),s._v("]\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" cur = "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("position")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n    }\n  },\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n    showPopup() {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".position = positions[cur++]\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (cur === positions.length) {\n        cur = "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n      }\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" component = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.myPopup4\n      component.show()\n      setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n        component.hide()\n      }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("2000")]),s._v(")\n    }\n  }\n}\n")])]),s._v(" "),a("p",[s._v("You can use "),a("code",{pre:!0},[s._v("position")]),s._v(" to control the content's position and use "),a("code",{pre:!0},[s._v("mask-closable")]),s._v(" to control mask closable.")])]),s._v(" "),a("li",[a("p",[s._v("Setting to bottom")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-popup")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"my-popup"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":center")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"myPopup4"')]),s._v(">")]),s._v("My Popup Content 4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-popup")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"showPopup('myPopup4')\"")]),s._v(">")]),s._v("\n  Show Popup - bottom\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("p",[s._v("Considering that in mobile secnes, popup is in center or bottom most of the time (covered in horizontal direction when setted to bottom). So if setting "),a("code",{pre:!0},[s._v("center")]),s._v(" to "),a("code",{pre:!0},[s._v("false")]),s._v(", you'll set the component to bottom.")])]),s._v(" "),a("li",[a("p",[s._v("Upper layer encapsulation")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-popup")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"extend-popup"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"popup"')]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"cube-extend-popup-content"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"hide"')]),s._v(">")]),s._v("\n      "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("slot")]),s._v(">")]),s._v("{{content}}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("slot")]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-popup")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text/ecmascript-6"')]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n  "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" COMPONENT_NAME = "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cube-extend-popup'")]),s._v("\n  "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": COMPONENT_NAME,\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("props")]),s._v(": {\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("String")]),s._v("\n      }\n    },\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      show() {\n        "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.popup.show()\n      },\n      hide() {\n        "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.popup.hide()\n        "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$emit("),a("span",{attrs:{class:"hljs-string"}},[s._v("'hide'")]),s._v(")\n      }\n    }\n  }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("lang")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"stylus"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rel")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"stylesheet/stylus"')]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n  "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-extend-popup")]),s._v("\n    "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-extend-popup-content")]),s._v("\n      "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("padding")]),s._v(": 20"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("px")]),s._v("\n      "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-selector-id"}},[s._v("#fff")]),s._v("\n      "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("rgba")]),s._v("(0, 0, 0, "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".8")]),s._v(")\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("p",[s._v("An upper layer encapsulated CubeExtendPopup component with some styles is implemented. It supports passing the content on, has default slot and can be hidden if clicking the content. You can use it in this way (need to be registers globally or partially):")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-extend-popup")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"click here hide"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"extendPopup"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-extend-popup")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"$refs.extendPopup.show()"')]),s._v(">")]),s._v("\n  Show Extend Popup\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(">")]),s._v("\n")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Attribute")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Type")]),s._v(" "),a("th",[s._v("Accepted Values")]),s._v(" "),a("th",[s._v("Default")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("visible"),a("sup",[s._v("1.8.1")])]),s._v(" "),a("td",[s._v("whether visible. Bind to "),a("code",{pre:!0},[s._v("v-model")])]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true/false")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("type")]),s._v(" "),a("td",[s._v("the type of popup")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("''")])]),s._v(" "),a("tr",[a("td",[s._v("mask")]),s._v(" "),a("td",[s._v("whether to show background layer")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true/false")]),s._v(" "),a("td",[s._v("true")])]),s._v(" "),a("tr",[a("td",[s._v("content")]),s._v(" "),a("td",[s._v("content, HTML string, valid when there's no slot")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("''")])]),s._v(" "),a("tr",[a("td",[s._v("center")]),s._v(" "),a("td",[s._v("whether to be in center in horizontal and vertical direction")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true/false")]),s._v(" "),a("td",[s._v("true")])]),s._v(" "),a("tr",[a("td",[s._v("position"),a("sup",[s._v("1.9.6")])]),s._v(" "),a("td",[s._v("content position, if set position then "),a("code",{pre:!0},[s._v("center")]),s._v(" will be ignored")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("top/right/bottom/left/center")]),s._v(" "),a("td",[s._v("''")])]),s._v(" "),a("tr",[a("td",[s._v("maskClosable"),a("sup",[s._v("1.9.6")])]),s._v(" "),a("td",[s._v("whether hide the component when clicked the mask layer")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true/false")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("zIndex"),a("sup",[s._v("1.9.6")])]),s._v(" "),a("td",[s._v("the value of the style z-index")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("100")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Event Name")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Parameters")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("mask-click")]),s._v(" "),a("td",[s._v("triggers when the background layer is clicked")]),s._v(" "),a("td",[s._v("click event target")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Method name")]),s._v(" "),a("th",[s._v("Description")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("show")]),s._v(" "),a("td",[s._v("show")])]),s._v(" "),a("tr",[a("td",[s._v("hide")]),s._v(" "),a("td",[s._v("hide")])])])])}]}},mCEb:function(s,t,a){var n=a("VU/8")(null,a("MgXj"),null,null,null);s.exports=n.exports}});