diff --git a/src/components/core/Markdown/index.vue b/src/components/core/Markdown/index.vue index 7dbdf260..9a79f2ec 100644 --- a/src/components/core/Markdown/index.vue +++ b/src/components/core/Markdown/index.vue @@ -21,6 +21,11 @@ export default { type: String, required: false, default: '' + }, + highlight: { + type: Boolean, + required: false, + default: false } }, data () { @@ -55,7 +60,7 @@ export default { }, marked (data) { return marked(data, { - highlight: (code) => highlight.highlightAuto(code).value + ...this.highlight ? {highlight: (code) => highlight.highlightAuto(code).value} : {} }) } } diff --git a/src/pages/demo/plugins/import/xlsx.vue b/src/pages/demo/plugins/import/xlsx.vue index 446f9e20..59a8e954 100644 --- a/src/pages/demo/plugins/import/xlsx.vue +++ b/src/pages/demo/plugins/import/xlsx.vue @@ -46,7 +46,7 @@ export default { }, methods: { handleUpload (file) { - this.$import.excel(file) + this.$import.xlsx(file) .then(({header, results}) => { this.table.columns = header.map(e => { return { diff --git a/src/plugin/import/index.js b/src/plugin/import/index.js index 186618e7..467e4eaa 100644 --- a/src/plugin/import/index.js +++ b/src/plugin/import/index.js @@ -19,8 +19,8 @@ export default { }) }) }, - // 导入 excel - excel (file) { + // 导入 xlsx + xlsx (file) { return new Promise((resolve, reject) => { const reader = new FileReader() const fixdata = data => { diff --git a/static/markdownFiles/article/插件 - 导入.md b/static/markdownFiles/article/插件 - 导入.md index 43a3ee2b..6d98873d 100644 --- a/static/markdownFiles/article/插件 - 导入.md +++ b/static/markdownFiles/article/插件 - 导入.md @@ -1,26 +1,72 @@ -解析 CSV 文件使用 [PapaParse](https://github.com/mholt/PapaParse) +# Vue.$import + +本框架集成了数据导入功能,并包装成插件 + +## 注册插件 + +> 默认已经注册,可以直接使用 ``` -// 导入插件 -import papa from 'papaparse' +import pluginImport from '@/plugin/import' +Vue.use(pluginImport) +``` -//在选择文件后处理数据 +之后就可以在组件中使用 `this.$import` 来调用导出功能 + +## Vue.$import.csv() + +导入csv文件,并且返回一个 `Promise` 对象 + +参数 + +| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 | +| --- | --- | --- | --- | --- | --- | +| file | 选择的文件 | 是 | File | | | + +使用 + +``` +// 在选择文件后调用 handleUpload (file) { - papa.parse(file, { - header: true, - skipEmptyLines: true, - complete: (results, file) => { - // 设置表格列 - this.table.columns = Object.keys(results.data[0]).map(e => ({ + this.$import.csv(file) + .then(res => { + this.table.columns = Object.keys(res.data[0]).map(e => ({ label: e, prop: e })) - // 表格赋值 - this.table.data = results.data - } - }) + this.table.data = res.data + }) + // 阻止默认的上传 return false } ``` -> 详细的papaparse使用API请移步官网文档 +## Vue.$import.xlsx() + +导入xlsx文件,并且返回一个 `Promise` 对象 + +参数 + +| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 | +| --- | --- | --- | --- | --- | --- | +| file | 选择的文件 | 是 | File | | | + +使用 + +``` +// 在选择文件后调用 +handleUpload (file) { + this.$import.xlsx(file) + .then(({header, results}) => { + this.table.columns = header.map(e => { + return { + label: e, + prop: e + } + }) + this.table.data = results + }) + // 阻止默认的上传 + return false +} +``` \ No newline at end of file