mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +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;
|
font-size: 20px;
|
||||||
margin: 20px auto;
|
margin: 20px auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -72,8 +72,8 @@ export default {
|
|||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-sub-title {
|
.demo-sub-title {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
padding: 10px 0;
|
padding: 10px 15px;
|
||||||
}
|
}
|
||||||
</style>
|
</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
|
```html
|
||||||
<zan-badge-group active-key="2">
|
<zan-badge-group active-key="2">
|
||||||
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
|
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
|
||||||
|
|||||||
@ -39,7 +39,7 @@
|
|||||||
|
|
||||||
### 禁用状态
|
### 禁用状态
|
||||||
|
|
||||||
:::demo
|
:::demo 禁用状态
|
||||||
```html
|
```html
|
||||||
<zan-row>
|
<zan-row>
|
||||||
<zan-col span="24">
|
<zan-col span="24">
|
||||||
@ -53,7 +53,7 @@
|
|||||||
|
|
||||||
只接受large, normal, small, mini四种尺寸，默认normal。
|
只接受large, normal, small, mini四种尺寸，默认normal。
|
||||||
|
|
||||||
:::demo
|
:::demo 按钮尺寸
|
||||||
```html
|
```html
|
||||||
<zan-row>
|
<zan-row>
|
||||||
<zan-col span="24">
|
<zan-col span="24">
|
||||||
@ -78,7 +78,7 @@
|
|||||||
|
|
||||||
按钮默认是button标签，可以使用tag属性修改为一个a标签。
|
按钮默认是button标签，可以使用tag属性修改为一个a标签。
|
||||||
|
|
||||||
:::demo
|
:::demo 自定义按钮标签
|
||||||
```html
|
```html
|
||||||
<zan-row>
|
<zan-row>
|
||||||
<zan-col span="24">
|
<zan-col span="24">
|
||||||
@ -92,7 +92,7 @@
|
|||||||
|
|
||||||
表示loading状态
|
表示loading状态
|
||||||
|
|
||||||
:::demo
|
:::demo loading按钮
|
||||||
```html
|
```html
|
||||||
<zan-row>
|
<zan-row>
|
||||||
<zan-col span="24">
|
<zan-col span="24">
|
||||||
@ -109,7 +109,7 @@
|
|||||||
|
|
||||||
一组按钮。
|
一组按钮。
|
||||||
|
|
||||||
:::demo
|
:::demo button group
|
||||||
```html
|
```html
|
||||||
<div class="button-group">
|
<div class="button-group">
|
||||||
<zan-button type="primary" size="small">确认付款</zan-button>
|
<zan-button type="primary" size="small">确认付款</zan-button>
|
||||||
|
|||||||
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
当没有底部按钮时，右侧内容会居中显示。
|
当没有底部按钮时，右侧内容会居中显示。
|
||||||
|
|
||||||
:::demo
|
:::demo 基础用法
|
||||||
```html
|
```html
|
||||||
<zan-card
|
<zan-card
|
||||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||||
@ -18,7 +18,7 @@
|
|||||||
|
|
||||||
可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
|
可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
|
||||||
|
|
||||||
:::demo
|
:::demo 高级用法
|
||||||
```html
|
```html
|
||||||
<zan-card
|
<zan-card
|
||||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||||
|
|||||||
@ -20,7 +20,7 @@ export default {
|
|||||||
|
|
||||||
### 基础用法
|
### 基础用法
|
||||||
|
|
||||||
:::demo
|
:::demo 基础用法
|
||||||
```html
|
```html
|
||||||
<zan-cell-group>
|
<zan-cell-group>
|
||||||
<zan-cell title="单元格1" value="单元格1内容"></zan-cell>
|
<zan-cell title="单元格1" value="单元格1内容"></zan-cell>
|
||||||
@ -33,7 +33,7 @@ export default {
|
|||||||
|
|
||||||
传入`label`属性，属性值为描述信息的值。
|
传入`label`属性，属性值为描述信息的值。
|
||||||
|
|
||||||
:::demo
|
:::demo 标题带描述信息
|
||||||
```html
|
```html
|
||||||
<zan-cell-group>
|
<zan-cell-group>
|
||||||
<zan-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></zan-cell>
|
<zan-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></zan-cell>
|
||||||
@ -46,7 +46,7 @@ export default {
|
|||||||
|
|
||||||
传入`icon`属性。
|
传入`icon`属性。
|
||||||
|
|
||||||
:::demo
|
:::demo 带图标
|
||||||
```html
|
```html
|
||||||
<zan-cell-group>
|
<zan-cell-group>
|
||||||
<zan-cell title="起码运动馆" icon="home"></zan-cell>
|
<zan-cell title="起码运动馆" icon="home"></zan-cell>
|
||||||
@ -59,7 +59,7 @@ export default {
|
|||||||
|
|
||||||
传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
|
传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
|
||||||
|
|
||||||
:::demo
|
:::demo 可点击的链接
|
||||||
```html
|
```html
|
||||||
<zan-cell-group>
|
<zan-cell-group>
|
||||||
<zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></zan-cell>
|
<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`。
|
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
|
||||||
|
|
||||||
:::demo
|
:::demo 高级用法
|
||||||
```html
|
```html
|
||||||
<zan-cell-group>
|
<zan-cell-group>
|
||||||
<zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
|
<zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
|
||||||
|
|||||||
@ -39,7 +39,7 @@ export default {
|
|||||||
|
|
||||||
### 基础用法
|
### 基础用法
|
||||||
|
|
||||||
:::demo
|
:::demo 基础用法
|
||||||
```html
|
```html
|
||||||
<div class="zan-checkbox-wrapper">
|
<div class="zan-checkbox-wrapper">
|
||||||
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
|
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
|
||||||
@ -59,7 +59,7 @@ export default {
|
|||||||
|
|
||||||
### 禁用状态
|
### 禁用状态
|
||||||
|
|
||||||
:::demo
|
:::demo 禁用状态
|
||||||
```html
|
```html
|
||||||
<div class="zan-checkbox-wrapper">
|
<div class="zan-checkbox-wrapper">
|
||||||
<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
|
<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
|
||||||
@ -79,7 +79,7 @@ export default {
|
|||||||
|
|
||||||
### Checkbox组
|
### Checkbox组
|
||||||
|
|
||||||
:::demo
|
:::demo Checkbox组
|
||||||
```html
|
```html
|
||||||
<div class="zan-checkbox-wrapper">
|
<div class="zan-checkbox-wrapper">
|
||||||
<zan-checkbox-group v-model="result">
|
<zan-checkbox-group v-model="result">
|
||||||
@ -112,7 +112,7 @@ export default {
|
|||||||
|
|
||||||
### 禁用Checkbox组
|
### 禁用Checkbox组
|
||||||
|
|
||||||
:::demo
|
:::demo 禁用Checkbox组
|
||||||
```html
|
```html
|
||||||
<div class="zan-checkbox-wrapper">
|
<div class="zan-checkbox-wrapper">
|
||||||
<zan-checkbox-group v-model="result" disabled>
|
<zan-checkbox-group v-model="result" disabled>
|
||||||
@ -139,7 +139,7 @@ export default {
|
|||||||
|
|
||||||
### 与Cell组件一起使用
|
### 与Cell组件一起使用
|
||||||
|
|
||||||
:::demo
|
:::demo 与Cell组件一起使用
|
||||||
```html
|
```html
|
||||||
<zan-checkbox-group v-model="result">
|
<zan-checkbox-group v-model="result">
|
||||||
<zan-cell-group>
|
<zan-cell-group>
|
||||||
|
|||||||
@ -30,7 +30,7 @@ export default {
|
|||||||
|
|
||||||
### 基础用法
|
### 基础用法
|
||||||
|
|
||||||
:::demo
|
:::demo 基础用法
|
||||||
```html
|
```html
|
||||||
<zan-button @click="handleAlertClick">alert</zan-button>
|
<zan-button @click="handleAlertClick">alert</zan-button>
|
||||||
|
|
||||||
|
|||||||
@ -6,7 +6,7 @@
|
|||||||
|
|
||||||
根据`type`属性显示不同的输入框。
|
根据`type`属性显示不同的输入框。
|
||||||
|
|
||||||
:::demo
|
:::demo 基础用法
|
||||||
```html
|
```html
|
||||||
<zan-cell-group>
|
<zan-cell-group>
|
||||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
|
<zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
|
||||||
@ -20,7 +20,7 @@
|
|||||||
|
|
||||||
不传入`label`属性即可。
|
不传入`label`属性即可。
|
||||||
|
|
||||||
:::demo
|
:::demo 无label的输入框
|
||||||
```html
|
```html
|
||||||
<zan-cell-group>
|
<zan-cell-group>
|
||||||
<zan-field type="text" placeholder="请输入用户名"></zan-field>
|
<zan-field type="text" placeholder="请输入用户名"></zan-field>
|
||||||
@ -32,7 +32,7 @@
|
|||||||
|
|
||||||
监听组件的`change`事件。
|
监听组件的`change`事件。
|
||||||
|
|
||||||
:::demo
|
:::demo 监听change事件
|
||||||
```html
|
```html
|
||||||
<zan-cell-group>
|
<zan-cell-group>
|
||||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
|
<zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
|
||||||
|
|||||||
@ -21,7 +21,7 @@
|
|||||||
|
|
||||||
### 基础用法
|
### 基础用法
|
||||||
|
|
||||||
:::demo
|
:::demo 基础用法
|
||||||
```html
|
```html
|
||||||
<div class="demo-loading">
|
<div class="demo-loading">
|
||||||
<h2 class="demo-sub-title">渐变深色spinner</h2>
|
<h2 class="demo-sub-title">渐变深色spinner</h2>
|
||||||
|
|||||||
@ -35,7 +35,7 @@
|
|||||||
|
|
||||||
### 基础用法
|
### 基础用法
|
||||||
|
|
||||||
:::demo
|
:::demo 基础用法
|
||||||
```html
|
```html
|
||||||
<zan-panel title="标题" desc="标题描述" status="状态">
|
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||||
<div class="panel-content">
|
<div class="panel-content">
|
||||||
@ -49,7 +49,7 @@
|
|||||||
|
|
||||||
使用具名`slot`自定义内容。
|
使用具名`slot`自定义内容。
|
||||||
|
|
||||||
:::demo
|
:::demo 高级用法
|
||||||
```html
|
```html
|
||||||
<zan-panel title="标题" desc="标题描述" status="状态">
|
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||||
<zan-card
|
<zan-card
|
||||||
|
|||||||
@ -35,7 +35,7 @@ export default {
|
|||||||
|
|
||||||
### 基础用法
|
### 基础用法
|
||||||
|
|
||||||
:::demo
|
:::demo 基础用法
|
||||||
```html
|
```html
|
||||||
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
|
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
|
||||||
```
|
```
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
### 基础用法
|
### 基础用法
|
||||||
|
|
||||||
:::demo
|
:::demo 基础用法
|
||||||
```html
|
```html
|
||||||
<div class="zan-button-1">
|
<div class="zan-button-1">
|
||||||
<zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
|
<zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
|
||||||
|
|||||||
@ -29,7 +29,7 @@ export default {
|
|||||||
|
|
||||||
### 基础用法
|
### 基础用法
|
||||||
|
|
||||||
:::demo
|
:::demo 基础用法
|
||||||
```html
|
```html
|
||||||
<div class="zan-radios">
|
<div class="zan-radios">
|
||||||
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
|
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
|
||||||
@ -50,7 +50,7 @@ export default {
|
|||||||
|
|
||||||
### 禁用状态
|
### 禁用状态
|
||||||
|
|
||||||
:::demo
|
:::demo 禁用状态
|
||||||
```html
|
```html
|
||||||
<div class="zan-radios">
|
<div class="zan-radios">
|
||||||
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
|
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
|
||||||
@ -71,7 +71,7 @@ export default {
|
|||||||
|
|
||||||
### radio组
|
### radio组
|
||||||
|
|
||||||
:::demo
|
:::demo radio组
|
||||||
```html
|
```html
|
||||||
<div class="zan-radios">
|
<div class="zan-radios">
|
||||||
<zan-radio-group v-model="radio3">
|
<zan-radio-group v-model="radio3">
|
||||||
@ -94,7 +94,7 @@ export default {
|
|||||||
|
|
||||||
### 与Cell组件一起使用
|
### 与Cell组件一起使用
|
||||||
|
|
||||||
:::demo
|
:::demo 与Cell组件一起使用
|
||||||
```html
|
```html
|
||||||
<zan-radio-group v-model="radio4">
|
<zan-radio-group v-model="radio4">
|
||||||
<zan-cell-group>
|
<zan-cell-group>
|
||||||
|
|||||||
@ -12,7 +12,7 @@ export default {
|
|||||||
|
|
||||||
### 基础用法
|
### 基础用法
|
||||||
|
|
||||||
:::demo
|
:::demo 基础用法
|
||||||
```html
|
```html
|
||||||
<zan-search placeholder="商品名称" @search="goSearch"></zan-search>
|
<zan-search placeholder="商品名称" @search="goSearch"></zan-search>
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@ -32,7 +32,7 @@ export default {
|
|||||||
|
|
||||||
### 基础用法
|
### 基础用法
|
||||||
|
|
||||||
:::demo
|
:::demo 基础用法
|
||||||
```html
|
```html
|
||||||
<zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
|
<zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
|
||||||
<zan-step>买家下单</zan-step>
|
<zan-step>买家下单</zan-step>
|
||||||
@ -63,7 +63,7 @@ export default {
|
|||||||
|
|
||||||
### 只显示步骤条
|
### 只显示步骤条
|
||||||
|
|
||||||
:::demo
|
:::demo 只显示步骤条
|
||||||
```html
|
```html
|
||||||
<zan-steps :active="active">
|
<zan-steps :active="active">
|
||||||
<zan-step>买家下单</zan-step>
|
<zan-step>买家下单</zan-step>
|
||||||
|
|||||||
@ -21,7 +21,7 @@
|
|||||||
|
|
||||||
### 基础用法
|
### 基础用法
|
||||||
|
|
||||||
:::demo
|
:::demo 基础用法
|
||||||
```html
|
```html
|
||||||
<div class="demo-switch__wrapper">
|
<div class="demo-switch__wrapper">
|
||||||
<zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
|
<zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
|
||||||
|
|||||||
@ -12,7 +12,7 @@
|
|||||||
|
|
||||||
### 基础用法
|
### 基础用法
|
||||||
|
|
||||||
:::demo
|
:::demo 基础用法
|
||||||
```html
|
```html
|
||||||
<div class="tags-container">
|
<div class="tags-container">
|
||||||
<zan-tag>返现</zan-tag>
|
<zan-tag>返现</zan-tag>
|
||||||
@ -28,7 +28,7 @@
|
|||||||
|
|
||||||
### 高级用法
|
### 高级用法
|
||||||
|
|
||||||
:::demo
|
:::demo 高级用法
|
||||||
```html
|
```html
|
||||||
<div class="tags-container">
|
<div class="tags-container">
|
||||||
<zan-tag type="danger">返现</zan-tag>
|
<zan-tag type="danger">返现</zan-tag>
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
### 基础用法
|
### 基础用法
|
||||||
|
|
||||||
:::demo
|
:::demo 基础用法
|
||||||
```html
|
```html
|
||||||
<div class="waterfall">
|
<div class="waterfall">
|
||||||
<div
|
<div
|
||||||
|
|||||||
@ -1,18 +1,12 @@
|
|||||||
<template>
|
<template><section class="demo-badge"><h1 class="demo-title">badge</h1><example-block title="基础用法">
|
||||||
<div class="page-badge">
|
<zan-badge-group active-key="2">
|
||||||
<h1 class="page-title">Badge</h1>
|
<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>
|
||||||
|
|
||||||
<h2 class="page-sub-title">基础用法</h2>
|
</example-block></section></template>
|
||||||
<zan-badge-group active-key="2">
|
|
||||||
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
|
<script>
|
||||||
<zan-badge mark="1" title="花式寿司" info="99"></zan-badge>
|
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||||
<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>
|
|
||||||
@ -1,82 +1,81 @@
|
|||||||
<template>
|
<template><section class="demo-button"><h1 class="demo-title">button</h1><example-block title="按钮功能">
|
||||||
<div class="page-button">
|
<zan-row>
|
||||||
<h1 class="page-title">Button</h1>
|
<zan-col span="24">
|
||||||
<h2 class="page-sub-title">按钮功能</h2>
|
<zan-button block="">default</zan-button>
|
||||||
<zan-row>
|
</zan-col>
|
||||||
<zan-col span="24">
|
<zan-col span="24">
|
||||||
<zan-button block>default</zan-button>
|
<zan-button type="primary" block="">primary</zan-button>
|
||||||
</zan-col>
|
</zan-col>
|
||||||
<zan-col span="24">
|
<zan-col span="24">
|
||||||
<zan-button type="primary" block>primary</zan-button>
|
<zan-button type="danger" block="">danger</zan-button>
|
||||||
</zan-col>
|
</zan-col>
|
||||||
<zan-col span="24">
|
</zan-row>
|
||||||
<zan-button type="danger" block>danger</zan-button>
|
|
||||||
</zan-col>
|
|
||||||
</zan-row>
|
|
||||||
|
|
||||||
<h2 class="page-sub-title">禁用状态</h2>
|
</example-block><example-block title="禁用状态">
|
||||||
<zan-row>
|
<zan-row>
|
||||||
<zan-col span="24">
|
<zan-col span="24">
|
||||||
<zan-button disabled block>diabled</zan-button>
|
<zan-button disabled block="">diabled</zan-button>
|
||||||
</zan-col>
|
</zan-col>
|
||||||
</zan-row>
|
</zan-row>
|
||||||
|
|
||||||
<h2 class="page-sub-title">按钮尺寸</h2>
|
</example-block><example-block title="按钮尺寸">
|
||||||
<zan-row>
|
<zan-row>
|
||||||
<zan-col span="24">
|
<zan-col span="24">
|
||||||
<zan-button size="large">large</zan-button>
|
<zan-button size="large">large</zan-button>
|
||||||
</zan-col>
|
</zan-col>
|
||||||
</zan-row>
|
</zan-row>
|
||||||
<zan-row gutter="10">
|
<zan-row gutter="10">
|
||||||
<zan-col span="8">
|
<zan-col span="8">
|
||||||
<zan-button type="primary" block>normal</zan-button>
|
<zan-button type="primary" block="">normal</zan-button>
|
||||||
</zan-col>
|
</zan-col>
|
||||||
<zan-col span="8">
|
<zan-col span="8">
|
||||||
<zan-button size="small" block>small</zan-button>
|
<zan-button size="small" block="">small</zan-button>
|
||||||
</zan-col>
|
</zan-col>
|
||||||
<zan-col span="8">
|
<zan-col span="8">
|
||||||
<zan-button size="mini" block>mini</zan-button>
|
<zan-button size="mini" block="">mini</zan-button>
|
||||||
</zan-col>
|
</zan-col>
|
||||||
</zan-row>
|
</zan-row>
|
||||||
|
|
||||||
<h2 class="page-sub-title">自定义按钮标签</h2>
|
</example-block><example-block title="自定义按钮标签">
|
||||||
<zan-row>
|
<zan-row>
|
||||||
<zan-col span="24">
|
<zan-col span="24">
|
||||||
<zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
|
<zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
|
||||||
</zan-col>
|
</zan-col>
|
||||||
</zan-row>
|
</zan-row>
|
||||||
|
|
||||||
<h2 class="page-sub-title">loading</h2>
|
</example-block><example-block title="loading按钮">
|
||||||
<zan-row>
|
<zan-row>
|
||||||
<zan-col span="24">
|
<zan-col span="24">
|
||||||
<zan-button type="primary" loading block>loading</zan-button>
|
<zan-button type="primary" loading="" block="">loading</zan-button>
|
||||||
</zan-col>
|
</zan-col>
|
||||||
<zan-col span="24">
|
<zan-col span="24">
|
||||||
<zan-button loading block></zan-button>
|
<zan-button loading="" block=""></zan-button>
|
||||||
</zan-col>
|
</zan-col>
|
||||||
</zan-row>
|
</zan-row>
|
||||||
|
|
||||||
<h2 class="page-sub-title">button group</h2>
|
</example-block><example-block title="button group">
|
||||||
<div class="button-group">
|
<div class="button-group">
|
||||||
<zan-button type="primary" size="small">确认付款</zan-button>
|
<zan-button type="primary" size="small">确认付款</zan-button>
|
||||||
<zan-button size="small">确认收货</zan-button>
|
<zan-button size="small">确认收货</zan-button>
|
||||||
<zan-button size="small">取消订单</zan-button>
|
<zan-button size="small">取消订单</zan-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
</example-block></section></template>
|
||||||
<style>
|
<style>
|
||||||
@component-namespace page {
|
@component-namespace demo {
|
||||||
@b button {
|
@b button {
|
||||||
|
.zan-row {
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
.zan-col {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.button-group {
|
||||||
|
font-size: 0;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@component-namespace zan {
|
}
|
||||||
@b col {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.button-group {
|
|
||||||
font-size: 0;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||||
@ -1,37 +1,24 @@
|
|||||||
<template>
|
<template><section class="demo-card"><h1 class="demo-title">card</h1><example-block title="基础用法">
|
||||||
<div class="page-card">
|
<zan-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="描述" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||||
<h1 class="page-title">Card</h1>
|
</zan-card>
|
||||||
|
|
||||||
<h2 class="page-sub-title">基础用法</h2>
|
</example-block><example-block title="高级用法">
|
||||||
<zan-card
|
<zan-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="商品SKU1，商品SKU2" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
<div class="zan-card__row" slot="title">
|
||||||
desc="描述"
|
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
<span class="zan-card__price">¥ 2.00</span>
|
||||||
</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>
|
|
||||||
</div>
|
</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>
|
</example-block></section></template>
|
||||||
.page-sub-title {
|
|
||||||
padding: 15px;
|
<script>
|
||||||
}
|
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||||
</style>
|
|
||||||
@ -1,45 +1,48 @@
|
|||||||
<template>
|
<template><section class="demo-cell"><h1 class="demo-title">cell</h1><example-block title="基础用法">
|
||||||
<div class="page-cell">
|
<zan-cell-group>
|
||||||
<h1 class="page-title">Cell</h1>
|
<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>
|
</example-block><example-block title="标题带描述信息">
|
||||||
<zan-cell-group>
|
<zan-cell-group>
|
||||||
<zan-cell title="单元格1" value="单元格1内容"></zan-cell>
|
<zan-cell title="单元格1" label="描述信息" is-link="" url="javascript:void(0)" @click="handleClick"></zan-cell>
|
||||||
<zan-cell title="单元格2" value="单元格2内容"></zan-cell>
|
<zan-cell title="单元格2" label="描述信息"></zan-cell>
|
||||||
</zan-cell-group>
|
</zan-cell-group>
|
||||||
|
|
||||||
<h2 class="page-sub-title">标题带描述信息</h2>
|
</example-block><example-block title="带图标">
|
||||||
<zan-cell-group>
|
<zan-cell-group>
|
||||||
<zan-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></zan-cell>
|
<zan-cell title="起码运动馆" icon="home"></zan-cell>
|
||||||
<zan-cell title="单元格2" label="描述信息"></zan-cell>
|
<zan-cell title="线下门店" icon="location"></zan-cell>
|
||||||
</zan-cell-group>
|
</zan-cell-group>
|
||||||
|
|
||||||
<h2 class="page-sub-title">带图标</h2>
|
</example-block><example-block title="可点击的链接">
|
||||||
<zan-cell-group>
|
<zan-cell-group>
|
||||||
<zan-cell title="起码运动馆" icon="home"></zan-cell>
|
<zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link=""></zan-cell>
|
||||||
<zan-cell title="线下门店" icon="location"></zan-cell>
|
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></zan-cell>
|
||||||
</zan-cell-group>
|
</zan-cell-group>
|
||||||
|
|
||||||
<h2 class="page-sub-title">可点击的链接</h2>
|
</example-block><example-block title="高级用法">
|
||||||
<zan-cell-group>
|
<zan-cell-group>
|
||||||
<zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></zan-cell>
|
<zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link="">
|
||||||
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
|
<template slot="title">
|
||||||
</zan-cell-group>
|
<span class="zan-cell-text">起码运动馆</span>
|
||||||
|
<img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
|
||||||
<h2 class="page-sub-title">高级用法</h2>
|
</template>
|
||||||
<zan-cell-group>
|
</zan-cell>
|
||||||
<zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
|
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></zan-cell>
|
||||||
<template slot="title">
|
</zan-cell-group>
|
||||||
<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></section></template>
|
||||||
|
<style>
|
||||||
|
.official-img {
|
||||||
|
width: 31px;
|
||||||
|
vertical-align: middle;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<script>
|
<script>
|
||||||
|
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||||
export default {
|
export default {
|
||||||
methods: {
|
methods: {
|
||||||
handleClick() {
|
handleClick() {
|
||||||
@ -48,15 +51,3 @@ export default {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
|
||||||
.official-img {
|
|
||||||
width: 31px;
|
|
||||||
vertical-align: middle;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-sub-title {
|
|
||||||
padding: 25px 15px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,38 +1,62 @@
|
|||||||
<template>
|
<template><section class="demo-checkbox"><h1 class="demo-title">checkbox</h1><example-block title="基础用法">
|
||||||
<div class="page-checkbox">
|
<div class="zan-checkbox-wrapper">
|
||||||
<h1 class="page-title">Checkbox</h1>
|
<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>
|
</example-block><example-block title="禁用状态">
|
||||||
<zan-checkbox-group v-model="result">
|
<div class="zan-checkbox-wrapper">
|
||||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
|
||||||
</zan-checkbox-group>
|
</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">
|
</example-block><example-block title="Checkbox组">
|
||||||
<zan-cell-group>
|
<div class="zan-checkbox-wrapper">
|
||||||
<zan-cell v-for="item in list">
|
<zan-checkbox-group v-model="result">
|
||||||
<zan-checkbox :name="item">复选框{{item}}</zan-checkbox>
|
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||||
</zan-cell>
|
</zan-checkbox-group>
|
||||||
</zan-cell-group>
|
</div>
|
||||||
</zan-checkbox-group>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</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>
|
<script>
|
||||||
|
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -54,13 +78,3 @@ export default {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
|
||||||
.checkbox-demo-wrapper {
|
|
||||||
padding: 0 15px;
|
|
||||||
|
|
||||||
.zan-checkbox {
|
|
||||||
margin: 10px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,19 +1,14 @@
|
|||||||
<template>
|
<template><section class="demo-dialog"><h1 class="demo-title">dialog</h1><example-block title="基础用法">
|
||||||
<div class="page-dialog">
|
<zan-button @click="handleAlertClick">alert</zan-button>
|
||||||
<h1 class="page-title">Dialog</h1>
|
|
||||||
|
|
||||||
<div class="zan-button-1">
|
<zan-button @click="handleConfirmClick">confirm</zan-button>
|
||||||
<zan-button @click="handleAlertClick">点击我打开alert提示框</zan-button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="zan-button-1">
|
|
||||||
<zan-button @click="handleConfirmClick">点击我打开confirm提示框</zan-button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
</example-block></section></template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||||
import { Dialog } from 'src/index';
|
import { Dialog } from 'src/index';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -40,15 +35,3 @@ export default {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
|
||||||
@component-namespace page {
|
|
||||||
@b dialog {
|
|
||||||
padding: 0 15px;
|
|
||||||
|
|
||||||
.zan-button-1 {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,44 +1,21 @@
|
|||||||
<template>
|
<template><section class="demo-field"><h1 class="demo-title">field</h1><example-block title="基础用法">
|
||||||
<div class="page-field">
|
<zan-cell-group>
|
||||||
<h1 class="page-title">Field</h1>
|
<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>
|
</example-block><example-block title="无label的输入框">
|
||||||
<zan-cell-group>
|
<zan-cell-group>
|
||||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
|
<zan-field type="text" placeholder="请输入用户名"></zan-field>
|
||||||
<zan-field type="password" label="密码：" placeholder="请输入密码"></zan-field>
|
</zan-cell-group>
|
||||||
<zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
|
|
||||||
</zan-cell-group>
|
|
||||||
|
|
||||||
<h2 class="page-sub-title">无label的输入框</h2>
|
</example-block><example-block title="监听change事件">
|
||||||
<zan-cell-group>
|
<zan-cell-group>
|
||||||
<zan-field type="text" placeholder="请输入用户名"></zan-field>
|
<zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
|
||||||
</zan-cell-group>
|
</zan-cell-group>
|
||||||
|
|
||||||
<h2 class="page-sub-title">监听change事件</h2>
|
</example-block></section></template>
|
||||||
<zan-cell-group>
|
|
||||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
|
|
||||||
</zan-cell-group>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
name: ''
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
handleChange() {
|
|
||||||
console.log(this.name);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.page-sub-title {
|
|
||||||
padding: 20px 15px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,30 +1,4 @@
|
|||||||
<template>
|
<template><section class="demo-image-preview"><h1 class="demo-title">image-preview</h1></section></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>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { ImagePreview } from 'src/index';
|
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||||
|
|
||||||
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>
|
|
||||||
@ -1,28 +1,26 @@
|
|||||||
<template>
|
<template><section class="demo-loading"><h1 class="demo-title">loading</h1><example-block title="基础用法">
|
||||||
<div class="page-loading">
|
<div class="demo-loading">
|
||||||
<h1 class="page-title">Loading</h1>
|
<h2 class="demo-sub-title">渐变深色spinner</h2>
|
||||||
<h2 class="page-sub-title">渐变深色spinner</h2>
|
<div class="demo-loading__example">
|
||||||
<div class="page-loading__example">
|
<zan-loading class="some-customized-class"></zan-loading>
|
||||||
<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>
|
|
||||||
</div>
|
</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>
|
<style>
|
||||||
.page-loading__example{
|
.demo-loading__example{
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
@ -31,11 +29,13 @@
|
|||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-loading__example--with-bg {
|
.demo-loading__example--with-bg {
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-loading {
|
.demo-loading {
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||||
@ -1,80 +1,65 @@
|
|||||||
<template>
|
<template><section class="demo-panel"><h1 class="demo-title">panel</h1><example-block title="基础用法">
|
||||||
<div class="page-panel">
|
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||||
<h1 class="page-title">Panel</h1>
|
<div class="panel-content">
|
||||||
|
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>
|
</div>
|
||||||
</template>
|
</zan-panel>
|
||||||
|
|
||||||
|
</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>
|
<style>
|
||||||
.zan-panel-sum {
|
@component-namespace demo {
|
||||||
background: #fff;
|
@b panel {
|
||||||
text-align: right;
|
.zan-panel-sum {
|
||||||
font-size: 14px;
|
background: #fff;
|
||||||
color: #333;
|
text-align: right;
|
||||||
line-height: 30px;
|
font-size: 14px;
|
||||||
padding-right: 15px;
|
color: #333;
|
||||||
|
line-height: 30px;
|
||||||
|
padding-right: 15px;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
color: red;
|
color: red;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.zan-panel-buttons {
|
.zan-panel-buttons {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
|
||||||
.zan-button {
|
.zan-button {
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-content {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||||
@ -1,13 +1,10 @@
|
|||||||
<template>
|
<template><section class="demo-picker"><h1 class="demo-title">picker</h1><example-block title="基础用法">
|
||||||
<div class="page-picker">
|
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
|
||||||
<h1 class="page-title">Picker</h1>
|
|
||||||
|
|
||||||
<h2 class="page-sub-title">基础用法</h2>
|
</example-block></section></template>
|
||||||
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||||
const citys = {
|
const citys = {
|
||||||
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
|
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
|
||||||
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
|
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
|
||||||
|
|||||||
@ -1,93 +1,35 @@
|
|||||||
<template>
|
<template><section class="demo-popup"><h1 class="demo-title">popup</h1><example-block title="基础用法">
|
||||||
<div class="page-popup">
|
<div class="zan-button-1">
|
||||||
<h1 class="page-title">Popup</h1>
|
<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">
|
||||||
<div class="zan-button-1">
|
<zan-button @click="popupShow2 = true">从上方方弹出popup</zan-button>
|
||||||
<zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
|
</div>
|
||||||
</div>
|
<zan-popup v-model="popupShow2" position="top" class="zan-popup-2" :overlay="false">
|
||||||
<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
|
更新成功
|
||||||
xxxx
|
</zan-popup>
|
||||||
</zan-popup>
|
|
||||||
|
|
||||||
<div class="zan-button-1">
|
<div class="zan-button-1">
|
||||||
<zan-button @click="popupShow2 = true">从上方方弹出popup</zan-button>
|
<zan-button @click="popupShow3 = true">从右方弹出popup</zan-button>
|
||||||
</div>
|
</div>
|
||||||
<zan-popup v-model="popupShow2" position="top" class="zan-popup-2" :overlay="false">
|
<zan-popup v-model="popupShow3" position="right" class="zan-popup-3" :overlay="false">
|
||||||
更新成功
|
<zan-button @click.native="popupShow3 = false">关闭 popup</zan-button>
|
||||||
</zan-popup>
|
</zan-popup>
|
||||||
|
|
||||||
<div class="zan-button-1">
|
<div class="zan-button-1">
|
||||||
<zan-button @click="popupShow3 = true">从右方弹出popup</zan-button>
|
<zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
|
||||||
</div>
|
</div>
|
||||||
<zan-popup v-model="popupShow3" position="right" class="zan-popup-3" :overlay="false">
|
<zan-popup v-model="popupShow4" transition="popup-fade" class="zan-popup-4">
|
||||||
<zan-button @click.native="popupShow3 = false">关闭 popup</zan-button>
|
一些内容
|
||||||
</zan-popup>
|
</zan-popup>
|
||||||
|
|
||||||
<div class="zan-button-1">
|
|
||||||
<zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
|
|
||||||
</div>
|
</example-block></section></template>
|
||||||
<zan-popup v-model="popupShow4" transition="popup-fade" class="zan-popup-4">
|
|
||||||
一些内容
|
|
||||||
</zan-popup>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||||
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>
|
|
||||||
@ -1,41 +1,55 @@
|
|||||||
<template>
|
<template><section class="demo-radio"><h1 class="demo-title">radio</h1><example-block title="基础用法">
|
||||||
<div class="page-radio">
|
<div class="zan-radios">
|
||||||
<h1 class="page-title">Radio</h1>
|
<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>
|
</example-block><example-block title="禁用状态">
|
||||||
<zan-radio-group v-model="radio3">
|
<div class="zan-radios">
|
||||||
<zan-radio name="1">单选框1</zan-radio>
|
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
|
||||||
<zan-radio name="2">单选框2</zan-radio>
|
<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
|
||||||
</zan-radio-group>
|
</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">
|
</example-block><example-block title="radio组">
|
||||||
<zan-cell-group>
|
<div class="zan-radios">
|
||||||
<zan-cell><zan-radio name="1">单选框1</zan-radio></zan-cell>
|
<zan-radio-group v-model="radio3">
|
||||||
<zan-cell><zan-radio name="2">单选框2</zan-radio></zan-cell>
|
<zan-radio name="1">单选框1</zan-radio>
|
||||||
</zan-cell-group>
|
<zan-radio name="2">单选框2</zan-radio>
|
||||||
</zan-radio-group>
|
</zan-radio-group>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</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>
|
<script>
|
||||||
|
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -47,13 +61,3 @@ export default {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
|
||||||
.radio-demo-wrapper {
|
|
||||||
padding: 0 15px;
|
|
||||||
|
|
||||||
.zan-radio {
|
|
||||||
margin: 10px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -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>
|
<script>
|
||||||
|
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||||
export default {
|
export default {
|
||||||
methods: {
|
methods: {
|
||||||
goSearch(value) {
|
goSearch(value) {
|
||||||
@ -7,19 +14,3 @@ export default {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</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>
|
|
||||||
|
|||||||
@ -1,27 +1,39 @@
|
|||||||
<template>
|
<template><section class="demo-steps"><h1 class="demo-title">steps</h1><example-block title="基础用法">
|
||||||
<div class="page-steps">
|
<zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
|
||||||
<h1 class="page-title">Steps</h1>
|
<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-button @click="nextStep">下一步</zan-button>
|
||||||
<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>
|
|
||||||
|
|
||||||
<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>
|
<script>
|
||||||
|
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -36,19 +48,3 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
|
||||||
.steps-success {
|
|
||||||
color: #06bf04;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-steps {
|
|
||||||
.page-sub-title {
|
|
||||||
padding: 20px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.zan-button {
|
|
||||||
margin-left: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,67 +1,44 @@
|
|||||||
<template>
|
<template><section class="demo-switch"><h1 class="demo-title">switch</h1><example-block title="基础用法">
|
||||||
<div class="page-switch">
|
<div class="demo-switch__wrapper">
|
||||||
<h1 class="page-title">Switch</h1>
|
<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>
|
<style>
|
||||||
@component-namespace page {
|
@component-namespace demo {
|
||||||
@component switch {
|
@b switch {
|
||||||
padding: 0 15px 15px;
|
padding: 0 15px 15px;
|
||||||
|
|
||||||
@descendent wrapper {
|
@e wrapper {
|
||||||
width: 33.33%;
|
width: 33.33%;
|
||||||
float: left;
|
float: left;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@descendent text {
|
@e text {
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||||
@ -1,47 +1,33 @@
|
|||||||
<template>
|
<template><section class="demo-tag"><h1 class="demo-title">tag</h1><example-block title="基础用法">
|
||||||
<div class="page-cell">
|
<div class="tags-container">
|
||||||
<h1 class="page-title">Tag</h1>
|
<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>
|
</example-block><example-block title="高级用法">
|
||||||
<div>
|
<div class="tags-container">
|
||||||
<div class="tags-container">
|
<zan-tag type="danger">返现</zan-tag>
|
||||||
<zan-tag>返现</zan-tag>
|
<zan-tag :plain="true" type="danger">返现</zan-tag>
|
||||||
<zan-tag :plain="true">返现</zan-tag>
|
</div>
|
||||||
</div>
|
<div class="tags-container">
|
||||||
<div class="tags-container">
|
<zan-tag type="primary">返现</zan-tag>
|
||||||
<zan-tag type="danger">返现</zan-tag>
|
<zan-tag :plain="true" type="primary">返现</zan-tag>
|
||||||
<zan-tag type="danger">四字标签</zan-tag>
|
</div>
|
||||||
<zan-tag type="danger">一</zan-tag>
|
<div class="tags-container">
|
||||||
</div>
|
<zan-tag type="success">返现</zan-tag>
|
||||||
<div class="tags-container">
|
<zan-tag :plain="true" type="success">返现</zan-tag>
|
||||||
<zan-tag type="danger">返现</zan-tag>
|
</div>
|
||||||
<zan-tag :plain="true" type="danger">返现</zan-tag>
|
<div class="tags-container">
|
||||||
</div>
|
<zan-tag type="danger" :mark="true">返现</zan-tag>
|
||||||
<div class="tags-container">
|
</div>
|
||||||
<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></section></template>
|
||||||
<style>
|
<style>
|
||||||
.page-sub-title {
|
|
||||||
padding: 25px 15px;
|
|
||||||
}
|
|
||||||
.tags-container {
|
.tags-container {
|
||||||
padding: 5px 15px;
|
padding: 5px 15px;
|
||||||
|
|
||||||
@ -50,3 +36,5 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||||
@ -1,64 +1,18 @@
|
|||||||
<template>
|
<template><section class="demo-waterfall"><h1 class="demo-title">waterfall</h1><example-block title="基础用法">
|
||||||
<div class="page-card">
|
<div class="waterfall">
|
||||||
<h1 class="page-title">Waterfall</h1>
|
<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;">
|
||||||
<h2 class="page-sub-title">基础用法</h2>
|
{{ item }}
|
||||||
<div>
|
</div>
|
||||||
<div
|
<div v-if="loading" style="text-align: center;">
|
||||||
v-waterfall-lower="loadMore"
|
loading
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</example-block></section></template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||||
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>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user