Skip to content

C
cube-ui

DiDi / cube-ui
11 个月 前同步成功

通知 34
Star 9078
Fork 1508
C
cube-ui

体验新版 GitCode，发现更多精彩内容 >>

提交 42eeee9a 编写于 作者: A AmyFoxFN
浏览文件
操作

docs build

上级 e67a17a9
展开全部 隐藏空白更改
内联 并排
Showing with 6 addition and 6 deletion
docs/example/index.html
浏览文件 @ 42eeee9a
<!DOCTYPE html><html><head><meta charset=UTF-8><title>cube-ui lib</title><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"><link href=css/app.f5b59ce1a8ede686b3e97efff1496c68.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=js/manifest.346dd10710fe9c0348bf.js></script><script type=text/javascript src=js/vendor.cdf42c86d595e856feff.js></script><script type=text/javascript src=js/app.1bf49c8c560b5719e323.js></script></body></html>
\ No newline at end of file
<!DOCTYPE html><html><head><meta charset=UTF-8><title>cube-ui lib</title><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"><link href=css/app.f5b59ce1a8ede686b3e97efff1496c68.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=js/manifest.346dd10710fe9c0348bf.js></script><script type=text/javascript src=js/vendor.cdf42c86d595e856feff.js></script><script type=text/javascript src=js/app.49c277d6ddc7c47457b9.js></script></body></html>
\ No newline at end of file
docs/index.html
浏览文件 @ 42eeee9a
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"><meta name=x5-cache content=disable><meta name=keywords content=CUBE,UI,VUE,COMPONENT,LIB,LIBRARY><title>cube-ui Document</title><link href=/cube-ui/css/app.f1236850b8581363ac8b6b5cb46e011e.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/cube-ui/js/manifest.e1d1fda85462142da373.js></script><script type=text/javascript src=/cube-ui/js/vendor.2a0495e5180081667952.js></script><script type=text/javascript src=/cube-ui/js/app.0f40f574791a9f2d9209.js></script></body></html>
\ No newline at end of file
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"><meta name=x5-cache content=disable><meta name=keywords content=CUBE,UI,VUE,COMPONENT,LIB,LIBRARY><title>cube-ui Document</title><link href=/cube-ui/css/app.f1236850b8581363ac8b6b5cb46e011e.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/cube-ui/js/manifest.d157dc8a4588c1434a4e.js></script><script type=text/javascript src=/cube-ui/js/vendor.2a0495e5180081667952.js></script><script type=text/javascript src=/cube-ui/js/app.0f40f574791a9f2d9209.js></script></body></html>
\ No newline at end of file
docs/js/31.bfb552e0836a3dde3f83.js 0 → 100644
浏览文件 @ 42eeee9a
此差异已折叠。
docs/js/31.c792c895555ba98bb284.js 已删除 100644 → 0
浏览文件 @ e67a17a9
webpackJsonp([31],{LlmT: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-api模块"}},[e("a",{staticClass:"anchor",attrs:{href:"#cube-create-api模块-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 模块")]),s._v(" "),s._m(0),s._v(" "),s._m(1),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(2),s._v(" "),e("h3",{attrs:{id:"如何在普通js文件中或者全局调用"}},[e("a",{staticClass:"anchor",attrs:{href:"#cube-如何在普通js文件中或者全局调用-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(" 如何在普通 js 文件中或者全局调用")]),s._v(" "),s._m(3),s._v(" "),s._m(4),s._v(" "),e("p",[s._v("还有一种思路是通过数据驱动，比如用 vuex 维护一个全局 state，在需要调用该组件时更新状态，然后在 App.vue 里去 watch 这个状态变化来调用该组件。")])])},staticRenderFns:[function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("p",[s._v("该模块默认暴露出一个 "),e("code",{pre:!0},[s._v("createAPI")]),s._v(" 函数，可以实现以 API 的形式调用自定义组件。")])},function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("p",[e("strong",[s._v("注：")]),s._v(" 所有通过 "),e("code",{pre:!0},[s._v("createAPI")]),s._v(" 实现的通过 API 的形式调用的自定义组件都需要通过 "),e("code",{pre:!0},[s._v("Vue.use")]),s._v(" 注册才可以。")])},function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("ul",[e("li",[e("p",[s._v("参数：")]),s._v(" "),e("ul",[e("li",[e("code",{pre:!0},[s._v("{Function} Vue")]),s._v(" Vue 函数")]),s._v(" "),e("li",[e("code",{pre:!0},[s._v("{Function | Object} Component")]),s._v(" Vue 组件，组件必须有 name")]),s._v(" "),e("li",[e("code",{pre:!0},[s._v("{Array} [events]")]),s._v(" 组件实例 emit 的事件名集合")]),s._v(" "),e("li",[e("code",{pre:!0},[s._v("{Boolean} [single]")]),s._v(" 是否为单例")])])]),s._v(" "),e("li",[e("p",[s._v("用法：")]),s._v(" "),e("ul",[e("li",[e("p",[s._v("该方法在 Vue 的 prototype 上增加一个名为 "),e("code",{pre:!0},[s._v("$create{camelize(Component.name)}")]),s._v(" 的方法，这样就可以在其他组件中直接通过 "),e("code",{pre:!0},[s._v("const instance = this.$createAaBb(config, [renderFn, single])")]),s._v(" 这样来实例化组件了，而且这个实例化组件的元素是被附加到 "),e("code",{pre:!0},[s._v("body")]),s._v(" 元素下的。")])]),s._v(" "),e("li",[e("p",[e("code",{pre:!0},[s._v("const instance = this.$createAaBb(config, renderFn, single)")])]),s._v(" "),e("p",[s._v("参数：")]),s._v(" "),e("table",[e("thead",[e("tr",[e("th",[s._v("参数")]),s._v(" "),e("th",[s._v("说明")]),s._v(" "),e("th",[s._v("类型")]),s._v(" "),e("th",[s._v("默认值")]),s._v(" "),e("th",[s._v("示例")])])]),s._v(" "),e("tbody",[e("tr",[e("td",[s._v("config")]),s._v(" "),e("td",[s._v("配置参数，经处理后传给组件")]),s._v(" "),e("td",[s._v("Object")]),s._v(" "),e("td",[s._v("{}")]),s._v(" "),e("td",[s._v("-")])]),s._v(" "),e("tr",[e("td",[s._v("renderFn")]),s._v(" "),e("td",[s._v("可选参数，用于生成子 VNode 节点，一般场景是处理 slot")]),s._v(" "),e("td",[s._v("Function")]),s._v(" "),e("td",[s._v("-")]),s._v(" "),e("td",[s._v("function (createElement) {...}")])]),s._v(" "),e("tr",[e("td",[s._v("single")]),s._v(" "),e("td",[s._v("可选参数，创建的时候决定是否是单例的，优先级更高，如果没有传入 renderFn 的话，single 的值就是第二个参数的值")]),s._v(" "),e("td",[s._v("Boolean")]),s._v(" "),e("td",[s._v("createAPI() 中传入的 single")]),s._v(" "),e("td",[s._v("-")])])])]),s._v(" "),e("p",[s._v("配置参数 "),e("code",{pre:!0},[s._v("config")]),s._v("：")]),s._v(" "),e("p",[s._v("默认所有的值都会当做 props，但是要排除 createAPI 传入的 "),e("code",{pre:!0},[s._v("events")]),s._v(" 中的事件（默认会做转换，例如："),e("code",{pre:!0},[s._v("events")]),s._v(" 的值为 "),e("code",{pre:!0},[s._v("['click']")]),s._v("，那么 "),e("code",{pre:!0},[s._v("config")]),s._v(" 中的 "),e("code",{pre:!0},[s._v("onClick")]),s._v(" 就是作为 "),e("code",{pre:!0},[s._v("click")]),s._v(" 事件的回调函数，而不是作为 props 传递给组件）。")]),s._v(" "),e("p",[s._v("1.8.0 版本后 "),e("code",{pre:!0},[s._v("config")]),s._v(" 中可以直接设置 "),e("code",{pre:!0},[s._v("$props")]),s._v(" 和 "),e("code",{pre:!0},[s._v("$events")]),s._v("，"),e("code",{pre:!0},[s._v("$props")]),s._v(" 中的值是"),e("strong",[s._v("响应式")]),s._v("的，自动监控当前实例化上下文（即 "),e("code",{pre:!0},[s._v("this.$createXx")]),s._v(" 中的 "),e("code",{pre:!0},[s._v("this")]),s._v("）的上对应的属性值：")]),s._v(" "),e("table",[e("thead",[e("tr",[e("th",[s._v("参数")]),s._v(" "),e("th",[s._v("说明")]),s._v(" "),e("th",[s._v("类型")]),s._v(" "),e("th",[s._v("默认值")]),s._v(" "),e("th",[s._v("示例")])])]),s._v(" "),e("tbody",[e("tr",[e("td",[s._v("$props")]),s._v(" "),e("td",[s._v("传递给组件的 Props")]),s._v(" "),e("td",[s._v("Object")]),s._v(" "),e("td",[s._v("-")]),s._v(" "),e("td",[s._v("{"),e("br"),s._v(" title: 'title',"),e("br"),s._v(" content: 'my content',"),e("br"),s._v(" open: false"),e("br"),s._v("}")])]),s._v(" "),e("tr",[e("td",[s._v("$events")]),s._v(" "),e("td",[s._v("组件的 Events 事件回调")]),s._v(" "),e("td",[s._v("Object")]),s._v(" "),e("td",[s._v("-")]),s._v(" "),e("td",[s._v("{"),e("br"),s._v(" click: 'clickHandler',"),e("br"),s._v(" select: this.selectHandler"),e("br"),s._v("}")])])])]),s._v(" "),e("p",[e("code",{pre:!0},[s._v("$props")]),s._v(" 示例，约定结构 "),e("code",{pre:!0},[s._v("{ [key]: [propKey] }")]),s._v("：")]),s._v(" "),e("pre",{pre:!0},[e("code",{attrs:{"v-pre":"",class:"language-js"}},[s._v("{\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'title'")]),s._v(",\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'my content'")]),s._v(",\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("open")]),s._v(": "),e("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n}\n")])]),s._v(" "),e("p",[e("code",{pre:!0},[s._v("title")]),s._v("、"),e("code",{pre:!0},[s._v("content")]),s._v("、"),e("code",{pre:!0},[s._v("open")]),s._v(" 就是传递给组件的 Prop 的 key，而对应 Prop 的值则按照如下规则获取：")]),s._v(" "),e("ol",[e("li",[s._v("如果是非字符串，则直接取配置的 "),e("code",{pre:!0},[s._v("propKey")]),s._v(" 作为值")]),s._v(" "),e("li",[s._v("如果是字符串，且配置的 "),e("code",{pre:!0},[s._v("propKey")]),s._v(" 不在当前实例上下文属性上，则直接取 "),e("code",{pre:!0},[s._v("propKey")]),s._v(" 作为值")]),s._v(" "),e("li",[s._v("是字符串，且在当前实例上下文属性上，那么直接获取当前实例上下文对应的 "),e("code",{pre:!0},[s._v("propKey")]),s._v(" 的值，且会监控这个值的变化实时更新到组件实例上")])]),s._v(" "),e("p",[e("code",{pre:!0},[s._v("$events")]),s._v(" 示例，约定结构 "),e("code",{pre:!0},[s._v("{ [eventName]: [eventValue] }")]),s._v("：")]),s._v(" "),e("pre",{pre:!0},[e("code",{attrs:{"v-pre":"",class:"language-js"}},[s._v("{\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("click")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'clickHandler'")]),s._v(",\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("select")]),s._v(": "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".selectHandler\n}\n")])]),s._v(" "),e("p",[e("code",{pre:!0},[s._v("click")]),s._v("、"),e("code",{pre:!0},[s._v("select")]),s._v(" 就是事件名，而对应的事件回调则按照如下规则获取：")]),s._v(" "),e("ol",[e("li",[s._v("如果 "),e("code",{pre:!0},[s._v("eventValue")]),s._v(" 是非字符串，则直接取配置的 "),e("code",{pre:!0},[s._v("eventValue")]),s._v(" 作为值")]),s._v(" "),e("li",[s._v("如果 "),e("code",{pre:!0},[s._v("eventValue")]),s._v(" 是字符串，则直接获取当前实例上下文对应的 "),e("code",{pre:!0},[s._v("eventValue")]),s._v(" 的值")])]),s._v(" "),e("p",[s._v("返回值 "),e("code",{pre:!0},[s._v("instance")]),s._v("：")]),s._v(" "),e("p",[e("code",{pre:!0},[s._v("instance")]),s._v(" 就是组件实例，这个实例会被"),e("strong",[s._v("附加")]),s._v("或者"),e("strong",[s._v("代理")]),s._v(" "),e("code",{pre:!0},[s._v("remove")]),s._v(" 方法，如果调用了，该实例就会被销毁且会从 "),e("code",{pre:!0},[s._v("body")]),s._v(" 下移除。如果说实例化上下文（即 "),e("code",{pre:!0},[s._v("this.$createXx")]),s._v(" 中的 "),e("code",{pre:!0},[s._v("this")]),s._v("）销毁的话会自动移除销毁该实例元素。")])])])]),s._v(" "),e("li",[e("p",[s._v("示例：")]),s._v(" "),e("p",[s._v("我们先编写一个 Hello.vue 组件：")]),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("</"),e("span",{attrs:{class:"hljs-name"}},[s._v("slot")]),s._v(">")]),s._v("\n "),e("span",{attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),e("span",{attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("</"),e("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])]),s._v(" "),e("p",[s._v("然后我们再通过 "),e("code",{pre:!0},[s._v("createAPI")]),s._v(" 把 Hello.vue 变成一个 API 式调用的组件并调用。")]),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("// 引入 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("// 创建 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("// 初始化 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("// 直接调用")]),s._v("\n "),e("span",{attrs:{class:"hljs-comment"}},[s._v("// 传入配置对象，默认传入的所有对象全都当做 props 传入组件")]),s._v("\n "),e("span",{attrs:{class:"hljs-comment"}},[s._v("// 除了在调用 createAPI 的时候传入了 events，这里对应的就是")]),s._v("\n "),e("span",{attrs:{class:"hljs-comment"}},[s._v("// on{event name} 会被当做事件回调处理")]),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("// 通过 Vue 组件的 $on 也是可以监听的，看使用场景")]),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("'点击确定关闭当前实例'")]),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("// 销毁实例")]),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("示例中就是创建了一个需要 API 调用的组件 "),e("code",{pre:!0},[s._v("Hello")]),s._v("，然后在其他组件中去使用，重点就是 "),e("code",{pre:!0},[s._v("showHello()")]),s._v(" 方法做的事情：调用 "),e("code",{pre:!0},[s._v("this.$createHello(config, renderFn)")]),s._v(" 实现组件的实例化。")])])])},function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("p",[s._v("一般当你在 Vue 实例中，你可以直接通过 "),e("code",{pre:!0},[s._v("this.$createHello(config, renderFn)")]),s._v(" 调用该组件。而如果在普通 JS 中"),e("code",{pre:!0},[s._v("this")]),s._v("不是 Vue 实例，这时就可以通过组件本身的 "),e("code",{pre:!0},[s._v("$create")]),s._v(" 来进行实例化了，比如：")])},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(" 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\nHello.$create(config, renderFn)\n")])])}]}},"Nx+F":function(s,t,e){s.exports=e("PtgT")},PtgT:function(s,t,e){var a=e("VU/8")(null,e("LlmT"),null,null,null);s.exports=a.exports}});
\ No newline at end of file
docs/js/67.4e1d2daccb6c00d38fd4.js 0 → 100644
浏览文件 @ 42eeee9a
webpackJsonp([67],{"3JND":function(e,t,s){var a=s("VU/8")(null,s("3OQM"),null,null,null);e.exports=a.exports},"3OQM":function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("section",[s("h2",{attrs:{id:"create-apimodule"}},[s("a",{staticClass:"anchor",attrs:{href:"#cube-create-apimodule-anchor","aria-hidden":"true"}},[s("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[s("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"}})])]),e._v(" create-api module")]),e._v(" "),e._m(0),e._v(" "),e._m(1),e._v(" "),s("h3",{attrs:{id:"createAPI(Vue,Component,[events,single])"}},[s("a",{staticClass:"anchor",attrs:{href:"#cube-createAPI(Vue,Component,[events,single])-anchor","aria-hidden":"true"}},[s("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[s("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"}})])]),e._v(" createAPI(Vue, Component, [events, single])")]),e._v(" "),e._m(2),e._v(" "),s("h3",{attrs:{id:"HowtouseingeneralJSfilesoruseitinglobal"}},[s("a",{staticClass:"anchor",attrs:{href:"#cube-HowtouseingeneralJSfilesoruseitinglobal-anchor","aria-hidden":"true"}},[s("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[s("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"}})])]),e._v(" How to use in general JS files or use it in global")]),e._v(" "),e._m(3),e._v(" "),e._m(4),e._v(" "),s("p",[e._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 e=this,t=e.$createElement,s=e._self._c||t;return s("p",[e._v("This module exports a function called "),s("code",{pre:!0},[e._v("createAPI")]),e._v(" with which you can invoke the custom component which has been instantiated in api form. And It could be called both in Vue instance context and "),s("a",{attrs:{href:"#/en-US/docs/create-api#cube-HowtouseingeneralJSfilesoruseitinglobal-anchor"}},[e._v("general js file")]),e._v(".")])},function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("p",[s("strong",[e._v("Notice:")]),e._v(" All componnets which used "),s("code",{pre:!0},[e._v("createAPI")]),e._v(" must be registered by "),s("code",{pre:!0},[e._v("Vue.use")]),e._v(".")])},function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("ul",[s("li",[s("p",[e._v("Parameters:")]),e._v(" "),s("ul",[s("li",[s("code",{pre:!0},[e._v("{Function} Vue")]),e._v(" Vue function")]),e._v(" "),s("li",[s("code",{pre:!0},[e._v("{Function | Object} Component")]),e._v(" Vue component which must contains "),s("code",{pre:!0},[e._v("name")])]),e._v(" "),s("li",[s("code",{pre:!0},[e._v("{Array} [events]")]),e._v(" the collection of the instantiated Vue Component's event name")]),e._v(" "),s("li",[s("code",{pre:!0},[e._v("{Boolean} [single]")]),e._v(" whether singleton")])])]),e._v(" "),s("li",[s("p",[e._v("Usage:")]),e._v(" "),s("ul",[s("li",[s("p",[e._v("This method will add a method which is named "),s("code",{pre:!0},[e._v("$create{camelize(Component.name)}")]),e._v(" to Vue's prototype, so you can instantiate the Vue component by "),s("code",{pre:!0},[e._v("const instance = this.$createAaBb(config, [renderFn, single])")]),e._v(" in other components. The instantiated component's template content will be attached to "),s("code",{pre:!0},[e._v("body")]),e._v(" element.")])]),e._v(" "),s("li",[s("p",[s("code",{pre:!0},[e._v("const instance = this.$createAaBb(config, renderFn, single)")])]),e._v(" "),s("p",[e._v("Parameters：")]),e._v(" "),s("table",[s("thead",[s("tr",[s("th",[e._v("Attribute")]),e._v(" "),s("th",[e._v("Description")]),e._v(" "),s("th",[e._v("Type")]),e._v(" "),s("th",[e._v("Accepted Values")]),e._v(" "),s("th",[e._v("Default")])])]),e._v(" "),s("tbody",[s("tr",[s("td",[e._v("config")]),e._v(" "),s("td",[e._v("Config options")]),e._v(" "),s("td",[e._v("Object")]),e._v(" "),s("td",[e._v("{}")]),e._v(" "),s("td",[e._v("-")])]),e._v(" "),s("tr",[s("td",[e._v("renderFn")]),e._v(" "),s("td",[e._v("Optional, used to generate the VNode child node in the slot scene in general")]),e._v(" "),s("td",[e._v("Function")]),e._v(" "),s("td",[e._v("-")]),e._v(" "),s("td",[e._v("function (createElement) {...}")])]),e._v(" "),s("tr",[s("td",[e._v("single")]),e._v(" "),s("td",[e._v("Optional, whether the instantiated component is a singleton or not. If two parameters are provided and the "),s("code",{pre:!0},[e._v("renderFn")]),e._v("'s type is not function, then the "),s("code",{pre:!0},[e._v("single")]),e._v(" value is the sencond parameter's value.")]),e._v(" "),s("td",[e._v("Boolean")]),e._v(" "),s("td",[e._v("single in createAPI()")]),e._v(" "),s("td",[e._v("-")])])])]),e._v(" "),s("p",[e._v("Config options "),s("code",{pre:!0},[e._v("config")]),e._v(":")]),e._v(" "),s("p",[e._v("It will be passed to the component as its props except the events in "),s("code",{pre:!0},[e._v("events")]),e._v("(It will transform by default, eg: If "),s("code",{pre:!0},[e._v("events")]),e._v(" has value "),s("code",{pre:!0},[e._v("['click']")]),e._v(", then the prop "),s("code",{pre:!0},[e._v("onClick")]),e._v(" will be treated as component's event and not component's props).")]),e._v(" "),s("p",[e._v("After 1.8.0+, you can set "),s("code",{pre:!0},[e._v("$props")]),e._v(" and "),s("code",{pre:!0},[e._v("$events")]),e._v(" in "),s("code",{pre:!0},[e._v("config")]),e._v(", "),s("code",{pre:!0},[e._v("$props")]),e._v(" supported reactive properties, these props will be watched.")]),e._v(" "),s("table",[s("thead",[s("tr",[s("th",[e._v("Attribute")]),e._v(" "),s("th",[e._v("Description")]),e._v(" "),s("th",[e._v("Type")]),e._v(" "),s("th",[e._v("Accepted Values")]),e._v(" "),s("th",[e._v("Default")])])]),e._v(" "),s("tbody",[s("tr",[s("td",[e._v("$props")]),e._v(" "),s("td",[e._v("Component props")]),e._v(" "),s("td",[e._v("Object")]),e._v(" "),s("td",[e._v("-")]),e._v(" "),s("td",[e._v("{"),s("br"),e._v(" title: 'title',"),s("br"),e._v(" content: 'my content',"),s("br"),e._v(" open: false"),s("br"),e._v("}")])]),e._v(" "),s("tr",[s("td",[e._v("$events")]),e._v(" "),s("td",[e._v("Component event handlers")]),e._v(" "),s("td",[e._v("Object")]),e._v(" "),s("td",[e._v("-")]),e._v(" "),s("td",[e._v("{"),s("br"),e._v(" click: 'clickHandler',"),s("br"),e._v(" select: this.selectHandler"),s("br"),e._v("}")])])])]),e._v(" "),s("p",[s("code",{pre:!0},[e._v("$props")]),e._v(" example, "),s("code",{pre:!0},[e._v("{ [key]: [propKey] }")]),e._v(":")]),e._v(" "),s("pre",{pre:!0},[s("code",{attrs:{"v-pre":"",class:"language-js"}},[e._v("{\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("title")]),e._v(": "),s("span",{attrs:{class:"hljs-string"}},[e._v("'title'")]),e._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("content")]),e._v(": "),s("span",{attrs:{class:"hljs-string"}},[e._v("'my content'")]),e._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("open")]),e._v(": "),s("span",{attrs:{class:"hljs-literal"}},[e._v("false")]),e._v("\n}\n")])]),e._v(" "),s("p",[s("code",{pre:!0},[e._v("title")]),e._v(", "),s("code",{pre:!0},[e._v("content")]),e._v(" and "),s("code",{pre:!0},[e._v("open")]),e._v(" are keys of the component prop, and the prop' value will be taken by the following steps:")]),e._v(" "),s("ol",[s("li",[e._v("If "),s("code",{pre:!0},[e._v("propKey")]),e._v(" is not a string value, then use "),s("code",{pre:!0},[e._v("propKey")]),e._v(" as the prop value.")]),e._v(" "),s("li",[e._v("If "),s("code",{pre:!0},[e._v("propKey")]),e._v(" is a string value and the caller instance dont have the "),s("code",{pre:!0},[e._v("propKey")]),e._v(" property, then use "),s("code",{pre:!0},[e._v("propKey")]),e._v(" as the prop value.")]),e._v(" "),s("li",[e._v("If "),s("code",{pre:!0},[e._v("propKey")]),e._v(" is a string value and the caller instance have the "),s("code",{pre:!0},[e._v("propKey")]),e._v(" property, then use the caller's "),s("code",{pre:!0},[e._v("propKey")]),e._v(" property value as the prop value. And the prop value will be reactively.")])]),e._v(" "),s("p",[s("code",{pre:!0},[e._v("$events")]),e._v(" example, "),s("code",{pre:!0},[e._v("{ [eventName]: [eventValue] }")]),e._v(":")]),e._v(" "),s("pre",{pre:!0},[s("code",{attrs:{"v-pre":"",class:"language-js"}},[e._v("{\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("click")]),e._v(": "),s("span",{attrs:{class:"hljs-string"}},[e._v("'clickHandler'")]),e._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("select")]),e._v(": "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("this")]),e._v(".selectHandler\n}\n")])]),e._v(" "),s("p",[s("code",{pre:!0},[e._v("click")]),e._v(" and "),s("code",{pre:!0},[e._v("select")]),e._v(" are event names, and the event handlers will be taken by the following steps:")]),e._v(" "),s("ol",[s("li",[e._v("If "),s("code",{pre:!0},[e._v("eventValue")]),e._v(" is not a string value, then use "),s("code",{pre:!0},[e._v("eventValue")]),e._v(" as the event handler.")]),e._v(" "),s("li",[e._v("If "),s("code",{pre:!0},[e._v("eventValue")]),e._v(" is a string value, then use the caller's "),s("code",{pre:!0},[e._v("eventValue")]),e._v(" property value as the event handler.")])]),e._v(" "),s("p",[e._v("The Returned value "),s("code",{pre:!0},[e._v("instance")]),e._v(":")]),e._v(" "),s("p",[s("code",{pre:!0},[e._v("instance")]),e._v(" is a instantiated Vue component，and the "),s("code",{pre:!0},[e._v("remove")]),e._v(" method will be "),s("strong",[e._v("attached")]),e._v(" to this instance.You can invoke the "),s("code",{pre:!0},[e._v("remove")]),e._v(" method to destroy the component and detach the component's content from "),s("code",{pre:!0},[e._v("body")]),e._v(" element. If the caller is destroyed and the "),s("code",{pre:!0},[e._v("instance")]),e._v(" will be destroyed too.")])])])]),e._v(" "),s("li",[s("p",[e._v("Example:")]),e._v(" "),s("p",[e._v("First we create Hello.vue component：")]),e._v(" "),s("pre",{pre:!0},[s("code",{attrs:{"v-pre":"",class:"language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[e._v("<"),s("span",{attrs:{class:"hljs-name"}},[e._v("template")]),e._v(">")]),e._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[e._v("<"),s("span",{attrs:{class:"hljs-name"}},[e._v("div")]),e._v(" "),s("span",{attrs:{class:"hljs-attr"}},[e._v("@click")]),e._v("="),s("span",{attrs:{class:"hljs-string"}},[e._v('"clickHandler"')]),e._v(">")]),e._v("\n {{content}}\n "),s("span",{attrs:{class:"hljs-tag"}},[e._v("<"),s("span",{attrs:{class:"hljs-name"}},[e._v("slot")]),e._v(" "),s("span",{attrs:{class:"hljs-attr"}},[e._v("name")]),e._v("="),s("span",{attrs:{class:"hljs-string"}},[e._v('"other"')]),e._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[e._v("</"),s("span",{attrs:{class:"hljs-name"}},[e._v("slot")]),e._v(">")]),e._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[e._v("</"),s("span",{attrs:{class:"hljs-name"}},[e._v("div")]),e._v(">")]),e._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[e._v("</"),s("span",{attrs:{class:"hljs-name"}},[e._v("template")]),e._v(">")]),e._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[e._v("<"),s("span",{attrs:{class:"hljs-name"}},[e._v("script")]),e._v(" "),s("span",{attrs:{class:"hljs-attr"}},[e._v("type")]),e._v("="),s("span",{attrs:{class:"hljs-string"}},[e._v('"text/ecmascript-6"')]),e._v(">")]),s("span",{attrs:{class:"javascript"}},[e._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("export")]),e._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("default")]),e._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("name")]),e._v(": "),s("span",{attrs:{class:"hljs-string"}},[e._v("'hello'")]),e._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("props")]),e._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("content")]),e._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("type")]),e._v(": "),s("span",{attrs:{class:"hljs-built_in"}},[e._v("String")]),e._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("default")]),e._v(": "),s("span",{attrs:{class:"hljs-string"}},[e._v("'Hello'")]),e._v("\n }\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("methods")]),e._v(": {\n clickHandler(e) {\n "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("this")]),e._v(".$emit("),s("span",{attrs:{class:"hljs-string"}},[e._v("'click'")]),e._v(", e)\n }\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[e._v("</"),s("span",{attrs:{class:"hljs-name"}},[e._v("script")]),e._v(">")]),e._v("\n")])]),e._v(" "),s("p",[e._v("Then we make Hello.vue to an API style component by calling the "),s("code",{pre:!0},[e._v("createAPI")]),e._v(" method.")]),e._v(" "),s("pre",{pre:!0},[s("code",{attrs:{"v-pre":"",class:"language-js"}},[e._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("import")]),e._v(" Vue "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("from")]),e._v(" "),s("span",{attrs:{class:"hljs-string"}},[e._v("'vue'")]),e._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("import")]),e._v(" Hello "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("from")]),e._v(" "),s("span",{attrs:{class:"hljs-string"}},[e._v("'./Hello.vue'")]),e._v("\n\n "),s("span",{attrs:{class:"hljs-comment"}},[e._v("// import Style to load the base style")]),e._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("import")]),e._v(" {\n "),s("span",{attrs:{class:"hljs-comment"}},[e._v("/* eslint-disable no-unused-vars */")]),e._v("\n Style,\n Dialog,\n createAPI\n } "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("from")]),e._v(" "),s("span",{attrs:{class:"hljs-string"}},[e._v("'cube-ui'")]),e._v("\n\n Vue.use(Dialog)\n\n "),s("span",{attrs:{class:"hljs-comment"}},[e._v("// create this.$createHello API")]),e._v("\n createAPI(Vue, Hello, ["),s("span",{attrs:{class:"hljs-string"}},[e._v("'click'")]),e._v("], "),s("span",{attrs:{class:"hljs-literal"}},[e._v("true")]),e._v(")\n\n "),s("span",{attrs:{class:"hljs-comment"}},[e._v("// init Vue")]),e._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("new")]),e._v(" Vue({\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("el")]),e._v(": "),s("span",{attrs:{class:"hljs-string"}},[e._v("'#app'")]),e._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("render")]),e._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[e._v("function")]),e._v(" ("),s("span",{attrs:{class:"hljs-params"}},[e._v("h")]),e._v(") ")]),e._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("return")]),e._v(" h("),s("span",{attrs:{class:"hljs-string"}},[e._v("'button'")]),e._v(", {\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("on")]),e._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("click")]),e._v(": "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("this")]),e._v(".showHello\n }\n }, ["),s("span",{attrs:{class:"hljs-string"}},[e._v("'Show Hello'")]),e._v("])\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("methods")]),e._v(": {\n showHello() {\n "),s("span",{attrs:{class:"hljs-comment"}},[e._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) */")]),e._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("const")]),e._v(" instance = "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("this")]),e._v(".$createHello({\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("content")]),e._v(": "),s("span",{attrs:{class:"hljs-string"}},[e._v("'My Hello Content'")]),e._v(",\n onClick(e) {\n "),s("span",{attrs:{class:"hljs-built_in"}},[e._v("console")]),e._v(".log("),s("span",{attrs:{class:"hljs-string"}},[e._v("'Hello component clicked.'")]),e._v(")\n }\n }, "),s("span",{attrs:{class:"hljs-comment"}},[e._v("/* renderFn */")]),e._v(" (createElement) => {\n "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("return")]),e._v(" [\n createElement("),s("span",{attrs:{class:"hljs-string"}},[e._v("'p'")]),e._v(", {\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("slot")]),e._v(": "),s("span",{attrs:{class:"hljs-string"}},[e._v("'other'")]),e._v("\n }, "),s("span",{attrs:{class:"hljs-string"}},[e._v("'other content'")]),e._v(")\n ]\n })\n "),s("span",{attrs:{class:"hljs-comment"}},[e._v("// Also, the event hanlder can be registered by instance's `$on` method")]),e._v("\n instance.$on("),s("span",{attrs:{class:"hljs-string"}},[e._v("'click'")]),e._v(", (e) => {\n "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("const")]),e._v(" $dialog = "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("this")]),e._v(".$createDialog({\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("type")]),e._v(": "),s("span",{attrs:{class:"hljs-string"}},[e._v("'confirm'")]),e._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("content")]),e._v(": "),s("span",{attrs:{class:"hljs-string"}},[e._v("'click confirm to remove current instance'")]),e._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("icon")]),e._v(": "),s("span",{attrs:{class:"hljs-string"}},[e._v("'cubeic-alert'")]),e._v("\n })\n $dialog.show()\n\n $dialog.$on("),s("span",{attrs:{class:"hljs-string"}},[e._v("'confirm'")]),e._v(", () => {\n "),s("span",{attrs:{class:"hljs-comment"}},[e._v("// remove instance")]),e._v("\n instance.remove()\n }).$on("),s("span",{attrs:{class:"hljs-string"}},[e._v("'cancel'")]),e._v(", () => {\n "),s("span",{attrs:{class:"hljs-built_in"}},[e._v("console")]),e._v(".log("),s("span",{attrs:{class:"hljs-string"}},[e._v("'cancel'")]),e._v(")\n })\n })\n }\n }\n })\n")])]),e._v(" "),s("p",[e._v("In this example, we create a component "),s("code",{pre:!0},[e._v("Hello")]),e._v(" which needs to be invoked in api form and we invoke it in another component.The focus is what "),s("code",{pre:!0},[e._v("showHello()")]),e._v(" does: invoking method "),s("code",{pre:!0},[e._v("this.$createHello(config, renderFn)")]),e._v(" to instantiate "),s("code",{pre:!0},[e._v("Hello")]),e._v(".")])])])},function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("p",[e._v("In vue component, you could call by "),s("code",{pre:!0},[e._v("this.$createHello(config, renderFn)")]),e._v(" because the "),s("code",{pre:!0},[e._v("this")]),e._v(" is just a Vue instance. But in general JS files, you need to use "),s("code",{pre:!0},[e._v("Hello.$create")]),e._v(". As shown below:")])},function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("pre",{pre:!0},[s("code",{attrs:{"v-pre":"",class:"language-js"}},[s("span",{attrs:{class:"hljs-keyword"}},[e._v("import")]),e._v(" Hello "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("from")]),e._v(" "),s("span",{attrs:{class:"hljs-string"}},[e._v("'./hello.vue'")]),e._v("\n\nHello.$create(config, renderFn)\n")])])}]}},"i/fd":function(e,t,s){e.exports=s("3JND")}});
\ No newline at end of file
docs/js/67.6c57aa958802f5968818.js 已删除 100644 → 0
浏览文件 @ e67a17a9
webpackJsonp([67],{"3JND":function(e,t,s){var a=s("VU/8")(null,s("3OQM"),null,null,null);e.exports=a.exports},"3OQM":function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("section",[s("h2",{attrs:{id:"create-apimodule"}},[s("a",{staticClass:"anchor",attrs:{href:"#cube-create-apimodule-anchor","aria-hidden":"true"}},[s("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[s("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"}})])]),e._v(" create-api module")]),e._v(" "),e._m(0),e._v(" "),e._m(1),e._v(" "),s("h3",{attrs:{id:"createAPI(Vue,Component,[events,single])"}},[s("a",{staticClass:"anchor",attrs:{href:"#cube-createAPI(Vue,Component,[events,single])-anchor","aria-hidden":"true"}},[s("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[s("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"}})])]),e._v(" createAPI(Vue, Component, [events, single])")]),e._v(" "),e._m(2),e._v(" "),s("h3",{attrs:{id:"HowtouseingeneralJSfilesoruseitinglobal"}},[s("a",{staticClass:"anchor",attrs:{href:"#cube-HowtouseingeneralJSfilesoruseitinglobal-anchor","aria-hidden":"true"}},[s("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[s("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"}})])]),e._v(" How to use in general JS files or use it in global")]),e._v(" "),e._m(3),e._v(" "),e._m(4),e._v(" "),s("p",[e._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 e=this,t=e.$createElement,s=e._self._c||t;return s("p",[e._v("This module exports a function called "),s("code",{pre:!0},[e._v("createAPI")]),e._v(" with which you can invoke the custom component which has been instantiated in api form.")])},function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("p",[s("strong",[e._v("Notice:")]),e._v(" All componnets which used "),s("code",{pre:!0},[e._v("createAPI")]),e._v(" must be registered by "),s("code",{pre:!0},[e._v("Vue.use")]),e._v(".")])},function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("ul",[s("li",[s("p",[e._v("Parameters:")]),e._v(" "),s("ul",[s("li",[s("code",{pre:!0},[e._v("{Function} Vue")]),e._v(" Vue function")]),e._v(" "),s("li",[s("code",{pre:!0},[e._v("{Function | Object} Component")]),e._v(" Vue component which must contains "),s("code",{pre:!0},[e._v("name")])]),e._v(" "),s("li",[s("code",{pre:!0},[e._v("{Array} [events]")]),e._v(" the collection of the instantiated Vue Component's event name")]),e._v(" "),s("li",[s("code",{pre:!0},[e._v("{Boolean} [single]")]),e._v(" whether singleton")])])]),e._v(" "),s("li",[s("p",[e._v("Usage:")]),e._v(" "),s("ul",[s("li",[s("p",[e._v("This method will add a method which is named "),s("code",{pre:!0},[e._v("$create{camelize(Component.name)}")]),e._v(" to Vue's prototype, so you can instantiate the Vue component by "),s("code",{pre:!0},[e._v("const instance = this.$createAaBb(config, [renderFn, single])")]),e._v(" in other components. The instantiated component's template content will be attached to "),s("code",{pre:!0},[e._v("body")]),e._v(" element.")])]),e._v(" "),s("li",[s("p",[s("code",{pre:!0},[e._v("const instance = this.$createAaBb(config, renderFn, single)")])]),e._v(" "),s("p",[e._v("Parameters：")]),e._v(" "),s("table",[s("thead",[s("tr",[s("th",[e._v("Attribute")]),e._v(" "),s("th",[e._v("Description")]),e._v(" "),s("th",[e._v("Type")]),e._v(" "),s("th",[e._v("Accepted Values")]),e._v(" "),s("th",[e._v("Default")])])]),e._v(" "),s("tbody",[s("tr",[s("td",[e._v("config")]),e._v(" "),s("td",[e._v("Config options")]),e._v(" "),s("td",[e._v("Object")]),e._v(" "),s("td",[e._v("{}")]),e._v(" "),s("td",[e._v("-")])]),e._v(" "),s("tr",[s("td",[e._v("renderFn")]),e._v(" "),s("td",[e._v("Optional, used to generate the VNode child node in the slot scene in general")]),e._v(" "),s("td",[e._v("Function")]),e._v(" "),s("td",[e._v("-")]),e._v(" "),s("td",[e._v("function (createElement) {...}")])]),e._v(" "),s("tr",[s("td",[e._v("single")]),e._v(" "),s("td",[e._v("Optional, whether the instantiated component is a singleton or not. If two parameters are provided and the "),s("code",{pre:!0},[e._v("renderFn")]),e._v("'s type is not function, then the "),s("code",{pre:!0},[e._v("single")]),e._v(" value is the sencond parameter's value.")]),e._v(" "),s("td",[e._v("Boolean")]),e._v(" "),s("td",[e._v("single in createAPI()")]),e._v(" "),s("td",[e._v("-")])])])]),e._v(" "),s("p",[e._v("Config options "),s("code",{pre:!0},[e._v("config")]),e._v(":")]),e._v(" "),s("p",[e._v("It will be passed to the component as its props except the events in "),s("code",{pre:!0},[e._v("events")]),e._v("(It will transform by default, eg: If "),s("code",{pre:!0},[e._v("events")]),e._v(" has value "),s("code",{pre:!0},[e._v("['click']")]),e._v(", then the prop "),s("code",{pre:!0},[e._v("onClick")]),e._v(" will be treated as component's event and not component's props).")]),e._v(" "),s("p",[e._v("After 1.8.0+, you can set "),s("code",{pre:!0},[e._v("$props")]),e._v(" and "),s("code",{pre:!0},[e._v("$events")]),e._v(" in "),s("code",{pre:!0},[e._v("config")]),e._v(", "),s("code",{pre:!0},[e._v("$props")]),e._v(" supported reactive properties, these props will be watched.")]),e._v(" "),s("table",[s("thead",[s("tr",[s("th",[e._v("Attribute")]),e._v(" "),s("th",[e._v("Description")]),e._v(" "),s("th",[e._v("Type")]),e._v(" "),s("th",[e._v("Accepted Values")]),e._v(" "),s("th",[e._v("Default")])])]),e._v(" "),s("tbody",[s("tr",[s("td",[e._v("$props")]),e._v(" "),s("td",[e._v("Component props")]),e._v(" "),s("td",[e._v("Object")]),e._v(" "),s("td",[e._v("-")]),e._v(" "),s("td",[e._v("{"),s("br"),e._v(" title: 'title',"),s("br"),e._v(" content: 'my content',"),s("br"),e._v(" open: false"),s("br"),e._v("}")])]),e._v(" "),s("tr",[s("td",[e._v("$events")]),e._v(" "),s("td",[e._v("Component event handlers")]),e._v(" "),s("td",[e._v("Object")]),e._v(" "),s("td",[e._v("-")]),e._v(" "),s("td",[e._v("{"),s("br"),e._v(" click: 'clickHandler',"),s("br"),e._v(" select: this.selectHandler"),s("br"),e._v("}")])])])]),e._v(" "),s("p",[s("code",{pre:!0},[e._v("$props")]),e._v(" example, "),s("code",{pre:!0},[e._v("{ [key]: [propKey] }")]),e._v(":")]),e._v(" "),s("pre",{pre:!0},[s("code",{attrs:{"v-pre":"",class:"language-js"}},[e._v("{\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("title")]),e._v(": "),s("span",{attrs:{class:"hljs-string"}},[e._v("'title'")]),e._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("content")]),e._v(": "),s("span",{attrs:{class:"hljs-string"}},[e._v("'my content'")]),e._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("open")]),e._v(": "),s("span",{attrs:{class:"hljs-literal"}},[e._v("false")]),e._v("\n}\n")])]),e._v(" "),s("p",[s("code",{pre:!0},[e._v("title")]),e._v(", "),s("code",{pre:!0},[e._v("content")]),e._v(" and "),s("code",{pre:!0},[e._v("open")]),e._v(" are keys of the component prop, and the prop' value will be taken by the following steps:")]),e._v(" "),s("ol",[s("li",[e._v("If "),s("code",{pre:!0},[e._v("propKey")]),e._v(" is not a string value, then use "),s("code",{pre:!0},[e._v("propKey")]),e._v(" as the prop value.")]),e._v(" "),s("li",[e._v("If "),s("code",{pre:!0},[e._v("propKey")]),e._v(" is a string value and the caller instance dont have the "),s("code",{pre:!0},[e._v("propKey")]),e._v(" property, then use "),s("code",{pre:!0},[e._v("propKey")]),e._v(" as the prop value.")]),e._v(" "),s("li",[e._v("If "),s("code",{pre:!0},[e._v("propKey")]),e._v(" is a string value and the caller instance have the "),s("code",{pre:!0},[e._v("propKey")]),e._v(" property, then use the caller's "),s("code",{pre:!0},[e._v("propKey")]),e._v(" property value as the prop value. And the prop value will be reactively.")])]),e._v(" "),s("p",[s("code",{pre:!0},[e._v("$events")]),e._v(" example, "),s("code",{pre:!0},[e._v("{ [eventName]: [eventValue] }")]),e._v(":")]),e._v(" "),s("pre",{pre:!0},[s("code",{attrs:{"v-pre":"",class:"language-js"}},[e._v("{\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("click")]),e._v(": "),s("span",{attrs:{class:"hljs-string"}},[e._v("'clickHandler'")]),e._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("select")]),e._v(": "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("this")]),e._v(".selectHandler\n}\n")])]),e._v(" "),s("p",[s("code",{pre:!0},[e._v("click")]),e._v(" and "),s("code",{pre:!0},[e._v("select")]),e._v(" are event names, and the event handlers will be taken by the following steps:")]),e._v(" "),s("ol",[s("li",[e._v("If "),s("code",{pre:!0},[e._v("eventValue")]),e._v(" is not a string value, then use "),s("code",{pre:!0},[e._v("eventValue")]),e._v(" as the event handler.")]),e._v(" "),s("li",[e._v("If "),s("code",{pre:!0},[e._v("eventValue")]),e._v(" is a string value, then use the caller's "),s("code",{pre:!0},[e._v("eventValue")]),e._v(" property value as the event handler.")])]),e._v(" "),s("p",[e._v("The Returned value "),s("code",{pre:!0},[e._v("instance")]),e._v(":")]),e._v(" "),s("p",[s("code",{pre:!0},[e._v("instance")]),e._v(" is a instantiated Vue component，and the "),s("code",{pre:!0},[e._v("remove")]),e._v(" method will be "),s("strong",[e._v("attached")]),e._v(" to this instance.You can invoke the "),s("code",{pre:!0},[e._v("remove")]),e._v(" method to destroy the component and detach the component's content from "),s("code",{pre:!0},[e._v("body")]),e._v(" element. If the caller is destroyed and the "),s("code",{pre:!0},[e._v("instance")]),e._v(" will be destroyed too.")])])])]),e._v(" "),s("li",[s("p",[e._v("Example:")]),e._v(" "),s("p",[e._v("First we create Hello.vue component：")]),e._v(" "),s("pre",{pre:!0},[s("code",{attrs:{"v-pre":"",class:"language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[e._v("<"),s("span",{attrs:{class:"hljs-name"}},[e._v("template")]),e._v(">")]),e._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[e._v("<"),s("span",{attrs:{class:"hljs-name"}},[e._v("div")]),e._v(" "),s("span",{attrs:{class:"hljs-attr"}},[e._v("@click")]),e._v("="),s("span",{attrs:{class:"hljs-string"}},[e._v('"clickHandler"')]),e._v(">")]),e._v("\n {{content}}\n "),s("span",{attrs:{class:"hljs-tag"}},[e._v("<"),s("span",{attrs:{class:"hljs-name"}},[e._v("slot")]),e._v(" "),s("span",{attrs:{class:"hljs-attr"}},[e._v("name")]),e._v("="),s("span",{attrs:{class:"hljs-string"}},[e._v('"other"')]),e._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[e._v("</"),s("span",{attrs:{class:"hljs-name"}},[e._v("slot")]),e._v(">")]),e._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[e._v("</"),s("span",{attrs:{class:"hljs-name"}},[e._v("div")]),e._v(">")]),e._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[e._v("</"),s("span",{attrs:{class:"hljs-name"}},[e._v("template")]),e._v(">")]),e._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[e._v("<"),s("span",{attrs:{class:"hljs-name"}},[e._v("script")]),e._v(" "),s("span",{attrs:{class:"hljs-attr"}},[e._v("type")]),e._v("="),s("span",{attrs:{class:"hljs-string"}},[e._v('"text/ecmascript-6"')]),e._v(">")]),s("span",{attrs:{class:"javascript"}},[e._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("export")]),e._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("default")]),e._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("name")]),e._v(": "),s("span",{attrs:{class:"hljs-string"}},[e._v("'hello'")]),e._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("props")]),e._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("content")]),e._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("type")]),e._v(": "),s("span",{attrs:{class:"hljs-built_in"}},[e._v("String")]),e._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("default")]),e._v(": "),s("span",{attrs:{class:"hljs-string"}},[e._v("'Hello'")]),e._v("\n }\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("methods")]),e._v(": {\n clickHandler(e) {\n "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("this")]),e._v(".$emit("),s("span",{attrs:{class:"hljs-string"}},[e._v("'click'")]),e._v(", e)\n }\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[e._v("</"),s("span",{attrs:{class:"hljs-name"}},[e._v("script")]),e._v(">")]),e._v("\n")])]),e._v(" "),s("p",[e._v("Then we make Hello.vue to an API style component by calling the "),s("code",{pre:!0},[e._v("createAPI")]),e._v(" method.")]),e._v(" "),s("pre",{pre:!0},[s("code",{attrs:{"v-pre":"",class:"language-js"}},[e._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("import")]),e._v(" Vue "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("from")]),e._v(" "),s("span",{attrs:{class:"hljs-string"}},[e._v("'vue'")]),e._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("import")]),e._v(" Hello "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("from")]),e._v(" "),s("span",{attrs:{class:"hljs-string"}},[e._v("'./Hello.vue'")]),e._v("\n\n "),s("span",{attrs:{class:"hljs-comment"}},[e._v("// import Style to load the base style")]),e._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("import")]),e._v(" {\n "),s("span",{attrs:{class:"hljs-comment"}},[e._v("/* eslint-disable no-unused-vars */")]),e._v("\n Style,\n Dialog,\n createAPI\n } "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("from")]),e._v(" "),s("span",{attrs:{class:"hljs-string"}},[e._v("'cube-ui'")]),e._v("\n\n Vue.use(Dialog)\n\n "),s("span",{attrs:{class:"hljs-comment"}},[e._v("// create this.$createHello API")]),e._v("\n createAPI(Vue, Hello, ["),s("span",{attrs:{class:"hljs-string"}},[e._v("'click'")]),e._v("], "),s("span",{attrs:{class:"hljs-literal"}},[e._v("true")]),e._v(")\n\n "),s("span",{attrs:{class:"hljs-comment"}},[e._v("// init Vue")]),e._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("new")]),e._v(" Vue({\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("el")]),e._v(": "),s("span",{attrs:{class:"hljs-string"}},[e._v("'#app'")]),e._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("render")]),e._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[e._v("function")]),e._v(" ("),s("span",{attrs:{class:"hljs-params"}},[e._v("h")]),e._v(") ")]),e._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("return")]),e._v(" h("),s("span",{attrs:{class:"hljs-string"}},[e._v("'button'")]),e._v(", {\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("on")]),e._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("click")]),e._v(": "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("this")]),e._v(".showHello\n }\n }, ["),s("span",{attrs:{class:"hljs-string"}},[e._v("'Show Hello'")]),e._v("])\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("methods")]),e._v(": {\n showHello() {\n "),s("span",{attrs:{class:"hljs-comment"}},[e._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) */")]),e._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("const")]),e._v(" instance = "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("this")]),e._v(".$createHello({\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("content")]),e._v(": "),s("span",{attrs:{class:"hljs-string"}},[e._v("'My Hello Content'")]),e._v(",\n onClick(e) {\n "),s("span",{attrs:{class:"hljs-built_in"}},[e._v("console")]),e._v(".log("),s("span",{attrs:{class:"hljs-string"}},[e._v("'Hello component clicked.'")]),e._v(")\n }\n }, "),s("span",{attrs:{class:"hljs-comment"}},[e._v("/* renderFn */")]),e._v(" (createElement) => {\n "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("return")]),e._v(" [\n createElement("),s("span",{attrs:{class:"hljs-string"}},[e._v("'p'")]),e._v(", {\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("slot")]),e._v(": "),s("span",{attrs:{class:"hljs-string"}},[e._v("'other'")]),e._v("\n }, "),s("span",{attrs:{class:"hljs-string"}},[e._v("'other content'")]),e._v(")\n ]\n })\n "),s("span",{attrs:{class:"hljs-comment"}},[e._v("// Also, the event hanlder can be registered by instance's `$on` method")]),e._v("\n instance.$on("),s("span",{attrs:{class:"hljs-string"}},[e._v("'click'")]),e._v(", (e) => {\n "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("const")]),e._v(" $dialog = "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("this")]),e._v(".$createDialog({\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("type")]),e._v(": "),s("span",{attrs:{class:"hljs-string"}},[e._v("'confirm'")]),e._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("content")]),e._v(": "),s("span",{attrs:{class:"hljs-string"}},[e._v("'click confirm to remove current instance'")]),e._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[e._v("icon")]),e._v(": "),s("span",{attrs:{class:"hljs-string"}},[e._v("'cubeic-alert'")]),e._v("\n })\n $dialog.show()\n\n $dialog.$on("),s("span",{attrs:{class:"hljs-string"}},[e._v("'confirm'")]),e._v(", () => {\n "),s("span",{attrs:{class:"hljs-comment"}},[e._v("// remove instance")]),e._v("\n instance.remove()\n }).$on("),s("span",{attrs:{class:"hljs-string"}},[e._v("'cancel'")]),e._v(", () => {\n "),s("span",{attrs:{class:"hljs-built_in"}},[e._v("console")]),e._v(".log("),s("span",{attrs:{class:"hljs-string"}},[e._v("'cancel'")]),e._v(")\n })\n })\n }\n }\n })\n")])]),e._v(" "),s("p",[e._v("In this example, we create a component "),s("code",{pre:!0},[e._v("Hello")]),e._v(" which needs to be invoked in api form and we invoke it in another component.The focus is what "),s("code",{pre:!0},[e._v("showHello()")]),e._v(" does: invoking method "),s("code",{pre:!0},[e._v("this.$createHello(config, renderFn)")]),e._v(" to instantiate "),s("code",{pre:!0},[e._v("Hello")]),e._v(".")])])])},function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("p",[e._v("In vue component, you could call by "),s("code",{pre:!0},[e._v("this.$createHello(config, renderFn)")]),e._v(" because the "),s("code",{pre:!0},[e._v("this")]),e._v(" is just a Vue instance. But in general JS files, you need to use "),s("code",{pre:!0},[e._v("Hello.$create")]),e._v(". As shown below:")])},function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("pre",{pre:!0},[s("code",{attrs:{"v-pre":"",class:"language-js"}},[s("span",{attrs:{class:"hljs-keyword"}},[e._v("import")]),e._v(" Hello "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("from")]),e._v(" "),s("span",{attrs:{class:"hljs-string"}},[e._v("'./hello.vue'")]),e._v("\n\nHello.$create(config, renderFn)\n")])])}]}},"i/fd":function(e,t,s){e.exports=s("3JND")}});
\ No newline at end of file
docs/js/manifest.e1d1fda85462142da373.js → docs/js/manifest.d157dc8a4588c1434a4e.js
浏览文件 @ 42eeee9a
!function(e){function a(f){if(c[f])return c[f].exports;var b=c[f]={i:f,l:!1,exports:{}};return e[f].call(b.exports,b,b.exports,a),b.l=!0,b.exports}var f=window.webpackJsonp;window.webpackJsonp=function(c,d,n){for(var r,t,o,u=0,i=[];u<c.length;u++)t=c[u],b[t]&&i.push(b[t][0]),b[t]=0;for(r in d)Object.prototype.hasOwnProperty.call(d,r)&&(e[r]=d[r]);for(f&&f(c,d,n);i.length;)i.shift()();if(n)for(u=0;u<n.length;u++)o=a(a.s=n[u]);return o};var c={},b={76:0};a.e=function(e){function f(){r.onerror=r.onload=null,clearTimeout(t);var a=b[e];0!==a&&(a&&a[1](new Error("Loading chunk "+e+" failed.")),b[e]=void 0)}var c=b[e];if(0===c)return new Promise(function(e){e()});if(c)return c[2];var d=new Promise(function(a,f){c=b[e]=[a,f]});c[2]=d;var n=document.getElementsByTagName("head")[0],r=document.createElement("script");r.type="text/javascript",r.charset="utf-8",r.async=!0,r.timeout=12e4,a.nc&&r.setAttribute("nonce",a.nc),r.src=a.p+"js/"+e+"."+{0:"9cf876f3d8a0dd614939",1:"8cbaaf36e614ee3d9b86",2:"aa5c33304d7e001d2998",3:"4c0dfb18d98e49637f11",4:"f3264143745e966ae3c8",5:"6344b6ffb10b7d8cfb57",6:"b75d5ae35a63b4a1ea4a",7:"f2b3f2f665d2f94a4033",8:"e4368b56ae1b01fa2b1e",9:"59aaada31ca7e7afd628",10:"fcb6f76202e525f6b1cf",11:"f04f0d5795a644417b4b",12:"8b4e93d2cb8689d90bde",13:"04fb6c7ae1a9a86803ee",14:"5b1654863c74afcd5f6e",15:"ffefda21d5a2ce9f0d31",16:"0d166ba18cd060423da1",17:"d315e8bdcd274e53adcb",18:"4201a72978187398b7bb",19:"bebe1eca9966c9be0adc",20:"c4a66966ab7677bcf86b",21:"7ec649313be46622687e",22:"dbafee15c63cba5a48b7",23:"fb6dfb26a82e994676ac",24:"c9bbd555b055d1f837ac",25:"23843ce98192dae79fd5",26:"0b373df24c628f761397",27:"5fa2587dbe25593c027a",28:"c1494c7857dd1bf4ac62",29:"d1e659e5b15aa6ba4374",30:"ba154c2100f0c6584e69",31:"c792c895555ba98bb284",32:"b4086568340b3069225f",33:"bdf974baefc8a322ac09",34:"5c0b71c9ed6e9ea65e46",35:"0ab78cff978add52149d",36:"83353a2f2263646331f0",37:"ca3f596982831581d148",38:"aca5d5404bc606e6286b",39:"d551331953125f1e121a",40:"b1fbdacd9977ec9997c4",41:"9e58a45205e4be1f8924",42:"e644998c9878f48afaa3",43:"68f683a4f1bed2e4424e",44:"4fd5629c696a793fbfb1",45:"6212df17192e02891916",46:"76c78609e4d90e3afb4a",47:"9e63747c33f6f32c444c",48:"12adafa05a41e96b36b3",49:"1a5a2f8e6854d037b049",50:"9b9d3f1a74ff08a2f30e",51:"9162a7342e945b3fce3a",52:"34249570adeec6294faa",53:"21d71ef97ec610d3051d",54:"220aa54b544c13c7c24f",55:"85a3fb2c969df927b764",56:"c772e120c5c37d3626a0",57:"b11c3b76f34be7355a5c",58:"1d32291b3bf9a01f8bbe",59:"e26ee2b87812197b4ef6",60:"ac23815ad51681a85262",61:"a4e5458781cae9bb6de4",62:"104e1f5e1c8aa241170b",63:"a0d0f017d99c25a22849",64:"4527058fff3e74b41a1d",65:"fe0764076a3df08c262d",66:"5c69638d7f7b5622c4bf",67:"6c57aa958802f5968818",68:"f0bcbf6358d8604be1e2",69:"647ea0f45177a479b8a0",70:"fc0738d0b7308c3884d1",71:"04ac004ba824af857778",72:"d2d80931863a1f05fad7",73:"117000c1b59db58bf5d4"}[e]+".js";var t=setTimeout(f,12e4);return r.onerror=r.onload=f,n.appendChild(r),d},a.m=e,a.c=c,a.d=function(e,f,c){a.o(e,f)||Object.defineProperty(e,f,{configurable:!1,enumerable:!0,get:c})},a.n=function(e){var f=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(f,"a",f),f},a.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},a.p="/cube-ui/",a.oe=function(e){throw console.error(e),e}}([]);
\ No newline at end of file
!function(e){function a(f){if(c[f])return c[f].exports;var b=c[f]={i:f,l:!1,exports:{}};return e[f].call(b.exports,b,b.exports,a),b.l=!0,b.exports}var f=window.webpackJsonp;window.webpackJsonp=function(c,d,n){for(var r,t,o,u=0,i=[];u<c.length;u++)t=c[u],b[t]&&i.push(b[t][0]),b[t]=0;for(r in d)Object.prototype.hasOwnProperty.call(d,r)&&(e[r]=d[r]);for(f&&f(c,d,n);i.length;)i.shift()();if(n)for(u=0;u<n.length;u++)o=a(a.s=n[u]);return o};var c={},b={76:0};a.e=function(e){function f(){r.onerror=r.onload=null,clearTimeout(t);var a=b[e];0!==a&&(a&&a[1](new Error("Loading chunk "+e+" failed.")),b[e]=void 0)}var c=b[e];if(0===c)return new Promise(function(e){e()});if(c)return c[2];var d=new Promise(function(a,f){c=b[e]=[a,f]});c[2]=d;var n=document.getElementsByTagName("head")[0],r=document.createElement("script");r.type="text/javascript",r.charset="utf-8",r.async=!0,r.timeout=12e4,a.nc&&r.setAttribute("nonce",a.nc),r.src=a.p+"js/"+e+"."+{0:"9cf876f3d8a0dd614939",1:"8cbaaf36e614ee3d9b86",2:"aa5c33304d7e001d2998",3:"4c0dfb18d98e49637f11",4:"f3264143745e966ae3c8",5:"6344b6ffb10b7d8cfb57",6:"b75d5ae35a63b4a1ea4a",7:"f2b3f2f665d2f94a4033",8:"e4368b56ae1b01fa2b1e",9:"59aaada31ca7e7afd628",10:"fcb6f76202e525f6b1cf",11:"f04f0d5795a644417b4b",12:"8b4e93d2cb8689d90bde",13:"04fb6c7ae1a9a86803ee",14:"5b1654863c74afcd5f6e",15:"ffefda21d5a2ce9f0d31",16:"0d166ba18cd060423da1",17:"d315e8bdcd274e53adcb",18:"4201a72978187398b7bb",19:"bebe1eca9966c9be0adc",20:"c4a66966ab7677bcf86b",21:"7ec649313be46622687e",22:"dbafee15c63cba5a48b7",23:"fb6dfb26a82e994676ac",24:"c9bbd555b055d1f837ac",25:"23843ce98192dae79fd5",26:"0b373df24c628f761397",27:"5fa2587dbe25593c027a",28:"c1494c7857dd1bf4ac62",29:"d1e659e5b15aa6ba4374",30:"ba154c2100f0c6584e69",31:"bfb552e0836a3dde3f83",32:"b4086568340b3069225f",33:"bdf974baefc8a322ac09",34:"5c0b71c9ed6e9ea65e46",35:"0ab78cff978add52149d",36:"83353a2f2263646331f0",37:"ca3f596982831581d148",38:"aca5d5404bc606e6286b",39:"d551331953125f1e121a",40:"b1fbdacd9977ec9997c4",41:"9e58a45205e4be1f8924",42:"e644998c9878f48afaa3",43:"68f683a4f1bed2e4424e",44:"4fd5629c696a793fbfb1",45:"6212df17192e02891916",46:"76c78609e4d90e3afb4a",47:"9e63747c33f6f32c444c",48:"12adafa05a41e96b36b3",49:"1a5a2f8e6854d037b049",50:"9b9d3f1a74ff08a2f30e",51:"9162a7342e945b3fce3a",52:"34249570adeec6294faa",53:"21d71ef97ec610d3051d",54:"220aa54b544c13c7c24f",55:"85a3fb2c969df927b764",56:"c772e120c5c37d3626a0",57:"b11c3b76f34be7355a5c",58:"1d32291b3bf9a01f8bbe",59:"e26ee2b87812197b4ef6",60:"ac23815ad51681a85262",61:"a4e5458781cae9bb6de4",62:"104e1f5e1c8aa241170b",63:"a0d0f017d99c25a22849",64:"4527058fff3e74b41a1d",65:"fe0764076a3df08c262d",66:"5c69638d7f7b5622c4bf",67:"4e1d2daccb6c00d38fd4",68:"f0bcbf6358d8604be1e2",69:"647ea0f45177a479b8a0",70:"fc0738d0b7308c3884d1",71:"04ac004ba824af857778",72:"d2d80931863a1f05fad7",73:"117000c1b59db58bf5d4"}[e]+".js";var t=setTimeout(f,12e4);return r.onerror=r.onload=f,n.appendChild(r),d},a.m=e,a.c=c,a.d=function(e,f,c){a.o(e,f)||Object.defineProperty(e,f,{configurable:!1,enumerable:!0,get:c})},a.n=function(e){var f=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(f,"a",f),f},a.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},a.p="/cube-ui/",a.oe=function(e){throw console.error(e),e}}([]);
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或