支持SSR、升级Vue版本和增加新的icon (#40)

* search component add new style

* update vue version and support ssr

* unit test

* add new icon

* new icon
This commit is contained in:
张敏
2017-06-15 19:46:56 +08:00
committed by Yao
parent 857da3a5ee
commit 0f5972e75e
59 changed files with 370 additions and 204 deletions

View File

@@ -101,7 +101,7 @@ export default {
:::demo 禁用状态
```html
<div class="van-checkbox-wrapper">
<van-checkbox v-model="checkbox2">复选框2</van-checkbox>
<van-checkbox v-model="checkbox2" disabled>复选框2</van-checkbox>
</div>
<script>
@@ -124,7 +124,7 @@ export default {
```html
<div class="van-checkbox-wrapper">
<van-checkbox-group v-model="result">
<van-checkbox v-for="item in list" :name="item">复选框{{item}}</van-checkbox>
<van-checkbox v-for="(item, index) in list" :key="index" :name="item">复选框{{item}}</van-checkbox>
</van-checkbox-group>
</div>
@@ -159,7 +159,7 @@ export default {
```html
<div class="van-checkbox-wrapper">
<van-checkbox-group v-model="result" disabled>
<van-checkbox v-for="item in list" :name="item">复选框{{item}}</van-checkbox>
<van-checkbox v-for="(item, index) in list" :key="index" :name="item">复选框{{item}}</van-checkbox>
</van-checkbox-group>
</div>
@@ -188,7 +188,7 @@ export default {
```html
<van-checkbox-group v-model="result">
<van-cell-group>
<van-cell v-for="item in list">
<van-cell v-for="(item, index) in list" :key="index">
<van-checkbox :name="item">复选框{{item}}</van-checkbox>
</van-cell>
</van-cell-group>

View File

@@ -73,13 +73,13 @@ export default {
</van-datetime-picker>
<script>
export default {
data() {
return {
minHour: 10,
maxHour: 20,
minDate: new Date()
minDate: new Date(),
currentDate: null
};
},

View File

@@ -3,6 +3,7 @@
@b icon {
.van-col {
text-align: center;
height: 120px;
}
.van-icon {
@@ -176,18 +177,42 @@ export default {
<van-icon name="password-view"></van-icon>
<span>password-view</span>
</van-col>
<van-col span="8">
<van-icon name="password-not-view"></van-icon>
<span>password-not-view</span>
</van-col>
<van-col span="8">
<van-icon name="wap-nav"></van-icon>
<span>wap-nav</span>
</van-col>
<van-col span="8">
<van-icon name="password-not-view"></van-icon>
<span>password-not-view</span>
</van-col>
<van-col span="8">
<van-icon name="wap-home"></van-icon>
<span>wap-home</span>
</van-col>
<van-col span="8">
<van-icon name="ecard-pay"></van-icon>
<span>ecard-pay</span>
</van-col>
<van-col span="8">
<van-icon name="balance-pay"></van-icon>
<span>balance-pay</span>
</van-col>
<van-col span="8">
<van-icon name="peer-pay"></van-icon>
<span>peer-pay</span>
</van-col>
<van-col span="8">
<van-icon name="credit-pay"></van-icon>
<span>credit-pay</span>
</van-col>
<van-col span="8">
<van-icon name="debit-pay"></van-icon>
<span>debit-pay</span>
</van-col>
<van-col span="8">
<van-icon name="other-pay"></van-icon>
<span>other-pay</span>
</van-col>
</van-row>
```
:::

View File

@@ -69,7 +69,7 @@ Vue.use(Lazyload, options);
:::demo 基础用法
```html
<ul class="image-list" ref="container">
<li v-for="img in imageList">
<li v-for="(img, index) in imageList" :key="index">
<img class="lazy-img" v-lazy="img">
</li>
</ul>
@@ -100,7 +100,7 @@ export default {
:::demo 背景图懒加载
```html
<ul class="image-list" ref="container">
<li v-for="img in backgroundImageList">
<li v-for="(img, index) in backgroundImageList" :key="index">
<div class="lazy-background" v-lazy:background-image="img"></div>
</li>
</ul>
@@ -128,7 +128,7 @@ export default {
```html
<lazy-component @show="handleComponentShow">
<ul class="image-list">
<li v-for="img in componentImageList">
<li v-for="(img, index) in componentImageList" :key="index">
<img class="lazy-img" v-lazy="img">
</li>
</ul>

View File

@@ -71,13 +71,13 @@ export default {
:::demo Inactive
```html
<div class="demo-progress__wrapper">
<van-progress class="demo-progress__demo1" :inactive="true" :percentage="0"></van-progress>
<van-progress class="demo-progress__demo1" inactive :percentage="0"></van-progress>
</div>
<div class="demo-progress__wrapper">
<van-progress class="demo-progress__demo2" :inactive="true" :percentage="46"></van-progress>
<van-progress class="demo-progress__demo2" inactive :percentage="46"></van-progress>
</div>
<div class="demo-progress__wrapper">
<van-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></van-progress>
<van-progress class="demo-progress__demo1" inactive :percentage="100"></van-progress>
</div>
```
:::

View File

@@ -1,7 +1,7 @@
## Vant
一套`Vue 2.0`基础组件
<br>A collection of essential UI components written with Vue 2.0.
一套基于`Vue.js 2.0`Mobile组件
<br>A Vue.js 2.0 Mobile UI
### 安装
@@ -32,3 +32,25 @@ import 'vant/lib/vant-css/cell.css';
Vue.component(Button.name, Button);
Vue.component(Cell.name, Cell);
```
### 自定义主题
`Vant`默认提供一套主题,`CSS`命名采用`BEM`的风格方便使用者覆盖样式。如果你想完全替换主题色或者部分样式,可以使用下面的方法:
#### 下载主题
可以通过Github或npm来下载主题
```shell
# npm
npm i vant-css -D
# github
git clone git@github.com:youzan/vant.git
cd packages/vant-css
```
#### 修改主题
修改你下载主题对应的样式即可,然后引入你修改后的主题。

View File

@@ -77,7 +77,7 @@ export default {
:::demo 基础用法
```html
<van-swipe>
<van-swipe-item v-for="img in images">
<van-swipe-item v-for="(img, index) in images" :key="index">
<a href="https://youzan.com" target="_blank">
<img v-lazy="img" alt="">
</a>
@@ -106,7 +106,7 @@ export default {
:::demo 自动轮播
```html
<van-swipe auto-play @pagechange:end="handlePageEnd">
<van-swipe-item v-for="img in autoImages">
<van-swipe-item v-for="(img, index) in autoImages" :key="index">
<img v-lazy="img" alt="">
</van-swipe-item>
</van-swipe>

View File

@@ -128,11 +128,11 @@ export default {
```html
<van-row>
<van-col span="12">
<van-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></van-switch>
<van-switch class="some-customized-class" v-model="switchStateTrue" disabled></van-switch>
<div class="demo-switch__text">打开</div>
</van-col>
<van-col span="12">
<van-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></van-switch>
<van-switch class="some-customized-class" v-model="switchStateFalse" disabled></van-switch>
<div class="demo-switch__text">关闭</div>
</van-col>
</van-row>
@@ -158,11 +158,11 @@ export default {
```html
<van-row>
<van-col span="12">
<van-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></van-switch>
<van-switch class="some-customized-class" v-model="switchStateTrue" loading></van-switch>
<div class="demo-switch__text">打开</div>
</van-col>
<van-col span="12">
<van-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></van-switch>
<van-switch class="some-customized-class" v-model="switchStateFalse" loading></van-switch>
<div class="demo-switch__text">关闭</div>
</van-col>
</van-row>

View File

@@ -3,6 +3,7 @@
padding: 5px 15px;
}
</style>
<script>
export default {
methods: {
@@ -57,6 +58,16 @@ export default {
<van-icon name="photograph"></van-icon>
</van-uploader>
</div>
<script>
export default {
methods: {
logContent(file) {
console.log(file)
}
}
};
</script>
```
:::

View File

@@ -105,7 +105,8 @@ export default {
>
<div
class="waterfall-item"
v-for="item in list"
v-for="(item, index) in list"
:key="index"
style="text-align: center;"
>
{{ item }}