mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs
This commit is contained in:
cookfront
parent
019bb5c7d8
commit
76fa89a49c
@ -118,6 +118,27 @@ if (process.env.NODE_ENV === 'production') {
|
||||
slugify: slugify,
|
||||
permalink: true,
|
||||
permalinkBefore: true
|
||||
}],
|
||||
[require('markdown-it-container'), 'demo', {
|
||||
validate: function(params) {
|
||||
return params.trim().match(/^demo\s*(.*)$/);
|
||||
},
|
||||
|
||||
render: function(tokens, idx) {
|
||||
var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
|
||||
if (tokens[idx].nesting === 1) {
|
||||
var description = (m && m.length > 1) ? m[1] : '';
|
||||
var content = tokens[idx + 1].content;
|
||||
var html = convert(striptags.strip(content, ['script', 'style']));
|
||||
var script = striptags.fetch(content, 'script');
|
||||
var style = striptags.fetch(content, 'style');
|
||||
|
||||
return `<demo-block class="demo-box">
|
||||
<div class="examples" slot="examples">${html}</div>
|
||||
<div class="highlight" slot="highlight">`;
|
||||
}
|
||||
return '</div></demo-block>\n';
|
||||
}
|
||||
}]
|
||||
],
|
||||
preprocess: function(MarkdownIt, source) {
|
||||
|
||||
@ -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({
|
||||
|
||||
@ -24,6 +24,7 @@ import Step from '../packages/step/index.js';
|
||||
import ImagePreview from '../packages/image-preview/index.js';
|
||||
import Col from '../packages/col/index.js';
|
||||
import Row from '../packages/row/index.js';
|
||||
import Actionsheet from '../packages/actionsheet/index.js';
|
||||
|
||||
const install = function(Vue) {
|
||||
if (install.installed) return;
|
||||
@ -49,9 +50,9 @@ const install = function(Vue) {
|
||||
Vue.component(Badge.name, Badge);
|
||||
Vue.component(Search.name, Search);
|
||||
Vue.component(Step.name, Step);
|
||||
Vue.component(ImagePreview.name, ImagePreview);
|
||||
Vue.component(Col.name, Col);
|
||||
Vue.component(Row.name, Row);
|
||||
Vue.component(Actionsheet.name, Actionsheet);
|
||||
};
|
||||
|
||||
// auto install
|
||||
@ -87,5 +88,6 @@ module.exports = {
|
||||
Step,
|
||||
ImagePreview,
|
||||
Col,
|
||||
Row
|
||||
Row,
|
||||
Actionsheet
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user