fix site
tangjinzhou
parent
2244a5e550
commit
864118b47c
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
```
|
||||
:::
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<Checkbox @change="onChange">Checkbox</Checkbox>
|
||||
<a-checkbox @change="onChange">Checkbox</a-checkbox>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
||||
},
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
## 主题
|
||||
内建了两套主题 `light|dark`，默认 `light`。
|
||||
</md>
|
||||
<Checkbox @change="changeTheme" /> Change Theme
|
||||
<a-checkbox @change="changeTheme" /> Change Theme
|
||||
<br />
|
||||
<br />
|
||||
<Menu
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export default {
|
|||
},
|
||||
components: {
|
||||
Popconfirm,
|
||||
AntButton: Button,
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
</Popconfirm>
|
||||
<br />
|
||||
<br />
|
||||
Whether directly execute：<Checkbox defaultChecked @change="changeCondition" />
|
||||
Whether directly execute：<a-checkbox defaultChecked @change="changeCondition" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -1,12 +1,135 @@
|
|||
#app {
|
||||
}
|
||||
.site{
|
||||
.site {
|
||||
display: flex;
|
||||
.nav{
|
||||
.nav {
|
||||
width: 200px;
|
||||
}
|
||||
.content{
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
10
package.json
10
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",
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -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,
|
||||
})
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
#app {
|
||||
padding: 50px;
|
||||
}
|
||||
24
site/md.vue
24
site/md.vue
|
|
@ -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>
|
||||
|
|
@ -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 },
|
||||
]
|
||||
|
|
@ -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'),
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
@ -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,
|
||||
}),
|
||||
],
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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' }),
|
||||
],
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue