blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-24 02:16:12 +08:00
Code Issues Projects Releases Wiki Activity

Merge branch 'feature/code_review'

Browse Source
This commit is contained in:
cookfront 2017-03-31 20:14:07 +08:00
commit 1295e00682
12 changed files with 282 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
build/bin/build-entry.js
View File

@ -3,6 +3,7 @@ var fs = require('fs');
var render = require('json-templater/string'); var render = require('json-templater/string');
var uppercamelcase = require('uppercamelcase'); var uppercamelcase = require('uppercamelcase');
var path = require('path'); var path = require('path');
var chalk = require('chalk');
var OUTPUT_PATH = path.join(__dirname, '../../src/index.js'); var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');
var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';'; var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';
@ -70,5 +71,5 @@ var template = render(MAIN_TEMPLATE, {
}); });
fs.writeFileSync(OUTPUT_PATH, template); fs.writeFileSync(OUTPUT_PATH, template);
console.log('[build entry] DONE:', OUTPUT_PATH); console.log(chalk.green('[build entry] DONE:' + OUTPUT_PATH));

3
build/genExamples.js
View File

@ -3,6 +3,7 @@ var markdownItContainer = require('markdown-it-container');
var fs = require('fs'); var fs = require('fs');
var path = require('path'); var path = require('path');
var cheerio = require('cheerio'); var cheerio = require('cheerio');
var chalk = require('chalk');
var striptags = require('./strip-tags'); var striptags = require('./strip-tags');
var navs = require('../docs/nav.config.json'); var navs = require('../docs/nav.config.json');
navs = navs['zh-CN']; navs = navs['zh-CN'];
@ -106,5 +107,5 @@ for (var i = 0; i < components.length; i++) {
}); });
} }
console.log('generate examples success!'); console.log(chalk.green('generate examples success!'));

30
build/webpack.config.js
View File

@ -48,7 +48,7 @@ module.exports = {
path.join(__dirname, '../node_modules'), path.join(__dirname, '../node_modules'),
'node_modules' 'node_modules'
], ],
extensions: ['.js', '.vue', '.pcss'], extensions: ['.js', '.vue', '.css'],
alias: { alias: {
'vue$': 'vue/dist/vue.runtime.common.js', 'vue$': 'vue/dist/vue.runtime.common.js',
'zanui': path.join(__dirname, '..'), 'zanui': path.join(__dirname, '..'),
@ -97,20 +97,7 @@ module.exports = {
}, },
devtool: 'source-map', devtool: 'source-map',
plugins: [ plugins: [
StyleExtractPlugin,
new ProgressBarPlugin(), new ProgressBarPlugin(),
new HtmlWebpackPlugin({
chunks: ['vendor', 'zan-docs'],
template: 'docs/index.tpl',
filename: 'index.html',
inject: true
}),
new HtmlWebpackPlugin({
chunks: ['vendor', 'zan-examples'],
template: 'docs/index.tpl',
filename: 'examples.html',
inject: true
}),
new webpack.LoaderOptionsPlugin({ new webpack.LoaderOptionsPlugin({
minimize: true, minimize: true,
options: { options: {
@ -160,7 +147,20 @@ module.exports = {
} }
} }
} }
}) }),
new HtmlWebpackPlugin({
chunks: ['vendor', 'zan-docs'],
template: 'docs/index.tpl',
filename: 'index.html',
inject: true
}),
new HtmlWebpackPlugin({
chunks: ['vendor', 'zan-examples'],
template: 'docs/index.tpl',
filename: 'examples.html',
inject: true
}),
StyleExtractPlugin
] ]
}; };

2
docs/components/mobile-popup.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<zan-popup v-model="currentValue"> <zan-popup v-model="currentValue" :lock-on-scroll="true">
<div class="mobile-popup"> <div class="mobile-popup">
<iframe :src="url" class="mobile-popup-iframe"></iframe> <iframe :src="url" class="mobile-popup-iframe"></iframe>
</div> </div>

102
docs/examples-dist/popup.vue
View File

