From 34dec6c6aa7e075a7893eb238be091e97c22ba23 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Tue, 23 Jan 2018 18:55:39 +0800
Subject: [PATCH] fix site
---
components/avatar/demo/index.vue | 40 +-
components/badge/demo/index.vue | 91 ++-
components/button/demo/basic.md | 17 +
components/button/demo/basic.vue | 16 +-
components/button/demo/button-group.vue | 64 +--
components/button/demo/disabled.vue | 24 +-
components/button/demo/ghost.vue | 16 +-
components/button/demo/icon.vue | 24 +-
components/button/demo/index.vue | 29 +-
components/button/demo/loading.vue | 24 +-
components/button/demo/multiple.vue | 16 +-
components/button/demo/size.vue | 46 +-
components/button/index.zh-CN.md | 30 +-
components/checkbox/demo/basic.vue | 2 +-
components/checkbox/demo/check-all.vue | 6 +-
components/checkbox/demo/controller.vue | 14 +-
components/checkbox/demo/disabled.vue | 4 +-
components/checkbox/demo/group.vue | 8 +-
components/checkbox/demo/layout.vue | 14 +-
components/index.js | 9 +-
components/menu/demo/inline-collapsed.vue | 6 +-
components/menu/demo/switch-mode.vue | 4 +-
components/menu/demo/theme.vue | 2 +-
components/popconfirm/demo/basic.vue | 2 +-
.../popconfirm/demo/dynamic-trigger.vue | 2 +-
components/popconfirm/demo/placement.vue | 26 +-
.../popover/demo/arrow-point-at-center.vue | 6 +-
components/popover/demo/basic.vue | 4 +-
components/popover/demo/control.vue | 4 +-
components/popover/demo/placement.vue | 26 +-
components/popover/demo/triggerType.vue | 8 +-
components/radio/demo/disabled.vue | 6 +-
components/rate/demo/index.vue | 6 +-
components/tabs/demo/custom-add-trigger.vue | 4 +-
components/tabs/demo/extra.vue | 4 +-
.../tooltip/demo/arrow-point-at-center.vue | 6 +-
.../tooltip/demo/auto-adjust-overflow.vue | 6 +-
components/tooltip/demo/placement.vue | 26 +-
components/trigger/demo/simple.vue | 16 +-
examples/components/demoBox.vue | 120 ++++
examples/demo.vue | 6 +-
examples/index.js | 8 +
examples/index.less | 131 ++++-
examples/md.vue | 2 +-
package-lock.json | 521 ++++++++++++++++++
package.json | 10 +-
site/index.html | 12 -
site/index.js | 17 -
site/index.less | 3 -
site/md.vue | 24 -
site/routes.js | 11 -
webpack.base.config.js | 144 +++++
webpack.config.js | 55 +-
webpack.prod.config.js | 111 ++--
54 files changed, 1296 insertions(+), 537 deletions(-)
create mode 100644 components/button/demo/basic.md
create mode 100644 examples/components/demoBox.vue
delete mode 100644 site/index.html
delete mode 100644 site/index.js
delete mode 100644 site/index.less
delete mode 100644 site/md.vue
delete mode 100644 site/routes.js
create mode 100644 webpack.base.config.js
diff --git a/components/avatar/demo/index.vue b/components/avatar/demo/index.vue
index a531471b9..6a860c9a5 100644
--- a/components/avatar/demo/index.vue
+++ b/components/avatar/demo/index.vue
@@ -1,42 +1,39 @@
<template>
<div>
<div>
- <avatar size="large" icon="user"/>
- <avatar icon="user"/>
- <avatar size="small" icon="user"/>
+ <a-avatar size="large" icon="user"/>
+ <a-avatar icon="user"/>
+ <a-avatar size="small" icon="user"/>
</div>
<br/>
<div>
- <avatar shape="square" size="large" icon="user" />
- <avatar shape="square" icon="user" />
- <avatar shape="square" size="small" icon="user" />
+ <a-avatar shape="square" size="large" icon="user" />
+ <a-avatar shape="square" icon="user" />
+ <a-avatar shape="square" size="small" icon="user" />
</div>
<br/>
<div>
- <avatar icon="user" />
- <avatar>U</avatar>
- <avatar>USER</avatar>
- <avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
- <avatar :styles="{ color: '#f56a00', backgroundColor: '#fde3cf' }">U</avatar>
- <avatar :styles="{ backgroundColor: '#87d068' }" icon="user" />
+ <a-avatar icon="user" />
+ <a-avatar>U</a-avatar>
+ <a-avatar>USER</a-avatar>
+ <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+ <a-avatar :styles="{ color: '#f56a00', backgroundColor: '#fde3cf' }">U</a-avatar>
+ <a-avatar :styles="{ backgroundColor: '#87d068' }" icon="user" />
</div>
<br/>
<div>
- <avatar shape="square" size="large" :styles="{'backgroundColor': color}">{{avatarValue}}</avatar>
- <AntButton @click="changeValue">改变</AntButton>
+ <a-avatar shape="square" size="large" :styles="{'backgroundColor': color}">{{avatarValue}}</a-avatar>
+ <a-button @click="changeValue">改变</a-button>
</div>
<br/>
<div>
- <Badge count=1><Avatar shape="square" icon="user" /></Badge>
+ <a-badge count=1><a-avatar shape="square" icon="user" /></a-badge>
<br/>
- <Badge dot><Avatar shape="square" icon="user" /></Badge>
+ <a-badge dot><a-avatar shape="square" icon="user" /></a-badge>
</div>
</div>
</template>
<script>
-import '../style'
-import { Avatar, Button, Badge } from 'antd/index'
-
const UserList = ['U', 'Lucy', 'Tom', 'Edward']
const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae']
export default {
@@ -53,10 +50,5 @@ export default {
this.color = index < colorList.length - 1 ? colorList[index + 1] : colorList[0]
},
},
- components: {
- Avatar,
- AntButton: Button,
- Badge,
- },
}
</script>
diff --git a/components/badge/demo/index.vue b/components/badge/demo/index.vue
index 29cffeb04..6aeb8d7ca 100644
--- a/components/badge/demo/index.vue
+++ b/components/badge/demo/index.vue
@@ -2,91 +2,89 @@
<div>
基本：
<div>
- <Badge count=5>
+ <a-badge count=5>
<a href="#" class="head-example" />
- </Badge>
- <Badge count=0 showZero>
+ </a-badge>
+ <a-badge count=0 showZero>
<a href="#" class="head-example" />
- </Badge>
+ </a-badge>
</div>
<br>
独立使用：
<div>
- <Badge count=25 />
- <Badge count=4 :styles="{backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset'}" />
- <Badge count=109 :styles= "{backgroundColor: '#52c41a'} " />
+ <a-badge count=25 />
+ <a-badge count=4 :styles="{backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset'}" />
+ <a-badge count=109 :styles= "{backgroundColor: '#52c41a'} " />
</div>
<br>
封顶数字：
<div style="margin-top: 10px">
- <Badge count=99>
+ <a-badge count=99>
<a href="#" class="head-example" />
- </Badge>
- <Badge count=100>
+ </a-badge>
+ <a-badge count=100>
<a href="#" class="head-example" />
- </Badge>
- <Badge count=99 overflowCount=10>
+ </a-badge>
+ <a-badge count=99 overflowCount=10>
<a href="#" class="head-example" />
- </Badge>
- <Badge count=1000 overflowCount=999>
+ </a-badge>
+ <a-badge count=1000 overflowCount=999>
<a href="#" class="head-example" />
- </Badge>
+ </a-badge>
</div>
<br>
讨嫌的小红点：
<div style="margin-top: 10px">
- <Badge dot>
- <Icon type="notification" />
- </Badge>
- <Badge dot>
+ <a-badge dot>
+ <a-icon type="notification" />
+ </a-badge>
+ <a-badge dot>
<a href="#">Link something</a>
- </Badge>
+ </a-badge>
</div>
<br>
状态点：
<div>
- <Badge status="success" />
- <Badge status="error" />
- <Badge status="default" />
- <Badge status="processing" />
- <Badge :status="currentStatus" />
- <ant-button @click="changeStatus">改processing</ant-button>
+ <a-badge status="success" />
+ <a-badge status="error" />
+ <a-badge status="default" />
+ <a-badge status="processing" />
+ <a-badge :status="currentStatus" />
+ <a-button @click="changeStatus">改processing</a-button>
<br />
- <Badge status="success" text="Success" />
+ <a-badge status="success" text="Success" />
<br />
- <Badge status="error" text="Error" />
+ <a-badge status="error" text="Error" />
<br />
- <Badge status="default" text="Default" />
+ <a-badge status="default" text="Default" />
<br />
- <Badge status="processing" text="Processing" />
+ <a-badge status="processing" text="Processing" />
<br />
- <Badge status="warning" text="Warning" />
+ <a-badge status="warning" text="Warning" />
</div>
<br />
动态：
<div>
- <Badge :count="count">
+ <a-badge :count="count">
<a href="#" class="head-example" />
- </Badge>
- <ant-button @click="changeMinsValue()">
- <Icon type="minus" />
- </ant-button>
- <ant-button @click="changePlusValue(1)">
- <Icon type="plus" />
- </ant-button>
+ </a-badge>
+ <a-button @click="changeMinsValue()">
+ <a-icon type="minus" />
+ </a-button>
+ <a-button @click="changePlusValue(1)">
+ <a-icon type="plus" />
+ </a-button>
<br/>
- <Badge :dot="isShow">
+ <a-badge :dot="isShow">
<a href="#" class="head-example" />
- </Badge>
- <ant-button @click="changeShow()">toggle</ant-button>
+ </a-badge>
+ <a-button @click="changeShow()">toggle</a-button>
</div>
<br />
</div>
</template>
<script>
-import '../style'
let i = 0
-import { Badge, Button, Icon } from 'antd/index'
export default {
data () {
return {
@@ -120,11 +118,6 @@ export default {
this.isShow = !this.isShow
},
},
- components: {
- Badge,
- AntButton: Button,
- Icon,
- },
}
</script>
<style scoped>
diff --git a/components/button/demo/basic.md b/components/button/demo/basic.md
new file mode 100644
index 000000000..4ecf15f1c
--- /dev/null
+++ b/components/button/demo/basic.md
@@ -0,0 +1,17 @@
+::: demo
+<summary>
+ #### 按钮类型
+ 按钮有四种类型：主按钮、次按钮、虚线按钮、危险按钮。主按钮在同一个操作区域最多出现一次。
+</summary>
+
+```html
+<template>
+ <div class='test'>
+ <a-button type="primary">Primary</a-button>
+ <a-button>Default</a-button>
+ <a-button type="dashed">Dashed</a-button>
+ <a-button type="danger">Danger</a-button>
+ </div>
+</template>
+```
+:::
diff --git a/components/button/demo/basic.vue b/components/button/demo/basic.vue
index d79bb4641..d2deb5fb8 100644
--- a/components/button/demo/basic.vue
+++ b/components/button/demo/basic.vue
@@ -1,16 +1,8 @@
<template>
<div>
- <AntButton type="primary">Primary</AntButton>
- <AntButton>Default</AntButton>
- <AntButton type="dashed">Dashed</AntButton>
- <AntButton type="danger">Danger</AntButton>
+ <a-button type="primary">Primary</a-button>
+ <a-button>Default</a-button>
+ <a-button type="dashed">Dashed</a-button>
+ <a-button type="danger">Danger</a-button>
</div>
</template>
-<script>
-import { Button } from 'antd'
-export default {
- components: {
- AntButton: Button,
- },
-}
-</script>
diff --git a/components/button/demo/button-group.vue b/components/button/demo/button-group.vue
index 8c8d41ea1..678fff8d5 100644
--- a/components/button/demo/button-group.vue
+++ b/components/button/demo/button-group.vue
@@ -1,47 +1,37 @@
<template>
<div id="components-button-demo-button-group">
<h4>Basic</h4>
- <ButtonGroup>
- <AntButton>Cancel</AntButton>
- <AntButton type="primary">OK</AntButton>
- </ButtonGroup>
- <ButtonGroup>
- <AntButton disabled>L</AntButton>
- <AntButton disabled>M</AntButton>
- <AntButton disabled>R</AntButton>
- </ButtonGroup>
- <ButtonGroup>
- <AntButton type="primary">L</AntButton>
- <AntButton>M</AntButton>
- <AntButton>M</AntButton>
- <AntButton type="dashed">R</AntButton>
- </ButtonGroup>
+ <a-button-group>
+ <a-button>Cancel</a-button>
+ <a-button type="primary">OK</a-button>
+ </a-button-group>
+ <a-button-group>
+ <a-button disabled>L</a-button>
+ <a-button disabled>M</a-button>
+ <a-button disabled>R</a-button>
+ </a-button-group>
+ <a-button-group>
+ <a-button type="primary">L</a-button>
+ <a-button>M</a-button>
+ <a-button>M</a-button>
+ <a-button type="dashed">R</a-button>
+ </a-button-group>
<h4>With Icon</h4>
- <ButtonGroup>
- <AntButton type="primary">
- <Icon type="left" />Go back
- </AntButton>
- <AntButton type="primary">
- Go forward<Icon type="right" />
- </AntButton>
- </ButtonGroup>
- <ButtonGroup>
- <AntButton type="primary" icon="cloud" />
- <AntButton type="primary" icon="cloud-download" />
- </ButtonGroup>
+ <a-button-group>
+ <a-button type="primary">
+ <a-icon type="left" />Go back
+ </a-button>
+ <a-button type="primary">
+ Go forward<a-icon type="right" />
+ </a-button>
+ </a-button-group>
+ <a-button-group>
+ <a-button type="primary" icon="cloud" />
+ <a-button type="primary" icon="cloud-download" />
+ </a-button-group>
</div>
</template>
-<script>
-import { Button, Icon } from 'antd'
-export default {
- components: {
- AntButton: Button,
- ButtonGroup: Button.Group,
- Icon,
- },
-}
-</script>
<style>
#components-button-demo-button-group h4 {
margin: 16px 0;
diff --git a/components/button/demo/disabled.vue b/components/button/demo/disabled.vue
index 1ae12909f..4703665c8 100644
--- a/components/button/demo/disabled.vue
+++ b/components/button/demo/disabled.vue
@@ -1,23 +1,15 @@
<template>
<div>
- <AntButton type="primary">Primary</AntButton>
- <AntButton type="primary" disabled>Primary(disabled)</AntButton>
+ <a-button type="primary">Primary</a-button>
+ <a-button type="primary" disabled>Primary(disabled)</a-button>
<br />
- <AntButton>Default</AntButton>
- <AntButton disabled>Default(disabled)</AntButton>
+ <a-button>Default</a-button>
+ <a-button disabled>Default(disabled)</a-button>
<br />
- <AntButton>Ghost</AntButton>
- <AntButton disabled>Ghost(disabled)</AntButton>
+ <a-button>Ghost</a-button>
+ <a-button disabled>Ghost(disabled)</a-button>
<br />
- <AntButton type="dashed">Dashed</AntButton>
- <AntButton type="dashed" disabled>Dashed(disabled)</AntButton>
+ <a-button type="dashed">Dashed</a-button>
+ <a-button type="dashed" disabled>Dashed(disabled)</a-button>
</div>
</template>
-<script>
-import { Button } from 'antd'
-export default {
- components: {
- AntButton: Button,
- },
-}
-</script>
diff --git a/components/button/demo/ghost.vue b/components/button/demo/ghost.vue
index 3b474225b..1b837f01f 100644
--- a/components/button/demo/ghost.vue
+++ b/components/button/demo/ghost.vue
@@ -1,16 +1,8 @@
<template>
<div :style="{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }">
- <AntButton type="primary" ghost>Primary</AntButton>
- <AntButton ghost>Default</AntButton>
- <AntButton type="dashed" ghost>Dashed</AntButton>
- <AntButton type="danger" ghost>danger</AntButton>
+ <a-button type="primary" ghost>Primary</a-button>
+ <a-button ghost>Default</a-button>
+ <a-button type="dashed" ghost>Dashed</a-button>
+ <a-button type="danger" ghost>danger</a-button>
</div>
</template>
-<script>
-import { Button } from 'antd'
-export default {
- components: {
- AntButton: Button,
- },
-}
-</script>
diff --git a/components/button/demo/icon.vue b/components/button/demo/icon.vue
index 471b07a80..758b853c4 100644
--- a/components/button/demo/icon.vue
+++ b/components/button/demo/icon.vue
@@ -1,21 +1,13 @@
<template>
<div>
- <AntButton type="primary" shape="circle" icon="search" />
- <AntButton type="primary" icon="search">Search</AntButton>
- <AntButton shape="circle" icon="search" />
- <AntButton icon="search">Search</AntButton>
+ <a-button type="primary" shape="circle" icon="search" />
+ <a-button type="primary" icon="search">Search</a-button>
+ <a-button shape="circle" icon="search" />
+ <a-button icon="search">Search</a-button>
<br />
- <AntButton shape="circle" icon="search" />
- <AntButton icon="search">Search</AntButton>
- <AntButton type="dashed" shape="circle" icon="search" />
- <AntButton type="dashed" icon="search">Search</AntButton>
+ <a-button shape="circle" icon="search" />
+ <a-button icon="search">Search</a-button>
+ <a-button type="dashed" shape="circle" icon="search" />
+ <a-button type="dashed" icon="search">Search</a-button>
</div>
</template>
-<script>
-import { Button } from 'antd'
-export default {
- components: {
- AntButton: Button,
- },
-}
-</script>
diff --git a/components/button/demo/index.vue b/components/button/demo/index.vue
index 1c633c5f9..2990c6a85 100644
--- a/components/button/demo/index.vue
+++ b/components/button/demo/index.vue
@@ -1,25 +1,27 @@
<template>
<div>
- <h1>Basic</h1>
+ <md>
+ # Button 按钮
+ 按钮用于开始一个即时操作。
+ ## 何时使用
+ 标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
+
+ ## 代码演示
+ </md>
<Basic />
- <h1>ButtonGroup</h1>
<ButtonGroup />
- <h1>Disabled</h1>
<Disabled />
- <h1>Ghost</h1>
<Ghost />
- <h1>Icon</h1>
<Icon />
- <h1>Loading</h1>
<Loading />
<h1>TODO ： Multiple</h1>
<Multiple />
- <h1>Size</h1>
<Size />
+ <Doc class="markdown"/>
</div>
</template>
<script>
-import Basic from './basic'
+import Basic from './basic.md'
import ButtonGroup from './button-group'
import Disabled from './disabled'
import Ghost from './ghost'
@@ -27,6 +29,7 @@ import Icon from './icon'
import Loading from './loading'
import Multiple from './multiple'
import Size from './size'
+import Doc from '../index.zh-CN.md'
export default {
components: {
Basic,
@@ -37,6 +40,16 @@ export default {
Loading,
Multiple,
Size,
+ Doc,
},
}
</script>
+<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>
diff --git a/components/button/demo/loading.vue b/components/button/demo/loading.vue
index 5e0ec2136..81ce18b3f 100644
--- a/components/button/demo/loading.vue
+++ b/components/button/demo/loading.vue
@@ -1,25 +1,24 @@
<template>
<div>
- <AntButton type="primary" loading>
+ <a-button type="primary" loading>
Loading
- </AntButton>
- <AntButton type="primary" size="small" loading>
+ </a-button>
+ <a-button type="primary" size="small" loading>
Loading
- </AntButton>
+ </a-button>
<br />
- <AntButton type="primary" :loading="loading" @mouseenter="enterLoading">
+ <a-button type="primary" :loading="loading" @mouseenter="enterLoading">
mouseenter me!
- </AntButton>
- <AntButton type="primary" icon="poweroff" :loading="iconLoading" @click="enterIconLoading">
+ </a-button>
+ <a-button type="primary" icon="poweroff" :loading="iconLoading" @click="enterIconLoading">
延迟1s
- </AntButton>
+ </a-button>
<br />
- <AntButton shape="circle" loading />
- <AntButton type="primary" shape="circle" loading />
+ <a-button shape="circle" loading />
+ <a-button type="primary" shape="circle" loading />
</div>
</template>
<script>
-import { Button } from 'antd'
export default {
data () {
return {
@@ -35,8 +34,5 @@ export default {
this.iconLoading = { delay: 1000 }
},
},
- components: {
- AntButton: Button,
- },
}
</script>
diff --git a/components/button/demo/multiple.vue b/components/button/demo/multiple.vue
index f27a4fb5e..ab88c92aa 100644
--- a/components/button/demo/multiple.vue
+++ b/components/button/demo/multiple.vue
@@ -1,17 +1,9 @@
// TODO: 依赖组件开发中
<template>
<div>
- <AntButton type="primary">Primary</AntButton>
- <AntButton>Default</AntButton>
- <AntButton type="dashed">Dashed</AntButton>
- <AntButton type="danger">Danger</AntButton>
+ <a-button type="primary">Primary</a-button>
+ <a-button>Default</a-button>
+ <a-button type="dashed">Dashed</a-button>
+ <a-button type="danger">Danger</a-button>
</div>
</template>
-<script>
-import { Button } from 'antd'
-export default {
- components: {
- AntButton: Button,
- },
-}
-</script>
diff --git a/components/button/demo/size.vue b/components/button/demo/size.vue
index 50fafe069..e1e6b65e3 100644
--- a/components/button/demo/size.vue
+++ b/components/button/demo/size.vue
@@ -1,31 +1,30 @@
<template>
<div>
- <RadioGroup :value="size" @change="handleSizeChange">
- <RadioButton value="large">Large</RadioButton>
- <RadioButton value="default">Default</RadioButton>
- <RadioButton value="small">Small</RadioButton>
- </RadioGroup>
+ <a-radio-group :value="size" @change="handleSizeChange">
+ <a-radio-button value="large">Large</a-radio-button>
+ <a-radio-button value="default">Default</a-radio-button>
+ <a-radio-button value="small">Small</a-radio-button>
+ </a-radio-group>
<br /><br />
- <AntButton type="primary" :size="size">Primary</AntButton>
- <AntButton :size="size">Normal</AntButton>
- <AntButton type="dashed" :size="size">Dashed</AntButton>
- <AntButton type="danger" :size="size">Danger</AntButton>
+ <a-button type="primary" :size="size">Primary</a-button>
+ <a-button :size="size">Normal</a-button>
+ <a-button type="dashed" :size="size">Dashed</a-button>
+ <a-button type="danger" :size="size">Danger</a-button>
<br />
- <AntButton type="primary" shape="circle" icon="download" :size="size" />
- <AntButton type="primary" icon="download" :size="size">Download</AntButton>
+ <a-button type="primary" shape="circle" icon="download" :size="size" />
+ <a-button type="primary" icon="download" :size="size">Download</a-button>
<br />
- <ButtonGroup :size="size">
- <AntButton type="primary">
- <Icon type="left" />Backward
- </AntButton>
- <AntButton type="primary">
- Forward<Icon type="right" />
- </AntButton>
- </ButtonGroup>
+ <a-button-group :size="size">
+ <a-button type="primary">
+ <a-icon type="left" />Backward
+ </a-button>
+ <a-button type="primary">
+ Forward<a-icon type="right" />
+ </a-button>
+ </a-button-group>
</div>
</template>
<script>
-import { Button, Radio, Icon } from 'antd'
export default {
data () {
return {
@@ -37,12 +36,5 @@ export default {
this.size = e.target.value
},
},
- components: {
- AntButton: Button,
- ButtonGroup: Button.Group,
- RadioButton: Radio.Button,
- RadioGroup: Radio.Group,
- Icon,
- },
}
</script>
diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md
index 5c8562658..ddaf6b72e 100644
--- a/components/button/index.zh-CN.md
+++ b/components/button/index.zh-CN.md
@@ -1,16 +1,3 @@
----
-category: Components
-type: General
-title: Button
-subtitle: 按钮
----
-
-按钮用于开始一个即时操作。
-
-## 何时使用
-
-标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
-
## API
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`
@@ -25,17 +12,12 @@ subtitle: 按钮
| loading | 设置按钮载入状态 | boolean \| { delay: number } | `false` |
| shape | 设置按钮形状，可选值为 `circle` 或者不设 | string | - |
| size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default` |
-| type | 设置按钮类型，可选值为 `primary` `dashed` `danger`(版本 2.7 中增加) 或者不设 | string | - |
-| onClick | `click` 事件的 handler | function | - |
+| type | 设置按钮类型，可选值为 `primary` `dashed` `danger` | string | - |
+
+### 事件
+| 事件名称 | 说明 | 回调参数 |
+| --- | --- | --- |
+| click | `click` 事件的 handler | function(e) |
`<Button>Hello world!</Button>` 最终会被渲染为 `<button><span>Hello world!</span></button>`，并且除了上表中的属性，其它属性都会直接传到 `<button></button>`。
-<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>
diff --git a/components/checkbox/demo/basic.vue b/components/checkbox/demo/basic.vue
index 825ff1fd4..f360e66ef 100644
--- a/components/checkbox/demo/basic.vue
+++ b/components/checkbox/demo/basic.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <Checkbox @change="onChange">Checkbox</Checkbox>
+ <a-checkbox @change="onChange">Checkbox</a-checkbox>
</div>
</template>
<script>
diff --git a/components/checkbox/demo/check-all.vue b/components/checkbox/demo/check-all.vue
index 44b6b3e84..db46903e6 100644
--- a/components/checkbox/demo/check-all.vue
+++ b/components/checkbox/demo/check-all.vue
@@ -1,16 +1,16 @@
<template>
<div>
<div :style="{ borderBottom: '1px solid #E9E9E9' }">
- <Checkbox
+ a-checkbox
:indeterminate="indeterminate"
@change="onCheckAllChange"
:checked="checkAll"
>
Check all
- </Checkbox>
+ </a-checkbox>
</div>
<br />
- <CheckboxGroup :options="plainOptions" v-model="checkedList" @change="onChange" />
+ a-checkboxGroup :options="plainOptions" v-model="checkedList" @change="onChange" />
</div>
</template>
<script>
diff --git a/components/checkbox/demo/controller.vue b/components/checkbox/demo/controller.vue
index d1e1efe14..154a7efec 100644
--- a/components/checkbox/demo/controller.vue
+++ b/components/checkbox/demo/controller.vue
@@ -1,30 +1,30 @@
<template>
<div>
<p :style="{ marginBottom: '20px' }">
- <Checkbox
+ a-checkbox
:checked="checked"
:disabled="disabled"
@change="onChange"
>
{{label}}
- </Checkbox>
+ </a-checkbox>
</p>
<p>
- <AntButton
+ <a-button
type="primary"
size="small"
@click="toggleChecked"
>
{{!checked ? 'Check' : 'Uncheck'}}
- </AntButton>
- <AntButton
+ </a-button>
+ <a-button
:style="{ marginLeft: '10px' }"
type="primary"
size="small"
@click="toggleDisable"
>
{{!disabled ? 'Disable' : 'Enable'}}
- </AntButton>
+ </a-button>
</p>
</div>
</template>
@@ -56,7 +56,7 @@ export default {
},
components: {
Checkbox,
- AntButton: Button,
+
},
}
</script>
diff --git a/components/checkbox/demo/disabled.vue b/components/checkbox/demo/disabled.vue
index 3bcf0837c..fac1e9399 100644
--- a/components/checkbox/demo/disabled.vue
+++ b/components/checkbox/demo/disabled.vue
@@ -1,8 +1,8 @@
<template>
<div>
- <Checkbox :defaultChecked="false" disabled />
+ <a-checkbox :defaultChecked="false" disabled />
<br />
- <Checkbox defaultChecked disabled />
+ <a-checkbox defaultChecked disabled />
</div>
</template>
<script>
diff --git a/components/checkbox/demo/group.vue b/components/checkbox/demo/group.vue
index 7a944effa..586f843fa 100644
--- a/components/checkbox/demo/group.vue
+++ b/components/checkbox/demo/group.vue
@@ -1,12 +1,12 @@
<template>
<div>
- <CheckboxGroup :options="plainOptions" v-model="value" @change="onChange" />
+ a-checkboxGroup :options="plainOptions" v-model="value" @change="onChange" />
<br />
- <CheckboxGroup :options="plainOptions" :defaultValue="['Apple']" @change="onChange" />
+ a-checkboxGroup :options="plainOptions" :defaultValue="['Apple']" @change="onChange" />
<br />
- <CheckboxGroup :options="options" :value="['Pear']" @change="onChange" />
+ a-checkboxGroup :options="options" :value="['Pear']" @change="onChange" />
<br />
- <CheckboxGroup :options="optionsWithDisabled" disabled :defaultValue="['Apple']" @change="onChange" />
+ a-checkboxGroup :options="optionsWithDisabled" disabled :defaultValue="['Apple']" @change="onChange" />
</div>
</template>
<script>
diff --git a/components/checkbox/demo/layout.vue b/components/checkbox/demo/layout.vue
index 9da57ce8e..ebc74eef0 100644
--- a/components/checkbox/demo/layout.vue
+++ b/components/checkbox/demo/layout.vue
@@ -1,13 +1,13 @@
<template>
- <CheckboxGroup @change="onChange">
+ <a-checkbox-group @change="onChange">
<AntRow>
- <AntCol :span="8"><Checkbox value="A">A</Checkbox></AntCol>
- <AntCol :span="8"><Checkbox value="B">B</Checkbox></AntCol>
- <AntCol :span="8"><Checkbox value="C">C</Checkbox></AntCol>
- <AntCol :span="8"><Checkbox value="D">D</Checkbox></AntCol>
- <AntCol :span="8"><Checkbox value="E">E</Checkbox></AntCol>
+ <AntCol :span="8"><a-checkbox value="A">A</a-checkbox></AntCol>
+ <AntCol :span="8"><a-checkbox value="B">B</a-checkbox></AntCol>
+ <AntCol :span="8"><a-checkbox value="C">C</a-checkbox></AntCol>
+ <AntCol :span="8"><a-checkbox value="D">D</a-checkbox></AntCol>
+ <AntCol :span="8"><a-checkbox value="E">E</a-checkbox></AntCol>
</AntRow>
- </CheckboxGroup>
+ </a-checkbox-group>
</template>
<script>
import { Checkbox, Row, Col } from 'antd'
diff --git a/components/index.js b/components/index.js
index 89b5709d7..9ec887a8c 100644
--- a/components/index.js
+++ b/components/index.js
@@ -1,10 +1,15 @@
-export { default as Button } from './button'
+import Button from './button'
+const ButtonGroup = Button.Group
+export { Button, ButtonGroup }
export { default as Checkbox } from './checkbox'
export { default as Icon } from './icon'
-export { default as Radio } from './radio'
+import Radio from './radio'
+const RadioGroup = Radio.Group
+const RadioButton = Radio.Button
+export { Radio, RadioGroup, RadioButton }
export { default as Grid } from './grid'
diff --git a/components/menu/demo/inline-collapsed.vue b/components/menu/demo/inline-collapsed.vue
index 5737221e6..95f82884a 100644
--- a/components/menu/demo/inline-collapsed.vue
+++ b/components/menu/demo/inline-collapsed.vue
@@ -6,9 +6,9 @@
你可以在 [Layout](/components/layout/#components-layout-demo-side) 里查看侧边布局结合的完整示例。
</md>
<div style="width: 256px">
- <AntButton type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">
+ <a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">
<Icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
- </AntButton>
+ </a-button>
<Menu
:defaultSelectedKeys="['1']"
:defaultOpenKeys="['sub1']"
@@ -70,7 +70,7 @@ export default {
SubMenu,
MenuItemGroup,
MenuItem,
- AntButton: Button,
+
},
}
diff --git a/components/menu/demo/switch-mode.vue b/components/menu/demo/switch-mode.vue
index 6476270e4..70369031c 100644
--- a/components/menu/demo/switch-mode.vue
+++ b/components/menu/demo/switch-mode.vue
@@ -4,9 +4,9 @@
## 切换菜单类型
展示动态切换模式。
</md>
- <Checkbox @change="changeMode" /> Change Mode
+ <a-checkbox @change="changeMode" /> Change Mode
<span className="ant-divider" style="margin: 0 1em"/>
- <Checkbox @change="changeTheme" /> Change Theme
+ <a-checkbox @change="changeTheme" /> Change Theme
<br />
<br />
<Menu
diff --git a/components/menu/demo/theme.vue b/components/menu/demo/theme.vue
index f0b66e65e..15352d49d 100644
--- a/components/menu/demo/theme.vue
+++ b/components/menu/demo/theme.vue
@@ -4,7 +4,7 @@
## 主题
内建了两套主题 `light|dark`，默认 `light`。
</md>
- <Checkbox @change="changeTheme" /> Change Theme
+ <a-checkbox @change="changeTheme" /> Change Theme
<br />
<br />
<Menu
diff --git a/components/popconfirm/demo/basic.vue b/components/popconfirm/demo/basic.vue
index 95f6bbb29..abe2f96a8 100644
--- a/components/popconfirm/demo/basic.vue
+++ b/components/popconfirm/demo/basic.vue
@@ -23,7 +23,7 @@ export default {
},
components: {
Popconfirm,
- AntButton: Button,
+
},
}
</script>
diff --git a/components/popconfirm/demo/dynamic-trigger.vue b/components/popconfirm/demo/dynamic-trigger.vue
index d2a6a4f40..162a08e5d 100644
--- a/components/popconfirm/demo/dynamic-trigger.vue
+++ b/components/popconfirm/demo/dynamic-trigger.vue
@@ -17,7 +17,7 @@
</Popconfirm>
<br />
<br />
- Whether directly execute：<Checkbox defaultChecked @change="changeCondition" />
+ Whether directly execute：<a-checkbox defaultChecked @change="changeCondition" />
</div>
</template>
diff --git a/components/popconfirm/demo/placement.vue b/components/popconfirm/demo/placement.vue
index e635afc17..c1e1a97a5 100644
--- a/components/popconfirm/demo/placement.vue
+++ b/components/popconfirm/demo/placement.vue
@@ -10,21 +10,21 @@
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</template>
- <AntButton>TL</AntButton>
+ <a-button>TL</a-button>
</Popconfirm>
<Popconfirm placement="top" okText="Yes" cancelText="No" @confirm="confirm">
<template slot="title">
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</template>
- <AntButton>Top</AntButton>
+ <a-button>Top</a-button>
</Popconfirm>
<Popconfirm placement="topRight" okText="Yes" cancelText="No" @confirm="confirm">
<template slot="title">
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</template>
- <AntButton>TR</AntButton>
+ <a-button>TR</a-button>
</Popconfirm>
</div>
<div :style="{ width: `${buttonWidth}px`, float: 'left' }">
@@ -33,21 +33,21 @@
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</template>
- <AntButton>LT</AntButton>
+ <a-button>LT</a-button>
</Popconfirm>
<Popconfirm placement="left" okText="Yes" cancelText="No" @confirm="confirm">
<template slot="title">
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</template>
- <AntButton>Left</AntButton>
+ <a-button>Left</a-button>
</Popconfirm>
<Popconfirm placement="leftBottom" okText="Yes" cancelText="No" @confirm="confirm">
<template slot="title">
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</template>
- <AntButton>LB</AntButton>
+ <a-button>LB</a-button>
</Popconfirm>
</div>
<div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}">
@@ -56,21 +56,21 @@
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</template>
- <AntButton>RT</AntButton>
+ <a-button>RT</a-button>
</Popconfirm>
<Popconfirm placement="right" okText="Yes" cancelText="No" @confirm="confirm">
<template slot="title">
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</template>
- <AntButton>Right</AntButton>
+ <a-button>Right</a-button>
</Popconfirm>
<Popconfirm placement="rightBottom" okText="Yes" cancelText="No" @confirm="confirm">
<template slot="title">
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</template>
- <AntButton>RB</AntButton>
+ <a-button>RB</a-button>
</Popconfirm>
</div>
<div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
@@ -79,21 +79,21 @@
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</template>
- <AntButton>BL</AntButton>
+ <a-button>BL</a-button>
</Popconfirm>
<Popconfirm placement="bottom" okText="Yes" cancelText="No" @confirm="confirm">
<template slot="title">
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</template>
- <AntButton>Bottom</AntButton>
+ <a-button>Bottom</a-button>
</Popconfirm>
<Popconfirm placement="bottomRight" okText="Yes" cancelText="No" @confirm="confirm">
<template slot="title">
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</template>
- <AntButton>BR</AntButton>
+ <a-button>BR</a-button>
</Popconfirm>
</div>
</div>
@@ -114,7 +114,7 @@ export default {
},
components: {
Popconfirm,
- AntButton: Button,
+
},
}
</script>
diff --git a/components/popover/demo/arrow-point-at-center.vue b/components/popover/demo/arrow-point-at-center.vue
index a85de89bc..a05855424 100644
--- a/components/popover/demo/arrow-point-at-center.vue
+++ b/components/popover/demo/arrow-point-at-center.vue
@@ -10,7 +10,7 @@
<p>Content</p>
</template>
<span slot="title">Title</span>
- <AntButton>Align edge / 边缘对齐</AntButton>
+ <a-button>Align edge / 边缘对齐</a-button>
</Popover>
<Popover placement="topLeft" arrowPointAtCenter>
<template slot="content">
@@ -18,7 +18,7 @@
<p>Content</p>
</template>
<span slot="title">Title</span>
- <AntButton>Arrow points to center / 箭头指向中心</AntButton>
+ <a-button>Arrow points to center / 箭头指向中心</a-button>
</Popover>
</div>
</template>
@@ -28,7 +28,7 @@ import { Popover, Button } from 'antd'
export default {
components: {
Popover,
- AntButton: Button,
+
},
}
</script>
diff --git a/components/popover/demo/basic.vue b/components/popover/demo/basic.vue
index d15e4dc7e..991b33d11 100644
--- a/components/popover/demo/basic.vue
+++ b/components/popover/demo/basic.vue
@@ -9,7 +9,7 @@
<p>Content</p>
<p>Content</p>
</template>
- <AntButton type="primary">Hover me</AntButton>
+ <a-button type="primary">Hover me</a-button>
</Popover>
</div>
</template>
@@ -19,7 +19,7 @@ import { Popover, Button } from 'antd'
export default {
components: {
Popover,
- AntButton: Button,
+
},
}
</script>
diff --git a/components/popover/demo/control.vue b/components/popover/demo/control.vue
index c1af76516..52ab814d5 100644
--- a/components/popover/demo/control.vue
+++ b/components/popover/demo/control.vue
@@ -10,7 +10,7 @@
v-model="visible"
>
<a @click="hide" slot="content">Close</a>
- <AntButton type="primary">Click me</AntButton>
+ <a-button type="primary">Click me</a-button>
</Popover>
</div>
</template>
@@ -31,7 +31,7 @@ export default {
},
components: {
Popover,
- AntButton: Button,
+
},
}
</script>
diff --git a/components/popover/demo/placement.vue b/components/popover/demo/placement.vue
index e2d4077f6..e1a8ef95a 100644
--- a/components/popover/demo/placement.vue
+++ b/components/popover/demo/placement.vue
@@ -13,7 +13,7 @@
<template slot="title">
<span>Title</span>
</template>
- <AntButton>TL</AntButton>
+ <a-button>TL</a-button>
</Popover>
<Popover placement="top">
<template slot="content">
@@ -23,7 +23,7 @@
<template slot="title">
<span>Title</span>
</template>
- <AntButton>Top</AntButton>
+ <a-button>Top</a-button>
</Popover>
<Popover placement="topRight">
<template slot="content">
@@ -33,7 +33,7 @@
<template slot="title">
<span>Title</span>
</template>
- <AntButton>TR</AntButton>
+ <a-button>TR</a-button>
</Popover>
</div>
<div :style="{ width: `${buttonWidth}px`, float: 'left' }">
@@ -45,7 +45,7 @@
<template slot="title">
<span>Title</span>
</template>
- <AntButton>LT</AntButton>
+ <a-button>LT</a-button>
</Popover>
<Popover placement="left">
<template slot="content">
@@ -55,7 +55,7 @@
<template slot="title">
<span>Title</span>
</template>
- <AntButton>Left</AntButton>
+ <a-button>Left</a-button>
</Popover>
<Popover placement="leftBottom">
<template slot="content">
@@ -65,7 +65,7 @@
<template slot="title">
<span>Title</span>
</template>
- <AntButton>LB</AntButton>
+ <a-button>LB</a-button>
</Popover>
</div>
<div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}">
@@ -77,7 +77,7 @@
<template slot="title">
<span>Title</span>
</template>
- <AntButton>RT</AntButton>
+ <a-button>RT</a-button>
</Popover>
<Popover placement="right">
<template slot="content">
@@ -87,7 +87,7 @@
<template slot="title">
<span>Title</span>
</template>
- <AntButton>Right</AntButton>
+ <a-button>Right</a-button>
</Popover>
<Popover placement="rightBottom">
<template slot="content">
@@ -97,7 +97,7 @@
<template slot="title">
<span>Title</span>
</template>
- <AntButton>RB</AntButton>
+ <a-button>RB</a-button>
</Popover>
</div>
<div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
@@ -109,7 +109,7 @@
<template slot="title">
<span>Title</span>
</template>
- <AntButton>BL</AntButton>
+ <a-button>BL</a-button>
</Popover>
<Popover placement="bottom">
<template slot="content">
@@ -119,7 +119,7 @@
<template slot="title">
<span>Title</span>
</template>
- <AntButton>Bottom</AntButton>
+ <a-button>Bottom</a-button>
</Popover>
<Popover placement="bottomRight">
<template slot="content">
@@ -129,7 +129,7 @@
<template slot="title">
<span>Title</span>
</template>
- <AntButton>BR</AntButton>
+ <a-button>BR</a-button>
</Popover>
</div>
</div>
@@ -145,7 +145,7 @@ export default {
},
components: {
Popover,
- AntButton: Button,
+
},
}
</script>
diff --git a/components/popover/demo/triggerType.vue b/components/popover/demo/triggerType.vue
index e8676ae3a..a466cbccb 100644
--- a/components/popover/demo/triggerType.vue
+++ b/components/popover/demo/triggerType.vue
@@ -9,21 +9,21 @@
<p>Content</p>
<p>Content</p>
</template>
- <AntButton type="primary">Hover me</AntButton>
+ <a-button type="primary">Hover me</a-button>
</Popover>
<Popover title="Title" trigger="focus">
<template slot="content">
<p>Content</p>
<p>Content</p>
</template>
- <AntButton type="primary">Focus me</AntButton>
+ <a-button type="primary">Focus me</a-button>
</Popover>
<Popover title="Title" trigger="click">
<template slot="content">
<p>Content</p>
<p>Content</p>
</template>
- <AntButton type="primary">Click me</AntButton>
+ <a-button type="primary">Click me</a-button>
</Popover>
</div>
</template>
@@ -33,7 +33,7 @@ import { Popover, Button } from 'antd'
export default {
components: {
Popover,
- AntButton: Button,
+
},
}
</script>
diff --git a/components/radio/demo/disabled.vue b/components/radio/demo/disabled.vue
index d21f027ac..25c099c59 100644
--- a/components/radio/demo/disabled.vue
+++ b/components/radio/demo/disabled.vue
@@ -4,9 +4,9 @@
<br />
<Radio defaultChecked :disabled="disabled">Disabled</Radio>
<div :style="{ marginTop: 20 }">
- <AntButton type="primary" @click="toggleDisabled">
+ <a-button type="primary" @click="toggleDisabled">
Toggle disabled
- </AntButton>
+ </a-button>
</div>
</div>
</template>
@@ -25,7 +25,7 @@ export default {
},
components: {
Radio,
- AntButton: Button,
+
},
}
</script>
diff --git a/components/rate/demo/index.vue b/components/rate/demo/index.vue
index 141d0ad31..131dc3ed2 100644
--- a/components/rate/demo/index.vue
+++ b/components/rate/demo/index.vue
@@ -8,8 +8,8 @@
</br>
默认3颗星
<Rate v-model="initValue"></Rate>
- <AntButton type="primary" @click="changeValue">改变</AntButton>
- <AntButton type="primary" @click="getValue">当前值</AntButton>
+ <a-button type="primary" @click="changeValue">改变</a-button>
+ <a-button type="primary" @click="getValue">当前值</a-button>
</br>
只读
<Rate :value="initValue" :disabled="disabled"></Rate>
@@ -72,7 +72,7 @@ export default {
components: {
Rate,
Icon,
- AntButton: Button,
+
},
}
</script>
diff --git a/components/tabs/demo/custom-add-trigger.vue b/components/tabs/demo/custom-add-trigger.vue
index d90cbb8a5..f991744d7 100644
--- a/components/tabs/demo/custom-add-trigger.vue
+++ b/components/tabs/demo/custom-add-trigger.vue
@@ -1,7 +1,7 @@
<template>
<div>
<div :style="{ marginBottom: '16px' }">
- <AntButton @click="add">ADD</AntButton>
+ <a-button @click="add">ADD</a-button>
</div>
<Tabs
hideAdd
@@ -63,7 +63,7 @@ export default {
components: {
Tabs,
TabPane: Tabs.TabPane,
- AntButton: Button,
+
},
}
</script>
diff --git a/components/tabs/demo/extra.vue b/components/tabs/demo/extra.vue
index a6da74b9a..33b7bf6b1 100644
--- a/components/tabs/demo/extra.vue
+++ b/components/tabs/demo/extra.vue
@@ -9,7 +9,7 @@
<TabPane tab="Tab 1" key="1">Content of tab 1</TabPane>
<TabPane tab="Tab 2" key="2">Content of tab 2</TabPane>
<TabPane tab="Tab 3" key="3">Content of tab 3</TabPane>
- <AntButton slot="tabBarExtraContent">Extra Action</AntButton>
+ <a-button slot="tabBarExtraContent">Extra Action</a-button>
</Tabs>
</div>
@@ -25,7 +25,7 @@ export default {
components: {
Tabs,
TabPane: Tabs.TabPane,
- AntButton: Button,
+
},
}
</script>
diff --git a/components/tooltip/demo/arrow-point-at-center.vue b/components/tooltip/demo/arrow-point-at-center.vue
index 643386649..ce3de704c 100644
--- a/components/tooltip/demo/arrow-point-at-center.vue
+++ b/components/tooltip/demo/arrow-point-at-center.vue
@@ -5,10 +5,10 @@
设置了 `arrowPointAtCenter` 后，箭头将指向目标元素的中心。
</md>
<Tooltip placement="topLeft" title="Prompt Text">
- <AntButton>Align edge / 边缘对齐</AntButton>
+ <a-button>Align edge / 边缘对齐</a-button>
</Tooltip>
<Tooltip placement="topLeft" title="Prompt Text" arrowPointAtCenter>
- <AntButton>Arrow points to center / 箭头指向中心</AntButton>
+ <a-button>Arrow points to center / 箭头指向中心</a-button>
</Tooltip>
</div>
</template>
@@ -18,7 +18,7 @@ import { Tooltip, Button } from 'antd'
export default {
components: {
Tooltip,
- AntButton: Button,
+
},
}
</script>
diff --git a/components/tooltip/demo/auto-adjust-overflow.vue b/components/tooltip/demo/auto-adjust-overflow.vue
index 585815999..d53416155 100644
--- a/components/tooltip/demo/auto-adjust-overflow.vue
+++ b/components/tooltip/demo/auto-adjust-overflow.vue
@@ -6,11 +6,11 @@
</md>
<div :style="wrapStyles">
<Tooltip placement="left" title="Prompt Text" :getPopupContainer="getPopupContainer">
- <AntButton>Adjust automatically / 自动调整</AntButton>
+ <a-button>Adjust automatically / 自动调整</a-button>
</Tooltip>
<br />
<Tooltip placement="left" title="Prompt Text" :getPopupContainer="getPopupContainer" :autoAdjustOverflow="false">
- <AntButton>Ingore / 不处理</AntButton>
+ <a-button>Ingore / 不处理</a-button>
</Tooltip>
</div>
</div>
@@ -37,7 +37,7 @@ export default {
},
components: {
Tooltip,
- AntButton: Button,
+
},
}
</script>
diff --git a/components/tooltip/demo/placement.vue b/components/tooltip/demo/placement.vue
index 36aec0438..8454fa8d6 100644
--- a/components/tooltip/demo/placement.vue
+++ b/components/tooltip/demo/placement.vue
@@ -9,19 +9,19 @@
<template slot="title">
<span>prompt text</span>
</template>
- <AntButton>TL</AntButton>
+ <a-button>TL</a-button>
</Tooltip>
<Tooltip placement="top">
<template slot="title">
<span>prompt text</span>
</template>
- <AntButton>Top</AntButton>
+ <a-button>Top</a-button>
</Tooltip>
<Tooltip placement="topRight">
<template slot="title">
<span>prompt text</span>
</template>
- <AntButton>TR</AntButton>
+ <a-button>TR</a-button>
</Tooltip>
</div>
<div :style="{ width: `${buttonWidth}px`, float: 'left' }">
@@ -29,19 +29,19 @@
<template slot="title">
<span>prompt text</span>
</template>
- <AntButton>LT</AntButton>
+ <a-button>LT</a-button>
</Tooltip>
<Tooltip placement="left">
<template slot="title">
<span>prompt text</span>
</template>
- <AntButton>Left</AntButton>
+ <a-button>Left</a-button>
</Tooltip>
<Tooltip placement="leftBottom">
<template slot="title">
<span>prompt text</span>
</template>
- <AntButton>LB</AntButton>
+ <a-button>LB</a-button>
</Tooltip>
</div>
<div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}">
@@ -49,19 +49,19 @@
<template slot="title">
<span>prompt text</span>
</template>
- <AntButton>RT</AntButton>
+ <a-button>RT</a-button>
</Tooltip>
<Tooltip placement="right">
<template slot="title">
<span>prompt text</span>
</template>
- <AntButton>Right</AntButton>
+ <a-button>Right</a-button>
</Tooltip>
<Tooltip placement="rightBottom">
<template slot="title">
<span>prompt text</span>
</template>
- <AntButton>RB</AntButton>
+ <a-button>RB</a-button>
</Tooltip>
</div>
<div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
@@ -69,19 +69,19 @@
<template slot="title">
<span>prompt text</span>
</template>
- <AntButton>BL</AntButton>
+ <a-button>BL</a-button>
</Tooltip>
<Tooltip placement="bottom">
<template slot="title">
<span>prompt text</span>
</template>
- <AntButton>Bottom</AntButton>
+ <a-button>Bottom</a-button>
</Tooltip>
<Tooltip placement="bottomRight">
<template slot="title">
<span>prompt text</span>
</template>
- <AntButton>BR</AntButton>
+ <a-button>BR</a-button>
</Tooltip>
</div>
</div>
@@ -97,7 +97,7 @@ export default {
},
components: {
Tooltip,
- AntButton: Button,
+
},
}
</script>
diff --git a/components/trigger/demo/simple.vue b/components/trigger/demo/simple.vue
index b6ff2b3a2..10287e047 100644
--- a/components/trigger/demo/simple.vue
+++ b/components/trigger/demo/simple.vue
@@ -159,7 +159,7 @@ export default {
</label>
<label>
- <Checkbox
+ a-checkbox
value='rc-trigger-popup-zoom'
onChange={this.onTransitionChange}
checked={state.transitionName === 'rc-trigger-popup-zoom'}
@@ -172,7 +172,7 @@ export default {
trigger:
<label>
- <Checkbox
+ a-checkbox
value='hover'
checked={!!trigger.hover}
onChange={this.onTriggerChange}
@@ -180,7 +180,7 @@ export default {
hover
</label>
<label>
- <Checkbox
+ a-checkbox
value='focus'
checked={!!trigger.focus}
onChange={this.onTriggerChange}
@@ -188,7 +188,7 @@ export default {
focus
</label>
<label>
- <Checkbox
+ a-checkbox
value='click'
checked={!!trigger.click}
onChange={this.onTriggerChange}
@@ -196,7 +196,7 @@ export default {
click
</label>
<label>
- <Checkbox
+ a-checkbox
value='contextMenu'
checked={!!trigger.contextMenu}
onChange={this.onTriggerChange}
@@ -205,7 +205,7 @@ export default {
</label>
<label>
- <Checkbox
+ a-checkbox
checked={!!state.destroyPopupOnHide}
onChange={this.handleDestroyPopupOnHide}
/>
@@ -214,7 +214,7 @@ export default {
<label>
- <Checkbox
+ a-checkbox
checked={!!state.mask}
onChange={this.onMask}
/>
@@ -223,7 +223,7 @@ export default {
<label>
- <Checkbox
+ a-checkbox
checked={!!state.maskClosable}
onChange={this.onMaskClosable}
/>
diff --git a/examples/components/demoBox.vue b/examples/components/demoBox.vue
new file mode 100644
index 000000000..225100586
--- /dev/null
+++ b/examples/components/demoBox.vue
@@ -0,0 +1,120 @@
+<template>
+ <div class="box box-demo">
+ <slot name="component"></slot>
+ <div class="box-demo-description">
+ <slot name="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">
+ <div class="box-demo-code" v-show="isOpen">
+ <slot name="code"></slot>
+ </div>
+ </transition>
+ </div>
+</template>
+<script>
+import animate from 'antd/_util/openAnimation'
+export default {
+ name: 'demoBox',
+ props: {
+ jsfiddle: Object,
+ },
+ data () {
+ return {
+ isOpen: false,
+ }
+ },
+ methods: {
+ toggle () {
+ this.isOpen = !this.isOpen
+ },
+ enter: animate.enter,
+ leave: animate.leave,
+ },
+}
+</script>
+<style scoped lang="less">
+.box-demo{
+ padding: 0;
+ border: 1px solid #e9e9e9;
+ border-radius: 4px;
+ box-shadow: none;
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+.box-demo-show{
+ padding: 20px 25px 30px;
+ border-bottom: 1px solid #e9e9e9;
+}
+.box-demo-description{
+ position: relative;
+ padding: 17px 16px 15px 20px;
+ border-radius: 0 0 6px 6px;
+ -webkit-transition: background-color 0.4s ease;
+ transition: background-color 0.4s ease;
+ width: 100%;
+ font-size: 12px;
+ &.bordered{
+ border-bottom: 1px dashed #e9e9e9;
+ }
+ h3, h4{
+ position: absolute;
+ top: -14px;
+ padding: 1px 8px;
+ margin-left: -8px;
+ margin-top: 0;
+ margin-bottom: 0;
+ color: #777;
+ border-radius: 4px;
+ border-top-left-radius: 0;
+ background: #fff;
+ -webkit-transition: background-color 0.4s ease;
+ transition: background-color 0.4s ease;
+ .header-anchor{
+ display: none;
+ }
+ }
+ li{
+ line-height: 21px;
+ }
+}
+.box-demo-code{
+ -webkit-transition: height .2s ease-in-out;
+ transition: height .2s ease-in-out;
+ overflow: auto;
+ border-top: 1px dashed #e9e9e9;
+ pre {
+ margin: 0;
+ }
+ code{
+ margin: 0;
+ background: #f7f7f7;
+ padding: .2em .4em;
+ border-radius: 3px;
+ font-size: .9em;
+ border: 1px solid #eee;
+ }
+}
+.btn-toggle{
+ position: absolute;
+ right: 16px;
+ bottom: 17px;
+ cursor: pointer;
+ width: 18px;
+ height: 18px;
+ font-size: 18px;
+ line-height: 18px;
+ color: #999;
+ i{
+ -webkit-transition: all 0.3s;
+ transition: all 0.3s;
+ }
+ &.open{
+ i{
+ -webkit-transform: rotate(-180deg);
+ -ms-transform: rotate(-180deg);
+ transform: rotate(-180deg);
+ }
+ }
+}
+</style>
diff --git a/examples/demo.vue b/examples/demo.vue
index 39665deb0..5c70385e2 100644
--- a/examples/demo.vue
+++ b/examples/demo.vue
@@ -3,15 +3,11 @@ import { Menu } from 'antd'
import * as AllDemo from './demo'
const MenuItem = Menu.Item
export default {
- data () {
- console.log('routes', this.$route.params)
- return {}
- },
render () {
const { name, demo } = this.$route.params // eslint-disable-line
const Demo = AllDemo[name]
return (
- <div class='site'>
+ <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>
diff --git a/examples/index.js b/examples/index.js
index cf1f9a502..407c359ed 100644
--- a/examples/index.js
+++ b/examples/index.js
@@ -1,11 +1,19 @@
import 'antd/style.js'
import './index.less'
+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 * as Components from '../components/index'
+import demoBox from './components/demoBox'
Vue.use(VueRouter)
Vue.component(Md.name, Md)
+Vue.component('demo-box', demoBox)
+Object.keys(Components).forEach(k => {
+ const name = `a${k.replace(/([A-Z])/g, '-$1').toLowerCase()}`
+ Vue.component(name, Components[k])
+})
const router = new VueRouter({
mode: 'hash',
diff --git a/examples/index.less b/examples/index.less
index 4536ba98e..5469c2e81 100644
--- a/examples/index.less
+++ b/examples/index.less
@@ -1,12 +1,135 @@
#app {
}
-.site{
+.site {
display: flex;
- .nav{
+ .nav {
width: 200px;
}
- .content{
+ .content {
flex: 1;
padding: 20px;
}
-}
\ No newline at end of file
+}
+.code-section,
+.box-demo + summary {
+ display: none;
+}
+.highlight > .code-section {
+ display: block;
+ margin: 0;
+}
+
+.main-wrapper {
+ background: #fff;
+ width: 92%;
+ margin: 0 auto;
+ border-radius: 4px;
+ overflow: hidden;
+ padding: 24px 0 0;
+ margin-bottom: 24px;
+ position: relative;
+}
+
+.main-container {
+ padding: 0 6% 120px 4% !important;
+ margin-left: -1px;
+ min-height: 500px;
+ border-left: 1px solid #e9e9e9;
+}
+
+.page-container {
+ /*color: #666;*/
+ font-size: 14px;
+ line-height: 1.5;
+
+ .table {
+ font-size: 13px;
+ border-collapse: collapse;
+ border-spacing: 0px;
+ empty-cells: show;
+ border: 1px solid #e9e9e9;
+ width: 100%;
+ margin: 16px 0;
+
+ th{
+ background: #F7F7F7;
+ white-space: nowrap;
+ color: #5C6B77;
+ font-weight: 600;
+ }
+ td:first-child {
+ background: #fcfcfc;
+ font-weight: 500;
+ width: 20%;
+ font-family: "Lucida Console", Consolas, Menlo, Courier, monospace;
+ }
+ th,td{
+ border: 1px solid #e9e9e9;
+ padding: 8px 16px;
+ text-align: left;
+ }
+ }
+}
+
+.code-boxes-col-2-1 {
+ display: inline-block;
+ vertical-align: top;
+ padding: 0 8px;
+}
+
+.aside-container {
+ padding-bottom: 50px;
+}
+
+.aside-container .ant-menu-item a, .aside-container .ant-menu-submenu-name span, .aside-container > .ant-menu-item {
+ font-size: 14px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+.header-anchor {
+ margin-left: -18px;
+}
+
+.markdown {
+ & > ul{
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ & > li {
+ list-style: circle;
+ margin-left: 1rem;
+ }
+ }
+ h1, h2, h3{
+ a{
+ font-size: .8em;
+ opacity: 0;
+ font-weight: normal;
+ transition: opacity .2s ease-in-out;
+ }
+
+ &:hover a {
+ opacity: 1;
+ }
+ }
+ blockquote {
+ font-size: 90%;
+ color: #999;
+ border-left: 4px solid #e9e9e9;
+ padding-left: 0.8em;
+ margin: 1em 0;
+ }
+ code {
+ margin: 0;
+ background: #f7f7f7;
+ padding: .2em .4em;
+ border-radius: 3px;
+ font-size: .9em;
+ border: 1px solid #eee;
+ }
+
+ & > p, & > pre {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ }
+}
diff --git a/examples/md.vue b/examples/md.vue
index c907d5dda..08e147819 100644
--- a/examples/md.vue
+++ b/examples/md.vue
@@ -1,5 +1,5 @@
<template>
- <div style="padding: 10px 0;" v-html="marked($slots.default[0].text.trim() || '')" />
+ <div v-html="marked($slots.default[0].text.trim() || '')" />
</template>
<script>
import marked from 'marked'
diff --git a/package-lock.json b/package-lock.json
index 030f137e2..1cff8caae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -135,6 +135,53 @@
}
}
},
+ "@types/node": {
+ "version": "9.3.0",
+ "resolved": "http://registry.npm.taobao.org/@types/node/download/@types/node-9.3.0.tgz",
+ "integrity": "sha1-OhKc2nxOXfJAlwJiaJLLS5ZUbdU=",
+ "dev": true
+ },
+ "@types/tapable": {
+ "version": "0.2.4",
+ "resolved": "http://registry.npm.taobao.org/@types/tapable/download/@types/tapable-0.2.4.tgz",
+ "integrity": "sha1-gYGiKNpGGFQ5MA5gDFrjs7OYJYU=",
+ "dev": true
+ },
+ "@types/uglify-js": {
+ "version": "2.6.30",
+ "resolved": "http://registry.npm.taobao.org/@types/uglify-js/download/@types/uglify-js-2.6.30.tgz",
+ "integrity": "sha1-JX0rbdhmc9YNpHZoD7qQ8uMMbu8=",
+ "dev": true,
+ "requires": {
+ "source-map": "0.6.1"
+ },
+ "dependencies": {
+ "source-map": {
+ "version": "0.6.1",
+ "resolved": "http://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
+ "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
+ "dev": true
+ }
+ }
+ },
+ "@types/webpack": {
+ "version": "3.8.3",
+ "resolved": "http://registry.npm.taobao.org/@types/webpack/download/@types/webpack-3.8.3.tgz",
+ "integrity": "sha1-klAanH5BpWCqmzVDRXaLc0jYB2Q=",
+ "dev": true,
+ "requires": {
+ "@types/node": "9.3.0",
+ "@types/tapable": "0.2.4",
+ "@types/uglify-js": "2.6.30"
+ }
+ },
+ "abab": {
+ "version": "1.0.4",
+ "resolved": "http://registry.npm.taobao.org/abab/download/abab-1.0.4.tgz",
+ "integrity": "sha1-X6rZwsB/YN12dw9xzwJbYqY8/U4=",
+ "dev": true,
+ "optional": true
+ },
"abbrev": {
"version": "1.0.9",
"resolved": "http://10.134.27.134:7001/abbrev/download/abbrev-1.0.9.tgz",
@@ -173,6 +220,25 @@
}
}
},
+ "acorn-globals": {
+ "version": "1.0.9",
+ "resolved": "http://registry.npm.taobao.org/acorn-globals/download/acorn-globals-1.0.9.tgz",
+ "integrity": "sha1-VbtemGkVB7dFedBRNBMhfDgMVM8=",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "acorn": "2.7.0"
+ },
+ "dependencies": {
+ "acorn": {
+ "version": "2.7.0",
+ "resolved": "http://registry.npm.taobao.org/acorn/download/acorn-2.7.0.tgz",
+ "integrity": "sha1-q259nYhqrKiwhbwzEreaGYQz8Oc=",
+ "dev": true,
+ "optional": true
+ }
+ }
+ },
"acorn-jsx": {
"version": "3.0.1",
"resolved": "http://r.cnpmjs.org/acorn-jsx/download/acorn-jsx-3.0.1.tgz",
@@ -1843,6 +1909,20 @@
"integrity": "sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=",
"dev": true
},
+ "cheerio": {
+ "version": "1.0.0-rc.2",
+ "resolved": "http://registry.npm.taobao.org/cheerio/download/cheerio-1.0.0-rc.2.tgz",
+ "integrity": "sha1-S59TqBsn5NXawxwP/Qz6A8xoMNs=",
+ "dev": true,
+ "requires": {
+ "css-select": "1.2.0",
+ "dom-serializer": "0.1.0",
+ "entities": "1.1.1",
+ "htmlparser2": "3.9.2",
+ "lodash": "4.17.4",
+ "parse5": "3.0.3"
+ }
+ },
"chokidar": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.7.0.tgz",
@@ -2614,6 +2694,22 @@
"source-map": "0.5.7"
}
},
+ "cssom": {
+ "version": "0.3.2",
+ "resolved": "http://registry.npm.taobao.org/cssom/download/cssom-0.3.2.tgz",
+ "integrity": "sha1-uANhcMefB6kP8vFuIihAJ6JDhIs=",
+ "dev": true
+ },
+ "cssstyle": {
+ "version": "0.2.37",
+ "resolved": "http://registry.npm.taobao.org/cssstyle/download/cssstyle-0.2.37.tgz",
+ "integrity": "sha1-VBCXI0yyUTyDzu06zdwn/yeYfVQ=",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "cssom": "0.3.2"
+ }
+ },
"currently-unhandled": {
"version": "0.4.1",
"resolved": "http://10.134.27.134:7001/currently-unhandled/download/currently-unhandled-0.4.1.tgz",
@@ -3804,6 +3900,29 @@
"is-extglob": "1.0.0"
}
},
+ "extract-text-webpack-plugin": {
+ "version": "3.0.2",
+ "resolved": "http://registry.npm.taobao.org/extract-text-webpack-plugin/download/extract-text-webpack-plugin-3.0.2.tgz",
+ "integrity": "sha1-XwQ+qgL5dQqSWLeMCm4NwUCPsvc=",
+ "dev": true,
+ "requires": {
+ "async": "2.6.0",
+ "loader-utils": "1.1.0",
+ "schema-utils": "0.3.0",
+ "webpack-sources": "1.1.0"
+ },
+ "dependencies": {
+ "async": {
+ "version": "2.6.0",
+ "resolved": "http://registry.npm.taobao.org/async/download/async-2.6.0.tgz",
+ "integrity": "sha1-YaKau2/MAm/qd+VtHG7FOnlZUfQ=",
+ "dev": true,
+ "requires": {
+ "lodash": "4.17.4"
+ }
+ }
+ }
+ },
"extract-zip": {
"version": "1.6.6",
"resolved": "https://registry.npm.taobao.org/extract-zip/download/extract-zip-1.6.6.tgz",
@@ -5490,6 +5609,12 @@
"integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=",
"dev": true
},
+ "highlight.js": {
+ "version": "9.12.0",
+ "resolved": "http://registry.npm.taobao.org/highlight.js/download/highlight.js-9.12.0.tgz",
+ "integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4=",
+ "dev": true
+ },
"hmac-drbg": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -6575,6 +6700,46 @@
"dev": true,
"optional": true
},
+ "jsdom": {
+ "version": "7.2.2",
+ "resolved": "http://registry.npm.taobao.org/jsdom/download/jsdom-7.2.2.tgz",
+ "integrity": "sha1-QLQCdwwr2iNGkJa+6Rq2deOx/G4=",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "abab": "1.0.4",
+ "acorn": "2.7.0",
+ "acorn-globals": "1.0.9",
+ "cssom": "0.3.2",
+ "cssstyle": "0.2.37",
+ "escodegen": "1.8.1",
+ "nwmatcher": "1.4.3",
+ "parse5": "1.5.1",
+ "request": "2.83.0",
+ "sax": "1.2.4",
+ "symbol-tree": "3.2.2",
+ "tough-cookie": "2.3.3",
+ "webidl-conversions": "2.0.1",
+ "whatwg-url-compat": "0.6.5",
+ "xml-name-validator": "2.0.1"
+ },
+ "dependencies": {
+ "acorn": {
+ "version": "2.7.0",
+ "resolved": "http://registry.npm.taobao.org/acorn/download/acorn-2.7.0.tgz",
+ "integrity": "sha1-q259nYhqrKiwhbwzEreaGYQz8Oc=",
+ "dev": true,
+ "optional": true
+ },
+ "parse5": {
+ "version": "1.5.1",
+ "resolved": "http://registry.npm.taobao.org/parse5/download/parse5-1.5.1.tgz",
+ "integrity": "sha1-m387DeMr543CQBsXVzzK8Pb1nZQ=",
+ "dev": true,
+ "optional": true
+ }
+ }
+ },
"jsesc": {
"version": "1.3.0",
"resolved": "http://registry.npm.sogou/jsesc/download/jsesc-1.3.0.tgz",
@@ -7119,6 +7284,15 @@
"type-check": "0.3.2"
}
},
+ "linkify-it": {
+ "version": "2.0.3",
+ "resolved": "http://registry.npm.taobao.org/linkify-it/download/linkify-it-2.0.3.tgz",
+ "integrity": "sha1-2UpGSPmxwXnWT6lykSaL22zpQ08=",
+ "dev": true,
+ "requires": {
+ "uc.micro": "1.0.3"
+ }
+ },
"load-json-file": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
@@ -7466,6 +7640,34 @@
"integrity": "sha1-GZTfLTr0gR3lmmcUk0wrIpJzRRg=",
"dev": true
},
+ "markdown-it": {
+ "version": "8.4.0",
+ "resolved": "http://registry.npm.taobao.org/markdown-it/download/markdown-it-8.4.0.tgz",
+ "integrity": "sha1-4kAIgb8XH3AY7RvZ2kQdrIr2MG0=",
+ "dev": true,
+ "requires": {
+ "argparse": "1.0.9",
+ "entities": "1.1.1",
+ "linkify-it": "2.0.3",
+ "mdurl": "1.0.1",
+ "uc.micro": "1.0.3"
+ }
+ },
+ "markdown-it-anchor": {
+ "version": "4.0.0",
+ "resolved": "http://registry.npm.taobao.org/markdown-it-anchor/download/markdown-it-anchor-4.0.0.tgz",
+ "integrity": "sha1-6H+1VD4BllrfcVBsa/ewSRhBt+M=",
+ "dev": true,
+ "requires": {
+ "string": "3.3.3"
+ }
+ },
+ "markdown-it-container": {
+ "version": "2.0.0",
+ "resolved": "http://registry.npm.taobao.org/markdown-it-container/download/markdown-it-container-2.0.0.tgz",
+ "integrity": "sha1-ABm0P9Au7+zi8ZYKKJX7qBpARpU=",
+ "dev": true
+ },
"markdown-table": {
"version": "1.1.1",
"resolved": "https://registry.npm.taobao.org/markdown-table/download/markdown-table-1.1.1.tgz",
@@ -7522,6 +7724,12 @@
"unist-util-visit": "1.3.0"
}
},
+ "mdurl": {
+ "version": "1.0.1",
+ "resolved": "http://registry.npm.taobao.org/mdurl/download/mdurl-1.0.1.tgz",
+ "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=",
+ "dev": true
+ },
"media-typer": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -8016,6 +8224,13 @@
"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
"dev": true
},
+ "nwmatcher": {
+ "version": "1.4.3",
+ "resolved": "http://registry.npm.taobao.org/nwmatcher/download/nwmatcher-1.4.3.tgz",
+ "integrity": "sha1-ZDSOOz2A8DW0CsEVY9J4+LctuJw=",
+ "dev": true,
+ "optional": true
+ },
"oauth-sign": {
"version": "0.8.2",
"resolved": "http://10.134.27.134:7001/oauth-sign/download/oauth-sign-0.8.2.tgz",
@@ -8402,6 +8617,15 @@
"error-ex": "1.3.1"
}
},
+ "parse5": {
+ "version": "3.0.3",
+ "resolved": "http://registry.npm.taobao.org/parse5/download/parse5-3.0.3.tgz",
+ "integrity": "sha1-BC95L/3TaFFVHPTp4Gazh0q0W1w=",
+ "dev": true,
+ "requires": {
+ "@types/node": "9.3.0"
+ }
+ },
"parsejson": {
"version": "0.0.3",
"resolved": "https://registry.npm.taobao.org/parsejson/download/parsejson-0.0.3.tgz",
@@ -11360,6 +11584,12 @@
"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
"dev": true
},
+ "string": {
+ "version": "3.3.3",
+ "resolved": "http://registry.npm.taobao.org/string/download/string-3.3.3.tgz",
+ "integrity": "sha1-XqIRzZLSKOGEKUmQpsyXs2anfLA=",
+ "dev": true
+ },
"string_decoder": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
@@ -11868,6 +12098,13 @@
"whet.extend": "0.9.9"
}
},
+ "symbol-tree": {
+ "version": "3.2.2",
+ "resolved": "http://registry.npm.taobao.org/symbol-tree/download/symbol-tree-3.2.2.tgz",
+ "integrity": "sha1-rifbOPZgp64uHDt9G8KQgZuFGeY=",
+ "dev": true,
+ "optional": true
+ },
"table": {
"version": "4.0.2",
"resolved": "https://registry.npm.taobao.org/table/download/table-4.0.2.tgz",
@@ -12128,6 +12365,138 @@
"punycode": "1.4.1"
}
},
+ "tr46": {
+ "version": "0.0.3",
+ "resolved": "http://registry.npm.taobao.org/tr46/download/tr46-0.0.3.tgz",
+ "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=",
+ "dev": true,
+ "optional": true
+ },
+ "transliteration": {
+ "version": "1.6.2",
+ "resolved": "http://registry.npm.taobao.org/transliteration/download/transliteration-1.6.2.tgz",
+ "integrity": "sha1-M1yRv3DzshG7gejQOZKyB4wNrJY=",
+ "dev": true,
+ "requires": {
+ "yargs": "8.0.2"
+ },
+ "dependencies": {
+ "camelcase": {
+ "version": "4.1.0",
+ "resolved": "http://registry.npm.taobao.org/camelcase/download/camelcase-4.1.0.tgz",
+ "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=",
+ "dev": true
+ },
+ "cliui": {
+ "version": "3.2.0",
+ "resolved": "http://registry.npm.taobao.org/cliui/download/cliui-3.2.0.tgz",
+ "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
+ "dev": true,
+ "requires": {
+ "string-width": "1.0.2",
+ "strip-ansi": "3.0.1",
+ "wrap-ansi": "2.1.0"
+ },
+ "dependencies": {
+ "string-width": {
+ "version": "1.0.2",
+ "resolved": "http://registry.npm.taobao.org/string-width/download/string-width-1.0.2.tgz",
+ "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+ "dev": true,
+ "requires": {
+ "code-point-at": "1.1.0",
+ "is-fullwidth-code-point": "1.0.0",
+ "strip-ansi": "3.0.1"
+ }
+ }
+ }
+ },
+ "is-fullwidth-code-point": {
+ "version": "1.0.0",
+ "resolved": "http://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-1.0.0.tgz",
+ "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+ "dev": true,
+ "requires": {
+ "number-is-nan": "1.0.1"
+ }
+ },
+ "load-json-file": {
+ "version": "2.0.0",
+ "resolved": "http://registry.npm.taobao.org/load-json-file/download/load-json-file-2.0.0.tgz",
+ "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=",
+ "dev": true,
+ "requires": {
+ "graceful-fs": "4.1.11",
+ "parse-json": "2.2.0",
+ "pify": "2.3.0",
+ "strip-bom": "3.0.0"
+ }
+ },
+ "path-type": {
+ "version": "2.0.0",
+ "resolved": "http://registry.npm.taobao.org/path-type/download/path-type-2.0.0.tgz",
+ "integrity": "sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=",
+ "dev": true,
+ "requires": {
+ "pify": "2.3.0"
+ }
+ },
+ "pify": {
+ "version": "2.3.0",
+ "resolved": "http://registry.npm.taobao.org/pify/download/pify-2.3.0.tgz",
+ "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
+ "dev": true
+ },
+ "read-pkg": {
+ "version": "2.0.0",
+ "resolved": "http://registry.npm.taobao.org/read-pkg/download/read-pkg-2.0.0.tgz",
+ "integrity": "sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=",
+ "dev": true,
+ "requires": {
+ "load-json-file": "2.0.0",
+ "normalize-package-data": "2.4.0",
+ "path-type": "2.0.0"
+ }
+ },
+ "read-pkg-up": {
+ "version": "2.0.0",
+ "resolved": "http://registry.npm.taobao.org/read-pkg-up/download/read-pkg-up-2.0.0.tgz",
+ "integrity": "sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=",
+ "dev": true,
+ "requires": {
+ "find-up": "2.1.0",
+ "read-pkg": "2.0.0"
+ }
+ },
+ "strip-bom": {
+ "version": "3.0.0",
+ "resolved": "http://registry.npm.taobao.org/strip-bom/download/strip-bom-3.0.0.tgz",
+ "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
+ "dev": true
+ },
+ "yargs": {
+ "version": "8.0.2",
+ "resolved": "http://registry.npm.taobao.org/yargs/download/yargs-8.0.2.tgz",
+ "integrity": "sha1-YpmpBVsc78lp/355wdkY3Osiw2A=",
+ "dev": true,
+ "requires": {
+ "camelcase": "4.1.0",
+ "cliui": "3.2.0",
+ "decamelize": "1.2.0",
+ "get-caller-file": "1.0.2",
+ "os-locale": "2.1.0",
+ "read-pkg-up": "2.0.0",
+ "require-directory": "2.1.1",
+ "require-main-filename": "1.0.1",
+ "set-blocking": "2.0.0",
+ "string-width": "2.1.1",
+ "which-module": "2.0.0",
+ "y18n": "3.2.1",
+ "yargs-parser": "7.0.0"
+ }
+ }
+ }
+ },
"trim": {
"version": "0.0.1",
"resolved": "http://r.cnpmjs.org/trim/download/trim-0.0.1.tgz",
@@ -12211,6 +12580,12 @@
"integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
"dev": true
},
+ "uc.micro": {
+ "version": "1.0.3",
+ "resolved": "http://registry.npm.taobao.org/uc.micro/download/uc.micro-1.0.3.tgz",
+ "integrity": "sha1-ftUNXg+an7ClczeSWfKndFjVAZI=",
+ "dev": true
+ },
"uglify-js": {
"version": "3.3.7",
"resolved": "https://registry.npm.taobao.org/uglify-js/download/uglify-js-3.3.7.tgz",
@@ -12842,6 +13217,110 @@
}
}
},
+ "vue-markdown-loader": {
+ "version": "2.3.0",
+ "resolved": "http://registry.npm.taobao.org/vue-markdown-loader/download/vue-markdown-loader-2.3.0.tgz",
+ "integrity": "sha1-MWmEvHqEQZ7zCyu510kZxF9GBZE=",
+ "dev": true,
+ "requires": {
+ "cheerio": "0.20.0",
+ "highlight.js": "9.12.0",
+ "loader-utils": "0.2.17",
+ "markdown-it": "8.4.0"
+ },
+ "dependencies": {
+ "cheerio": {
+ "version": "0.20.0",
+ "resolved": "http://registry.npm.taobao.org/cheerio/download/cheerio-0.20.0.tgz",
+ "integrity": "sha1-XHEPK6uVZTJyhCugHG6mGzVF7DU=",
+ "dev": true,
+ "requires": {
+ "css-select": "1.2.0",
+ "dom-serializer": "0.1.0",
+ "entities": "1.1.1",
+ "htmlparser2": "3.8.3",
+ "jsdom": "7.2.2",
+ "lodash": "4.17.4"
+ }
+ },
+ "domhandler": {
+ "version": "2.3.0",
+ "resolved": "http://registry.npm.taobao.org/domhandler/download/domhandler-2.3.0.tgz",
+ "integrity": "sha1-LeWaCCLVAn+r/28DLCsloqir5zg=",
+ "dev": true,
+ "requires": {
+ "domelementtype": "1.3.0"
+ }
+ },
+ "domutils": {
+ "version": "1.5.1",
+ "resolved": "http://registry.npm.taobao.org/domutils/download/domutils-1.5.1.tgz",
+ "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
+ "dev": true,
+ "requires": {
+ "dom-serializer": "0.1.0",
+ "domelementtype": "1.3.0"
+ }
+ },
+ "htmlparser2": {
+ "version": "3.8.3",
+ "resolved": "http://registry.npm.taobao.org/htmlparser2/download/htmlparser2-3.8.3.tgz",
+ "integrity": "sha1-mWwosZFRaovoZQGn15dX5ccMEGg=",
+ "dev": true,
+ "requires": {
+ "domelementtype": "1.3.0",
+ "domhandler": "2.3.0",
+ "domutils": "1.5.1",
+ "entities": "1.0.0",
+ "readable-stream": "1.1.14"
+ },
+ "dependencies": {
+ "entities": {
+ "version": "1.0.0",
+ "resolved": "http://registry.npm.taobao.org/entities/download/entities-1.0.0.tgz",
+ "integrity": "sha1-sph6o4ITR/zeZCsk/fyeT7cSvyY=",
+ "dev": true
+ }
+ }
+ },
+ "isarray": {
+ "version": "0.0.1",
+ "resolved": "http://registry.npm.taobao.org/isarray/download/isarray-0.0.1.tgz",
+ "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+ "dev": true
+ },
+ "loader-utils": {
+ "version": "0.2.17",
+ "resolved": "http://registry.npm.taobao.org/loader-utils/download/loader-utils-0.2.17.tgz",
+ "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
+ "dev": true,
+ "requires": {
+ "big.js": "3.2.0",
+ "emojis-list": "2.1.0",
+ "json5": "0.5.1",
+ "object-assign": "4.1.1"
+ }
+ },
+ "readable-stream": {
+ "version": "1.1.14",
+ "resolved": "http://registry.npm.taobao.org/readable-stream/download/readable-stream-1.1.14.tgz",
+ "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+ "dev": true,
+ "requires": {
+ "core-util-is": "1.0.2",
+ "inherits": "2.0.3",
+ "isarray": "0.0.1",
+ "string_decoder": "0.10.31"
+ }
+ },
+ "string_decoder": {
+ "version": "0.10.31",
+ "resolved": "http://registry.npm.taobao.org/string_decoder/download/string_decoder-0.10.31.tgz",
+ "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
+ "dev": true
+ }
+ }
+ },
"vue-router": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz",
@@ -12921,6 +13400,13 @@
"minimalistic-assert": "1.0.0"
}
},
+ "webidl-conversions": {
+ "version": "2.0.1",
+ "resolved": "http://registry.npm.taobao.org/webidl-conversions/download/webidl-conversions-2.0.1.tgz",
+ "integrity": "sha1-O/glj30xjHRDw28uFpQCoaZwNQY=",
+ "dev": true,
+ "optional": true
+ },
"webpack": {
"version": "3.10.0",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-3.10.0.tgz",
@@ -13085,6 +13571,15 @@
}
}
},
+ "webpack-chunk-hash": {
+ "version": "0.5.0",
+ "resolved": "http://registry.npm.taobao.org/webpack-chunk-hash/download/webpack-chunk-hash-0.5.0.tgz",
+ "integrity": "sha1-Hbo4ID1zwearBptoEKWjdAI5new=",
+ "dev": true,
+ "requires": {
+ "@types/webpack": "3.8.3"
+ }
+ },
"webpack-dev-middleware": {
"version": "1.12.2",
"resolved": "https://registry.npm.taobao.org/webpack-dev-middleware/download/webpack-dev-middleware-1.12.2.tgz",
@@ -13581,6 +14076,15 @@
}
}
},
+ "webpack-merge": {
+ "version": "4.1.1",
+ "resolved": "http://registry.npm.taobao.org/webpack-merge/download/webpack-merge-4.1.1.tgz",
+ "integrity": "sha1-8Rl6Cpc+acb77rbWWCGaqMDBNVU=",
+ "dev": true,
+ "requires": {
+ "lodash": "4.17.4"
+ }
+ },
"webpack-sources": {
"version": "1.1.0",
"resolved": "https://registry.npm.taobao.org/webpack-sources/download/webpack-sources-1.1.0.tgz",
@@ -13615,6 +14119,16 @@
"integrity": "sha1-XS/yKXcAPsaHpLhwc9+7rBRszyk=",
"dev": true
},
+ "whatwg-url-compat": {
+ "version": "0.6.5",
+ "resolved": "http://registry.npm.taobao.org/whatwg-url-compat/download/whatwg-url-compat-0.6.5.tgz",
+ "integrity": "sha1-AImBEa9om7CXVBzVpFymyHmERb8=",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "tr46": "0.0.3"
+ }
+ },
"whet.extend": {
"version": "0.9.9",
"resolved": "https://registry.npmjs.org/whet.extend/-/whet.extend-0.9.9.tgz",
@@ -13729,6 +14243,13 @@
"integrity": "sha1-ZGV4SKIP/F31g6Qq2KJ3tFErvE0=",
"dev": true
},
+ "xml-name-validator": {
+ "version": "2.0.1",
+ "resolved": "http://registry.npm.taobao.org/xml-name-validator/download/xml-name-validator-2.0.1.tgz",
+ "integrity": "sha1-TYuPHszTQZqjYgYb7O9RXh5VljU=",
+ "dev": true,
+ "optional": true
+ },
"xmlhttprequest-ssl": {
"version": "1.5.3",
"resolved": "https://registry.npm.taobao.org/xmlhttprequest-ssl/download/xmlhttprequest-ssl-1.5.3.tgz",
diff --git a/package.json b/package.json
index 31fe47d7e..2d4060e29 100644
--- a/package.json
+++ b/package.json
@@ -42,11 +42,13 @@
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"chai": "^4.1.2",
+ "cheerio": "^1.0.0-rc.2",
"css-loader": "^0.28.7",
"eslint": "^4.7.2",
"eslint-plugin-html": "^3.2.2",
"eslint-plugin-vue-libs": "^1.2.1",
"extract-text-webpack-plugin": "^3.0.2",
+ "highlight.js": "^9.12.0",
"html-webpack-plugin": "^2.30.1",
"istanbul-instrumenter-loader": "^3.0.0",
"karma": "^1.4.1",
@@ -61,6 +63,9 @@
"karma-webpack": "^2.0.2",
"less": "^2.7.2",
"less-loader": "^4.0.5",
+ "markdown-it": "^8.4.0",
+ "markdown-it-anchor": "^4.0.0",
+ "markdown-it-container": "^2.0.0",
"marked": "^0.3.7",
"mocha": "^3.2.0",
"pre-commit": "^1.2.2",
@@ -71,12 +76,15 @@
"style-loader": "^0.18.2",
"stylelint": "^8.1.1",
"stylelint-config-standard": "^17.0.0",
+ "transliteration": "^1.6.2",
"vue-loader": "^13.0.5",
+ "vue-markdown-loader": "^2.3.0",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.13",
"webpack": "^3.6.0",
"webpack-chunk-hash": "^0.5.0",
- "webpack-dev-server": "^2.8.2"
+ "webpack-dev-server": "^2.8.2",
+ "webpack-merge": "^4.1.1"
},
"dependencies": {
"add-dom-event-listener": "^1.0.2",
diff --git a/site/index.html b/site/index.html
deleted file mode 100644
index 314ab2220..000000000
--- a/site/index.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!doctype html>
-<html>
-<head>
-</head>
-
-<body>
- <div id="app">
- <router-view></router-view>
- </div>
-</body>
-
-</html>
diff --git a/site/index.js b/site/index.js
deleted file mode 100644
index cf1f9a502..000000000
--- a/site/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import 'antd/style.js'
-import './index.less'
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import routes from './routes'
-import Md from './md'
-Vue.use(VueRouter)
-Vue.component(Md.name, Md)
-
-const router = new VueRouter({
- mode: 'hash',
- routes,
-})
-new Vue({
- el: '#app',
- router,
-})
diff --git a/site/index.less b/site/index.less
deleted file mode 100644
index ac6ec4a44..000000000
--- a/site/index.less
+++ /dev/null
@@ -1,3 +0,0 @@
-#app {
- padding: 50px;
-}
diff --git a/site/md.vue b/site/md.vue
deleted file mode 100644
index c907d5dda..000000000
--- a/site/md.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
- <div style="padding: 10px 0;" 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>
diff --git a/site/routes.js b/site/routes.js
deleted file mode 100644
index d5a5cc86d..000000000
--- a/site/routes.js
+++ /dev/null
@@ -1,11 +0,0 @@
-const AsyncComp = () => {
- const pathnameArr = window.location.pathname.split('/')
- const com = pathnameArr[1] || 'button' // eslint-disable-line
- const demo = pathnameArr[2] || 'index'
- return {
- component: import(`../components/card/demo/${demo}.vue`),
- }
-}
-export default [
- { path: '/*', component: AsyncComp },
-]
diff --git a/webpack.base.config.js b/webpack.base.config.js
new file mode 100644
index 000000000..8ab966d54
--- /dev/null
+++ b/webpack.base.config.js
@@ -0,0 +1,144 @@
+const path = require('path')
+const slugify = require('transliteration').slugify
+const hljs = require('highlight.js')
+
+const cheerio = require('cheerio')
+
+const fetch = (str, tag) => {
+ const $ = cheerio.load(str, { decodeEntities: false })
+ if (!tag) return str
+
+ return $(tag).html()
+}
+
+/**
+ * `{{ }}` => `<span>{{</span> <span>}}</span>`
+ * @param {string} str
+ * @return {string}
+ */
+const replaceDelimiters = function (str) {
+ return str.replace(/({{|}})/g, '<span>$1</span>')
+}
+
+/**
+ * renderHighlight
+ * @param {string} str
+ * @param {string} lang
+ */
+
+const renderHighlight = function (str, lang) {
+ if (!(lang && hljs.getLanguage(lang))) {
+ return ''
+ }
+
+ try {
+ return replaceDelimiters(hljs.highlight(lang, str, true).value)
+ } catch (err) {}
+}
+
+function wrap (render) {
+ return function () {
+ return render.apply(this, arguments)
+ .replace('<code class="', '<code class="hljs ')
+ .replace('<code>', '<code class="hljs">')
+ .replace('<pre>', '<pre class="code-section">')
+ }
+};
+
+const md = require('markdown-it')('default', {
+ html: true,
+ breaks: true,
+ highlight: renderHighlight,
+})
+md.use(require('markdown-it-anchor'), {
+ level: 2,
+ 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)
+
+module.exports = {
+ entry: {
+ index: [
+ './examples/index.js',
+ ],
+ },
+ module: {
+ rules: [
+ {
+ test: /\.md/,
+ use: [
+ {
+ loader: 'vue-markdown-loader',
+ options: Object.assign(md, { wrapper: 'section', preventExtract: true }),
+ },
+ ],
+ },
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ },
+ {
+ test: /\.js$/,
+ loader: 'babel-loader', exclude: /node_modules/,
+ },
+ {
+ test: /\.(png|jpg|gif|svg)$/,
+ loader: 'file-loader',
+ options: {
+ name: '[name].[ext]?[hash]',
+ },
+ },
+ ],
+ },
+ resolve: {
+ extensions: ['.js', '.vue'],
+ alias: {
+ 'vue$': 'vue/dist/vue.esm.js',
+ 'antd': path.join(__dirname, 'components'),
+ },
+ },
+}
diff --git a/webpack.config.js b/webpack.config.js
index 0bc6addc2..ab71254d6 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,13 +1,10 @@
const path = require('path')
// const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.config')
-module.exports = {
- entry: {
- index: [
- './examples/index.js',
- ],
- },
+module.exports = merge(baseWebpackConfig, {
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/',
@@ -15,21 +12,6 @@ module.exports = {
},
module: {
rules: [
- {
- test: /\.vue$/,
- loader: 'vue-loader',
- },
- {
- test: /\.js$/,
- loader: 'babel-loader', exclude: /node_modules/,
- },
- {
- test: /\.(png|jpg|gif|svg)$/,
- loader: 'file-loader',
- options: {
- name: '[name].[ext]?[hash]',
- },
- },
{
test: /\.less$/,
use: [
@@ -43,15 +25,15 @@ module.exports = {
},
],
},
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader',
+ ],
+ },
],
},
- resolve: {
- extensions: ['.js', '.vue'],
- alias: {
- 'vue$': 'vue/dist/vue.esm.js',
- 'antd': path.join(__dirname, 'components'),
- },
- },
devServer: {
port: 3000,
historyApiFallback: {
@@ -66,12 +48,11 @@ module.exports = {
hints: false,
},
devtool: '#source-map',
-}
-
-module.exports.plugins = (module.exports.plugins || []).concat([
- new HtmlWebpackPlugin({
- template: 'examples/index.html',
- filename: 'index.html',
- inject: true,
- }),
-])
+ plugins: [
+ new HtmlWebpackPlugin({
+ template: 'examples/index.html',
+ filename: 'index.html',
+ inject: true,
+ }),
+ ],
+})
diff --git a/webpack.prod.config.js b/webpack.prod.config.js
index 4c23f740c..1f4c8cd9f 100644
--- a/webpack.prod.config.js
+++ b/webpack.prod.config.js
@@ -3,18 +3,15 @@ const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const WebpackChunkHash = require('webpack-chunk-hash')
const HtmlWebpackPlugin = require('html-webpack-plugin')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.config')
const modulePlugin = new ExtractTextPlugin({
filename: '[name].[chunkhash].css',
allChunks: true,
})
-module.exports = {
- entry: {
- index: [
- './examples/index.js',
- ],
- },
+module.exports = merge(baseWebpackConfig, {
output: {
path: path.resolve(__dirname, './dist'),
publicPath: './',
@@ -23,21 +20,6 @@ module.exports = {
},
module: {
rules: [
- {
- test: /\.vue$/,
- loader: 'vue-loader',
- },
- {
- test: /\.js$/,
- loader: 'babel-loader', exclude: /node_modules/,
- },
- {
- test: /\.(png|jpg|gif|svg)$/,
- loader: 'file-loader',
- options: {
- name: '[name].[ext]?[hash]',
- },
- },
{
test: /\.less$/,
use: modulePlugin.extract({
@@ -51,47 +33,50 @@ module.exports = {
],
}),
},
+ {
+ test: /\.css$/,
+ use: modulePlugin.extract({
+ fallback: 'style-loader',
+ use: [
+ {
+ loader: 'css-loader',
+ },
+ ],
+ }),
+ },
],
},
- resolve: {
- extensions: ['.js', '.vue'],
- alias: {
- 'vue$': 'vue/dist/vue.esm.js',
- 'antd': path.join(__dirname, 'components'),
- },
- },
-}
-// http://vue-loader.vuejs.org/en/workflow/production.html
-module.exports.plugins = (module.exports.plugins || []).concat([
- new webpack.DefinePlugin({
- 'process.env': {
- NODE_ENV: '"production"',
- },
- }),
- new webpack.optimize.CommonsChunkPlugin({
- name: 'manifest',
- minChunks: Infinity,
- }),
- new webpack.optimize.CommonsChunkPlugin({
- name: 'vender',
- minChunks: function (module) {
- return module.context && ~module.context.indexOf('node_modules')
- },
- }),
- new webpack.optimize.UglifyJsPlugin({
- compress: {
- warnings: false,
- },
- }),
- new HtmlWebpackPlugin({
- template: './examples/index.html',
- inject: true,
- minify: { collapseWhitespace: true },
- production: true,
- }),
- new webpack.LoaderOptionsPlugin({
- minimize: true,
- }),
- modulePlugin,
- new WebpackChunkHash({ algorithm: 'md5' }),
-])
+ plugins: [
+ new webpack.DefinePlugin({
+ 'process.env': {
+ NODE_ENV: '"production"',
+ },
+ }),
+ new webpack.optimize.CommonsChunkPlugin({
+ name: 'manifest',
+ minChunks: Infinity,
+ }),
+ new webpack.optimize.CommonsChunkPlugin({
+ name: 'vender',
+ minChunks: function (module) {
+ return module.context && ~module.context.indexOf('node_modules')
+ },
+ }),
+ new webpack.optimize.UglifyJsPlugin({
+ compress: {
+ warnings: false,
+ },
+ }),
+ new HtmlWebpackPlugin({
+ template: './examples/index.html',
+ inject: true,
+ minify: { collapseWhitespace: true },
+ production: true,
+ }),
+ new webpack.LoaderOptionsPlugin({
+ minimize: true,
+ }),
+ modulePlugin,
+ new WebpackChunkHash({ algorithm: 'md5' }),
+ ],
+})