mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Merge branch 'dev' into next
This commit is contained in:
chenjiahan
commit
901f7f20d2
25
.github/workflows/release-tag.yml
vendored
Normal file
25
.github/workflows/release-tag.yml
vendored
Normal file
@ -0,0 +1,25 @@
|
||||
on:
|
||||
push:
|
||||
tags:
|
||||
- 'v*' # Push events to matching v*, i.e. v1.0, v20.15.10
|
||||
|
||||
name: Create Release
|
||||
|
||||
jobs:
|
||||
build:
|
||||
name: Create Release
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@master
|
||||
- name: Create Release for Tag
|
||||
id: release_tag
|
||||
uses: yyx990803/release-tag@master
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
with:
|
||||
tag_name: ${{ github.ref }}
|
||||
body: |
|
||||
更新内容参见 [CHANGELOG](https://youzan.github.io/vant/#/zh-CN/changelog)。
|
||||
|
||||
Please refer to [CHANGELOG](https://youzan.github.io/vant/#/en-US/changelog) for details.
|
||||
@ -76,7 +76,7 @@ vant 也支持按需引入、CDN 引入等方式，详细说明见 [快速上手
|
||||
|
||||
我们正在寻找更多优秀的小伙伴，一起拓展前端技术的边界，期待你的加入！
|
||||
|
||||
- <a target="_blank" href="https://app.mokahr.com/apply/youzan/6252#/job/96f5d2c7-e657-4d31-9244-195edc443a7f?_k=jf2141">职位详情</a>（Base: 杭州/深圳）
|
||||
- <a target="_blank" href="https://app.mokahr.com/apply/youzan/3750#/jobs/?keyword=%E5%89%8D%E7%AB%AF&_k=tueqds">职位详情</a>（Base: 杭州/深圳）
|
||||
- <a target="_blank" href="https://tech.youzan.com/tag/front-end/">团队博客</a>
|
||||
- <a target="_blank" href="https://github.com/youzan">开源项目</a>
|
||||
|
||||
|
||||
@ -10,6 +10,70 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
|
||||
- Minor version：released every one to two months, including backwards compatible features.
|
||||
- Major version：including breaking changes and new features.
|
||||
|
||||
### [v2.9.0](https://github.com/youzan/vant/compare/v2.8.7...v2.9.0)
|
||||
|
||||
`2020-07-03`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Icon: add enlarge icon [1c97b1](https://github.com/youzan/vant/commit/1c97b1837f3f16f339773133b5e78b8a200c57f5)
|
||||
- Image: add default slot [#6613](https://github.com/youzan/vant/issues/6613)
|
||||
- ImagePreview: add swipeTo method [#6596](https://github.com/youzan/vant/issues/6596)
|
||||
- ImagePreview: add get-container prop [39b5be](https://github.com/youzan/vant/commit/39b5beeac0d4a7e74866cb92eb9e4644872cf41a)
|
||||
- NoticeBar: optimize replay delay [022196](https://github.com/youzan/vant/commit/02219625fb94384865b79cf27ecea5ae0c4f3bb0)
|
||||
- Sku: add lazy-load prop [#6598](https://github.com/youzan/vant/issues/6598)
|
||||
- Sku: add show-header-image prop [#6598](https://github.com/youzan/vant/issues/6598)
|
||||
- Sku: support large image mode [#6598](https://github.com/youzan/vant/issues/6598)
|
||||
- Sku: enable close-on-click-overlay prop by default [#6631](https://github.com/youzan/vant/issues/6631)
|
||||
- TreeSelect: add selected-icon prop [#6615](https://github.com/youzan/vant/issues/6615)
|
||||
|
||||
**style**
|
||||
|
||||
- ActionSheet: update description style [#6586](https://github.com/youzan/vant/issues/6586)
|
||||
- AddressEdit: adjust label width [#6591](https://github.com/youzan/vant/issues/6591)
|
||||
- AddressEdit: area picker use round popup [#6584](https://github.com/youzan/vant/issues/6584)
|
||||
- Button: adjust small button size [#6371](https://github.com/youzan/vant/issues/6371)
|
||||
- Cell: adjust inner border gap [#6686](https://github.com/youzan/vant/issues/6686)
|
||||
- ContactEdit: adjust label width [a77ebe](https://github.com/youzan/vant/commit/a77ebe11d722a3f242ef8e4125bb94629a56b81f)
|
||||
- Field: label color updated to gray-7 [#6581](https://github.com/youzan/vant/issues/6581)
|
||||
- Field: label width adjusted to 6em [#6583](https://github.com/youzan/vant/issues/6583) [#6589](https://github.com/youzan/vant/issues/6589)
|
||||
- ImagePreview: adjust index position [#6650](https://github.com/youzan/vant/issues/6650)
|
||||
- Picker: optimize option disabled cursor [#6579](https://github.com/youzan/vant/issues/6579)
|
||||
- Rate: the default color is adjusted to red [#6373](https://github.com/youzan/vant/issues/6373)
|
||||
- Uploader: update failed icon [#6653](https://github.com/youzan/vant/issues/6653)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- ImagePreview: fix longpress error on mobile safari [#6660](https://github.com/youzan/vant/issues/6660)
|
||||
- ImagePreview: fix incorrect position after scale [#6656](https://github.com/youzan/vant/issues/6656)
|
||||
- Field: fix label word wrap [#6590](https://github.com/youzan/vant/issues/6590)
|
||||
- NumberKeyboard: fix eliminate tap delay on safari [#6667](https://github.com/youzan/vant/issues/6667)
|
||||
- Picker: disabled not work in cascade mode [#6580](https://github.com/youzan/vant/issues/6580)
|
||||
- Picker: revert add @picker-option-height var [#6663](https://github.com/youzan/vant/issues/6663)
|
||||
- Stepper: fix incorrect button disable status [#6652](https://github.com/youzan/vant/issues/6652)
|
||||
|
||||
### [v2.8.7](https://github.com/youzan/vant/compare/v2.8.6...v2.8.7)
|
||||
|
||||
`2020-06-19`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Dialog: add allow-html prop [#6568](https://github.com/youzan/vant/issues/6568)
|
||||
- Field: add format-trigger prop [#6566](https://github.com/youzan/vant/issues/6566)
|
||||
- Form: rule message can be empty [#6536](https://github.com/youzan/vant/issues/6536)
|
||||
- Sticky: offset-top support rem unit [#6556](https://github.com/youzan/vant/issues/6556)
|
||||
|
||||
**style**
|
||||
|
||||
- Field: remove word num full color [#6545](https://github.com/youzan/vant/issues/6545)
|
||||
- Picker: add @picker-option-height less var [#6571](https://github.com/youzan/vant/issues/6571)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Field: should not display null [#6542](https://github.com/youzan/vant/issues/6542)
|
||||
- ImagePreview: incorrect drag area [#6574](https://github.com/youzan/vant/issues/6574)
|
||||
- NoticeBar: failed to replay [e8bd24](https://github.com/youzan/vant/commit/e8bd24265d6e36ed61ea353108d57d75602d2f08)
|
||||
|
||||
### [v2.8.6](https://github.com/youzan/vant/compare/v2.8.5...v2.8.6)
|
||||
|
||||
`2020-06-13`
|
||||
|
||||
@ -10,6 +10,70 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 次版本号：每隔一至二个月发布，包含新特性和较大的功能更新，向下兼容。
|
||||
- 主版本号：发布时间不定，包含不兼容更新，预计下一个主版本会与 Vue 3.0 同期发布。
|
||||
|
||||
### [v2.9.0](https://github.com/youzan/vant/compare/v2.8.7...v2.9.0)
|
||||
|
||||
`2020-07-03`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Sku: 新增大图预览模式，可以通过 largeImageMode 选项开启 [#6598](https://github.com/youzan/vant/issues/6598)
|
||||
- Sku: 新增 lazy-load 属性，用于控制是否开启大图懒加载 [#6598](https://github.com/youzan/vant/issues/6598)
|
||||
- Sku: 新增 show-header-image 属性，用于控制是否显示头部图片 [#6598](https://github.com/youzan/vant/issues/6598)
|
||||
- Sku: 默认开启 close-on-click-overlay 属性 [#6631](https://github.com/youzan/vant/issues/6631)
|
||||
- Icon: 新增 enlarge 扩大图标 [1c97b1](https://github.com/youzan/vant/commit/1c97b1837f3f16f339773133b5e78b8a200c57f5)
|
||||
- Image: 新增 default 默认插槽 [#6613](https://github.com/youzan/vant/issues/6613)
|
||||
- ImagePreview: 新增 swipeTo 方法 [#6596](https://github.com/youzan/vant/issues/6596)
|
||||
- ImagePreview: 新增 get-container 属性 [39b5be](https://github.com/youzan/vant/commit/39b5beeac0d4a7e74866cb92eb9e4644872cf41a)
|
||||
- NoticeBar: 优化重新开始滚动的间隔 [022196](https://github.com/youzan/vant/commit/02219625fb94384865b79cf27ecea5ae0c4f3bb0)
|
||||
- TreeSelect: 新增 selected-icon 属性 [#6615](https://github.com/youzan/vant/issues/6615)
|
||||
|
||||
**style**
|
||||
|
||||
- Button: 调整 small 和 mini 按钮的样式，移除最小宽度限制 [#6371](https://github.com/youzan/vant/issues/6371)
|
||||
- Cell: 内侧边框增加 16px 的右边距 [#6686](https://github.com/youzan/vant/issues/6686)
|
||||
- ActionSheet: 顶部描述文字的颜色调整为 gray-6 [#6586](https://github.com/youzan/vant/issues/6586)
|
||||
- AddressEdit: 省市区弹窗调整为圆角样式 [#6584](https://github.com/youzan/vant/issues/6584)
|
||||
- AddressEdit: 表单文本宽度调整为 4em [#6591](https://github.com/youzan/vant/issues/6591)
|
||||
- ContactEdit: 表单文本宽度调整为 4em [a77ebe](https://github.com/youzan/vant/commit/a77ebe11d722a3f242ef8e4125bb94629a56b81f)
|
||||
- Field: 左侧文本颜色调整为 gray-7 [#6581](https://github.com/youzan/vant/issues/6581)
|
||||
- Field: 左侧文本宽度调整为 6em [#6589](https://github.com/youzan/vant/issues/6589) [#6583](https://github.com/youzan/vant/issues/6583)
|
||||
- ImagePreview: 调整页码位置，与关闭图标对齐 [#6650](https://github.com/youzan/vant/issues/6650)
|
||||
- Picker: 优化选项禁用时的光标效果 [#6579](https://github.com/youzan/vant/issues/6579)
|
||||
- Rate: 默认图标颜色由黄色调整为红色 [#6373](https://github.com/youzan/vant/issues/6373)
|
||||
- Uploader: 更新上传失败提示图标 [#6653](https://github.com/youzan/vant/issues/6653)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Field: 修复左侧文本中较长的英文单词无法换行的问题 [#6590](https://github.com/youzan/vant/issues/6590)
|
||||
- ImagePreview: 修复在 safari 浏览器上长按图标时缩放效果异常的问题 [#6660](https://github.com/youzan/vant/issues/6660)
|
||||
- ImagePreview: 修复图片缩放时可能出现位置错误的问题 [#6656](https://github.com/youzan/vant/issues/6656)
|
||||
- NumberKeyboard: 修复在 iOS 系统下存在点击延迟的问题 [#6667](https://github.com/youzan/vant/issues/6667)
|
||||
- Picker: 修复在级联模式下无法禁用选项的问题 [#6580](https://github.com/youzan/vant/issues/6580)
|
||||
- Picker: 修复开启 rem 转换时可能出现选项偏移的问题 [#6663](https://github.com/youzan/vant/issues/6663)
|
||||
- Stepper: 修复个别情况下按钮禁用状态计算错误的问题 [#6652](https://github.com/youzan/vant/issues/6652)
|
||||
|
||||
### [v2.8.7](https://github.com/youzan/vant/compare/v2.8.6...v2.8.7)
|
||||
|
||||
`2020-06-19`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Dialog: 新增 allow-html 属性，用于控制是否允许渲染 HTML 内容 [#6568](https://github.com/youzan/vant/issues/6568)
|
||||
- Field: 新增 format-trigger 属性，用于控制 formatter 触发时机 [#6566](https://github.com/youzan/vant/issues/6566)
|
||||
- Form: 允许在 rules 中不传入 message 字段 [#6536](https://github.com/youzan/vant/issues/6536)
|
||||
- Sticky: 支持 offset-top 属性传入 rem 单位 [#6556](https://github.com/youzan/vant/issues/6556)
|
||||
|
||||
**style**
|
||||
|
||||
- Field: 移除字数统计到达上限时的红色高亮效果 [#6545](https://github.com/youzan/vant/issues/6545)
|
||||
- Picker: 新增 @picker-option-height LESS 变量 [#6571](https://github.com/youzan/vant/issues/6571)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Field: 修复展示 null 的问题 [#6542](https://github.com/youzan/vant/issues/6542)
|
||||
- ImagePreview: 修复放大时拖拽区域过大的问题 [#6574](https://github.com/youzan/vant/issues/6574)
|
||||
- NoticeBar: 修复在部分情况下无法重新播放的问题 [e8bd24](https://github.com/youzan/vant/commit/e8bd24265d6e36ed61ea353108d57d75602d2f08)
|
||||
|
||||
### [v2.8.6](https://github.com/youzan/vant/compare/v2.8.5...v2.8.6)
|
||||
|
||||
`2020-06-13`
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
|
||||
我们正在寻找更多优秀的小伙伴，一起拓展前端技术的边界，期待你的加入！
|
||||
|
||||
- <a target="_blank" href="https://app.mokahr.com/apply/youzan/6252#/job/96f5d2c7-e657-4d31-9244-195edc443a7f?_k=jf2141">职位详情</a>（Base: 杭州/深圳）
|
||||
- <a target="_blank" href="https://app.mokahr.com/apply/youzan/3750#/jobs/?keyword=%E5%89%8D%E7%AB%AF&_k=tueqds">职位详情</a>（Base: 杭州/深圳）
|
||||
- <a target="_blank" href="https://tech.youzan.com/tag/front-end/">团队博客</a>
|
||||
- <a target="_blank" href="https://github.com/youzan">开源项目</a>
|
||||
|
||||
|
||||
@ -99,12 +99,12 @@ The easiest way to use Vant is to include a CDN link in the html file, after whi
|
||||
<!-- import style -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/vant@2.8/lib/index.css"
|
||||
href="https://cdn.jsdelivr.net/npm/vant@2.9/lib/index.css"
|
||||
/>
|
||||
|
||||
<!-- import script -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vant@2.8/lib/vant.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vant@2.9/lib/vant.min.js"></script>
|
||||
|
||||
<script>
|
||||
// Render the Button component
|
||||
|
||||
@ -116,12 +116,12 @@ Vue.use(Vant);
|
||||
<!-- 引入样式文件 -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/vant@2.8/lib/index.css"
|
||||
href="https://cdn.jsdelivr.net/npm/vant@2.9/lib/index.css"
|
||||
/>
|
||||
|
||||
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vant@2.8/lib/vant.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vant@2.9/lib/vant.min.js"></script>
|
||||
|
||||
<script>
|
||||
// 在 #app 标签下渲染一个按钮组件
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vant",
|
||||
"version": "2.8.6",
|
||||
"version": "2.9.0",
|
||||
"description": "Mobile UI Components built on Vue",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
@ -47,7 +47,7 @@
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "7.x",
|
||||
"@vant/icons": "1.2.1",
|
||||
"@vant/icons": "1.2.3",
|
||||
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
|
||||
"vue-lazyload": "1.2.3"
|
||||
},
|
||||
|
||||
@ -70,12 +70,6 @@ yarn add @vant/cli --dev
|
||||
- [目录结构](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/directory.md)
|
||||
- [更新日志](https://github.com/youzan/vant/tree/dev/packages/vant-cli/changelog.md)
|
||||
|
||||
## 微信讨论群
|
||||
|
||||
扫码加入 Vant Cli 交流群，若群二维码过期，可以联系有赞前端小秘书加群
|
||||
|
||||
<img src="https://img.yzcdn.cn/vant/wechat_20200527.jpeg" width="220" height="285" >
|
||||
|
||||
## 关于桌面端组件
|
||||
|
||||
目前 Vant Cli 仅支持移动端组件的预览，桌面端组件暂不支持预览（欢迎 PR）。
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# 更新日志
|
||||
|
||||
### v2.5.2
|
||||
|
||||
`2020-07-05`
|
||||
|
||||
- 内置的 demo-block 组件新增 card 属性
|
||||
|
||||
### v2.5.1
|
||||
|
||||
`2020-05-27`
|
||||
|
||||
@ -36,8 +36,6 @@
|
||||
"@types/fs-extra": "^9.0.1",
|
||||
"@types/lodash": "^4.14.153",
|
||||
"@types/postcss-load-config": "^2.0.1",
|
||||
"@types/webpack": "^4.41.13",
|
||||
"@types/webpack-dev-server": "^3.11.0",
|
||||
"@types/webpack-merge": "^4.1.5"
|
||||
},
|
||||
"dependencies": {
|
||||
@ -49,6 +47,8 @@
|
||||
"@babel/preset-typescript": "^7.10.1",
|
||||
"@nuxt/friendly-errors-webpack-plugin": "^2.5.0",
|
||||
"@types/jest": "^25.2.3",
|
||||
"@types/webpack": "^4.41.13",
|
||||
"@types/webpack-dev-server": "^3.11.0",
|
||||
"@vant/eslint-config": "^2.2.2",
|
||||
"@vant/markdown-loader": "^3.0.0-alpha.0",
|
||||
"@vant/markdown-vetur": "^2.0.1",
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
<template>
|
||||
<div class="van-doc-demo-block">
|
||||
<h2 class="van-doc-demo-block__title">{{ title }}</h2>
|
||||
<slot />
|
||||
<h2 v-if="title" class="van-doc-demo-block__title">{{ title }}</h2>
|
||||
<div v-if="card" class="van-doc-demo-block__card">
|
||||
<slot />
|
||||
</div>
|
||||
<slot v-else />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -10,6 +13,7 @@ export default {
|
||||
name: 'demo-block',
|
||||
|
||||
props: {
|
||||
card: Boolean,
|
||||
title: String,
|
||||
},
|
||||
};
|
||||
@ -28,6 +32,16 @@ export default {
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
&__card {
|
||||
margin: 12px 12px 0;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&__title + &__card {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
.van-doc-demo-block__title {
|
||||
padding-top: 20px;
|
||||
|
||||
6
packages/vant-cli/src/common/types.ts
Normal file
6
packages/vant-cli/src/common/types.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import type Webpack from 'webpack';
|
||||
import type WebpackDevServer from 'webpack-dev-server';
|
||||
|
||||
export type WebpackConfig = Webpack.Configuration & {
|
||||
devServer?: WebpackDevServer.Configuration;
|
||||
};
|
||||
@ -4,6 +4,7 @@ import { VueLoaderPlugin } from 'vue-loader';
|
||||
import { join } from 'path';
|
||||
import { existsSync } from 'fs';
|
||||
import { consola } from '../common/logger';
|
||||
import { WebpackConfig } from '../common/types';
|
||||
import {
|
||||
CWD,
|
||||
CACHE_DIR,
|
||||
@ -61,7 +62,7 @@ const plugins = [
|
||||
// );
|
||||
// }
|
||||
|
||||
export const baseConfig = {
|
||||
export const baseConfig: WebpackConfig = {
|
||||
mode: 'development',
|
||||
resolve: {
|
||||
extensions: [...SCRIPT_EXTS, ...STYLE_EXTS],
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import merge from 'webpack-merge';
|
||||
import { join } from 'path';
|
||||
import { baseConfig } from './webpack.base';
|
||||
import { WebpackConfig } from '../common/types';
|
||||
import { getVantConfig, getWebpackConfig, setBuildTarget } from '../common';
|
||||
import { LIB_DIR, ES_DIR } from '../common/constant';
|
||||
|
||||
export function getPackageConfig(isMinify: boolean) {
|
||||
export function getPackageConfig(isMinify: boolean): WebpackConfig {
|
||||
const { name } = getVantConfig();
|
||||
|
||||
setBuildTarget('package');
|
||||
|
||||
@ -4,6 +4,7 @@ import HtmlWebpackPlugin from 'html-webpack-plugin';
|
||||
import { get } from 'lodash';
|
||||
import { join } from 'path';
|
||||
import { baseConfig } from './webpack.base';
|
||||
import { WebpackConfig } from '../common/types';
|
||||
import { getVantConfig, getWebpackConfig } from '../common';
|
||||
import { VantCliSitePlugin } from '../compiler/vant-cli-site-plugin';
|
||||
import {
|
||||
@ -12,7 +13,7 @@ import {
|
||||
SITE_DESKTOP_SHARED_FILE,
|
||||
} from '../common/constant';
|
||||
|
||||
export function getSiteDevBaseConfig() {
|
||||
export function getSiteDevBaseConfig(): WebpackConfig {
|
||||
const vantConfig = getVantConfig();
|
||||
const baiduAnalytics = get(vantConfig, 'site.baiduAnalytics');
|
||||
|
||||
@ -101,6 +102,6 @@ export function getSiteDevBaseConfig() {
|
||||
});
|
||||
}
|
||||
|
||||
export function getSiteDevConfig() {
|
||||
export function getSiteDevConfig(): WebpackConfig {
|
||||
return merge(getSiteDevBaseConfig(), getWebpackConfig());
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import merge from 'webpack-merge';
|
||||
import { get } from 'lodash';
|
||||
import { WebpackConfig } from '../common/types';
|
||||
import { getVantConfig, getWebpackConfig } from '../common';
|
||||
import { getSiteDevBaseConfig } from './webpack.site.dev';
|
||||
import { SITE_DIST_DIR } from '../common/constant';
|
||||
@ -8,7 +9,7 @@ const vantConfig = getVantConfig();
|
||||
const outputDir = get(vantConfig, 'build.site.outputDir', SITE_DIST_DIR);
|
||||
const publicPath = get(vantConfig, 'build.site.publicPath', '/');
|
||||
|
||||
export function getSitePrdConfig() {
|
||||
export function getSitePrdConfig(): WebpackConfig {
|
||||
return merge(
|
||||
getSiteDevBaseConfig(),
|
||||
{
|
||||
|
||||
@ -58,6 +58,7 @@ module.exports = {
|
||||
// typescript-eslint
|
||||
'@typescript-eslint/camelcase': 'off',
|
||||
'@typescript-eslint/ban-ts-ignore': 'off',
|
||||
'@typescript-eslint/no-unused-vars': 'error',
|
||||
'@typescript-eslint/no-var-requires': 'off',
|
||||
'@typescript-eslint/no-explicit-any': 'off',
|
||||
'@typescript-eslint/no-empty-function': 'off',
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vant/eslint-config",
|
||||
"version": "2.2.2",
|
||||
"version": "2.2.3",
|
||||
"description": "eslint config of vant",
|
||||
"main": "index.js",
|
||||
"publishConfig": {
|
||||
|
||||
@ -1,5 +1,13 @@
|
||||
## Changelog
|
||||
|
||||
## 1.2.3
|
||||
|
||||
- fix enlarge icon align
|
||||
|
||||
## 1.2.2
|
||||
|
||||
- add enlarge icon
|
||||
|
||||
## 1.2.1
|
||||
|
||||
- update share icon
|
||||
|
||||
Binary file not shown.
@ -228,6 +228,7 @@ const map = {
|
||||
F0E1: 'weapp-nav',
|
||||
F0E2: 'wechat',
|
||||
F0E3: 'youzan-shield',
|
||||
F0E4: 'enlarge',
|
||||
};
|
||||
|
||||
const reversedMap = {};
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
/* stylelint-disable selector-pseudo-element-colon-notation */
|
||||
/* stylelint-disable font-family-no-missing-generic-family-keyword */
|
||||
@font-face {
|
||||
font-weight: normal;
|
||||
font-family: '<%= fontName %>';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vant/icons",
|
||||
"version": "1.2.1",
|
||||
"version": "1.2.3",
|
||||
"description": "vant icons",
|
||||
"main": "./src/config.js",
|
||||
"files": [
|
||||
|
||||
@ -236,5 +236,6 @@ module.exports = {
|
||||
'descending',
|
||||
'bars',
|
||||
'wap-nav',
|
||||
'enlarge',
|
||||
],
|
||||
};
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-cell is-link :title="t('basicUsage')" @click="show.basic = true" />
|
||||
<van-cell is-link :title="t('showCancel')" @click="show.cancel = true" />
|
||||
<van-cell
|
||||
@ -10,7 +10,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('optionStatus')">
|
||||
<demo-block card :title="t('optionStatus')">
|
||||
<van-cell
|
||||
is-link
|
||||
:title="t('optionStatus')"
|
||||
@ -18,7 +18,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('customPanel')">
|
||||
<demo-block card :title="t('customPanel')">
|
||||
<van-cell is-link :title="t('customPanel')" @click="show.title = true" />
|
||||
</demo-block>
|
||||
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
|
||||
&__description {
|
||||
position: relative;
|
||||
padding: @padding-md;
|
||||
padding: 20px @padding-md;
|
||||
color: @action-sheet-description-color;
|
||||
font-size: @action-sheet-description-font-size;
|
||||
line-height: @action-sheet-description-line-height;
|
||||
|
||||
@ -364,14 +364,15 @@ export default createComponent({
|
||||
</div>
|
||||
<Popup
|
||||
vModel={this.showAreaPopup}
|
||||
round
|
||||
position="bottom"
|
||||
lazyRender={false}
|
||||
getContainer="body"
|
||||
>
|
||||
<Area
|
||||
ref="area"
|
||||
loading={!this.areaListLoaded}
|
||||
value={data.areaCode}
|
||||
loading={!this.areaListLoaded}
|
||||
areaList={this.areaList}
|
||||
columnsPlaceholder={this.areaColumnsPlaceholder}
|
||||
onConfirm={this.onAreaConfirm}
|
||||
|
||||
@ -6,6 +6,10 @@
|
||||
&__fields {
|
||||
overflow: hidden;
|
||||
border-radius: @padding-xs;
|
||||
|
||||
.van-field__label {
|
||||
width: 4em;
|
||||
}
|
||||
}
|
||||
|
||||
&__default {
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-area :title="t('title')" :area-list="t('areaList')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('title2')">
|
||||
<demo-block card :title="t('title2')">
|
||||
<van-area :title="t('title')" :area-list="t('areaList')" :value="value" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('title3')">
|
||||
<demo-block card :title="t('title3')">
|
||||
<van-area
|
||||
:title="t('title')"
|
||||
:area-list="t('areaList')"
|
||||
@ -16,7 +16,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('title4')">
|
||||
<demo-block card :title="t('title4')">
|
||||
<van-area
|
||||
:title="t('title')"
|
||||
:area-list="t('areaList')"
|
||||
|
||||
@ -11,168 +11,168 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">内蒙古自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">辽宁省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">吉林省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">黑龙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">上海市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江苏省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">浙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">安徽省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">福建省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广西壮族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">重庆市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">四川省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">贵州省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">云南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西藏自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">陕西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">甘肃省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">青海省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁夏回族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">新疆维吾尔自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">台湾省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">香港特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">澳门特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海外</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">朝阳区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">丰台区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">石景山区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海淀区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">门头沟区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">房山区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">通州区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">顺义区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">昌平区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">大兴区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">怀柔区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">平谷区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">密云区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">延庆区</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -192,183 +192,183 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, -352px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">内蒙古自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">辽宁省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">吉林省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">黑龙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">上海市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江苏省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">浙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">安徽省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">福建省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广西壮族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">重庆市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">四川省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">贵州省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">云南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西藏自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">陕西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">甘肃省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">青海省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁夏回族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">新疆维吾尔自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">台湾省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">香港特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">澳门特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海外</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">杭州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁波市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">温州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">嘉兴市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">绍兴市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">金华市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">衢州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">舟山市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">台州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">丽水市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">鹿城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">龙湾区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">瓯海区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">洞头区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">永嘉县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">平阳县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">苍南县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">文成县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">泰顺县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">瑞安市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">乐清市</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -388,116 +388,116 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">内蒙古自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">辽宁省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">吉林省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">黑龙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">上海市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江苏省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">浙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">安徽省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">福建省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广西壮族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">重庆市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">四川省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">贵州省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">云南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西藏自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">陕西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">甘肃省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">青海省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁夏回族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">新疆维吾尔自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">台湾省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">香港特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">澳门特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海外</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -517,112 +517,112 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">请选择</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">内蒙古自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">辽宁省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">吉林省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">黑龙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">上海市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江苏省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">浙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">安徽省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">福建省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广西壮族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">重庆市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">四川省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">贵州省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">云南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西藏自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">陕西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">甘肃省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">青海省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁夏回族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">新疆维吾尔自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">台湾省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">香港特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">澳门特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海外</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -7,30 +7,30 @@ exports[`change option 1`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西城区</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -49,30 +49,30 @@ exports[`change option 2`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">和平区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河东区</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -91,30 +91,30 @@ exports[`change option 3`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">和平区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">河东区</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -133,20 +133,20 @@ exports[`columns-num prop 1`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -185,27 +185,27 @@ exports[`reset method 1`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">蓟县</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -224,30 +224,30 @@ exports[`reset method 2`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西城区</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -287,30 +287,30 @@ exports[`watch areaList & code 1`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西城区</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -329,30 +329,30 @@ exports[`watch areaList & code 2`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西城区</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -371,30 +371,30 @@ exports[`watch areaList & code 3`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西城区</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('type')">
|
||||
<demo-block card :title="t('type')">
|
||||
<div class="demo-button-row">
|
||||
<van-button type="default">{{ t('default') }}</van-button>
|
||||
<van-button type="primary">{{ t('primary') }}</van-button>
|
||||
@ -10,33 +10,33 @@
|
||||
<van-button type="warning">{{ t('warning') }}</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('plain')">
|
||||
<demo-block card :title="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')">
|
||||
<demo-block card :title="t('hairline')">
|
||||
<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')">
|
||||
<demo-block card :title="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')">
|
||||
<demo-block card :title="t('loadingStatus')">
|
||||
<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')">
|
||||
<demo-block card :title="t('shape')">
|
||||
<van-button type="primary" square :text="t('square')" />
|
||||
<van-button type="info" round :text="t('round')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('icon')">
|
||||
<demo-block card :title="t('icon')">
|
||||
<van-button type="primary" icon="star-o" />
|
||||
<van-button type="primary" icon="star-o" :text="t('button')" />
|
||||
<van-button
|
||||
@ -47,18 +47,18 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('size')">
|
||||
<demo-block card :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>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('blockElement')">
|
||||
<demo-block card :title="t('blockElement')">
|
||||
<van-button type="primary" block>{{ t('blockElement') }}</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block v-if="!isWeapp" :title="t('router')">
|
||||
<demo-block card v-if="!isWeapp" :title="t('router')">
|
||||
<van-button
|
||||
:text="t('urlRoute')"
|
||||
type="primary"
|
||||
@ -67,7 +67,7 @@
|
||||
<van-button :text="t('vueRoute')" type="primary" to="index" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('customColor')">
|
||||
<demo-block card :title="t('customColor')">
|
||||
<van-button color="#7232dd" :text="t('pure')" />
|
||||
<van-button plain color="#7232dd" :text="t('pure')" />
|
||||
<van-button
|
||||
@ -147,8 +147,6 @@ export default {
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-button {
|
||||
background: @white;
|
||||
|
||||
.van-button {
|
||||
&--large {
|
||||
margin-bottom: @padding-md;
|
||||
|
||||
@ -102,7 +102,6 @@
|
||||
}
|
||||
|
||||
&--small {
|
||||
min-width: @button-small-min-width;
|
||||
height: @button-small-height;
|
||||
padding: 0 @padding-xs;
|
||||
font-size: @button-small-font-size;
|
||||
@ -114,8 +113,8 @@
|
||||
}
|
||||
|
||||
&--mini {
|
||||
min-width: @button-mini-min-width;
|
||||
height: @button-mini-height;
|
||||
padding: 0 @padding-base;
|
||||
font-size: @button-mini-font-size;
|
||||
|
||||
& + .van-button--mini {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-cell
|
||||
is-link
|
||||
:title="t('selectSingle')"
|
||||
@ -23,7 +23,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('quickSelect')">
|
||||
<demo-block card :title="t('quickSelect')">
|
||||
<van-cell
|
||||
is-link
|
||||
:title="t('selectSingle')"
|
||||
@ -39,7 +39,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('customCalendar')">
|
||||
<demo-block card :title="t('customCalendar')">
|
||||
<van-cell
|
||||
is-link
|
||||
:title="t('customColor')"
|
||||
@ -83,7 +83,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('tiledDisplay')">
|
||||
<demo-block card :title="t('tiledDisplay')">
|
||||
<van-calendar
|
||||
:title="t('calendar')"
|
||||
:poppable="false"
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
background-color: @cell-background-color;
|
||||
|
||||
&::after {
|
||||
.hairline-bottom(@cell-border-color, @padding-md);
|
||||
.hairline-bottom(@cell-border-color, @padding-md, @padding-md);
|
||||
}
|
||||
|
||||
&:last-child::after,
|
||||
|
||||
@ -92,7 +92,7 @@ export default createComponent({
|
||||
const contentHeight = `${offsetHeight}px`;
|
||||
wrapper.style.height = expanded ? 0 : contentHeight;
|
||||
|
||||
// use double raf to ensure animation can start in mobile safari
|
||||
// use double raf to ensure animation can start
|
||||
doubleRaf(() => {
|
||||
wrapper.style.height = expanded ? contentHeight : 0;
|
||||
});
|
||||
|
||||
@ -43,10 +43,8 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div class="van-cell van-cell--borderless van-contact-edit__switch-cell">
|
||||
<div class="van-cell__title"><span>设为默认联系人</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
|
||||
<div class="van-switch__node"></div>
|
||||
</div>
|
||||
<div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
|
||||
<div class="van-switch__node"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-contact-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
|
||||
|
||||
@ -86,7 +86,7 @@ export default createComponent({
|
||||
|
||||
onDelete() {
|
||||
Dialog.confirm({
|
||||
message: t('confirmDelete'),
|
||||
title: t('confirmDelete'),
|
||||
}).then(() => {
|
||||
this.$emit('delete', this.data);
|
||||
});
|
||||
@ -128,6 +128,7 @@ export default createComponent({
|
||||
<Switch
|
||||
vModel={data.isDefault}
|
||||
size={24}
|
||||
slot="right-icon"
|
||||
onChange={(event) => {
|
||||
this.$emit('change-default', event);
|
||||
}}
|
||||
|
||||
@ -7,8 +7,8 @@
|
||||
overflow: hidden;
|
||||
border-radius: @contact-edit-fields-radius;
|
||||
|
||||
.van-cell__title {
|
||||
max-width: @contact-edit-field-label-width;
|
||||
.van-field__label {
|
||||
width: @contact-edit-field-label-width;
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,16 +16,7 @@
|
||||
margin-top: 10px;
|
||||
padding-top: 9px;
|
||||
padding-bottom: 9px;
|
||||
overflow: hidden;
|
||||
border-radius: @contact-edit-fields-radius;
|
||||
|
||||
.van-cell__value {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.van-switch {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { createNamespace, get } from '../utils';
|
||||
import { createNamespace } from '../utils';
|
||||
import { isDate } from '../utils/validate/date';
|
||||
import { padZero } from '../utils/format/string';
|
||||
import { getTrueValue, getMonthEndDay } from './utils';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('dateType')">
|
||||
<demo-block card :title="t('dateType')">
|
||||
<van-datetime-picker
|
||||
v-model="value.date"
|
||||
type="date"
|
||||
@ -10,7 +10,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('yearMonthType')">
|
||||
<demo-block card :title="t('yearMonthType')">
|
||||
<van-datetime-picker
|
||||
v-model="value.yearMonth"
|
||||
type="year-month"
|
||||
@ -21,7 +21,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block v-if="!isWeapp" :title="t('monthDayType')">
|
||||
<demo-block card v-if="!isWeapp" :title="t('monthDayType')">
|
||||
<van-datetime-picker
|
||||
v-model="value.monthDayType"
|
||||
type="month-day"
|
||||
@ -32,7 +32,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('timeType')">
|
||||
<demo-block card :title="t('timeType')">
|
||||
<van-datetime-picker
|
||||
v-model="value.time"
|
||||
type="time"
|
||||
@ -42,7 +42,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('datetimeType')">
|
||||
<demo-block card :title="t('datetimeType')">
|
||||
<van-datetime-picker
|
||||
v-model="value.datetime"
|
||||
type="datetime"
|
||||
@ -52,7 +52,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('optionFilter')">
|
||||
<demo-block card :title="t('optionFilter')">
|
||||
<van-datetime-picker
|
||||
v-model="value.optionFilter"
|
||||
type="time"
|
||||
|
||||
@ -7,98 +7,98 @@ exports[`filter prop 1`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">2020</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">25</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">30</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">25</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">30</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">35</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">40</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">45</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">50</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">55</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -117,101 +117,101 @@ exports[`formatter prop 1`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">2010 year</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">2020 year</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">05 month</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10 month</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">05 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">25 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">30 day</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">05 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20 hour</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">05 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">25 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">30 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">35 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">40 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">45 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">50 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">55 minute</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -7,20 +7,20 @@ exports[`time type 1`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">22</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">23</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">58</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">59</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -7,41 +7,41 @@ exports[`filter prop 1`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">30</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">40</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">50</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -60,20 +60,20 @@ exports[`format initial value 1`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">22</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">23</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">58</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">59</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -92,41 +92,41 @@ exports[`formatter prop 1`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">05 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20 hour</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">30 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">40 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">50 minute</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -145,26 +145,26 @@ exports[`max-hour & max-minute 1`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">01</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">02</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">01</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">02</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -111,12 +111,12 @@ test('month-day type', () => {
|
||||
expect(wrapper.emitted('confirm')[0][0].getMonth()).toEqual(10);
|
||||
expect(wrapper.emitted('confirm')[0][0].getDate()).toEqual(1);
|
||||
|
||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -300);
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[1][0].getMonth()).toEqual(11);
|
||||
expect(wrapper.emitted('confirm')[1][0].getDate()).toEqual(1);
|
||||
|
||||
triggerDrag(wrapper.findAll('.van-picker-column').at(1), 0, -100);
|
||||
triggerDrag(wrapper.findAll('.van-picker-column').at(1), 0, -300);
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[2][0].getMonth()).toEqual(11);
|
||||
expect(wrapper.emitted('confirm')[2][0].getDate()).toEqual(31);
|
||||
|
||||
@ -133,6 +133,7 @@ export default {
|
||||
| closeOnPopstate `v2.0.5` | Whether to close when popstate | _boolean_ | `false` |
|
||||
| closeOnClickOverlay | Whether to close when click overlay | _boolean_ | `false` |
|
||||
| lockScroll | Whether to lock body scroll | _boolean_ | `true` |
|
||||
| allowHtml `v2.8.7` | Whether to allow HTML rendering in message | _boolean_ | `true` |
|
||||
| beforeClose | Callback before close,<br>call done() to close dialog,<br>call done(false) to cancel loading | (action: string, done: Function) => void | - |
|
||||
| transition `v2.2.6` | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | _string_ | - |
|
||||
| getContainer | Return the mount node for Dialog | _string \| () => Element_ | `body` |
|
||||
@ -159,6 +160,7 @@ export default {
|
||||
| close-on-click-overlay | Whether to close when click overlay | _boolean_ | `false` |
|
||||
| lazy-render | Whether to lazy render util appeared | _boolean_ | `true` |
|
||||
| lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
|
||||
| allow-html `v2.8.7` | Whether to allow HTML rendering in message | _boolean_ | `true` |
|
||||
| before-close | Callback before close,<br>call done() to close dialog,<br>call done(false) to cancel loading | (action: string, done: Function) => void | - |
|
||||
| transition `v2.2.6` | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | _string_ | - |
|
||||
| get-container | Return the mount node for Dialog | _string \| () => Element_ | - |
|
||||
|
||||
@ -163,6 +163,7 @@ export default {
|
||||
| closeOnPopstate `v2.0.5` | 是否在页面回退时自动关闭 | _boolean_ | `false` |
|
||||
| closeOnClickOverlay | 是否在点击遮罩层后关闭弹窗 | _boolean_ | `false` |
|
||||
| lockScroll | 是否锁定背景滚动 | _boolean_ | `true` |
|
||||
| allowHtml `v2.8.7` | 是否允许 message 内容中渲染 HTML | _boolean_ | `true` |
|
||||
| beforeClose | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 done(false) 阻止弹窗关闭 | _(action, done) => void_ | - |
|
||||
| transition `v2.2.6` | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | _string_ | - |
|
||||
| getContainer | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | `body` |
|
||||
@ -191,6 +192,7 @@ export default {
|
||||
| close-on-click-overlay | 是否在点击遮罩层后关闭弹窗 | _boolean_ | `false` |
|
||||
| lazy-render | 是否在显示弹层时才渲染节点 | _boolean_ | `true` |
|
||||
| lock-scroll | 是否锁定背景滚动 | _boolean_ | `true` |
|
||||
| allow-html `v2.8.7` | 是否允许 message 内容中渲染 HTML | _boolean_ | `true` |
|
||||
| before-close | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 done(false) 阻止弹窗关闭 | _(action, done) => void_ | - |
|
||||
| transition `v2.2.6` | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | _string_ | - |
|
||||
| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
|
||||
|
||||
@ -100,7 +100,7 @@ export default {
|
||||
|
||||
### Error Info
|
||||
|
||||
Use `error` or `error-message` to show error info
|
||||
Use `error` or `error-message` to show error info.
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
@ -123,7 +123,7 @@ Use `error` or `error-message` to show error info
|
||||
|
||||
### Insert Button
|
||||
|
||||
Use button slot to insert button
|
||||
Use button slot to insert button.
|
||||
|
||||
```html
|
||||
<van-field v-model="sms" center clearable label="SMS" placeholder="SMS">
|
||||
@ -135,7 +135,7 @@ Use button slot to insert button
|
||||
|
||||
### Format Value
|
||||
|
||||
Use `formatter` prop to format the input value
|
||||
Use `formatter` prop to format the input value.
|
||||
|
||||
```html
|
||||
<van-field
|
||||
@ -171,7 +171,7 @@ export default {
|
||||
|
||||
### Auto Resize
|
||||
|
||||
Textarea Field can be auto resize when has `autosize` prop
|
||||
Textarea Field can be auto resize when has `autosize` prop.
|
||||
|
||||
```html
|
||||
<van-field
|
||||
@ -201,7 +201,7 @@ Textarea Field can be auto resize when has `autosize` prop
|
||||
|
||||
### Input Align
|
||||
|
||||
Use `input-align` prop to align the input value
|
||||
Use `input-align` prop to align the input value.
|
||||
|
||||
```html
|
||||
<van-field
|
||||
@ -230,7 +230,9 @@ Use `input-align` prop to align the input value
|
||||
| readonly | Whether to be readonly | _boolean_ | `false` |
|
||||
| colon `v2.7.2` | Whether to display colon after label | _boolean_ | `false` |
|
||||
| required | Whether to show required mark | _boolean_ | `false` |
|
||||
| center | Whether to center content vertically | _boolean_ | `true` |
|
||||
| clearable | Whether to be clearable | _boolean_ | `false` |
|
||||
| clear-trigger `v2.9.1` | When to display the clear icon, `always` means to display the icon when value is not empty, `focus` means to display the icon when input is focused | _string_ | `focus` |
|
||||
| clickable | Whether to show click feedback when clicked | _boolean_ | `false` |
|
||||
| is-link | Whether to show link icon | _boolean_ | `false` |
|
||||
| autofocus | Whether to auto focus, unsupported in iOS | _boolean_ | `false` |
|
||||
@ -241,7 +243,7 @@ Use `input-align` prop to align the input value
|
||||
| format-trigger `v2.8.7` | When to format value，can be set to `onBlur` | _string_ | `onChange` |
|
||||
| arrow-direction `v2.0.4` | Can be set to `left` `up` `down` | _string_ | `right` |
|
||||
| label-class | Label className | _any_ | - |
|
||||
| label-width | Label width | _number \| string_ | `90px` |
|
||||
| label-width | Label width | _number \| string_ | `6em` |
|
||||
| label-align | Label align, can be set to `center` `right` | _string_ | `left` |
|
||||
| input-align | Input align, can be set to `center` `right` | _string_ | `left` |
|
||||
| error-message-align | Error message align, can be set to `center` `right` | _string_ | `left` |
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
表单中的输入框组件
|
||||
表单中的输入框组件。
|
||||
|
||||
### 引入
|
||||
|
||||
@ -255,7 +255,9 @@ export default {
|
||||
| readonly | 是否只读 | _boolean_ | `false` |
|
||||
| colon `v2.7.2` | 是否在 label 后面添加冒号 | _boolean_ | `false` |
|
||||
| required | 是否显示表单必填星号 | _boolean_ | `false` |
|
||||
| clearable | 是否启用清除控件 | _boolean_ | `false` |
|
||||
| center | 是否使内容垂直居中 | _boolean_ | `false` |
|
||||
| clearable | 是否启用清除图标，点击清除图标后会清空输入框 | _boolean_ | `false` |
|
||||
| clear-trigger `v2.9.1` | 显示清除图标的时机，`always` 表示输入框不为空时展示，<br>`focus` 表示输入框聚焦且不为空时展示 | _string_ | `focus` |
|
||||
| clickable | 是否开启点击反馈 | _boolean_ | `false` |
|
||||
| is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` |
|
||||
| autofocus | 是否自动聚焦，iOS 系统不支持该属性 | _boolean_ | `false` |
|
||||
@ -266,7 +268,7 @@ export default {
|
||||
| format-trigger `v2.8.7` | 格式化函数触发的时机，可选值为 `onBlur` | _string_ | `onChange` |
|
||||
| arrow-direction `v2.0.4` | 箭头方向，可选值为 `left` `up` `down` | _string_ | `right` |
|
||||
| label-class | 左侧文本额外类名 | _any_ | - |
|
||||
| label-width | 左侧文本宽度，默认单位为`px` | _number \| string_ | `90px` |
|
||||
| label-width | 左侧文本宽度，默认单位为`px` | _number \| string_ | `6em` |
|
||||
| label-align | 左侧文本对齐方式，可选值为 `center` `right` | _string_ | `left` |
|
||||
| input-align | 输入框对齐方式，可选值为 `center` `right` | _string_ | `left` |
|
||||
| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `left` |
|
||||
@ -313,6 +315,10 @@ export default {
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 设置 type 为 number 后，为什么 input 标签的类型仍为 text?
|
||||
|
||||
HTML 原生的 `type="number"` 属性在 iOS 和 Android 系统上都存在一定问题，比如 maxlength 属性不生效、无法获取到完整的输入内容等。因此设置 type 为 `number` 时，Field 不会使用原生的 `type="number"` 属性，而是用现代浏览器支持的 [inputmode 属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/inputmode)来控制输入键盘的类型。
|
||||
|
||||
### 在桌面端点击清除按钮无效？
|
||||
|
||||
清除按钮监听是的移动端 Touch 事件，参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。
|
||||
|
||||
@ -69,6 +69,10 @@ export default createComponent({
|
||||
type: Boolean,
|
||||
default: null,
|
||||
},
|
||||
clearTrigger: {
|
||||
type: String,
|
||||
default: 'focus',
|
||||
},
|
||||
formatTrigger: {
|
||||
type: String,
|
||||
default: 'onChange',
|
||||
@ -109,13 +113,14 @@ export default createComponent({
|
||||
|
||||
computed: {
|
||||
showClear() {
|
||||
return (
|
||||
this.clearable &&
|
||||
this.focused &&
|
||||
this.value !== '' &&
|
||||
isDef(this.value) &&
|
||||
!this.readonly
|
||||
);
|
||||
if (this.clearable && !this.readonly) {
|
||||
const hasValue = isDef(this.value) && this.value !== '';
|
||||
const trigger =
|
||||
this.clearTrigger === 'always' ||
|
||||
(this.clearTrigger === 'focus' && this.focused);
|
||||
|
||||
return hasValue && trigger;
|
||||
}
|
||||
},
|
||||
|
||||
showError() {
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-field {
|
||||
&--disabled {
|
||||
color: @field-disabled-text-color;
|
||||
}
|
||||
|
||||
&__label {
|
||||
flex: none;
|
||||
box-sizing: border-box;
|
||||
width: @field-label-width;
|
||||
margin-right: @field-label-margin-right;
|
||||
color: @field-label-color;
|
||||
text-align: left;
|
||||
word-wrap: break-word;
|
||||
|
||||
&--center {
|
||||
text-align: center;
|
||||
@ -21,6 +20,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
.van-field__label {
|
||||
color: @field-disabled-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__value {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@ -9,7 +9,7 @@ exports[`arrow-direction prop 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`clearable 1`] = `
|
||||
exports[`clearable prop 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
@ -17,7 +17,7 @@ exports[`clearable 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`clearable 2`] = `
|
||||
exports[`clearable prop 2`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"><i class="van-icon van-icon-clear van-field__clear">
|
||||
|
||||
@ -184,7 +184,7 @@ test('maxlength', async () => {
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual('123');
|
||||
});
|
||||
|
||||
test('clearable', () => {
|
||||
test('clearable prop', () => {
|
||||
const wrapper = mount(Field, {
|
||||
propsData: {
|
||||
value: 'test',
|
||||
@ -202,6 +202,18 @@ test('clearable', () => {
|
||||
expect(wrapper.emitted('clear')[0][0]).toBeTruthy();
|
||||
});
|
||||
|
||||
test('clear-trigger prop', () => {
|
||||
const wrapper = mount(Field, {
|
||||
propsData: {
|
||||
value: 'test',
|
||||
clearable: true,
|
||||
clearTrigger: 'always',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.contains('.van-field__clear')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('render input slot', () => {
|
||||
const wrapper = mount(Field, {
|
||||
scopedSlots: {
|
||||
|
||||
@ -424,7 +424,7 @@ export default {
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| label-width | Field label width | _number \| string_ | `90px` |
|
||||
| label-width | Field label width | _number \| string_ | `6em` |
|
||||
| label-align | Field label align, can be set to `center` `right` | _string_ | `left` |
|
||||
| input-align | Field input align, can be set to `center` `right` | _string_ | `left` |
|
||||
| error-message-align | Error message align, can be set to `center` `right` | _string_ | `left` |
|
||||
|
||||
@ -459,7 +459,7 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| label-width | 表单项 label 宽度，默认单位为`px` | _number \| string_ | `90px` |
|
||||
| label-width | 表单项 label 宽度，默认单位为`px` | _number \| string_ | `6em` |
|
||||
| label-align | 表单项 label 对齐方式，可选值为 `center` `right` | _string_ | `left` |
|
||||
| input-align | 输入框对齐方式，可选值为 `center` `right` | _string_ | `left` |
|
||||
| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `left` |
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
// Utils
|
||||
import { createNamespace } from '../utils';
|
||||
import { range } from '../utils/format/number';
|
||||
import { on, preventDefault } from '../utils/dom/event';
|
||||
import { bem, createComponent } from './shared';
|
||||
|
||||
// Mixins
|
||||
import { PopupMixin } from '../mixins/popup';
|
||||
@ -9,20 +7,8 @@ import { TouchMixin } from '../mixins/touch';
|
||||
|
||||
// Components
|
||||
import Icon from '../icon';
|
||||
import Image from '../image';
|
||||
import Swipe from '../swipe';
|
||||
import Loading from '../loading';
|
||||
import SwipeItem from '../swipe-item';
|
||||
|
||||
const [createComponent, bem] = createNamespace('image-preview');
|
||||
const DOUBLE_CLICK_INTERVAL = 250;
|
||||
|
||||
function getDistance(touches) {
|
||||
return Math.sqrt(
|
||||
(touches[0].clientX - touches[1].clientX) ** 2 +
|
||||
(touches[0].clientY - touches[1].clientY) ** 2
|
||||
);
|
||||
}
|
||||
import ImagePreviewItem from './ImagePreviewItem';
|
||||
|
||||
export default createComponent({
|
||||
mixins: [
|
||||
@ -34,6 +20,7 @@ export default createComponent({
|
||||
|
||||
props: {
|
||||
className: null,
|
||||
closeable: Boolean,
|
||||
asyncClose: Boolean,
|
||||
showIndicators: Boolean,
|
||||
images: {
|
||||
@ -72,7 +59,6 @@ export default createComponent({
|
||||
type: String,
|
||||
default: bem('overlay'),
|
||||
},
|
||||
closeable: Boolean,
|
||||
closeIcon: {
|
||||
type: String,
|
||||
default: 'clear',
|
||||
@ -85,33 +71,11 @@ export default createComponent({
|
||||
|
||||
data() {
|
||||
return {
|
||||
scale: 1,
|
||||
moveX: 0,
|
||||
moveY: 0,
|
||||
active: 0,
|
||||
moving: false,
|
||||
zooming: false,
|
||||
doubleClickTimer: null,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
imageStyle() {
|
||||
const { scale } = this;
|
||||
const style = {
|
||||
transitionDuration: this.zooming || this.moving ? '0s' : '.3s',
|
||||
};
|
||||
|
||||
if (scale !== 1) {
|
||||
style.transform = `scale(${scale}, ${scale}) translate(${
|
||||
this.moveX / scale
|
||||
}px, ${this.moveY / scale}px)`;
|
||||
}
|
||||
|
||||
return style;
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
startPosition: 'setActive',
|
||||
|
||||
@ -128,21 +92,6 @@ export default createComponent({
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
shouldRender: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.$nextTick(() => {
|
||||
const swipe = this.$refs.swipe.$el;
|
||||
on(swipe, 'touchstart', this.onWrapperTouchStart);
|
||||
on(swipe, 'touchmove', preventDefault);
|
||||
on(swipe, 'touchend', this.onWrapperTouchEnd);
|
||||
on(swipe, 'touchcancel', this.onWrapperTouchEnd);
|
||||
});
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
@ -152,147 +101,17 @@ export default createComponent({
|
||||
}
|
||||
},
|
||||
|
||||
onWrapperTouchStart() {
|
||||
this.touchStartTime = new Date();
|
||||
},
|
||||
|
||||
onWrapperTouchEnd(event) {
|
||||
preventDefault(event);
|
||||
|
||||
const deltaTime = new Date() - this.touchStartTime;
|
||||
const { offsetX = 0, offsetY = 0 } = this.$refs.swipe || {};
|
||||
|
||||
// prevent long tap to close component
|
||||
if (deltaTime < DOUBLE_CLICK_INTERVAL && offsetX < 10 && offsetY < 10) {
|
||||
if (!this.doubleClickTimer) {
|
||||
this.doubleClickTimer = setTimeout(() => {
|
||||
this.emitClose();
|
||||
|
||||
this.doubleClickTimer = null;
|
||||
}, DOUBLE_CLICK_INTERVAL);
|
||||
} else {
|
||||
clearTimeout(this.doubleClickTimer);
|
||||
this.doubleClickTimer = null;
|
||||
this.toggleScale();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
startMove(event) {
|
||||
const image = event.currentTarget;
|
||||
const rect = image.getBoundingClientRect();
|
||||
const winWidth = window.innerWidth;
|
||||
const winHeight = window.innerHeight;
|
||||
|
||||
this.touchStart(event);
|
||||
this.moving = true;
|
||||
this.startMoveX = this.moveX;
|
||||
this.startMoveY = this.moveY;
|
||||
this.maxMoveX = Math.max(0, (rect.width - winWidth) / 2);
|
||||
this.maxMoveY = Math.max(0, (rect.height - winHeight) / 2);
|
||||
},
|
||||
|
||||
startZoom(event) {
|
||||
this.moving = false;
|
||||
this.zooming = true;
|
||||
this.startScale = this.scale;
|
||||
this.startDistance = getDistance(event.touches);
|
||||
},
|
||||
|
||||
onImageTouchStart(event) {
|
||||
const { touches } = event;
|
||||
const { offsetX = 0 } = this.$refs.swipe || {};
|
||||
|
||||
if (touches.length === 1 && this.scale !== 1) {
|
||||
this.startMove(event);
|
||||
} /* istanbul ignore else */ else if (touches.length === 2 && !offsetX) {
|
||||
this.startZoom(event);
|
||||
}
|
||||
},
|
||||
|
||||
onImageTouchMove(event) {
|
||||
const { touches } = event;
|
||||
if (this.moving || this.zooming) {
|
||||
preventDefault(event, true);
|
||||
}
|
||||
|
||||
if (this.moving) {
|
||||
this.touchMove(event);
|
||||
const moveX = this.deltaX + this.startMoveX;
|
||||
const moveY = this.deltaY + this.startMoveY;
|
||||
this.moveX = range(moveX, -this.maxMoveX, this.maxMoveX);
|
||||
this.moveY = range(moveY, -this.maxMoveY, this.maxMoveY);
|
||||
}
|
||||
|
||||
if (this.zooming && touches.length === 2) {
|
||||
const distance = getDistance(touches);
|
||||
const scale = (this.startScale * distance) / this.startDistance;
|
||||
|
||||
this.setScale(scale);
|
||||
}
|
||||
},
|
||||
|
||||
onImageTouchEnd(event) {
|
||||
/* istanbul ignore else */
|
||||
if (this.moving || this.zooming) {
|
||||
let stopPropagation = true;
|
||||
|
||||
if (
|
||||
this.moving &&
|
||||
this.startMoveX === this.moveX &&
|
||||
this.startMoveY === this.moveY
|
||||
) {
|
||||
stopPropagation = false;
|
||||
}
|
||||
|
||||
if (!event.touches.length) {
|
||||
this.moving = false;
|
||||
this.zooming = false;
|
||||
this.startMoveX = 0;
|
||||
this.startMoveY = 0;
|
||||
this.startScale = 1;
|
||||
|
||||
if (this.scale < 1) {
|
||||
this.resetScale();
|
||||
}
|
||||
}
|
||||
|
||||
if (stopPropagation) {
|
||||
preventDefault(event, true);
|
||||
}
|
||||
}
|
||||
emitScale(args) {
|
||||
this.$emit('scale', args);
|
||||
},
|
||||
|
||||
setActive(active) {
|
||||
this.resetScale();
|
||||
|
||||
if (active !== this.active) {
|
||||
this.active = active;
|
||||
this.$emit('change', active);
|
||||
}
|
||||
},
|
||||
|
||||
setScale(scale) {
|
||||
const value = range(scale, +this.minZoom, +this.maxZoom);
|
||||
|
||||
this.scale = value;
|
||||
this.$emit('scale', { index: this.active, scale: value });
|
||||
},
|
||||
|
||||
resetScale() {
|
||||
this.setScale(1);
|
||||
this.moveX = 0;
|
||||
this.moveY = 0;
|
||||
},
|
||||
|
||||
toggleScale() {
|
||||
const scale = this.scale > 1 ? 1 : 2;
|
||||
|
||||
this.setScale(scale);
|
||||
this.moveX = 0;
|
||||
this.moveY = 0;
|
||||
},
|
||||
|
||||
genIndex() {
|
||||
if (this.showIndex) {
|
||||
return (
|
||||
@ -313,36 +132,28 @@ export default createComponent({
|
||||
},
|
||||
|
||||
genImages() {
|
||||
const imageSlots = {
|
||||
loading: () => <Loading type="spinner" />,
|
||||
};
|
||||
|
||||
return (
|
||||
<Swipe
|
||||
ref="swipe"
|
||||
lazyRender
|
||||
loop={this.loop}
|
||||
class={bem('swipe')}
|
||||
indicatorColor="white"
|
||||
duration={this.swipeDuration}
|
||||
initialSwipe={this.startPosition}
|
||||
showIndicators={this.showIndicators}
|
||||
indicatorColor="white"
|
||||
onChange={this.setActive}
|
||||
>
|
||||
{this.images.map((image, index) => (
|
||||
<SwipeItem>
|
||||
<Image
|
||||
src={image}
|
||||
fit="contain"
|
||||
class={bem('image')}
|
||||
scopedSlots={imageSlots}
|
||||
style={index === this.active ? this.imageStyle : null}
|
||||
nativeOnTouchstart={this.onImageTouchStart}
|
||||
nativeOnTouchmove={this.onImageTouchMove}
|
||||
nativeOnTouchend={this.onImageTouchEnd}
|
||||
nativeOnTouchcancel={this.onImageTouchEnd}
|
||||
/>
|
||||
</SwipeItem>
|
||||
{this.images.map((image) => (
|
||||
<ImagePreviewItem
|
||||
src={image}
|
||||
show={this.value}
|
||||
active={this.active}
|
||||
maxZoom={this.maxZoom}
|
||||
minZoom={this.minZoom}
|
||||
onScale={this.emitScale}
|
||||
onClose={this.emitClose}
|
||||
/>
|
||||
))}
|
||||
</Swipe>
|
||||
);
|
||||
@ -364,6 +175,13 @@ export default createComponent({
|
||||
onClosed() {
|
||||
this.$emit('closed');
|
||||
},
|
||||
|
||||
// @exposed-api
|
||||
swipeTo(index, options) {
|
||||
if (this.$refs.swipe) {
|
||||
this.$refs.swipe.swipeTo(index, options);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
|
||||
263
src/image-preview/ImagePreviewItem.js
Normal file
263
src/image-preview/ImagePreviewItem.js
Normal file
@ -0,0 +1,263 @@
|
||||
// Utils
|
||||
import { bem } from './shared';
|
||||
import { range } from '../utils/format/number';
|
||||
import { preventDefault } from '../utils/dom/event';
|
||||
|
||||
// Mixins
|
||||
import { TouchMixin } from '../mixins/touch';
|
||||
|
||||
// Component
|
||||
import Image from '../image';
|
||||
import Loading from '../loading';
|
||||
import SwipeItem from '../swipe-item';
|
||||
|
||||
function getDistance(touches) {
|
||||
return Math.sqrt(
|
||||
(touches[0].clientX - touches[1].clientX) ** 2 +
|
||||
(touches[0].clientY - touches[1].clientY) ** 2
|
||||
);
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [TouchMixin],
|
||||
|
||||
props: {
|
||||
src: String,
|
||||
show: Boolean,
|
||||
active: Number,
|
||||
minZoom: [Number, String],
|
||||
maxZoom: [Number, String],
|
||||
},
|
||||
|
||||
data() {
|
||||
this.windowWidth = window.innerWidth;
|
||||
this.windowHeight = window.innerHeight;
|
||||
|
||||
return {
|
||||
scale: 1,
|
||||
moveX: 0,
|
||||
moveY: 0,
|
||||
moving: false,
|
||||
zooming: false,
|
||||
vertical: false,
|
||||
displayWidth: 0,
|
||||
displayHeight: 0,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
imageStyle() {
|
||||
const { scale } = this;
|
||||
const style = {
|
||||
transitionDuration: this.zooming || this.moving ? '0s' : '.3s',
|
||||
};
|
||||
|
||||
if (scale !== 1) {
|
||||
const offsetX = this.moveX / scale;
|
||||
const offsetY = this.moveY / scale;
|
||||
style.transform = `scale(${scale}, ${scale}) translate(${offsetX}px, ${offsetY}px)`;
|
||||
}
|
||||
|
||||
return style;
|
||||
},
|
||||
|
||||
maxMoveX() {
|
||||
if (this.displayWidth) {
|
||||
return Math.max(
|
||||
0,
|
||||
(this.scale * this.displayWidth - this.windowWidth) / 2
|
||||
);
|
||||
}
|
||||
return 0;
|
||||
},
|
||||
|
||||
maxMoveY() {
|
||||
if (this.displayHeight) {
|
||||
return Math.max(
|
||||
0,
|
||||
(this.scale * this.displayHeight - this.windowHeight) / 2
|
||||
);
|
||||
}
|
||||
return 0;
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
show(val) {
|
||||
if (!val) {
|
||||
this.resetScale();
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.bindTouchEvent(this.$el);
|
||||
},
|
||||
|
||||
methods: {
|
||||
resetScale() {
|
||||
this.setScale(1);
|
||||
this.moveX = 0;
|
||||
this.moveY = 0;
|
||||
},
|
||||
|
||||
setScale(scale) {
|
||||
this.scale = range(scale, +this.minZoom, +this.maxZoom);
|
||||
this.$emit('scale', {
|
||||
scale: this.scale,
|
||||
index: this.active,
|
||||
});
|
||||
},
|
||||
|
||||
toggleScale() {
|
||||
const scale = this.scale > 1 ? 1 : 2;
|
||||
|
||||
this.setScale(scale);
|
||||
this.moveX = 0;
|
||||
this.moveY = 0;
|
||||
},
|
||||
|
||||
onTouchStart(event) {
|
||||
const { touches } = event;
|
||||
const { offsetX = 0 } = this;
|
||||
|
||||
this.touchStart(event);
|
||||
this.touchStartTime = new Date();
|
||||
|
||||
this.startMoveX = this.moveX;
|
||||
this.startMoveY = this.moveY;
|
||||
|
||||
this.moving = touches.length === 1 && this.scale !== 1;
|
||||
this.zooming = touches.length === 2 && !offsetX;
|
||||
|
||||
if (this.zooming) {
|
||||
this.startScale = this.scale;
|
||||
this.startDistance = getDistance(event.touches);
|
||||
}
|
||||
},
|
||||
|
||||
onTouchMove(event) {
|
||||
const { touches } = event;
|
||||
|
||||
this.touchMove(event);
|
||||
|
||||
if (this.moving || this.zooming) {
|
||||
preventDefault(event, true);
|
||||
}
|
||||
|
||||
if (this.moving) {
|
||||
const moveX = this.deltaX + this.startMoveX;
|
||||
const moveY = this.deltaY + this.startMoveY;
|
||||
this.moveX = range(moveX, -this.maxMoveX, this.maxMoveX);
|
||||
this.moveY = range(moveY, -this.maxMoveY, this.maxMoveY);
|
||||
}
|
||||
|
||||
if (this.zooming && touches.length === 2) {
|
||||
const distance = getDistance(touches);
|
||||
const scale = (this.startScale * distance) / this.startDistance;
|
||||
|
||||
this.setScale(scale);
|
||||
}
|
||||
},
|
||||
|
||||
onTouchEnd(event) {
|
||||
let stopPropagation = false;
|
||||
|
||||
/* istanbul ignore else */
|
||||
if (this.moving || this.zooming) {
|
||||
stopPropagation = true;
|
||||
|
||||
if (
|
||||
this.moving &&
|
||||
this.startMoveX === this.moveX &&
|
||||
this.startMoveY === this.moveY
|
||||
) {
|
||||
stopPropagation = false;
|
||||
}
|
||||
|
||||
if (!event.touches.length) {
|
||||
if (this.zooming) {
|
||||
this.moveX = range(this.moveX, -this.maxMoveX, this.maxMoveX);
|
||||
this.moveY = range(this.moveY, -this.maxMoveY, this.maxMoveY);
|
||||
this.zooming = false;
|
||||
}
|
||||
|
||||
this.moving = false;
|
||||
this.startMoveX = 0;
|
||||
this.startMoveY = 0;
|
||||
this.startScale = 1;
|
||||
|
||||
if (this.scale < 1) {
|
||||
this.resetScale();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// eliminate tap delay on safari
|
||||
preventDefault(event, stopPropagation);
|
||||
|
||||
this.checkTap();
|
||||
this.resetTouchStatus();
|
||||
},
|
||||
|
||||
checkTap() {
|
||||
const { offsetX = 0, offsetY = 0 } = this;
|
||||
const deltaTime = new Date() - this.touchStartTime;
|
||||
const TAP_TIME = 250;
|
||||
const TAP_OFFSET = 10;
|
||||
|
||||
if (
|
||||
offsetX < TAP_OFFSET &&
|
||||
offsetY < TAP_OFFSET &&
|
||||
deltaTime < TAP_TIME
|
||||
) {
|
||||
if (this.doubleTapTimer) {
|
||||
clearTimeout(this.doubleTapTimer);
|
||||
this.doubleTapTimer = null;
|
||||
this.toggleScale();
|
||||
} else {
|
||||
this.doubleTapTimer = setTimeout(() => {
|
||||
this.$emit('close');
|
||||
this.doubleTapTimer = null;
|
||||
}, TAP_TIME);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(event) {
|
||||
const { windowWidth, windowHeight } = this;
|
||||
const { naturalWidth, naturalHeight } = event.target;
|
||||
const windowRatio = windowHeight / windowWidth;
|
||||
const imageRatio = naturalHeight / naturalWidth;
|
||||
|
||||
this.vertical = imageRatio > windowRatio;
|
||||
|
||||
if (this.vertical) {
|
||||
this.displayWidth = windowHeight / imageRatio;
|
||||
this.displayHeight = windowHeight;
|
||||
} else {
|
||||
this.displayWidth = windowWidth;
|
||||
this.displayHeight = windowWidth * imageRatio;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
const imageSlots = {
|
||||
loading: () => <Loading type="spinner" />,
|
||||
};
|
||||
|
||||
return (
|
||||
<SwipeItem class={bem('swipe-item')}>
|
||||
<Image
|
||||
src={this.src}
|
||||
fit="contain"
|
||||
class={bem('image', { vertical: this.vertical })}
|
||||
style={this.imageStyle}
|
||||
scopedSlots={imageSlots}
|
||||
onLoad={this.onLoad}
|
||||
/>
|
||||
</SwipeItem>
|
||||
);
|
||||
},
|
||||
};
|
||||
@ -114,9 +114,10 @@ export default {
|
||||
| className | Custom className | _any_ | - |
|
||||
| maxZoom | Max zoom | _number \| string_ | `3` |
|
||||
| minZoom | Min zoom | _number \| string_ | `1/3` |
|
||||
| closeable | Whether to show close icon | _boolean_ | `false` |
|
||||
| closeIcon | Close icon name | _string_ | `clear` |
|
||||
| closeIconPosition | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
|
||||
| closeable `v2.5.0` | Whether to show close icon | _boolean_ | `false` |
|
||||
| closeIcon `v2.5.0` | Close icon name | _string_ | `clear` |
|
||||
| closeIconPosition `v2.5.0` | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
|
||||
| getContainer | Return the mount node for ImagePreview | _string \| () => Element_ | - |
|
||||
|
||||
### Props
|
||||
|
||||
@ -136,6 +137,7 @@ export default {
|
||||
| closeable `v2.5.0` | Whether to show close icon | _boolean_ | `false` |
|
||||
| close-icon `v2.5.0` | Close icon name | _string_ | `clear` |
|
||||
| close-icon-position `v2.5.0` | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
|
||||
| get-container | Return the mount node for ImagePreview | _string \| () => Element_ | - |
|
||||
|
||||
### Events
|
||||
|
||||
@ -145,6 +147,7 @@ export default {
|
||||
| closed `v2.5.6` | Triggered after closed | - |
|
||||
| change | Triggered when current image change | index: index of current image |
|
||||
| scale `v2.5.0` | Triggered when current image scale | { index: index of current image, scale: scale of current image} |
|
||||
| swipeTo `2.9.0` | Swipe to target index | index: target index, options: Options | void |
|
||||
|
||||
### Slots
|
||||
|
||||
|
||||
@ -148,9 +148,10 @@ export default {
|
||||
| className | 自定义类名 | _any_ | - |
|
||||
| maxZoom | 手势缩放时，最大缩放比例 | _number \| string_ | `3` |
|
||||
| minZoom | 手势缩放时，最小缩放比例 | _number \| string_ | `1/3` |
|
||||
| closeable | 是否显示关闭图标 | _boolean_ | `false` |
|
||||
| closeIcon | 关闭图标名称或图片链接 | _string_ | `clear` |
|
||||
| closeIconPosition | 关闭图标位置，可选值为`top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
|
||||
| closeable `v2.5.0` | 是否显示关闭图标 | _boolean_ | `false` |
|
||||
| closeIcon `v2.5.0` | 关闭图标名称或图片链接 | _string_ | `clear` |
|
||||
| closeIconPosition `v2.5.0` | 关闭图标位置，可选值为`top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
|
||||
| getContainer | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
|
||||
|
||||
### Props
|
||||
|
||||
@ -172,6 +173,7 @@ export default {
|
||||
| closeable `v2.5.0` | 是否显示关闭图标 | _boolean_ | `false` |
|
||||
| close-icon `v2.5.0` | 关闭图标名称或图片链接 | _string_ | `clear` |
|
||||
| close-icon-position `v2.5.0` | 关闭图标位置，可选值为`top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
|
||||
| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
|
||||
|
||||
### Events
|
||||
|
||||
@ -183,6 +185,7 @@ export default {
|
||||
| closed `v2.5.6` | 关闭且且动画结束后触发 | - |
|
||||
| change | 切换当前图片时触发 | index: 当前图片的索引 |
|
||||
| scale `v2.5.0` | 缩放当前图片时触发 | { index: 当前图片的索引, scale: 当前缩放的值 } |
|
||||
| swipeTo `2.9.0` | 切换到指定位置 | index: number, options: Options | void |
|
||||
|
||||
### Slots
|
||||
|
||||
|
||||
@ -22,6 +22,7 @@ const defaultConfig = {
|
||||
showIndicators: false,
|
||||
closeOnPopstate: false,
|
||||
closeIconPosition: 'top-right',
|
||||
getContainer: 'body',
|
||||
};
|
||||
|
||||
const initInstance = () => {
|
||||
|
||||
@ -9,6 +9,12 @@
|
||||
|
||||
&__swipe {
|
||||
height: 100%;
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__cover {
|
||||
@ -18,13 +24,14 @@
|
||||
}
|
||||
|
||||
&__image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
transition-property: transform;
|
||||
|
||||
&--vertical {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
// disable desktop browser image drag
|
||||
-webkit-user-drag: none;
|
||||
@ -48,10 +55,11 @@
|
||||
|
||||
&__index {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
top: @padding-md;
|
||||
left: 50%;
|
||||
color: @image-preview-index-text-color;
|
||||
font-size: @image-preview-index-font-size;
|
||||
line-height: @image-preview-index-line-height;
|
||||
text-shadow: @image-preview-index-text-shadow;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
5
src/image-preview/shared.js
Normal file
5
src/image-preview/shared.js
Normal file
@ -0,0 +1,5 @@
|
||||
import { createNamespace } from '../utils';
|
||||
|
||||
const [createComponent, bem] = createNamespace('image-preview');
|
||||
|
||||
export { createComponent, bem };
|
||||
@ -43,9 +43,9 @@ exports[`render image 1`] = `
|
||||
<div class="van-image-preview" name="van-fade">
|
||||
<div class="van-swipe van-image-preview__swipe">
|
||||
<div class="van-swipe__track" style="width: 0px; transition-duration: 500ms; transform: translateX(0px);">
|
||||
<div class="van-swipe-item" style="width: 0px;"></div>
|
||||
<div class="van-swipe-item" style="width: 0px;"></div>
|
||||
<div class="van-swipe-item" style="width: 0px;"></div>
|
||||
<div class="van-swipe-item van-image-preview__swipe-item" style="width: 0px;"></div>
|
||||
<div class="van-swipe-item van-image-preview__swipe-item" style="width: 0px;"></div>
|
||||
<div class="van-swipe-item van-image-preview__swipe-item" style="width: 0px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-image-preview__index">1 / 3</div>
|
||||
@ -60,10 +60,12 @@ exports[`set show-index prop to false 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`zoom 1`] = `
|
||||
<div class="van-image van-image-preview__image" style="transition-duration: 0s; transform: scale(2, 2) translate(0px, NaNpx);"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">
|
||||
exports[`zoom in and drag image to move 1`] = `
|
||||
<div class="van-image van-image-preview__image" style="transition-duration: 0s; transform: scale(2, 2) translate(0px, 0px);"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">
|
||||
<div class="van-image__loading">
|
||||
<div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><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>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`zoom in and drag image to move 2`] = `<div class="van-image van-image-preview__image" style="transition-duration: 0s; transform: scale(2, 2) translate(25px, 25px);"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;"></div>`;
|
||||
|
||||
@ -1,14 +1,33 @@
|
||||
import Vue from 'vue';
|
||||
import ImagePreview from '..';
|
||||
import ImagePreviewVue from '../ImagePreview';
|
||||
import { mount, trigger, triggerDrag, later } from '../../../test';
|
||||
import {
|
||||
later,
|
||||
mount,
|
||||
trigger,
|
||||
triggerDrag,
|
||||
mockGetBoundingClientRect,
|
||||
} from '../../../test';
|
||||
|
||||
function triggerZoom(el, x, y) {
|
||||
trigger(el, 'touchstart', 0, 0, { x, y });
|
||||
trigger(el, 'touchmove', -x / 4, -y / 4, { x, y });
|
||||
trigger(el, 'touchmove', -x / 3, -y / 3, { x, y });
|
||||
trigger(el, 'touchmove', -x / 2, -y / 2, { x, y });
|
||||
function triggerTwoFingerTouchmove(el, x, y) {
|
||||
trigger(el, 'touchmove', -x, -y, { x, y });
|
||||
}
|
||||
|
||||
function triggerZoom(el, x, y, direction = 'in') {
|
||||
trigger(el, 'touchstart', 0, 0, { x, y });
|
||||
|
||||
if (direction === 'in') {
|
||||
triggerTwoFingerTouchmove(el, x / 4, y / 4);
|
||||
triggerTwoFingerTouchmove(el, x / 3, y / 3);
|
||||
triggerTwoFingerTouchmove(el, x / 2, y / 2);
|
||||
triggerTwoFingerTouchmove(el, x, y);
|
||||
} else if (direction === 'out') {
|
||||
triggerTwoFingerTouchmove(el, x, y);
|
||||
triggerTwoFingerTouchmove(el, x / 2, y / 2);
|
||||
triggerTwoFingerTouchmove(el, x / 3, y / 3);
|
||||
triggerTwoFingerTouchmove(el, x / 4, y / 4);
|
||||
}
|
||||
|
||||
trigger(el, 'touchend', 0, 0, { touchList: [] });
|
||||
}
|
||||
|
||||
@ -27,15 +46,14 @@ test('render image', async () => {
|
||||
|
||||
await later();
|
||||
|
||||
const swipe = wrapper.find('.van-swipe__track');
|
||||
const swipe = wrapper.find('.van-swipe-item');
|
||||
triggerDrag(swipe, 500, 0);
|
||||
expect(wrapper.emitted('input')).toBeFalsy();
|
||||
triggerDrag(swipe, 0, 0);
|
||||
|
||||
await later(250);
|
||||
|
||||
expect(wrapper.emitted('input')[0][0]).toBeFalsy();
|
||||
expect(wrapper.emitted('change')[0][0]).toEqual(2);
|
||||
|
||||
triggerDrag(swipe, 0, 0);
|
||||
await later(250);
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual(false);
|
||||
});
|
||||
|
||||
test('closeable prop', () => {
|
||||
@ -116,21 +134,34 @@ test('function call', (done) => {
|
||||
});
|
||||
});
|
||||
|
||||
test('double click', async (done) => {
|
||||
const instance = ImagePreview(images);
|
||||
test('double click', async () => {
|
||||
const onScale = jest.fn();
|
||||
const wrapper = mount(ImagePreviewVue, {
|
||||
propsData: {
|
||||
images,
|
||||
value: true,
|
||||
},
|
||||
listeners: {
|
||||
scale: onScale,
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
const swipe = instance.$el.querySelector('.van-swipe__track');
|
||||
const swipe = wrapper.find('.van-swipe-item');
|
||||
triggerDrag(swipe, 0, 0);
|
||||
triggerDrag(swipe, 0, 0);
|
||||
expect(instance.scale).toEqual(2);
|
||||
expect(onScale).toHaveBeenCalledWith({
|
||||
index: 0,
|
||||
scale: 2,
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
triggerDrag(swipe, 0, 0);
|
||||
triggerDrag(swipe, 0, 0);
|
||||
expect(instance.scale).toEqual(1);
|
||||
done();
|
||||
expect(onScale).toHaveBeenLastCalledWith({
|
||||
index: 0,
|
||||
scale: 1,
|
||||
});
|
||||
});
|
||||
|
||||
test('onClose option', () => {
|
||||
@ -165,9 +196,7 @@ test('onChange option', async (done) => {
|
||||
});
|
||||
|
||||
test('onScale option', async (done) => {
|
||||
const { getBoundingClientRect } = Element.prototype;
|
||||
Element.prototype.getBoundingClientRect = jest.fn(() => ({ width: 100 }));
|
||||
|
||||
const restore = mockGetBoundingClientRect({ width: 100 });
|
||||
const instance = ImagePreview({
|
||||
images,
|
||||
startPosition: 0,
|
||||
@ -181,7 +210,7 @@ test('onScale option', async (done) => {
|
||||
await later();
|
||||
const image = instance.$el.querySelector('img');
|
||||
triggerZoom(image, 300, 300);
|
||||
Element.prototype.getBoundingClientRect = getBoundingClientRect;
|
||||
restore();
|
||||
});
|
||||
|
||||
test('register component', () => {
|
||||
@ -189,21 +218,59 @@ test('register component', () => {
|
||||
expect(Vue.component(ImagePreviewVue.name)).toBeTruthy();
|
||||
});
|
||||
|
||||
test('zoom', async () => {
|
||||
const { getBoundingClientRect } = Element.prototype;
|
||||
Element.prototype.getBoundingClientRect = jest.fn(() => ({ width: 100 }));
|
||||
test('zoom in and drag image to move', async () => {
|
||||
const restore = mockGetBoundingClientRect({ width: 100 });
|
||||
const originWindowWidth = window.innerWidth;
|
||||
const originWindowHeight = window.innerHeight;
|
||||
|
||||
window.innerWidth = 100;
|
||||
window.innerHeight = 100;
|
||||
|
||||
const wrapper = mount(ImagePreviewVue, {
|
||||
propsData: { images, value: true },
|
||||
});
|
||||
|
||||
await later();
|
||||
const image = wrapper.find('.van-image');
|
||||
const image = wrapper.find('img');
|
||||
triggerZoom(image, 300, 300);
|
||||
triggerDrag(image, 300, 300);
|
||||
|
||||
expect(image).toMatchSnapshot();
|
||||
Element.prototype.getBoundingClientRect = getBoundingClientRect;
|
||||
// mock image size
|
||||
['naturalWidth', 'naturalHeight'].forEach((key) => {
|
||||
Object.defineProperty(image.element, key, { value: 300 });
|
||||
});
|
||||
|
||||
// drag image before load
|
||||
triggerDrag(image, 300, 300);
|
||||
expect(wrapper.find('.van-image')).toMatchSnapshot();
|
||||
|
||||
// drag image after load
|
||||
image.trigger('load');
|
||||
triggerDrag(image, 300, 300);
|
||||
expect(wrapper.find('.van-image')).toMatchSnapshot();
|
||||
|
||||
window.innerWidth = originWindowWidth;
|
||||
window.innerHeight = originWindowHeight;
|
||||
restore();
|
||||
});
|
||||
|
||||
test('zoom out', async () => {
|
||||
const restore = mockGetBoundingClientRect({ width: 100 });
|
||||
|
||||
const onScale = jest.fn();
|
||||
const wrapper = mount(ImagePreviewVue, {
|
||||
propsData: { images, value: true },
|
||||
listeners: {
|
||||
scale: onScale,
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
const image = wrapper.find('.van-image');
|
||||
triggerZoom(image, 300, 300, 'out');
|
||||
|
||||
expect(onScale).toHaveBeenLastCalledWith({ index: 0, scale: 1 });
|
||||
|
||||
restore();
|
||||
});
|
||||
|
||||
test('set show-index prop to false', () => {
|
||||
@ -265,3 +332,68 @@ test('closeOnPopstate', () => {
|
||||
test('ImagePreview.Component', () => {
|
||||
expect(ImagePreview.Component).toEqual(ImagePreviewVue);
|
||||
});
|
||||
|
||||
test('get container with function call ', async (done) => {
|
||||
const element = document.createElement('div');
|
||||
document.body.appendChild(element);
|
||||
ImagePreview({ images, getContainer: () => element });
|
||||
|
||||
await Vue.nextTick();
|
||||
const wrapperDiv = document.querySelector('.van-image-preview');
|
||||
expect(wrapperDiv.parentNode).toEqual(element);
|
||||
document.body.removeChild(element);
|
||||
|
||||
ImagePreview(images);
|
||||
|
||||
await Vue.nextTick();
|
||||
const wrapperBody = document.querySelector('.van-image-preview');
|
||||
expect(wrapperBody.parentNode).toEqual(document.body);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
test('get container with component call', () => {
|
||||
const div1 = document.createElement('div');
|
||||
const div2 = document.createElement('div');
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<div>
|
||||
<van-image-preview :value="true" :get-container="getContainer">
|
||||
</van-image-preview>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
getContainer: () => div1,
|
||||
};
|
||||
},
|
||||
});
|
||||
const imageView = wrapper.find('.van-image-preview').element;
|
||||
|
||||
expect(imageView.parentNode).toEqual(div1);
|
||||
wrapper.vm.getContainer = () => div2;
|
||||
expect(imageView.parentNode).toEqual(div2);
|
||||
wrapper.vm.getContainer = null;
|
||||
expect(wrapper.element).toEqual(wrapper.element);
|
||||
});
|
||||
|
||||
test('swipeTo method', async () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<div>
|
||||
<van-image-preview ref="imagePreview" :value="true" :images="images">
|
||||
</van-image-preview>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
images,
|
||||
};
|
||||
},
|
||||
});
|
||||
const { imagePreview } = wrapper.vm.$refs;
|
||||
imagePreview.swipeTo(2);
|
||||
|
||||
await later(100);
|
||||
expect(imagePreview.active).toEqual(2);
|
||||
});
|
||||
|
||||
@ -98,7 +98,8 @@ Vue.use(Lazyload);
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description |
|
||||
| ------- | -------------------------- |
|
||||
| loading | Custom loading placeholder |
|
||||
| error | Custom error placeholder |
|
||||
| Name | Description |
|
||||
| ---------------- | ---------------------------------- |
|
||||
| default `v2.9.0` | Custom the content below the image |
|
||||
| loading | Custom loading placeholder |
|
||||
| error | Custom error placeholder |
|
||||
|
||||
@ -130,10 +130,11 @@ Vue.use(Lazyload);
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
| ------- | -------------------------- |
|
||||
| loading | 自定义加载中的提示内容 |
|
||||
| error | 自定义加载失败时的提示内容 |
|
||||
| 名称 | 说明 |
|
||||
| ---------------- | -------------------------- |
|
||||
| default `v2.9.0` | 自定义图片下方的内容 |
|
||||
| loading | 自定义加载中的提示内容 |
|
||||
| error | 自定义加载失败时的提示内容 |
|
||||
|
||||
## 常见问题
|
||||
|
||||
|
||||
@ -173,6 +173,7 @@ export default createComponent({
|
||||
>
|
||||
{this.genImage()}
|
||||
{this.genPlaceholder()}
|
||||
{this.slots()}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
@ -1,5 +1,12 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`default slot 1`] = `
|
||||
<div class="van-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img">
|
||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
||||
<!----></i></div>Custom Default
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`error-icon prop 1`] = `
|
||||
<div class="van-image">
|
||||
<div class="van-image__error"><i class="van-icon van-icon-error van-image__error-icon">
|
||||
|
||||
@ -157,3 +157,16 @@ test('radius prop', () => {
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('default slot', () => {
|
||||
const wrapper = mount(VanImage, {
|
||||
propsData: {
|
||||
src: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
||||
},
|
||||
scopedSlots: {
|
||||
default: () => 'Custom Default',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -1,16 +1,20 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<img v-for="img in imageList" v-lazy="img" />
|
||||
<img v-for="img in imageList" :key="img" v-lazy="img" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('title2')">
|
||||
<div v-for="img in backgroundImageList" v-lazy:background-image="img" />
|
||||
<div
|
||||
v-for="img in backgroundImageList"
|
||||
:key="img"
|
||||
v-lazy:background-image="img"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('title3')">
|
||||
<lazy-component>
|
||||
<img v-for="img in componentImageList" v-lazy="img" />
|
||||
<img v-for="img in componentImageList" :key="img" v-lazy="img" />
|
||||
</lazy-component>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
@ -68,7 +72,6 @@ export default {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 12px #ebedf0;
|
||||
}
|
||||
|
||||
.van-doc-demo-block__title,
|
||||
|
||||
31
src/mixins/click-outside.js
Normal file
31
src/mixins/click-outside.js
Normal file
@ -0,0 +1,31 @@
|
||||
/**
|
||||
* Listen to click outside event
|
||||
*/
|
||||
import { on, off } from '../utils/dom/event';
|
||||
|
||||
export const ClickOutsideMixin = (config) => ({
|
||||
props: {
|
||||
closeOnClickOutside: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
const clickOutsideHandler = (event) => {
|
||||
if (this.closeOnClickOutside && !this.$el.contains(event.target)) {
|
||||
this[config.method]();
|
||||
}
|
||||
};
|
||||
|
||||
return { clickOutsideHandler };
|
||||
},
|
||||
|
||||
mounted() {
|
||||
on(document, config.event, this.clickOutsideHandler);
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
off(document, config.event, this.clickOutsideHandler);
|
||||
},
|
||||
});
|
||||
@ -1,41 +0,0 @@
|
||||
/**
|
||||
* Listen to click outside event
|
||||
*/
|
||||
import Vue from 'vue';
|
||||
import { on, off } from '../utils/dom/event';
|
||||
|
||||
export type ClickOutsideMixinConfig = {
|
||||
event: string;
|
||||
method: string;
|
||||
};
|
||||
|
||||
export const ClickOutsideMixin = (config: ClickOutsideMixinConfig) =>
|
||||
Vue.extend({
|
||||
props: {
|
||||
closeOnClickOutside: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
const clickOutsideHandler = (event: Event) => {
|
||||
if (
|
||||
this.closeOnClickOutside &&
|
||||
!this.$el.contains(event.target as Node)
|
||||
) {
|
||||
(this as any)[config.method]();
|
||||
}
|
||||
};
|
||||
|
||||
return { clickOutsideHandler };
|
||||
},
|
||||
|
||||
mounted() {
|
||||
on(document, config.event, this.clickOutsideHandler);
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
off(document, config.event, this.clickOutsideHandler);
|
||||
},
|
||||
});
|
||||
@ -145,7 +145,7 @@ export function PopupMixin(options = {}) {
|
||||
},
|
||||
|
||||
removeLock() {
|
||||
if (this.lockScroll) {
|
||||
if (this.lockScroll && context.lockCount) {
|
||||
context.lockCount--;
|
||||
off(document, 'touchstart', this.touchStart);
|
||||
off(document, 'touchmove', this.onTouchMove);
|
||||
|
||||
@ -1,12 +1,4 @@
|
||||
import Vue, { PropType } from 'vue';
|
||||
import { GetContainer } from './popup/type';
|
||||
|
||||
type PortalMixinOptions = {
|
||||
ref?: string;
|
||||
afterPortal?: () => void;
|
||||
};
|
||||
|
||||
function getElement(selector: string | GetContainer): Element | null {
|
||||
function getElement(selector) {
|
||||
if (typeof selector === 'string') {
|
||||
return document.querySelector(selector);
|
||||
}
|
||||
@ -14,10 +6,10 @@ function getElement(selector: string | GetContainer): Element | null {
|
||||
return selector();
|
||||
}
|
||||
|
||||
export function PortalMixin({ ref, afterPortal }: PortalMixinOptions) {
|
||||
return Vue.extend({
|
||||
export function PortalMixin({ ref, afterPortal }) {
|
||||
return {
|
||||
props: {
|
||||
getContainer: [String, Function] as PropType<string | GetContainer>,
|
||||
getContainer: [String, Function],
|
||||
},
|
||||
|
||||
watch: {
|
||||
@ -33,7 +25,7 @@ export function PortalMixin({ ref, afterPortal }: PortalMixinOptions) {
|
||||
methods: {
|
||||
portal() {
|
||||
const { getContainer } = this;
|
||||
const el = ref ? (this.$refs[ref] as HTMLElement) : this.$el;
|
||||
const el = ref ? this.$refs[ref] : this.$el;
|
||||
|
||||
let container;
|
||||
if (getContainer) {
|
||||
@ -51,5 +43,5 @@ export function PortalMixin({ ref, afterPortal }: PortalMixinOptions) {
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
}
|
||||
@ -1,21 +1,9 @@
|
||||
import Vue from 'vue';
|
||||
import { sortChildren } from '../utils/vnodes';
|
||||
|
||||
type ChildrenMixinOptions = {
|
||||
indexKey?: any;
|
||||
};
|
||||
|
||||
type ChildrenMixinThis = {
|
||||
disableBindRelation?: boolean;
|
||||
};
|
||||
|
||||
export function ChildrenMixin(
|
||||
parent: string,
|
||||
options: ChildrenMixinOptions = {}
|
||||
) {
|
||||
export function ChildrenMixin(parent, options = {}) {
|
||||
const indexKey = options.indexKey || 'index';
|
||||
|
||||
return Vue.extend({
|
||||
return {
|
||||
inject: {
|
||||
[parent]: {
|
||||
default: null,
|
||||
@ -24,11 +12,11 @@ export function ChildrenMixin(
|
||||
|
||||
computed: {
|
||||
parent() {
|
||||
if ((this as ChildrenMixinThis).disableBindRelation) {
|
||||
if (this.disableBindRelation) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (this as any)[parent];
|
||||
return this[parent];
|
||||
},
|
||||
|
||||
[indexKey]() {
|
||||
@ -49,7 +37,7 @@ export function ChildrenMixin(
|
||||
beforeDestroy() {
|
||||
if (this.parent) {
|
||||
this.parent.children = this.parent.children.filter(
|
||||
(item: any) => item !== this
|
||||
(item) => item !== this
|
||||
);
|
||||
}
|
||||
},
|
||||
@ -67,10 +55,10 @@ export function ChildrenMixin(
|
||||
this.parent.children = children;
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export function ParentMixin(parent: string) {
|
||||
export function ParentMixin(parent) {
|
||||
return {
|
||||
provide() {
|
||||
return {
|
||||
@ -2,11 +2,9 @@
|
||||
* Use scopedSlots in Vue 2.6+
|
||||
* downgrade to slots in lower version
|
||||
*/
|
||||
import Vue from 'vue';
|
||||
|
||||
export const SlotsMixin = Vue.extend({
|
||||
export const SlotsMixin = {
|
||||
methods: {
|
||||
slots(name = 'default', props: any) {
|
||||
slots(name = 'default', props) {
|
||||
const { $slots, $scopedSlots } = this;
|
||||
const scopedSlot = $scopedSlots[name];
|
||||
|
||||
@ -17,4 +15,4 @@ export const SlotsMixin = Vue.extend({
|
||||
return $slots[name];
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
@ -1,9 +1,8 @@
|
||||
import Vue from 'vue';
|
||||
import { on } from '../utils/dom/event';
|
||||
|
||||
const MIN_DISTANCE = 10;
|
||||
|
||||
function getDirection(x: number, y: number) {
|
||||
function getDirection(x, y) {
|
||||
if (x > y && x > MIN_DISTANCE) {
|
||||
return 'horizontal';
|
||||
}
|
||||
@ -15,29 +14,19 @@ function getDirection(x: number, y: number) {
|
||||
return '';
|
||||
}
|
||||
|
||||
type TouchMixinData = {
|
||||
startX: number;
|
||||
startY: number;
|
||||
deltaX: number;
|
||||
deltaY: number;
|
||||
offsetX: number;
|
||||
offsetY: number;
|
||||
direction: string;
|
||||
};
|
||||
|
||||
export const TouchMixin = Vue.extend({
|
||||
export const TouchMixin = {
|
||||
data() {
|
||||
return { direction: '' } as TouchMixinData;
|
||||
return { direction: '' };
|
||||
},
|
||||
|
||||
methods: {
|
||||
touchStart(event: TouchEvent) {
|
||||
touchStart(event) {
|
||||
this.resetTouchStatus();
|
||||
this.startX = event.touches[0].clientX;
|
||||
this.startY = event.touches[0].clientY;
|
||||
},
|
||||
|
||||
touchMove(event: TouchEvent) {
|
||||
touchMove(event) {
|
||||
const touch = event.touches[0];
|
||||
this.deltaX = touch.clientX - this.startX;
|
||||
this.deltaY = touch.clientY - this.startY;
|
||||
@ -57,8 +46,8 @@ export const TouchMixin = Vue.extend({
|
||||
|
||||
// avoid Vue 2.6 event bubble issues by manually binding events
|
||||
// https://github.com/youzan/vant/issues/3015
|
||||
bindTouchEvent(el: HTMLElement) {
|
||||
const { onTouchStart, onTouchMove, onTouchEnd } = this as any;
|
||||
bindTouchEvent(el) {
|
||||
const { onTouchStart, onTouchMove, onTouchEnd } = this;
|
||||
|
||||
on(el, 'touchstart', onTouchStart);
|
||||
on(el, 'touchmove', onTouchMove);
|
||||
@ -69,4 +58,4 @@ export const TouchMixin = Vue.extend({
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
@ -60,10 +60,14 @@ export default createComponent({
|
||||
this.offset = this.wrapWidth;
|
||||
this.duration = 0;
|
||||
|
||||
doubleRaf(() => {
|
||||
this.offset = -this.contentWidth;
|
||||
this.duration = (this.contentWidth + this.wrapWidth) / this.speed;
|
||||
this.$emit('replay');
|
||||
// wait for Vue to render offset
|
||||
this.$nextTick(() => {
|
||||
// use double raf to ensure animation can start
|
||||
doubleRaf(() => {
|
||||
this.offset = -this.contentWidth;
|
||||
this.duration = (this.contentWidth + this.wrapWidth) / this.speed;
|
||||
this.$emit('replay');
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
@ -45,8 +45,10 @@ export default createComponent({
|
||||
}
|
||||
},
|
||||
|
||||
onTouchEnd() {
|
||||
onTouchEnd(event) {
|
||||
if (this.active) {
|
||||
// eliminate tap delay on safari
|
||||
event.preventDefault();
|
||||
this.active = false;
|
||||
this.$emit('press', this.text, this.type);
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@ import { stopPropagation } from '../utils/dom/event';
|
||||
import { BindEventMixin } from '../mixins/bind-event';
|
||||
import Key from './Key';
|
||||
|
||||
const [createComponent, bem, t] = createNamespace('number-keyboard');
|
||||
const [createComponent, bem] = createNamespace('number-keyboard');
|
||||
|
||||
export default createComponent({
|
||||
mixins: [
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import NumberKeyboard from '..';
|
||||
import { mount, trigger, later } from '../../../test';
|
||||
import { mount, trigger } from '../../../test';
|
||||
|
||||
function clickKey(key) {
|
||||
trigger(key, 'touchstart');
|
||||
|
||||
@ -3,7 +3,6 @@ import { createNamespace, isObject } from '../utils';
|
||||
import { range } from '../utils/format/number';
|
||||
import { preventDefault } from '../utils/dom/event';
|
||||
import { TouchMixin } from '../mixins/touch';
|
||||
import { DEFAULT_ITEM_HEIGHT } from './shared';
|
||||
|
||||
const DEFAULT_DURATION = 200;
|
||||
|
||||
@ -256,11 +255,9 @@ export default createComponent({
|
||||
},
|
||||
|
||||
genOptions() {
|
||||
const optionStyle = {};
|
||||
|
||||
if (this.itemHeight !== DEFAULT_ITEM_HEIGHT) {
|
||||
optionStyle.height = `${this.itemHeight}px`;
|
||||
}
|
||||
const optionStyle = {
|
||||
height: `${this.itemHeight}px`,
|
||||
};
|
||||
|
||||
return this.options.map((option, index) => {
|
||||
const text = this.getOptionText(option);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:title="t('title')"
|
||||
@ -9,7 +9,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('defaultIndex')">
|
||||
<demo-block card :title="t('defaultIndex')">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:title="t('title')"
|
||||
@ -19,7 +19,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('multipleColumns')">
|
||||
<demo-block card :title="t('multipleColumns')">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:title="t('title')"
|
||||
@ -29,7 +29,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block v-if="!isWeapp" :title="t('cascade')">
|
||||
<demo-block card v-if="!isWeapp" :title="t('cascade')">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:title="t('title')"
|
||||
@ -39,7 +39,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('disableOption')">
|
||||
<demo-block card :title="t('disableOption')">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:title="t('title')"
|
||||
@ -47,7 +47,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('setColumnValues')">
|
||||
<demo-block card :title="t('setColumnValues')">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:title="t('title')"
|
||||
@ -56,11 +56,11 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('loadingStatus')">
|
||||
<demo-block card :title="t('loadingStatus')">
|
||||
<van-picker loading show-toolbar :title="t('title')" :columns="columns" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block v-if="!isWeapp" :title="t('withPopup')">
|
||||
<demo-block card v-if="!isWeapp" :title="t('withPopup')">
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
// Utils
|
||||
import { createNamespace, isDef, isObject } from '../utils';
|
||||
import { createNamespace, isDef } from '../utils';
|
||||
import { preventDefault } from '../utils/dom/event';
|
||||
import { BORDER_UNSET_TOP_BOTTOM } from '../utils/constant';
|
||||
import { pickerProps, DEFAULT_ITEM_HEIGHT } from './shared';
|
||||
@ -91,7 +91,7 @@ export default createComponent({
|
||||
: +this.defaultIndex;
|
||||
|
||||
formatted.push({
|
||||
values: cursor.children.map((item) => item[this.valueKey]),
|
||||
values: cursor.children,
|
||||
className: cursor.className,
|
||||
defaultIndex,
|
||||
});
|
||||
@ -106,7 +106,16 @@ export default createComponent({
|
||||
if (this.dataType === 'text') {
|
||||
this.$emit(event, this.getColumnValue(0), this.getColumnIndex(0));
|
||||
} else {
|
||||
this.$emit(event, this.getValues(), this.getIndexes());
|
||||
let values = this.getValues();
|
||||
|
||||
// compatible with old version of wrong parameters
|
||||
// should be removed in next major version
|
||||
// see: https://github.com/youzan/vant/issues/5905
|
||||
if (this.dataType === 'cascade') {
|
||||
values = values.map((item) => item[this.valueKey]);
|
||||
}
|
||||
|
||||
this.$emit(event, values, this.getIndexes());
|
||||
}
|
||||
},
|
||||
|
||||
@ -138,7 +147,16 @@ export default createComponent({
|
||||
this.getColumnIndex(0)
|
||||
);
|
||||
} else {
|
||||
this.$emit('change', this, this.getValues(), columnIndex);
|
||||
let values = this.getValues();
|
||||
|
||||
// compatible with old version of wrong parameters
|
||||
// should be removed in next major version
|
||||
// see: https://github.com/youzan/vant/issues/5905
|
||||
if (this.dataType === 'cascade') {
|
||||
values = values.map((item) => item[this.valueKey]);
|
||||
}
|
||||
|
||||
this.$emit('change', this, values, columnIndex);
|
||||
}
|
||||
},
|
||||
|
||||
@ -200,14 +218,7 @@ export default createComponent({
|
||||
const column = this.children[index];
|
||||
|
||||
if (column) {
|
||||
if (this.dataType === 'cascade') {
|
||||
// map should be removed in next major version
|
||||
column.setOptions(
|
||||
options.map((item) => (isObject(item) ? item[this.valueKey] : item))
|
||||
);
|
||||
} else {
|
||||
column.setOptions(options);
|
||||
}
|
||||
column.setOptions(options);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -104,11 +104,11 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: @picker-option-height;
|
||||
padding: 0 @padding-base;
|
||||
color: @picker-option-text-color;
|
||||
|
||||
&--disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: @picker-option-disabled-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
7
src/picker/test/__snapshots__/cascade.spec.js.snap
Normal file
7
src/picker/test/__snapshots__/cascade.spec.js.snap
Normal file
@ -0,0 +1,7 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`disabled in cascade 1`] = `
|
||||
<li role="button" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled" style="height: 44px;">
|
||||
<div class="van-ellipsis">A2</div>
|
||||
</li>
|
||||
`;
|
||||
@ -11,19 +11,19 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">杭州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁波</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">温州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">嘉兴</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖州</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -43,19 +43,19 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">杭州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁波</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">温州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">嘉兴</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖州</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -75,32 +75,32 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">周一</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">周二</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">周三</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">周四</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">周五</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">上午</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">下午</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">晚上</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -120,30 +120,30 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">浙江</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">福建</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">杭州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">温州</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">西湖区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">余杭区</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -163,13 +163,13 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled">
|
||||
<li role="button" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled" style="height: 44px;">
|
||||
<div class="van-ellipsis">杭州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁波</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">温州</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -189,29 +189,29 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column column1">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">浙江</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">福建</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column column2">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">杭州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁波</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">温州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">嘉兴</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖州</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -231,29 +231,29 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column column1">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">浙江</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">福建</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column column2">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">杭州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁波</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">温州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">嘉兴</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖州</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -76,7 +76,7 @@ exports[`not allow html 1`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis"><div>option</div></div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -108,3 +108,20 @@ test('setIndexes of cascade columns', () => {
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[0][0]).toEqual(['A2', 'B3', 'C6']);
|
||||
});
|
||||
|
||||
test('disabled in cascade', () => {
|
||||
const wrapper = mount(Picker, {
|
||||
propsData: {
|
||||
showToolbar: true,
|
||||
columns: [
|
||||
COLUMNS[0],
|
||||
{
|
||||
...COLUMNS[1],
|
||||
disabled: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-picker-column__item--disabled')).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-cell :title="t('buttonBasic')" is-link @click="showBasic = true" />
|
||||
<van-popup v-model="showBasic" :style="{ padding: '30px 50px' }">
|
||||
{{ t('content') }}
|
||||
</van-popup>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('position')">
|
||||
<demo-block card :title="t('position')">
|
||||
<van-cell :title="t('buttonTop')" is-link @click="showTop = true" />
|
||||
<van-cell :title="t('buttonBottom')" is-link @click="showBottom = true" />
|
||||
<van-cell :title="t('buttonLeft')" is-link @click="showLeft = true" />
|
||||
@ -31,7 +31,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('closeIcon')">
|
||||
<demo-block card :title="t('closeIcon')">
|
||||
<van-cell :title="t('closeIcon')" is-link @click="showCloseIcon = true" />
|
||||
<van-cell
|
||||
:title="t('customCloseIcon')"
|
||||
@ -66,7 +66,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('roundCorner')">
|
||||
<demo-block card :title="t('roundCorner')">
|
||||
<van-cell
|
||||
:title="t('roundCorner')"
|
||||
is-link
|
||||
@ -80,7 +80,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block v-if="!isWeapp" :title="t('getContainer')">
|
||||
<demo-block card v-if="!isWeapp" :title="t('getContainer')">
|
||||
<van-cell
|
||||
:title="t('getContainer')"
|
||||
is-link
|
||||
|
||||
@ -39,7 +39,7 @@ export default {
|
||||
<van-rate
|
||||
v-model="value"
|
||||
:size="25"
|
||||
color="#ee0a24"
|
||||
color="#ffd21e"
|
||||
void-icon="star"
|
||||
void-color="#eee"
|
||||
/>
|
||||
@ -105,7 +105,7 @@ export default {
|
||||
| count | Count | _number \| string_ | `5` |
|
||||
| size | Icon size | _number \| string_ | `20px` |
|
||||
| gutter | Icon gutter | _number \| string_ | `4px` |
|
||||
| color | Selected color | _string_ | `#ffd21e` |
|
||||
| color | Selected color | _string_ | `#ee0a24` |
|
||||
| void-color | Void color | _string_ | `#c8c9cc` |
|
||||
| disabled-color | Disabled color | _string_ | `#c8c9cc` |
|
||||
| icon | Selected icon | _string_ | `star` |
|
||||
|
||||
@ -39,7 +39,7 @@ export default {
|
||||
<van-rate
|
||||
v-model="value"
|
||||
:size="25"
|
||||
color="#ee0a24"
|
||||
color="#ffd21e"
|
||||
void-icon="star"
|
||||
void-color="#eee"
|
||||
/>
|
||||
@ -105,7 +105,7 @@ export default {
|
||||
| count | 图标总数 | _number \| string_ | `5` |
|
||||
| size | 图标大小，默认单位为`px` | _number \| string_ | `20px` |
|
||||
| gutter | 图标间距，默认单位为`px` | _number \| string_ | `4px` |
|
||||
| color | 选中时的颜色 | _string_ | `#ffd21e` |
|
||||
| color | 选中时的颜色 | _string_ | `#ee0a24` |
|
||||
| void-color | 未选中时的颜色 | _string_ | `#c8c9cc` |
|
||||
| disabled-color | 禁用时的颜色 | _string_ | `#c8c9cc` |
|
||||
| icon | 选中时的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `star` |
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<van-rate
|
||||
v-model="value3"
|
||||
:size="25"
|
||||
color="#ee0a24"
|
||||
color="#ffd21e"
|
||||
void-icon="star"
|
||||
void-color="#eee"
|
||||
/>
|
||||
|
||||
@ -32,11 +32,11 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<div tabindex="0" role="radiogroup" class="van-rate">
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="color: rgb(238, 10, 36); font-size: 25px;">
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="color: rgb(255, 210, 30); font-size: 25px;">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="color: rgb(238, 10, 36); font-size: 25px;">
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="color: rgb(255, 210, 30); font-size: 25px;">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="color: rgb(238, 10, 36); font-size: 25px;">
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="color: rgb(255, 210, 30); font-size: 25px;">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
|
||||
<!----></i></div>
|
||||
|
||||
@ -88,7 +88,7 @@ export default {
|
||||
|
||||
### Custom Action Button
|
||||
|
||||
Use `action` slot to custom right button, `cancel` event will no longer be triggered when use this slot
|
||||
Use `action` slot to custom right button, `cancel` event will no longer be triggered when use this slot.
|
||||
|
||||
```html
|
||||
<van-search
|
||||
@ -116,6 +116,7 @@ Use `action` slot to custom right button, `cancel` event will no longer be trigg
|
||||
| maxlength | Max length of value | _number \| string_ | - |
|
||||
| placeholder | Placeholder | _string_ | - |
|
||||
| clearable | Whether to be clearable | _boolean_ | `true` |
|
||||
| clear-trigger `v2.9.1` | When to display the clear icon, `always` means to display the icon when value is not empty, `focus` means to display the icon when input is focused | _string_ | `focus` |
|
||||
| autofocus | Whether to auto focus, unsupported in iOS | _boolean_ | `false` |
|
||||
| show-action | Whether to show right action button | _boolean_ | `false` |
|
||||
| action-text `v2.2.2` | Text of action button | _boolean_ | `Cancel` |
|
||||
|
||||
@ -13,7 +13,7 @@ Vue.use(Search);
|
||||
|
||||
### 基础用法
|
||||
|
||||
v-model 用于控制搜索框中的文字，background 可以自定义搜索框外部背景色
|
||||
v-model 用于控制搜索框中的文字，background 可以自定义搜索框外部背景色。
|
||||
|
||||
```html
|
||||
<van-search v-model="value" placeholder="请输入搜索关键词" />
|
||||
@ -21,7 +21,7 @@ v-model 用于控制搜索框中的文字，background 可以自定义搜索框
|
||||
|
||||
### 事件监听
|
||||
|
||||
Search 组件提供了`search`和`cancel`事件，`search`事件在点击键盘上的搜索/回车按钮后触发，`cancel`事件在点击搜索框右侧取消按钮时触发
|
||||
Search 组件提供了 `search` 和 `cancel` 事件，`search` 事件在点击键盘上的搜索/回车按钮后触发，`cancel` 事件在点击搜索框右侧取消按钮时触发。
|
||||
|
||||
```html
|
||||
<form action="/">
|
||||
@ -55,11 +55,11 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
> Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮
|
||||
> Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮。
|
||||
|
||||
### 搜索框内容对齐
|
||||
|
||||
通过 `input-align` 属性设置搜索框内容的对齐方式，可选值为`center`、`right`
|
||||
通过 `input-align` 属性设置搜索框内容的对齐方式，可选值为 `center`、`right`。
|
||||
|
||||
```html
|
||||
<van-search
|
||||
@ -71,7 +71,7 @@ export default {
|
||||
|
||||
### 禁用搜索框
|
||||
|
||||
通过`disabled`属性禁用搜索框
|
||||
通过 `disabled` 属性禁用搜索框。
|
||||
|
||||
```html
|
||||
<van-search v-model="value" disabled placeholder="请输入搜索关键词" />
|
||||
@ -79,7 +79,7 @@ export default {
|
||||
|
||||
### 自定义背景色
|
||||
|
||||
通过`background`属性可以设置搜索框外部的背景色，通过`shape`属性设置搜索框的形状，可选值为`round`
|
||||
通过 `background` 属性可以设置搜索框外部的背景色，通过 `shape` 属性设置搜索框的形状，可选值为 `round`。
|
||||
|
||||
```html
|
||||
<van-search
|
||||
@ -92,7 +92,7 @@ export default {
|
||||
|
||||
### 自定义按钮
|
||||
|
||||
使用`action`插槽可以自定义右侧按钮的内容。使用插槽后，`cancel`事件将不再触发
|
||||
使用 `action` 插槽可以自定义右侧按钮的内容。使用插槽后，`cancel` 事件将不再触发。
|
||||
|
||||
```html
|
||||
<van-search
|
||||
@ -119,7 +119,8 @@ export default {
|
||||
| background | 搜索框外部背景色 | _string_ | `#f2f2f2` |
|
||||
| maxlength | 输入的最大字符数 | _number \| string_ | - |
|
||||
| placeholder | 占位提示文字 | _string_ | - |
|
||||
| clearable | 是否启用清除控件 | _boolean_ | `true` |
|
||||
| clearable | 是否启用清除图标，点击清除图标后会清空输入框 | _boolean_ | `true` |
|
||||
| clear-trigger `v2.9.1` | 显示清除图标的时机，`always` 表示输入框不为空时展示，<br>`focus` 表示输入框聚焦且不为空时展示 | _string_ | `focus` |
|
||||
| autofocus | 是否自动聚焦，iOS 系统不支持该属性 | _boolean_ | `false` |
|
||||
| show-action | 是否在搜索框右侧显示取消按钮 | _boolean_ | `false` |
|
||||
| action-text `v2.2.2` | 取消按钮文字 | _boolean_ | `取消` |
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user