alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 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
docs/examples-dist/cell.vue
+1 -15
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 {
docs/examples-dist/layout.vue
+55
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>
docs/examples-dist/loading.vue
+4 -1
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;
}
}
}
docs/examples-dist/search.vue
+10 -1
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');
}
}
};
docs/examples-dist/tab.vue
+34 -13
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;
docs/examples-docs/cell.md
+1 -17
View File
@@ -1,19 +1,3 @@
<style>
@component-namespace demo {
@b card {
.official-img {
width: 31px;
vertical-align: middle;
border: 0;
}
.examples {
background-color: #fff;
}
}
}
</style>
<script>
export default {
methods: {
@@ -118,7 +102,7 @@ export default {
<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>
docs/examples-docs/loading.md
+4 -1
View File
@@ -11,7 +11,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;
}
}
}
docs/examples-docs/search.md
+74 -2
View File
@@ -6,6 +6,9 @@ export default {
},
handleChange(value) {
console.log(value);
},
handleCancel() {
alert('cancel');
}
}
};
@@ -13,11 +16,46 @@ export default {
## Search 搜索
### 基础用法
### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
#### 全局注册
你可以在全局注册`Search`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Search`组件了：
```js
import Vue from 'vue';
import { Search } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/search.css';
Vue.component(Search.name, Search);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Search`组件，这样只能在你注册的组件中使用`Search`：
```js
import { Search } from '@youzan/zanui-vue';
export default {
components: {
'zan-search': Search
}
};
```
### 代码演示
#### 基础用法
如果你只需要在搜索时有个回调，只要监听一个`search`事件。
:::demo 基础用法
```html
<zan-search placeholder="商品名称" @search="goSearch" @change="handleChange"></zan-search>
<zan-search placeholder="商品名称" @search="goSearch"></zan-search>
<script>
export default {
methods: {
@@ -30,8 +68,42 @@ export default {
```
:::
#### 监听对应事件
除了`search`事件，还有`change`和`cancel`事件，`change`事件在`input`输入框每次`change`时触发，适用于实时搜索等，`cancel`在取消按钮点击时触发。
:::demo 监听对应事件
```html
<zan-search placeholder="商品名称" @search="goSearch" @change="handleChange" @cancel="handleCancel"></zan-search>
<script>
export default {
methods: {
goSearch(value) {
alert(value)
},
handleChange(value) {
console.log(value);
},
handleCancel() {
alert('cancel');
}
}
};
</script>
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| placeholder | `input`的`placeholder`文案 | `string` | | |
### Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| change | `input`输入框每次`change`时触发，适用于实时搜索等 | value：当前`input`输入框的值 |
| cancel | 取消搜索 | |
| search | 确定搜索 | value：当前`input`输入框的值 |