mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
chore: use preventDefault util (#4412)
This commit is contained in:
neverland
GitHub
parent
4b0cf5beda
commit
f6f696ff73
@ -25,21 +25,21 @@ Vue.use(Button);
|
||||
|
||||
```html
|
||||
<van-button plain type="primary">Primary</van-button>
|
||||
<van-button plain type="danger">Danger</van-button>
|
||||
<van-button plain type="info">Danger</van-button>
|
||||
```
|
||||
|
||||
### Hairline
|
||||
|
||||
```html
|
||||
<van-button plain hairline type="primary">Hairline</van-button>
|
||||
<van-button plain hairline type="danger">Hairline</van-button>
|
||||
<van-button plain hairline type="info">Hairline</van-button>
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
```html
|
||||
<van-button disabled type="primary">Diabled</van-button>
|
||||
<van-button disabled type="danger">Diabled</van-button>
|
||||
<van-button disabled type="info">Diabled</van-button>
|
||||
```
|
||||
|
||||
### Loading
|
||||
@ -47,14 +47,14 @@ Vue.use(Button);
|
||||
```html
|
||||
<van-button loading type="primary" />
|
||||
<van-button loading type="primary" loading-type="spinner" />
|
||||
<van-button loading type="danger" loading-text="Loading..." />
|
||||
<van-button loading type="info" loading-text="Loading..." />
|
||||
```
|
||||
|
||||
### Shape
|
||||
|
||||
```html
|
||||
<van-button square type="primary">Square</van-button>
|
||||
<van-button round type="danger">Round</van-button>
|
||||
<van-button round type="info">Round</van-button>
|
||||
```
|
||||
|
||||
### Icon
|
||||
@ -62,7 +62,7 @@ Vue.use(Button);
|
||||
```html
|
||||
<van-button icon="star-o" type="primary" />
|
||||
<van-button icon="star-o" type="primary">Button</van-button>
|
||||
<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="danger">Button</van-button>
|
||||
<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info">Button</van-button>
|
||||
```
|
||||
|
||||
### Size
|
||||
|
||||
@ -29,7 +29,7 @@ Vue.use(Button);
|
||||
|
||||
```html
|
||||
<van-button plain type="primary">朴素按钮</van-button>
|
||||
<van-button plain type="danger">朴素按钮</van-button>
|
||||
<van-button plain type="info">朴素按钮</van-button>
|
||||
```
|
||||
|
||||
### 细边框
|
||||
@ -38,7 +38,7 @@ Vue.use(Button);
|
||||
|
||||
```html
|
||||
<van-button plain hairline type="primary">细边框按钮</van-button>
|
||||
<van-button plain hairline type="danger">细边框按钮</van-button>
|
||||
<van-button plain hairline type="info">细边框按钮</van-button>
|
||||
```
|
||||
|
||||
### 禁用状态
|
||||
@ -47,7 +47,7 @@ Vue.use(Button);
|
||||
|
||||
```html
|
||||
<van-button disabled type="primary">禁用状态</van-button>
|
||||
<van-button disabled type="danger">禁用状态</van-button>
|
||||
<van-button disabled type="info">禁用状态</van-button>
|
||||
```
|
||||
|
||||
### 加载状态
|
||||
@ -57,7 +57,7 @@ Vue.use(Button);
|
||||
```html
|
||||
<van-button loading type="primary" />
|
||||
<van-button loading type="primary" loading-type="spinner" />
|
||||
<van-button loading type="danger" loading-text="加载中..." />
|
||||
<van-button loading type="info" loading-text="加载中..." />
|
||||
```
|
||||
|
||||
### 按钮形状
|
||||
@ -66,7 +66,7 @@ Vue.use(Button);
|
||||
|
||||
```html
|
||||
<van-button square type="primary">方形按钮</van-button>
|
||||
<van-button round type="danger">圆形按钮</van-button>
|
||||
<van-button round type="info">圆形按钮</van-button>
|
||||
```
|
||||
|
||||
### 图标按钮
|
||||
@ -76,7 +76,7 @@ Vue.use(Button);
|
||||
```html
|
||||
<van-button icon="star-o" type="primary" />
|
||||
<van-button icon="star-o" type="primary">按钮</van-button>
|
||||
<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="danger">按钮</van-button>
|
||||
<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info">按钮</van-button>
|
||||
```
|
||||
|
||||
### 按钮尺寸
|
||||
|
||||
@ -11,86 +11,34 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('plain')">
|
||||
<van-button
|
||||
plain
|
||||
type="primary"
|
||||
:text="$t('plain')"
|
||||
/>
|
||||
<van-button
|
||||
plain
|
||||
type="danger"
|
||||
:text="$t('plain')"
|
||||
/>
|
||||
<van-button plain type="primary" :text="$t('plain')" />
|
||||
<van-button plain type="info" :text="$t('plain')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('hairline')">
|
||||
<van-button
|
||||
plain
|
||||
hairline
|
||||
type="primary"
|
||||
:text="$t('hairlineButton')"
|
||||
/>
|
||||
<van-button
|
||||
plain
|
||||
hairline
|
||||
type="danger"
|
||||
:text="$t('hairlineButton')"
|
||||
/>
|
||||
<van-button plain hairline type="primary" :text="$t('hairlineButton')" />
|
||||
<van-button plain hairline type="info" :text="$t('hairlineButton')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-button
|
||||
disabled
|
||||
type="primary"
|
||||
:text="$t('disabled')"
|
||||
/>
|
||||
<van-button
|
||||
disabled
|
||||
type="danger"
|
||||
:text="$t('disabled')"
|
||||
/>
|
||||
<van-button disabled type="primary" :text="$t('disabled')" />
|
||||
<van-button disabled type="info" :text="$t('disabled')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('loadingStatus')">
|
||||
<van-button
|
||||
loading
|
||||
type="primary"
|
||||
/>
|
||||
<van-button
|
||||
loading
|
||||
type="primary"
|
||||
loading-type="spinner"
|
||||
/>
|
||||
<van-button
|
||||
loading
|
||||
:loading-text="$t('loadingText')"
|
||||
type="danger"
|
||||
/>
|
||||
<van-button loading type="primary" />
|
||||
<van-button loading type="primary" loading-type="spinner" />
|
||||
<van-button loading :loading-text="$t('loadingText')" type="info" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('shape')">
|
||||
<van-button
|
||||
type="primary"
|
||||
square
|
||||
:text="$t('square')"
|
||||
/>
|
||||
<van-button
|
||||
type="danger"
|
||||
round
|
||||
:text="$t('round')"
|
||||
/>
|
||||
<van-button type="primary" square :text="$t('square')" />
|
||||
<van-button type="info" round :text="$t('round')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('icon')">
|
||||
<van-button
|
||||
type="primary"
|
||||
icon="star-o"
|
||||
/>
|
||||
<van-button
|
||||
type="primary"
|
||||
icon="star-o"
|
||||
:text="$t('button')"
|
||||
/>
|
||||
<van-button type="primary" icon="star-o" />
|
||||
<van-button type="primary" icon="star-o" :text="$t('button')" />
|
||||
<van-button
|
||||
plain
|
||||
type="primary"
|
||||
@ -100,55 +48,20 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('size')">
|
||||
<van-button
|
||||
type="primary"
|
||||
size="large"
|
||||
>
|
||||
{{ $t('large') }}
|
||||
</van-button>
|
||||
<van-button
|
||||
type="primary"
|
||||
size="normal"
|
||||
>
|
||||
{{ $t('normal') }}
|
||||
</van-button>
|
||||
<van-button
|
||||
type="primary"
|
||||
size="small"
|
||||
>
|
||||
{{ $t('small') }}
|
||||
</van-button>
|
||||
<van-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
>
|
||||
{{ $t('mini') }}
|
||||
</van-button>
|
||||
<van-button type="primary" size="large">{{ $t('large') }}</van-button>
|
||||
<van-button type="primary" size="normal">{{ $t('normal') }}</van-button>
|
||||
<van-button type="primary" size="small">{{ $t('small') }}</van-button>
|
||||
<van-button type="primary" size="mini">{{ $t('mini') }}</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('router')">
|
||||
<van-button
|
||||
:text="$t('urlRoute')"
|
||||
type="primary"
|
||||
url="/vant/mobile.html"
|
||||
/>
|
||||
<van-button
|
||||
:text="$t('vueRoute')"
|
||||
type="primary"
|
||||
to="index"
|
||||
/>
|
||||
<van-button :text="$t('urlRoute')" type="primary" url="/vant/mobile.html" />
|
||||
<van-button :text="$t('vueRoute')" type="primary" to="index" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customColor')">
|
||||
<van-button
|
||||
color="#7232dd"
|
||||
:text="$t('customColor')"
|
||||
/>
|
||||
<van-button
|
||||
plain
|
||||
color="#7232dd"
|
||||
:text="$t('customColor')"
|
||||
/>
|
||||
<van-button color="#7232dd" :text="$t('customColor')" />
|
||||
<van-button plain color="#7232dd" :text="$t('customColor')" />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
@ -213,7 +126,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-button {
|
||||
.van-button {
|
||||
|
||||
@ -5,32 +5,24 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="demo-button-row"><button class="van-button van-button--default van-button--normal"><span class="van-button__text">默认按钮</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">主要按钮</span></button> <button class="van-button van-button--info van-button--normal"><span class="van-button__text">信息按钮</span></button></div> <button class="van-button van-button--danger van-button--normal"><span class="van-button__text">危险按钮</span></button> <button class="van-button van-button--warning van-button--normal"><span class="van-button__text">警告按钮</span></button>
|
||||
</div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--plain van-button--hairline van-hairline--surround"><span class="van-button__text">细边框按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--plain van-button--hairline van-hairline--surround"><span class="van-button__text">细边框按钮</span></button></div>
|
||||
<div><button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button> <button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button> <button class="van-button van-button--info van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--plain van-button--hairline van-hairline--surround"><span class="van-button__text">细边框按钮</span></button> <button class="van-button van-button--info van-button--normal van-button--plain van-button--hairline van-hairline--surround"><span class="van-button__text">细边框按钮</span></button></div>
|
||||
<div><button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button> <button disabled="disabled" class="van-button van-button--info van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
</button> <button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-loading van-loading--spinner van-button__loading"><span class="van-loading__spinner van-loading__spinner--spinner" style="width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
|
||||
</button> <button class="van-button van-button--danger van-button--normal">
|
||||
</button> <button class="van-button van-button--info van-button--normal">
|
||||
<div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span class="van-button__text">加载中...</span>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">方形按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--round"><span class="van-button__text">圆形按钮</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">方形按钮</span></button> <button class="van-button van-button--info van-button--normal van-button--round"><span class="van-button__text">圆形按钮</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><i class="van-icon van-icon-star-o van-button__icon">
|
||||
<!----></i></button> <button class="van-button van-button--primary van-button--normal"><i class="van-icon van-icon-star-o van-button__icon">
|
||||
<!----></i><span class="van-button__text">按钮</span></button> <button class="van-button van-button--primary van-button--normal van-button--plain"><i class="van-icon van-button__icon">
|
||||
<div class="van-image van-icon__image"><img src="https://img.yzcdn.cn/vant/logo.png" class="van-image__img" style="object-fit: contain;"></div>
|
||||
<!---->
|
||||
</i><span class="van-button__text">按钮</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--large"><span class="van-button__text">
|
||||
大号按钮
|
||||
</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
普通按钮
|
||||
</span></button> <button class="van-button van-button--primary van-button--small"><span class="van-button__text">
|
||||
小型按钮
|
||||
</span></button> <button class="van-button van-button--primary van-button--mini"><span class="van-button__text">
|
||||
迷你按钮
|
||||
</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--large"><span class="van-button__text">大号按钮</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">普通按钮</span></button> <button class="van-button van-button--primary van-button--small"><span class="van-button__text">小型按钮</span></button> <button class="van-button van-button--primary van-button--mini"><span class="van-button__text">迷你按钮</span></button></div>
|
||||
<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>
|
||||
<div><button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">自定义颜色</span></button> <button class="van-button van-button--default van-button--normal van-button--plain" style="color: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">自定义颜色</span></button></div>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<van-tabs v-model="activeTab">
|
||||
<van-tabs v-model="activeTab" :color="BLUE">
|
||||
<van-tab :title="$t('basicUsage')">
|
||||
<van-index-bar>
|
||||
<div
|
||||
@ -35,6 +35,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { BLUE } from '../../utils/constant';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
@ -55,6 +57,7 @@ export default {
|
||||
}
|
||||
|
||||
return {
|
||||
BLUE,
|
||||
activeTab: 0,
|
||||
indexList,
|
||||
customIndexList: [1, 2, 3, 4, 5, 6, 8, 9, 10]
|
||||
|
||||
@ -3,6 +3,7 @@ import { TouchMixin } from '../mixins/touch';
|
||||
import { ParentMixin } from '../mixins/relation';
|
||||
import { BindEventMixin } from '../mixins/bind-event';
|
||||
import { GREEN } from '../utils/constant';
|
||||
import { preventDefault } from '../utils/dom/event';
|
||||
import {
|
||||
getScrollTop,
|
||||
getElementTop,
|
||||
@ -168,10 +169,7 @@ export default createComponent({
|
||||
this.touchMove(event);
|
||||
|
||||
if (this.direction === 'vertical') {
|
||||
/* istanbul ignore else */
|
||||
if (event.cancelable) {
|
||||
event.preventDefault();
|
||||
}
|
||||
preventDefault(event);
|
||||
|
||||
const { clientX, clientY } = event.touches[0];
|
||||
const target = document.elementFromPoint(clientX, clientY);
|
||||
|
||||
@ -4,10 +4,10 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #1989fa;">
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">基础用法</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-ellipsis">自定义索引列表</span></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div class="van-tabs__line" style="background-color: rgb(25, 137, 250); width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
|
||||
<demo-block :title="$t('custom')">
|
||||
<van-button
|
||||
type="primary"
|
||||
type="info"
|
||||
@touchstart.stop="keyboard = 'custom'"
|
||||
>
|
||||
{{ $t('button2') }}
|
||||
|
||||
@ -10,7 +10,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray">.</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
<div><button class="van-button van-button--info van-button--normal"><span class="van-button__text">
|
||||
弹出自定义键盘
|
||||
</span></button>
|
||||
<div class="van-number-keyboard van-number-keyboard--custom van-number-keyboard--safe-area-inset-bottom" style="z-index: 100; display: none;" name="van-slide-up">
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { createNamespace, isDef, addUnit } from '../utils';
|
||||
import { resetScroll } from '../utils/dom/reset-scroll';
|
||||
import { preventDefault } from '../utils/dom/event';
|
||||
|
||||
const [createComponent, bem] = createNamespace('stepper');
|
||||
|
||||
@ -76,15 +77,14 @@ export default createComponent({
|
||||
},
|
||||
|
||||
buttonStyle() {
|
||||
const style = {};
|
||||
|
||||
if (this.buttonSize) {
|
||||
const size = addUnit(this.buttonSize);
|
||||
style.width = size;
|
||||
style.height = size;
|
||||
}
|
||||
|
||||
return style;
|
||||
return {
|
||||
width: size,
|
||||
height: size
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -188,7 +188,7 @@ export default createComponent({
|
||||
clearTimeout(this.longPressTimer);
|
||||
|
||||
if (this.isLongPress) {
|
||||
event.preventDefault();
|
||||
preventDefault(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user