@ -1,59 +1,44 @@
<template><section class="demo-popup"><h1 class="demo-title">popup</h1><example-block title="基础用法"> <template><section class="demo-popup"><h1 class="demo-title">popup</h1><example-block title="基础用法">
<div class="zan-row"> <zan-button block="" @click="popupShow1 = true">从中间弹出popup</zan-button>
<zan-button @click="popupShow1 = true;">从下方弹出popup</zan-button> <zan-popup v-model="popupShow1" class="zan-popup-1">
</div>
<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
<zan-button @click="showDialog">弹出dialog</zan-button>
</zan-popup>
<div class="zan-row">
<zan-button @click="popupShow2 = true">从上方弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow2" position="top" class="zan-popup-2" :overlay="false">
更新成功
</zan-popup>
<div class="zan-row">
<zan-button @click="popupShow3 = true">从右方弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow3" position="right" class="zan-popup-3" :overlay="false">
<zan-button @click.native="popupShow3 = false">关闭 popup</zan-button>
</zan-popup>
<div class="zan-row">
<zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow4" class="zan-popup-4">
从中间弹出popup 从中间弹出popup
</zan-popup> </zan-popup>
</example-block><example-block title="从不同位置弹出菜单">
<zan-button block="" @click="popupShow2 = true;">从下方弹出popup</zan-button>
<zan-popup v-model="popupShow2" position="bottom" class="zan-popup-2">
<zan-button @click="showDialog">弹出dialog</zan-button>
</zan-popup>
<zan-button block="" @click="popupShow3 = true">从上方弹出popup</zan-button>
<zan-popup v-model="popupShow3" position="top" class="zan-popup-3" :overlay="false">
更新成功
</zan-popup>
<zan-button block="" @click="popupShow4 = true">从右方弹出popup</zan-button>
<zan-popup v-model="popupShow4" position="right" class="zan-popup-4" :overlay="false">
<zan-button @click.native="popupShow4 = false">关闭 popup</zan-button>
</zan-popup>
<zan-button block="" @click="popupShow5 = true">从左方弹出popup</zan-button>
<zan-popup v-model="popupShow5" position="left" class="zan-popup-5" :overlay="false">
<zan-button @click.native="popupShow5 = false">关闭 popup</zan-button>
</zan-popup>
</example-block></section></template> </example-block></section></template>
<style> <style>
@component-namespace demo { @component-namespace demo {
@b popup { @b popup {
.examples,
.example-block {
padding: 0 15px;
}
.zan-popup-1 { .zan-popup-1 {
width: 100%;
height: 200px;
box-sizing: border-box;
padding: 20px;
}
.zan-popup-2 {
line-height: 50px;
text-align: center;
background-color: rgba(0, 0, 0, 0.701961);
color: #fff;
}
.zan-popup-3 {
width: 100%;
height: 100%;
}
.zan-popup-4 {
width: 60%; width: 60%;
box-sizing: border-box; box-sizing: border-box;
padding: 20px; padding: 20px;
@ -61,8 +46,28 @@
text-align: center; text-align: center;
} }
.zan-popup-2 {
width: 100%;
height: 200px;
box-sizing: border-box;
padding: 20px;
}
.zan-popup-3 {
line-height: 50px;
text-align: center;
background-color: rgba(0, 0, 0, 0.701961);
color: #fff;
}
.zan-popup-4,
.zan-popup-4 {
width: 100%;
height: 100%;
}
.zan-button { .zan-button {
margin: 15px; margin: 10px 0;
} }
} }
} }
@ -80,15 +85,16 @@ export default {
popupShow1: false, popupShow1: false,
popupShow2: false, popupShow2: false,
popupShow3: false, popupShow3: false,
popupShow4: false popupShow4: false,
popupShow5: false
} }
}, },
watch: { watch: {
popupShow2(val) { popupShow3(val) {
if (val) { if (val) {
setTimeout(() => { setTimeout(() => {
this.popupShow2 = false; this.popupShow3 = false;
}, 2000); }, 2000);
} }
} }

148
docs/examples-docs/popup.md
View File

@ -1,26 +1,12 @@
<style> <style>
@component-namespace demo { @component-namespace demo {
@b popup { @b popup {
.examples,
.example-block {
padding: 0 15px;
}
.zan-popup-1 { .zan-popup-1 {
width: 100%;
height: 200px;
box-sizing: border-box;
padding: 20px;
}
.zan-popup-2 {
line-height: 50px;
text-align: center;
background-color: rgba(0, 0, 0, 0.701961);
color: #fff;
}
.zan-popup-3 {
width: 100%;
height: 100%;
}
.zan-popup-4 {
width: 60%; width: 60%;
box-sizing: border-box; box-sizing: border-box;
padding: 20px; padding: 20px;
@ -28,8 +14,28 @@
text-align: center; text-align: center;
} }
.zan-popup-2 {
width: 100%;
height: 200px;
box-sizing: border-box;
padding: 20px;
}
.zan-popup-3 {
line-height: 50px;
text-align: center;
background-color: rgba(0, 0, 0, 0.701961);
color: #fff;
}
.zan-popup-4,
.zan-popup-5 {
width: 100%;
height: 100%;
}
.zan-button { .zan-button {
margin: 15px; margin: 10px 0;
} }
} }
} }
@ -47,15 +53,16 @@ export default {
popupShow1: false, popupShow1: false,
popupShow2: false, popupShow2: false,
popupShow3: false, popupShow3: false,
popupShow4: false popupShow4: false,
popupShow5: false
} }
}, },
watch: { watch: {
popupShow2(val) { popupShow3(val) {
if (val) { if (val) {
setTimeout(() => { setTimeout(() => {
this.popupShow2 = false; this.popupShow3 = false;
}, 2000); }, 2000);
} }
} }
@ -78,36 +85,85 @@ export default {
## Popup 弹出菜单 ## Popup 弹出菜单
### 基础用法 ### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
#### 全局注册
你可以在全局注册`Popup`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Popup`组件了：
```js
import Vue from 'vue';
import { Popup } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/popup.css';
Vue.component(Popup.name, Popup);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Popup`组件，这样只能在你注册的组件中使用`Popup`：
```js
import { Popup } from '@youzan/zanui-vue';
export default {
components: {
'zan-popup': Popup
}
};
```
### 代码演示
#### 基础用法
`popup`默认情况下是从中间弹出。
:::demo 基础用法 :::demo 基础用法
```html ```html
<div class="zan-row"> <zan-button block @click="popupShow1 = true">从中间弹出popup</zan-button>
<zan-button @click="popupShow1 = true;">从下方弹出popup</zan-button> <zan-popup v-model="popupShow1" class="zan-popup-1">
</div> 从中间弹出popup
<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1"> </zan-popup>
<script>
export default {
data() {
return {
popupShow1: false
}
}
};
</script>
```
:::
#### 从不同位置弹出菜单
可以设置`position`属性，`popup`即能从不同位置弹出，`position`的可选值有`top`，`bottom`，`right`，`left`。
:::demo 从不同位置弹出菜单
```html
<zan-button block @click="popupShow2 = true;">从下方弹出popup</zan-button>
<zan-popup v-model="popupShow2" position="bottom" class="zan-popup-2">
<zan-button @click="showDialog">弹出dialog</zan-button> <zan-button @click="showDialog">弹出dialog</zan-button>
</zan-popup> </zan-popup>
<div class="zan-row"> <zan-button block @click="popupShow3 = true">从上方弹出popup</zan-button>
<zan-button @click="popupShow2 = true">从上方弹出popup</zan-button> <zan-popup v-model="popupShow3" position="top" class="zan-popup-3" :overlay="false">
</div>
<zan-popup v-model="popupShow2" position="top" class="zan-popup-2" :overlay="false">
更新成功 更新成功
</zan-popup> </zan-popup>
<div class="zan-row"> <zan-button block @click="popupShow4 = true">从右方弹出popup</zan-button>
<zan-button @click="popupShow3 = true">从右方弹出popup</zan-button> <zan-popup v-model="popupShow4" position="right" class="zan-popup-4" :overlay="false">
</div> <zan-button @click.native="popupShow4 = false">关闭 popup</zan-button>
<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-row"> <zan-button block @click="popupShow5 = true">从左方弹出popup</zan-button>
<zan-button @click="popupShow4 = true">从中间弹出popup</zan-button> <zan-popup v-model="popupShow5" position="left" class="zan-popup-5" :overlay="false">
</div> <zan-button @click.native="popupShow5 = false">关闭 popup</zan-button>
<zan-popup v-model="popupShow4" class="zan-popup-4">
从中间弹出popup
</zan-popup> </zan-popup>
<script> <script>
@ -132,7 +188,6 @@ export default {
} }
}; };
</script> </script>
``` ```
::: :::
@ -145,4 +200,9 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| value | 利用`v-model`绑定当前组件是否显示 | `boolean` | | | | value | 利用`v-model`绑定当前组件是否显示 | `boolean` | `false` | `true`, `false` |
| overlay | 是否显示背景遮罩层 | `boolean` | `true` | `true`, `false` |
| lockOnScroll | 背景是否跟随滚动 | `boolean` | `false` | `true`, `false` |
| position | 弹出菜单位置 | `string` | | `top`, `bottom`, `right`, `left` |
| closeOnClickOverlay | 点击遮罩层是否关闭弹出菜单 | `boolean` | `true` | `true`, `false` |
| transition | 弹出菜单的`transition` | `string` | `popup-slide` | |

40
docs/examples-docs/quantity.md
View File

@ -25,7 +25,39 @@ export default {
## Quantity 数量选择 ## Quantity 数量选择
### 基础用法 ### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
#### 全局注册
你可以在全局注册`Quantity`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Quantity`组件了：
```js
import Vue from 'vue';
import { Quantity } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/quantity.css';
Vue.component(Quantity.name, Quantity);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Quantity`组件，这样只能在你注册的组件中使用`Quantity`：
```js
import { Quantity } from '@youzan/zanui-vue';
export default {
components: {
'zan-quantity': Quantity
}
};
```
### 代码演示
#### 基础用法
:::demo 基础用法 :::demo 基础用法
```html ```html
@ -34,7 +66,9 @@ export default {
``` ```
::: :::
### 禁用Quantity #### 禁用Quantity
设置`disabled`属性，此时`quantity`不可改变。
:::demo 禁用Quantity :::demo 禁用Quantity
```html ```html
@ -42,7 +76,7 @@ export default {
``` ```
::: :::
### 高级用法 #### 高级用法
默认是每次加减为1，可以对组件设置`step`、`min`、`max`、`defaultValue`属性。 默认是每次加减为1，可以对组件设置`step`、`min`、`max`、`defaultValue`属性。

38
docs/examples-docs/swipe.md
View File

@ -24,7 +24,41 @@ export default {
## Swipe 轮播 ## Swipe 轮播
### 基础用法 ### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
#### 全局注册
你可以在全局注册`Swipe`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Swipe`组件了：
```js
import Vue from 'vue';
import { Swipe, SwipeItem } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/swipe.css';
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Swipe`组件，这样只能在你注册的组件中使用`Swipe`：
```js
import { Swipe, SwipeItem } from '@youzan/zanui-vue';
export default {
components: {
'zan-swipe': Swipe,
'zam-swipe-item': SwipeItem
}
};
```
### 代码演示
#### 基础用法
:::demo 基础用法 :::demo 基础用法
```html ```html
@ -39,7 +73,7 @@ export default {
``` ```
::: :::
### 自动轮播 #### 自动轮播
:::demo 自动轮播 :::demo 自动轮播
```html ```html

1
package.json
View File

@ -62,6 +62,7 @@
"babel-preset-es2015": "^6.16.0", "babel-preset-es2015": "^6.16.0",
"babel-runtime": "^6.11.0", "babel-runtime": "^6.11.0",
"chai": "^3.5.0", "chai": "^3.5.0",
"chalk": "^1.1.3",
"cheerio": "^0.22.0", "cheerio": "^0.22.0",
"copy-webpack-plugin": "^4.0.1", "copy-webpack-plugin": "^4.0.1",
"cp-cli": "^1.0.2", "cp-cli": "^1.0.2",

7
packages/quantity/src/quantity.vue
View File

@ -7,7 +7,12 @@
'zan-quantity__minus--disabled': isMinusDisabled 'zan-quantity__minus--disabled': isMinusDisabled
}"> }">
</button> </button>
<input type="text" class="zan-quantity__input" :value="currentValue" @input="handleInputChange" :disabled="disabled"> <input
type="text"
class="zan-quantity__input"
:value="currentValue"
@input="handleInputChange"
:disabled="disabled">
<button <button
@click="handleChange('plus')" @click="handleChange('plus')"
class="zan-quantity__stepper zan-quantity__plus" class="zan-quantity__stepper zan-quantity__plus"

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

@ -5,13 +5,14 @@
<input <input
type="text" type="text"
:placeholder="placeholder" :placeholder="placeholder"
class="zan-search__input"
v-model="value" v-model="value"
v-refocus="focusStatus" v-refocus="focusStatus"
@focus="handleFocus" @focus="handleFocus"
@keyup.enter="handleSearch"> @keyup.enter="handleSearch">
<zan-icon name="clear" @click="handleClean"></zan-icon> <zan-icon name="clear" @click="handleClean" v-show="isFocus"></zan-icon>
</div> </div>
<div class="zan-search__cancel" :class="{ 'zan-search__cancel--focus' : isFocus }" @click="handleBack">取消</div> <div class="zan-search__cancel" v-show="isFocus" @click="handleBack">取消</div>
</div> </div>
</template> </template>

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

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