支持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:
张敏
Yao
@@ -7,7 +7,7 @@
|
||||
|
||||
</example-block><example-block title="禁用状态">
|
||||
<div class="van-checkbox-wrapper">
|
||||
<van-checkbox v-model="checkbox2">复选框2</van-checkbox>
|
||||
<van-checkbox v-model="checkbox2" disabled>复选框2</van-checkbox>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
</example-block><example-block title="Checkbox组">
|
||||
<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>
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
</example-block><example-block title="禁用Checkbox组">
|
||||
<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>
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
</example-block><example-block title="与Cell组件一起使用">
|
||||
<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>
|
||||
|
||||
@@ -120,18 +120,42 @@
|
||||
<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>
|
||||
|
||||
</example-block></section></template>
|
||||
@@ -140,6 +164,7 @@
|
||||
@b icon {
|
||||
.van-col {
|
||||
text-align: center;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template><section class="demo-lazyload"><h1 class="demo-title">Lazyload 图片懒加载</h1><example-block title="基础用法">
|
||||
<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>
|
||||
@@ -9,7 +9,7 @@
|
||||
|
||||
</example-block><example-block title="背景图懒加载">
|
||||
<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>
|
||||
@@ -19,7 +19,7 @@
|
||||
</example-block><example-block title="懒加载模块">
|
||||
<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>
|
||||
|
||||
@@ -11,13 +11,13 @@
|
||||
|
||||
</example-block><example-block title="Inactive">
|
||||
<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>
|
||||
|
||||
</example-block><example-block title="自定义颜色和文字">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template><section class="demo-swipe"><h1 class="demo-title">Swipe 轮播</h1><example-block title="基础用法">
|
||||
<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>
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
</example-block><example-block title="自动轮播">
|
||||
<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>
|
||||
|
||||
@@ -17,11 +17,11 @@
|
||||
</example-block><example-block title="禁用状态">
|
||||
<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>
|
||||
@@ -31,11 +31,11 @@
|
||||
</example-block><example-block title="loading状态">
|
||||
<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>
|
||||
|
||||
@@ -5,6 +5,8 @@
|
||||
</van-uploader>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
.uploader-container {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<p class="page-desc">当即将滚动到元素底部时，会自动加载更多</p>
|
||||
<div class="waterfall">
|
||||
<div v-waterfall-lower="loadMore" waterfall-disabled="isWaterfallDisabled" waterfall-offset="400">
|
||||
<div class="waterfall-item" v-for="item in list" style="text-align: center;">
|
||||
<div class="waterfall-item" v-for="(item, index) in list" :key="index" style="text-align: center;">
|
||||
{{ item }}
|
||||
</div>
|
||||
<van-loading v-if="loading" :type="'circle'" :color="'black'"></van-loading>
|
||||
|
||||
@@ -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 }}
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
<h1 class="zanui-title">Zan UI Wap</h1>
|
||||
<h2 class="zanui-desc">有赞移动wap端组件库</h2>
|
||||
<div class="mobile-navs">
|
||||
<template v-for="item in data">
|
||||
<div class="mobile-nav-item" v-if="item.showInMobile">
|
||||
<mobile-nav v-for="(group, index) in item.groups" :group="group" :base="base" :nav-key="index"></mobile-nav>
|
||||
<template v-for="(item, index) in data">
|
||||
<div class="mobile-nav-item" v-if="item.showInMobile" :key="index">
|
||||
<mobile-nav v-for="(group, index) in item.groups" :group="group" :base="base" :nav-key="index" :key="index"></mobile-nav>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@@ -10,8 +10,9 @@
|
||||
</div>
|
||||
<div class="mobile-nav-group__list-wrapper" :class="{ 'mobile-nav-group__list-wrapper--open': isOpen }">
|
||||
<ul class="mobile-nav-group__list" :class="{ 'mobile-nav-group__list--open': isOpen }">
|
||||
<template v-for="navItem in group.list">
|
||||
<template v-for="(navItem, index) in group.list">
|
||||
<li
|
||||
:key="index"
|
||||
class="mobile-nav-group__title"
|
||||
v-if="!navItem.disabled">
|
||||
<router-link
|
||||
|
||||
@@ -9,13 +9,13 @@
|
||||
<a href="https://www.youzanyun.com/zanui" class="page-header__link">首页</a>
|
||||
</li>
|
||||
<li class="page-header__item">
|
||||
<a href="https://www.youzanyun.com/zanui/react" class="page-header__link">PC端</a>
|
||||
<a href="https://www.youzanyun.com/zanui/react" class="page-header__link">Zent - PC端</a>
|
||||
</li>
|
||||
<li class="page-header__item">
|
||||
<a href="https://www.youzanyun.com/zanui/vue" class="page-header__link page-header__link--active">移动端</a>
|
||||
<a href="https://www.youzanyun.com/zanui/vue" class="page-header__link page-header__link--active">Vant - 移动端</a>
|
||||
</li>
|
||||
<li class="page-header__item">
|
||||
<a href="https://github.com/youzan/zanui-weapp" class="page-header__link">微信小程序</a>
|
||||
<a href="https://github.com/youzan/zanui-weapp" class="page-header__link">ZanUi-WeApp - 微信小程序</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="side-nav">
|
||||
<ul>
|
||||
<li class="nav-item" v-for="item in data">
|
||||
<li class="nav-item" v-for="(item, index) in data" :key="index">
|
||||
<a href="javascript:void(0)" v-if="!item.path" @click="handleTitleClick(item)">{{item.name}}</a>
|
||||
<router-link
|
||||
v-else
|
||||
@@ -11,7 +11,7 @@
|
||||
v-text="item.title || item.name">
|
||||
</router-link>
|
||||
<ul class="pure-menu-list sub-nav" v-if="item.children">
|
||||
<li class="nav-item" v-for="navItem in item.children">
|
||||
<li class="nav-item" v-for="(navItem, index) in item.children" :key="index">
|
||||
<router-link
|
||||
active-class="active"
|
||||
:to="base + navItem.path"
|
||||
@@ -20,11 +20,12 @@
|
||||
</li>
|
||||
</ul>
|
||||
<template v-if="item.groups">
|
||||
<div class="nav-group" v-for="group in item.groups">
|
||||
<div class="nav-group" v-for="(group, index) in item.groups" :key="index">
|
||||
<div class="nav-group__title">{{group.groupName}}</div>
|
||||
<ul class="pure-menu-list">
|
||||
<template v-for="navItem in group.list">
|
||||
<template v-for="(navItem, index) in group.list">
|
||||
<li
|
||||
:key="index"
|
||||
class="nav-item"
|
||||
v-if="!navItem.disabled">
|
||||
<router-link
|
||||
|
||||
@@ -25,8 +25,12 @@ const router = new VueRouter({
|
||||
base: '/zanui/vue/examples',
|
||||
routes: routesConfig
|
||||
});
|
||||
router.afterEach((route, redirect, next) => {
|
||||
document.querySelector('.examples-container').scrollTop = 0;
|
||||
router.beforeEach((to, from, next) => {
|
||||
const container = document.querySelector('.examples-container');
|
||||
if (container) {
|
||||
document.querySelector('.examples-container').scrollTop = 0;
|
||||
}
|
||||
next()
|
||||
});
|
||||
|
||||
new Vue({ // eslint-disable-line
|
||||
|
||||
Reference in New Issue
Block a user