diff --git a/docs/index.html b/docs/index.html index f06a3d16264e461d42c33e93dfaa640cd6e92041..17d2c0e044c9628ec63fc713b53aab7113db0671 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/3.7fc5daf42a2217dadeab.js b/docs/js/3.7d62fbe3786e893cc42e.js similarity index 78% rename from docs/js/3.7fc5daf42a2217dadeab.js rename to docs/js/3.7d62fbe3786e893cc42e.js index b626efa1125ba04b92f96da7bb9923f715745e56..0ca29a19f360d2e5fa6c37928b4495d11827eae5 100644 --- a/docs/js/3.7fc5daf42a2217dadeab.js +++ b/docs/js/3.7d62fbe3786e893cc42e.js @@ -1 +1 @@ -webpackJsonp([3],{ZIr9:function(s,t,a){var v=a("VU/8")(null,a("iC+2"),null,null,null);s.exports=v.exports},dSBi:function(s,t,a){s.exports=a("ZIr9")},"iC+2":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:"Upload组件"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Upload组件-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(" Upload 组件")]),s._v(" "),s._m(0),s._v(" "),s._m(1),s._v(" "),s._m(2),s._v(" "),s._m(3),s._v(" "),a("h3",{attrs:{id:"示例"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-示例-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(" 示例")]),s._v(" "),s._m(4),s._v(" "),a("h3",{attrs:{id:"Props配置"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Props配置-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Props 配置")]),s._v(" "),s._m(5),s._v(" "),s._m(6),s._v(" "),s._m(7),s._v(" "),s._m(8),s._v(" "),s._m(9),s._v(" "),s._m(10),s._v(" "),a("h3",{attrs:{id:"事件"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-事件-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(" 事件")]),s._v(" "),s._m(11),s._v(" "),a("h3",{attrs:{id:"实例方法"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-实例方法-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(" 实例方法")]),s._v(" "),s._m(12)])},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("blockquote",[a("p",[s._v("1.3.0 新增")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("Upload")]),s._v(" 上传组件。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("strong",[s._v("注：")]),s._v(" 本文中所有的原始文件对象统称为"),a("strong",[s._v("原始文件")]),s._v("，而经过包装后的文件对象称为"),a("strong",[s._v("文件对象")]),s._v("，这个文件对象的结构如下：")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("属性")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("类型")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("name")]),s._v(" "),a("td",[s._v("文件名")]),s._v(" "),a("td",[s._v("String")])]),s._v(" "),a("tr",[a("td",[s._v("size")]),s._v(" "),a("td",[s._v("文件大小")]),s._v(" "),a("td",[s._v("Number")])]),s._v(" "),a("tr",[a("td",[s._v("url")]),s._v(" "),a("td",[s._v("文件 url，通过 URL.createObjectURL 获得")]),s._v(" "),a("td",[s._v("String")])]),s._v(" "),a("tr",[a("td",[s._v("base64")]),s._v(" "),a("td",[s._v("文件 base64 的值，这个会从原始文件的 base64 属性获得（默认是没有的，但是插件可以添加，例如下边演示的压缩 compress 插件就会添加 base64 值）")]),s._v(" "),a("td",[s._v("String")])]),s._v(" "),a("tr",[a("td",[s._v("status")]),s._v(" "),a("td",[s._v("文件状态，包含四个： ready, uploading, success, error")]),s._v(" "),a("td",[s._v("String")])]),s._v(" "),a("tr",[a("td",[s._v("progress")]),s._v(" "),a("td",[s._v("文件上传进度，小数 0~1")]),s._v(" "),a("td",[s._v("Number")])]),s._v(" "),a("tr",[a("td",[s._v("file")]),s._v(" "),a("td",[s._v("原始文件")]),s._v(" "),a("td",[s._v("File")])]),s._v(" "),a("tr",[a("td",[s._v("response")]),s._v(" "),a("td",[s._v("响应内容（自动转 JSON）")]),s._v(" "),a("td",[s._v("Object/Array/String")])]),s._v(" "),a("tr",[a("td",[s._v("responseHeaders")]),s._v(" "),a("td",[s._v("响应头")]),s._v(" "),a("td",[s._v("String")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("基本用法")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"//jsonplaceholder.typicode.com/photos/"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":simultaneous-uploads")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@files-added")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"filesAdded"')]),s._v(" />")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n filesAdded(files) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" hasIgnore = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" maxSize = "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1024")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1024")]),s._v(" "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 1M")]),s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("for")]),s._v(" ("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" k "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("in")]),s._v(" files) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" file = files[k]\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (file.size > maxSize) {\n file.ignore = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n hasIgnore = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }\n }\n hasIgnore && "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createToast({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'warn'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("time")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("txt")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'You selected >1M files'")]),s._v("\n }).show()\n }\n }\n}\n")])]),s._v(" "),a("p",[s._v("配置 "),a("code",{pre:!0},[s._v("action")]),s._v(" 表示上传的 URL 地址，而 "),a("code",{pre:!0},[s._v("simultaneous-uploads")]),s._v(" 则表示支持的并发上传个数。")]),s._v(" "),a("p",[s._v("通过 "),a("code",{pre:!0},[s._v("files-added")]),s._v(" 事件可以实现文件过滤，设置 "),a("code",{pre:!0},[s._v("file.ignore = true")]),s._v(" 即可。")])]),s._v(" "),a("li",[a("p",[s._v("压缩图片且通过 Base64 上传")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"upload"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":action")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"action"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":simultaneous-uploads")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":process-file")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"processFile"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@file-submitted")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"fileSubmitted"')]),s._v(" />")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" compress "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'../../modules/image'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("target")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'//jsonplaceholder.typicode.com/photos/'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'base64Value'")]),s._v("\n }\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n processFile(file, next) {\n compress(file, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("compress")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1600")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1600")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("quality")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0.5")]),s._v("\n }\n }, next)\n },\n fileSubmitted(file) {\n file.base64Value = file.file.base64\n }\n }\n}\n")])]),s._v(" "),a("p",[a("code",{pre:!0},[s._v("action")]),s._v(" 中除了有 "),a("code",{pre:!0},[s._v("target")]),s._v(" 目标上传地址外；还有 "),a("code",{pre:!0},[s._v("prop")]),s._v(" 配置，表示上传的时候采用处理后的 "),a("code",{pre:!0},[s._v("file")]),s._v(" 普通对象的哪个属性所对应的值上传，这里设置的就是 "),a("code",{pre:!0},[s._v("base64Value")]),s._v(" 的值。")]),s._v(" "),a("p",[a("code",{pre:!0},[s._v("process-file")]),s._v(" 则是一个函数，主要用于处理原生文件的，调用 "),a("code",{pre:!0},[s._v("next")]),s._v(" 回调的话，参数是处理完的文件对象，这里示例的就是调用 "),a("code",{pre:!0},[s._v("compress")]),s._v(" 做压缩，处理完后会回调 "),a("code",{pre:!0},[s._v("next")]),s._v("。")]),s._v(" "),a("p",[a("code",{pre:!0},[s._v("file-submitted")]),s._v(" 事件则是每个文件处理完后添加到 "),a("code",{pre:!0},[s._v("upload")]),s._v(" 实例的 "),a("code",{pre:!0},[s._v("files")]),s._v(" 数组中后触发，参数就是一个处理后的文件对象。")])]),s._v(" "),a("li",[a("p",[s._v("自定义结构样式")]),s._v(" "),a("p",[s._v("使用默认插槽来实现自定义结构，在此基础上自定义样式。")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"upload"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"files"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":action")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"action"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@files-added")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"addedHandler"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@file-error")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"errHandler"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"clear-fix"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload-file")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(file, i) in files"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":file")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"file"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"i"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload-btn")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":multiple")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("＋"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Please click to upload ID card"),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 "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'//jsonplaceholder.typicode.com/photos/'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("files")]),s._v(": []\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n addedHandler() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" file = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".files["),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("]\n file && "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.upload.removeFile(file)\n },\n errHandler(file) {\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// const msg = file.response.message")]),s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createToast({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'warn'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("txt")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Upload fail'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("time")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v("\n }).show()\n }\n }\n}\n")])]),s._v(" "),a("p",[s._v("样式覆盖：")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-stylus"}},[a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-file")]),s._v(", "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-btn")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200px")]),s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-file")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n + "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-btn")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": -"),a("span",{attrs:{class:"hljs-number"}},[s._v("200px")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-file-def")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("100%")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("100%")]),s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cubeic-wrong")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": none\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-btn")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": flex\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("align-items")]),s._v(": center\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("justify-content")]),s._v(": center\n > "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("div")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center\n "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("i")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": inline-flex\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("align-items")]),s._v(": center\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("justify-content")]),s._v(": center\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("50px")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("50px")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("32px")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-style")]),s._v(": normal\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#fff")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#333")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("50%")]),s._v("\n")])]),s._v(" "),a("p",[s._v("上述示例实现的效果就是点击上传（一次只能选择一张）一张图片，此图片就会直接展示，而上传按钮本身则是不可见，覆盖在图片预览区域上。再次重新选择图片，就会移除掉上次选择的图片，重新展示新选择的图片。")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("参数")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("类型")]),s._v(" "),a("th",[s._v("默认值")]),s._v(" "),a("th",[s._v("示例")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("action")]),s._v(" "),a("td",[s._v("上传行为配置项，最少包含上传目标的 URL 地址")]),s._v(" "),a("td",[s._v("String/Object")]),s._v(" "),a("td",[s._v("''")]),s._v(" "),a("td",[s._v("{ target: '/upload' }")])]),s._v(" "),a("tr",[a("td",[s._v("max")]),s._v(" "),a("td",[s._v("最大上传文件个数")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("10")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("auto")]),s._v(" "),a("td",[s._v("是否自动上传，即选择完文件后自动开始上传")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("simultaneousUploads")]),s._v(" "),a("td",[s._v("并发上传数")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("1")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("processFile")]),s._v(" "),a("td",[s._v("处理原始文件函数")]),s._v(" "),a("td",[s._v("Function")]),s._v(" "),a("td",[s._v("function (file, next) { next(file) }")]),s._v(" "),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("code",{pre:!0},[s._v("action")]),s._v(" 子配置项")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("如果 "),a("code",{pre:!0},[s._v("action")]),s._v(" 是字符串，则会被处理成 "),a("code",{pre:!0},[s._v("{ target: action }")]),s._v(" 这样结构。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("参数")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("类型")]),s._v(" "),a("th",[s._v("默认值")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("target")]),s._v(" "),a("td",[s._v("上传目标 URL")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("fileName")]),s._v(" "),a("td",[s._v("上传文件时文件的参数名")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("'file'")])]),s._v(" "),a("tr",[a("td",[s._v("prop")]),s._v(" "),a("td",[s._v("上传的时候使用文件对象的 prop 属性所对应的值")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("'file'")])]),s._v(" "),a("tr",[a("td",[s._v("headers")]),s._v(" "),a("td",[s._v("自定义请求头")]),s._v(" "),a("td",[s._v("Object")]),s._v(" "),a("td",[s._v("{}")])]),s._v(" "),a("tr",[a("td",[s._v("data")]),s._v(" "),a("td",[s._v("上传需要附加数据")]),s._v(" "),a("td",[s._v("Object")]),s._v(" "),a("td",[s._v("{}")])]),s._v(" "),a("tr",[a("td",[s._v("withCredentials")]),s._v(" "),a("td",[s._v("标准的 CORS 请求是不会带上 cookie 的，如果想要带的话需要设置 withCredentials 为 true")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("timeout")]),s._v(" "),a("td",[s._v("请求超时时间")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("0")])]),s._v(" "),a("tr",[a("td",[s._v("progressInterval")]),s._v(" "),a("td",[s._v("进度回调间隔（单位：ms）")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("100")])]),s._v(" "),a("tr",[a("td",[s._v("checkSuccess")]),s._v(" "),a("td",[s._v("校验是否成功函数，参数为服务端响应数据，返回值为 true 则代表成功")]),s._v(" "),a("td",[s._v("Function")]),s._v(" "),a("td",[s._v("function (res) { return true }")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("code",{pre:!0},[s._v("processFile")]),s._v(" 子配置项")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("一个函数，这个函数有两个参数："),a("code",{pre:!0},[s._v("(file, next)")]),s._v("，"),a("code",{pre:!0},[s._v("file")]),s._v(" 就是原始文件，"),a("code",{pre:!0},[s._v("next")]),s._v(" 为处理完毕后的回调函数，调用的时候需要传入处理后的文件。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("事件名")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("参数")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("files-added")]),s._v(" "),a("td",[s._v("选择完文件后触发，一般可用作文件过滤")]),s._v(" "),a("td",[s._v("原始文件列表")])]),s._v(" "),a("tr",[a("td",[s._v("file-submitted")]),s._v(" "),a("td",[s._v("每个文件处理完后添加到 "),a("code",{pre:!0},[s._v("upload")]),s._v(" 实例的 "),a("code",{pre:!0},[s._v("files")]),s._v(" 数组中后触发")]),s._v(" "),a("td",[s._v("文件对象")])]),s._v(" "),a("tr",[a("td",[s._v("file-removed")]),s._v(" "),a("td",[s._v("文件被删除后触发")]),s._v(" "),a("td",[s._v("文件对象")])]),s._v(" "),a("tr",[a("td",[s._v("file-success")]),s._v(" "),a("td",[s._v("文件上传成功后触发")]),s._v(" "),a("td",[s._v("文件对象")])]),s._v(" "),a("tr",[a("td",[s._v("file-error")]),s._v(" "),a("td",[s._v("文件上传失败后触发")]),s._v(" "),a("td",[s._v("文件对象")])]),s._v(" "),a("tr",[a("td",[s._v("file-click")]),s._v(" "),a("td",[s._v("文件点击后触发")]),s._v(" "),a("td",[s._v("文件对象")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("方法名")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("参数")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("start")]),s._v(" "),a("td",[s._v("开始上传")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("pause")]),s._v(" "),a("td",[s._v("暂停上传")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("retry")]),s._v(" "),a("td",[s._v("重试上传")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("removeFile")]),s._v(" "),a("td",[s._v("删除文件")]),s._v(" "),a("td",[s._v("文件对象")])])])])}]}}}); \ No newline at end of file +webpackJsonp([3],{ZIr9:function(s,t,a){var v=a("VU/8")(null,a("iC+2"),null,null,null);s.exports=v.exports},dSBi:function(s,t,a){s.exports=a("ZIr9")},"iC+2":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:"Upload组件"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Upload组件-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(" Upload 组件")]),s._v(" "),s._m(0),s._v(" "),s._m(1),s._v(" "),s._m(2),s._v(" "),s._m(3),s._v(" "),a("h3",{attrs:{id:"示例"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-示例-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(" 示例")]),s._v(" "),s._m(4),s._v(" "),a("h3",{attrs:{id:"Props配置"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Props配置-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Props 配置")]),s._v(" "),s._m(5),s._v(" "),s._m(6),s._v(" "),s._m(7),s._v(" "),s._m(8),s._v(" "),s._m(9),s._v(" "),s._m(10),s._v(" "),a("h3",{attrs:{id:"事件"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-事件-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(" 事件")]),s._v(" "),s._m(11),s._v(" "),a("h3",{attrs:{id:"实例方法"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-实例方法-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(" 实例方法")]),s._v(" "),s._m(12)])},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("blockquote",[a("p",[s._v("1.3.0 新增")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("Upload")]),s._v(" 上传组件。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("strong",[s._v("注：")]),s._v(" 本文中所有的原始文件对象统称为"),a("strong",[s._v("原始文件")]),s._v("，而经过包装后的文件对象称为"),a("strong",[s._v("文件对象")]),s._v("，这个文件对象的结构如下：")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("属性")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("类型")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("name")]),s._v(" "),a("td",[s._v("文件名")]),s._v(" "),a("td",[s._v("String")])]),s._v(" "),a("tr",[a("td",[s._v("size")]),s._v(" "),a("td",[s._v("文件大小")]),s._v(" "),a("td",[s._v("Number")])]),s._v(" "),a("tr",[a("td",[s._v("url")]),s._v(" "),a("td",[s._v("文件 url，通过 URL.createObjectURL 获得")]),s._v(" "),a("td",[s._v("String")])]),s._v(" "),a("tr",[a("td",[s._v("base64")]),s._v(" "),a("td",[s._v("文件 base64 的值，这个会从原始文件的 base64 属性获得（默认是没有的，但是插件可以添加，例如下边演示的压缩 compress 插件就会添加 base64 值）")]),s._v(" "),a("td",[s._v("String")])]),s._v(" "),a("tr",[a("td",[s._v("status")]),s._v(" "),a("td",[s._v("文件状态，包含四个： ready, uploading, success, error")]),s._v(" "),a("td",[s._v("String")])]),s._v(" "),a("tr",[a("td",[s._v("progress")]),s._v(" "),a("td",[s._v("文件上传进度，小数 0~1")]),s._v(" "),a("td",[s._v("Number")])]),s._v(" "),a("tr",[a("td",[s._v("file")]),s._v(" "),a("td",[s._v("原始文件")]),s._v(" "),a("td",[s._v("File")])]),s._v(" "),a("tr",[a("td",[s._v("response")]),s._v(" "),a("td",[s._v("响应内容（自动转 JSON）")]),s._v(" "),a("td",[s._v("Object/Array/String")])]),s._v(" "),a("tr",[a("td",[s._v("responseHeaders")]),s._v(" "),a("td",[s._v("响应头")]),s._v(" "),a("td",[s._v("String")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("基本用法")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"//jsonplaceholder.typicode.com/photos/"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":simultaneous-uploads")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@files-added")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"filesAdded"')]),s._v(" />")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n filesAdded(files) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" hasIgnore = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" maxSize = "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1024")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1024")]),s._v(" "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 1M")]),s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("for")]),s._v(" ("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" k "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("in")]),s._v(" files) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" file = files[k]\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (file.size > maxSize) {\n file.ignore = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n hasIgnore = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }\n }\n hasIgnore && "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createToast({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'warn'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("time")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("txt")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'You selected >1M files'")]),s._v("\n }).show()\n }\n }\n}\n")])]),s._v(" "),a("p",[s._v("配置 "),a("code",{pre:!0},[s._v("action")]),s._v(" 表示上传的 URL 地址，而 "),a("code",{pre:!0},[s._v("simultaneous-uploads")]),s._v(" 则表示支持的并发上传个数。")]),s._v(" "),a("p",[s._v("通过 "),a("code",{pre:!0},[s._v("files-added")]),s._v(" 事件可以实现文件过滤，设置 "),a("code",{pre:!0},[s._v("file.ignore = true")]),s._v(" 即可。")])]),s._v(" "),a("li",[a("p",[s._v("压缩图片且通过 Base64 上传")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"upload"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":action")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"action"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":simultaneous-uploads")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":process-file")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"processFile"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@file-submitted")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"fileSubmitted"')]),s._v(" />")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" compress "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'../../modules/image'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("target")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'//jsonplaceholder.typicode.com/photos/'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'base64Value'")]),s._v("\n }\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n processFile(file, next) {\n compress(file, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("compress")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1600")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1600")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("quality")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0.5")]),s._v("\n }\n }, next)\n },\n fileSubmitted(file) {\n file.base64Value = file.file.base64\n }\n }\n}\n")])]),s._v(" "),a("p",[a("code",{pre:!0},[s._v("action")]),s._v(" 中除了有 "),a("code",{pre:!0},[s._v("target")]),s._v(" 目标上传地址外；还有 "),a("code",{pre:!0},[s._v("prop")]),s._v(" 配置，表示上传的时候采用处理后的 "),a("code",{pre:!0},[s._v("file")]),s._v(" 普通对象的哪个属性所对应的值上传，这里设置的就是 "),a("code",{pre:!0},[s._v("base64Value")]),s._v(" 的值。")]),s._v(" "),a("p",[a("code",{pre:!0},[s._v("process-file")]),s._v(" 则是一个函数，主要用于处理原生文件的，调用 "),a("code",{pre:!0},[s._v("next")]),s._v(" 回调的话，参数是处理完的文件对象，这里示例的就是调用 "),a("code",{pre:!0},[s._v("compress")]),s._v(" 做压缩，处理完后会回调 "),a("code",{pre:!0},[s._v("next")]),s._v("。")]),s._v(" "),a("p",[a("code",{pre:!0},[s._v("file-submitted")]),s._v(" 事件则是每个文件处理完后添加到 "),a("code",{pre:!0},[s._v("upload")]),s._v(" 实例的 "),a("code",{pre:!0},[s._v("files")]),s._v(" 数组中后触发，参数就是一个处理后的文件对象。")])]),s._v(" "),a("li",[a("p",[s._v("自定义结构样式")]),s._v(" "),a("p",[s._v("使用默认插槽来实现自定义结构，在此基础上自定义样式。")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"upload"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"files"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":action")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"action"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@files-added")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"addedHandler"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@file-error")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"errHandler"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"clear-fix"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload-file")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(file, i) in files"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":file")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"file"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"i"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload-btn")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":multiple")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("＋"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Please click to upload ID card"),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 "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'//jsonplaceholder.typicode.com/photos/'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("files")]),s._v(": []\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n addedHandler() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" file = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".files["),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("]\n file && "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.upload.removeFile(file)\n },\n errHandler(file) {\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// const msg = file.response.message")]),s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createToast({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'warn'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("txt")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Upload fail'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("time")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v("\n }).show()\n }\n }\n}\n")])]),s._v(" "),a("p",[s._v("样式覆盖：")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-stylus"}},[a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-file")]),s._v(", "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-btn")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200px")]),s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-file")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n + "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-btn")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": -"),a("span",{attrs:{class:"hljs-number"}},[s._v("200px")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-file-def")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("100%")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("100%")]),s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cubeic-wrong")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": none\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-btn")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": flex\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("align-items")]),s._v(": center\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("justify-content")]),s._v(": center\n > "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("div")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center\n "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("i")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": inline-flex\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("align-items")]),s._v(": center\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("justify-content")]),s._v(": center\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("50px")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("50px")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("32px")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-style")]),s._v(": normal\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#fff")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#333")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("50%")]),s._v("\n")])]),s._v(" "),a("p",[s._v("上述示例实现的效果就是点击上传（一次只能选择一张）一张图片，此图片就会直接展示，而上传按钮本身则是不可见，覆盖在图片预览区域上。再次重新选择图片，就会移除掉上次选择的图片，重新展示新选择的图片。")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("参数")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("类型")]),s._v(" "),a("th",[s._v("默认值")]),s._v(" "),a("th",[s._v("示例")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("v-model")]),s._v(" "),a("td",[s._v("文件列表")]),s._v(" "),a("td",[s._v("Array")]),s._v(" "),a("td",[s._v("[]")]),s._v(" "),a("td",[s._v("[{ name, size, url, status: 'success', progress: 1 }]")])]),s._v(" "),a("tr",[a("td",[s._v("action")]),s._v(" "),a("td",[s._v("上传行为配置项，最少包含上传目标的 URL 地址")]),s._v(" "),a("td",[s._v("String/Object")]),s._v(" "),a("td",[s._v("''")]),s._v(" "),a("td",[s._v("{ target: '/upload' }")])]),s._v(" "),a("tr",[a("td",[s._v("max")]),s._v(" "),a("td",[s._v("最大上传文件个数")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("10")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("auto")]),s._v(" "),a("td",[s._v("是否自动上传，即选择完文件后自动开始上传")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("simultaneousUploads")]),s._v(" "),a("td",[s._v("并发上传数")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("1")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("processFile")]),s._v(" "),a("td",[s._v("处理原始文件函数")]),s._v(" "),a("td",[s._v("Function")]),s._v(" "),a("td",[s._v("function (file, next) { next(file) }")]),s._v(" "),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("code",{pre:!0},[s._v("action")]),s._v(" 子配置项")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("如果 "),a("code",{pre:!0},[s._v("action")]),s._v(" 是字符串，则会被处理成 "),a("code",{pre:!0},[s._v("{ target: action }")]),s._v(" 这样结构。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("参数")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("类型")]),s._v(" "),a("th",[s._v("默认值")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("target")]),s._v(" "),a("td",[s._v("上传目标 URL")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("fileName")]),s._v(" "),a("td",[s._v("上传文件时文件的参数名")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("'file'")])]),s._v(" "),a("tr",[a("td",[s._v("prop")]),s._v(" "),a("td",[s._v("上传的时候使用文件对象的 prop 属性所对应的值")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("'file'")])]),s._v(" "),a("tr",[a("td",[s._v("headers")]),s._v(" "),a("td",[s._v("自定义请求头")]),s._v(" "),a("td",[s._v("Object")]),s._v(" "),a("td",[s._v("{}")])]),s._v(" "),a("tr",[a("td",[s._v("data")]),s._v(" "),a("td",[s._v("上传需要附加数据")]),s._v(" "),a("td",[s._v("Object")]),s._v(" "),a("td",[s._v("{}")])]),s._v(" "),a("tr",[a("td",[s._v("withCredentials")]),s._v(" "),a("td",[s._v("标准的 CORS 请求是不会带上 cookie 的，如果想要带的话需要设置 withCredentials 为 true")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("timeout")]),s._v(" "),a("td",[s._v("请求超时时间")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("0")])]),s._v(" "),a("tr",[a("td",[s._v("progressInterval")]),s._v(" "),a("td",[s._v("进度回调间隔（单位：ms）")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("100")])]),s._v(" "),a("tr",[a("td",[s._v("checkSuccess")]),s._v(" "),a("td",[s._v("校验是否成功函数，参数为服务端响应数据，返回值为 true 则代表成功")]),s._v(" "),a("td",[s._v("Function")]),s._v(" "),a("td",[s._v("function (res) { return true }")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("code",{pre:!0},[s._v("processFile")]),s._v(" 子配置项")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("一个函数，这个函数有两个参数："),a("code",{pre:!0},[s._v("(file, next)")]),s._v("，"),a("code",{pre:!0},[s._v("file")]),s._v(" 就是原始文件，"),a("code",{pre:!0},[s._v("next")]),s._v(" 为处理完毕后的回调函数，调用的时候需要传入处理后的文件。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("事件名")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("参数")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("files-added")]),s._v(" "),a("td",[s._v("选择完文件后触发，一般可用作文件过滤")]),s._v(" "),a("td",[s._v("原始文件列表")])]),s._v(" "),a("tr",[a("td",[s._v("file-submitted")]),s._v(" "),a("td",[s._v("每个文件处理完后添加到 "),a("code",{pre:!0},[s._v("upload")]),s._v(" 实例的 "),a("code",{pre:!0},[s._v("files")]),s._v(" 数组中后触发")]),s._v(" "),a("td",[s._v("文件对象")])]),s._v(" "),a("tr",[a("td",[s._v("file-removed")]),s._v(" "),a("td",[s._v("文件被删除后触发")]),s._v(" "),a("td",[s._v("文件对象")])]),s._v(" "),a("tr",[a("td",[s._v("file-success")]),s._v(" "),a("td",[s._v("文件上传成功后触发")]),s._v(" "),a("td",[s._v("文件对象")])]),s._v(" "),a("tr",[a("td",[s._v("file-error")]),s._v(" "),a("td",[s._v("文件上传失败后触发")]),s._v(" "),a("td",[s._v("文件对象")])]),s._v(" "),a("tr",[a("td",[s._v("file-click")]),s._v(" "),a("td",[s._v("文件点击后触发")]),s._v(" "),a("td",[s._v("文件对象")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("方法名")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("参数")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("start")]),s._v(" "),a("td",[s._v("开始上传")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("pause")]),s._v(" "),a("td",[s._v("暂停上传")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("retry")]),s._v(" "),a("td",[s._v("重试上传")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("removeFile")]),s._v(" "),a("td",[s._v("删除文件")]),s._v(" "),a("td",[s._v("文件对象")])])])])}]}}}); \ No newline at end of file diff --git a/docs/js/32.1791419836ab3614687f.js b/docs/js/32.1791419836ab3614687f.js deleted file mode 100644 index acd76df8f56f04bc50e322ba2a94eed63b2dfc97..0000000000000000000000000000000000000000 --- a/docs/js/32.1791419836ab3614687f.js +++ /dev/null @@ -1 +0,0 @@ -webpackJsonp([32],{Ev7i: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("或者内置的组件，例如 Dialog：")]),s._v(" "),s._m(5),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 的形式调用自定义组件。并且既可以在 Vue 实例上下文中调用，也可以"),e("a",{attrs:{href:"https://didi.github.io/cube-ui/#/zh-CN/docs/create-api#cube-%E5%A6%82%E4%BD%95%E5%9C%A8%E6%99%AE%E9%80%9Ajs%E6%96%87%E4%BB%B6%E4%B8%AD%E6%88%96%E8%80%85%E5%85%A8%E5%B1%80%E8%B0%83%E7%94%A8-anchor"}},[s._v("在普通 js 文件中调用")]),s._v("。")])},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("")]),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("然后我们再通过 "),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")])])},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(" { Dialog } "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),e("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\nDialog.$create({\n ...\n})\n")])])}]}},"Nx+F":function(s,t,e){s.exports=e("PtgT")},PtgT:function(s,t,e){var a=e("VU/8")(null,e("Ev7i"),null,null,null);s.exports=a.exports}}); \ No newline at end of file diff --git a/docs/js/32.70392b947a04527375a3.js b/docs/js/32.70392b947a04527375a3.js new file mode 100644 index 0000000000000000000000000000000000000000..9f5e007e1354b0337823fe7d8c1331179b2c8fe2 --- /dev/null +++ b/docs/js/32.70392b947a04527375a3.js @@ -0,0 +1 @@ +webpackJsonp([32],{Ev7i: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("或者内置的组件，例如 Dialog：")]),s._v(" "),s._m(5),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 的形式调用自定义组件。并且既可以在 Vue 实例上下文中调用，也可以"),e("a",{attrs:{href:"https://didi.github.io/cube-ui/#/zh-CN/docs/create-api#cube-%E5%A6%82%E4%BD%95%E5%9C%A8%E6%99%AE%E9%80%9Ajs%E6%96%87%E4%BB%B6%E4%B8%AD%E6%88%96%E8%80%85%E5%85%A8%E5%B1%80%E8%B0%83%E7%94%A8-anchor"}},[s._v("在普通 js 文件中调用")]),s._v("。")])},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",[e("strong",[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",[e("strong",[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",[e("strong",[s._v("返回值 "),e("code",{pre:!0},[s._v("instance")]),s._v("：")])]),s._v(" "),e("p",[e("code",{pre:!0},[s._v("instance")]),s._v(" 就是组件实例。")]),s._v(" "),e("blockquote",[e("p",[s._v("这个实例会被"),e("strong",[s._v("附加或代理 "),e("code",{pre:!0},[s._v("remove")]),s._v(" 方法")])])]),s._v(" "),e("p",[s._v("如果调用了，该实例就会被销毁且会从 "),e("code",{pre:!0},[s._v("body")]),s._v(" 下移除。")]),s._v(" "),e("p",[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("")]),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("然后我们再通过 "),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")])])},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(" { Dialog } "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),e("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\nDialog.$create({\n ...\n})\n")])])}]}},"Nx+F":function(s,t,e){s.exports=e("PtgT")},PtgT:function(s,t,e){var a=e("VU/8")(null,e("Ev7i"),null,null,null);s.exports=a.exports}}); \ No newline at end of file diff --git a/docs/js/40.453dd6c1ec6867b9e7a4.js b/docs/js/40.453dd6c1ec6867b9e7a4.js deleted file mode 100644 index c0f490e16dc4126db5b3bcec282d581a553b7bb8..0000000000000000000000000000000000000000 --- a/docs/js/40.453dd6c1ec6867b9e7a4.js +++ /dev/null @@ -1 +0,0 @@ -webpackJsonp([40],{Y8qW: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:"Upload"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Upload-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(" Upload")]),s._v(" "),s._m(0),s._v(" "),s._m(1),s._v(" "),s._m(2),s._v(" "),s._m(3),s._v(" "),a("h3",{attrs:{id:"Example"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Example-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Example")]),s._v(" "),s._m(4),s._v(" "),a("h3",{attrs:{id:"Propsconfiguration"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Propsconfiguration-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Props configuration")]),s._v(" "),s._m(5),s._v(" "),s._m(6),s._v(" "),s._m(7),s._v(" "),s._m(8),s._v(" "),s._m(9),s._v(" "),s._m(10),s._v(" "),a("h3",{attrs:{id:"Events"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Events-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Events")]),s._v(" "),s._m(11),s._v(" "),a("h3",{attrs:{id:"Instancemethods"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Instancemethods-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Instance methods")]),s._v(" "),s._m(12)])},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("blockquote",[a("p",[s._v("New in 1.3.0+")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("Upload")]),s._v(" component.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("strong",[s._v("Notice:")]),s._v(" In this document, all the original File will be called "),a("strong",[s._v("original file")]),s._v(", since the wrapped file object will be called "),a("strong",[s._v("file object")]),s._v(". The structure of "),a("strong",[s._v("file object")]),s._v(" show as following:")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Attribute")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Type")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("name")]),s._v(" "),a("td",[s._v("file name")]),s._v(" "),a("td",[s._v("String")])]),s._v(" "),a("tr",[a("td",[s._v("size")]),s._v(" "),a("td",[s._v("file size")]),s._v(" "),a("td",[s._v("Number")])]),s._v(" "),a("tr",[a("td",[s._v("url")]),s._v(" "),a("td",[s._v("file url, created by URL.createObjectURL, for preview")]),s._v(" "),a("td",[s._v("String")])]),s._v(" "),a("tr",[a("td",[s._v("base64")]),s._v(" "),a("td",[s._v("file base64 value, the value is equaled to the original file's base64 value. It is "),a("code",{pre:!0},[s._v("''")]),s._v(" by default, but you can have some plugins to added this "),a("code",{pre:!0},[s._v("base64")]),s._v(" value, like the compress plugin below")]),s._v(" "),a("td",[s._v("String")])]),s._v(" "),a("tr",[a("td",[s._v("status")]),s._v(" "),a("td",[s._v("file status, one of: ready, uploading, success, error")]),s._v(" "),a("td",[s._v("String")])]),s._v(" "),a("tr",[a("td",[s._v("progress")]),s._v(" "),a("td",[s._v("file progress, number 0~1")]),s._v(" "),a("td",[s._v("Number")])]),s._v(" "),a("tr",[a("td",[s._v("file")]),s._v(" "),a("td",[s._v("the original file")]),s._v(" "),a("td",[s._v("File")])]),s._v(" "),a("tr",[a("td",[s._v("response")]),s._v(" "),a("td",[s._v("response data(try to parse to JSON）")]),s._v(" "),a("td",[s._v("Object/Array/String")])]),s._v(" "),a("tr",[a("td",[s._v("responseHeaders")]),s._v(" "),a("td",[s._v("all response headers")]),s._v(" "),a("td",[s._v("String")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("Basic usage")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"//jsonplaceholder.typicode.com/photos/"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":simultaneous-uploads")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@files-added")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"filesAdded"')]),s._v(" />")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n filesAdded(files) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" maxSize = "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1024")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1024")]),s._v(" "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 1M")]),s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("for")]),s._v(" ("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" k "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("in")]),s._v(" files) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" file = files[k]\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (file.size > maxSize) {\n file.ignore = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }\n }\n }\n }\n}\n")])]),s._v(" "),a("p",[s._v("Set "),a("code",{pre:!0},[s._v("action")]),s._v(" to configure the upload target URL for the multipart POST request.")]),s._v(" "),a("p",[s._v("Set "),a("code",{pre:!0},[s._v("simultaneous-uploads")]),s._v(" to configure the max number of files uploading simultaneously .")]),s._v(" "),a("p",[s._v("The "),a("code",{pre:!0},[s._v("files-added")]),s._v(" event is used for file validation, and you can filter file by setting "),a("code",{pre:!0},[s._v("file.ignore = true")]),s._v(".")])]),s._v(" "),a("li",[a("p",[s._v("Compress and uploaded through Base64")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"upload"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":action")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"action"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":simultaneous-uploads")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":process-file")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"processFile"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@file-submitted")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"fileSubmitted"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" compress "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'../../modules/image'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action2")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("target")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'//jsonplaceholder.typicode.com/photos/'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'base64Value'")]),s._v("\n }\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n processFile(file, next) {\n compress(file, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("compress")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1600")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1600")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("quality")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0.5")]),s._v("\n }\n }, next)\n },\n fileSubmitted(file) {\n file.base64Value = file.file.base64\n }\n }\n}\n")])]),s._v(" "),a("p",[s._v("The "),a("code",{pre:!0},[s._v("action")]),s._v(" is an object which contains "),a("code",{pre:!0},[s._v("target")]),s._v(" and "),a("code",{pre:!0},[s._v("prop")]),s._v(". the "),a("code",{pre:!0},[s._v("prop")]),s._v(" could configure which property in file object will be uploaded).")]),s._v(" "),a("p",[s._v("The "),a("code",{pre:!0},[s._v("process-file")]),s._v(" is a function which is used to process the original file, like compress, "),a("code",{pre:!0},[s._v("next")]),s._v(" must be called with the processed file.")]),s._v(" "),a("p",[s._v("The "),a("code",{pre:!0},[s._v("file-submitted")]),s._v(" event will be trigged after the file is processed and added to the "),a("code",{pre:!0},[s._v("upload.files")]),s._v(" with a parameter -- the file object.")])]),s._v(" "),a("li",[a("p",[s._v("Use slots")]),s._v(" "),a("p",[s._v("You can use slots to define your custom HTML structure.")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"upload"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"files"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":action")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"action"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@files-added")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"addedHandler"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@file-error")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"errHandler"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"clear-fix"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload-file")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(file, i) in files"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":file")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"file"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"i"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload-btn")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":multiple")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("＋"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Please click to upload ID card"),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 "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'//jsonplaceholder.typicode.com/photos/'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("files")]),s._v(": []\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n addedHandler() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" file = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".files["),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("]\n file && "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.upload.removeFile(file)\n },\n errHandler(file) {\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// const msg = file.response.message")]),s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createToast({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'warn'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("txt")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Upload fail'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("time")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v("\n }).show()\n }\n }\n}\n")])]),s._v(" "),a("p",[s._v("Custom Style:")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-stylus"}},[a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-file")]),s._v(", "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-btn")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200px")]),s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-file")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n + "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-btn")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": -"),a("span",{attrs:{class:"hljs-number"}},[s._v("200px")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-file-def")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("100%")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("100%")]),s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cubeic-wrong")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": none\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-btn")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": flex\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("align-items")]),s._v(": center\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("justify-content")]),s._v(": center\n > "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("div")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center\n "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("i")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": inline-flex\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("align-items")]),s._v(": center\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("justify-content")]),s._v(": center\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("50px")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("50px")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("32px")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-style")]),s._v(": normal\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#fff")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#333")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("50%")]),s._v("\n")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Attribute")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Type")]),s._v(" "),a("th",[s._v("Accepted Values")]),s._v(" "),a("th",[s._v("Demo")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("action")]),s._v(" "),a("td",[s._v("upload action config")]),s._v(" "),a("td",[s._v("String/Object")]),s._v(" "),a("td",[s._v("''")]),s._v(" "),a("td",[s._v("{ target: '/upload' }")])]),s._v(" "),a("tr",[a("td",[s._v("max")]),s._v(" "),a("td",[s._v("max upload files number")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("10")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("auto")]),s._v(" "),a("td",[s._v("whether auto start upload")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("simultaneousUploads")]),s._v(" "),a("td",[s._v("the number of simultaneous uploads")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("1")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("processFile")]),s._v(" "),a("td",[s._v("process the original file")]),s._v(" "),a("td",[s._v("Function")]),s._v(" "),a("td",[s._v("function (file, next) { next(file) }")]),s._v(" "),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("code",{pre:!0},[s._v("action")]),s._v(" sub configuration")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("If "),a("code",{pre:!0},[s._v("action")]),s._v(" is a string, it will be transformed into "),a("code",{pre:!0},[s._v("{ target: action }")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Attribute")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Type")]),s._v(" "),a("th",[s._v("Default")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("target")]),s._v(" "),a("td",[s._v("the upload target URL for the multipart POST request")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("fileName")]),s._v(" "),a("td",[s._v("the name of the multipart POST parameter")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("'file'")])]),s._v(" "),a("tr",[a("td",[s._v("prop")]),s._v(" "),a("td",[s._v("which property in file object will be uploaded")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("'file'")])]),s._v(" "),a("tr",[a("td",[s._v("headers")]),s._v(" "),a("td",[s._v("extra headers to include in the multipart POST")]),s._v(" "),a("td",[s._v("Object")]),s._v(" "),a("td",[s._v("{}")])]),s._v(" "),a("tr",[a("td",[s._v("data")]),s._v(" "),a("td",[s._v("extra data to include in the multipart POST")]),s._v(" "),a("td",[s._v("Object")]),s._v(" "),a("td",[s._v("{}")])]),s._v(" "),a("tr",[a("td",[s._v("withCredentials")]),s._v(" "),a("td",[s._v("Standard CORS requests would not send or set any cookies by default. In order to include cookies as part of the request, you need to set the withCredentials property to true")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("timeout")]),s._v(" "),a("td",[s._v("upload request timeout value")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("0")])]),s._v(" "),a("tr",[a("td",[s._v("progressInterval")]),s._v(" "),a("td",[s._v("The time interval between progress reports (Unit: ms)")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("100")])]),s._v(" "),a("tr",[a("td",[s._v("checkSuccess")]),s._v(" "),a("td",[s._v("Check the response should be successful, the parameter is "),a("code",{pre:!0},[s._v("response")]),s._v(" object. If return true then it will be treated as successful")]),s._v(" "),a("td",[s._v("Function")]),s._v(" "),a("td",[s._v("function (res) { return true }")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("code",{pre:!0},[s._v("processFile")]),s._v(" sub configuration")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("A function with two parameters: "),a("code",{pre:!0},[s._v("(file, next)")]),s._v(", the "),a("code",{pre:!0},[s._v("file")]),s._v(" is the original file and the "),a("code",{pre:!0},[s._v("next")]),s._v(" callback must be called with the processed file.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Event Name")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Parameters")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("files-added")]),s._v(" "),a("td",[s._v("triggers when files are added, usually used for file validation")]),s._v(" "),a("td",[s._v("original files")])]),s._v(" "),a("tr",[a("td",[s._v("file-submitted")]),s._v(" "),a("td",[s._v("triggers when a file is added to the "),a("code",{pre:!0},[s._v("upload.files")])]),s._v(" "),a("td",[s._v("the file object")])]),s._v(" "),a("tr",[a("td",[s._v("file-removed")]),s._v(" "),a("td",[s._v("triggers when a file is removed")]),s._v(" "),a("td",[s._v("the file object")])]),s._v(" "),a("tr",[a("td",[s._v("file-success")]),s._v(" "),a("td",[s._v("triggers when a file is uploaded successfully")]),s._v(" "),a("td",[s._v("the file object")])]),s._v(" "),a("tr",[a("td",[s._v("file-error")]),s._v(" "),a("td",[s._v("triggers when a file is failed to upload")]),s._v(" "),a("td",[s._v("the file object")])]),s._v(" "),a("tr",[a("td",[s._v("file-click")]),s._v(" "),a("td",[s._v("triggers when a file is clicked")]),s._v(" "),a("td",[s._v("the file object")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Method name")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Parameter")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("start")]),s._v(" "),a("td",[s._v("start uploading")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("pause")]),s._v(" "),a("td",[s._v("pause uploading")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("retry")]),s._v(" "),a("td",[s._v("retry uploading")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("removeFile")]),s._v(" "),a("td",[s._v("remove file")]),s._v(" "),a("td",[s._v("the file object")])])])])}]}},YJZO:function(s,t,a){s.exports=a("aeWw")},aeWw:function(s,t,a){var e=a("VU/8")(null,a("Y8qW"),null,null,null);s.exports=e.exports}}); \ No newline at end of file diff --git a/docs/js/40.d2f3134839a8b3d1e640.js b/docs/js/40.d2f3134839a8b3d1e640.js new file mode 100644 index 0000000000000000000000000000000000000000..6205eb773022e855e2a27b9e90635f60c9906597 --- /dev/null +++ b/docs/js/40.d2f3134839a8b3d1e640.js @@ -0,0 +1 @@ +webpackJsonp([40],{Y8qW: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:"Upload"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Upload-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(" Upload")]),s._v(" "),s._m(0),s._v(" "),s._m(1),s._v(" "),s._m(2),s._v(" "),s._m(3),s._v(" "),a("h3",{attrs:{id:"Example"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Example-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Example")]),s._v(" "),s._m(4),s._v(" "),a("h3",{attrs:{id:"Propsconfiguration"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Propsconfiguration-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Props configuration")]),s._v(" "),s._m(5),s._v(" "),s._m(6),s._v(" "),s._m(7),s._v(" "),s._m(8),s._v(" "),s._m(9),s._v(" "),s._m(10),s._v(" "),a("h3",{attrs:{id:"Events"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Events-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Events")]),s._v(" "),s._m(11),s._v(" "),a("h3",{attrs:{id:"Instancemethods"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Instancemethods-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Instance methods")]),s._v(" "),s._m(12)])},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("blockquote",[a("p",[s._v("New in 1.3.0+")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("Upload")]),s._v(" component.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("strong",[s._v("Notice:")]),s._v(" In this document, all the original File will be called "),a("strong",[s._v("original file")]),s._v(", since the wrapped file object will be called "),a("strong",[s._v("file object")]),s._v(". The structure of "),a("strong",[s._v("file object")]),s._v(" show as following:")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Attribute")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Type")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("v-model")]),s._v(" "),a("td",[s._v("file list")]),s._v(" "),a("td",[s._v("Array")])]),s._v(" "),a("tr",[a("td",[s._v("name")]),s._v(" "),a("td",[s._v("file name")]),s._v(" "),a("td",[s._v("String")])]),s._v(" "),a("tr",[a("td",[s._v("size")]),s._v(" "),a("td",[s._v("file size")]),s._v(" "),a("td",[s._v("Number")])]),s._v(" "),a("tr",[a("td",[s._v("url")]),s._v(" "),a("td",[s._v("file url, created by URL.createObjectURL, for preview")]),s._v(" "),a("td",[s._v("String")])]),s._v(" "),a("tr",[a("td",[s._v("base64")]),s._v(" "),a("td",[s._v("file base64 value, the value is equaled to the original file's base64 value. It is "),a("code",{pre:!0},[s._v("''")]),s._v(" by default, but you can have some plugins to added this "),a("code",{pre:!0},[s._v("base64")]),s._v(" value, like the compress plugin below")]),s._v(" "),a("td",[s._v("String")])]),s._v(" "),a("tr",[a("td",[s._v("status")]),s._v(" "),a("td",[s._v("file status, one of: ready, uploading, success, error")]),s._v(" "),a("td",[s._v("String")])]),s._v(" "),a("tr",[a("td",[s._v("progress")]),s._v(" "),a("td",[s._v("file progress, number 0~1")]),s._v(" "),a("td",[s._v("Number")])]),s._v(" "),a("tr",[a("td",[s._v("file")]),s._v(" "),a("td",[s._v("the original file")]),s._v(" "),a("td",[s._v("File")])]),s._v(" "),a("tr",[a("td",[s._v("response")]),s._v(" "),a("td",[s._v("response data(try to parse to JSON）")]),s._v(" "),a("td",[s._v("Object/Array/String")])]),s._v(" "),a("tr",[a("td",[s._v("responseHeaders")]),s._v(" "),a("td",[s._v("all response headers")]),s._v(" "),a("td",[s._v("String")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("Basic usage")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"//jsonplaceholder.typicode.com/photos/"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":simultaneous-uploads")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@files-added")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"filesAdded"')]),s._v(" />")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n filesAdded(files) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" maxSize = "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1024")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1024")]),s._v(" "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 1M")]),s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("for")]),s._v(" ("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" k "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("in")]),s._v(" files) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" file = files[k]\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (file.size > maxSize) {\n file.ignore = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }\n }\n }\n }\n}\n")])]),s._v(" "),a("p",[s._v("Set "),a("code",{pre:!0},[s._v("action")]),s._v(" to configure the upload target URL for the multipart POST request.")]),s._v(" "),a("p",[s._v("Set "),a("code",{pre:!0},[s._v("simultaneous-uploads")]),s._v(" to configure the max number of files uploading simultaneously .")]),s._v(" "),a("p",[s._v("The "),a("code",{pre:!0},[s._v("files-added")]),s._v(" event is used for file validation, and you can filter file by setting "),a("code",{pre:!0},[s._v("file.ignore = true")]),s._v(".")])]),s._v(" "),a("li",[a("p",[s._v("Compress and uploaded through Base64")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"upload"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":action")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"action"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":simultaneous-uploads")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":process-file")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"processFile"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@file-submitted")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"fileSubmitted"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" compress "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'../../modules/image'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action2")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("target")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'//jsonplaceholder.typicode.com/photos/'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'base64Value'")]),s._v("\n }\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n processFile(file, next) {\n compress(file, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("compress")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1600")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1600")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("quality")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0.5")]),s._v("\n }\n }, next)\n },\n fileSubmitted(file) {\n file.base64Value = file.file.base64\n }\n }\n}\n")])]),s._v(" "),a("p",[s._v("The "),a("code",{pre:!0},[s._v("action")]),s._v(" is an object which contains "),a("code",{pre:!0},[s._v("target")]),s._v(" and "),a("code",{pre:!0},[s._v("prop")]),s._v(". the "),a("code",{pre:!0},[s._v("prop")]),s._v(" could configure which property in file object will be uploaded).")]),s._v(" "),a("p",[s._v("The "),a("code",{pre:!0},[s._v("process-file")]),s._v(" is a function which is used to process the original file, like compress, "),a("code",{pre:!0},[s._v("next")]),s._v(" must be called with the processed file.")]),s._v(" "),a("p",[s._v("The "),a("code",{pre:!0},[s._v("file-submitted")]),s._v(" event will be trigged after the file is processed and added to the "),a("code",{pre:!0},[s._v("upload.files")]),s._v(" with a parameter -- the file object.")])]),s._v(" "),a("li",[a("p",[s._v("Use slots")]),s._v(" "),a("p",[s._v("You can use slots to define your custom HTML structure.")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"upload"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"files"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":action")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"action"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@files-added")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"addedHandler"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@file-error")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"errHandler"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"clear-fix"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload-file")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(file, i) in files"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":file")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"file"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"i"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload-btn")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":multiple")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("＋"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Please click to upload ID card"),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 "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'//jsonplaceholder.typicode.com/photos/'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("files")]),s._v(": []\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n addedHandler() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" file = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".files["),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("]\n file && "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.upload.removeFile(file)\n },\n errHandler(file) {\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// const msg = file.response.message")]),s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createToast({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'warn'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("txt")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Upload fail'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("time")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v("\n }).show()\n }\n }\n}\n")])]),s._v(" "),a("p",[s._v("Custom Style:")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-stylus"}},[a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-file")]),s._v(", "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-btn")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200px")]),s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-file")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n + "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-btn")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": -"),a("span",{attrs:{class:"hljs-number"}},[s._v("200px")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-file-def")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("100%")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("100%")]),s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cubeic-wrong")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": none\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-btn")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": flex\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("align-items")]),s._v(": center\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("justify-content")]),s._v(": center\n > "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("div")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center\n "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("i")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": inline-flex\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("align-items")]),s._v(": center\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("justify-content")]),s._v(": center\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("50px")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("50px")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("32px")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-style")]),s._v(": normal\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#fff")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#333")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("50%")]),s._v("\n")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Attribute")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Type")]),s._v(" "),a("th",[s._v("Accepted Values")]),s._v(" "),a("th",[s._v("Demo")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("action")]),s._v(" "),a("td",[s._v("upload action config")]),s._v(" "),a("td",[s._v("String/Object")]),s._v(" "),a("td",[s._v("''")]),s._v(" "),a("td",[s._v("{ target: '/upload' }")])]),s._v(" "),a("tr",[a("td",[s._v("max")]),s._v(" "),a("td",[s._v("max upload files number")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("10")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("auto")]),s._v(" "),a("td",[s._v("whether auto start upload")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("simultaneousUploads")]),s._v(" "),a("td",[s._v("the number of simultaneous uploads")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("1")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("processFile")]),s._v(" "),a("td",[s._v("process the original file")]),s._v(" "),a("td",[s._v("Function")]),s._v(" "),a("td",[s._v("function (file, next) { next(file) }")]),s._v(" "),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("code",{pre:!0},[s._v("action")]),s._v(" sub configuration")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("If "),a("code",{pre:!0},[s._v("action")]),s._v(" is a string, it will be transformed into "),a("code",{pre:!0},[s._v("{ target: action }")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Attribute")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Type")]),s._v(" "),a("th",[s._v("Default")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("target")]),s._v(" "),a("td",[s._v("the upload target URL for the multipart POST request")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("fileName")]),s._v(" "),a("td",[s._v("the name of the multipart POST parameter")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("'file'")])]),s._v(" "),a("tr",[a("td",[s._v("prop")]),s._v(" "),a("td",[s._v("which property in file object will be uploaded")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("'file'")])]),s._v(" "),a("tr",[a("td",[s._v("headers")]),s._v(" "),a("td",[s._v("extra headers to include in the multipart POST")]),s._v(" "),a("td",[s._v("Object")]),s._v(" "),a("td",[s._v("{}")])]),s._v(" "),a("tr",[a("td",[s._v("data")]),s._v(" "),a("td",[s._v("extra data to include in the multipart POST")]),s._v(" "),a("td",[s._v("Object")]),s._v(" "),a("td",[s._v("{}")])]),s._v(" "),a("tr",[a("td",[s._v("withCredentials")]),s._v(" "),a("td",[s._v("Standard CORS requests would not send or set any cookies by default. In order to include cookies as part of the request, you need to set the withCredentials property to true")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("timeout")]),s._v(" "),a("td",[s._v("upload request timeout value")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("0")])]),s._v(" "),a("tr",[a("td",[s._v("progressInterval")]),s._v(" "),a("td",[s._v("The time interval between progress reports (Unit: ms)")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("100")])]),s._v(" "),a("tr",[a("td",[s._v("checkSuccess")]),s._v(" "),a("td",[s._v("Check the response should be successful, the parameter is "),a("code",{pre:!0},[s._v("response")]),s._v(" object. If return true then it will be treated as successful")]),s._v(" "),a("td",[s._v("Function")]),s._v(" "),a("td",[s._v("function (res) { return true }")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("code",{pre:!0},[s._v("processFile")]),s._v(" sub configuration")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("A function with two parameters: "),a("code",{pre:!0},[s._v("(file, next)")]),s._v(", the "),a("code",{pre:!0},[s._v("file")]),s._v(" is the original file and the "),a("code",{pre:!0},[s._v("next")]),s._v(" callback must be called with the processed file.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Event Name")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Parameters")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("files-added")]),s._v(" "),a("td",[s._v("triggers when files are added, usually used for file validation")]),s._v(" "),a("td",[s._v("original files")])]),s._v(" "),a("tr",[a("td",[s._v("file-submitted")]),s._v(" "),a("td",[s._v("triggers when a file is added to the "),a("code",{pre:!0},[s._v("upload.files")])]),s._v(" "),a("td",[s._v("the file object")])]),s._v(" "),a("tr",[a("td",[s._v("file-removed")]),s._v(" "),a("td",[s._v("triggers when a file is removed")]),s._v(" "),a("td",[s._v("the file object")])]),s._v(" "),a("tr",[a("td",[s._v("file-success")]),s._v(" "),a("td",[s._v("triggers when a file is uploaded successfully")]),s._v(" "),a("td",[s._v("the file object")])]),s._v(" "),a("tr",[a("td",[s._v("file-error")]),s._v(" "),a("td",[s._v("triggers when a file is failed to upload")]),s._v(" "),a("td",[s._v("the file object")])]),s._v(" "),a("tr",[a("td",[s._v("file-click")]),s._v(" "),a("td",[s._v("triggers when a file is clicked")]),s._v(" "),a("td",[s._v("the file object")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Method name")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Parameter")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("start")]),s._v(" "),a("td",[s._v("start uploading")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("pause")]),s._v(" "),a("td",[s._v("pause uploading")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("retry")]),s._v(" "),a("td",[s._v("retry uploading")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("removeFile")]),s._v(" "),a("td",[s._v("remove file")]),s._v(" "),a("td",[s._v("the file object")])])])])}]}},YJZO:function(s,t,a){s.exports=a("aeWw")},aeWw:function(s,t,a){var e=a("VU/8")(null,a("Y8qW"),null,null,null);s.exports=e.exports}}); \ No newline at end of file diff --git a/docs/js/69.35135f35304abdd40953.js b/docs/js/69.35135f35304abdd40953.js deleted file mode 100644 index 5c0d6feace2f80ef7957e0c48f348fa4986824d5..0000000000000000000000000000000000000000 --- a/docs/js/69.35135f35304abdd40953.js +++ /dev/null @@ -1 +0,0 @@ -webpackJsonp([69],{"3JND":function(e,t,s){var a=s("VU/8")(null,s("CUf6"),null,null,null);e.exports=a.exports},CUf6: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("Or components in cube-ui, like Dialog:")]),e._v(" "),e._m(5),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:"https://didi.github.io/cube-ui/#/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("")]),e._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[e._v("")]),e._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[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("")]),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")])])},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(" { Dialog } "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("from")]),e._v(" "),s("span",{attrs:{class:"hljs-string"}},[e._v("'cube-ui'")]),e._v("\nDialog.$create({\n ...\n})\n")])])}]}},"i/fd":function(e,t,s){e.exports=s("3JND")}}); \ No newline at end of file diff --git a/docs/js/69.49bb82aa5ac7e27141db.js b/docs/js/69.49bb82aa5ac7e27141db.js new file mode 100644 index 0000000000000000000000000000000000000000..f46c10cbb8489836740caad5f73ee4fcaf710277 --- /dev/null +++ b/docs/js/69.49bb82aa5ac7e27141db.js @@ -0,0 +1 @@ +webpackJsonp([69],{"3JND":function(e,t,s){var a=s("VU/8")(null,s("CUf6"),null,null,null);e.exports=a.exports},CUf6: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("Or components in cube-ui, like Dialog:")]),e._v(" "),e._m(5),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:"https://didi.github.io/cube-ui/#/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",[s("strong",[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",[s("strong",[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",[s("strong",[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.")]),e._v(" "),s("blockquote",[s("p",[e._v("And the "),s("code",{pre:!0},[e._v("remove")]),e._v(" method will be "),s("strong",[e._v("attached")]),e._v(" to this instance.")])]),e._v(" "),s("p",[e._v("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.")]),e._v(" "),s("p",[e._v("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("")]),e._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[e._v("")]),e._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[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("")]),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")])])},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(" { Dialog } "),s("span",{attrs:{class:"hljs-keyword"}},[e._v("from")]),e._v(" "),s("span",{attrs:{class:"hljs-string"}},[e._v("'cube-ui'")]),e._v("\nDialog.$create({\n ...\n})\n")])])}]}},"i/fd":function(e,t,s){e.exports=s("3JND")}}); \ No newline at end of file diff --git a/docs/js/manifest.18da289a6a740f0da94f.js b/docs/js/manifest.5b7594f1cc5096e4bddf.js similarity index 88% rename from docs/js/manifest.18da289a6a740f0da94f.js rename to docs/js/manifest.5b7594f1cc5096e4bddf.js index 6ad52a12e3ffd7d9ab1f0a55e26aabde4ece9e65..2eac437a76b9c8a69b673d93abe109c9f83807db 100644 --- a/docs/js/manifest.18da289a6a740f0da94f.js +++ b/docs/js/manifest.5b7594f1cc5096e4bddf.js @@ -1 +1 @@ -!function(e){function a(c){if(f[c])return f[c].exports;var b=f[c]={i:c,l:!1,exports:{}};return e[c].call(b.exports,b,b.exports,a),b.l=!0,b.exports}var c=window.webpackJsonp;window.webpackJsonp=function(f,d,n){for(var r,t,o,u=0,i=[];u