mirror of
https://github.com/youzan/vant.git
synced 2025-12-25 02:02:01 +08:00
docs
This commit is contained in:
cookfront
@@ -4,7 +4,6 @@
|
||||
<div class="page-content">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<mobile></mobile>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -68,26 +67,11 @@ export default {
|
||||
}
|
||||
|
||||
.page-content {
|
||||
width: 52%;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
padding: 0 15px;
|
||||
overflow: auto;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
.mobile-wrapper {
|
||||
float: left;
|
||||
width: 30%;
|
||||
height: 300px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
margin: 20px 20px 0;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
width: 365px;
|
||||
margin-left: 320px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.demo-page {
|
||||
|
||||
70
docs/components/demo-block.vue
Normal file
70
docs/components/demo-block.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div
|
||||
class="demo-block"
|
||||
:class="blockClass">
|
||||
<slot name="examples"></slot>
|
||||
<slot name="highlight">
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
blockClass() {
|
||||
return `demo-${this.$route.path.split('/').pop()}`;
|
||||
},
|
||||
|
||||
codeAreaHeight() {
|
||||
return Math.max(this.$el.getElementsByClassName('examples')[0].clientHeight, this.$el.getElementsByClassName('highlight')[0].clientHeight);
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$el.getElementsByClassName('highlight')[0].style.height = `${this.codeAreaHeight + 1}px`;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-block {
|
||||
border: solid 1px #eaeefb;
|
||||
border-radius: 4px;
|
||||
transition: .2s;
|
||||
overflow: hidden;
|
||||
|
||||
code {
|
||||
font-family: Menlo, Monaco, Consolas, Courier, monospace;
|
||||
}
|
||||
|
||||
.examples {
|
||||
width: 375px;
|
||||
float: right;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 0;
|
||||
min-height: 200px;
|
||||
max-height: 600px;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
margin-right: 375px;
|
||||
box-sizing: border-box;
|
||||
border-right: solid 1px #eaeefb;
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
code.hljs {
|
||||
margin: 0;
|
||||
border: none;
|
||||
max-height: none;
|
||||
border-radius: 0;
|
||||
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<div class="mobile-wrapper">
|
||||
<div class="mobile">
|
||||
<iframe class="demo-page" :src="'./examples.html#' + $route.path" frameborder="0"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -62,7 +62,7 @@
|
||||
|
||||
<style lang="css">
|
||||
.side-nav {
|
||||
width: 18%;
|
||||
width: 320px;
|
||||
box-sizing: border-box;
|
||||
padding: 40px 20px;
|
||||
float: left;
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-badge-group active-key="2">
|
||||
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
|
||||
@@ -10,6 +11,7 @@
|
||||
<zan-badge mark="3" title="手握寿司" info="199"></zan-badge>
|
||||
</zan-badge-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### z-badge-group API
|
||||
|
||||
|
||||
@@ -1,95 +1,123 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b button {
|
||||
.zan-row {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.zan-col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.button-group {
|
||||
font-size: 0;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Button组件
|
||||
|
||||
### 按钮功能
|
||||
|
||||
只接受primary, default, danger三种类型，默认default。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div class="zan-button-group">
|
||||
<div class="zan-button-1">
|
||||
<zan-button>default</zan-button>
|
||||
</div>
|
||||
<div class="zan-button-1">
|
||||
<zan-button type="primary">primary</zan-button>
|
||||
</div>
|
||||
<div class="zan-button-1">
|
||||
<zan-button type="danger">danger</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button block>default</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="24">
|
||||
<zan-button type="primary" block>primary</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="24">
|
||||
<zan-button type="danger" block>danger</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用状态
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div class="zan-button-group">
|
||||
<div class="zan-button-1">
|
||||
<zan-button disabled>diabled</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button disabled block>diabled</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### 按钮尺寸
|
||||
|
||||
只接受large, normal, small, mini四种尺寸，默认normal。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div class="zan-button-group">
|
||||
<div class="zan-button-1">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="large">large</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zan-button-group" :style="{ width: '50%' }">
|
||||
<div class="zan-button-3">
|
||||
<zan-button type="primary">normal</zan-button>
|
||||
</div>
|
||||
<div class="zan-button-3">
|
||||
<zan-button size="small">small</zan-button>
|
||||
</div>
|
||||
<div class="zan-button-3">
|
||||
<zan-button size="mini">mini</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row gutter="10">
|
||||
<zan-col span="8">
|
||||
<zan-button type="primary" block>normal</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-button size="small" block>small</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-button size="mini" block>mini</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### 自定义按钮标签
|
||||
|
||||
按钮默认是button标签，可以使用tag属性修改为一个a标签。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div class="zan-button-group">
|
||||
<div class="zan-button-1">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### loading按钮
|
||||
|
||||
表示loading状态
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div class="zan-button-group">
|
||||
<div class="zan-button-1">
|
||||
<zan-button type="primary" loading>111</zan-button>
|
||||
</div>
|
||||
<div class="zan-button-1">
|
||||
<zan-button loading>222</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button type="primary" loading block>loading</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="24">
|
||||
<zan-button loading block></zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### button group
|
||||
|
||||
一组按钮。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div class="zan-button-group">
|
||||
<div class="button-group">
|
||||
<zan-button type="primary" size="small">确认付款</zan-button>
|
||||
<zan-button size="small">确认收货</zan-button>
|
||||
<zan-button size="small">取消订单</zan-button>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@@ -4,11 +4,15 @@ import App from './ExamplesDocsApp';
|
||||
import navConfig from './nav.config.json';
|
||||
import routes from './router.config';
|
||||
import SideNav from './components/side-nav';
|
||||
import Mobile from './components/mobile';
|
||||
import DemoBlock from './components/demo-block';
|
||||
import ZanUI from 'src/index.js';
|
||||
|
||||
import 'packages/zanui-css/src/index.css';
|
||||
|
||||
Vue.use(VueRouter);
|
||||
Vue.use(ZanUI);
|
||||
Vue.component('side-nav', SideNav);
|
||||
Vue.component('mobile', Mobile);
|
||||
Vue.component('demo-block', DemoBlock);
|
||||
|
||||
let routesConfig = routes(navConfig);
|
||||
routesConfig.push({
|
||||
|
||||
Reference in New Issue
Block a user