mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-10-27 01:32:10 +08:00
add auto generate example js
This commit is contained in:
cookfront
parent
b388aeaa02
commit
6b825e0718
93
build/genExamples.js
Normal file
93
build/genExamples.js
Normal file
@ -0,0 +1,93 @@
|
||||
var markdownIt = require('markdown-it');
|
||||
var markdownItContainer = require('markdown-it-container');
|
||||
var fs = require('fs');
|
||||
var path = require('path');
|
||||
var cheerio = require('cheerio');
|
||||
var striptags = require('./strip-tags');
|
||||
var Components = require('../components.json');
|
||||
|
||||
var parser = markdownIt('default', {
|
||||
html: true
|
||||
});
|
||||
|
||||
var renderVueTemplate = function (html, componentName) {
|
||||
var $ = cheerio.load(html, {
|
||||
decodeEntities: false,
|
||||
lowerCaseAttributeNames: false,
|
||||
lowerCaseTags: false
|
||||
})
|
||||
|
||||
var output = {
|
||||
style: $.html('style'),
|
||||
script: $.html('script'),
|
||||
'example-block': $.html('example-block')
|
||||
}
|
||||
var result
|
||||
|
||||
$('style').remove()
|
||||
$('script').remove()
|
||||
|
||||
var script = '';
|
||||
if (output.script) {
|
||||
script = output.script.replace('<script>', '<script>\nimport Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);');
|
||||
} else {
|
||||
script = '<script>\nimport Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>';
|
||||
}
|
||||
|
||||
result = `<template><section class="demo-${componentName}"><h1 class="demo-title">${componentName}</h1>` + output['example-block'] + '</section></template>\n' +
|
||||
output.style + '\n' +
|
||||
script;
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
function convert(str) {
|
||||
str = str.replace(/(&#x)(\w{4});/gi, function($0) {
|
||||
return String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g, '$2'), 16));
|
||||
});
|
||||
return str;
|
||||
}
|
||||
|
||||
parser.use(markdownItContainer, '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']));
|
||||
|
||||
return `<example-block title="${description}">
|
||||
${html}
|
||||
</example-block>\n`;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
});
|
||||
|
||||
var docsDir = path.resolve(__dirname, '../docs');
|
||||
for (var item in Components) {
|
||||
var itemMdFile = `${docsDir}/examples-docs/${item}.md`;
|
||||
if (!fs.existsSync(itemMdFile)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
var itemMd = fs.readFileSync(`${docsDir}/examples-docs/${item}.md`).toString();
|
||||
var content = parser.render(itemMd);
|
||||
var result = renderVueTemplate(content, item);
|
||||
|
||||
var exampleVueName = `${docsDir}/examples/${item}.vue`;
|
||||
|
||||
if (!fs.existsSync(exampleVueName)) {
|
||||
fs.closeSync(fs.openSync(exampleVueName, 'w'));
|
||||
}
|
||||
fs.writeFileSync(exampleVueName, result, {
|
||||
encoding: 'utf8'
|
||||
});
|
||||
}
|
||||
|
||||
console.log('generate examples success!');
|
||||
|
||||
@ -64,7 +64,7 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.page-title {
|
||||
.demo-title {
|
||||
font-size: 20px;
|
||||
margin: 20px auto;
|
||||
text-align: center;
|
||||
@ -72,8 +72,8 @@ export default {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.page-sub-title {
|
||||
.demo-sub-title {
|
||||
font-size: 16px;
|
||||
padding: 10px 0;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
14
docs/components/example-block.vue
Normal file
14
docs/components/example-block.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="example-block">
|
||||
<h2 class="demo-sub-title" v-text="title"></h2>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: String
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-badge-group active-key="2">
|
||||
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
|
||||
### 禁用状态
|
||||
|
||||
:::demo
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
@ -53,7 +53,7 @@
|
||||
|
||||
只接受large, normal, small, mini四种尺寸，默认normal。
|
||||
|
||||
:::demo
|
||||
:::demo 按钮尺寸
|
||||
```html
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
@ -78,7 +78,7 @@
|
||||
|
||||
按钮默认是button标签，可以使用tag属性修改为一个a标签。
|
||||
|
||||
:::demo
|
||||
:::demo 自定义按钮标签
|
||||
```html
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
@ -92,7 +92,7 @@
|
||||
|
||||
表示loading状态
|
||||
|
||||
:::demo
|
||||
:::demo loading按钮
|
||||
```html
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
@ -109,7 +109,7 @@
|
||||
|
||||
一组按钮。
|
||||
|
||||
:::demo
|
||||
:::demo button group
|
||||
```html
|
||||
<div class="button-group">
|
||||
<zan-button type="primary" size="small">确认付款</zan-button>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
当没有底部按钮时，右侧内容会居中显示。
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
@ -18,7 +18,7 @@
|
||||
|
||||
可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
|
||||
|
||||
:::demo
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<zan-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
|
||||
@ -20,7 +20,7 @@ export default {
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" value="单元格1内容"></zan-cell>
|
||||
@ -33,7 +33,7 @@ export default {
|
||||
|
||||
传入`label`属性，属性值为描述信息的值。
|
||||
|
||||
:::demo
|
||||
:::demo 标题带描述信息
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></zan-cell>
|
||||
@ -46,7 +46,7 @@ export default {
|
||||
|
||||
传入`icon`属性。
|
||||
|
||||
:::demo
|
||||
:::demo 带图标
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-cell title="起码运动馆" icon="home"></zan-cell>
|
||||
@ -59,7 +59,7 @@ export default {
|
||||
|
||||
传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
|
||||
|
||||
:::demo
|
||||
:::demo 可点击的链接
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></zan-cell>
|
||||
@ -72,7 +72,7 @@ export default {
|
||||
|
||||
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
|
||||
|
||||
:::demo
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
|
||||
|
||||
@ -39,7 +39,7 @@ export default {
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
|
||||
@ -59,7 +59,7 @@ export default {
|
||||
|
||||
### 禁用状态
|
||||
|
||||
:::demo
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
|
||||
@ -79,7 +79,7 @@ export default {
|
||||
|
||||
### Checkbox组
|
||||
|
||||
:::demo
|
||||
:::demo Checkbox组
|
||||
```html
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox-group v-model="result">
|
||||
@ -112,7 +112,7 @@ export default {
|
||||
|
||||
### 禁用Checkbox组
|
||||
|
||||
:::demo
|
||||
:::demo 禁用Checkbox组
|
||||
```html
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox-group v-model="result" disabled>
|
||||
@ -139,7 +139,7 @@ export default {
|
||||
|
||||
### 与Cell组件一起使用
|
||||
|
||||
:::demo
|
||||
:::demo 与Cell组件一起使用
|
||||
```html
|
||||
<zan-checkbox-group v-model="result">
|
||||
<zan-cell-group>
|
||||
|
||||
@ -30,7 +30,7 @@ export default {
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-button @click="handleAlertClick">alert</zan-button>
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
根据`type`属性显示不同的输入框。
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
|
||||
@ -20,7 +20,7 @@
|
||||
|
||||
不传入`label`属性即可。
|
||||
|
||||
:::demo
|
||||
:::demo 无label的输入框
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" placeholder="请输入用户名"></zan-field>
|
||||
@ -32,7 +32,7 @@
|
||||
|
||||
监听组件的`change`事件。
|
||||
|
||||
:::demo
|
||||
:::demo 监听change事件
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="demo-loading">
|
||||
<h2 class="demo-sub-title">渐变深色spinner</h2>
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||
<div class="panel-content">
|
||||
@ -49,7 +49,7 @@
|
||||
|
||||
使用具名`slot`自定义内容。
|
||||
|
||||
:::demo
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||
<zan-card
|
||||
|
||||
@ -35,7 +35,7 @@ export default {
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
|
||||
```
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
|
||||
|
||||
@ -29,7 +29,7 @@ export default {
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="zan-radios">
|
||||
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
|
||||
@ -50,7 +50,7 @@ export default {
|
||||
|
||||
### 禁用状态
|
||||
|
||||
:::demo
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<div class="zan-radios">
|
||||
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
|
||||
@ -71,7 +71,7 @@ export default {
|
||||
|
||||
### radio组
|
||||
|
||||
:::demo
|
||||
:::demo radio组
|
||||
```html
|
||||
<div class="zan-radios">
|
||||
<zan-radio-group v-model="radio3">
|
||||
@ -94,7 +94,7 @@ export default {
|
||||
|
||||
### 与Cell组件一起使用
|
||||
|
||||
:::demo
|
||||
:::demo 与Cell组件一起使用
|
||||
```html
|
||||
<zan-radio-group v-model="radio4">
|
||||
<zan-cell-group>
|
||||
|
||||
@ -12,7 +12,7 @@ export default {
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-search placeholder="商品名称" @search="goSearch"></zan-search>
|
||||
<script>
|
||||
|
||||
@ -32,7 +32,7 @@ export default {
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
|
||||
<zan-step>买家下单</zan-step>
|
||||
@ -63,7 +63,7 @@ export default {
|
||||
|
||||
### 只显示步骤条
|
||||
|
||||
:::demo
|
||||
:::demo 只显示步骤条
|
||||
```html
|
||||
<zan-steps :active="active">
|
||||
<zan-step>买家下单</zan-step>
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="tags-container">
|
||||
<zan-tag>返现</zan-tag>
|
||||
@ -28,7 +28,7 @@
|
||||
|
||||
### 高级用法
|
||||
|
||||
:::demo
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger">返现</zan-tag>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="waterfall">
|
||||
<div
|
||||
|
||||
@ -1,18 +1,12 @@
|
||||
<template>
|
||||
<div class="page-badge">
|
||||
<h1 class="page-title">Badge</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<zan-badge-group active-key="2">
|
||||
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
|
||||
<zan-badge mark="1" title="花式寿司" info="99"></zan-badge>
|
||||
<zan-badge mark="2" title="火炽寿司"></zan-badge>
|
||||
<zan-badge mark="3" title="手握寿司" info="199"></zan-badge>
|
||||
</zan-badge-group>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.page-badge {
|
||||
padding: 0 15px;
|
||||
}
|
||||
</style>
|
||||
<template><section class="demo-badge"><h1 class="demo-title">badge</h1><example-block title="基础用法">
|
||||
<zan-badge-group active-key="2">
|
||||
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
|
||||
<zan-badge mark="1" title="花式寿司" info="99"></zan-badge>
|
||||
<zan-badge mark="2" title="火炽寿司"></zan-badge>
|
||||
<zan-badge mark="3" title="手握寿司" info="199"></zan-badge>
|
||||
</zan-badge-group>
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@ -1,82 +1,81 @@
|
||||
<template>
|
||||
<div class="page-button">
|
||||
<h1 class="page-title">Button</h1>
|
||||
<h2 class="page-sub-title">按钮功能</h2>
|
||||
<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>
|
||||
<template><section class="demo-button"><h1 class="demo-title">button</h1><example-block title="按钮功能">
|
||||
<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>
|
||||
|
||||
<h2 class="page-sub-title">禁用状态</h2>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button disabled block>diabled</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
</example-block><example-block title="禁用状态">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button disabled block="">diabled</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
|
||||
<h2 class="page-sub-title">按钮尺寸</h2>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="large">large</zan-button>
|
||||
</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>
|
||||
</example-block><example-block title="按钮尺寸">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="large">large</zan-button>
|
||||
</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>
|
||||
|
||||
<h2 class="page-sub-title">自定义按钮标签</h2>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
</example-block><example-block title="自定义按钮标签">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
|
||||
<h2 class="page-sub-title">loading</h2>
|
||||
<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>
|
||||
</example-block><example-block title="loading按钮">
|
||||
<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>
|
||||
|
||||
<h2 class="page-sub-title">button group</h2>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
</example-block><example-block title="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>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace page {
|
||||
@b button {
|
||||
@component-namespace demo {
|
||||
@b button {
|
||||
.zan-row {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.zan-col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.button-group {
|
||||
font-size: 0;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
@component-namespace zan {
|
||||
@b col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.button-group {
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@ -1,37 +1,24 @@
|
||||
<template>
|
||||
<div class="page-card">
|
||||
<h1 class="page-title">Card</h1>
|
||||
<template><section class="demo-card"><h1 class="demo-title">card</h1><example-block title="基础用法">
|
||||
<zan-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="描述" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
</zan-card>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<zan-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
desc="描述"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
</zan-card>
|
||||
|
||||
<h2 class="page-sub-title">高级用法</h2>
|
||||
<zan-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
desc="商品SKU1，商品SKU2"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="zan-card__row" slot="title">
|
||||
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="zan-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="zan-card__row" slot="desc">
|
||||
<h4 class="zan-card__desc">商品sku</h4>
|
||||
<span class="zan-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="zan-card__footer" slot="footer">
|
||||
<zan-button size="mini">按钮一</zan-button>
|
||||
<zan-button size="mini">按钮二</zan-button>
|
||||
</div>
|
||||
</zan-card>
|
||||
</example-block><example-block title="高级用法">
|
||||
<zan-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="商品SKU1，商品SKU2" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="zan-card__row" slot="title">
|
||||
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="zan-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="zan-card__row" slot="desc">
|
||||
<h4 class="zan-card__desc">商品sku</h4>
|
||||
<span class="zan-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="zan-card__footer" slot="footer">
|
||||
<zan-button size="mini">按钮一</zan-button>
|
||||
<zan-button size="mini">按钮二</zan-button>
|
||||
</div>
|
||||
</zan-card>
|
||||
|
||||
<style>
|
||||
.page-sub-title {
|
||||
padding: 15px;
|
||||
}
|
||||
</style>
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@ -1,45 +1,48 @@
|
||||
<template>
|
||||
<div class="page-cell">
|
||||
<h1 class="page-title">Cell</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" value="单元格1内容"></zan-cell>
|
||||
<zan-cell title="单元格2" value="单元格2内容"></zan-cell>
|
||||
</zan-cell-group>
|
||||
<template><section class="demo-cell"><h1 class="demo-title">cell</h1><example-block title="基础用法">
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" value="单元格1内容"></zan-cell>
|
||||
<zan-cell title="单元格2" value="单元格2内容"></zan-cell>
|
||||
</zan-cell-group>
|
||||
|
||||
<h2 class="page-sub-title">标题带描述信息</h2>
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></zan-cell>
|
||||
<zan-cell title="单元格2" label="描述信息"></zan-cell>
|
||||
</zan-cell-group>
|
||||
</example-block><example-block title="标题带描述信息">
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" label="描述信息" is-link="" url="javascript:void(0)" @click="handleClick"></zan-cell>
|
||||
<zan-cell title="单元格2" label="描述信息"></zan-cell>
|
||||
</zan-cell-group>
|
||||
|
||||
<h2 class="page-sub-title">带图标</h2>
|
||||
<zan-cell-group>
|
||||
<zan-cell title="起码运动馆" icon="home"></zan-cell>
|
||||
<zan-cell title="线下门店" icon="location"></zan-cell>
|
||||
</zan-cell-group>
|
||||
</example-block><example-block title="带图标">
|
||||
<zan-cell-group>
|
||||
<zan-cell title="起码运动馆" icon="home"></zan-cell>
|
||||
<zan-cell title="线下门店" icon="location"></zan-cell>
|
||||
</zan-cell-group>
|
||||
|
||||
<h2 class="page-sub-title">可点击的链接</h2>
|
||||
<zan-cell-group>
|
||||
<zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></zan-cell>
|
||||
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
|
||||
</zan-cell-group>
|
||||
</example-block><example-block title="可点击的链接">
|
||||
<zan-cell-group>
|
||||
<zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link=""></zan-cell>
|
||||
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></zan-cell>
|
||||
</zan-cell-group>
|
||||
|
||||
<h2 class="page-sub-title">高级用法</h2>
|
||||
<zan-cell-group>
|
||||
<zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
|
||||
<template slot="title">
|
||||
<span class="zan-cell-text">起码运动馆</span>
|
||||
<img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
|
||||
</template>
|
||||
</zan-cell>
|
||||
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
|
||||
</zan-cell-group>
|
||||
</div>
|
||||
</template>
|
||||
</example-block><example-block title="高级用法">
|
||||
<zan-cell-group>
|
||||
<zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link="">
|
||||
<template slot="title">
|
||||
<span class="zan-cell-text">起码运动馆</span>
|
||||
<img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
|
||||
</template>
|
||||
</zan-cell>
|
||||
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></zan-cell>
|
||||
</zan-cell-group>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
.official-img {
|
||||
width: 31px;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
methods: {
|
||||
handleClick() {
|
||||
@ -47,16 +50,4 @@ export default {
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.official-img {
|
||||
width: 31px;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.page-sub-title {
|
||||
padding: 25px 15px;
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
@ -1,38 +1,62 @@
|
||||
<template>
|
||||
<div class="page-checkbox">
|
||||
<h1 class="page-title">Checkbox</h1>
|
||||
<template><section class="demo-checkbox"><h1 class="demo-title">checkbox</h1><example-block title="基础用法">
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-demo-wrapper">
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
|
||||
|
||||
<h2 class="page-sub-title">禁用状态</h2>
|
||||
<zan-checkbox v-model="checkbox2" disabled>复选框2</zan-checkbox>
|
||||
|
||||
<h2 class="page-sub-title">Checkbox组</h2>
|
||||
<zan-checkbox-group v-model="result">
|
||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-checkbox-group>
|
||||
</example-block><example-block title="禁用状态">
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
|
||||
</div>
|
||||
|
||||
<h2 class="page-sub-title">禁用Checkbox组</h2>
|
||||
<zan-checkbox-group v-model="result" disabled>
|
||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-checkbox-group>
|
||||
|
||||
<h2 class="page-sub-title">与Cell组件一起使用</h2>
|
||||
</div>
|
||||
|
||||
<zan-checkbox-group v-model="result">
|
||||
<zan-cell-group>
|
||||
<zan-cell v-for="item in list">
|
||||
<zan-checkbox :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-cell>
|
||||
</zan-cell-group>
|
||||
</zan-checkbox-group>
|
||||
</div>
|
||||
</template>
|
||||
</example-block><example-block title="Checkbox组">
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox-group v-model="result">
|
||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-checkbox-group>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="禁用Checkbox组">
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox-group v-model="result" disabled>
|
||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-checkbox-group>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="与Cell组件一起使用">
|
||||
<zan-checkbox-group v-model="result">
|
||||
<zan-cell-group>
|
||||
<zan-cell v-for="item in list">
|
||||
<zan-checkbox :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-cell>
|
||||
</zan-cell-group>
|
||||
</zan-checkbox-group>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b checkbox {
|
||||
.zan-checkbox-wrapper {
|
||||
padding: 0 20px;
|
||||
|
||||
.zan-checkbox {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -53,14 +77,4 @@ export default {
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.checkbox-demo-wrapper {
|
||||
padding: 0 15px;
|
||||
|
||||
.zan-checkbox {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
@ -1,19 +1,14 @@
|
||||
<template>
|
||||
<div class="page-dialog">
|
||||
<h1 class="page-title">Dialog</h1>
|
||||
<template><section class="demo-dialog"><h1 class="demo-title">dialog</h1><example-block title="基础用法">
|
||||
<zan-button @click="handleAlertClick">alert</zan-button>
|
||||
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="handleAlertClick">点击我打开alert提示框</zan-button>
|
||||
</div>
|
||||
<zan-button @click="handleConfirmClick">confirm</zan-button>
|
||||
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="handleConfirmClick">点击我打开confirm提示框</zan-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import { Dialog } from 'src/index';
|
||||
|
||||
export default {
|
||||
@ -39,16 +34,4 @@ export default {
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@component-namespace page {
|
||||
@b dialog {
|
||||
padding: 0 15px;
|
||||
|
||||
.zan-button-1 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
@ -1,44 +1,21 @@
|
||||
<template>
|
||||
<div class="page-field">
|
||||
<h1 class="page-title">Field</h1>
|
||||
<template><section class="demo-field"><h1 class="demo-title">field</h1><example-block title="基础用法">
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
|
||||
<zan-field type="password" label="密码：" placeholder="请输入密码"></zan-field>
|
||||
<zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
|
||||
</zan-cell-group>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
|
||||
<zan-field type="password" label="密码：" placeholder="请输入密码"></zan-field>
|
||||
<zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
|
||||
</zan-cell-group>
|
||||
</example-block><example-block title="无label的输入框">
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" placeholder="请输入用户名"></zan-field>
|
||||
</zan-cell-group>
|
||||
|
||||
<h2 class="page-sub-title">无label的输入框</h2>
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" placeholder="请输入用户名"></zan-field>
|
||||
</zan-cell-group>
|
||||
</example-block><example-block title="监听change事件">
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
|
||||
</zan-cell-group>
|
||||
|
||||
<h2 class="page-sub-title">监听change事件</h2>
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
|
||||
</zan-cell-group>
|
||||
</div>
|
||||
</template>
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: ''
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleChange() {
|
||||
console.log(this.name);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.page-sub-title {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
</style>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@ -1,30 +1,4 @@
|
||||
<template>
|
||||
<div class="page-image-pewview">
|
||||
<h1 class="page-title">Image Preview</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<zan-button @click="previewImage">click me</zan-button>
|
||||
<zan-button @click="previewImage2">click me</zan-button>
|
||||
</div>
|
||||
</template>
|
||||
<template><section class="demo-image-preview"><h1 class="demo-title">image-preview</h1></section></template>
|
||||
|
||||
<script>
|
||||
import { ImagePreview } from 'src/index';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
preview: true
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
previewImage() {
|
||||
ImagePreview('https://img.yzcdn.cn/upload_files/2017/03/03/FjVBWm29JBob2gj9RC86MOD38RNf.jpg');
|
||||
},
|
||||
previewImage2() {
|
||||
ImagePreview('https://img.yzcdn.cn/upload_files/2017/03/03/FseigsLj7DceULRKWhXsIsrkq1vT.jpg');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@ -1,28 +1,26 @@
|
||||
<template>
|
||||
<div class="page-loading">
|
||||
<h1 class="page-title">Loading</h1>
|
||||
<h2 class="page-sub-title">渐变深色spinner</h2>
|
||||
<div class="page-loading__example">
|
||||
<zan-loading class="some-customized-class"></zan-loading>
|
||||
</div>
|
||||
<h2 class="page-sub-title">渐变浅色spinner</h2>
|
||||
<div class="page-loading__example page-loading__example--with-bg">
|
||||
<zan-loading class="some-customized-class" :color="'white'"></zan-loading>
|
||||
</div>
|
||||
<h2 class="page-sub-title">单色spinner</h2>
|
||||
<div class="page-loading__example">
|
||||
<zan-loading class="some-customized-class" :type="'circle'" :color="'white'"></zan-loading>
|
||||
</div>
|
||||
<h2 class="page-sub-title">单色spinner</h2>
|
||||
<div class="page-loading__example">
|
||||
<zan-loading class="some-customized-class" :type="'circle'" :color="'black'"></zan-loading>
|
||||
</div>
|
||||
<template><section class="demo-loading"><h1 class="demo-title">loading</h1><example-block title="基础用法">
|
||||
<div class="demo-loading">
|
||||
<h2 class="demo-sub-title">渐变深色spinner</h2>
|
||||
<div class="demo-loading__example">
|
||||
<zan-loading class="some-customized-class"></zan-loading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<h2 class="demo-sub-title">渐变浅色spinner</h2>
|
||||
<div class="demo-loading__example demo-loading__example--with-bg">
|
||||
<zan-loading class="some-customized-class" :color="'white'"></zan-loading>
|
||||
</div>
|
||||
<h2 class="demo-sub-title">单色spinner</h2>
|
||||
<div class="demo-loading__example">
|
||||
<zan-loading class="some-customized-class" :type="'circle'" :color="'white'"></zan-loading>
|
||||
</div>
|
||||
<h2 class="demo-sub-title">单色spinner</h2>
|
||||
<div class="demo-loading__example">
|
||||
<zan-loading class="some-customized-class" :type="'circle'" :color="'black'"></zan-loading>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
.page-loading__example{
|
||||
.demo-loading__example{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 20px;
|
||||
@ -31,11 +29,13 @@
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.page-loading__example--with-bg {
|
||||
.demo-loading__example--with-bg {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.page-loading {
|
||||
.demo-loading {
|
||||
padding: 0 20px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@ -1,80 +1,65 @@
|
||||
<template>
|
||||
<div class="page-panel">
|
||||
<h1 class="page-title">Panel</h1>
|
||||
<template><section class="demo-panel"><h1 class="demo-title">panel</h1><example-block title="基础用法">
|
||||
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||
<div class="panel-content">
|
||||
panel内容
|
||||
</div>
|
||||
</zan-panel>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||
<zan-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
desc="商品SKU1，商品SKU2"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="zan-card__row" slot="title">
|
||||
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="zan-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="zan-card__row" slot="desc">
|
||||
<h4 class="zan-card__desc">商品sku</h4>
|
||||
<span class="zan-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="zan-card__footer" slot="footer">
|
||||
<zan-button size="mini">按钮一</zan-button>
|
||||
<zan-button size="mini">按钮二</zan-button>
|
||||
</div>
|
||||
</zan-card>
|
||||
<div class="zan-panel-sum">
|
||||
合计：<span>¥ 1999.90</span>
|
||||
</div>
|
||||
</zan-panel>
|
||||
|
||||
<h2 class="page-sub-title">高级用法</h2>
|
||||
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||
<zan-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
desc="商品SKU1，商品SKU2"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="zan-card__row" slot="title">
|
||||
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="zan-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="zan-card__row" slot="desc">
|
||||
<h4 class="zan-card__desc">商品sku</h4>
|
||||
<span class="zan-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="zan-card__footer" slot="footer">
|
||||
<zan-button size="mini">按钮一</zan-button>
|
||||
<zan-button size="mini">按钮二</zan-button>
|
||||
</div>
|
||||
</zan-card>
|
||||
<div class="zan-panel-sum">
|
||||
合计：<span>¥ 1999.90</span>
|
||||
</div>
|
||||
<div class="zan-panel-buttons" slot="footer">
|
||||
<zan-button size="small">按钮一</zan-button>
|
||||
<zan-button size="small" type="danger">按钮二</zan-button>
|
||||
</div>
|
||||
</zan-panel>
|
||||
</div>
|
||||
</template>
|
||||
</example-block><example-block title="高级用法">
|
||||
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||
<zan-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="商品SKU1，商品SKU2" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="zan-card__row" slot="title">
|
||||
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="zan-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="zan-card__row" slot="desc">
|
||||
<h4 class="zan-card__desc">商品sku</h4>
|
||||
<span class="zan-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="zan-card__footer" slot="footer">
|
||||
<zan-button size="mini">按钮一</zan-button>
|
||||
<zan-button size="mini">按钮二</zan-button>
|
||||
</div>
|
||||
</zan-card>
|
||||
<div class="zan-panel-sum">
|
||||
合计：<span>¥ 1999.90</span>
|
||||
</div>
|
||||
<div class="zan-panel-buttons" slot="footer">
|
||||
<zan-button size="small">按钮一</zan-button>
|
||||
<zan-button size="small" type="danger">按钮二</zan-button>
|
||||
</div>
|
||||
</zan-panel>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
.zan-panel-sum {
|
||||
background: #fff;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
line-height: 30px;
|
||||
padding-right: 15px;
|
||||
@component-namespace demo {
|
||||
@b panel {
|
||||
.zan-panel-sum {
|
||||
background: #fff;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
line-height: 30px;
|
||||
padding-right: 15px;
|
||||
|
||||
span {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
span {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.zan-panel-buttons {
|
||||
text-align: right;
|
||||
.zan-panel-buttons {
|
||||
text-align: right;
|
||||
|
||||
.zan-button {
|
||||
margin-left: 5px;
|
||||
.zan-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@ -1,13 +1,10 @@
|
||||
<template>
|
||||
<div class="page-picker">
|
||||
<h1 class="page-title">Picker</h1>
|
||||
<template><section class="demo-picker"><h1 class="demo-title">picker</h1><example-block title="基础用法">
|
||||
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
|
||||
</div>
|
||||
</template>
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
const citys = {
|
||||
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
|
||||
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
|
||||
@ -36,4 +33,4 @@ export default {
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
@ -1,93 +1,35 @@
|
||||
<template>
|
||||
<div class="page-popup">
|
||||
<h1 class="page-title">Popup</h1>
|
||||
<template><section class="demo-popup"><h1 class="demo-title">popup</h1><example-block title="基础用法">
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
|
||||
</div>
|
||||
<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
|
||||
xxxx
|
||||
</zan-popup>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
|
||||
</div>
|
||||
<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
|
||||
xxxx
|
||||
</zan-popup>
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="popupShow2 = true">从上方方弹出popup</zan-button>
|
||||
</div>
|
||||
<zan-popup v-model="popupShow2" position="top" class="zan-popup-2" :overlay="false">
|
||||
更新成功
|
||||
</zan-popup>
|
||||
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="popupShow2 = true">从上方方弹出popup</zan-button>
|
||||
</div>
|
||||
<zan-popup v-model="popupShow2" position="top" class="zan-popup-2" :overlay="false">
|
||||
更新成功
|
||||
</zan-popup>
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="popupShow3 = true">从右方弹出popup</zan-button>
|
||||
</div>
|
||||
<zan-popup v-model="popupShow3" position="right" class="zan-popup-3" :overlay="false">
|
||||
<zan-button @click.native="popupShow3 = false">关闭 popup</zan-button>
|
||||
</zan-popup>
|
||||
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="popupShow3 = true">从右方弹出popup</zan-button>
|
||||
</div>
|
||||
<zan-popup v-model="popupShow3" position="right" class="zan-popup-3" :overlay="false">
|
||||
<zan-button @click.native="popupShow3 = false">关闭 popup</zan-button>
|
||||
</zan-popup>
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
|
||||
</div>
|
||||
<zan-popup v-model="popupShow4" transition="popup-fade" class="zan-popup-4">
|
||||
一些内容
|
||||
</zan-popup>
|
||||
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
|
||||
</div>
|
||||
<zan-popup v-model="popupShow4" transition="popup-fade" class="zan-popup-4">
|
||||
一些内容
|
||||
</zan-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
popupShow1: false,
|
||||
popupShow2: false,
|
||||
popupShow3: false,
|
||||
popupShow4: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
popupShow2(val) {
|
||||
if (val) {
|
||||
setTimeout(() => {
|
||||
this.popupShow2 = false;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.zan-popup-1 {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.zan-popup-2 {
|
||||
width: 100%;
|
||||
line-height: 44px;
|
||||
background-color: rgba(0, 0, 0, 0.701961);
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.zan-popup-3 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.zan-popup-4 {
|
||||
width: 50%;
|
||||
height: 200px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.page-popup .zan-button-1 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.page-sub-title {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
</style>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@ -1,41 +1,55 @@
|
||||
<template>
|
||||
<div class="page-radio">
|
||||
<h1 class="page-title">Radio</h1>
|
||||
<template><section class="demo-radio"><h1 class="demo-title">radio</h1><example-block title="基础用法">
|
||||
<div class="zan-radios">
|
||||
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
|
||||
<zan-radio name="2" v-model="radio1">单选框2</zan-radio>
|
||||
</div>
|
||||
|
||||
<div class="radio-demo-wrapper">
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
|
||||
<zan-radio name="2" v-model="radio1">单选框2</zan-radio>
|
||||
|
||||
<h2 class="page-sub-title">禁用状态</h2>
|
||||
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
|
||||
<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
|
||||
|
||||
<h2 class="page-sub-title">radio组</h2>
|
||||
<zan-radio-group v-model="radio3">
|
||||
<zan-radio name="1">单选框1</zan-radio>
|
||||
<zan-radio name="2">单选框2</zan-radio>
|
||||
</zan-radio-group>
|
||||
</example-block><example-block title="禁用状态">
|
||||
<div class="zan-radios">
|
||||
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
|
||||
<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
|
||||
</div>
|
||||
|
||||
<h2 class="page-sub-title">禁用radio组</h2>
|
||||
<zan-radio-group v-model="radio3" disabled>
|
||||
<zan-radio name="1">单选框1</zan-radio>
|
||||
<zan-radio name="2">单选框2</zan-radio>
|
||||
</zan-radio-group>
|
||||
|
||||
<h2 class="page-sub-title">与Cell组件一起使用</h2>
|
||||
</div>
|
||||
|
||||
<zan-radio-group v-model="radio4">
|
||||
<zan-cell-group>
|
||||
<zan-cell><zan-radio name="1">单选框1</zan-radio></zan-cell>
|
||||
<zan-cell><zan-radio name="2">单选框2</zan-radio></zan-cell>
|
||||
</zan-cell-group>
|
||||
</zan-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
</example-block><example-block title="radio组">
|
||||
<div class="zan-radios">
|
||||
<zan-radio-group v-model="radio3">
|
||||
<zan-radio name="1">单选框1</zan-radio>
|
||||
<zan-radio name="2">单选框2</zan-radio>
|
||||
</zan-radio-group>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="与Cell组件一起使用">
|
||||
<zan-radio-group v-model="radio4">
|
||||
<zan-cell-group>
|
||||
<zan-cell><zan-radio name="1">单选框1</zan-radio></zan-cell>
|
||||
<zan-cell><zan-radio name="2">单选框2</zan-radio></zan-cell>
|
||||
</zan-cell-group>
|
||||
</zan-radio-group>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b radio {
|
||||
.zan-radios {
|
||||
padding: 0 20px;
|
||||
|
||||
.zan-radio {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -46,14 +60,4 @@ export default {
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.radio-demo-wrapper {
|
||||
padding: 0 15px;
|
||||
|
||||
.zan-radio {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
@ -1,4 +1,11 @@
|
||||
<template><section class="demo-search"><h1 class="demo-title">search</h1><example-block title="基础用法">
|
||||
<zan-search placeholder="商品名称" @search="goSearch"></zan-search>
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
methods: {
|
||||
goSearch(value) {
|
||||
@ -6,20 +13,4 @@ export default {
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-search">
|
||||
<h1 class="page-title">Search</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<zan-search placeholder="商品名称" @search="goSearch">
|
||||
</zan-search>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.page-badge {
|
||||
padding: 0 15px;
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
@ -1,27 +1,39 @@
|
||||
<template>
|
||||
<div class="page-steps">
|
||||
<h1 class="page-title">Steps</h1>
|
||||
<template><section class="demo-steps"><h1 class="demo-title">steps</h1><example-block title="基础用法">
|
||||
<zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
|
||||
<zan-step>买家下单</zan-step>
|
||||
<zan-step>商家接单</zan-step>
|
||||
<zan-step>买家提货</zan-step>
|
||||
<zan-step>交易完成</zan-step>
|
||||
</zan-steps>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
|
||||
<zan-step>买家下单</zan-step>
|
||||
<zan-step>商家接单</zan-step>
|
||||
<zan-step>买家提货</zan-step>
|
||||
<zan-step>交易完成</zan-step>
|
||||
</zan-steps>
|
||||
<zan-button @click="nextStep">下一步</zan-button>
|
||||
<zan-button @click="nextStep">下一步</zan-button>
|
||||
|
||||
<h2 class="page-sub-title">只显示步骤条</h2>
|
||||
<zan-steps :active="active">
|
||||
<zan-step>买家下单</zan-step>
|
||||
<zan-step>商家接单</zan-step>
|
||||
<zan-step>买家提货</zan-step>
|
||||
<zan-step>交易完成</zan-step>
|
||||
</zan-steps>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
</example-block><example-block title="只显示步骤条">
|
||||
<zan-steps :active="active">
|
||||
<zan-step>买家下单</zan-step>
|
||||
<zan-step>商家接单</zan-step>
|
||||
<zan-step>买家提货</zan-step>
|
||||
<zan-step>交易完成</zan-step>
|
||||
</zan-steps>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b steps {
|
||||
.steps-success {
|
||||
color: #06bf04;
|
||||
}
|
||||
|
||||
.zan-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -35,20 +47,4 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.steps-success {
|
||||
color: #06bf04;
|
||||
}
|
||||
|
||||
.page-steps {
|
||||
.page-sub-title {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.zan-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
@ -1,67 +1,44 @@
|
||||
<template>
|
||||
<div class="page-switch">
|
||||
<h1 class="page-title">Switch</h1>
|
||||
<template><section class="demo-switch"><h1 class="demo-title">switch</h1><example-block title="基础用法">
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
|
||||
<div class="demo-switch__text">{{switchStateText}}</div>
|
||||
</div>
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
|
||||
<div class="demo-switch__text">ON, DISABLED</div>
|
||||
</div>
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
|
||||
<div class="demo-switch__text">OFF, DISABLED</div>
|
||||
</div>
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
|
||||
<div class="demo-switch__text">ON, LOADING</div>
|
||||
</div>
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
|
||||
<div class="demo-switch__text">OFF, LOADING</div>
|
||||
</div>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<div class="page-switch">
|
||||
<div class="page-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
|
||||
<div class="page-switch__text">{{switchStateText}}</div>
|
||||
</div>
|
||||
<div class="page-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
|
||||
<div class="page-switch__text">ON, DISABLED</div>
|
||||
</div>
|
||||
<div class="page-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
|
||||
<div class="page-switch__text">OFF, DISABLED</div>
|
||||
</div>
|
||||
<div class="page-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
|
||||
<div class="page-switch__text">ON, LOADING</div>
|
||||
</div>
|
||||
<div class="page-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
|
||||
<div class="page-switch__text">OFF, LOADING</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchState: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
switchStateText() {
|
||||
return this.switchState ? 'ON' : 'OFF';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateState(newState) {
|
||||
this.switchState = newState;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace page {
|
||||
@component switch {
|
||||
@component-namespace demo {
|
||||
@b switch {
|
||||
padding: 0 15px 15px;
|
||||
|
||||
@descendent wrapper {
|
||||
@e wrapper {
|
||||
width: 33.33%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@descendent text {
|
||||
@e text {
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@ -1,47 +1,33 @@
|
||||
<template>
|
||||
<div class="page-cell">
|
||||
<h1 class="page-title">Tag</h1>
|
||||
<template><section class="demo-tag"><h1 class="demo-title">tag</h1><example-block title="基础用法">
|
||||
<div class="tags-container">
|
||||
<zan-tag>返现</zan-tag>
|
||||
<zan-tag :plain="true">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger">返现</zan-tag>
|
||||
<zan-tag type="danger">四字标签</zan-tag>
|
||||
<zan-tag type="danger">一</zan-tag>
|
||||
</div>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<div>
|
||||
<div class="tags-container">
|
||||
<zan-tag>返现</zan-tag>
|
||||
<zan-tag :plain="true">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger">返现</zan-tag>
|
||||
<zan-tag type="danger">四字标签</zan-tag>
|
||||
<zan-tag type="danger">一</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger">返现</zan-tag>
|
||||
<zan-tag :plain="true" type="danger">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="primary">返现</zan-tag>
|
||||
<zan-tag :plain="true" type="primary">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="success">返现</zan-tag>
|
||||
<zan-tag :plain="true" type="success">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger" :mark="true">返现</zan-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
</example-block><example-block title="高级用法">
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger">返现</zan-tag>
|
||||
<zan-tag :plain="true" type="danger">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="primary">返现</zan-tag>
|
||||
<zan-tag :plain="true" type="primary">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="success">返现</zan-tag>
|
||||
<zan-tag :plain="true" type="success">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger" :mark="true">返现</zan-tag>
|
||||
</div>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
.page-sub-title {
|
||||
padding: 25px 15px;
|
||||
}
|
||||
.tags-container {
|
||||
padding: 5px 15px;
|
||||
|
||||
@ -50,3 +36,5 @@ export default {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@ -1,64 +1,18 @@
|
||||
<template>
|
||||
<div class="page-card">
|
||||
<h1 class="page-title">Waterfall</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<div>
|
||||
<div
|
||||
v-waterfall-lower="loadMore"
|
||||
v-waterfall-upper="loadMoreUpper"
|
||||
waterfall-disabled="isWaterfallDisabled"
|
||||
waterfall-offset="400"
|
||||
>
|
||||
<div v-for="item in list" class="zan-cell" style="text-align: center;">{{ item }}</div>
|
||||
<!-- <zan-loading v-if="loading" style="text-align: center;"></zan-loading> -->
|
||||
<div style="text-align: center;">loading</div>
|
||||
</div>
|
||||
<template><section class="demo-waterfall"><h1 class="demo-title">waterfall</h1><example-block title="基础用法">
|
||||
<div class="waterfall">
|
||||
<div v-waterfall-lower="loadMore" v-waterfall-upper="loadMoreUpper" waterfall-disabled="isWaterfallDisabled" waterfall-offset="400">
|
||||
<div class="waterfall-item" v-for="item in list" style="text-align: center;">
|
||||
{{ item }}
|
||||
</div>
|
||||
<div v-if="loading" style="text-align: center;">
|
||||
loading
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [1, 2, 3, 4, 5],
|
||||
loading: false,
|
||||
finished: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loadMore() {
|
||||
if (this.list.length >= 200) {
|
||||
this.finished = true;
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
let lastNumber = this.list[this.list.length - 1];
|
||||
for (let i = 0; i < 5; i++) {
|
||||
lastNumber += 1;
|
||||
this.list.push(lastNumber);
|
||||
}
|
||||
this.loading = false;
|
||||
}, 2500);
|
||||
},
|
||||
loadMoreUpper() {
|
||||
if (this.list[0] < 0) return;
|
||||
this.list.unshift(-1);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isWaterfallDisabled: function() {
|
||||
return this.loading || this.finished;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.page-sub-title {
|
||||
padding: 15px;
|
||||
}
|
||||
</style>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
Loading…
x
Reference in New Issue
Block a user