diff --git a/docs/index.html b/docs/index.html index f5213b076055809103d9ca70c8746a47187805dc..da6aa3e53814db9a372f537d2184b26219876333 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1 +1 @@ -cube-ui Document
\ No newline at end of file +cube-ui Document
\ No newline at end of file diff --git a/docs/js/20.5ce8292a7803ab35eaf6.js b/docs/js/20.5ce8292a7803ab35eaf6.js new file mode 100644 index 0000000000000000000000000000000000000000..78156041cbb332e797b2c640ce5d2486deda1335 --- /dev/null +++ b/docs/js/20.5ce8292a7803ab35eaf6.js @@ -0,0 +1 @@ +webpackJsonp([20],{482:function(s,t,a){s.exports=a(571)},571:function(s,t,a){var n=a(11)(null,a(572),null,null,null);s.exports=n.exports},572: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:"create-api模块"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-create-api模块-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(" create-api 模块")]),s._v(" "),s._m(0),s._v(" "),a("h3",{attrs:{id:"createAPI(Vue,Component,[events,single])"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-createAPI(Vue,Component,[events,single])-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(" createAPI(Vue, Component, [events, single])")]),s._v(" "),s._m(1),s._v(" "),a("p",[s._v("我们先编写一个 Hello.vue 组件：")]),s._v(" "),s._m(2),s._v(" "),s._m(3),s._v(" "),s._m(4),s._v(" "),s._m(5),s._v(" "),a("h3",{attrs:{id:"如何在普通js文件中调用"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-如何在普通js文件中调用-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(" 如何在普通 js 文件中调用")]),s._v(" "),s._m(6),s._v(" "),s._m(7),s._v(" "),a("p",[s._v("还有一种思路是通过数据驱动，比如用 vuex 维护一个全局 state，在需要调用该组件时更新状态，然后在 App.vue 里去 watch 这个状态变化来调用该组件。")])])},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("该模块默认暴露出一个 "),a("code",{pre:!0},[s._v("createAPI")]),s._v(" 函数，可以实现以 API 的形式调用自定义组件。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("参数：")]),s._v(" "),a("ul",[a("li",[a("code",{pre:!0},[s._v("{Function} Vue")]),s._v(" Vue 函数")]),s._v(" "),a("li",[a("code",{pre:!0},[s._v("{Function | Object} Component")]),s._v(" Vue 组件，组件必须有 name")]),s._v(" "),a("li",[a("code",{pre:!0},[s._v("{Array} [events]")]),s._v(" 组件实例 emit 的事件名集合")]),s._v(" "),a("li",[a("code",{pre:!0},[s._v("{Boolean} [single]")]),s._v(" 是否为单例")])])]),s._v(" "),a("li",[a("p",[s._v("用法：")]),s._v(" "),a("ul",[a("li",[s._v("该方法在 Vue 的 prototype 上增加一个名为 "),a("code",{pre:!0},[s._v("$create{camelize(Component.name)}")]),s._v(" 的方法，这样就可以在其他组件中直接通过 "),a("code",{pre:!0},[s._v("const instance = this.$createAaBb(config, [renderFn, single])")]),s._v(" 这样来实例化组件了，而且这个实例化组件的元素是被附加到 "),a("code",{pre:!0},[s._v("body")]),s._v(" 元素下的；关于 "),a("code",{pre:!0},[s._v("$createAaBb")]),s._v(" 的参数：\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("{Object} config")]),s._v(" 组件配置参数，默认所有的值都会当做 props 传给组件，但是要排除 "),a("code",{pre:!0},[s._v("events")]),s._v(" 中的事件（默认会做转换，例如："),a("code",{pre:!0},[s._v("events")]),s._v(" 的值为 "),a("code",{pre:!0},[s._v("['click']")]),s._v("，那么 "),a("code",{pre:!0},[s._v("config")]),s._v(" 中的 "),a("code",{pre:!0},[s._v("onClick")]),s._v(" 就是作为 "),a("code",{pre:!0},[s._v("click")]),s._v(" 事件的回调函数，而不是作为 props 传递给组件）。")]),s._v(" "),a("li",[a("code",{pre:!0},[s._v("{Function} [renderFn]")]),s._v(" 可选参数，用于生成子 VNode 节点，一般场景是处理 slot。")]),s._v(" "),a("li",[a("code",{pre:!0},[s._v("{Boolean} [single]")]),s._v(" 可选参数，创建的时候决定是否是单例的，优先级更高，如果没有传入 renderFn 的话，single 的值就是第二个参数的值。")])])]),s._v(" "),a("li",[s._v("注意调用后的返回值 "),a("code",{pre:!0},[s._v("instance")]),s._v(" 就是组件实例，这个实例会被"),a("strong",[s._v("附加")]),s._v("或者"),a("strong",[s._v("代理")]),s._v(" "),a("code",{pre:!0},[s._v("remove")]),s._v(" 方法，如果调用了，该实例就会被销毁且会从 "),a("code",{pre:!0},[s._v("body")]),s._v(" 下移除。")])])]),s._v(" "),a("li",[a("p",[s._v("示例：")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return 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("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"clickHandler"')]),s._v(">")]),s._v("\n {{content}}\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("slot")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"other"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\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("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(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'hello'")]),s._v(",\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 "),a("span",{attrs:{class:"hljs-attr"}},[s._v("default")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Hello'")]),s._v("\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n clickHandler(e) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$emit("),a("span",{attrs:{class:"hljs-string"}},[s._v("'click'")]),s._v(", e)\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("然后我们再通过 "),a("code",{pre:!0},[s._v("createAPI")]),s._v(" 把 Hello.vue 变成一个 API 式调用的组件并调用。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Hello "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'./Hello.vue'")]),s._v("\n\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 引入 Style 加载基础样式")]),s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("/* eslint-disable no-unused-vars */")]),s._v("\n Style,\n Dialog,\n createAPI\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\n\n Vue.use(Dialog)\n\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 创建 this.$createHello API")]),s._v("\n createAPI(Vue, Hello, ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'click'")]),s._v("], "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(")\n\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 初始化 Vue")]),s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("el")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("render")]),s._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v(" ("),a("span",{attrs:{class:"hljs-params"}},[s._v("h")]),s._v(") ")]),s._v("{\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" h("),a("span",{attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(", {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("on")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("click")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".showHello\n }\n }, ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'Show Hello'")]),s._v("])\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n showHello() {\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 直接调用")]),s._v("\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 传入配置对象，默认传入的所有对象全都当做 props 传入组件")]),s._v("\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 除了在调用 createAPI 的时候传入了 events，这里对应的就是")]),s._v("\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// on{event name} 会被当做事件回调处理")]),s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" instance = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createHello({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'My Hello Content'")]),s._v(",\n onClick(e) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'Hello component clicked.'")]),s._v(")\n }\n }, "),a("span",{attrs:{class:"hljs-comment"}},[s._v("/* renderFn */")]),s._v(" (createElement) => {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" [\n createElement("),a("span",{attrs:{class:"hljs-string"}},[s._v("'p'")]),s._v(", {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'other'")]),s._v("\n }, "),a("span",{attrs:{class:"hljs-string"}},[s._v("'other content'")]),s._v(")\n ]\n })\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 通过 Vue 组件的 $on 也是可以监听的，看使用场景")]),s._v("\n instance.$on("),a("span",{attrs:{class:"hljs-string"}},[s._v("'click'")]),s._v(", (e) => {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" $dialog = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createDialog({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'confirm'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'点击确定关闭当前实例'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-alert'")]),s._v("\n })\n $dialog.show()\n\n $dialog.$on("),a("span",{attrs:{class:"hljs-string"}},[s._v("'confirm'")]),s._v(", () => {\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 销毁实例")]),s._v("\n instance.remove()\n }).$on("),a("span",{attrs:{class:"hljs-string"}},[s._v("'cancel'")]),s._v(", () => {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'cancel'")]),s._v(")\n })\n })\n }\n }\n })\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("示例中就是创建了一个需要 API 调用的组件 "),a("code",{pre:!0},[s._v("Hello")]),s._v("，然后在其他组件中去使用，重点就是 "),a("code",{pre:!0},[s._v("showHello()")]),s._v(" 方法做的事情：调用 "),a("code",{pre:!0},[s._v("this.$createHello(config, renderFn)")]),s._v(" 实现组件的实例化。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("一般当你在 vue 实例中，你可以直接通过 "),a("code",{pre:!0},[s._v("this.$createHello(config, renderFn)")]),s._v(" 调用该组件。而如果在普通 JS 中"),a("code",{pre:!0},[s._v("this")]),s._v("不是 vue 实例，这时就需要通过"),a("code",{pre:!0},[s._v("Vue.prototye")]),s._v("或者创建一个 vue 实例来调用"),a("code",{pre:!0},[s._v("$createHello")]),s._v("方法了，比如：")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n\nVue.prototype.$createHello(config, renderFn)\n\n"),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 或者")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" vm = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue()\nvm.$createHello(config, renderFn)\n")])])}]}}}); \ No newline at end of file diff --git a/docs/js/20.c9ec755dac9171c67a12.js b/docs/js/20.c9ec755dac9171c67a12.js deleted file mode 100644 index d7796c9aba94a1fd40b3f76e77ad3125d4923afd..0000000000000000000000000000000000000000 --- a/docs/js/20.c9ec755dac9171c67a12.js +++ /dev/null @@ -1 +0,0 @@ -webpackJsonp([20],{482:function(s,t,a){s.exports=a(571)},571:function(s,t,a){var n=a(11)(null,a(572),null,null,null);s.exports=n.exports},572: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:"create-api模块"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-create-api模块-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(" create-api 模块")]),s._v(" "),s._m(0),s._v(" "),a("h3",{attrs:{id:"createAPI(Vue,Component,[events,single])"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-createAPI(Vue,Component,[events,single])-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(" createAPI(Vue, Component, [events, single])")]),s._v(" "),s._m(1),s._v(" "),a("p",[s._v("我们先编写一个 Hello.vue 组件：")]),s._v(" "),s._m(2),s._v(" "),s._m(3),s._v(" "),s._m(4),s._v(" "),s._m(5),s._v(" "),a("h3",{attrs:{id:"如何在普通js文件中调用"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-如何在普通js文件中调用-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(" 如何在普通 js 文件中调用")]),s._v(" "),s._m(6),s._v(" "),s._m(7),s._v(" "),a("p",[s._v("还有一种思路是通过数据驱动，比如用 vuex 维护一个全局 state，需要弹窗的时候去更新状态，然后在 App.vue 里去 watch 这个状态变化来调用该组件。")])])},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("该模块默认暴露出一个 "),a("code",{pre:!0},[s._v("createAPI")]),s._v(" 函数，可以实现以 API 的形式调用自定义组件。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("参数：")]),s._v(" "),a("ul",[a("li",[a("code",{pre:!0},[s._v("{Function} Vue")]),s._v(" Vue 函数")]),s._v(" "),a("li",[a("code",{pre:!0},[s._v("{Function | Object} Component")]),s._v(" Vue 组件，组件必须有 name")]),s._v(" "),a("li",[a("code",{pre:!0},[s._v("{Array} [events]")]),s._v(" 组件实例 emit 的事件名集合")]),s._v(" "),a("li",[a("code",{pre:!0},[s._v("{Boolean} [single]")]),s._v(" 是否为单例")])])]),s._v(" "),a("li",[a("p",[s._v("用法：")]),s._v(" "),a("ul",[a("li",[s._v("该方法在 Vue 的 prototype 上增加一个名为 "),a("code",{pre:!0},[s._v("$create{camelize(Component.name)}")]),s._v(" 的方法，这样就可以在其他组件中直接通过 "),a("code",{pre:!0},[s._v("const instance = this.$createAaBb(config, [renderFn, single])")]),s._v(" 这样来实例化组件了，而且这个实例化组件的元素是被附加到 "),a("code",{pre:!0},[s._v("body")]),s._v(" 元素下的；关于 "),a("code",{pre:!0},[s._v("$createAaBb")]),s._v(" 的参数：\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("{Object} config")]),s._v(" 组件配置参数，默认所有的值都会当做 props 传给组件，但是要排除 "),a("code",{pre:!0},[s._v("events")]),s._v(" 中的事件（默认会做转换，例如："),a("code",{pre:!0},[s._v("events")]),s._v(" 的值为 "),a("code",{pre:!0},[s._v("['click']")]),s._v("，那么 "),a("code",{pre:!0},[s._v("config")]),s._v(" 中的 "),a("code",{pre:!0},[s._v("onClick")]),s._v(" 就是作为 "),a("code",{pre:!0},[s._v("click")]),s._v(" 事件的回调函数，而不是作为 props 传递给组件）。")]),s._v(" "),a("li",[a("code",{pre:!0},[s._v("{Function} [renderFn]")]),s._v(" 可选参数，用于生成子 VNode 节点，一般场景是处理 slot。")]),s._v(" "),a("li",[a("code",{pre:!0},[s._v("{Boolean} [single]")]),s._v(" 可选参数，创建的时候决定是否是单例的，优先级更高，如果没有传入 renderFn 的话，single 的值就是第二个参数的值。")])])]),s._v(" "),a("li",[s._v("注意调用后的返回值 "),a("code",{pre:!0},[s._v("instance")]),s._v(" 就是组件实例，这个实例会被"),a("strong",[s._v("附加")]),s._v("或者"),a("strong",[s._v("代理")]),s._v(" "),a("code",{pre:!0},[s._v("remove")]),s._v(" 方法，如果调用了，该实例就会被销毁且会从 "),a("code",{pre:!0},[s._v("body")]),s._v(" 下移除。")])])]),s._v(" "),a("li",[a("p",[s._v("示例：")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return 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("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"clickHandler"')]),s._v(">")]),s._v("\n {{content}}\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("slot")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"other"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\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("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(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'hello'")]),s._v(",\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 "),a("span",{attrs:{class:"hljs-attr"}},[s._v("default")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Hello'")]),s._v("\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n clickHandler(e) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$emit("),a("span",{attrs:{class:"hljs-string"}},[s._v("'click'")]),s._v(", e)\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("然后我们再通过 "),a("code",{pre:!0},[s._v("createAPI")]),s._v(" 把 Hello.vue 变成一个 API 式调用的组件并调用。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Hello "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'./Hello.vue'")]),s._v("\n\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 引入 Style 加载基础样式")]),s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("/* eslint-disable no-unused-vars */")]),s._v("\n Style,\n Dialog,\n createAPI\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\n\n Vue.use(Dialog)\n\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 创建 this.$createHello API")]),s._v("\n createAPI(Vue, Hello, ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'click'")]),s._v("], "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(")\n\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 初始化 Vue")]),s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("el")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("render")]),s._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v(" ("),a("span",{attrs:{class:"hljs-params"}},[s._v("h")]),s._v(") ")]),s._v("{\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" h("),a("span",{attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(", {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("on")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("click")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".showHello\n }\n }, ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'Show Hello'")]),s._v("])\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n showHello() {\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 直接调用")]),s._v("\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 传入配置对象，默认传入的所有对象全都当做 props 传入组件")]),s._v("\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 除了在调用 createAPI 的时候传入了 events，这里对应的就是")]),s._v("\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// on{event name} 会被当做事件回调处理")]),s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" instance = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createHello({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'My Hello Content'")]),s._v(",\n onClick(e) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'Hello component clicked.'")]),s._v(")\n }\n }, "),a("span",{attrs:{class:"hljs-comment"}},[s._v("/* renderFn */")]),s._v(" (createElement) => {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" [\n createElement("),a("span",{attrs:{class:"hljs-string"}},[s._v("'p'")]),s._v(", {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'other'")]),s._v("\n }, "),a("span",{attrs:{class:"hljs-string"}},[s._v("'other content'")]),s._v(")\n ]\n })\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 通过 Vue 组件的 $on 也是可以监听的，看使用场景")]),s._v("\n instance.$on("),a("span",{attrs:{class:"hljs-string"}},[s._v("'click'")]),s._v(", (e) => {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" $dialog = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createDialog({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'confirm'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'点击确定关闭当前实例'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-alert'")]),s._v("\n })\n $dialog.show()\n\n $dialog.$on("),a("span",{attrs:{class:"hljs-string"}},[s._v("'confirm'")]),s._v(", () => {\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 销毁实例")]),s._v("\n instance.remove()\n }).$on("),a("span",{attrs:{class:"hljs-string"}},[s._v("'cancel'")]),s._v(", () => {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'cancel'")]),s._v(")\n })\n })\n }\n }\n })\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("示例中就是创建了一个需要 API 调用的组件 "),a("code",{pre:!0},[s._v("Hello")]),s._v("，然后在其他组件中去使用，重点就是 "),a("code",{pre:!0},[s._v("showHello()")]),s._v(" 方法做的事情：调用 "),a("code",{pre:!0},[s._v("this.$createHello(config, renderFn)")]),s._v(" 实现组件的实例化。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("一般当你在 vue 实例中，你可以直接通过 "),a("code",{pre:!0},[s._v("this.$createHello(config, renderFn)")]),s._v(" 调用该组件。而如果在普通 JS 中 this 不是 vue 实例，这时就需要通过 Vue.prototye 或者创建一个 vue 实例来调用"),a("code",{pre:!0},[s._v("$createHello")]),s._v("方法了，比如：")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n\nVue.prototype.$createHello(config, renderFn)\n\n"),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 或者")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" vm = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue()\nvm.$createHello(config, renderFn)\n")])])}]}}}); \ No newline at end of file diff --git a/docs/js/45.c5a6aed97d82e988760b.js b/docs/js/45.c5a6aed97d82e988760b.js deleted file mode 100644 index 83577beb699b265428bf20a6838b5ad1a6a8cb5d..0000000000000000000000000000000000000000 --- a/docs/js/45.c5a6aed97d82e988760b.js +++ /dev/null @@ -1 +0,0 @@ -webpackJsonp([45],{457:function(s,t,e){s.exports=e(521)},521:function(s,t,e){var a=e(11)(null,e(522),null,null,null);s.exports=a.exports},522:function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("section",[e("h2",{attrs:{id:"create-apimodule"}},[e("a",{staticClass:"anchor",attrs:{href:"#cube-create-apimodule-anchor","aria-hidden":"true"}},[e("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[e("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(" create-api module")]),s._v(" "),s._m(0),s._v(" "),e("h3",{attrs:{id:"createAPI(Vue,Component,[events,single])"}},[e("a",{staticClass:"anchor",attrs:{href:"#cube-createAPI(Vue,Component,[events,single])-anchor","aria-hidden":"true"}},[e("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[e("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(" createAPI(Vue, Component, [events, single])")]),s._v(" "),s._m(1)])},staticRenderFns:[function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("p",[s._v("This module exports a function called "),e("code",{pre:!0},[s._v("createAPI")]),s._v(" with which you can invoke the custom component which has been instantiated in api form.")])},function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("ul",[e("li",[e("p",[s._v("Parameters:")]),s._v(" "),e("ul",[e("li",[e("code",{pre:!0},[s._v("{Function} Vue")]),s._v(" Vue function")]),s._v(" "),e("li",[e("code",{pre:!0},[s._v("{Function | Object} Component")]),s._v(" Vue component which must contains "),e("code",{pre:!0},[s._v("name")])]),s._v(" "),e("li",[e("code",{pre:!0},[s._v("{Array} [events]")]),s._v(" the collection of the instantiated Vue Component's event name")]),s._v(" "),e("li",[e("code",{pre:!0},[s._v("{Boolean} [single]")]),s._v(" whether singleton")])])]),s._v(" "),e("li",[e("p",[s._v("Usage:")]),s._v(" "),e("ul",[e("li",[s._v("This method will add a method which is named "),e("code",{pre:!0},[s._v("$create{camelize(Component.name)}")]),s._v(" to Vue's prototype, so you can instantiate the Vue component by "),e("code",{pre:!0},[s._v("const instance = this.$createAaBb(config, [renderFn, single])")]),s._v(" in other components. The instantiated component's template content will be attached to "),e("code",{pre:!0},[s._v("body")]),s._v(" element.The parameters of the "),e("code",{pre:!0},[s._v("$createAaBb")]),s._v("：\n"),e("ul",[e("li",[e("code",{pre:!0},[s._v("{Object} config")]),s._v(" It will be passed to the component as its props except the events in "),e("code",{pre:!0},[s._v("events")]),s._v("(It will transform by default, eg: If "),e("code",{pre:!0},[s._v("events")]),s._v(" has value "),e("code",{pre:!0},[s._v("['click']")]),s._v(", then the prop "),e("code",{pre:!0},[s._v("onClick")]),s._v(" will be treated as component's event and not component's props).")]),s._v(" "),e("li",[e("code",{pre:!0},[s._v("{Function} [renderFn]")]),s._v(" Optional, used to generate the VNode child node in the slot scene in general.")]),s._v(" "),e("li",[e("code",{pre:!0},[s._v("{Boolean} [single]")]),s._v(" Optional, whether the instantiated component is a singleton or not. If two parameters are provided and the "),e("code",{pre:!0},[s._v("renderFn")]),s._v("'s type is not function, then the "),e("code",{pre:!0},[s._v("single")]),s._v(" value is the sencond parameter's value.")])])]),s._v(" "),e("li",[s._v("The return of the method "),e("code",{pre:!0},[s._v("instance")]),s._v(" is a instantiated Vue component，and the "),e("code",{pre:!0},[s._v("remove")]),s._v(" method will be "),e("strong",[s._v("attached")]),s._v(" to this instance.You can invoke the "),e("code",{pre:!0},[s._v("remove")]),s._v(" method to destroy the component and detach the component's content from "),e("code",{pre:!0},[s._v("body")]),s._v(" element.")])])]),s._v(" "),e("li",[e("p",[s._v("Example:")]),s._v(" "),e("p",[s._v("First we create Hello.vue component：")]),s._v(" "),e("pre",{pre:!0},[e("code",{attrs:{"v-pre":"",class:"language-html"}},[e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"clickHandler"')]),s._v(">")]),s._v("\n {{content}}\n "),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("slot")]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"other"')]),s._v(">")]),e("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),e("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),e("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"text/ecmascript-6"')]),s._v(">")]),e("span",{attrs:{class:"javascript"}},[s._v("\n "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'hello'")]),s._v(",\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("props")]),s._v(": {\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": {\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),e("span",{attrs:{class:"hljs-built_in"}},[s._v("String")]),s._v(",\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("default")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'Hello'")]),s._v("\n }\n },\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n clickHandler(e) {\n "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$emit("),e("span",{attrs:{class:"hljs-string"}},[s._v("'click'")]),s._v(", e)\n }\n }\n }\n")]),e("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])]),s._v(" "),e("p",[s._v("Then we make Hello.vue to an API style component by calling the "),e("code",{pre:!0},[s._v("createAPI")]),s._v(" method.")]),s._v(" "),e("pre",{pre:!0},[e("code",{attrs:{"v-pre":"",class:"language-js"}},[s._v(" "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),e("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Hello "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),e("span",{attrs:{class:"hljs-string"}},[s._v("'./Hello.vue'")]),s._v("\n\n "),e("span",{attrs:{class:"hljs-comment"}},[s._v("// import Style to load the base style")]),s._v("\n "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" {\n "),e("span",{attrs:{class:"hljs-comment"}},[s._v("/* eslint-disable no-unused-vars */")]),s._v("\n Style,\n Dialog,\n createAPI\n } "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),e("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\n\n Vue.use(Dialog)\n\n "),e("span",{attrs:{class:"hljs-comment"}},[s._v("// create this.$createHello API")]),s._v("\n createAPI(Vue, Hello, ["),e("span",{attrs:{class:"hljs-string"}},[s._v("'click'")]),s._v("], "),e("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(")\n\n "),e("span",{attrs:{class:"hljs-comment"}},[s._v("// init Vue")]),s._v("\n "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("el")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(",\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("render")]),s._v(": "),e("span",{attrs:{class:"hljs-function"}},[e("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v(" ("),e("span",{attrs:{class:"hljs-params"}},[s._v("h")]),s._v(") ")]),s._v("{\n "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" h("),e("span",{attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(", {\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("on")]),s._v(": {\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("click")]),s._v(": "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".showHello\n }\n }, ["),e("span",{attrs:{class:"hljs-string"}},[s._v("'Show Hello'")]),s._v("])\n },\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n showHello() {\n "),e("span",{attrs:{class:"hljs-comment"}},[s._v("/* The first parameter of `$createHello` will be passed to the component as its props except the events in `events`(It will transform by default, eg: If `events` has value `['click']`, then the prop `onClick` will be treated as component's event and not component's props) */")]),s._v("\n "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" instance = "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createHello({\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'My Hello Content'")]),s._v(",\n onClick(e) {\n "),e("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),e("span",{attrs:{class:"hljs-string"}},[s._v("'Hello component clicked.'")]),s._v(")\n }\n }, "),e("span",{attrs:{class:"hljs-comment"}},[s._v("/* renderFn */")]),s._v(" (createElement) => {\n "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" [\n createElement("),e("span",{attrs:{class:"hljs-string"}},[s._v("'p'")]),s._v(", {\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'other'")]),s._v("\n }, "),e("span",{attrs:{class:"hljs-string"}},[s._v("'other content'")]),s._v(")\n ]\n })\n "),e("span",{attrs:{class:"hljs-comment"}},[s._v("// Also, the event hanlder can be registered by instance's `$on` method")]),s._v("\n instance.$on("),e("span",{attrs:{class:"hljs-string"}},[s._v("'click'")]),s._v(", (e) => {\n "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" $dialog = "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createDialog({\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'confirm'")]),s._v(",\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'click confirm to remove current instance'")]),s._v(",\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-alert'")]),s._v("\n })\n $dialog.show()\n\n $dialog.$on("),e("span",{attrs:{class:"hljs-string"}},[s._v("'confirm'")]),s._v(", () => {\n "),e("span",{attrs:{class:"hljs-comment"}},[s._v("// remove instance")]),s._v("\n instance.remove()\n }).$on("),e("span",{attrs:{class:"hljs-string"}},[s._v("'cancel'")]),s._v(", () => {\n "),e("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),e("span",{attrs:{class:"hljs-string"}},[s._v("'cancel'")]),s._v(")\n })\n })\n }\n }\n })\n")])]),s._v(" "),e("p",[s._v("In this example, we create a component "),e("code",{pre:!0},[s._v("Hello")]),s._v(" which needs to be invoked in api form and we invoke it in another component.The focus is what "),e("code",{pre:!0},[s._v("showHello()")]),s._v(" does: invoking method "),e("code",{pre:!0},[s._v("this.$createHello(config, renderFn)")]),s._v(" to instantiate "),e("code",{pre:!0},[s._v("Hello")]),s._v(".")])])])}]}}}); \ No newline at end of file diff --git a/docs/js/45.f81a7b71ea74ff86a71d.js b/docs/js/45.f81a7b71ea74ff86a71d.js new file mode 100644 index 0000000000000000000000000000000000000000..a7d1b16fbb83b2492f6d92091b9b9e5dc484dde8 --- /dev/null +++ b/docs/js/45.f81a7b71ea74ff86a71d.js @@ -0,0 +1 @@ +webpackJsonp([45],{457:function(s,t,e){s.exports=e(521)},521:function(s,t,e){var a=e(11)(null,e(522),null,null,null);s.exports=a.exports},522:function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("section",[e("h2",{attrs:{id:"create-apimodule"}},[e("a",{staticClass:"anchor",attrs:{href:"#cube-create-apimodule-anchor","aria-hidden":"true"}},[e("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[e("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(" create-api module")]),s._v(" "),s._m(0),s._v(" "),e("h3",{attrs:{id:"createAPI(Vue,Component,[events,single])"}},[e("a",{staticClass:"anchor",attrs:{href:"#cube-createAPI(Vue,Component,[events,single])-anchor","aria-hidden":"true"}},[e("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[e("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(" createAPI(Vue, Component, [events, single])")]),s._v(" "),s._m(1),s._v(" "),e("h3",{attrs:{id:"HowtouseingeneralJSfiles"}},[e("a",{staticClass:"anchor",attrs:{href:"#cube-HowtouseingeneralJSfiles-anchor","aria-hidden":"true"}},[e("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[e("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(" How to use in general JS files")]),s._v(" "),s._m(2),s._v(" "),s._m(3),s._v(" "),e("p",[s._v("There is another idea which used the mode of data-driven. For example, in vuex, you could use a global state to label whether to call the component, and watch this state in App.vue to handle this component.")])])},staticRenderFns:[function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("p",[s._v("This module exports a function called "),e("code",{pre:!0},[s._v("createAPI")]),s._v(" with which you can invoke the custom component which has been instantiated in api form.")])},function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("ul",[e("li",[e("p",[s._v("Parameters:")]),s._v(" "),e("ul",[e("li",[e("code",{pre:!0},[s._v("{Function} Vue")]),s._v(" Vue function")]),s._v(" "),e("li",[e("code",{pre:!0},[s._v("{Function | Object} Component")]),s._v(" Vue component which must contains "),e("code",{pre:!0},[s._v("name")])]),s._v(" "),e("li",[e("code",{pre:!0},[s._v("{Array} [events]")]),s._v(" the collection of the instantiated Vue Component's event name")]),s._v(" "),e("li",[e("code",{pre:!0},[s._v("{Boolean} [single]")]),s._v(" whether singleton")])])]),s._v(" "),e("li",[e("p",[s._v("Usage:")]),s._v(" "),e("ul",[e("li",[s._v("This method will add a method which is named "),e("code",{pre:!0},[s._v("$create{camelize(Component.name)}")]),s._v(" to Vue's prototype, so you can instantiate the Vue component by "),e("code",{pre:!0},[s._v("const instance = this.$createAaBb(config, [renderFn, single])")]),s._v(" in other components. The instantiated component's template content will be attached to "),e("code",{pre:!0},[s._v("body")]),s._v(" element.The parameters of the "),e("code",{pre:!0},[s._v("$createAaBb")]),s._v("：\n"),e("ul",[e("li",[e("code",{pre:!0},[s._v("{Object} config")]),s._v(" It will be passed to the component as its props except the events in "),e("code",{pre:!0},[s._v("events")]),s._v("(It will transform by default, eg: If "),e("code",{pre:!0},[s._v("events")]),s._v(" has value "),e("code",{pre:!0},[s._v("['click']")]),s._v(", then the prop "),e("code",{pre:!0},[s._v("onClick")]),s._v(" will be treated as component's event and not component's props).")]),s._v(" "),e("li",[e("code",{pre:!0},[s._v("{Function} [renderFn]")]),s._v(" Optional, used to generate the VNode child node in the slot scene in general.")]),s._v(" "),e("li",[e("code",{pre:!0},[s._v("{Boolean} [single]")]),s._v(" Optional, whether the instantiated component is a singleton or not. If two parameters are provided and the "),e("code",{pre:!0},[s._v("renderFn")]),s._v("'s type is not function, then the "),e("code",{pre:!0},[s._v("single")]),s._v(" value is the sencond parameter's value.")])])]),s._v(" "),e("li",[s._v("The return of the method "),e("code",{pre:!0},[s._v("instance")]),s._v(" is a instantiated Vue component，and the "),e("code",{pre:!0},[s._v("remove")]),s._v(" method will be "),e("strong",[s._v("attached")]),s._v(" to this instance.You can invoke the "),e("code",{pre:!0},[s._v("remove")]),s._v(" method to destroy the component and detach the component's content from "),e("code",{pre:!0},[s._v("body")]),s._v(" element.")])])]),s._v(" "),e("li",[e("p",[s._v("Example:")]),s._v(" "),e("p",[s._v("First we create Hello.vue component：")]),s._v(" "),e("pre",{pre:!0},[e("code",{attrs:{"v-pre":"",class:"language-html"}},[e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"clickHandler"')]),s._v(">")]),s._v("\n {{content}}\n "),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("slot")]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"other"')]),s._v(">")]),e("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),e("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),e("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"text/ecmascript-6"')]),s._v(">")]),e("span",{attrs:{class:"javascript"}},[s._v("\n "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'hello'")]),s._v(",\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("props")]),s._v(": {\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": {\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),e("span",{attrs:{class:"hljs-built_in"}},[s._v("String")]),s._v(",\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("default")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'Hello'")]),s._v("\n }\n },\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n clickHandler(e) {\n "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$emit("),e("span",{attrs:{class:"hljs-string"}},[s._v("'click'")]),s._v(", e)\n }\n }\n }\n")]),e("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])]),s._v(" "),e("p",[s._v("Then we make Hello.vue to an API style component by calling the "),e("code",{pre:!0},[s._v("createAPI")]),s._v(" method.")]),s._v(" "),e("pre",{pre:!0},[e("code",{attrs:{"v-pre":"",class:"language-js"}},[s._v(" "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),e("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Hello "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),e("span",{attrs:{class:"hljs-string"}},[s._v("'./Hello.vue'")]),s._v("\n\n "),e("span",{attrs:{class:"hljs-comment"}},[s._v("// import Style to load the base style")]),s._v("\n "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" {\n "),e("span",{attrs:{class:"hljs-comment"}},[s._v("/* eslint-disable no-unused-vars */")]),s._v("\n Style,\n Dialog,\n createAPI\n } "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),e("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\n\n Vue.use(Dialog)\n\n "),e("span",{attrs:{class:"hljs-comment"}},[s._v("// create this.$createHello API")]),s._v("\n createAPI(Vue, Hello, ["),e("span",{attrs:{class:"hljs-string"}},[s._v("'click'")]),s._v("], "),e("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(")\n\n "),e("span",{attrs:{class:"hljs-comment"}},[s._v("// init Vue")]),s._v("\n "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("el")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(",\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("render")]),s._v(": "),e("span",{attrs:{class:"hljs-function"}},[e("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v(" ("),e("span",{attrs:{class:"hljs-params"}},[s._v("h")]),s._v(") ")]),s._v("{\n "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" h("),e("span",{attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(", {\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("on")]),s._v(": {\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("click")]),s._v(": "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".showHello\n }\n }, ["),e("span",{attrs:{class:"hljs-string"}},[s._v("'Show Hello'")]),s._v("])\n },\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n showHello() {\n "),e("span",{attrs:{class:"hljs-comment"}},[s._v("/* The first parameter of `$createHello` will be passed to the component as its props except the events in `events`(It will transform by default, eg: If `events` has value `['click']`, then the prop `onClick` will be treated as component's event and not component's props) */")]),s._v("\n "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" instance = "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createHello({\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'My Hello Content'")]),s._v(",\n onClick(e) {\n "),e("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),e("span",{attrs:{class:"hljs-string"}},[s._v("'Hello component clicked.'")]),s._v(")\n }\n }, "),e("span",{attrs:{class:"hljs-comment"}},[s._v("/* renderFn */")]),s._v(" (createElement) => {\n "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" [\n createElement("),e("span",{attrs:{class:"hljs-string"}},[s._v("'p'")]),s._v(", {\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'other'")]),s._v("\n }, "),e("span",{attrs:{class:"hljs-string"}},[s._v("'other content'")]),s._v(")\n ]\n })\n "),e("span",{attrs:{class:"hljs-comment"}},[s._v("// Also, the event hanlder can be registered by instance's `$on` method")]),s._v("\n instance.$on("),e("span",{attrs:{class:"hljs-string"}},[s._v("'click'")]),s._v(", (e) => {\n "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" $dialog = "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createDialog({\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'confirm'")]),s._v(",\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'click confirm to remove current instance'")]),s._v(",\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-alert'")]),s._v("\n })\n $dialog.show()\n\n $dialog.$on("),e("span",{attrs:{class:"hljs-string"}},[s._v("'confirm'")]),s._v(", () => {\n "),e("span",{attrs:{class:"hljs-comment"}},[s._v("// remove instance")]),s._v("\n instance.remove()\n }).$on("),e("span",{attrs:{class:"hljs-string"}},[s._v("'cancel'")]),s._v(", () => {\n "),e("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),e("span",{attrs:{class:"hljs-string"}},[s._v("'cancel'")]),s._v(")\n })\n })\n }\n }\n })\n")])]),s._v(" "),e("p",[s._v("In this example, we create a component "),e("code",{pre:!0},[s._v("Hello")]),s._v(" which needs to be invoked in api form and we invoke it in another component.The focus is what "),e("code",{pre:!0},[s._v("showHello()")]),s._v(" does: invoking method "),e("code",{pre:!0},[s._v("this.$createHello(config, renderFn)")]),s._v(" to instantiate "),e("code",{pre:!0},[s._v("Hello")]),s._v(".")])])])},function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("p",[s._v("In vue component, you could call by "),e("code",{pre:!0},[s._v("this.$createHello(config, renderFn)")]),s._v(" because the "),e("code",{pre:!0},[s._v("this")]),s._v(" is just a vue instance. But in general JS files, you need to call "),e("code",{pre:!0},[s._v("$createHello")]),s._v(" method by "),e("code",{pre:!0},[s._v("Vue.prototype")]),s._v(" or create a vue instance. As shown below:")])},function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("pre",{pre:!0},[e("code",{attrs:{"v-pre":"",class:"language-js"}},[e("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),e("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n\nVue.prototype.$createHello(config, renderFn)\n\n"),e("span",{attrs:{class:"hljs-comment"}},[s._v("// or")]),s._v("\n"),e("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" vm = "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue()\nvm.$createHello(config, renderFn)\n")])])}]}}}); \ No newline at end of file diff --git a/docs/js/manifest.cd7383a602e6f720be6e.js b/docs/js/manifest.dd8422c8f6d0447b623e.js similarity index 90% rename from docs/js/manifest.cd7383a602e6f720be6e.js rename to docs/js/manifest.dd8422c8f6d0447b623e.js index 227f2cfa3d22a3030a608f9f16930eed27b1aaaa..37fa8214082834854d665f57c7f2a95f096f21d9 100644 --- a/docs/js/manifest.cd7383a602e6f720be6e.js +++ b/docs/js/manifest.dd8422c8f6d0447b623e.js @@ -1 +1 @@ -!function(e){function c(a){if(f[a])return f[a].exports;var d=f[a]={i:a,l:!1,exports:{}};return e[a].call(d.exports,d,d.exports,c),d.l=!0,d.exports}var a=window.webpackJsonp;window.webpackJsonp=function(f,n,r){for(var b,t,o,u=0,i=[];u