Skip to content

Commit 09c618d

Browse files
chenjiahanchenjiahan
authored
[Doc] Button: add route demo (youzan#4068)
1 parent bc4323b commit 09c618d

8 files changed

Lines changed: 54 additions & 14 deletions

File tree

‎src/button/README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,13 @@ Vue.use(Button);
7373
<van-button type="primary" size="mini">Mini</van-button>
7474
```
7575

76+
### Route
77+
78+
```html
79+
<van-button type="primary" url="//youzan.github.io/vant/mobile.html">URL</van-button>
80+
<van-button type="primary" to="index">Vue Router</van-button>
81+
```
82+
7683
## API
7784

7885
### Props

‎src/button/README.zh-CN.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,15 @@ Vue.use(Button);
8989
<van-button type="primary" size="mini">迷你按钮</van-button>
9090
```
9191

92+
### 页面导航
93+
94+
可以通过`url`属性进行 URL 跳转，或通过`to`属性进行路由跳转
95+
96+
```html
97+
<van-button type="primary" url="//youzan.github.io/vant/mobile.html">URL 跳转</van-button>
98+
<van-button type="primary" to="index">路由跳转</van-button>
99+
```
100+
92101
## API
93102

94103
### Props

‎src/button/demo/index.vue‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,19 @@
125125
{{ $t('mini') }}
126126
</van-button>
127127
</demo-block>
128+
129+
<demo-block :title="$t('router')">
130+
<van-button
131+
:text="$t('urlRoute')"
132+
type="primary"
133+
url="//youzan.github.io/vant/mobile.html"
134+
/>
135+
<van-button
136+
:text="$t('vueRoute')"
137+
type="primary"
138+
to="index"
139+
/>
140+
</demo-block>
128141
</demo-section>
129142
</template>
130143

@@ -151,7 +164,10 @@ export default {
151164
round: '圆形按钮',
152165
hairline: '细边框',
153166
hairlineButton: '细边框按钮',
154-
loadingText: '加载中...'
167+
loadingText: '加载中...',
168+
router: '页面导航',
169+
urlRoute: 'URL 跳转',
170+
vueRoute: '路由跳转'
155171
},
156172
'en-US': {
157173
type: 'Type',
@@ -173,7 +189,10 @@ export default {
173189
round: 'Round',
174190
hairline: 'Hairline',
175191
hairlineButton: 'Hairline',
176-
loadingText: 'Loading...'
192+
loadingText: 'Loading...',
193+
router: 'Router',
194+
urlRoute: 'URL',
195+
vueRoute: 'Vue Router'
177196
}
178197
}
179198
};

‎src/button/test/__snapshots__/demo.spec.js.snap‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,6 @@ exports[`renders demo correctly 1`] = `
3131
</span></button> <button class="van-button van-button--primary van-button--mini"><span class="van-button__text">
3232
迷你按钮
3333
</span></button></div>
34+
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">URL 跳转</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">路由跳转</span></button></div>
3435
</div>
3536
`;

‎src/cell/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,8 @@ Vue.use(Cell).use(CellGroup);
5757

5858
```html
5959
<van-cell-group>
60-
<van-cell title="Cell title" is-link url="//youzan.github.io/vant/mobile.html" />
61-
<van-cell title="Cell title" is-link to="index" />
60+
<van-cell title="URL" is-link url="//youzan.github.io/vant/mobile.html" />
61+
<van-cell title="Vue Router" is-link to="index" />
6262
</van-cell-group>
6363
```
6464

‎src/cell/README.zh-CN.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,13 +55,13 @@ Vue.use(Cell).use(CellGroup);
5555
<van-cell title="单元格" is-link arrow-direction="down" value="内容" />
5656
```
5757

58-
### 页面跳转
58+
### 页面导航
5959

60-
可以通过`url`属性进行页面跳转，或通过`to`属性进行 vue-router 跳转
60+
可以通过`url`属性进行 URL 跳转，或通过`to`属性进行路由跳转
6161

6262
```html
63-
<van-cell title="单元格" is-link url="//youzan.github.io/vant/mobile.html" />
64-
<van-cell title="单元格" is-link to="index" />
63+
<van-cell title="URL 跳转" is-link url="//youzan.github.io/vant/mobile.html" />
64+
<van-cell title="路由跳转" is-link to="index" />
6565
```
6666

6767
### 分组标题

‎src/cell/demo/index.vue‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -60,12 +60,12 @@
6060

6161
<demo-block :title="$t('router')">
6262
<van-cell
63-
:title="$t('cell')"
63+
:title="$t('urlRoute')"
6464
is-link
6565
url="//youzan.github.io/vant/mobile.html"
6666
/>
6767
<van-cell
68-
:title="$t('cell')"
68+
:title="$t('vueRoute')"
6969
is-link
7070
to="index"
7171
/>
@@ -122,7 +122,9 @@ export default {
122122
largeSize: '单元格大小',
123123
group: '分组',
124124
groupTitle: '分组标题',
125-
router: '页面跳转'
125+
router: '页面导航',
126+
urlRoute: 'URL 跳转',
127+
vueRoute: '路由跳转'
126128
},
127129
'en-US': {
128130
cell: 'Cell title',
@@ -132,7 +134,9 @@ export default {
132134
largeSize: 'Size',
133135
group: 'Group',
134136
groupTitle: 'Group Title',
135-
router: 'Router'
137+
router: 'Router',
138+
urlRoute: 'URL',
139+
vueRoute: 'Vue Router'
136140
}
137141
}
138142
};

‎src/cell/test/__snapshots__/demo.spec.js.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,11 +58,11 @@ exports[`renders demo correctly 1`] = `
5858
</div>
5959
<div>
6060
<div class="van-cell van-cell--clickable">
61-
<div class="van-cell__title"><span>单元格</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
61+
<div class="van-cell__title"><span>URL 跳转</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
6262
<!----></i>
6363
</div>
6464
<div class="van-cell van-cell--clickable">
65-
<div class="van-cell__title"><span>单元格</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
65+
<div class="van-cell__title"><span>路由跳转</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
6666
<!----></i>
6767
</div>
6868
</div>

0 commit comments

Comments
 (0)