blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
build/genExamples.js
View File

@ -4,7 +4,8 @@ var fs = require('fs');
var path = require('path');
var cheerio = require('cheerio');
var striptags = require('./strip-tags');
var Components = require('../components.json');
var navs = require('../docs/nav.config.json');
navs = navs['zh-CN'];
var parser = markdownIt('default', {
html: true
@ -69,17 +70,32 @@ parser.use(markdownItContainer, 'demo', {
});
var docsDir = path.resolve(__dirname, '../docs');
for (var item in Components) {
var itemMdFile = `${docsDir}/examples-docs/${item}.md`;
var components = [];
for (var i = 0; i < navs.length; i++) {
var navItem = navs[i];
if (!navItem.showInMobile) continue;
if (!navItem.groups) {
components.push(navs[i]);
} else {
for (var j = 0; j < navItem.groups.length; j++) {
components = components.concat(navItem.groups[j].list);
}
}
}
for (var i = 0; i < components.length; i++) {
var item = components[i];
var itemMdFile = `${docsDir}/examples-docs${item.path}.md`;
if (!fs.existsSync(itemMdFile)) {
continue;
}
var itemMd = fs.readFileSync(`${docsDir}/examples-docs/${item}.md`).toString();
var itemMd = fs.readFileSync(`${docsDir}/examples-docs${item.path}.md`).toString();
var content = parser.render(itemMd);
var result = renderVueTemplate(content, item);
var result = renderVueTemplate(content, item.path.slice(1));
var exampleVueName = `${docsDir}/examples-dist/${item}.vue`;
var exampleVueName = `${docsDir}/examples-dist/${item.path}.vue`;
// 新建一个文件
if (!fs.existsSync(exampleVueName)) {

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;

18
docs/examples-docs/cell.md
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>

5
docs/examples-docs/loading.md
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;
}
}
}

76
docs/examples-docs/search.md
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`输入框的值 |

41
packages/search/src/search.vue
View File

@ -2,7 +2,13 @@
<div class="zan-search" :class="{ 'zan-search--focus' : isFocus }">
<div class="zan-search__input-wrap">
<zan-icon name="search"></zan-icon>
<input type="text" :placeholder="placeholder" v-model="value" v-refocus="focusStatus" @focus="handleFocus" @keyup.enter="handleSearch">
<input
type="text"
:placeholder="placeholder"
v-model="value"
v-refocus="focusStatus"
@focus="handleFocus"
@keyup.enter="handleSearch">
<zan-icon name="clear" @click="handleClean"></zan-icon>
</div>
<div class="zan-search__cancel" :class="{ 'zan-search__cancel--focus' : isFocus }" @click="handleBack">取消</div>
@ -14,19 +20,21 @@
export default {
name: 'zan-search',
components: {
ZanIcon
},
props: {
placeholder: {
type: String
}
placeholder: String
},
watch: {
value(val) {
this.$emit('change', val);
}
},
data() {
return {
value: '',
@ -34,32 +42,47 @@
isFocus: false
};
},
directives: {
refocus: {
update: function(el, state) {
if (state.value) { el.focus(); }
if (state.value) {
el.focus();
}
}
}
},
methods: {
/**
* 进入input焦点，出现close和取消
*/
handleFocus() {
// 进入input焦点，出现close和取消
this.isFocus = true;
},
/**
* 点击close后清空vlaue后，再聚焦input框
*/
handleClean() {
// 点击close后清空vlaue后，再聚焦input框
this.value = '';
this.focusStatus = true;
},
/**
* 点击取消后，清空所有回复最初状态
*/
handleBack() {
// 点击取消后，清空所有回复最初状态
this.value = '';
this.focusStatus = false;
this.isFocus = false;
this.$emit('cancel');
},
/**
* input输入回车后，发送回调
*/
handleSearch() {
// input输入回车后，发送回调
this.$emit('search', this.value);
}
}

1
packages/zanui-css/src/cell.css
View File

@ -1,5 +1,6 @@
@import './common/var.css';
@import './mixins/border_retina.css';
@import './icon.css';
@component-namespace zan {
@b cell-group {

127
packages/zanui-css/src/search.css
View File

@ -1,69 +1,70 @@
@import './common/var.css';
@import './icon.css';
@component-namespace zan {
@b search {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
position: relative;
box-sizing: border-box;
padding: 4px 15px;
background-color: #F2F2F2;
@b search {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
position: relative;
box-sizing: border-box;
padding: 4px 15px;
background-color: #F2F2F2;
@m focus {
.zan-search__input-wrap {
width: 82%;
}
.zan-icon-clear {
display: inline-block;
}
}
@e input-wrap {
position: relative;
width: 90%;
padding: 8px 24px 8px 35px;
border: 1px solid $c-gray-light;
border-radius: 4px;
background-color: $c-white;
input {
width: 100%;
height: 14px;
font-size: 14px;
color: $c-gray-dark;
border: none;
outline: none;
}
}
@e cancel {
display: none;
color: #44BB00;
font-size: 14px;
white-space: nowrap;
margin-left: 5px;
@m focus {
display: block;
}
}
.zan-icon-search {
color: $c-gray-darker;
position: absolute;
top: 9px;
left: 10px;
font-size: 16px;
}
.zan-icon-clear {
display: none;
position: absolute;
right: 5px;
top: 8px;
color: #888;
}
@m focus {
.zan-search__input-wrap {
width: 82%;
}
.zan-icon-clear {
display: inline-block;
}
}
@e input-wrap {
position: relative;
width: 90%;
padding: 8px 24px 8px 35px;
border: 1px solid $c-gray-light;
border-radius: 4px;
background-color: $c-white;
input {
width: 100%;
height: 14px;
font-size: 14px;
color: $c-gray-dark;
border: none;
outline: none;
}
}
@e cancel {
display: none;
color: #44BB00;
font-size: 14px;
white-space: nowrap;
margin-left: 5px;
@m focus {
display: block;
}
}
.zan-icon-search {
color: $c-gray-darker;
position: absolute;
top: 9px;
left: 10px;
font-size: 16px;
}
.zan-icon-clear {
display: none;
position: absolute;
right: 5px;
top: 8px;
color: #888;
}
}
}

1
packages/zanui-css/src/steps.css
View File

@ -1,5 +1,6 @@
@import './common/var.css';
@import './mixins/ellipsis.css';
@import './icon.css';
@component-namespace zan {
@b steps {