mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
zanui demos
This commit is contained in:
cookfront
parent
650dc01906
commit
8cc5fa5007
@ -13,5 +13,6 @@
|
||||
"waterfall": "./packages/waterfall/index.js",
|
||||
"loading": "./packages/loading/index.js",
|
||||
"panel": "./packages/panel/index.js",
|
||||
"card": "./packages/card/index.js"
|
||||
"card": "./packages/card/index.js",
|
||||
"steps": "./packages/steps/index.js"
|
||||
}
|
||||
|
||||
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class="examples-container">
|
||||
<router-link class="page-back" v-if="visible" :to="'/'">
|
||||
<i class="zui-icon zui-icon-arrow"></i>
|
||||
</router-link>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
visible() {
|
||||
return ['/'].indexOf(this.$route.path) < 0;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4078c0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.examples-container {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.page-back {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
transform: rotate(180deg);
|
||||
|
||||
i {
|
||||
font-size: 24px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
margin: 20px auto;
|
||||
text-align: center;
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.page-sub-title {
|
||||
font-size: 16px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
</style>
|
||||
@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="page-container clearfix">
|
||||
<side-nav :data="navConfig['zh-CN']" base="/component"></side-nav>
|
||||
<div class="page-content">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<mobile></mobile>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -24,9 +25,8 @@ export default {
|
||||
@import './assets/docs.css';
|
||||
|
||||
.page-container {
|
||||
width: 1140px;
|
||||
padding: 0 30px;
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
min-width: 960px;
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
@ -34,10 +34,12 @@ export default {
|
||||
margin: 20px 0;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 22px;
|
||||
margin: 23px 0;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5 {
|
||||
font-weight: normal;
|
||||
color: #1f2f3d;
|
||||
@ -57,6 +59,7 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
@ -65,8 +68,32 @@ export default {
|
||||
}
|
||||
|
||||
.page-content {
|
||||
width: 75%;
|
||||
width: 52%;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
padding: 0 15px;
|
||||
overflow: auto;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
.mobile-wrapper {
|
||||
float: left;
|
||||
width: 30%;
|
||||
height: 300px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
margin: 20px 20px 0;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
width: 365px;
|
||||
}
|
||||
|
||||
.demo-page {
|
||||
width: 100%;
|
||||
border: 5px solid #f5f5f5;
|
||||
height: 580px;
|
||||
}
|
||||
|
||||
.table {
|
||||
@ -77,16 +104,16 @@ export default {
|
||||
font-size: 14px;
|
||||
margin-bottom: 45px;
|
||||
|
||||
th:first-child {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
border-top: 1px solid #eaeefb;
|
||||
border-bottom: 1px solid #eaeefb;
|
||||
background-color: #eff2f7;
|
||||
padding: 10px;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
|
||||
@ -18,11 +18,16 @@ time, mark, audio, video {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
font-weight: 400;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
@ -53,4 +58,16 @@ ul {
|
||||
-webkit-font-smoothing: auto;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
&::before {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: table;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
116
docs/components/demo-list.vue
Normal file
116
docs/components/demo-list.vue
Normal file
@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div class="side-nav">
|
||||
<ul>
|
||||
<li class="nav-item" v-for="item in data">
|
||||
<a v-if="!item.path">{{item.name}}</a>
|
||||
<router-link
|
||||
v-else
|
||||
active-class="active"
|
||||
:to="base + item.path"
|
||||
exact
|
||||
v-text="item.title || item.name">
|
||||
</router-link>
|
||||
<ul class="pure-menu-list sub-nav" v-if="item.children">
|
||||
<li class="nav-item" v-for="navItem in item.children">
|
||||
<router-link
|
||||
active-class="active"
|
||||
:to="base + navItem.path"
|
||||
v-text="navItem.title || navItem.name">
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<template v-if="item.groups">
|
||||
<div class="nav-group" v-for="group in item.groups">
|
||||
<div class="nav-group__title">{{group.groupName}}</div>
|
||||
<ul class="pure-menu-list">
|
||||
<template v-for="navItem in group.list">
|
||||
<li
|
||||
class="nav-item"
|
||||
v-if="!navItem.disabled">
|
||||
<router-link
|
||||
active-class="active"
|
||||
:to="base + navItem.path"
|
||||
v-text="navItem.title">
|
||||
</router-link>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navConfig from '../nav.config.json';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
highlights: [],
|
||||
navState: [],
|
||||
data: navConfig['zh-CN'],
|
||||
base: '/component'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.side-nav {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 40px 20px;
|
||||
background: #f9fafb;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
a {
|
||||
font-size: 16px;
|
||||
color: #5e6d82;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
position: relative;
|
||||
transition: all .3s;
|
||||
|
||||
&.active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
}
|
||||
.nav-item {
|
||||
a {
|
||||
display: block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 13px;
|
||||
padding-left: 24px;
|
||||
|
||||
|
||||
&:hover {
|
||||
color: #20a0ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-group__title {
|
||||
font-size: 12px;
|
||||
color: #99a9bf;
|
||||
padding-left: 8px;
|
||||
line-height: 26px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
7
docs/components/mobile.vue
Normal file
7
docs/components/mobile.vue
Normal file
@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<div class="mobile-wrapper">
|
||||
<div class="mobile">
|
||||
<iframe class="demo-page" :src="'./examples.html#' + $route.path" frameborder="0"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -62,10 +62,13 @@
|
||||
|
||||
<style lang="css">
|
||||
.side-nav {
|
||||
width: 25%;
|
||||
width: 18%;
|
||||
box-sizing: border-box;
|
||||
padding-right: 30px;
|
||||
padding: 40px 20px;
|
||||
float: left;
|
||||
background: #f9fafb;
|
||||
height: inherit;
|
||||
overflow: auto;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
|
||||
@ -1,18 +1,9 @@
|
||||
<style lang="css">
|
||||
@component-namespace z {
|
||||
@component button-group {
|
||||
.z-button-1 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Button组件
|
||||
|
||||
### 按钮功能
|
||||
|
||||
:::demo 只接受primary, default, danger三种类型，默认default
|
||||
只接受primary, default, danger三种类型，默认default。
|
||||
|
||||
```html
|
||||
<div class="z-button-group">
|
||||
<div class="z-button-1">
|
||||
@ -26,11 +17,9 @@
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用状态
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div class="z-button-group">
|
||||
<div class="z-button-1">
|
||||
@ -38,11 +27,11 @@
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### 按钮尺寸
|
||||
|
||||
:::demo 只接受large, normal, small, mini四种尺寸，默认normal
|
||||
只接受large, normal, small, mini四种尺寸，默认normal。
|
||||
|
||||
```html
|
||||
<div class="z-button-group">
|
||||
<div class="z-button-1">
|
||||
@ -62,11 +51,11 @@
|
||||
</div>
|
||||
|
||||
```
|
||||
:::
|
||||
|
||||
### 自定义按钮标签
|
||||
|
||||
:::demo 按钮默认是button标签，可以使用tag属性修改为一个a标签
|
||||
按钮默认是button标签，可以使用tag属性修改为一个a标签。
|
||||
|
||||
```html
|
||||
<div class="z-button-group">
|
||||
<div class="z-button-1">
|
||||
@ -74,10 +63,11 @@
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### button group
|
||||
:::demo 一组按钮
|
||||
|
||||
一组按钮。
|
||||
|
||||
```html
|
||||
<div class="z-button-group">
|
||||
<z-button type="primary" size="small">确认付款</z-button>
|
||||
@ -85,8 +75,6 @@
|
||||
<z-button size="small">取消订单</z-button>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
|
||||
当没有底部按钮时，右侧内容会居中显示。
|
||||
|
||||
:::demo 不带底部按钮时，右侧内容会居中显示。
|
||||
```html
|
||||
<z-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
@ -13,13 +12,11 @@
|
||||
</z-card>
|
||||
|
||||
```
|
||||
:::
|
||||
|
||||
### 高级用法
|
||||
|
||||
可以使用具名`slot`自定义对应的内容。
|
||||
可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
|
||||
|
||||
:::demo 可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
|
||||
```html
|
||||
<z-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
@ -39,7 +36,6 @@
|
||||
</div>
|
||||
</z-card>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -20,53 +20,50 @@ export default {
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 样例代码
|
||||
```html
|
||||
<z-cell-group>
|
||||
<z-cell title="单元格1" value="单元格1内容"></z-cell>
|
||||
<z-cell title="单元格2" value="单元格2内容"></z-cell>
|
||||
</z-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### 标题带描述信息
|
||||
|
||||
:::demo 传入`label`属性，属性值为描述信息的值。
|
||||
传入`label`属性，属性值为描述信息的值。
|
||||
|
||||
```html
|
||||
<z-cell-group>
|
||||
<z-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></z-cell>
|
||||
<z-cell title="单元格2" label="描述信息"></z-cell>
|
||||
</z-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### 带图标
|
||||
|
||||
:::demo 传入`icon`属性
|
||||
传入`icon`属性。
|
||||
|
||||
```html
|
||||
<z-cell-group>
|
||||
<z-cell title="起码运动馆" icon="home"></z-cell>
|
||||
<z-cell title="线下门店" icon="location"></z-cell>
|
||||
</z-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### 可点击的链接
|
||||
|
||||
:::demo 传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
|
||||
传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
|
||||
|
||||
```html
|
||||
<z-cell-group>
|
||||
<z-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></z-cell>
|
||||
<z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
|
||||
</z-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### 高级用法
|
||||
|
||||
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。
|
||||
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
|
||||
|
||||
:::demo 包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
|
||||
```html
|
||||
<z-cell-group>
|
||||
<z-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
|
||||
@ -78,7 +75,6 @@ export default {
|
||||
<z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
|
||||
</z-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -30,13 +30,39 @@ export default {
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<z-button @click="handleAlertClick">alert</z-button>
|
||||
|
||||
<z-button @click="handleConfirmClick">confirm</z-button>
|
||||
|
||||
<script>
|
||||
import { Dialog } from 'src/index';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
handleAlertClick() {
|
||||
Dialog.alert({
|
||||
title: 'alert标题',
|
||||
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
|
||||
}).then((action) => {
|
||||
console.log(action);
|
||||
});
|
||||
},
|
||||
|
||||
handleConfirmClick() {
|
||||
Dialog.confirm({
|
||||
title: 'confirm标题',
|
||||
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
|
||||
}).then((action) => {
|
||||
console.log(action);
|
||||
}, (error) => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -1,26 +1,11 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: ''
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleChange() {
|
||||
console.log(this.name);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Field组件
|
||||
|
||||
表单中`input`或`textarea`的输入框。
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 根据`type`属性显示不同的输入框。
|
||||
根据`type`属性显示不同的输入框。
|
||||
|
||||
```html
|
||||
<z-cell-group>
|
||||
<z-field type="text" label="用户名：" placeholder="请输入用户名"></z-field>
|
||||
@ -28,27 +13,26 @@ export default {
|
||||
<z-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></z-field>
|
||||
</z-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### 无label的输入框
|
||||
|
||||
:::demo 不传入`label`属性即可。
|
||||
不传入`label`属性即可。
|
||||
|
||||
```html
|
||||
<z-cell-group>
|
||||
<z-field type="text" placeholder="请输入用户名"></z-field>
|
||||
</z-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### 监听change事件
|
||||
|
||||
:::demo 监听组件的`change`事件。
|
||||
监听组件的`change`事件。
|
||||
|
||||
```html
|
||||
<z-cell-group>
|
||||
<z-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></z-field>
|
||||
</z-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -1,33 +1,9 @@
|
||||
<style>
|
||||
.z-panel-sum {
|
||||
background: #fff;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
line-height: 30px;
|
||||
padding-right: 15px;
|
||||
|
||||
span {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.z-panel-buttons {
|
||||
text-align: right;
|
||||
|
||||
.z-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Panel 面板
|
||||
|
||||
面板只是一个容器，里面可以放入自定义的内容。
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<z-panel title="标题" desc="标题描述" status="状态">
|
||||
<z-card
|
||||
@ -52,13 +28,11 @@
|
||||
</div>
|
||||
</z-panel>
|
||||
```
|
||||
:::
|
||||
|
||||
### 高级用法
|
||||
|
||||
使用具名`slot`自定义内容。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<z-panel title="标题" desc="标题描述" status="状态">
|
||||
<z-card
|
||||
@ -87,7 +61,6 @@
|
||||
</div>
|
||||
</z-panel>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -1,45 +1,12 @@
|
||||
<script>
|
||||
const citys = {
|
||||
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
|
||||
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
|
||||
'湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerColumns: [
|
||||
{
|
||||
values: Object.keys(citys),
|
||||
className: 'column1'
|
||||
},
|
||||
{
|
||||
values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
|
||||
className: 'column2'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePickerChange(picker, values) {
|
||||
picker.setColumnValues(1, citys[values[0]]);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Picker组件
|
||||
|
||||
模仿iOS中的`UIPickerView`。
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<z-picker :columns="pickerColumns" @change="handlePickerChange"></z-picker>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -1,3 +1,36 @@
|
||||
## Popup组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
```html
|
||||
<div class="z-button-1">
|
||||
<z-button @click="popupShow1 = true">从下方弹出popup</z-button>
|
||||
</div>
|
||||
<z-popup v-model="popupShow1" position="bottom" class="z-popup-1">
|
||||
xxxx
|
||||
</z-popup>
|
||||
|
||||
<div class="z-button-1">
|
||||
<z-button @click="popupShow2 = true">从上方方弹出popup</z-button>
|
||||
</div>
|
||||
<z-popup v-model="popupShow2" position="top" class="z-popup-2" :overlay="false">
|
||||
更新成功
|
||||
</z-popup>
|
||||
|
||||
<div class="z-button-1">
|
||||
<z-button @click="popupShow3 = true">从右方弹出popup</z-button>
|
||||
</div>
|
||||
<z-popup v-model="popupShow3" position="right" class="z-popup-3" :overlay="false">
|
||||
<z-button @click.native="popupShow3 = false">关闭 popup</z-button>
|
||||
</z-popup>
|
||||
|
||||
<div class="z-button-1">
|
||||
<z-button @click="popupShow4 = true">从中间弹出popup</z-button>
|
||||
</div>
|
||||
<z-popup v-model="popupShow4" transition="popup-fade" class="z-popup-4">
|
||||
一些内容
|
||||
</z-popup>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
@ -20,62 +53,7 @@ export default {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.z-popup-1 {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.z-popup-2 {
|
||||
width: 100%;
|
||||
line-height: 44px;
|
||||
background-color: rgba(0, 0, 0, 0.701961);
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.z-popup-3 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.z-popup-4 {
|
||||
width: 50%;
|
||||
height: 200px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
## Popup组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<z-button @click="popupShow1 = true">从下方弹出popup</z-button>
|
||||
<z-popup v-model="popupShow1" position="bottom" class="z-popup-1">
|
||||
xxxx
|
||||
</z-popup>
|
||||
|
||||
<z-button @click="popupShow2 = true">从上方方弹出popup</z-button>
|
||||
<z-popup v-model="popupShow2" position="top" class="z-popup-2" :overlay="false">
|
||||
更新成功
|
||||
</z-popup>
|
||||
|
||||
<z-button @click="popupShow3 = true">从右方弹出popup</z-button>
|
||||
<z-popup v-model="popupShow3" position="right" class="z-popup-3" :overlay="false">
|
||||
<z-button @click.native="popupShow3 = false">关闭 popup</z-button>
|
||||
</z-popup>
|
||||
|
||||
<z-button @click="popupShow4 = true">从中间弹出popup</z-button>
|
||||
<z-popup v-model="popupShow4" transition="popup-fade" class="z-popup-4">
|
||||
一些内容
|
||||
</z-popup>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
4
docs/examples-docs/steps.md
Normal file
4
docs/examples-docs/steps.md
Normal file
@ -0,0 +1,4 @@
|
||||
## Steps 步骤条
|
||||
|
||||
|
||||
|
||||
@ -1,46 +1,7 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchState: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
switchStateText() {
|
||||
return this.switchState ? 'ON' : 'OFF';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateState(newState) {
|
||||
this.switchState = newState;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="css">
|
||||
@component-namespace page {
|
||||
@component switch {
|
||||
padding: 0 15px 15px;
|
||||
|
||||
@descendent wrapper {
|
||||
margin: 30px;
|
||||
width: 100px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@descendent text {
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Switch组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 样例代码
|
||||
```html
|
||||
<div class="page-switch">
|
||||
<div class="page-switch__wrapper">
|
||||
@ -56,10 +17,8 @@ export default {
|
||||
<div class="page-switch__text">OFF, DISABLED</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
```javascript
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -76,9 +35,9 @@ export default {
|
||||
this.switchState = newState;
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -1,3 +1,28 @@
|
||||
## Waterfall 瀑布流
|
||||
|
||||
### 基础用法
|
||||
|
||||
```html
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
@ -36,44 +61,7 @@ export default {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="css">
|
||||
.waterfall {
|
||||
height: 300px;
|
||||
overflow: scroll;
|
||||
}
|
||||
.waterfall-item {
|
||||
line-height: 20px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
## Waterfall组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 样例代码
|
||||
```html
|
||||
<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>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -0,0 +1,48 @@
|
||||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
import App from './ExamplesApp';
|
||||
import navConfig from './nav.config.json';
|
||||
import routes from './router.config';
|
||||
import ZanUI from '../src/index';
|
||||
|
||||
import 'packages/zanui-css/src/index.css';
|
||||
|
||||
Vue.use(ZanUI);
|
||||
Vue.use(VueRouter);
|
||||
|
||||
let routesConfig = routes(navConfig, true);
|
||||
routesConfig.push({
|
||||
path: '/',
|
||||
component: function(resolve) {
|
||||
require(['./components/demo-list.vue'], resolve);
|
||||
}
|
||||
});
|
||||
const router = new VueRouter({
|
||||
mode: 'hash',
|
||||
base: __dirname,
|
||||
routes: routesConfig
|
||||
});
|
||||
|
||||
let indexScrollTop = 0;
|
||||
router.beforeEach((route, redirect, next) => {
|
||||
if (route.path !== '/') {
|
||||
indexScrollTop = document.body.scrollTop;
|
||||
}
|
||||
document.title = route.meta.title || document.title;
|
||||
next();
|
||||
});
|
||||
|
||||
router.afterEach(route => {
|
||||
if (route.path !== '/') {
|
||||
document.body.scrollTop = 0;
|
||||
} else {
|
||||
Vue.nextTick(() => {
|
||||
document.body.scrollTop = indexScrollTop;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
new Vue({ // eslint-disable-line
|
||||
render: h => h(App),
|
||||
router
|
||||
}).$mount('#app-container');
|
||||
@ -1,10 +1,70 @@
|
||||
<template>
|
||||
<div class="button-demos">
|
||||
<div class="page-button">
|
||||
<h1 class="page-title">Button</h1>
|
||||
<h2 class="page-sub-title">按钮功能</h2>
|
||||
<div class="page-button__group">
|
||||
<div class="z-button-1">
|
||||
<z-button>default</z-button>
|
||||
</div>
|
||||
<div class="z-button-1">
|
||||
<z-button type="primary">primary</z-button>
|
||||
</div>
|
||||
<div class="z-button-1">
|
||||
<z-button type="danger">danger</z-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="page-sub-title">禁用状态</h2>
|
||||
<div class="page-button__group">
|
||||
<div class="z-button-1">
|
||||
<z-button disabled>diabled</z-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="page-sub-title">按钮尺寸</h2>
|
||||
<div class="page-button__group">
|
||||
<div class="z-button-1">
|
||||
<z-button size="large">large</z-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-button__group">
|
||||
<div class="z-button-3">
|
||||
<z-button type="primary">normal</z-button>
|
||||
</div>
|
||||
<div class="z-button-3">
|
||||
<z-button size="small">small</z-button>
|
||||
</div>
|
||||
<div class="z-button-3">
|
||||
<z-button size="mini">mini</z-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="page-sub-title">自定义按钮标签</h2>
|
||||
<div class="page-button__group">
|
||||
<div class="z-button-1">
|
||||
<z-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</z-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="page-sub-title">button group</h2>
|
||||
<div class="page-button__group">
|
||||
<z-button type="primary" size="small">确认付款</z-button>
|
||||
<z-button size="small">确认收货</z-button>
|
||||
<z-button size="small">取消订单</z-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
<style>
|
||||
@component-namespace page {
|
||||
@b button {
|
||||
padding: 0 20px;
|
||||
|
||||
};
|
||||
</script>
|
||||
@e group {
|
||||
.z-button-1 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
37
docs/examples/card.vue
Normal file
37
docs/examples/card.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div class="page-card">
|
||||
<h1 class="page-title">Card</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<z-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
desc="描述"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
</z-card>
|
||||
|
||||
<h2 class="page-sub-title">高级用法</h2>
|
||||
<z-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
desc="商品SKU1，商品SKU2"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="z-card__row" slot="title">
|
||||
<h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="z-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="z-card__row" slot="desc">
|
||||
<h4 class="z-card__desc">商品sku</h4>
|
||||
<span class="z-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="z-card__footer" slot="footer">
|
||||
<z-button size="mini">按钮一</z-button>
|
||||
<z-button size="mini">按钮二</z-button>
|
||||
</div>
|
||||
</z-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.page-sub-title {
|
||||
padding: 15px;
|
||||
}
|
||||
</style>
|
||||
62
docs/examples/cell.vue
Normal file
62
docs/examples/cell.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div class="page-cell">
|
||||
<h1 class="page-title">Cell</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<z-cell-group>
|
||||
<z-cell title="单元格1" value="单元格1内容"></z-cell>
|
||||
<z-cell title="单元格2" value="单元格2内容"></z-cell>
|
||||
</z-cell-group>
|
||||
|
||||
<h2 class="page-sub-title">标题带描述信息</h2>
|
||||
<z-cell-group>
|
||||
<z-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></z-cell>
|
||||
<z-cell title="单元格2" label="描述信息"></z-cell>
|
||||
</z-cell-group>
|
||||
|
||||
<h2 class="page-sub-title">带图标</h2>
|
||||
<z-cell-group>
|
||||
<z-cell title="起码运动馆" icon="home"></z-cell>
|
||||
<z-cell title="线下门店" icon="location"></z-cell>
|
||||
</z-cell-group>
|
||||
|
||||
<h2 class="page-sub-title">可点击的链接</h2>
|
||||
<z-cell-group>
|
||||
<z-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></z-cell>
|
||||
<z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
|
||||
</z-cell-group>
|
||||
|
||||
<h2 class="page-sub-title">高级用法</h2>
|
||||
<z-cell-group>
|
||||
<z-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
|
||||
<template slot="title">
|
||||
<span class="z-cell-text">起码运动馆</span>
|
||||
<img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
|
||||
</template>
|
||||
</z-cell>
|
||||
<z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
|
||||
</z-cell-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleClick() {
|
||||
console.log('cell click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.official-img {
|
||||
width: 31px;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.page-sub-title {
|
||||
padding: 25px 15px;
|
||||
}
|
||||
</style>
|
||||
54
docs/examples/dialog.vue
Normal file
54
docs/examples/dialog.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div class="page-dialog">
|
||||
<h1 class="page-title">Dialog</h1>
|
||||
|
||||
<div class="z-button-1">
|
||||
<z-button @click="handleAlertClick">点击我打开alert提示框</z-button>
|
||||
</div>
|
||||
|
||||
<div class="z-button-1">
|
||||
<z-button @click="handleConfirmClick">点击我打开confirm提示框</z-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dialog } from 'src/index';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
handleAlertClick() {
|
||||
Dialog.alert({
|
||||
title: 'alert标题',
|
||||
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
|
||||
}).then((action) => {
|
||||
console.log(action);
|
||||
});
|
||||
},
|
||||
|
||||
handleConfirmClick() {
|
||||
Dialog.confirm({
|
||||
title: 'confirm标题',
|
||||
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
|
||||
}).then((action) => {
|
||||
console.log(action);
|
||||
}, (error) => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@component-namespace page {
|
||||
@b dialog {
|
||||
padding: 0 15px;
|
||||
|
||||
.z-button-1 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
44
docs/examples/field.vue
Normal file
44
docs/examples/field.vue
Normal file
@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div class="page-field">
|
||||
<h1 class="page-title">Field</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<z-cell-group>
|
||||
<z-field type="text" label="用户名：" placeholder="请输入用户名"></z-field>
|
||||
<z-field type="password" label="密码：" placeholder="请输入密码"></z-field>
|
||||
<z-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></z-field>
|
||||
</z-cell-group>
|
||||
|
||||
<h2 class="page-sub-title">无label的输入框</h2>
|
||||
<z-cell-group>
|
||||
<z-field type="text" placeholder="请输入用户名"></z-field>
|
||||
</z-cell-group>
|
||||
|
||||
<h2 class="page-sub-title">监听change事件</h2>
|
||||
<z-cell-group>
|
||||
<z-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></z-field>
|
||||
</z-cell-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: ''
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleChange() {
|
||||
console.log(this.name);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.page-sub-title {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
</style>
|
||||
80
docs/examples/panel.vue
Normal file
80
docs/examples/panel.vue
Normal file
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div class="page-panel">
|
||||
<h1 class="page-title">Panel</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<z-panel title="标题" desc="标题描述" status="状态">
|
||||
<z-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
desc="商品SKU1，商品SKU2"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="z-card__row" slot="title">
|
||||
<h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="z-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="z-card__row" slot="desc">
|
||||
<h4 class="z-card__desc">商品sku</h4>
|
||||
<span class="z-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="z-card__footer" slot="footer">
|
||||
<z-button size="mini">按钮一</z-button>
|
||||
<z-button size="mini">按钮二</z-button>
|
||||
</div>
|
||||
</z-card>
|
||||
<div class="z-panel-sum">
|
||||
合计：<span>¥ 1999.90</span>
|
||||
</div>
|
||||
</z-panel>
|
||||
|
||||
<h2 class="page-sub-title">高级用法</h2>
|
||||
<z-panel title="标题" desc="标题描述" status="状态">
|
||||
<z-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
desc="商品SKU1，商品SKU2"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="z-card__row" slot="title">
|
||||
<h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="z-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="z-card__row" slot="desc">
|
||||
<h4 class="z-card__desc">商品sku</h4>
|
||||
<span class="z-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="z-card__footer" slot="footer">
|
||||
<z-button size="mini">按钮一</z-button>
|
||||
<z-button size="mini">按钮二</z-button>
|
||||
</div>
|
||||
</z-card>
|
||||
<div class="z-panel-sum">
|
||||
合计：<span>¥ 1999.90</span>
|
||||
</div>
|
||||
<div class="z-panel-buttons" slot="footer">
|
||||
<z-button size="small">按钮一</z-button>
|
||||
<z-button size="small" type="danger">按钮二</z-button>
|
||||
</div>
|
||||
</z-panel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.z-panel-sum {
|
||||
background: #fff;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
line-height: 30px;
|
||||
padding-right: 15px;
|
||||
|
||||
span {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.z-panel-buttons {
|
||||
text-align: right;
|
||||
|
||||
.z-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
39
docs/examples/picker.vue
Normal file
39
docs/examples/picker.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="page-picker">
|
||||
<h1 class="page-title">Picker</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<z-picker :columns="pickerColumns" @change="handlePickerChange"></z-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const citys = {
|
||||
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
|
||||
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
|
||||
'湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerColumns: [
|
||||
{
|
||||
values: Object.keys(citys),
|
||||
className: 'column1'
|
||||
},
|
||||
{
|
||||
values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
|
||||
className: 'column2'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePickerChange(picker, values) {
|
||||
picker.setColumnValues(1, citys[values[0]]);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
93
docs/examples/popup.vue
Normal file
93
docs/examples/popup.vue
Normal file
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="page-popup">
|
||||
<h1 class="page-title">Popup</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<div class="z-button-1">
|
||||
<z-button @click="popupShow1 = true">从下方弹出popup</z-button>
|
||||
</div>
|
||||
<z-popup v-model="popupShow1" position="bottom" class="z-popup-1">
|
||||
xxxx
|
||||
</z-popup>
|
||||
|
||||
<div class="z-button-1">
|
||||
<z-button @click="popupShow2 = true">从上方方弹出popup</z-button>
|
||||
</div>
|
||||
<z-popup v-model="popupShow2" position="top" class="z-popup-2" :overlay="false">
|
||||
更新成功
|
||||
</z-popup>
|
||||
|
||||
<div class="z-button-1">
|
||||
<z-button @click="popupShow3 = true">从右方弹出popup</z-button>
|
||||
</div>
|
||||
<z-popup v-model="popupShow3" position="right" class="z-popup-3" :overlay="false">
|
||||
<z-button @click.native="popupShow3 = false">关闭 popup</z-button>
|
||||
</z-popup>
|
||||
|
||||
<div class="z-button-1">
|
||||
<z-button @click="popupShow4 = true">从中间弹出popup</z-button>
|
||||
</div>
|
||||
<z-popup v-model="popupShow4" transition="popup-fade" class="z-popup-4">
|
||||
一些内容
|
||||
</z-popup>
|
||||
</div>
|
||||
</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>
|
||||
.z-popup-1 {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.z-popup-2 {
|
||||
width: 100%;
|
||||
line-height: 44px;
|
||||
background-color: rgba(0, 0, 0, 0.701961);
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.z-popup-3 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.z-popup-4 {
|
||||
width: 50%;
|
||||
height: 200px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.page-popup .z-button-1 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.page-sub-title {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
</style>
|
||||
58
docs/examples/switch.vue
Normal file
58
docs/examples/switch.vue
Normal file
@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<div class="page-switch">
|
||||
<h1 class="page-title">Switch</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<div class="page-switch">
|
||||
<div class="page-switch__wrapper">
|
||||
<o2-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></o2-switch>
|
||||
<div class="page-switch__text">{{switchStateText}}</div>
|
||||
</div>
|
||||
<div class="page-switch__wrapper">
|
||||
<o2-switch class="some-customized-class" :checked="true" :disabled="true"></o2-switch>
|
||||
<div class="page-switch__text">ON, DISABLED</div>
|
||||
</div>
|
||||
<div class="page-switch__wrapper">
|
||||
<o2-switch class="some-customized-class" :checked="false" :disabled="true"></o2-switch>
|
||||
<div class="page-switch__text">OFF, DISABLED</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>
|
||||
|
||||
<style>
|
||||
@component-namespace page {
|
||||
@component switch {
|
||||
padding: 0 15px 15px;
|
||||
|
||||
@descendent wrapper {
|
||||
width: 33.33%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@descendent text {
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
79
docs/examples/waterfall.vue
Normal file
79
docs/examples/waterfall.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class="page-card">
|
||||
<h1 class="page-title">Card</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
.waterfall {
|
||||
height: 300px;
|
||||
overflow: scroll;
|
||||
}
|
||||
.waterfall-item {
|
||||
line-height: 20px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.page-sub-title {
|
||||
padding: 15px;
|
||||
}
|
||||
</style>
|
||||
@ -1,9 +1,11 @@
|
||||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
import App from './ExamplesDocsApp';
|
||||
import navConfig from './nav.config.json';
|
||||
import routes from './router.config';
|
||||
import demoBlock from './components/demo-block';
|
||||
import SideNav from './components/side-nav';
|
||||
import Mobile from './components/mobile';
|
||||
import Oxygen from '../src/index';
|
||||
|
||||
import 'packages/zanui-css/src/index.css';
|
||||
@ -12,11 +14,12 @@ Vue.use(Oxygen);
|
||||
Vue.use(VueRouter);
|
||||
Vue.component('demo-block', demoBlock);
|
||||
Vue.component('side-nav', SideNav);
|
||||
Vue.component('mobile', Mobile);
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'hash',
|
||||
base: __dirname,
|
||||
routes
|
||||
routes: routes(navConfig)
|
||||
});
|
||||
|
||||
let indexScrollTop = 0;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"zh-CN": [
|
||||
{
|
||||
"name": "oxygen组件",
|
||||
"name": "ZanUI组件",
|
||||
"groups": [
|
||||
{
|
||||
"groupName": "CSS组件",
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
import navConfig from './nav.config.json';
|
||||
|
||||
const registerRoute = (navConfig) => {
|
||||
const registerRoute = (navConfig, isExample) => {
|
||||
let route = [];
|
||||
let navs = navConfig['zh-CN'];
|
||||
navs.forEach(nav => {
|
||||
@ -23,14 +21,14 @@ const registerRoute = (navConfig) => {
|
||||
route.push({
|
||||
path: '/component' + page.path,
|
||||
component: function(resolve) {
|
||||
require([`./examples-docs${page.path}.md`], resolve);
|
||||
require([isExample ? `./examples${page.path}.vue` : `./examples-docs${page.path}.md`], resolve);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// console.log(route);
|
||||
|
||||
return route;
|
||||
};
|
||||
|
||||
let route = registerRoute(navConfig);
|
||||
|
||||
export default route;
|
||||
export default registerRoute;
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Oxygen</title>
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<title>ZanUI</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Oxygen</title>
|
||||
<title>ZanUI</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"name": "@youzan/z-card",
|
||||
"version": "0.0.1",
|
||||
"description": "card component",
|
||||
"main": "./index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@youzan/z-panel",
|
||||
"version": "0.0.1",
|
||||
"description": "picker component",
|
||||
"description": "panel component",
|
||||
"main": "./index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"license": "MIT",
|
||||
|
||||
8
packages/steps/CHANGELOG.md
Normal file
8
packages/steps/CHANGELOG.md
Normal file
@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
26
packages/steps/README.md
Normal file
26
packages/steps/README.md
Normal file
@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
3
packages/steps/index.js
Normal file
3
packages/steps/index.js
Normal file
@ -0,0 +1,3 @@
|
||||
import Steps from './src/steps';
|
||||
|
||||
export default Steps;
|
||||
10
packages/steps/package.json
Normal file
10
packages/steps/package.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
18
packages/steps/src/steps.vue
Normal file
18
packages/steps/src/steps.vue
Normal file
@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2>author: {{ author }}</h2>
|
||||
<div>Hello {{ name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Sample',
|
||||
props: ['author'],
|
||||
data() {
|
||||
return {
|
||||
name: 'World'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -53,6 +53,7 @@
|
||||
}
|
||||
|
||||
@m normal {
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
@ -23,6 +23,7 @@
|
||||
}
|
||||
@b button-1 {
|
||||
@mixin button-wrap;
|
||||
padding-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
@b button-2 {
|
||||
|
||||
@ -14,3 +14,4 @@
|
||||
@import './radio.css';
|
||||
@import './switch.css';
|
||||
@import './panel.css';
|
||||
@import './steps.css';
|
||||
|
||||
0
packages/zanui-css/src/steps.css
Normal file
0
packages/zanui-css/src/steps.css
Normal file
@ -13,6 +13,7 @@ import Waterfall from '../packages/waterfall/index.js';
|
||||
import Loading from '../packages/loading/index.js';
|
||||
import Panel from '../packages/panel/index.js';
|
||||
import Card from '../packages/card/index.js';
|
||||
import Steps from '../packages/steps/index.js';
|
||||
|
||||
const install = function(Vue) {
|
||||
if (install.installed) return;
|
||||
@ -30,6 +31,7 @@ const install = function(Vue) {
|
||||
Vue.component(Loading.name, Loading);
|
||||
Vue.component(Panel.name, Panel);
|
||||
Vue.component(Card.name, Card);
|
||||
Vue.component(Steps.name, Steps);
|
||||
};
|
||||
|
||||
// auto install
|
||||
@ -54,5 +56,6 @@ module.exports = {
|
||||
Waterfall,
|
||||
Loading,
|
||||
Panel,
|
||||
Card
|
||||
Card,
|
||||
Steps
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user