ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-18 01:17:15 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

code review

Browse Source
This commit is contained in:
cookfront
2017-03-31 14:05:30 +08:00
parent a884fc4e4c
commit 4626b1483f
13 changed files with 303 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/examples-dist/cell.vue
View File

@@ -27,28 +27,14 @@
<zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link="">
<template slot="title">
<span class="zan-cell-text">起码运动馆</span>
<img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
<zan-tag type="danger">官方</zan-tag>
</template>
</zan-cell>
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></zan-cell>
</zan-cell-group>
</example-block></section></template>
<style>
@component-namespace demo {
@b card {
.official-img {
width: 31px;
vertical-align: middle;
border: 0;
}
.examples {
background-color: #fff;
}
}
}
</style>
<script>
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
export default {

55
docs/examples-dist/layout.vue Normal file
View File

@@ -0,0 +1,55 @@
<template><section class="demo-layout"><h1 class="demo-title">layout</h1><example-block title="常规用法">
<zan-row>
<zan-col span="8">
<div class="gray"></div>
</zan-col>
<zan-col span="8">
<div class="white"></div>
</zan-col>
<zan-col span="8">
<div class="gray"></div>
</zan-col>
</zan-row>
<zan-row>
<zan-col offset="12" span="12">
<div class="gray"></div>
</zan-col>
</zan-row>
</example-block><example-block title="在列元素之间增加间距">
<zan-row gutter="10">
<zan-col span="8">
<div class="gray"></div>
</zan-col>
<zan-col span="8">
<div class="white"></div>
</zan-col>
<zan-col span="8">
<div class="gray"></div>
</zan-col>
</zan-row>
</example-block></section></template>
<style>
@component-namespace demo {
@b layout {
.zan-row {
padding: 0 20px;
}
.zan-col {
margin-bottom: 10px;
}
}
}
.gray {
height: 30px;
background: #666;
}
.white {
height: 30px;
background: #fff;
}
</style>
<script>
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>

5
docs/examples-dist/loading.vue
View File

@@ -24,7 +24,10 @@
.demo-loading__example--with-bg {
background-color: rgba(0, 0, 0, 0.5);
margin-bottom: 10px;
margin: 0 auto;
width: 80px;
padding: 25px 0;
border-radius: 10px;
}
}
}

11
docs/examples-dist/search.vue
View File

@@ -1,5 +1,11 @@
<template><section class="demo-search"><h1 class="demo-title">search</h1><example-block title="基础用法">
<zan-search placeholder="商品名称" @search="goSearch" @change="handleChange"></zan-search>
<zan-search placeholder="商品名称" @search="goSearch"></zan-search>
</example-block><example-block title="监听对应事件">
<zan-search placeholder="商品名称" @search="goSearch" @change="handleChange" @cancel="handleCancel"></zan-search>
</example-block></section></template>
@@ -13,6 +19,9 @@ export default {
},
handleChange(value) {
console.log(value);
},
handleCancel() {
alert('cancel');
}
}
};

47
docs/examples-dist/tab.vue
View File

@@ -7,17 +7,27 @@
<zan-tab title="选项五">内容五</zan-tab>
</zan-tabs>
</example-block><example-block title="禁用用法">
</example-block><example-block title="基础用法">
<zan-tabs :active="active">
<zan-tab title="选项一">内容一</zan-tab>
<zan-tab disable="" title="选项二" @disable="popalert">内容二</zan-tab>
<zan-tab title="选项二">内容二</zan-tab>
<zan-tab title="选项三">内容三</zan-tab>
<zan-tab title="选项四">内容四</zan-tab>
<zan-tab title="选项五">内容五</zan-tab>
</zan-tabs>
</example-block><example-block title="禁用tab">
<zan-tabs>
<zan-tab title="选项一">内容一</zan-tab>
<zan-tab title="选项二" disabled @disabled="popalert">内容二</zan-tab>
<zan-tab title="选项三">内容三</zan-tab>
<zan-tab title="选项四">内容四</zan-tab>
<zan-tab title="选项五">内容五</zan-tab>
</zan-tabs>
</example-block><example-block title="card样式用法">
</example-block><example-block title="card样式">
<zan-tabs type="card">
<zan-tab title="选项一">内容一</zan-tab>
<zan-tab title="选项二">内容二</zan-tab>
@@ -26,8 +36,8 @@
<zan-tab title="选项五">内容五</zan-tab>
</zan-tabs>
</example-block><example-block title="自定义样式用法">
<zan-tabs active="2" navclass="custom-tabwrap">
</example-block><example-block title="自定义样式">
<zan-tabs active="2" class="custom-tabwrap">
<zan-tab title="选项一" class="custom-pane">内容一</zan-tab>
<zan-tab title="选项二" class="custom-pane">内容二</zan-tab>
<zan-tab title="选项三" class="custom-pane">内容三</zan-tab>
@@ -36,6 +46,7 @@
</zan-tabs>
</example-block><example-block title="click事件">
<zan-tabs @click="handleTabClick">
<zan-tab title="选项一">内容一</zan-tab>
@@ -55,21 +66,31 @@
background-color: #fff;
padding: 20px;
}
.zan-tabs--card .zan-tab__pane {
background-color: transparent;
}
.custom-tabwrap .zan-tab-active {
color: #20a0ff;
}
.custom-tabwrap .zan-tabs-nav-bar {
background: #20a0ff;
}
.custom-pane {
text-align: center;
height: 50px;
line-height: 50px;
}
}
}
</style><style>
.page-tab {
padding: 0 15px;
}
.custom-tabwrap .zan-tab-active{
.custom-tabwrap .zan-tab-active {
color: #20a0ff;
}
.custom-tabwrap .zan-tabs-nav-bar{
.custom-tabwrap .zan-tabs-nav-bar {
background: #20a0ff;
}
.custom-tab {
font-weight: bold;
}
.custom-pane {
text-align: center;
height: 50px;