feat(ActionSheet): add cancel slot (#8333)
This commit is contained in:
neverland
+37
-35
@@ -1,48 +1,50 @@
|
||||
<template>
|
||||
<van-cell center :title="t('basicUsage')">
|
||||
<van-stepper v-model="stepper1" />
|
||||
</van-cell>
|
||||
<demo-block card>
|
||||
<van-cell center :title="t('basicUsage')">
|
||||
<van-stepper v-model="stepper1" />
|
||||
</van-cell>
|
||||
|
||||
<van-cell center :title="t('step')">
|
||||
<van-stepper v-model="stepper2" step="2" />
|
||||
</van-cell>
|
||||
<van-cell center :title="t('step')">
|
||||
<van-stepper v-model="stepper2" step="2" />
|
||||
</van-cell>
|
||||
|
||||
<van-cell center :title="t('range')">
|
||||
<van-stepper v-model="stepper3" :min="5" :max="8" />
|
||||
</van-cell>
|
||||
<van-cell center :title="t('range')">
|
||||
<van-stepper v-model="stepper3" :min="5" :max="8" />
|
||||
</van-cell>
|
||||
|
||||
<van-cell center :title="t('integer')">
|
||||
<van-stepper v-model="stepper4" integer />
|
||||
</van-cell>
|
||||
<van-cell center :title="t('integer')">
|
||||
<van-stepper v-model="stepper4" integer />
|
||||
</van-cell>
|
||||
|
||||
<van-cell center :title="t('disabled')">
|
||||
<van-stepper v-model="stepper5" disabled />
|
||||
</van-cell>
|
||||
<van-cell center :title="t('disabled')">
|
||||
<van-stepper v-model="stepper5" disabled />
|
||||
</van-cell>
|
||||
|
||||
<van-cell center :title="t('disableInput')">
|
||||
<van-stepper v-model="disabledInput" disable-input />
|
||||
</van-cell>
|
||||
<van-cell center :title="t('disableInput')">
|
||||
<van-stepper v-model="disabledInput" disable-input />
|
||||
</van-cell>
|
||||
|
||||
<van-cell center :title="t('decimalLength')">
|
||||
<van-stepper v-model="stepper8" :decimal-length="1" step="0.2" />
|
||||
</van-cell>
|
||||
<van-cell center :title="t('decimalLength')">
|
||||
<van-stepper v-model="stepper8" :decimal-length="1" step="0.2" />
|
||||
</van-cell>
|
||||
|
||||
<van-cell center :title="t('customSize')">
|
||||
<van-stepper v-model="stepper7" button-size="32px" input-width="40px" />
|
||||
</van-cell>
|
||||
<van-cell center :title="t('customSize')">
|
||||
<van-stepper v-model="stepper7" button-size="32px" input-width="40px" />
|
||||
</van-cell>
|
||||
|
||||
<van-cell center :title="t('beforeChange')">
|
||||
<van-stepper v-model="stepper6" :before-change="beforeChange" />
|
||||
</van-cell>
|
||||
<van-cell center :title="t('beforeChange')">
|
||||
<van-stepper v-model="stepper6" :before-change="beforeChange" />
|
||||
</van-cell>
|
||||
|
||||
<van-cell v-if="!isWeapp" center :title="t('roundTheme')">
|
||||
<van-stepper
|
||||
v-model="stepperRound"
|
||||
theme="round"
|
||||
button-size="22"
|
||||
disable-input
|
||||
/>
|
||||
</van-cell>
|
||||
<van-cell v-if="!isWeapp" center :title="t('roundTheme')">
|
||||
<van-stepper
|
||||
v-model="stepperRound"
|
||||
theme="round"
|
||||
button-size="22"
|
||||
disable-input
|
||||
/>
|
||||
</van-cell>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@@ -1,282 +1,284 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-cell van-cell--center">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
Basic Usage
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper">
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
role="spinbutton"
|
||||
class="van-stepper__input"
|
||||
inputmode="decimal"
|
||||
aria-valuemax="Infinity"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__plus"
|
||||
>
|
||||
</button>
|
||||
<div>
|
||||
<div class="van-cell van-cell--center">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
Basic Usage
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper">
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
role="spinbutton"
|
||||
class="van-stepper__input"
|
||||
inputmode="decimal"
|
||||
aria-valuemax="Infinity"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__plus"
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--center">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
Step
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper">
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
role="spinbutton"
|
||||
class="van-stepper__input"
|
||||
inputmode="decimal"
|
||||
aria-valuemax="Infinity"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__plus"
|
||||
>
|
||||
</button>
|
||||
<div class="van-cell van-cell--center">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
Step
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper">
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
role="spinbutton"
|
||||
class="van-stepper__input"
|
||||
inputmode="decimal"
|
||||
aria-valuemax="Infinity"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__plus"
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--center">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
Range
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper">
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
role="spinbutton"
|
||||
class="van-stepper__input"
|
||||
inputmode="decimal"
|
||||
aria-valuemax="8"
|
||||
aria-valuemin="5"
|
||||
aria-valuenow="5"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__plus"
|
||||
>
|
||||
</button>
|
||||
<div class="van-cell van-cell--center">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
Range
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper">
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
role="spinbutton"
|
||||
class="van-stepper__input"
|
||||
inputmode="decimal"
|
||||
aria-valuemax="8"
|
||||
aria-valuemin="5"
|
||||
aria-valuenow="5"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__plus"
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--center">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
Integer
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper">
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
>
|
||||
</button>
|
||||
<input type="tel"
|
||||
role="spinbutton"
|
||||
class="van-stepper__input"
|
||||
inputmode="numeric"
|
||||
aria-valuemax="Infinity"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__plus"
|
||||
>
|
||||
</button>
|
||||
<div class="van-cell van-cell--center">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
Integer
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper">
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
>
|
||||
</button>
|
||||
<input type="tel"
|
||||
role="spinbutton"
|
||||
class="van-stepper__input"
|
||||
inputmode="numeric"
|
||||
aria-valuemax="Infinity"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__plus"
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--center">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
Disabled
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper">
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
role="spinbutton"
|
||||
class="van-stepper__input"
|
||||
disabled
|
||||
inputmode="decimal"
|
||||
aria-valuemax="Infinity"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__plus van-stepper__plus--disabled"
|
||||
>
|
||||
</button>
|
||||
<div class="van-cell van-cell--center">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
Disabled
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper">
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
role="spinbutton"
|
||||
class="van-stepper__input"
|
||||
disabled
|
||||
inputmode="decimal"
|
||||
aria-valuemax="Infinity"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__plus van-stepper__plus--disabled"
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--center">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
Disable Input
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper">
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
role="spinbutton"
|
||||
class="van-stepper__input"
|
||||
readonly
|
||||
inputmode="decimal"
|
||||
aria-valuemax="Infinity"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__plus"
|
||||
>
|
||||
</button>
|
||||
<div class="van-cell van-cell--center">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
Disable Input
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper">
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
role="spinbutton"
|
||||
class="van-stepper__input"
|
||||
readonly
|
||||
inputmode="decimal"
|
||||
aria-valuemax="Infinity"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__plus"
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--center">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
Decimal Length
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper">
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
role="spinbutton"
|
||||
class="van-stepper__input"
|
||||
inputmode="decimal"
|
||||
aria-valuemax="Infinity"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__plus"
|
||||
>
|
||||
</button>
|
||||
<div class="van-cell van-cell--center">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
Decimal Length
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper">
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
role="spinbutton"
|
||||
class="van-stepper__input"
|
||||
inputmode="decimal"
|
||||
aria-valuemax="Infinity"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__plus"
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--center">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
Custom Size
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper">
|
||||
<button type="button"
|
||||
style="width: 32px; height: 32px;"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
role="spinbutton"
|
||||
class="van-stepper__input"
|
||||
style="width: 40px; height: 32px;"
|
||||
inputmode="decimal"
|
||||
aria-valuemax="Infinity"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
>
|
||||
<button type="button"
|
||||
style="width: 32px; height: 32px;"
|
||||
class="van-stepper__plus"
|
||||
>
|
||||
</button>
|
||||
<div class="van-cell van-cell--center">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
Custom Size
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper">
|
||||
<button type="button"
|
||||
style="width: 32px; height: 32px;"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
role="spinbutton"
|
||||
class="van-stepper__input"
|
||||
style="width: 40px; height: 32px;"
|
||||
inputmode="decimal"
|
||||
aria-valuemax="Infinity"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
>
|
||||
<button type="button"
|
||||
style="width: 32px; height: 32px;"
|
||||
class="van-stepper__plus"
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--center">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
Before Change
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper">
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
role="spinbutton"
|
||||
class="van-stepper__input"
|
||||
inputmode="decimal"
|
||||
aria-valuemax="Infinity"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__plus"
|
||||
>
|
||||
</button>
|
||||
<div class="van-cell van-cell--center">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
Before Change
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper">
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
role="spinbutton"
|
||||
class="van-stepper__input"
|
||||
inputmode="decimal"
|
||||
aria-valuemax="Infinity"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__plus"
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--center">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
Round Theme
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper van-stepper--round">
|
||||
<button type="button"
|
||||
style="width: 22px; height: 22px;"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
role="spinbutton"
|
||||
class="van-stepper__input"
|
||||
style="height: 22px;"
|
||||
readonly
|
||||
inputmode="decimal"
|
||||
aria-valuemax="Infinity"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
>
|
||||
<button type="button"
|
||||
style="width: 22px; height: 22px;"
|
||||
class="van-stepper__plus"
|
||||
>
|
||||
</button>
|
||||
<div class="van-cell van-cell--center">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
Round Theme
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper van-stepper--round">
|
||||
<button type="button"
|
||||
style="width: 22px; height: 22px;"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
role="spinbutton"
|
||||
class="van-stepper__input"
|
||||
style="height: 22px;"
|
||||
readonly
|
||||
inputmode="decimal"
|
||||
aria-valuemax="Infinity"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
>
|
||||
<button type="button"
|
||||
style="width: 22px; height: 22px;"
|
||||
class="van-stepper__plus"
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user