fix md
tangjinzhou
parent
7cb596df9c
commit
f4f3a5ecbc
|
|
@ -1,10 +1,5 @@
|
|||
<template>
|
||||
<div :class="classes">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import { filterEmpty } from '../_util/vnode'
|
||||
export default {
|
||||
name: 'ButtonGroup',
|
||||
props: {
|
||||
|
|
@ -38,5 +33,13 @@ export default {
|
|||
]
|
||||
},
|
||||
},
|
||||
render () {
|
||||
const { classes, $slots } = this
|
||||
return (
|
||||
<div class={classes}>
|
||||
{filterEmpty($slots.default)}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,13 @@
|
|||
::: demo
|
||||
<summary>
|
||||
#### 按钮类型
|
||||
按钮有四种类型：主按钮、次按钮、虚线按钮、危险按钮。主按钮在同一个操作区域最多出现一次。
|
||||
</summary>
|
||||
|
||||
<cn>
|
||||
#### 按钮类型
|
||||
按钮有四种类型：主按钮、次按钮、虚线按钮、危险按钮。主按钮在同一个操作区域最多出现一次。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Type
|
||||
There are `primary` button, `default` button, `dashed` button and `danger` button in antd.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
|
|
@ -14,4 +19,4 @@
|
|||
</div>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -1,25 +1,3 @@
|
|||
<template>
|
||||
<div>
|
||||
<md>
|
||||
# Button 按钮
|
||||
按钮用于开始一个即时操作。
|
||||
## 何时使用
|
||||
标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
|
||||
|
||||
## 代码演示
|
||||
</md>
|
||||
<Basic />
|
||||
<ButtonGroup />
|
||||
<Disabled />
|
||||
<Ghost />
|
||||
<Icon />
|
||||
<Loading />
|
||||
<h1>TODO ： Multiple</h1>
|
||||
<Multiple />
|
||||
<Size />
|
||||
<Doc class="markdown"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Basic from './basic.md'
|
||||
import ButtonGroup from './button-group'
|
||||
|
|
@ -29,18 +7,44 @@ import Icon from './icon'
|
|||
import Loading from './loading'
|
||||
import Multiple from './multiple'
|
||||
import Size from './size'
|
||||
import Doc from '../index.zh-CN.md'
|
||||
import CN from '../index.zh-CN.md'
|
||||
import US from '../index.en-US.md'
|
||||
export default {
|
||||
components: {
|
||||
Basic,
|
||||
ButtonGroup,
|
||||
Disabled,
|
||||
Ghost,
|
||||
Icon,
|
||||
Loading,
|
||||
Multiple,
|
||||
Size,
|
||||
Doc,
|
||||
render () {
|
||||
const md = {
|
||||
cn: `# Button 按钮
|
||||
按钮用于开始一个即时操作。
|
||||
## 何时使用
|
||||
标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
|
||||
## 代码演示`,
|
||||
us: `# Button
|
||||
To trigger an operation.
|
||||
## When To Use
|
||||
A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.
|
||||
`,
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<md md={md}/>
|
||||
<Basic />
|
||||
<ButtonGroup />
|
||||
<Disabled />
|
||||
<Ghost />
|
||||
<Icon />
|
||||
<Loading />
|
||||
<h1>TODO ： Multiple</h1>
|
||||
<Multiple />
|
||||
<Size />
|
||||
<api>
|
||||
<template slot='cn'>
|
||||
<CN/>
|
||||
</template>
|
||||
<template slot='us'>
|
||||
<US/>
|
||||
</template>
|
||||
</api>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,3 @@
|
|||
---
|
||||
category: Components
|
||||
type: General
|
||||
title: Button
|
||||
---
|
||||
|
||||
To trigger an operation.
|
||||
|
||||
## When To Use
|
||||
|
||||
A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.
|
||||
|
||||
## API
|
||||
|
||||
To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
|
||||
|
|
@ -25,14 +13,10 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
|
|||
| type | can be set to `primary` `ghost` `dashed` `danger`(added in 2.7) or omitted (meaning `default`) | string | `default` |
|
||||
| onClick | set the handler to handle `click` event | function | - |
|
||||
|
||||
### events
|
||||
| Events Name | Description | Arguments |
|
||||
| --- | --- | --- |
|
||||
| click | handle `click` event | function(e) |
|
||||
|
||||
`<Button>Hello world!</Button>` will be rendered into `<button><span>Hello world!</span></button>`, and all the properties which are not listed above will be transferred to the `<button>` tag.
|
||||
|
||||
<style>
|
||||
[id^=components-button-demo-] .ant-btn {
|
||||
margin-right: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
[id^=components-button-demo-] .ant-btn-group > .ant-btn {
|
||||
margin-right: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| ghost | 幽灵属性，使按钮背景透明，版本 2.7 中增加 | boolean | false |
|
||||
| ghost | 幽灵属性，使按钮背景透明 | boolean | false |
|
||||
| htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |
|
||||
| icon | 设置按钮的图标类型 | string | - |
|
||||
| loading | 设置按钮载入状态 | boolean \| { delay: number } | `false` |
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<div class='markdown'>
|
||||
<slot v-if="lang === 'cn'" name="cn"></slot>
|
||||
<slot v-else name="us"></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'api',
|
||||
data () {
|
||||
const { lang } = this.$route.params
|
||||
return {
|
||||
lang,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,16 +1,20 @@
|
|||
<script>
|
||||
import { Menu } from 'antd'
|
||||
import * as AllDemo from './demo'
|
||||
import * as AllDemo from '../demo'
|
||||
const MenuItem = Menu.Item
|
||||
export default {
|
||||
render () {
|
||||
const { name, demo } = this.$route.params // eslint-disable-line
|
||||
let { lang } = this.$route.params
|
||||
const Demo = AllDemo[name]
|
||||
if (lang !== 'cn') {
|
||||
lang = 'us'
|
||||
}
|
||||
return (
|
||||
<div class='site page-container'>
|
||||
<Menu class='nav' selectedKeys={[name]}>
|
||||
{Object.keys(AllDemo).map(d => <MenuItem key={d}>
|
||||
<router-link to={{ path: `/components/${d}` }}>{d}</router-link>
|
||||
<router-link to={{ path: `/components/${lang}/${d}` }}>{d}</router-link>
|
||||
</MenuItem>)}
|
||||
</Menu>
|
||||
<div class='content'>
|
||||
|
|
@ -2,7 +2,8 @@
|
|||
<div class="box box-demo">
|
||||
<slot name="component"></slot>
|
||||
<div class="box-demo-description">
|
||||
<slot name="description"></slot>
|
||||
<slot v-if="lang === 'cn'" name="description"></slot>
|
||||
<slot v-else name="us-description"></slot>
|
||||
<span class="btn-toggle" :class="{open: isOpen}" @click="toggle"><i class="anticon anticon-down-circle-o"></i></span>
|
||||
</div>
|
||||
<transition appear :css="false" @enter="enter" @leave="leave">
|
||||
|
|
@ -20,8 +21,10 @@ export default {
|
|||
jsfiddle: Object,
|
||||
},
|
||||
data () {
|
||||
const { lang } = this.$route.params
|
||||
return {
|
||||
isOpen: false,
|
||||
lang,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<div v-html="marked(text)" />
|
||||
</template>
|
||||
<script>
|
||||
import marked from 'marked'
|
||||
marked.setOptions({
|
||||
renderer: new marked.Renderer(),
|
||||
gfm: true,
|
||||
tables: true,
|
||||
breaks: true,
|
||||
pedantic: true,
|
||||
sanitize: true,
|
||||
smartLists: true,
|
||||
smartypants: true,
|
||||
})
|
||||
export default {
|
||||
name: 'md',
|
||||
props: {
|
||||
md: [Object, String],
|
||||
},
|
||||
data () {
|
||||
const { lang } = this.$route.params
|
||||
let text = ''
|
||||
const md = this.md
|
||||
if (this.$slots.default && this.$slots.default[0] && this.$slots.default[0].text) {
|
||||
text = this.$slots.default[0].text
|
||||
} else {
|
||||
text = typeof md === 'string' ? md : (md[lang] || md.us)
|
||||
}
|
||||
text = text || ''
|
||||
text = text.split('\n').map(t => t.trim()).join('\n')
|
||||
return {
|
||||
marked,
|
||||
text,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -4,11 +4,13 @@ import 'highlight.js/styles/solarized-light.css'
|
|||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import routes from './routes'
|
||||
import Md from './md'
|
||||
import Md from './components/md'
|
||||
import Api from './components/api'
|
||||
import * as Components from '../components/index'
|
||||
import demoBox from './components/demoBox'
|
||||
Vue.use(VueRouter)
|
||||
Vue.component(Md.name, Md)
|
||||
Vue.component(Api.name, Api)
|
||||
Vue.component('demo-box', demoBox)
|
||||
Object.keys(Components).forEach(k => {
|
||||
const name = `a${k.replace(/([A-Z])/g, '-$1').toLowerCase()}`
|
||||
|
|
|
|||
|
|
@ -10,10 +10,6 @@
|
|||
padding: 20px;
|
||||
}
|
||||
}
|
||||
.code-section,
|
||||
.box-demo + summary {
|
||||
display: none;
|
||||
}
|
||||
.highlight > .code-section {
|
||||
display: block;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -1,24 +0,0 @@
|
|||
<template>
|
||||
<div v-html="marked($slots.default[0].text.trim() || '')" />
|
||||
</template>
|
||||
<script>
|
||||
import marked from 'marked'
|
||||
marked.setOptions({
|
||||
renderer: new marked.Renderer(),
|
||||
gfm: true,
|
||||
tables: true,
|
||||
breaks: false,
|
||||
pedantic: true,
|
||||
sanitize: true,
|
||||
smartLists: true,
|
||||
smartypants: true,
|
||||
})
|
||||
export default {
|
||||
name: 'md',
|
||||
data () {
|
||||
return {
|
||||
marked,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
import Demo from './demo.vue'
|
||||
import Demo from './components/demo.vue'
|
||||
const AsyncComp = () => {
|
||||
return {
|
||||
component: import(`../components/card/demo/basic.vue`),
|
||||
}
|
||||
}
|
||||
export default [
|
||||
{ path: '/components/:name/:demo?', component: Demo },
|
||||
{ path: '/components/:lang/:name/:demo?', component: Demo },
|
||||
{ path: 'test/:name/:demo', component: AsyncComp },
|
||||
{ path: '/*', redirect: '/components/menu' },
|
||||
{ path: '/*', redirect: '/components/cn/menu' },
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
const path = require('path')
|
||||
const slugify = require('transliteration').slugify
|
||||
const hljs = require('highlight.js')
|
||||
|
||||
const Token = require('markdown-it/lib/token')
|
||||
const cheerio = require('cheerio')
|
||||
|
||||
const fetch = (str, tag) => {
|
||||
|
|
@ -37,7 +37,7 @@ const renderHighlight = function (str, lang) {
|
|||
}
|
||||
|
||||
function wrap (render) {
|
||||
return function () {
|
||||
return function (tokens) {
|
||||
return render.apply(this, arguments)
|
||||
.replace('<code class="', '<code class="hljs ')
|
||||
.replace('<code>', '<code class="hljs">')
|
||||
|
|
@ -55,50 +55,69 @@ md.use(require('markdown-it-anchor'), {
|
|||
slugify: slugify,
|
||||
permalink: true,
|
||||
permalinkBefore: true,
|
||||
}).use(require('markdown-it-container'), 'demo', {
|
||||
|
||||
validate: function (params) {
|
||||
return params.trim().match(/^demo\s*(.*)$/)
|
||||
},
|
||||
render: function (tokens, idx) {
|
||||
if (tokens[idx].nesting === 1) {
|
||||
const summaryContent = tokens[idx + 1].content
|
||||
const summary = fetch(summaryContent, 'summary')
|
||||
const summaryHTML = summary ? md.render(summary) : ''
|
||||
|
||||
const content = tokens[idx + 2].content
|
||||
const html = fetch(content, 'template')
|
||||
const script = fetch(content, 'script') || ''
|
||||
const style = fetch(content, 'style') || ''
|
||||
const code = tokens[idx + 2].markup + tokens[idx + 2].info + '\n' + content + tokens[idx + 2].markup
|
||||
const codeHtml = code ? md.render(code) : ''
|
||||
|
||||
let jsfiddle = { html: html, script: script, style: style }
|
||||
jsfiddle = md.utils.escapeHtml(JSON.stringify(jsfiddle))
|
||||
// opening tag
|
||||
return `<template>
|
||||
<demo-box :jsfiddle="${jsfiddle}">
|
||||
<div class="box-demo-show" slot="component">${html}</div>
|
||||
<template slot="description">${summaryHTML}</template>
|
||||
<div class="highlight" slot="code">${codeHtml}</div>
|
||||
</demo-box>
|
||||
</template>
|
||||
<script>
|
||||
${script}
|
||||
</script>
|
||||
<style>
|
||||
${style}
|
||||
</style>
|
||||
`
|
||||
} else {
|
||||
return '\n'
|
||||
}
|
||||
},
|
||||
})
|
||||
md.renderer.rules.table_open = function () {
|
||||
return '<table class="table">'
|
||||
}
|
||||
md.renderer.rules.fence = wrap(md.renderer.rules.fence)
|
||||
md.core.ruler.push('update_template', function replace ({ tokens }) {
|
||||
const cnReg = new RegExp('<(cn)(?:[^<]|<)+</\\1>', 'g')
|
||||
const usReg = new RegExp('<(us)(?:[^<]|<)+</\\1>', 'g')
|
||||
let cn = ''
|
||||
let us = ''
|
||||
let template = ''
|
||||
let script = ''
|
||||
let style = ''
|
||||
let code = ''
|
||||
tokens.forEach(token => {
|
||||
if (token.type === 'html_block') {
|
||||
if (token.content.match(cnReg)) {
|
||||
cn = fetch(token.content, 'cn')
|
||||
token.content = ''
|
||||
}
|
||||
if (token.content.match(usReg)) {
|
||||
us = fetch(token.content, 'us')
|
||||
token.content = ''
|
||||
}
|
||||
}
|
||||
if (token.type === 'fence' && token.info === 'html' && token.markup === '```') {
|
||||
code = '````html\n' + token.content + '````'
|
||||
template = fetch(token.content, 'template')
|
||||
script = fetch(token.content, 'script')
|
||||
style = fetch(token.content, 'style')
|
||||
token.content = ''
|
||||
token.type = 'html_block'
|
||||
}
|
||||
})
|
||||
if (template) {
|
||||
let jsfiddle = {
|
||||
html: template,
|
||||
script,
|
||||
style,
|
||||
}
|
||||
jsfiddle = md.utils.escapeHtml(JSON.stringify(jsfiddle))
|
||||
const codeHtml = code ? md.render(code) : ''
|
||||
const cnHtml = cn ? md.render(cn) : ''
|
||||
const newContent = `
|
||||
<template>
|
||||
<demo-box :jsfiddle="${jsfiddle}">
|
||||
<div class="box-demo-show" slot="component">${template}</div>
|
||||
<template slot="description">${cnHtml}</template>
|
||||
<template slot="us-description">${us ? md.render(us) : ''}</template>
|
||||
<div class="highlight" slot="code">${codeHtml}</div>
|
||||
</demo-box>
|
||||
</template>
|
||||
<script>
|
||||
${script || ''}
|
||||
</script>
|
||||
<style>
|
||||
${style || ''}
|
||||
</style>`
|
||||
const t = new Token('html_block', '', 0)
|
||||
t.content = newContent
|
||||
tokens.push(t)
|
||||
}
|
||||
})
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue