Commit 58dc1f766b322e4fb613a73bb5457c60d2252618
1 parent
22fd4093
Exists in
master
and in
1 other branch
优化webpack编译配置，markdown支持html，优化代码块内容显示
Showing
12 changed files
with
25 additions
and
73 deletions
Show diff stats
examples/components/string-html.vue
| ... | ... | @@ -1,27 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <div> | |
| 3 | - <!-- 通过slot拿到html标签内容，渲染后删除slot --> | |
| 4 | - <span ref="raw" style="display: none;"><slot></slot></span> | |
| 5 | - <!-- 解析获取到的html字符串为html标签 --> | |
| 6 | - <div v-html="nodeHtml"></div> | |
| 7 | - </div> | |
| 8 | -</template> | |
| 9 | - | |
| 10 | -<script> | |
| 11 | -export default { | |
| 12 | - name: 'stringHtml', | |
| 13 | - data() { | |
| 14 | - return { | |
| 15 | - nodeHtml: '' | |
| 16 | - }; | |
| 17 | - }, | |
| 18 | - mounted() { | |
| 19 | - const { $slots = {} } = this; | |
| 20 | - const defaultNodes = $slots.default || {}; | |
| 21 | - const vnode = defaultNodes[0] || {}; | |
| 22 | - const { elm = {} } = vnode; | |
| 23 | - this.nodeHtml = elm.innerText; | |
| 24 | - this.$refs.raw.parentNode.removeChild(this.$refs.raw); | |
| 25 | - } | |
| 26 | -} | |
| 27 | -</script> | |
| 28 | 0 | \ No newline at end of file |
examples/main.js
| ... | ... | @@ -9,7 +9,6 @@ import ElementUI from 'element-ui'; |
| 9 | 9 | import EagleWebToolkit from '../packages'; |
| 10 | 10 | import NProgress from 'nprogress'; |
| 11 | 11 | import EagleCodeSnippet from "@/components/code-snippet"; |
| 12 | -import EagleStringHtml from "@/components/string-html"; | |
| 13 | 12 | |
| 14 | 13 | import '@/styles/index.scss'; |
| 15 | 14 | import "highlight.js/styles/github.css"; |
| ... | ... | @@ -46,7 +45,6 @@ NProgress.configure({ showSpinner: false }); |
| 46 | 45 | |
| 47 | 46 | // 注册代码片段组件 |
| 48 | 47 | Vue.component("eagle-code-snippet", EagleCodeSnippet); |
| 49 | -Vue.component("eagle-string-html", EagleStringHtml); | |
| 50 | 48 | // 注册饿了么UI |
| 51 | 49 | Vue.use(ElementUI); |
| 52 | 50 | // 注册Eagle组件库 | ... | ... |
examples/views/docs/component/detail.md
| ... | ... | @@ -195,7 +195,7 @@ export default { |
| 195 | 195 | -|-|-|-|- |
| 196 | 196 | value / v-model | 绑定值 | Object | - | {} |
| 197 | 197 | list | 表单项配置列表 | Array | - | [] |
| 198 | -formProps | [el-form组件参数](https://element.eleme.cn/#/zh-CN/component/form#form-attributes) | Object | - | {} | |
| 198 | +formProps | <a href="https://element.eleme.cn/#/zh-CN/component/form#form-attributes" target="_blank">el-form组件参数</a> | Object | - | {} | |
| 199 | 199 | span | 数据项占位 | Number | 0 - 24 | 8 |
| 200 | 200 | formatter | 格式化 | Function | - | - |
| 201 | 201 | agentKey | 代理key，用另一个key的值表示当前内容 | String | - | - | ... | ... |
examples/views/docs/component/form.md
| ... | ... | @@ -241,7 +241,7 @@ export default { |
| 241 | 241 | -|-|-|-|- |
| 242 | 242 | value / v-model | 绑定值 | Object | - | - |
| 243 | 243 | list | 表单项配置列表 | Array | - | [] |
| 244 | -formProps | [el-form组件参数](https://element.eleme.cn/#/zh-CN/component/form#form-attributes) | Object | - | {} | |
| 244 | +formProps | <a href="https://element.eleme.cn/#/zh-CN/component/form#form-attributes" target="_blank">el-form组件参数</a> | Object | - | {} | |
| 245 | 245 | span | 表单项占位 | Number | 0 - 24 | 24 |
| 246 | 246 | submitting | 提交按钮加载状态 | Boolean | true/false | false |
| 247 | 247 | submitPure | 纯净提交，设置为true时submit的对象只会包含配置项配置过的字段 | Boolean | true/false | false | ... | ... |
examples/views/docs/component/scheme.md
| ... | ... | @@ -317,4 +317,4 @@ selection | 选中表格内容时触发 | selection |
| 317 | 317 | -|-|-|-|- |
| 318 | 318 | include | 包含在哪些组件中 | String,Array | - | ['search', 'table', 'form'] |
| 319 | 319 | exclude | 不包含在哪些组件中 | String,Array | - | [] |
| 320 | -其它参数 | 同时包含Form、Table、Search、Detail配置项的参数 | - | - | - | |
| 321 | 320 | \ No newline at end of file |
| 321 | +其它参数 | 同时包含Form、Table、Search、Detail配置项的参数 <a onclick="window.$message.success('成功！')">测试</a> | - | - | - | |
| 322 | 322 | \ No newline at end of file | ... | ... |
examples/views/docs/component/search.md
| ... | ... | @@ -50,7 +50,7 @@ export default { |
| 50 | 50 | |
| 51 | 51 | ```html |
| 52 | 52 | <template> |
| 53 | - <eagle-search :list="searchList"> | |
| 53 | + <eagle-search :list="searchList" :span="8"> | |
| 54 | 54 | <template #type="{ model }"> |
| 55 | 55 | <el-select v-model="model.type"> |
| 56 | 56 | <el-option value="A">选项A</el-option> |
| ... | ... | @@ -100,7 +100,7 @@ export default { |
| 100 | 100 | -|-|-|-|- |
| 101 | 101 | value / v-model | 绑定值 | Object | - | - |
| 102 | 102 | list | 表单项配置列表 | Array | - | [] |
| 103 | -formProps | [el-form组件参数](https://element.eleme.cn/#/zh-CN/component/form#form-attributes) | Object | - | {} | |
| 103 | +formProps | <a href="https://element.eleme.cn/#/zh-CN/component/form#form-attributes" target="_blank">el-form组件参数</a> | Object | - | {} | |
| 104 | 104 | span | 表单项占位 | Number | 0 - 24 | 6 |
| 105 | 105 | searching | 查询按钮加载状态 | Boolean | true/false | false |
| 106 | 106 | ... | ... |
examples/views/docs/component/table.md
| ... | ... | @@ -4,7 +4,7 @@ |
| 4 | 4 | |
| 5 | 5 | ## 基础用法 |
| 6 | 6 | |
| 7 | -创建一个基础表格，配置项支持[el-table-column组件参数](https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes) | |
| 7 | +创建一个基础表格，配置项支持<a href="https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes" target="_blank">el-table-column组件参数</a> | |
| 8 | 8 | |
| 9 | 9 | ::: snippet 使用`list`属性设置数据源，每一项都已设置为**el-table-column** |
| 10 | 10 | |
| ... | ... | @@ -163,7 +163,7 @@ tableEvents | ElementUI表格事件 | Object | - | {} |
| 163 | 163 | |
| 164 | 164 | ## Methods 方法 |
| 165 | 165 | |
| 166 | -可以通过引用`$ref`获取到el-table的实体对象`instance`，从而使用[el-table](https://element.eleme.cn/#/zh-CN/component/table#table-methods)的所有方法 | |
| 166 | +可以通过引用`$ref`获取到el-table的实体对象`instance`，从而使用<a href="https://element.eleme.cn/#/zh-CN/component/table#table-methods" target="_blank">el-table</a>的所有方法 | |
| 167 | 167 | |
| 168 | 168 | ## List 表单项配置列表 |
| 169 | 169 | |
| ... | ... | @@ -174,4 +174,4 @@ tableEvents | ElementUI表格事件 | Object | - | {} |
| 174 | 174 | key | 参数名 | String | - | - |
| 175 | 175 | label | 参数标签 | String | - | - |
| 176 | 176 | visible | 表格列显示状态 | Boolean,Function(tableData: array) | - | true |
| 177 | -其它参数 | [el-table-column组件参数](https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes) | Any | - | - | |
| 178 | 177 | \ No newline at end of file |
| 178 | +其它参数 | <a href="https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes" target="_blank">el-table-column组件参数</a> | Any | - | - | ... | ... |
examples/views/docs/guide/introduce.md
| 1 | 1 | # {{ appName }} |
| 2 | 2 | |
| 3 | -`{{ appName }}` 是在基于**Vue 2.0**的 [**Element**](https://element.eleme.cn) 组件库基础上的扩展组件库，主要用于快速生成企业后台管理项目。 | |
| 3 | +`{{ appName }}` 是在基于**Vue 2.0**的 <a href="https://element.eleme.cn/#/zh-CN" target="_blank">Element</a> 组件库基础上的扩展组件库，主要用于快速生成企业后台管理项目。 | |
| 4 | 4 | |
| 5 | 5 | ## 特性 |
| 6 | 6 | |
| 7 | 7 | 数据驱动视图、组件模块化替换、任意组件渲染 |
| 8 | 8 | |
| 9 | -::: html | |
| 10 | 9 | <div style="display: flex; align-items: center;padding: 30px 0;"> |
| 11 | 10 | <img src="/img/vue.svg" style="width: 100px;" /> |
| 12 | 11 | <i class="el-icon-plus" style="padding: 0 40px;"></i> |
| ... | ... | @@ -14,11 +13,10 @@ |
| 14 | 13 | <i class="el-icon-right" style="padding: 0 40px;"></i> |
| 15 | 14 | <img src="/img/logo.svg" style="width: 100px;" /> |
| 16 | 15 | </div> |
| 17 | -::: | |
| 18 | 16 | |
| 19 | 17 | **Vue.js**提供核心驱动，**Element**组成基本结构，{{ appName }}渲染配置数据 |
| 20 | 18 | |
| 21 | 19 | ## 谁在使用 |
| 22 | 20 | |
| 23 | -* [翌车科技](http://www.yichekeji.com/) | |
| 24 | -* [申服科技](http://www.shenfutech.com/) | |
| 25 | 21 | \ No newline at end of file |
| 22 | +* <a href="http://www.yichekeji.com/" target="_blank">翌车科技</a> | |
| 23 | +* <a href="http://www.shenfutech.com/" target="_blank">申服科技</a> | ... | ... |
examples/views/layout/component.vue
| ... | ... | @@ -99,9 +99,10 @@ export default { |
| 99 | 99 | this.anchorList = []; |
| 100 | 100 | const domList = document.querySelectorAll('.header-anchor'); |
| 101 | 101 | let anchorList = []; |
| 102 | + let anchorBreak = false; | |
| 102 | 103 | for (let index in domList) { |
| 103 | 104 | let dom = domList[index] || {}; |
| 104 | - if (dom.addEventListener) { | |
| 105 | + if (dom.parentNode) { | |
| 105 | 106 | dom.addEventListener('click', e => { |
| 106 | 107 | // 阻止a标签的默认行为 |
| 107 | 108 | e = e || window.event; |
| ... | ... | @@ -109,14 +110,13 @@ export default { |
| 109 | 110 | document.documentElement.scrollTop = dom.offsetTop - headerHeight; |
| 110 | 111 | this.$router.replace({ path: this.$route.path, hash: dom.hash }); |
| 111 | 112 | }); |
| 112 | - } | |
| 113 | - if (dom.parentNode) { | |
| 114 | - const text = `${dom.parentNode.innerHTML}`.replace(/<\/?.*[^>]*>/g, '').trim(); | |
| 115 | - if (text === 'API') { | |
| 116 | - break; | |
| 117 | - } else { | |
| 113 | + const text = `${dom.parentNode.innerHTML}`.replace(/<\/?.*[^>]*>/g, '').trim(); // 从innerHTML中去掉其它标签获及空格取文本内容 | |
| 114 | + if (text === 'API') { // 跳过API及之后的锚点 | |
| 115 | + anchorBreak = true; | |
| 116 | + } | |
| 117 | + if (!anchorBreak) { | |
| 118 | 118 | anchorList.push({ |
| 119 | - text: `${dom.parentNode.innerHTML}`.replace(/<\/?.*[^>]*>/g, '').trim(), | |
| 119 | + text, | |
| 120 | 120 | href: dom.href, |
| 121 | 121 | hash: dom.hash, |
| 122 | 122 | }); |
| ... | ... | @@ -190,7 +190,7 @@ export default { |
| 190 | 190 | text-decoration: none; |
| 191 | 191 | padding: 5px 20px; |
| 192 | 192 | color: $text; |
| 193 | - transition: all 300ms; | |
| 193 | + transition: all 300ms ease-out; | |
| 194 | 194 | border-left: 1px solid $border; |
| 195 | 195 | cursor: pointer; |
| 196 | 196 | } | ... | ... |
vue.config.js
webpack/markdown-loader.js
| ... | ... | @@ -12,16 +12,13 @@ module.exports = source => { |
| 12 | 12 | let styleCodeList = []; |
| 13 | 13 | // 初始还MarkdownIt用于转换md文件为html |
| 14 | 14 | const markdownIt = MarkdownIt({ |
| 15 | + html: true, | |
| 15 | 16 | // 将markdown中的代码块用hljs高亮显示 |
| 16 | 17 | highlight: (str, lang) => { |
| 17 | 18 | if (lang && hljs.getLanguage(lang)) { |
| 18 | - return `<pre class="hljs"><code>${ | |
| 19 | - hljs.highlight(lang, str.replace(/\{\{/g, '{ {').replace(/\}\}/g, '} }'), true).value | |
| 20 | - }</code></pre>`; | |
| 19 | + return `<pre class="hljs" v-pre><code>${hljs.highlight(lang, str, true).value}</code></pre>`; | |
| 21 | 20 | } |
| 22 | - return `<pre class="hljs"><code>${markdownIt.utils.escapeHtml( | |
| 23 | - str.replace(/\{\{/g, '{ {').replace(/\}\}/g, '} }') | |
| 24 | - )}</code></pre>`; | |
| 21 | + return `<pre class="hljs" v-pre><code>${markdownIt.utils.escapeHtml(str)}</code></pre>`; | |
| 25 | 22 | } |
| 26 | 23 | }); |
| 27 | 24 | // 使用【markdown-it-anchor】插件为markdown创建锚点 |
| ... | ... | @@ -92,20 +89,6 @@ module.exports = source => { |
| 92 | 89 | </eagle-code-snippet> `; |
| 93 | 90 | } |
| 94 | 91 | }); |
| 95 | - // 使用【markdown-it-container】插件解析【:::html :::】代码块为vue渲染 | |
| 96 | - markdownIt.use(MarkdownItContainer, "html", { | |
| 97 | - // 验证代码块为【:::html :::】才进行渲染 | |
| 98 | - validate(params) { | |
| 99 | - return params.trim().match(/^html\s*(.*)$/); | |
| 100 | - }, | |
| 101 | - // 代码块渲染 | |
| 102 | - render(tokens, index) { | |
| 103 | - if (tokens[index].nesting === 1) { | |
| 104 | - return `<eagle-string-html>`; | |
| 105 | - } | |
| 106 | - return `</eagle-string-html>`; | |
| 107 | - } | |
| 108 | - }); | |
| 109 | 92 | // 将所有转换好的代码字符串拼接成vue单组件template、script、style格式 |
| 110 | 93 | return ` |
| 111 | 94 | <template> | ... | ... |