mirror of
https://github.com/youzan/vant.git
synced 2025-10-20 02:31:21 +00:00
支持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:
@@ -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>
|
||||
|
@@ -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
|
||||
};
|
||||
},
|
||||
|
||||
|
@@ -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>
|
||||
```
|
||||
:::
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
```
|
||||
:::
|
||||
|
@@ -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
|
||||
```
|
||||
|
||||
#### 修改主题
|
||||
|
||||
修改你下载主题对应的样式即可,然后引入你修改后的主题。
|
||||
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
```
|
||||
:::
|
||||
|
||||
|
@@ -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 }}
|
||||
|
Reference in New Issue
Block a user