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
1274c7c74c
30
.github/workflows/sync.yml
vendored
Normal file
30
.github/workflows/sync.yml
vendored
Normal file
@ -0,0 +1,30 @@
|
||||
name: Sync to Gitee
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [dev]
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Sync to Gitee
|
||||
uses: wearerequired/git-mirror-action@master
|
||||
env:
|
||||
# 注意在 Settings->Secrets 配置 GITEE_RSA_PRIVATE_KEY
|
||||
SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
|
||||
with:
|
||||
# 注意替换为你的 GitHub 源仓库地址
|
||||
source-repo: 'git@github.com:youzan/vant.git'
|
||||
# 注意替换为你的 Gitee 目标仓库地址
|
||||
destination-repo: 'git@gitee.com:vant-contrib/vant.git'
|
||||
|
||||
- name: Build Gitee Pages
|
||||
uses: yanglbme/gitee-pages-action@master
|
||||
with:
|
||||
# 注意替换为你的 Gitee 用户名
|
||||
gitee-username: chenjiahan
|
||||
# 注意在 Settings->Secrets 配置 GITEE_PASSWORD
|
||||
gitee-password: ${{ secrets.GITEE_PASSWORD }}
|
||||
# 注意替换为你的 Gitee 仓库
|
||||
gitee-repo: vant-contrib/vant
|
||||
@ -94,7 +94,7 @@ vant 也支持按需引入、CDN 引入等方式，详细说明见 [快速上手
|
||||
|
||||
- [详细文档](https://youzan.github.io/vant)
|
||||
- [更新日志](https://youzan.github.io/vant#/zh-CN/changelog)
|
||||
- [码云镜像](https://gitee.com/organizations/vant-contrib)
|
||||
- [码云镜像](https://vant-contrib.gitee.io/vant)
|
||||
- [Gitter 讨论组](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
|
||||
|
||||
## 手机预览
|
||||
|
||||
@ -10,6 +10,47 @@ 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.8.6](https://github.com/youzan/vant/compare/v2.8.5...v2.8.6)
|
||||
|
||||
`2020-06-13`
|
||||
|
||||
**Feature**
|
||||
|
||||
- NoticeBar: allow to force scrolling [7b0546](https://github.com/youzan/vant/commit/7b0546dbba7425988ae2b4d1765fe20e907c893f)
|
||||
- Picker: item-height support rem unit [#6462](https://github.com/youzan/vant/issues/6462)
|
||||
- Stepper: add placeholder prop [#6519](https://github.com/youzan/vant/issues/6519)
|
||||
|
||||
**style**
|
||||
|
||||
- Field: update disabled color [#6534](https://github.com/youzan/vant/issues/6534)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Calendar: quick select not work when select same day [#6504](https://github.com/youzan/vant/issues/6504)
|
||||
- CollapseItem: can't hide border [#6533](https://github.com/youzan/vant/issues/6533)
|
||||
- Field: formatter not work when v-model changed [#6490](https://github.com/youzan/vant/issues/6490)
|
||||
- ImagePreview: image blurred after scale on iOS [#6496](https://github.com/youzan/vant/issues/6496)
|
||||
- Picker: cursor.defaultIndex may be 0 [#6473](https://github.com/youzan/vant/issues/6473)
|
||||
- Tabbar: avoid redundant navigation error [#6474](https://github.com/youzan/vant/issues/6474)
|
||||
|
||||
### [v2.8.5](https://github.com/youzan/vant/compare/v2.8.4...v2.8.5)
|
||||
|
||||
`2020-06-04`
|
||||
|
||||
**Feature**
|
||||
|
||||
- DropdownItem: add lazy-render prop [#6454](https://github.com/youzan/vant/issues/6454)
|
||||
- Notify: support component call [#6453](https://github.com/youzan/vant/issues/6453)
|
||||
- ShareSheet: add options description [#6460](https://github.com/youzan/vant/issues/6460)
|
||||
- Skeleton: add round prop [#6441](https://github.com/youzan/vant/issues/6441)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Popup: incorrect overlay z-index when reopened [#6429](https://github.com/youzan/vant/issues/6429)
|
||||
- Button: set font-size to inherit when loading [#6413](https://github.com/youzan/vant/issues/6413) [#6414](https://github.com/youzan/vant/issues/6414)
|
||||
- NoticeBar: scroll failed after activated [d21420](https://github.com/youzan/vant/commit/d21420b7d2357c4c0b47bc0f38b48e57d7fd9b81)
|
||||
- Field: fix render error when value is null or undefined [#6419](https://github.com/youzan/vant/issues/6419)
|
||||
|
||||
### [v2.8.4](https://github.com/youzan/vant/compare/v2.8.3...v2.8.4)
|
||||
|
||||
`2020-05-28`
|
||||
|
||||
@ -10,6 +10,47 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 次版本号：每隔一至二个月发布，包含新特性和较大的功能更新，向下兼容。
|
||||
- 主版本号：发布时间不定，包含不兼容更新，预计下一个主版本会与 Vue 3.0 同期发布。
|
||||
|
||||
### [v2.8.6](https://github.com/youzan/vant/compare/v2.8.5...v2.8.6)
|
||||
|
||||
`2020-06-13`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Stepper: 新增 placeholder 属性 [#6519](https://github.com/youzan/vant/issues/6519)
|
||||
- Picker: 选项高度支持配置 rem 单位 [#6462](https://github.com/youzan/vant/issues/6462)
|
||||
- NoticeBar: 支持在内容较短时开启滚动播放 [7b0546](https://github.com/youzan/vant/commit/7b0546dbba7425988ae2b4d1765fe20e907c893f)
|
||||
|
||||
**style**
|
||||
|
||||
- Field: 更新禁用状态下的文本颜色 [#6534](https://github.com/youzan/vant/issues/6534)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Calendar: 修复范围选择时无法快捷选择同一天的问题 [#6504](https://github.com/youzan/vant/issues/6504)
|
||||
- CollapseItem: 修复无法通过 border 属性隐藏内边框的问题 [#6533](https://github.com/youzan/vant/issues/6533)
|
||||
- Field: 修复 v-model 绑定值变化时 formatter 函数没生效的问题 [#6490](https://github.com/youzan/vant/issues/6490)
|
||||
- ImagePreview: 修复在 iOS 上放大后图片变模糊的问题 [#6496](https://github.com/youzan/vant/issues/6496)
|
||||
- Picker: 修复级联选择时 defaultIndex 在个别情况下取值错误的问题 [#6473](https://github.com/youzan/vant/issues/6473)
|
||||
- Tabbar: 修复使用 vue-router 3.3 以上版本时出现重复路由提示的问题 [#6474](https://github.com/youzan/vant/issues/6474)
|
||||
|
||||
### [v2.8.5](https://github.com/youzan/vant/compare/v2.8.4...v2.8.5)
|
||||
|
||||
`2020-06-04`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Notify: 支持组件调用 [#6453](https://github.com/youzan/vant/issues/6453)
|
||||
- Skeleton: 新增 round 属性，用于展示圆角风格 [#6441](https://github.com/youzan/vant/issues/6441)
|
||||
- ShareSheet: 支持在 option 中配置 description 属性 [#6460](https://github.com/youzan/vant/issues/6460)
|
||||
- DropdownItem: 新增 lazy-render 属性，由于控制是否开启延迟渲染 [#6454](https://github.com/youzan/vant/issues/6454)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Popup: 修复重复弹出时遮罩层 z-index 未正确更新的问题 [#6429](https://github.com/youzan/vant/issues/6429)
|
||||
- Button: 修复设置 loading 时无法与其他按钮垂直对齐的问题 [#6413](https://github.com/youzan/vant/issues/6413) [#6414](https://github.com/youzan/vant/issues/6414)
|
||||
- NoticeBar: 修复在 keep-alive 内重新渲染时无法正确滚动的问题 [d21420](https://github.com/youzan/vant/commit/d21420b7d2357c4c0b47bc0f38b48e57d7fd9b81)
|
||||
- Field: 修复 value 为 null 且开启 show-word-limit 时出现报错的问题 [#6419](https://github.com/youzan/vant/issues/6419)
|
||||
|
||||
### [v2.8.4](https://github.com/youzan/vant/compare/v2.8.3...v2.8.4)
|
||||
|
||||
`2020-05-28`
|
||||
|
||||
@ -59,7 +59,7 @@
|
||||
|
||||
- [意见反馈](https://github.com/youzan/vant/issues)
|
||||
- [更新日志](#/zh-CN/changelog)
|
||||
- [码云镜像](https://gitee.com/organizations/vant-contrib)
|
||||
- [码云镜像](https://vant-contrib.gitee.io/vant)
|
||||
- [Gitter 讨论组](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
|
||||
|
||||
### 开源协议
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vant",
|
||||
"version": "2.8.4",
|
||||
"version": "2.8.6",
|
||||
"description": "Mobile UI Components built on Vue",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
||||
@ -35,6 +35,7 @@ yarn add @vant/cli --dev
|
||||
"dev": "vant-cli dev",
|
||||
"test": "vant-cli test",
|
||||
"lint": "vant-cli lint",
|
||||
"build": "vant-cli build",
|
||||
"release": "vant-cli release",
|
||||
"build-site": "vant-cli build-site"
|
||||
},
|
||||
|
||||
@ -33,22 +33,22 @@
|
||||
"@vue/compiler-sfc": "3.x"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/fs-extra": "^8.1.0",
|
||||
"@types/lodash": "^4.14.150",
|
||||
"@types/fs-extra": "^9.0.1",
|
||||
"@types/lodash": "^4.14.153",
|
||||
"@types/postcss-load-config": "^2.0.1",
|
||||
"@types/webpack": "^4.41.12",
|
||||
"@types/webpack-dev-server": "^3.10.1",
|
||||
"@types/webpack": "^4.41.13",
|
||||
"@types/webpack-dev-server": "^3.11.0",
|
||||
"@types/webpack-merge": "^4.1.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.9.6",
|
||||
"@babel/plugin-syntax-jsx": "^7.8.3",
|
||||
"@babel/plugin-transform-object-assign": "^7.8.3",
|
||||
"@babel/plugin-transform-runtime": "^7.9.6",
|
||||
"@babel/preset-env": "^7.9.6",
|
||||
"@babel/preset-typescript": "^7.9.0",
|
||||
"@babel/core": "^7.10.1",
|
||||
"@babel/plugin-syntax-jsx": "^7.10.1",
|
||||
"@babel/plugin-transform-object-assign": "^7.10.1",
|
||||
"@babel/plugin-transform-runtime": "^7.10.1",
|
||||
"@babel/preset-env": "^7.10.1",
|
||||
"@babel/preset-typescript": "^7.10.1",
|
||||
"@nuxt/friendly-errors-webpack-plugin": "^2.5.0",
|
||||
"@types/jest": "^25.2.1",
|
||||
"@types/jest": "^25.2.3",
|
||||
"@vant/eslint-config": "^2.2.2",
|
||||
"@vant/markdown-loader": "^3.0.0-alpha.0",
|
||||
"@vant/markdown-vetur": "^2.0.1",
|
||||
@ -58,18 +58,18 @@
|
||||
"@vue/component-compiler-utils": "^3.1.2",
|
||||
"@vue/test-utils": "1.0.0-beta.29",
|
||||
"address": "^1.1.2",
|
||||
"autoprefixer": "^9.7.6",
|
||||
"babel-jest": "^25.5.1",
|
||||
"autoprefixer": "^9.8.0",
|
||||
"babel-jest": "^26.0.1",
|
||||
"babel-loader": "^8.1.0",
|
||||
"babel-plugin-import": "^1.13.0",
|
||||
"babel-plugin-transform-jsx-vue3": "^0.1.8",
|
||||
"cache-loader": "^4.1.0",
|
||||
"chokidar": "^3.4.0",
|
||||
"clean-css": "^4.2.3",
|
||||
"codecov": "^3.6.5",
|
||||
"codecov": "^3.7.0",
|
||||
"commander": "^5.1.0",
|
||||
"consola": "^2.11.3",
|
||||
"conventional-changelog": "^3.1.18",
|
||||
"consola": "^2.12.2",
|
||||
"conventional-changelog": "^3.1.21",
|
||||
"cross-env": "^7.0.2",
|
||||
"css-loader": "^3.5.3",
|
||||
"eslint": "^6.8.0",
|
||||
@ -83,25 +83,25 @@
|
||||
"jest-canvas-mock": "^2.2.0",
|
||||
"jest-serializer-vue": "^2.0.2",
|
||||
"less": "^3.11.1",
|
||||
"less-loader": "^6.0.0",
|
||||
"lint-staged": "^10.2.2",
|
||||
"less-loader": "^6.1.0",
|
||||
"lint-staged": "^10.2.7",
|
||||
"lodash": "^4.17.15",
|
||||
"ora": "^4.0.4",
|
||||
"portfinder": "^1.0.26",
|
||||
"postcss": "^7.0.28",
|
||||
"postcss": "^7.0.31",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"prettier": "^2.0.5",
|
||||
"release-it": "^13.5.7",
|
||||
"sass": "^1.26.5",
|
||||
"release-it": "^13.6.1",
|
||||
"sass": "^1.26.7",
|
||||
"sass-loader": "^8.0.2",
|
||||
"style-loader": "^1.2.1",
|
||||
"stylelint": "^13.3.3",
|
||||
"typescript": "^3.8.3",
|
||||
"stylelint": "^13.5.0",
|
||||
"typescript": "^3.9.3",
|
||||
"vue-jest": "4.0.0-beta.2",
|
||||
"vue-loader": "^16.0.0-beta.3",
|
||||
"vue-router": "^4.0.0-alpha.12",
|
||||
"webpack": "^4.43.0",
|
||||
"webpack-dev-server": "3.10.3",
|
||||
"webpack-dev-server": "3.11.0",
|
||||
"webpack-merge": "^4.2.2",
|
||||
"webpackbar": "^4.0.0"
|
||||
},
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -30,4 +30,5 @@ yarn add @vant/icons
|
||||
|
||||
1. Add new icon to assets/icons.sketch
|
||||
2. Add icon name to src/config.js
|
||||
3. Make a Pull Request
|
||||
3. Add icon codepoints to build/codepoints.js
|
||||
4. Make a Pull Request
|
||||
|
||||
@ -11,6 +11,7 @@ const md5File = require('md5-file');
|
||||
const iconfont = require('gulp-iconfont');
|
||||
const iconfontCss = require('gulp-iconfont-css');
|
||||
const config = require('../src/config');
|
||||
const codepoints = require('./codepoints');
|
||||
|
||||
const srcDir = path.join(__dirname, '../src');
|
||||
const svgDir = path.join(__dirname, '../assets/svg');
|
||||
@ -23,8 +24,10 @@ const md5 = md5File.sync(sketch).slice(0, 6);
|
||||
const fontName = `${config.name}-${md5}`;
|
||||
|
||||
// remove previous fonts
|
||||
const prevFonts = glob.sync(formats.map(ext => path.join(srcDir, '*.' + ext)));
|
||||
prevFonts.forEach(font => fs.removeSync(font));
|
||||
const prevFonts = glob.sync(
|
||||
formats.map((ext) => path.join(srcDir, '*.' + ext))
|
||||
);
|
||||
prevFonts.forEach((font) => fs.removeSync(font));
|
||||
|
||||
// generate font from svg && build index.less
|
||||
function font() {
|
||||
@ -35,7 +38,7 @@ function font() {
|
||||
path: template,
|
||||
targetPath: '../src/index.less',
|
||||
normalize: true,
|
||||
firstGlyph: 0xf000,
|
||||
fixedCodepoints: codepoints,
|
||||
cssClass: fontName, // this is a trick to pass fontName to template
|
||||
})
|
||||
)
|
||||
@ -53,7 +56,7 @@ function upload(done) {
|
||||
encode(fontName, srcDir);
|
||||
|
||||
// upload font to cdn
|
||||
formats.forEach(ext => {
|
||||
formats.forEach((ext) => {
|
||||
shell.exec(`superman-cdn /vant ${path.join(srcDir, fontName + '.' + ext)}`);
|
||||
});
|
||||
|
||||
|
||||
239
packages/vant-icons/build/codepoints.js
Normal file
239
packages/vant-icons/build/codepoints.js
Normal file
@ -0,0 +1,239 @@
|
||||
/* eslint-disable no-useless-escape */
|
||||
const map = {
|
||||
F000: 'add-o',
|
||||
F001: 'add-square',
|
||||
F002: 'add',
|
||||
F003: 'after-sale',
|
||||
F004: 'aim',
|
||||
F005: 'alipay',
|
||||
F006: 'apps-o',
|
||||
F007: 'arrow-down',
|
||||
F008: 'arrow-left',
|
||||
F009: 'arrow-up',
|
||||
F00A: 'arrow',
|
||||
F00B: 'ascending',
|
||||
F00C: 'audio',
|
||||
F00D: 'award-o',
|
||||
F00E: 'award',
|
||||
F00F: 'bag-o',
|
||||
F010: 'bag',
|
||||
F011: 'balance-list-o',
|
||||
F012: 'balance-list',
|
||||
F013: 'balance-o',
|
||||
F014: 'balance-pay',
|
||||
F015: 'bar-chart-o',
|
||||
F016: 'bars',
|
||||
F017: 'bell',
|
||||
F018: 'bill-o',
|
||||
F019: 'bill',
|
||||
F01A: 'birthday-cake-o',
|
||||
F01B: 'bookmark-o',
|
||||
F01C: 'bookmark',
|
||||
F01D: 'browsing-history-o',
|
||||
F01E: 'browsing-history',
|
||||
F01F: 'brush-o',
|
||||
F020: 'bulb-o',
|
||||
F021: 'bullhorn-o',
|
||||
F022: 'calender-o',
|
||||
F023: 'card',
|
||||
F024: 'cart-circle-o',
|
||||
F025: 'cart-circle',
|
||||
F026: 'cart-o',
|
||||
F027: 'cart',
|
||||
F028: 'cash-back-record',
|
||||
F029: 'cash-on-deliver',
|
||||
F02A: 'cashier-o',
|
||||
F02B: 'certificate',
|
||||
F02C: 'chart-trending-o',
|
||||
F02D: 'chat-o',
|
||||
F02E: 'chat',
|
||||
F02F: 'checked',
|
||||
F030: 'circle',
|
||||
F031: 'clear',
|
||||
F032: 'clock-o',
|
||||
F033: 'clock',
|
||||
F034: 'close',
|
||||
F035: 'closed-eye',
|
||||
F036: 'cluster-o',
|
||||
F037: 'cluster',
|
||||
F038: 'column',
|
||||
F039: 'comment-circle-o',
|
||||
F03A: 'comment-circle',
|
||||
F03B: 'comment-o',
|
||||
F03C: 'comment',
|
||||
F03D: 'completed',
|
||||
F03E: 'contact',
|
||||
F03F: 'coupon-o',
|
||||
F040: 'coupon',
|
||||
F041: 'credit-pay',
|
||||
F042: 'cross',
|
||||
F043: 'debit-pay',
|
||||
F044: 'delete',
|
||||
F045: 'descending',
|
||||
F046: 'description',
|
||||
F047: 'desktop-o',
|
||||
F048: 'diamond-o',
|
||||
F049: 'diamond',
|
||||
F04A: 'discount',
|
||||
F04B: 'down',
|
||||
F04C: 'ecard-pay',
|
||||
F04D: 'edit',
|
||||
F04E: 'ellipsis',
|
||||
F04F: 'empty',
|
||||
F050: 'envelop-o',
|
||||
F051: 'exchange',
|
||||
F052: 'expand-o',
|
||||
F053: 'expand',
|
||||
F054: 'eye-o',
|
||||
F055: 'eye',
|
||||
F056: 'fail',
|
||||
F057: 'failure',
|
||||
F058: 'filter-o',
|
||||
F059: 'fire-o',
|
||||
F05A: 'fire',
|
||||
F05B: 'flag-o',
|
||||
F05C: 'flower-o',
|
||||
F05D: 'free-postage',
|
||||
F05E: 'friends-o',
|
||||
F05F: 'friends',
|
||||
F060: 'gem-o',
|
||||
F061: 'gem',
|
||||
F062: 'gift-card-o',
|
||||
F063: 'gift-card',
|
||||
F064: 'gift-o',
|
||||
F065: 'gift',
|
||||
F066: 'gold-coin-o',
|
||||
F067: 'gold-coin',
|
||||
F068: 'good-job-o',
|
||||
F069: 'good-job',
|
||||
F06A: 'goods-collect-o',
|
||||
F06B: 'goods-collect',
|
||||
F06C: 'graphic',
|
||||
F06D: 'home-o',
|
||||
F06E: 'hot-o',
|
||||
F06F: 'hot-sale-o',
|
||||
F070: 'hot-sale',
|
||||
F071: 'hot',
|
||||
F072: 'hotel-o',
|
||||
F073: 'idcard',
|
||||
F074: 'info-o',
|
||||
F075: 'info',
|
||||
F076: 'invition',
|
||||
F077: 'label-o',
|
||||
F078: 'label',
|
||||
F079: 'like-o',
|
||||
F07A: 'like',
|
||||
F07B: 'live',
|
||||
F07C: 'location-o',
|
||||
F07D: 'location',
|
||||
F07E: 'lock',
|
||||
F07F: 'logistics',
|
||||
F080: 'manager-o',
|
||||
F081: 'manager',
|
||||
F082: 'map-marked',
|
||||
F083: 'medal-o',
|
||||
F084: 'medal',
|
||||
F085: 'more-o',
|
||||
F086: 'more',
|
||||
F087: 'music-o',
|
||||
F088: 'music',
|
||||
F089: 'new-arrival-o',
|
||||
F08A: 'new-arrival',
|
||||
F08B: 'new-o',
|
||||
F08C: 'new',
|
||||
F08D: 'newspaper-o',
|
||||
F08E: 'notes-o',
|
||||
F08F: 'orders-o',
|
||||
F090: 'other-pay',
|
||||
F091: 'paid',
|
||||
F092: 'passed',
|
||||
F093: 'pause-circle-o',
|
||||
F094: 'pause-circle',
|
||||
F095: 'pause',
|
||||
F096: 'peer-pay',
|
||||
F097: 'pending-payment',
|
||||
F098: 'phone-circle-o',
|
||||
F099: 'phone-circle',
|
||||
F09A: 'phone-o',
|
||||
F09B: 'phone',
|
||||
F09C: 'photo-o',
|
||||
F09D: 'photo',
|
||||
F09E: 'photograph',
|
||||
F09F: 'play-circle-o',
|
||||
F0A0: 'play-circle',
|
||||
F0A1: 'play',
|
||||
F0A2: 'plus',
|
||||
F0A3: 'point-gift-o',
|
||||
F0A4: 'point-gift',
|
||||
F0A5: 'points',
|
||||
F0A6: 'printer',
|
||||
F0A7: 'qr-invalid',
|
||||
F0A8: 'qr',
|
||||
F0A9: 'question-o',
|
||||
F0AA: 'question',
|
||||
F0AB: 'records',
|
||||
F0AC: 'refund-o',
|
||||
F0AD: 'replay',
|
||||
F0AE: 'scan',
|
||||
F0AF: 'search',
|
||||
F0B0: 'send-gift-o',
|
||||
F0B1: 'send-gift',
|
||||
F0B2: 'service-o',
|
||||
F0B3: 'service',
|
||||
F0B4: 'setting-o',
|
||||
F0B5: 'setting',
|
||||
F0B6: 'share',
|
||||
F0B7: 'shop-collect-o',
|
||||
F0B8: 'shop-collect',
|
||||
F0B9: 'shop-o',
|
||||
F0BA: 'shop',
|
||||
F0BB: 'shopping-cart-o',
|
||||
F0BC: 'shopping-cart',
|
||||
F0BD: 'shrink',
|
||||
F0BE: 'sign',
|
||||
F0BF: 'smile-comment-o',
|
||||
F0C0: 'smile-comment',
|
||||
F0C1: 'smile-o',
|
||||
F0C2: 'smile',
|
||||
F0C3: 'star-o',
|
||||
F0C4: 'star',
|
||||
F0C5: 'stop-circle-o',
|
||||
F0C6: 'stop-circle',
|
||||
F0C7: 'stop',
|
||||
F0C8: 'success',
|
||||
F0C9: 'thumb-circle-o',
|
||||
F0CA: 'thumb-circle',
|
||||
F0CB: 'todo-list-o',
|
||||
F0CC: 'todo-list',
|
||||
F0CD: 'tosend',
|
||||
F0CE: 'tv-o',
|
||||
F0CF: 'umbrella-circle',
|
||||
F0D0: 'underway-o',
|
||||
F0D1: 'underway',
|
||||
F0D2: 'upgrade',
|
||||
F0D3: 'user-circle-o',
|
||||
F0D4: 'user-o',
|
||||
F0D5: 'video-o',
|
||||
F0D6: 'video',
|
||||
F0D7: 'vip-card-o',
|
||||
F0D8: 'vip-card',
|
||||
F0D9: 'volume-o',
|
||||
F0DA: 'volume',
|
||||
F0DB: 'wap-home-o',
|
||||
F0DC: 'wap-home',
|
||||
F0DD: 'wap-nav',
|
||||
F0DE: 'warn-o',
|
||||
F0DF: 'warning-o',
|
||||
F0E0: 'warning',
|
||||
F0E1: 'weapp-nav',
|
||||
F0E2: 'wechat',
|
||||
F0E3: 'youzan-shield',
|
||||
};
|
||||
|
||||
const reversedMap = {};
|
||||
|
||||
Object.keys(map).forEach((key) => {
|
||||
reversedMap[map[key]] = key;
|
||||
});
|
||||
|
||||
module.exports = reversedMap;
|
||||
@ -17,14 +17,14 @@
|
||||
"license": "MIT",
|
||||
"repository": "https://github.com/youzan/vant/tree/dev/packages/vant-icons",
|
||||
"devDependencies": {
|
||||
"fast-glob": "^3.1.1",
|
||||
"fs-extra": "^8.1.0",
|
||||
"fast-glob": "^3.2.2",
|
||||
"fs-extra": "^9.0.1",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-iconfont": "^10.0.3",
|
||||
"gulp-iconfont-css": "^3.0.0",
|
||||
"md5-file": "^4.0.0",
|
||||
"release-it": "^12.4.3",
|
||||
"shelljs": "^0.8.3",
|
||||
"md5-file": "^5.0.0",
|
||||
"release-it": "^13.6.2",
|
||||
"shelljs": "^0.8.4",
|
||||
"svgo": "1.2.2"
|
||||
},
|
||||
"release-it": {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -64,7 +64,7 @@ To have a selected value，simply pass the `code` of target area to `value` prop
|
||||
| area-list | Area list data | _object_ | - |
|
||||
| columns-placeholder `v2.2.5` | Placeholder of columns | _string[]_ | `[]` |
|
||||
| loading | Whether to show loading prompt | _boolean_ | `false` |
|
||||
| item-height | Option height | _number \| string_ | `44` |
|
||||
| item-height `v2.8.6` | Option height, supports `px` ans `rem` unit, default `px` | _number \| string_ | `44` |
|
||||
| columns-num | Level of picker | _number \| string_ | `3` |
|
||||
| visible-item-count | Count of visible columns | _number \| string_ | `5` |
|
||||
| swipe-duration `v2.2.13` | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` |
|
||||
|
||||
@ -64,7 +64,7 @@ Vue.use(Area);
|
||||
| area-list | 省市区数据，格式见下方 | _object_ | - |
|
||||
| columns-placeholder `v2.2.5` | 列占位提示文字 | _string[]_ | `[]` |
|
||||
| loading | 是否显示加载状态 | _boolean_ | `false` |
|
||||
| item-height | 选项高度 | _number \| string_ | `44` |
|
||||
| item-height `v2.8.6` | 选项高度，支持 `px` 和 `rem` 单位，默认 `px` | _number \| string_ | `44` |
|
||||
| columns-num | 显示列数，3-省市区，2-省市，1-省 | _number \| string_ | `3` |
|
||||
| visible-item-count | 可见的选项个数 | _number \| string_ | `5` |
|
||||
| swipe-duration `v2.2.13` | 快速滑动时惯性滚动的时长，单位`ms` | _number \| string_ | `1000` |
|
||||
|
||||
@ -185,10 +185,8 @@ export default createComponent({
|
||||
this.code = values[index].code;
|
||||
this.setValues();
|
||||
|
||||
let getValues = picker.getValues();
|
||||
getValues = this.parseOutputValues(getValues);
|
||||
|
||||
this.$emit('change', picker, getValues, index);
|
||||
const parsedValues = this.parseOutputValues(picker.getValues());
|
||||
this.$emit('change', picker, parsedValues, index);
|
||||
},
|
||||
|
||||
onConfirm(values, index) {
|
||||
|
||||
@ -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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">河北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">山西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">内蒙古自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">辽宁省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">吉林省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">黑龙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">上海市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">江苏省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">浙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">安徽省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">福建省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">江西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">山东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">河南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">湖北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">湖南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">广东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">广西壮族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">海南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">重庆市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">四川省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">贵州省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">云南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">西藏自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">陕西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">甘肃省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">青海省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">宁夏回族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">新疆维吾尔自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">台湾省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">香港特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">澳门特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">西城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">朝阳区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">丰台区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">石景山区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">海淀区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">门头沟区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">房山区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">通州区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">顺义区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">昌平区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">大兴区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">怀柔区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">平谷区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">密云区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">河北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">山西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">内蒙古自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">辽宁省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">吉林省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">黑龙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">上海市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">江苏省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">浙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">安徽省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">福建省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">江西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">山东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">河南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">湖北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">湖南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">广东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">广西壮族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">海南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">重庆市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">四川省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">贵州省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">云南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">西藏自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">陕西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">甘肃省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">青海省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">宁夏回族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">新疆维吾尔自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">台湾省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">香港特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">澳门特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">杭州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">宁波市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">温州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">嘉兴市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">湖州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">绍兴市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">金华市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">衢州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">舟山市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">台州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">鹿城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">龙湾区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">瓯海区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">洞头区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">永嘉县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">平阳县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">苍南县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">文成县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">泰顺县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">瑞安市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">河北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">山西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">内蒙古自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">辽宁省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">吉林省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">黑龙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">上海市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">江苏省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">浙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">安徽省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">福建省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">江西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">山东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">河南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">湖北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">湖南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">广东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">广西壮族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">海南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">重庆市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">四川省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">贵州省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">云南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">西藏自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">陕西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">甘肃省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">青海省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">宁夏回族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">新疆维吾尔自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">台湾省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">香港特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">澳门特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">请选择</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">河北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">山西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">内蒙古自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">辽宁省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">吉林省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">黑龙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">上海市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">江苏省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">浙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">安徽省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">福建省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">江西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">山东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">河南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">湖北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">湖南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">广东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">广西壮族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">海南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">重庆市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">四川省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">贵州省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">云南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">西藏自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">陕西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">甘肃省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">青海省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">宁夏回族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">新疆维吾尔自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">台湾省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">香港特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">澳门特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">和平区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">和平区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">西城区</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -110,6 +110,7 @@
|
||||
|
||||
&__loading {
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
&--mini {
|
||||
|
||||
@ -285,7 +285,7 @@ export default createComponent({
|
||||
} else if (compareToStart === -1) {
|
||||
this.select([date, null]);
|
||||
} else if (this.allowSameDay) {
|
||||
this.select([date, date]);
|
||||
this.select([date, date], true);
|
||||
}
|
||||
} else {
|
||||
this.select([date, null]);
|
||||
|
||||
@ -47,6 +47,8 @@ exports[`lazy-render prop 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
|
||||
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm">
|
||||
<div class="van-button__content"><span class="van-button__text">确定</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -181,7 +181,7 @@ test('lazy-render prop', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test.only('month-show event', async () => {
|
||||
test('month-show event', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
value: true,
|
||||
|
||||
@ -125,7 +125,7 @@ export default createComponent({
|
||||
},
|
||||
|
||||
genTitle() {
|
||||
const { disabled, expanded } = this;
|
||||
const { border, disabled, expanded } = this;
|
||||
|
||||
const titleSlots = CELL_SLOTS.reduce((slots, name) => {
|
||||
if (this.slots(name)) {
|
||||
@ -142,7 +142,7 @@ export default createComponent({
|
||||
return (
|
||||
<Cell
|
||||
role="button"
|
||||
class={bem('title', { disabled, expanded })}
|
||||
class={bem('title', { disabled, expanded, borderless: !border })}
|
||||
onClick={this.onClick}
|
||||
scopedSlots={titleSlots}
|
||||
tabindex={disabled ? -1 : 0}
|
||||
@ -172,7 +172,7 @@ export default createComponent({
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div class={[bem({ border: this.index })]}>
|
||||
<div class={[bem({ border: this.index && this.border })]}>
|
||||
{this.genTitle()}
|
||||
{this.genContent()}
|
||||
</div>
|
||||
|
||||
@ -31,6 +31,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
&--borderless {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
cursor: not-allowed;
|
||||
|
||||
|
||||
@ -198,7 +198,7 @@ export default {
|
||||
| loading | Whether to show loading prompt | _boolean_ | `false` |
|
||||
| filter | Option filter | _(type, vals) => vals_ | - |
|
||||
| formatter | Option text formatter | _(type, val) => val_ | - |
|
||||
| item-height | Option height | _number \| string_ | `44` |
|
||||
| item-height `v2.8.6` | Option height, supports `px` ans `rem` unit, default `px` | _number \| string_ | `44` |
|
||||
| visible-item-count | Count of visible columns | _number \| string_ | `5` |
|
||||
| swipe-duration `v2.2.13` | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` |
|
||||
|
||||
|
||||
@ -78,7 +78,7 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### 选择年月
|
||||
### 选择月日
|
||||
|
||||
将 type 设置为 `month-day` 即可选择月份和日期（从 2.8.4 版本开始支持）
|
||||
|
||||
@ -205,7 +205,7 @@ export default {
|
||||
| loading | 是否显示加载状态 | _boolean_ | `false` |
|
||||
| filter | 选项过滤函数 | _(type, vals) => vals_ | - |
|
||||
| formatter | 选项格式化函数 | _(type, val) => val_ | - |
|
||||
| item-height | 选项高度 | _number \| string_ | `44` |
|
||||
| item-height `v2.8.6` | 选项高度，支持 `px` 和 `rem` 单位，默认 `px` | _number \| string_ | `44` |
|
||||
| visible-item-count | 可见的选项个数 | _number \| string_ | `5` |
|
||||
| swipe-duration `v2.2.13` | 快速滑动时惯性滚动的时长，单位`ms` | _number \| string_ | `1000` |
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('monthDayType')">
|
||||
<demo-block v-if="!isWeapp" :title="t('monthDayType')">
|
||||
<van-datetime-picker
|
||||
v-model="value.monthDayType"
|
||||
type="month-day"
|
||||
|
||||
@ -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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">15</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">20</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">25</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">15</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">15</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">20</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">25</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">30</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">35</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">40</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">45</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">50</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">2010 year</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">05 month</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">05 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">10 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">15 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">20 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">25 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">00 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">05 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">10 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">15 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">00 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">05 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">10 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">15 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">20 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">25 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">30 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">35 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">40 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">45 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">50 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">22</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">58</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">15</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">20</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">30</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">40</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">22</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">58</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">00 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">05 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">10 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">15 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">00 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">10 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">20 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">30 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">40 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">01</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">01</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">02</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -37,6 +37,10 @@ export default createComponent({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
allowHtml: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
@ -124,6 +128,31 @@ export default createComponent({
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
genContent(hasTitle, messageSlot) {
|
||||
if (messageSlot) {
|
||||
return <div class={bem('content')}>{messageSlot}</div>;
|
||||
}
|
||||
|
||||
const { message, messageAlign } = this;
|
||||
if (message) {
|
||||
const data = {
|
||||
class: bem('message', {
|
||||
'has-title': hasTitle,
|
||||
[messageAlign]: messageAlign,
|
||||
}),
|
||||
domProps: {
|
||||
[this.allowHtml ? 'innerHTML' : 'textContent']: message,
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div class={bem('content')}>
|
||||
<div {...data} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
@ -131,30 +160,15 @@ export default createComponent({
|
||||
return;
|
||||
}
|
||||
|
||||
const { message, messageAlign } = this;
|
||||
const { message } = this;
|
||||
const messageSlot = this.slots();
|
||||
const title = this.slots('title') || this.title;
|
||||
|
||||
const Title = title && (
|
||||
<div class={bem('header', { isolated: !message && !messageSlot })}>
|
||||
{title}
|
||||
</div>
|
||||
);
|
||||
|
||||
const Content = (messageSlot || message) && (
|
||||
<div class={bem('content')}>
|
||||
{messageSlot || (
|
||||
<div
|
||||
domPropsInnerHTML={message}
|
||||
class={bem('message', {
|
||||
'has-title': title,
|
||||
[messageAlign]: messageAlign,
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<transition
|
||||
name={this.transition}
|
||||
@ -169,7 +183,7 @@ export default createComponent({
|
||||
style={{ width: addUnit(this.width) }}
|
||||
>
|
||||
{Title}
|
||||
{Content}
|
||||
{this.genContent(title, messageSlot)}
|
||||
{this.genButtons()}
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
@ -13,7 +13,7 @@ Vue.use(Dialog);
|
||||
|
||||
### Alert dialog
|
||||
|
||||
Used to prompt for some messages, only including one confirm button
|
||||
Used to prompt for some messages, only including one confirm button.
|
||||
|
||||
```js
|
||||
Dialog.alert({
|
||||
@ -32,7 +32,7 @@ Dialog.alert({
|
||||
|
||||
### Confirm dialog
|
||||
|
||||
Used to confirm some messages, including a confirm button and a cancel button
|
||||
Used to confirm some messages, including a confirm button and a cancel button.
|
||||
|
||||
```js
|
||||
Dialog.confirm({
|
||||
@ -65,9 +65,9 @@ Dialog.confirm({
|
||||
});
|
||||
```
|
||||
|
||||
### \$dialog Method
|
||||
### Global Method
|
||||
|
||||
After import the Dialog component, the \$dialog method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
|
||||
After import the Dialog component, the `$dialog` method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
|
||||
|
||||
```js
|
||||
export default {
|
||||
|
||||
@ -2,13 +2,13 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作
|
||||
弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作。
|
||||
|
||||
弹出框组件支持函数调用和组件调用两种方式
|
||||
弹出框组件支持函数调用和组件调用两种方式。
|
||||
|
||||
### 函数调用
|
||||
|
||||
Dialog 是一个函数，调用后展示提示弹窗
|
||||
Dialog 是一个函数，调用后会直接在页面中弹出相应的模态框。
|
||||
|
||||
```js
|
||||
import { Dialog } from 'vant';
|
||||
@ -18,7 +18,7 @@ Dialog({ message: '提示' });
|
||||
|
||||
### 组件调用
|
||||
|
||||
通过组件调用 Dialog 时，可以通过下面的方式进行注册
|
||||
通过组件调用 Dialog 时，可以通过下面的方式进行注册：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
@ -39,7 +39,7 @@ export default {
|
||||
|
||||
### 消息提示
|
||||
|
||||
用于提示一些消息，只包含一个确认按钮
|
||||
用于提示一些消息，只包含一个确认按钮。
|
||||
|
||||
```js
|
||||
Dialog.alert({
|
||||
@ -58,7 +58,7 @@ Dialog.alert({
|
||||
|
||||
### 消息确认
|
||||
|
||||
用于确认消息，包含取消和确认按钮
|
||||
用于确认消息，包含取消和确认按钮。
|
||||
|
||||
```js
|
||||
Dialog.confirm({
|
||||
@ -75,6 +75,8 @@ Dialog.confirm({
|
||||
|
||||
### 异步关闭
|
||||
|
||||
通过 `beforeClose` 属性可以传入一个回调函数，在弹窗关闭前进行特定操作。
|
||||
|
||||
```js
|
||||
function beforeClose(action, done) {
|
||||
if (action === 'confirm') {
|
||||
@ -93,7 +95,7 @@ Dialog.confirm({
|
||||
|
||||
### 全局方法
|
||||
|
||||
引入 Dialog 组件后，会自动在 Vue 的 prototype 上挂载 \$dialog 方法，在所有组件内部都可以直接调用此方法
|
||||
引入 Dialog 组件后，会自动在 Vue 的 prototype 上挂载 `$dialog` 方法，在所有组件内部都可以直接调用此方法。
|
||||
|
||||
```js
|
||||
export default {
|
||||
@ -107,7 +109,7 @@ export default {
|
||||
|
||||
### 组件调用
|
||||
|
||||
如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式
|
||||
如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。
|
||||
|
||||
```html
|
||||
<van-dialog v-model="show" title="标题" show-cancel-button>
|
||||
|
||||
@ -51,6 +51,7 @@ Dialog.defaultOptions = {
|
||||
message: '',
|
||||
overlay: true,
|
||||
className: '',
|
||||
allowHtml: true,
|
||||
lockScroll: true,
|
||||
transition: 'van-dialog-bounce',
|
||||
beforeClose: null,
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`allow-html prop 1`] = `<div class="van-dialog__message"><span>text</span></div>`;
|
||||
|
||||
exports[`button color 1`] = `
|
||||
<div role="dialog" class="van-dialog" name="van-dialog-bounce">
|
||||
<div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel" style="color: white;">
|
||||
|
||||
@ -127,6 +127,17 @@ test('title slot', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('allow-html prop', () => {
|
||||
const wrapper = mount(DialogComponent, {
|
||||
propsData: {
|
||||
value: true,
|
||||
message: '<span>text</span>',
|
||||
allowHtml: false,
|
||||
},
|
||||
});
|
||||
expect(wrapper.find('.van-dialog__message')).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('open & close event', () => {
|
||||
const wrapper = mount(DialogComponent);
|
||||
wrapper.vm.value = true;
|
||||
|
||||
@ -25,6 +25,10 @@ export default createComponent({
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
lazyRender: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
@ -155,8 +159,9 @@ export default createComponent({
|
||||
class={bem('content')}
|
||||
position={direction === 'down' ? 'top' : 'bottom'}
|
||||
duration={this.transition ? duration : 0}
|
||||
closeOnClickOverlay={closeOnClickOverlay}
|
||||
lazyRender={this.lazyRender}
|
||||
overlayStyle={{ position: 'absolute' }}
|
||||
closeOnClickOverlay={closeOnClickOverlay}
|
||||
onOpen={this.onOpen}
|
||||
onClose={this.onClose}
|
||||
onOpened={this.onOpened}
|
||||
|
||||
@ -128,6 +128,7 @@ Use `active-color` prop to custom active color of the title and options
|
||||
| title | Item title | _string_ | Text of selected option |
|
||||
| options | Options | _Option[]_ | `[]` |
|
||||
| disabled | Whether to disable dropdown item | _boolean_ | `false` |
|
||||
| lazy-render `v2.8.5` | Whether to lazy render util opened | _boolean_ | `true` |
|
||||
| title-class | Title class | _string_ | - |
|
||||
| get-container `v2.2.4` | Return the mount node for menu | _string \| () => Element_ | - |
|
||||
|
||||
|
||||
@ -132,6 +132,7 @@ export default {
|
||||
| title | 菜单项标题 | _string_ | 当前选中项文字 |
|
||||
| options | 选项数组 | _Option[]_ | `[]` |
|
||||
| disabled | 是否禁用菜单 | _boolean_ | `false` |
|
||||
| lazy-render `v2.8.5` | 是否在首次展开时才渲染菜单内容 | _boolean_ | `true` |
|
||||
| title-class | 标题额外类名 | _string_ | - |
|
||||
| get-container `v2.2.4` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
|
||||
|
||||
|
||||
@ -139,10 +139,17 @@ Use `formatter` prop to format the input value
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="value"
|
||||
v-model="value1"
|
||||
label="Text"
|
||||
:formatter="formatter"
|
||||
placeholder="Format Value"
|
||||
placeholder="Format On Change"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value2"
|
||||
label="Text"
|
||||
:formatter="formatter"
|
||||
format-trigger="onBlur"
|
||||
placeholder="Format On Blur"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -150,7 +157,8 @@ Use `formatter` prop to format the input value
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
value1: '',
|
||||
value2: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@ -198,8 +206,8 @@ Use `input-align` prop to align the input value
|
||||
```html
|
||||
<van-field
|
||||
v-model="value"
|
||||
:label="Text"
|
||||
:placeholder="Input Align Right"
|
||||
label="Text"
|
||||
placeholder="Input Align Right"
|
||||
input-align="right"
|
||||
/>
|
||||
```
|
||||
@ -216,7 +224,7 @@ Use `input-align` prop to align the input value
|
||||
| type | Input type, can be set to `tel` `digit`<br>`number` `textarea` `password` | _string_ | `text` |
|
||||
| size | Size，can be set to `large` | _string_ | - |
|
||||
| maxlength | Max length of value | _number \| string_ | - |
|
||||
| placeholder | Placeholder | _string_ | - |
|
||||
| placeholder | Input placeholder | _string_ | - |
|
||||
| border | Whether to show inner border | _boolean_ | `true` |
|
||||
| disabled | Whether to disable field | _boolean_ | `false` |
|
||||
| readonly | Whether to be readonly | _boolean_ | `false` |
|
||||
@ -230,6 +238,7 @@ Use `input-align` prop to align the input value
|
||||
| error | Whether to show error info | _boolean_ | `false` |
|
||||
| error-message | Error message | _string_ | - |
|
||||
| formatter `v2.4.2` | Input value formatter | _Function_ | - |
|
||||
| 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` |
|
||||
|
||||
@ -17,7 +17,7 @@ Vue.use(Field);
|
||||
|
||||
### 基础用法
|
||||
|
||||
可以通过`v-model`双向绑定输入框的值，通过`placeholder`设置占位提示文字
|
||||
可以通过 `v-model` 双向绑定输入框的值，通过 `placeholder` 设置占位提示文字。
|
||||
|
||||
```html
|
||||
<!-- Field 是基于 Cell 实现的，可以使用 CellGroup 作为容器来提供外边框。 -->
|
||||
@ -38,7 +38,7 @@ export default {
|
||||
|
||||
### 自定义类型
|
||||
|
||||
根据`type`属性定义不同类型的输入框，默认值为`text`
|
||||
根据 `type` 属性定义不同类型的输入框，默认值为 `text`。
|
||||
|
||||
```html
|
||||
<!-- 输入任意文本 -->
|
||||
@ -71,7 +71,7 @@ export default {
|
||||
|
||||
### 禁用输入框
|
||||
|
||||
通过`readonly`将输入框设置为只读状态，通过`disabled`将输入框设置为禁用状态
|
||||
通过 `readonly` 将输入框设置为只读状态，通过 `disabled` 将输入框设置为禁用状态。
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
@ -82,7 +82,7 @@ export default {
|
||||
|
||||
### 显示图标
|
||||
|
||||
通过`left-icon`和`right-icon`配置输入框两侧的图标，通过设置`clearable`在输入过程中展示清除图标
|
||||
通过 `left-icon` 和 `right-icon` 配置输入框两侧的图标，通过设置 `clearable` 在输入过程中展示清除图标。
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
@ -116,7 +116,7 @@ export default {
|
||||
|
||||
### 错误提示
|
||||
|
||||
设置`required`属性表示这是一个必填项，可以配合`error`或`error-message`属性显示对应的错误提示
|
||||
设置 `required` 属性表示这是一个必填项，可以配合 `error` 或 `error-message` 属性显示对应的错误提示。
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
@ -139,7 +139,7 @@ export default {
|
||||
|
||||
### 插入按钮
|
||||
|
||||
通过 button 插槽可以在输入框尾部插入按钮
|
||||
通过 button 插槽可以在输入框尾部插入按钮。
|
||||
|
||||
```html
|
||||
<van-field
|
||||
@ -157,14 +157,21 @@ export default {
|
||||
|
||||
### 格式化输入内容
|
||||
|
||||
通过`formatter`属性可以对输入的内容进行格式化
|
||||
通过 `formatter` 属性可以对输入的内容进行格式化，通过 `format-trigger` 属性可以指定执行格式化的时机，默认在输入时进行格式化。
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="value"
|
||||
v-model="value1"
|
||||
label="文本"
|
||||
:formatter="formatter"
|
||||
placeholder="格式化输入内容"
|
||||
placeholder="在输入时执行格式化"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value2"
|
||||
label="文本"
|
||||
:formatter="formatter"
|
||||
format-trigger="onBlur"
|
||||
placeholder="在失焦时执行格式化"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -172,7 +179,8 @@ export default {
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
value1: '',
|
||||
value2: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@ -186,7 +194,7 @@ export default {
|
||||
|
||||
### 高度自适应
|
||||
|
||||
对于 textarea，可以通过`autosize`属性设置高度自适应
|
||||
对于 textarea，可以通过 `autosize` 属性设置高度自适应。
|
||||
|
||||
```html
|
||||
<van-field
|
||||
@ -201,7 +209,7 @@ export default {
|
||||
|
||||
### 显示字数统计
|
||||
|
||||
设置`maxlength`和`show-word-limit`属性后会在底部显示字数统计
|
||||
设置 `maxlength` 和 `show-word-limit` 属性后会在底部显示字数统计。
|
||||
|
||||
```html
|
||||
<van-field
|
||||
@ -218,13 +226,13 @@ export default {
|
||||
|
||||
### 输入框内容对齐
|
||||
|
||||
通过`input-align`属性可以设置输入框内容的对齐方式，可选值为`center`、`right`
|
||||
通过 `input-align` 属性可以设置输入框内容的对齐方式，可选值为 `center`、`right`。
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="value"
|
||||
:label="文本"
|
||||
:placeholder="输入框内容右对齐"
|
||||
label="文本"
|
||||
placeholder="输入框内容右对齐"
|
||||
input-align="right"
|
||||
/>
|
||||
```
|
||||
@ -241,7 +249,7 @@ export default {
|
||||
| type | 输入框类型, 可选值为 `tel` `digit`<br>`number` `textarea` `password` 等 | _string_ | `text` |
|
||||
| size | 大小，可选值为 `large` | _string_ | - |
|
||||
| maxlength | 输入的最大字符数 | _number \| string_ | - |
|
||||
| placeholder | 占位提示文字 | _string_ | - |
|
||||
| placeholder | 输入框占位提示文字 | _string_ | - |
|
||||
| border | 是否显示内边框 | _boolean_ | `true` |
|
||||
| disabled | 是否禁用输入框 | _boolean_ | `false` |
|
||||
| readonly | 是否只读 | _boolean_ | `false` |
|
||||
@ -255,6 +263,7 @@ export default {
|
||||
| error | 是否将输入内容标红 | _boolean_ | `false` |
|
||||
| error-message | 底部错误提示文案，为空时不展示 | _string_ | - |
|
||||
| formatter `v2.4.2` | 输入内容格式化函数 | _Function_ | - |
|
||||
| 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` |
|
||||
|
||||
@ -1,10 +1,17 @@
|
||||
<template>
|
||||
<demo-block v-if="!isWeapp" :title="t('formatValue')">
|
||||
<van-field
|
||||
v-model="formatValue"
|
||||
v-model="value1"
|
||||
:label="t('text')"
|
||||
:formatter="formatter"
|
||||
:placeholder="t('formatValue')"
|
||||
:placeholder="t('formatOnChange')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value2"
|
||||
:label="t('text')"
|
||||
:formatter="formatter"
|
||||
format-trigger="onBlur"
|
||||
:placeholder="t('formatOnBlur')"
|
||||
/>
|
||||
</demo-block>
|
||||
</template>
|
||||
@ -15,16 +22,21 @@ export default {
|
||||
'zh-CN': {
|
||||
text: '文本',
|
||||
formatValue: '格式化输入内容',
|
||||
formatOnBlur: '在失焦时执行格式化',
|
||||
formatOnChange: '在输入时执行格式化',
|
||||
},
|
||||
'en-US': {
|
||||
text: 'Text',
|
||||
formatValue: 'Format Value',
|
||||
formatOnBlur: 'Format On Blur',
|
||||
formatOnChange: 'Format On Change',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
formatValue: '',
|
||||
value1: '',
|
||||
value2: '',
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
// Utils
|
||||
import { preventDefault } from '../utils/dom/event';
|
||||
import { formatNumber } from '../utils/format/number';
|
||||
import { resetScroll } from '../utils/dom/reset-scroll';
|
||||
import { formatNumber } from '../utils/format/number';
|
||||
import { preventDefault } from '../utils/dom/event';
|
||||
import {
|
||||
createNamespace,
|
||||
isObject,
|
||||
isDef,
|
||||
addUnit,
|
||||
isObject,
|
||||
isPromise,
|
||||
isFunction,
|
||||
createNamespace,
|
||||
} from '../utils';
|
||||
|
||||
// Components
|
||||
@ -53,6 +53,10 @@ export default createComponent({
|
||||
errorMessage: String,
|
||||
errorMessageAlign: String,
|
||||
showWordLimit: Boolean,
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text',
|
||||
@ -65,17 +69,23 @@ export default createComponent({
|
||||
type: Boolean,
|
||||
default: null,
|
||||
},
|
||||
formatTrigger: {
|
||||
type: String,
|
||||
default: 'onChange',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
focused: false,
|
||||
validateFailed: false,
|
||||
validateMessage: '',
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
value() {
|
||||
this.updateValue(this.value);
|
||||
this.resetValidation();
|
||||
this.validateWithTrigger('onChange');
|
||||
this.$nextTick(this.adjustSize);
|
||||
@ -83,7 +93,7 @@ export default createComponent({
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.format();
|
||||
this.updateValue(this.value, this.formatTrigger);
|
||||
this.$nextTick(this.adjustSize);
|
||||
|
||||
if (this.vanForm) {
|
||||
@ -112,7 +122,7 @@ export default createComponent({
|
||||
if (this.error !== null) {
|
||||
return this.error;
|
||||
}
|
||||
if (this.vanForm && this.vanForm.showError && this.validateMessage) {
|
||||
if (this.vanForm && this.vanForm.showError && this.validateFailed) {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
@ -203,7 +213,7 @@ export default createComponent({
|
||||
return rules.reduce(
|
||||
(promise, rule) =>
|
||||
promise.then(() => {
|
||||
if (this.validateMessage) {
|
||||
if (this.validateFailed) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -214,6 +224,7 @@ export default createComponent({
|
||||
}
|
||||
|
||||
if (!this.runSyncRule(value, rule)) {
|
||||
this.validateFailed = true;
|
||||
this.validateMessage = this.getRuleMessage(value, rule);
|
||||
return;
|
||||
}
|
||||
@ -221,6 +232,7 @@ export default createComponent({
|
||||
if (rule.validator) {
|
||||
return this.runValidator(value, rule).then((result) => {
|
||||
if (result === false) {
|
||||
this.validateFailed = true;
|
||||
this.validateMessage = this.getRuleMessage(value, rule);
|
||||
}
|
||||
});
|
||||
@ -237,7 +249,7 @@ export default createComponent({
|
||||
}
|
||||
|
||||
this.runRules(rules).then(() => {
|
||||
if (this.validateMessage) {
|
||||
if (this.validateFailed) {
|
||||
resolve({
|
||||
name: this.name,
|
||||
message: this.validateMessage,
|
||||
@ -266,46 +278,39 @@ export default createComponent({
|
||||
|
||||
resetValidation() {
|
||||
if (this.validateMessage) {
|
||||
this.validateFailed = false;
|
||||
this.validateMessage = '';
|
||||
}
|
||||
},
|
||||
|
||||
format(target = this.$refs.input) {
|
||||
if (!target) {
|
||||
return;
|
||||
}
|
||||
|
||||
let { value } = target;
|
||||
const { maxlength } = this;
|
||||
updateValue(value, trigger = 'onChange') {
|
||||
value = isDef(value) ? String(value) : '';
|
||||
|
||||
// native maxlength not work when type is number
|
||||
const { maxlength } = this;
|
||||
if (isDef(maxlength) && value.length > maxlength) {
|
||||
value = value.slice(0, maxlength);
|
||||
target.value = value;
|
||||
}
|
||||
|
||||
if (this.type === 'number' || this.type === 'digit') {
|
||||
const originValue = value;
|
||||
const allowDot = this.type === 'number';
|
||||
|
||||
value = formatNumber(value, allowDot);
|
||||
|
||||
if (value !== originValue) {
|
||||
target.value = value;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.formatter) {
|
||||
const originValue = value;
|
||||
|
||||
if (this.formatter && trigger === this.formatTrigger) {
|
||||
value = this.formatter(value);
|
||||
|
||||
if (value !== originValue) {
|
||||
target.value = value;
|
||||
}
|
||||
}
|
||||
|
||||
return value;
|
||||
const { input } = this.$refs;
|
||||
if (input && value !== input.value) {
|
||||
input.value = value;
|
||||
}
|
||||
|
||||
if (value !== this.value) {
|
||||
this.$emit('input', value);
|
||||
}
|
||||
|
||||
this.currentValue = value;
|
||||
},
|
||||
|
||||
onInput(event) {
|
||||
@ -314,7 +319,7 @@ export default createComponent({
|
||||
return;
|
||||
}
|
||||
|
||||
this.$emit('input', this.format(event.target));
|
||||
this.updateValue(event.target.value);
|
||||
},
|
||||
|
||||
onFocus(event) {
|
||||
@ -330,6 +335,7 @@ export default createComponent({
|
||||
|
||||
onBlur(event) {
|
||||
this.focused = false;
|
||||
this.updateValue(this.value, 'onBlur');
|
||||
this.$emit('blur', event);
|
||||
this.validateWithTrigger('onBlur');
|
||||
resetScroll();
|
||||
@ -491,13 +497,11 @@ export default createComponent({
|
||||
|
||||
genWordLimit() {
|
||||
if (this.showWordLimit && this.maxlength) {
|
||||
const count = this.value.length;
|
||||
const full = count >= this.maxlength;
|
||||
const count = (this.value || '').length;
|
||||
|
||||
return (
|
||||
<div class={bem('word-limit')}>
|
||||
<span class={bem('word-num', { full })}>{count}</span>/
|
||||
{this.maxlength}
|
||||
<span class={bem('word-num')}>{count}</span>/{this.maxlength}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -576,6 +580,7 @@ export default createComponent({
|
||||
arrowDirection={this.arrowDirection}
|
||||
class={bem({
|
||||
error: this.showError,
|
||||
disabled: this.disabled,
|
||||
[`label-${labelAlign}`]: labelAlign,
|
||||
'min-height': this.type === 'textarea' && !this.autosize,
|
||||
})}
|
||||
|
||||
@ -1,10 +1,15 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-field {
|
||||
&--disabled {
|
||||
color: @field-disabled-text-color;
|
||||
}
|
||||
|
||||
&__label {
|
||||
flex: none;
|
||||
box-sizing: border-box;
|
||||
width: @field-label-width;
|
||||
text-align: left;
|
||||
|
||||
&--center {
|
||||
text-align: center;
|
||||
@ -146,12 +151,6 @@
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&__word-num {
|
||||
&--full {
|
||||
color: @field-word-num-full-color;
|
||||
}
|
||||
}
|
||||
|
||||
&--error {
|
||||
.van-field__control {
|
||||
&,
|
||||
|
||||
@ -51,7 +51,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-field__body"><input type="text" readonly="readonly" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell van-field van-field--disabled">
|
||||
<div class="van-cell__title van-field__label"><span>文本</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" disabled="disabled" class="van-field__control"></div>
|
||||
@ -112,7 +112,13 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>文本</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="格式化输入内容" class="van-field__control"></div>
|
||||
<div class="van-field__body"><input type="text" placeholder="在输入时执行格式化" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>文本</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="在失焦时执行格式化" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -74,7 +74,25 @@ exports[`reach max word-limit 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>
|
||||
<div class="van-field__word-limit"><span class="van-field__word-num van-field__word-num--full">3</span>/3</div>
|
||||
<div class="van-field__word-limit"><span class="van-field__word-num">3</span>/3</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`reach max word-limit null 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>
|
||||
<div class="van-field__word-limit"><span class="van-field__word-num">0</span>/3</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`reach max word-limit undefined 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>
|
||||
<div class="van-field__word-limit"><span class="van-field__word-num">0</span>/3</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -289,16 +289,37 @@ test('formatter prop', () => {
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find('input');
|
||||
|
||||
input.trigger('input');
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual('abc');
|
||||
|
||||
const input = wrapper.find('input');
|
||||
input.element.value = '123efg';
|
||||
input.trigger('input');
|
||||
expect(wrapper.emitted('input')[1][0]).toEqual('efg');
|
||||
});
|
||||
|
||||
test('format-trigger prop', () => {
|
||||
const wrapper = mount(Field, {
|
||||
propsData: {
|
||||
value: 'abc123',
|
||||
formatTrigger: 'onBlur',
|
||||
formatter: (value) => value.replace(/\d/g, ''),
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.$on('input', (value) => {
|
||||
wrapper.setProps({ value });
|
||||
});
|
||||
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual('abc');
|
||||
|
||||
const input = wrapper.find('input');
|
||||
input.element.value = '123efg';
|
||||
input.trigger('input');
|
||||
expect(wrapper.emitted('input')[1][0]).toEqual('123efg');
|
||||
input.trigger('blur');
|
||||
expect(wrapper.emitted('input')[2][0]).toEqual('efg');
|
||||
});
|
||||
|
||||
test('reach max word-limit', () => {
|
||||
const wrapper = mount(Field, {
|
||||
propsData: {
|
||||
@ -310,6 +331,28 @@ test('reach max word-limit', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('reach max word-limit undefined', () => {
|
||||
const wrapper = mount(Field, {
|
||||
propsData: {
|
||||
value: undefined,
|
||||
maxlength: 3,
|
||||
showWordLimit: true,
|
||||
},
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('reach max word-limit null', () => {
|
||||
const wrapper = mount(Field, {
|
||||
propsData: {
|
||||
value: null,
|
||||
maxlength: 3,
|
||||
showWordLimit: true,
|
||||
},
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('name prop', () => {
|
||||
const wrapper = mount(Field, {
|
||||
propsData: {
|
||||
@ -360,3 +403,14 @@ test('should blur search input on enter', () => {
|
||||
wrapper.find('input').trigger('keypress.enter');
|
||||
expect(wrapper.emitted('blur')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('value is null', () => {
|
||||
const wrapper = mount(Field, {
|
||||
propsData: {
|
||||
value: null,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.find('input').element.value).toEqual('');
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual('');
|
||||
});
|
||||
|
||||
@ -38,3 +38,30 @@ test('failed event', async () => {
|
||||
values: { A: '', B: '' },
|
||||
});
|
||||
});
|
||||
|
||||
test('failed event when rule message is empty', async () => {
|
||||
const onFailed = jest.fn();
|
||||
const wrapper = mountForm({
|
||||
template: `
|
||||
<van-form ref="form" @failed="onFailed">
|
||||
<van-field name="A" :rules="rulesA" value="" />
|
||||
<van-button native-type="submit" />
|
||||
</van-form>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
rulesA: [{ required: true }],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onFailed,
|
||||
},
|
||||
});
|
||||
|
||||
await submitForm(wrapper);
|
||||
|
||||
expect(onFailed).toHaveBeenCalledWith({
|
||||
errors: [{ name: 'A' }],
|
||||
values: { A: '' },
|
||||
});
|
||||
});
|
||||
|
||||
@ -103,7 +103,7 @@ export default createComponent({
|
||||
};
|
||||
|
||||
if (scale !== 1) {
|
||||
style.transform = `scale3d(${scale}, ${scale}, 1) translate(${
|
||||
style.transform = `scale(${scale}, ${scale}) translate(${
|
||||
this.moveX / scale
|
||||
}px, ${this.moveY / scale}px)`;
|
||||
}
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
图片放大预览，支持函数调用和组件调用两种方式
|
||||
图片放大预览，支持函数调用和组件调用两种方式。
|
||||
|
||||
### 函数调用
|
||||
|
||||
ImagePreview 是一个函数，调用函数后展示图片预览
|
||||
ImagePreview 是一个函数，调用函数后会直接在页面中展示图片预览界面。
|
||||
|
||||
```js
|
||||
import { ImagePreview } from 'vant';
|
||||
@ -16,7 +16,7 @@ ImagePreview(['https://img.yzcdn.cn/vant/apple-1.jpg']);
|
||||
|
||||
### 组件调用
|
||||
|
||||
通过组件调用 ImagePreview 时，可以通过下面的方式进行注册
|
||||
通过组件调用 ImagePreview 时，可以通过下面的方式进行注册。
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
@ -37,7 +37,7 @@ export default {
|
||||
|
||||
### 基础用法
|
||||
|
||||
直接传入图片数组，即可展示图片预览
|
||||
直接传入图片数组，即可展示图片预览。
|
||||
|
||||
```js
|
||||
ImagePreview([
|
||||
@ -48,7 +48,7 @@ ImagePreview([
|
||||
|
||||
### 传入配置项
|
||||
|
||||
通过传入配置对象，可以指定初始图片的位置、监听关闭事件
|
||||
通过传入配置对象，可以指定初始图片的位置、监听关闭事件。
|
||||
|
||||
```js
|
||||
ImagePreview({
|
||||
@ -65,7 +65,7 @@ ImagePreview({
|
||||
|
||||
### 展示关闭按钮
|
||||
|
||||
设置`closeable`属性后，会在弹出层的右上角显示关闭图标，并且可以通过`close-icon`属性自定义图标，使用`close-icon-position`属性可以自定义图标位置
|
||||
设置`closeable`属性后，会在弹出层的右上角显示关闭图标，并且可以通过`close-icon`属性自定义图标，使用`close-icon-position`属性可以自定义图标位置。
|
||||
|
||||
```js
|
||||
ImagePreview({
|
||||
@ -79,7 +79,7 @@ ImagePreview({
|
||||
|
||||
### 异步关闭
|
||||
|
||||
通过`asyncClose`属性可以开启异步关闭，开启后异步关闭后，只能通过实例上的 close 方法关闭图片预览
|
||||
通过`asyncClose`属性可以开启异步关闭，开启后异步关闭后，只能通过实例上的 close 方法关闭图片预览。
|
||||
|
||||
```js
|
||||
const instance = ImagePreview({
|
||||
@ -97,7 +97,7 @@ setTimeout(() => {
|
||||
|
||||
### 组件调用
|
||||
|
||||
如果需要在图片预览内嵌入组件或其他自定义内容，可以使用组件调用的方式，调用前需要通过 `Vue.use` 注册组件
|
||||
如果需要在图片预览内嵌入组件或其他自定义内容，可以使用组件调用的方式，调用前需要通过 `Vue.use` 注册组件。
|
||||
|
||||
```html
|
||||
<van-image-preview v-model="show" :images="images" @change="onChange">
|
||||
|
||||
@ -61,7 +61,7 @@ exports[`set show-index prop to false 1`] = `
|
||||
`;
|
||||
|
||||
exports[`zoom 1`] = `
|
||||
<div class="van-image van-image-preview__image" style="transition-duration: 0s; transform: scale3d(2, 2, 1) translate(0px, NaNpx);"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">
|
||||
<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;">
|
||||
<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>
|
||||
|
||||
@ -51,7 +51,10 @@ export function updateOverlay(vm: any): void {
|
||||
}
|
||||
|
||||
export function openOverlay(vm: any, config: OverlayConfig): void {
|
||||
if (!context.find(vm)) {
|
||||
const item = context.find(vm);
|
||||
if (item) {
|
||||
item.config = config;
|
||||
} else {
|
||||
const overlay = mountOverlay(vm);
|
||||
context.stack.push({ vm, config, overlay });
|
||||
}
|
||||
|
||||
@ -17,12 +17,17 @@ Vue.use(NoticeBar);
|
||||
<van-notice-bar text="Notice Content" left-icon="volume-o" />
|
||||
```
|
||||
|
||||
### Disable scroll
|
||||
### Scrollable
|
||||
|
||||
```html
|
||||
<van-notice-bar :scrollable="false">
|
||||
Notice Content
|
||||
</van-notice-bar>
|
||||
<!-- Enable scroll when text is short -->
|
||||
<van-notice-bar scrollable text="Notice Content" />
|
||||
|
||||
<!-- Disable scroll when text is long -->
|
||||
<van-notice-bar
|
||||
:scrollable="false"
|
||||
text="Technology is the common soul of the people who developed it."
|
||||
/>
|
||||
```
|
||||
|
||||
### Wrapable
|
||||
@ -53,6 +58,30 @@ Vue.use(NoticeBar);
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
### Vertical Scroll
|
||||
|
||||
```html
|
||||
<van-notice-bar left-icon="volume-o" :scrollable="false">
|
||||
<van-swipe
|
||||
vertical
|
||||
class="notice-swipe"
|
||||
:autoplay="3000"
|
||||
:show-indicators="false"
|
||||
>
|
||||
<van-swipe-item>Content 1</van-swipe-item>
|
||||
<van-swipe-item>Content 2</van-swipe-item>
|
||||
<van-swipe-item>Content 3</van-swipe-item>
|
||||
</van-swipe>
|
||||
</van-notice-bar>
|
||||
|
||||
<style>
|
||||
.notice-swipe {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
@ -66,7 +95,7 @@ Vue.use(NoticeBar);
|
||||
| left-icon | Left Icon | _string_ | - |
|
||||
| delay | Animation delay (s) | _number \| string_ | `1` |
|
||||
| speed | Scroll speed (px/s) | _number \| string_ | `50` |
|
||||
| scrollable | Whether to scroll content | _boolean_ | `true` |
|
||||
| scrollable | Whether to scroll content | _boolean_ | - |
|
||||
| wrapable | Whether to enable text wrap | _boolean_ | `false` | - |
|
||||
|
||||
### Events
|
||||
|
||||
@ -13,54 +13,94 @@ Vue.use(NoticeBar);
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过 `text` 属性设置通知栏的内容，通过 `left-icon` 属性设置通知栏左侧的图标。
|
||||
|
||||
```html
|
||||
<van-notice-bar text="通知内容" left-icon="volume-o" />
|
||||
<van-notice-bar
|
||||
left-icon="volume-o"
|
||||
text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
|
||||
/>
|
||||
```
|
||||
|
||||
### 禁用滚动
|
||||
### 滚动播放
|
||||
|
||||
文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动
|
||||
通知栏的内容长度溢出时会自动开启滚动播放，通过 `scrollable` 属性可以控制该行为。
|
||||
|
||||
```html
|
||||
<van-notice-bar :scrollable="false">
|
||||
通知内容
|
||||
</van-notice-bar>
|
||||
<!-- 文字较短时，通过设置 scrollable 属性开启滚动播放 -->
|
||||
<van-notice-bar scrollable text="技术是开发它的人的共同灵魂。" />
|
||||
|
||||
<!-- 文字较长时，通过禁用 scrollable 属性关闭滚动播放 -->
|
||||
<van-notice-bar
|
||||
:scrollable="false"
|
||||
text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
|
||||
/>
|
||||
```
|
||||
|
||||
### 多行展示
|
||||
|
||||
禁用滚动时，可以设置`wrapable`来开启多行展示
|
||||
文字较长时，可以通过设置 `wrapable` 属性来开启多行展示。
|
||||
|
||||
```html
|
||||
<van-notice-bar wrapable :scrollable="false">
|
||||
通知内容
|
||||
</van-notice-bar>
|
||||
<van-notice-bar
|
||||
wrapable
|
||||
:scrollable="false"
|
||||
text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
|
||||
/>
|
||||
```
|
||||
|
||||
### 通知栏模式
|
||||
|
||||
默认模式为空，支持`closeable`和`link`两种模式
|
||||
通知栏支持 `closeable` 和 `link` 两种模式。
|
||||
|
||||
```html
|
||||
<!-- closeable 模式，在右侧显示关闭按钮 -->
|
||||
<van-notice-bar mode="closeable">
|
||||
通知内容
|
||||
技术是开发它的人的共同灵魂。
|
||||
</van-notice-bar>
|
||||
|
||||
<!-- link 模式，在右侧显示链接箭头 -->
|
||||
<van-notice-bar mode="link">
|
||||
通知内容
|
||||
技术是开发它的人的共同灵魂。
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
### 自定义样式
|
||||
|
||||
通过 `color` 属性设置文本颜色，通过 `background` 属性设置背景色。
|
||||
|
||||
```html
|
||||
<van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
|
||||
通知内容
|
||||
技术是开发它的人的共同灵魂。
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
### 垂直滚动
|
||||
|
||||
搭配 NoticeBar 和 Swipe 组件可以实现垂直滚动的效果。
|
||||
|
||||
```html
|
||||
<van-notice-bar left-icon="volume-o" :scrollable="false">
|
||||
<van-swipe
|
||||
vertical
|
||||
class="notice-swipe"
|
||||
:autoplay="3000"
|
||||
:show-indicators="false"
|
||||
>
|
||||
<van-swipe-item>内容 1</van-swipe-item>
|
||||
<van-swipe-item>内容 2</van-swipe-item>
|
||||
<van-swipe-item>内容 3</van-swipe-item>
|
||||
</van-swipe>
|
||||
</van-notice-bar>
|
||||
|
||||
<style>
|
||||
.notice-swipe {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
@ -69,12 +109,12 @@ Vue.use(NoticeBar);
|
||||
| --- | --- | --- | --- |
|
||||
| mode | 通知栏模式，可选值为 `closeable` `link` | _string_ | `''` |
|
||||
| text | 通知文本内容 | _string_ | `''` |
|
||||
| color | 文本颜色 | _string_ | `#f60` |
|
||||
| color | 通知文本颜色 | _string_ | `#f60` |
|
||||
| background | 滚动条背景 | _string_ | `#fff7cc` |
|
||||
| left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
|
||||
| delay | 动画延迟时间 (s) | _number \| string_ | `1` |
|
||||
| speed | 滚动速率 (px/s) | _number \| string_ | `50` |
|
||||
| scrollable | 是否在长度溢出时滚动播放 | _boolean_ | `true` |
|
||||
| scrollable | 是否开启滚动播放，内容长度溢出时默认开启 | _boolean_ | - |
|
||||
| wrapable | 是否开启文本换行，只在禁用滚动时生效 | _boolean_ | `false` |
|
||||
|
||||
### Events
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-notice-bar :text="t('text')" left-icon="volume-o" />
|
||||
<van-notice-bar :text="t('text')" scrollable left-icon="volume-o" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('unscrollable')">
|
||||
<demo-block :title="t('scrollable')">
|
||||
<van-notice-bar scrollable :text="t('shortText')" />
|
||||
<van-notice-bar :scrollable="false" :text="t('text')" />
|
||||
</demo-block>
|
||||
|
||||
@ -13,18 +14,33 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('mode')">
|
||||
<van-notice-bar mode="closeable" :text="t('text')" />
|
||||
<van-notice-bar mode="link" :text="t('text')" />
|
||||
<van-notice-bar mode="closeable" :text="t('shortText')" />
|
||||
<van-notice-bar mode="link" :text="t('shortText')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('customStyle')">
|
||||
<van-notice-bar
|
||||
:text="t('text')"
|
||||
:text="t('shortText')"
|
||||
color="#1989fa"
|
||||
background="#ecf9ff"
|
||||
left-icon="info-o"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block v-if="!isWeapp" :title="t('verticalScroll')">
|
||||
<van-notice-bar left-icon="volume-o" :scrollable="false">
|
||||
<van-swipe
|
||||
vertical
|
||||
class="notice-swipe"
|
||||
:autoplay="3000"
|
||||
:show-indicators="false"
|
||||
>
|
||||
<van-swipe-item>{{ t('content') }} 1</van-swipe-item>
|
||||
<van-swipe-item>{{ t('content') }} 2</van-swipe-item>
|
||||
<van-swipe-item>{{ t('content') }} 3</van-swipe-item>
|
||||
</van-swipe>
|
||||
</van-notice-bar>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -32,20 +48,24 @@
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
unscrollable: '禁用滚动',
|
||||
text: '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。',
|
||||
mode: '通知栏模式',
|
||||
content: '内容',
|
||||
wrapable: '多行展示',
|
||||
text:
|
||||
'足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。',
|
||||
shortText: '技术是开发它的人的共同灵魂。',
|
||||
scrollable: '滚动播放',
|
||||
customStyle: '自定义样式',
|
||||
verticalScroll: '垂直滚动',
|
||||
},
|
||||
'en-US': {
|
||||
text: 'Technology is the common soul of the people who developed it.',
|
||||
mode: 'Mode',
|
||||
content: 'Content',
|
||||
wrapable: 'Wrapable',
|
||||
unscrollable: 'Disable scroll',
|
||||
text:
|
||||
'Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.',
|
||||
shortText: 'Some short text.',
|
||||
customStyle: 'Custom Style',
|
||||
scrollable: 'Scrollable',
|
||||
verticalScroll: 'Vertical Scroll',
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -64,5 +84,10 @@ export default {
|
||||
.van-doc-demo-block__title {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.notice-swipe {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import { createNamespace, isDef } from '../utils';
|
||||
import { doubleRaf } from '../utils/dom/raf';
|
||||
import Icon from '../icon';
|
||||
|
||||
@ -14,7 +14,7 @@ export default createComponent({
|
||||
background: String,
|
||||
scrollable: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
default: null,
|
||||
},
|
||||
delay: {
|
||||
type: [Number, String],
|
||||
@ -32,7 +32,6 @@ export default createComponent({
|
||||
offset: 0,
|
||||
duration: 0,
|
||||
wrapWidth: 0,
|
||||
firstRound: true,
|
||||
contentWidth: 0,
|
||||
};
|
||||
},
|
||||
@ -45,6 +44,10 @@ export default createComponent({
|
||||
},
|
||||
},
|
||||
|
||||
activated() {
|
||||
this.start();
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickIcon(event) {
|
||||
if (this.mode === 'closeable') {
|
||||
@ -56,7 +59,6 @@ export default createComponent({
|
||||
onTransitionEnd() {
|
||||
this.offset = this.wrapWidth;
|
||||
this.duration = 0;
|
||||
this.firstRound = false;
|
||||
|
||||
doubleRaf(() => {
|
||||
this.offset = -this.contentWidth;
|
||||
@ -66,30 +68,35 @@ export default createComponent({
|
||||
},
|
||||
|
||||
reset() {
|
||||
this.offset = 0;
|
||||
this.duration = 0;
|
||||
this.wrapWidth = 0;
|
||||
this.contentWidth = 0;
|
||||
},
|
||||
|
||||
start() {
|
||||
this.$nextTick(() => {
|
||||
const delay = isDef(this.delay) ? this.delay * 1000 : 0;
|
||||
|
||||
this.reset();
|
||||
|
||||
setTimeout(() => {
|
||||
const { wrap, content } = this.$refs;
|
||||
if (!wrap || !content) {
|
||||
if (!wrap || !content || this.scrollable === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
const wrapWidth = wrap.getBoundingClientRect().width;
|
||||
const contentWidth = content.getBoundingClientRect().width;
|
||||
|
||||
if (this.scrollable && contentWidth > wrapWidth) {
|
||||
this.offset = -contentWidth;
|
||||
this.duration = contentWidth / this.speed;
|
||||
this.wrapWidth = wrapWidth;
|
||||
this.contentWidth = contentWidth;
|
||||
} else {
|
||||
this.reset();
|
||||
if (this.scrollable || contentWidth > wrapWidth) {
|
||||
doubleRaf(() => {
|
||||
this.offset = -contentWidth;
|
||||
this.duration = contentWidth / this.speed;
|
||||
this.wrapWidth = wrapWidth;
|
||||
this.contentWidth = contentWidth;
|
||||
});
|
||||
}
|
||||
});
|
||||
}, delay);
|
||||
},
|
||||
},
|
||||
|
||||
@ -102,8 +109,7 @@ export default createComponent({
|
||||
};
|
||||
|
||||
const contentStyle = {
|
||||
transform: `translateX(${this.offset}px)`,
|
||||
transitionDelay: (this.firstRound ? this.delay : 0) + 's',
|
||||
transform: this.offset ? `translateX(${this.offset}px)` : '',
|
||||
transitionDuration: this.duration + 's',
|
||||
};
|
||||
|
||||
@ -160,7 +166,7 @@ export default createComponent({
|
||||
ref="content"
|
||||
class={[
|
||||
bem('content'),
|
||||
{ 'van-ellipsis': !this.scrollable && !this.wrapable },
|
||||
{ 'van-ellipsis': this.scrollable === false && !this.wrapable },
|
||||
]}
|
||||
style={contentStyle}
|
||||
onTransitionend={this.onTransitionEnd}
|
||||
|
||||
@ -6,34 +6,39 @@ exports[`renders demo correctly 1`] = `
|
||||
<div role="alert" class="van-notice-bar"><i class="van-icon van-icon-volume-o van-notice-bar__left-icon">
|
||||
<!----></i>
|
||||
<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content" style="transform: translateX(0px); transition-delay: 1s; transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
<div class="van-notice-bar__content" style="transition-duration: 0s;">在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="alert" class="van-notice-bar">
|
||||
<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content van-ellipsis" style="transform: translateX(0px); transition-delay: 1s; transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
<div class="van-notice-bar__content" style="transition-duration: 0s;">技术是开发它的人的共同灵魂。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="alert" class="van-notice-bar">
|
||||
<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content van-ellipsis" style="transition-duration: 0s;">在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="alert" class="van-notice-bar van-notice-bar--wrapable">
|
||||
<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content" style="transform: translateX(0px); transition-delay: 1s; transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
<div class="van-notice-bar__content" style="transition-duration: 0s;">在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="alert" class="van-notice-bar">
|
||||
<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content" style="transform: translateX(0px); transition-delay: 1s; transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
<div class="van-notice-bar__content" style="transition-duration: 0s;">技术是开发它的人的共同灵魂。</div>
|
||||
</div><i class="van-icon van-icon-cross van-notice-bar__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div role="alert" class="van-notice-bar">
|
||||
<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content" style="transform: translateX(0px); transition-delay: 1s; transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
<div class="van-notice-bar__content" style="transition-duration: 0s;">技术是开发它的人的共同灵魂。</div>
|
||||
</div><i class="van-icon van-icon-arrow van-notice-bar__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
@ -42,7 +47,23 @@ exports[`renders demo correctly 1`] = `
|
||||
<div role="alert" class="van-notice-bar" style="color: rgb(25, 137, 250); background: rgb(236, 249, 255);"><i class="van-icon van-icon-info-o van-notice-bar__left-icon">
|
||||
<!----></i>
|
||||
<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content" style="transform: translateX(0px); transition-delay: 1s; transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
<div class="van-notice-bar__content" style="transition-duration: 0s;">技术是开发它的人的共同灵魂。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="alert" class="van-notice-bar"><i class="van-icon van-icon-volume-o van-notice-bar__left-icon">
|
||||
<!----></i>
|
||||
<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content van-ellipsis" style="transition-duration: 0s;">
|
||||
<div class="notice-swipe van-swipe">
|
||||
<div class="van-swipe__track van-swipe__track--vertical" style="height: 0px; transition-duration: 0ms; transform: translateY(0px);">
|
||||
<div class="van-swipe-item" style="height: 0px;">内容 1</div>
|
||||
<div class="van-swipe-item" style="height: 0px;">内容 2</div>
|
||||
<div class="van-swipe-item" style="height: 0px;">内容 3</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,8 +2,24 @@
|
||||
|
||||
exports[`icon slot 1`] = `
|
||||
<div role="alert" class="van-notice-bar">Custom Left Icon<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content" style="transform: translateX(0px); transition-delay: 1s; transition-duration: 0s;">
|
||||
<div class="van-notice-bar__content" style="transition-duration: 0s;">
|
||||
Content
|
||||
</div>
|
||||
</div>Custom Right Icon</div>
|
||||
`;
|
||||
|
||||
exports[`should not scroll when content width > wrap width 1`] = `
|
||||
<div role="alert" class="van-notice-bar">
|
||||
<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content" style="transition-duration: 0s;">foo</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`should scroll when content width > wrap width 1`] = `
|
||||
<div role="alert" class="van-notice-bar">
|
||||
<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content" style="transition-duration: 2s; transform: translateX(-100px);">foo</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -48,3 +48,49 @@ test('replay event', async () => {
|
||||
await later(50);
|
||||
expect(wrapper.emitted('replay')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('should scroll when content width > wrap width ', async () => {
|
||||
const wrapper = mount(NoticeBar, {
|
||||
propsData: {
|
||||
text: 'foo',
|
||||
delay: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const wrap = wrapper.find('.van-notice-bar__wrap');
|
||||
const content = wrapper.find('.van-notice-bar__content');
|
||||
|
||||
wrap.element.getBoundingClientRect = () => ({
|
||||
width: 50,
|
||||
});
|
||||
content.element.getBoundingClientRect = () => ({
|
||||
width: 100,
|
||||
});
|
||||
|
||||
await later(50);
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should not scroll when content width > wrap width ', async () => {
|
||||
const wrapper = mount(NoticeBar, {
|
||||
propsData: {
|
||||
text: 'foo',
|
||||
delay: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const wrap = wrapper.find('.van-notice-bar__wrap');
|
||||
const content = wrapper.find('.van-notice-bar__content');
|
||||
|
||||
wrap.element.getBoundingClientRect = () => ({
|
||||
width: 200,
|
||||
});
|
||||
content.element.getBoundingClientRect = () => ({
|
||||
width: 100,
|
||||
});
|
||||
|
||||
await later(50);
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -46,7 +46,7 @@ function Notify(
|
||||
class={[bem([props.type]), props.className]}
|
||||
{...inherit(ctx, true)}
|
||||
>
|
||||
{props.message}
|
||||
{slots.default?.() || props.message}
|
||||
</Popup>
|
||||
);
|
||||
}
|
||||
|
||||
@ -41,9 +41,9 @@ Notify({
|
||||
});
|
||||
```
|
||||
|
||||
### \$notify Method
|
||||
### Global Method
|
||||
|
||||
After import the Notify component, the \$notify method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
|
||||
After import the Notify component, the `$notify` method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
|
||||
|
||||
```js
|
||||
export default {
|
||||
@ -53,6 +53,34 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### Component Call
|
||||
|
||||
```html
|
||||
<van-button type="primary" text="Component Call" @click="showNotify" />
|
||||
<van-notify v-model="show" type="success">
|
||||
<van-icon name="bell" style="margin-right: 4px;" />
|
||||
<span>Content</span>
|
||||
</van-notify>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showNotify() {
|
||||
this.show = true;
|
||||
setTimeout(() => {
|
||||
this.show = false;
|
||||
}, 2000);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Methods
|
||||
|
||||
@ -1,12 +1,36 @@
|
||||
# Notify 消息提示
|
||||
|
||||
### 引入
|
||||
### 介绍
|
||||
|
||||
在页面顶部展示消息提示，支持函数调用和组件调用两种方式。
|
||||
|
||||
### 函数调用
|
||||
|
||||
Notify 是一个函数，调用后会直接在页面中弹出相应的消息提示。
|
||||
|
||||
```js
|
||||
import { Notify } from 'vant';
|
||||
|
||||
Notify('通知内容');
|
||||
```
|
||||
|
||||
### 组件调用
|
||||
|
||||
通过组件调用 Notify 时，可以通过下面的方式进行注册（从 2.8.5 版本开始支持）：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Notify } from 'vant';
|
||||
|
||||
// 全局注册
|
||||
Vue.use(Notify);
|
||||
|
||||
// 局部注册
|
||||
export default {
|
||||
components: {
|
||||
[Notify.Component.name]: Notify.Component,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
@ -19,7 +43,7 @@ Notify('通知内容');
|
||||
|
||||
### 通知类型
|
||||
|
||||
支持`primary`、`success`、`warning`、`danger`四种通知类型，默认为`danger`
|
||||
支持 `primary`、`success`、`warning`、`danger` 四种通知类型，默认为 `danger`。
|
||||
|
||||
```js
|
||||
// 主要通知
|
||||
@ -37,7 +61,7 @@ Notify({ type: 'warning', message: '通知内容' });
|
||||
|
||||
### 自定义通知
|
||||
|
||||
自定义消息通知的颜色和展示时长
|
||||
自定义消息通知的颜色和展示时长。
|
||||
|
||||
```js
|
||||
Notify({
|
||||
@ -52,9 +76,9 @@ Notify({
|
||||
});
|
||||
```
|
||||
|
||||
### 组件内调用
|
||||
### 全局方法
|
||||
|
||||
引入 Notify 组件后，会自动在 Vue 的 prototype 上挂载 \$notify 方法，便于在组件内调用。
|
||||
引入 Notify 组件后，会自动在 Vue 的 prototype 上挂载 `$notify` 方法，便于在组件内调用。
|
||||
|
||||
```js
|
||||
export default {
|
||||
@ -64,6 +88,36 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### 组件调用
|
||||
|
||||
如果需要在 Notify 内嵌入组件或其他自定义内容，可以使用组件调用的方式。
|
||||
|
||||
```html
|
||||
<van-button type="primary" text="组件调用" @click="showNotify" />
|
||||
<van-notify v-model="show" type="success">
|
||||
<van-icon name="bell" style="margin-right: 4px;" />
|
||||
<span>通知内容</span>
|
||||
</van-notify>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showNotify() {
|
||||
this.show = true;
|
||||
setTimeout(() => {
|
||||
this.show = false;
|
||||
}, 2000);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### 方法
|
||||
|
||||
@ -42,6 +42,19 @@
|
||||
@click="showCustomDuration"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('componentCall')">
|
||||
<van-button
|
||||
type="primary"
|
||||
:text="t('componentCall')"
|
||||
@click="showComponentCall"
|
||||
/>
|
||||
|
||||
<van-notify v-model="show" type="success">
|
||||
<van-icon name="bell" style="margin-right: 4px;" />
|
||||
<span>{{ t('content') }}</span>
|
||||
</van-notify>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -57,6 +70,7 @@ export default {
|
||||
notifyType: '通知类型',
|
||||
customColor: '自定义颜色',
|
||||
customNotify: '自定义配置',
|
||||
componentCall: '组件调用',
|
||||
customDuration: '自定义时长',
|
||||
},
|
||||
'en-US': {
|
||||
@ -68,10 +82,17 @@ export default {
|
||||
notifyType: 'Notify Type',
|
||||
customColor: 'Custom Color',
|
||||
customNotify: 'Custom Notify',
|
||||
componentCall: 'Component Call',
|
||||
customDuration: 'Custom Duration',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
showNotify() {
|
||||
this.$notify(this.t('content'));
|
||||
@ -98,6 +119,13 @@ export default {
|
||||
type,
|
||||
});
|
||||
},
|
||||
|
||||
showComponentCall() {
|
||||
this.show = true;
|
||||
setTimeout(() => {
|
||||
this.show = false;
|
||||
}, 2000);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-notify {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
padding: @notify-padding;
|
||||
color: @notify-text-color;
|
||||
|
||||
@ -89,6 +89,8 @@ Notify.install = () => {
|
||||
Vue.use(VanNotify as any);
|
||||
};
|
||||
|
||||
Notify.Component = VanNotify;
|
||||
|
||||
Vue.prototype.$notify = Notify;
|
||||
|
||||
export default Notify;
|
||||
|
||||
@ -21,5 +21,10 @@ exports[`renders demo correctly 1`] = `
|
||||
</button> <button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">自定义时长</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">组件调用</span></div>
|
||||
</button>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -3,6 +3,7 @@ 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;
|
||||
|
||||
@ -33,7 +34,7 @@ export default createComponent({
|
||||
valueKey: String,
|
||||
allowHtml: Boolean,
|
||||
className: String,
|
||||
itemHeight: [Number, String],
|
||||
itemHeight: Number,
|
||||
defaultIndex: Number,
|
||||
swipeDuration: [Number, String],
|
||||
visibleItemCount: [Number, String],
|
||||
@ -255,9 +256,11 @@ export default createComponent({
|
||||
},
|
||||
|
||||
genOptions() {
|
||||
const optionStyle = {
|
||||
height: `${this.itemHeight}px`,
|
||||
};
|
||||
const optionStyle = {};
|
||||
|
||||
if (this.itemHeight !== DEFAULT_ITEM_HEIGHT) {
|
||||
optionStyle.height = `${this.itemHeight}px`;
|
||||
}
|
||||
|
||||
return this.options.map((option, index) => {
|
||||
const text = this.getOptionText(option);
|
||||
@ -285,7 +288,7 @@ export default createComponent({
|
||||
const childData = {
|
||||
class: 'van-ellipsis',
|
||||
domProps: {
|
||||
[this.allowHtml ? 'innerHTML' : 'innerText']: text,
|
||||
[this.allowHtml ? 'innerHTML' : 'textContent']: text,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -252,7 +252,7 @@ export default {
|
||||
| show-toolbar | Whether to show toolbar | _boolean_ | `false` |
|
||||
| allow-html `v2.1.8` | Whether to allow HTML in option text | _boolean_ | `true` |
|
||||
| default-index | Default value index of single column picker | _number \| string_ | `0` |
|
||||
| item-height | Option height | _number \| string_ | `44` |
|
||||
| item-height `v2.8.6` | Option height, supports `px` ans `rem` unit, default `px` | _number \| string_ | `44` |
|
||||
| visible-item-count | Count of visible columns | _number \| string_ | `5` |
|
||||
| swipe-duration `v2.2.10` | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` |
|
||||
|
||||
|
||||
@ -275,9 +275,9 @@ export default {
|
||||
| show-toolbar | 是否显示顶部栏 | _boolean_ | `false` |
|
||||
| allow-html `v2.1.8` | 是否允许选项内容中渲染 HTML | _boolean_ | `true` |
|
||||
| default-index | 单列选择时，默认选中项的索引 | _number \| string_ | `0` |
|
||||
| item-height | 选项高度 | _number \| string_ | `44` |
|
||||
| item-height `v2.8.6` | 选项高度，支持 `px` 和 `rem` 单位，默认 `px` | _number \| string_ | `44` |
|
||||
| visible-item-count | 可见的选项个数 | _number \| string_ | `5` |
|
||||
| swipe-duration `v2.2.10` | 快速滑动时惯性滚动的时长，单位`ms` | _number \| string_ | `1000` |
|
||||
| swipe-duration `v2.2.10` | 快速滑动时惯性滚动的时长，单位 `ms` | _number \| string_ | `1000` |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
// Utils
|
||||
import { createNamespace, isObject } from '../utils';
|
||||
import { createNamespace, isDef, isObject } from '../utils';
|
||||
import { preventDefault } from '../utils/dom/event';
|
||||
import { BORDER_UNSET_TOP_BOTTOM } from '../utils/constant';
|
||||
import { pickerProps } from './shared';
|
||||
import { pickerProps, DEFAULT_ITEM_HEIGHT } from './shared';
|
||||
import { unitToPx } from '../utils/format/unit';
|
||||
|
||||
// Components
|
||||
import Loading from '../loading';
|
||||
@ -39,6 +40,10 @@ export default createComponent({
|
||||
},
|
||||
|
||||
computed: {
|
||||
itemPxHeight() {
|
||||
return this.itemHeight ? unitToPx(this.itemHeight) : DEFAULT_ITEM_HEIGHT;
|
||||
},
|
||||
|
||||
dataType() {
|
||||
const { columns } = this;
|
||||
const firstColumn = columns[0] || {};
|
||||
@ -81,7 +86,9 @@ export default createComponent({
|
||||
let cursor = { children: this.columns };
|
||||
|
||||
while (cursor && cursor.children) {
|
||||
const defaultIndex = cursor.defaultIndex || +this.defaultIndex;
|
||||
const defaultIndex = isDef(cursor.defaultIndex)
|
||||
? cursor.defaultIndex
|
||||
: +this.defaultIndex;
|
||||
|
||||
formatted.push({
|
||||
values: cursor.children.map((item) => item[this.valueKey]),
|
||||
@ -277,12 +284,38 @@ export default createComponent({
|
||||
},
|
||||
|
||||
genColumns() {
|
||||
const { itemPxHeight } = this;
|
||||
const wrapHeight = itemPxHeight * this.visibleItemCount;
|
||||
|
||||
const frameStyle = { height: `${itemPxHeight}px` };
|
||||
const columnsStyle = { height: `${wrapHeight}px` };
|
||||
const maskStyle = {
|
||||
backgroundSize: `100% ${(wrapHeight - itemPxHeight) / 2}px`,
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
class={bem('columns')}
|
||||
style={columnsStyle}
|
||||
onTouchmove={preventDefault}
|
||||
>
|
||||
{this.genColumnItems()}
|
||||
<div class={bem('mask')} style={maskStyle} />
|
||||
<div
|
||||
class={[BORDER_UNSET_TOP_BOTTOM, bem('frame')]}
|
||||
style={frameStyle}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
genColumnItems() {
|
||||
return this.formattedColumns.map((item, columnIndex) => (
|
||||
<PickerColumn
|
||||
valueKey={this.valueKey}
|
||||
allowHtml={this.allowHtml}
|
||||
className={item.className}
|
||||
itemHeight={this.itemHeight}
|
||||
itemHeight={this.itemPxHeight}
|
||||
defaultIndex={item.defaultIndex || +this.defaultIndex}
|
||||
swipeDuration={this.swipeDuration}
|
||||
visibleItemCount={this.visibleItemCount}
|
||||
@ -296,38 +329,12 @@ export default createComponent({
|
||||
},
|
||||
|
||||
render(h) {
|
||||
const itemHeight = +this.itemHeight;
|
||||
const wrapHeight = itemHeight * this.visibleItemCount;
|
||||
|
||||
const frameStyle = {
|
||||
height: `${itemHeight}px`,
|
||||
};
|
||||
|
||||
const columnsStyle = {
|
||||
height: `${wrapHeight}px`,
|
||||
};
|
||||
|
||||
const maskStyle = {
|
||||
backgroundSize: `100% ${(wrapHeight - itemHeight) / 2}px`,
|
||||
};
|
||||
|
||||
return (
|
||||
<div class={bem()}>
|
||||
{this.toolbarPosition === 'top' ? this.genToolbar() : h()}
|
||||
{this.loading ? <Loading class={bem('loading')} /> : h()}
|
||||
{this.slots('columns-top')}
|
||||
<div
|
||||
class={bem('columns')}
|
||||
style={columnsStyle}
|
||||
onTouchmove={preventDefault}
|
||||
>
|
||||
{this.genColumns()}
|
||||
<div class={bem('mask')} style={maskStyle} />
|
||||
<div
|
||||
class={[BORDER_UNSET_TOP_BOTTOM, bem('frame')]}
|
||||
style={frameStyle}
|
||||
/>
|
||||
</div>
|
||||
{this.genColumns()}
|
||||
{this.slots('columns-bottom')}
|
||||
{this.toolbarPosition === 'bottom' ? this.genToolbar() : h()}
|
||||
</div>
|
||||
|
||||
@ -104,6 +104,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: @picker-option-height;
|
||||
padding: 0 @padding-base;
|
||||
color: @picker-option-text-color;
|
||||
|
||||
|
||||
@ -1,16 +1,19 @@
|
||||
export type SharedPickerProps = {
|
||||
title?: string;
|
||||
loading?: boolean;
|
||||
itemHeight: number;
|
||||
itemHeight?: number;
|
||||
showToolbar?: boolean;
|
||||
visibleItemCount: number | string;
|
||||
cancelButtonText?: string;
|
||||
confirmButtonText?: string;
|
||||
};
|
||||
|
||||
export const DEFAULT_ITEM_HEIGHT = 44;
|
||||
|
||||
export const pickerProps = {
|
||||
title: String,
|
||||
loading: Boolean,
|
||||
itemHeight: [Number, String],
|
||||
showToolbar: Boolean,
|
||||
cancelButtonText: String,
|
||||
confirmButtonText: String,
|
||||
@ -22,10 +25,6 @@ export const pickerProps = {
|
||||
type: [Number, String],
|
||||
default: 5,
|
||||
},
|
||||
itemHeight: {
|
||||
type: [Number, String],
|
||||
default: 44,
|
||||
},
|
||||
swipeDuration: {
|
||||
type: [Number, String],
|
||||
default: 1000,
|
||||
|
||||
@ -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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">杭州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">宁波</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">温州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">嘉兴</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">杭州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">宁波</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">温州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">嘉兴</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">周一</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">周二</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">周三</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">周四</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">上午</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">下午</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">浙江</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">杭州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">西湖区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled">
|
||||
<div class="van-ellipsis">杭州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">宁波</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">浙江</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">杭州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">宁波</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">温州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">嘉兴</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">浙江</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">杭州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">宁波</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">温州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">嘉兴</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">湖州</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -4,25 +4,25 @@ exports[`column watch default index 1`] = `
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 100px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled van-picker-column__item--selected" style="height: 50px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<div class="van-ellipsis">1</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<div class="van-ellipsis">1990</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<div class="van-ellipsis">1991</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<div class="van-ellipsis">1992</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<div class="van-ellipsis">1993</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<div class="van-ellipsis">1994</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<div class="van-ellipsis">1995</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -32,25 +32,25 @@ exports[`column watch default index 2`] = `
|
||||
<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="-1" class="van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<div class="van-ellipsis">1</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<div class="van-ellipsis">1990</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 50px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<div class="van-ellipsis">1991</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<div class="van-ellipsis">1992</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<div class="van-ellipsis">1993</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<div class="van-ellipsis">1994</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<div class="van-ellipsis">1995</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -76,8 +76,8 @@ 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" style="height: 44px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis"><div>option</div></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -103,6 +103,27 @@ exports[`render title slot 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`set rem item-height 1`] = `
|
||||
<div class="van-picker">
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 800px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 320px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 160px;">
|
||||
<div class="van-ellipsis">1990</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 160px;">
|
||||
<div class="van-ellipsis">1991</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 320px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 160px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`toolbar-position prop 1`] = `
|
||||
<div class="van-picker">
|
||||
<!---->
|
||||
|
||||
@ -261,3 +261,21 @@ test('should not reset index when columns unchanged', () => {
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[0]).toEqual(['2', 1]);
|
||||
});
|
||||
|
||||
test('set rem item-height', async () => {
|
||||
const originGetComputedStyle = window.getComputedStyle;
|
||||
|
||||
window.getComputedStyle = () => ({ fontSize: '16px' });
|
||||
|
||||
const wrapper = mount(Picker, {
|
||||
propsData: {
|
||||
columns: simpleColumn.slice(0, 2),
|
||||
itemHeight: '10rem',
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
window.getComputedStyle = originGetComputedStyle;
|
||||
});
|
||||
|
||||
@ -47,7 +47,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-search">
|
||||
<div class="van-search__content van-search__content--square">
|
||||
<div class="van-cell van-cell--borderless van-field">
|
||||
<div class="van-cell van-cell--borderless van-field van-field--disabled">
|
||||
<div class="van-field__left-icon"><i class="van-icon van-icon-search">
|
||||
<!----></i></div>
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
|
||||
@ -87,6 +87,23 @@ export default {
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showShare: false,
|
||||
options: [
|
||||
{ name: 'Wechat', icon: 'wechat' },
|
||||
{ name: 'Weibo', icon: 'weibo' },
|
||||
{ name: 'Link', icon: 'link', description: 'Description' },
|
||||
{ name: 'Poster', icon: 'poster' },
|
||||
{ name: 'Qrcode', icon: 'qrcode' },
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
@ -111,6 +128,7 @@ export default {
|
||||
| Key | Description | Type |
|
||||
| --- | --- | --- |
|
||||
| name | Option name | _string_ |
|
||||
| description `v2.8.5` | Option description | _string_ |
|
||||
| icon | Option icon，can be set to `wechat` `weibo` `qq` `link` `qrcode` `poster` or image URL | _string_ |
|
||||
|
||||
### Events
|
||||
|
||||
@ -17,7 +17,7 @@ Vue.use(ShareSheet);
|
||||
|
||||
### 基础用法
|
||||
|
||||
分享面板通过`options`属性来定义分享选项，数组的每一项是一个对象，对象格式见文档下方表格。
|
||||
分享面板通过 `options` 属性来定义分享选项，数组的每一项是一个对象，对象格式见文档下方表格。
|
||||
|
||||
```html
|
||||
<van-cell title="显示分享面板" @click="showShare = true" />
|
||||
@ -56,7 +56,7 @@ export default {
|
||||
|
||||
### 展示多行选项
|
||||
|
||||
当分享选项的数量较多时，可以将`options`定义为数组嵌套的格式，每个子数组会作为一行选项展示
|
||||
当分享选项的数量较多时，可以将 `options` 定义为数组嵌套的格式，每个子数组会作为一行选项展示。
|
||||
|
||||
```html
|
||||
<van-share-sheet
|
||||
@ -90,7 +90,7 @@ export default {
|
||||
|
||||
### 自定义图标
|
||||
|
||||
除了使用内置的几种图标外，可以直接在`icon`中传入图片 URL 来使用自定义的图标
|
||||
除了使用内置的几种图标外，可以直接在 `icon` 中传入图片 URL 来使用自定义的图标。
|
||||
|
||||
```html
|
||||
<van-share-sheet v-model="showShare" :options="options" />
|
||||
@ -122,7 +122,7 @@ export default {
|
||||
|
||||
### 展示描述信息
|
||||
|
||||
通过`description`属性可以设置标题下方的描述文字
|
||||
通过 `description` 属性可以设置标题下方的描述文字, 在 `options` 内设置 `description` 属性可以添加分享选项描述。
|
||||
|
||||
```html
|
||||
<van-share-sheet
|
||||
@ -133,6 +133,23 @@ export default {
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showShare: false,
|
||||
options: [
|
||||
{ name: '微信', icon: 'wechat' },
|
||||
{ name: '微博', icon: 'weibo' },
|
||||
{ name: '复制链接', icon: 'link', description: '描述信息' },
|
||||
{ name: '分享海报', icon: 'poster' },
|
||||
{ name: '二维码', icon: 'qrcode' },
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
@ -159,6 +176,7 @@ export default {
|
||||
| 键名 | 说明 | 类型 |
|
||||
| --- | --- | --- |
|
||||
| name | 分享渠道名称 | _string_ |
|
||||
| description `v2.8.5` | 分享选项描述 | _string_ |
|
||||
| icon | 图标，可选值为 `wechat` `weibo` `qq` `link` `qrcode` `poster`，支持传入图片 URL | _string_ |
|
||||
|
||||
### Events
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
<van-share-sheet
|
||||
v-model="show.withDesc"
|
||||
:title="t('title')"
|
||||
:options="options"
|
||||
:options="optionsWithDesc"
|
||||
:description="t('description')"
|
||||
@select="onSelect"
|
||||
/>
|
||||
@ -138,6 +138,20 @@ export default {
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
optionsWithDesc() {
|
||||
return [
|
||||
{ name: this.t('wechat'), icon: 'wechat' },
|
||||
{ name: this.t('weibo'), icon: 'weibo' },
|
||||
{
|
||||
name: this.t('link'),
|
||||
icon: 'link',
|
||||
description: this.t('description'),
|
||||
},
|
||||
{ name: this.t('poster'), icon: 'poster' },
|
||||
{ name: this.t('qrcode'), icon: 'qrcode' },
|
||||
];
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
@ -92,6 +92,11 @@ export default createComponent({
|
||||
>
|
||||
<img src={this.getIconURL(option.icon)} class={bem('icon')} />
|
||||
{option.name && <span class={bem('name')}>{option.name}</span>}
|
||||
{option.description && (
|
||||
<span class={bem('option-description')}>
|
||||
{option.description}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -65,6 +65,12 @@
|
||||
font-size: @share-sheet-option-name-font-size;
|
||||
}
|
||||
|
||||
&__option-description {
|
||||
padding: 0 @padding-base;
|
||||
color: @share-sheet-option-description-color;
|
||||
font-size: @share-sheet-option-description-font-size;
|
||||
}
|
||||
|
||||
&__cancel {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
@ -56,6 +56,7 @@ export default {
|
||||
| avatar | Whether to show avatar placeholder | _boolean_ | `false` |
|
||||
| loading | Whether to show skeleton，pass `false` to show child component | _boolean_ | `true` |
|
||||
| animate | Whether to enable animation | _boolean_ | `true` |
|
||||
| round `v2.8.5` | Whether to show round title and row | _boolean_ | `false` |
|
||||
| title-width | Title width | _number \| string_ | `40%` |
|
||||
| avatar-size | Size of avatar placeholder | _number \| string_ | `32px` |
|
||||
| avatar-shape | Shape of avatar placeholder，can be set to `square` | _string_ | `round` |
|
||||
|
||||
@ -60,8 +60,9 @@ export default {
|
||||
| row-width | 段落占位图宽度，可传数组来设置每一行的宽度 | _number \| string \|<br>(number \| string)[]_ | `100%` |
|
||||
| title | 是否显示标题占位图 | _boolean_ | `false` |
|
||||
| avatar | 是否显示头像占位图 | _boolean_ | `false` |
|
||||
| loading | 是否显示骨架屏，传`false`时会展示子组件内容 | _boolean_ | `true` |
|
||||
| loading | 是否显示骨架屏，传 `false` 时会展示子组件内容 | _boolean_ | `true` |
|
||||
| animate | 是否开启动画 | _boolean_ | `true` |
|
||||
| round `v2.8.5` | 是否将标题和段落显示为圆角风格 | _boolean_ | `false` |
|
||||
| title-width | 标题占位图宽度 | _number \| string_ | `40%` |
|
||||
| avatar-size | 头像占位图大小 | _number \| string_ | `32px` |
|
||||
| avatar-shape | 头像占位图形状，可选值为`square` | _string_ | `round` |
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
background-color: @skeleton-avatar-background-color;
|
||||
|
||||
&--round {
|
||||
border-radius: 100%;
|
||||
border-radius: @border-radius-max;
|
||||
}
|
||||
}
|
||||
|
||||
@ -46,6 +46,13 @@
|
||||
animation: van-skeleton-blink @skeleton-animation-duration ease-in-out
|
||||
infinite;
|
||||
}
|
||||
|
||||
&--round {
|
||||
.van-skeleton__row,
|
||||
.van-skeleton__title {
|
||||
border-radius: @border-radius-max;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes van-skeleton-blink {
|
||||
|
||||
@ -9,6 +9,7 @@ import { DefaultSlots } from '../utils/types';
|
||||
export type SkeletonProps = {
|
||||
row: number | string;
|
||||
title?: boolean;
|
||||
round?: boolean;
|
||||
avatar?: boolean;
|
||||
loading: boolean;
|
||||
animate: boolean;
|
||||
@ -78,7 +79,10 @@ function Skeleton(
|
||||
}
|
||||
|
||||
return (
|
||||
<div class={bem({ animate: props.animate })} {...inherit(ctx)}>
|
||||
<div
|
||||
class={bem({ animate: props.animate, round: props.round })}
|
||||
{...inherit(ctx)}
|
||||
>
|
||||
{Avatar()}
|
||||
<div class={bem('content')}>
|
||||
{Title()}
|
||||
@ -90,6 +94,7 @@ function Skeleton(
|
||||
|
||||
Skeleton.props = {
|
||||
title: Boolean,
|
||||
round: Boolean,
|
||||
avatar: Boolean,
|
||||
row: {
|
||||
type: [Number, String],
|
||||
|
||||
@ -17,6 +17,15 @@ exports[`disable animate 1`] = `
|
||||
|
||||
exports[`render chidren 1`] = `<div>Content</div>`;
|
||||
|
||||
exports[`round prop 1`] = `
|
||||
<div class="van-skeleton van-skeleton--animate van-skeleton--round">
|
||||
<div class="van-skeleton__avatar van-skeleton__avatar--round" style="width: 32px; height: 32px;"></div>
|
||||
<div class="van-skeleton__content">
|
||||
<h3 class="van-skeleton__title" style="width: 40%;"></h3>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`row-width array 1`] = `
|
||||
<div class="van-skeleton van-skeleton--animate">
|
||||
<div class="van-skeleton__content">
|
||||
|
||||
@ -34,6 +34,17 @@ test('avatar shape', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('round prop', () => {
|
||||
const wrapper = mount(Skeleton, {
|
||||
propsData: {
|
||||
title: true,
|
||||
round: true,
|
||||
avatar: true,
|
||||
},
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('disable animate', () => {
|
||||
const wrapper = mount(Skeleton, {
|
||||
propsData: {
|
||||
|
||||
@ -119,8 +119,9 @@ export default {
|
||||
| button-size `v2.0.5` | Button size | _number \| string_ | `28px` |
|
||||
| decimal-length `v2.2.1` | Decimal length | _number \| string_ | - |
|
||||
| theme `v2.8.2` | Theme, can be set to `round` | _string_ | - |
|
||||
| placeholder `v2.8.6` | Input placeholder | _string_ | - |
|
||||
| integer | Whether to allow only integers | _boolean_ | `false` |
|
||||
| disabled | Disable value change | _boolean_ | `false` |
|
||||
| disabled | Whether to disable value change | _boolean_ | `false` |
|
||||
| disable-plus `v2.2.16` | Whether to disable plus button | _boolean_ | `false` |
|
||||
| disable-minus `v2.2.16` | Whether to disable minus button | _boolean_ | `false` |
|
||||
| disable-input | Whether to disable input | _boolean_ | `false` |
|
||||
|
||||
@ -145,6 +145,7 @@ export default {
|
||||
| button-size `v2.0.5` | 按钮大小以及输入框高度，默认单位为`px` | _number \| string_ | `28px` |
|
||||
| decimal-length `v2.2.1` | 固定显示的小数位数 | _number \| string_ | - |
|
||||
| theme `v2.8.2` | 样式风格，可选值为 `round` | _string_ | - |
|
||||
| placeholder `v2.8.6` | 输入框占位提示文字 | _string_ | - |
|
||||
| integer | 是否只允许输入整数 | _boolean_ | `false` |
|
||||
| disabled | 是否禁用步进器 | _boolean_ | `false` |
|
||||
| disable-plus `v2.2.16` | 是否禁用增加按钮 | _boolean_ | `false` |
|
||||
|
||||
@ -31,6 +31,7 @@ export default createComponent({
|
||||
inputWidth: [Number, String],
|
||||
buttonSize: [Number, String],
|
||||
asyncChange: Boolean,
|
||||
placeholder: String,
|
||||
disablePlus: Boolean,
|
||||
disableMinus: Boolean,
|
||||
disableInput: Boolean,
|
||||
@ -298,6 +299,7 @@ export default createComponent({
|
||||
readonly={this.disableInput}
|
||||
// set keyboard in mordern browers
|
||||
inputmode={this.integer ? 'numeric' : 'decimal'}
|
||||
placeholder={this.placeholder}
|
||||
aria-valuemax={this.max}
|
||||
aria-valuemin={this.min}
|
||||
aria-valuenow={this.currentValue}
|
||||
|
||||
@ -8,4 +8,6 @@ exports[`disabled stepper 1`] = `<div class="van-stepper"><button type="button"
|
||||
|
||||
exports[`input-width prop 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="width: 10rem;"><button type="button" class="van-stepper__plus"></button></div>`;
|
||||
|
||||
exports[`placeholder prop 1`] = `<input type="text" role="spinbutton" inputmode="decimal" placeholder="foo" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input">`;
|
||||
|
||||
exports[`show-plus & show-minus props 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled" style="display: none;"></button><input type="text" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus" style="display: none;"></button></div>`;
|
||||
|
||||
@ -378,3 +378,12 @@ test('change integer', async () => {
|
||||
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual(1);
|
||||
});
|
||||
|
||||
test('placeholder prop', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
propsData: {
|
||||
placeholder: 'foo',
|
||||
},
|
||||
});
|
||||
expect(wrapper.find('.van-stepper__input')).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -54,11 +54,11 @@ export default {
|
||||
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| ---------- | ------------------- | ------------------ | ------- |
|
||||
| offset-top | Offset top | _number \| string_ | `0` |
|
||||
| z-index | z-index when sticky | _number \| string_ | `99` |
|
||||
| container | Container DOM | _Element_ | - |
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| offset-top `v2.8.7` | Offset top, supports `px` ans `rem` unit, default `px` | _number \| string_ | `0` |
|
||||
| z-index | z-index when sticky | _number \| string_ | `99` |
|
||||
| container | Container DOM | _Element_ | - |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@ -64,11 +64,11 @@ export default {
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------- | ---------------------------- | ------------------ | ------ |
|
||||
| offset-top | 吸顶时与顶部的距离，单位`px` | _number \| string_ | `0` |
|
||||
| z-index | 吸顶时的 z-index | _number \| string_ | `99` |
|
||||
| container | 容器对应的 HTML 节点 | _Element_ | - |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| offset-top `v2.8.7` | 吸顶时与顶部的距离，支持 `px` 和 `rem` 单位，默认 `px` | _number \| string_ | `0` |
|
||||
| z-index | 吸顶时的 z-index | _number \| string_ | `99` |
|
||||
| container | 容器对应的 HTML 节点 | _Element_ | - |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { isHidden } from '../utils/dom/style';
|
||||
import { unitToPx } from '../utils/format/unit';
|
||||
import { createNamespace, isDef, isServer } from '../utils';
|
||||
import { getScrollTop, getElementTop, getScroller } from '../utils/dom/scroll';
|
||||
import { BindEventMixin } from '../mixins/bind-event';
|
||||
@ -40,6 +41,10 @@ export default createComponent({
|
||||
},
|
||||
|
||||
computed: {
|
||||
offsetTopPx() {
|
||||
return unitToPx(this.offsetTop);
|
||||
},
|
||||
|
||||
style() {
|
||||
if (!this.fixed) {
|
||||
return;
|
||||
@ -51,8 +56,8 @@ export default createComponent({
|
||||
style.zIndex = this.zIndex;
|
||||
}
|
||||
|
||||
if (this.offsetTop && this.fixed) {
|
||||
style.top = `${this.offsetTop}px`;
|
||||
if (this.offsetTopPx && this.fixed) {
|
||||
style.top = `${this.offsetTopPx}px`;
|
||||
}
|
||||
|
||||
if (this.transform) {
|
||||
@ -86,8 +91,7 @@ export default createComponent({
|
||||
|
||||
this.height = this.$el.offsetHeight;
|
||||
|
||||
const { container } = this;
|
||||
const offsetTop = +this.offsetTop;
|
||||
const { container, offsetTopPx } = this;
|
||||
const scrollTop = getScrollTop(window);
|
||||
const topToPageTop = getElementTop(this.$el);
|
||||
|
||||
@ -102,12 +106,12 @@ export default createComponent({
|
||||
if (container) {
|
||||
const bottomToPageTop = topToPageTop + container.offsetHeight;
|
||||
|
||||
if (scrollTop + offsetTop + this.height > bottomToPageTop) {
|
||||
if (scrollTop + offsetTopPx + this.height > bottomToPageTop) {
|
||||
const distanceToBottom = this.height + scrollTop - bottomToPageTop;
|
||||
|
||||
if (distanceToBottom < this.height) {
|
||||
this.fixed = true;
|
||||
this.transform = -(distanceToBottom + offsetTop);
|
||||
this.transform = -(distanceToBottom + offsetTopPx);
|
||||
} else {
|
||||
this.fixed = false;
|
||||
}
|
||||
@ -117,7 +121,7 @@ export default createComponent({
|
||||
}
|
||||
}
|
||||
|
||||
if (scrollTop + offsetTop > topToPageTop) {
|
||||
if (scrollTop + offsetTopPx > topToPageTop) {
|
||||
this.fixed = true;
|
||||
this.transform = 0;
|
||||
} else {
|
||||
|
||||
@ -28,6 +28,14 @@ exports[`offset-top prop 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`offset-top with rem unit 1`] = `
|
||||
<div style="height: 10px;">
|
||||
<div class="van-sticky van-sticky--fixed" style="top: 16px;">
|
||||
Content
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`sticky to top 1`] = `
|
||||
<div style="height: 10px;">
|
||||
<div class="van-sticky">
|
||||
|
||||
@ -43,6 +43,26 @@ test('offset-top prop', () => {
|
||||
mockScrollTop(0);
|
||||
});
|
||||
|
||||
test('offset-top with rem unit', () => {
|
||||
const originGetComputedStyle = window.getComputedStyle;
|
||||
|
||||
window.getComputedStyle = () => ({ fontSize: '16px' });
|
||||
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-sticky style="height: 10px;" offset-top="1rem">
|
||||
Content
|
||||
</van-sticky>
|
||||
`,
|
||||
});
|
||||
|
||||
mockScrollTop(100);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
mockScrollTop(0);
|
||||
|
||||
window.getComputedStyle = originGetComputedStyle;
|
||||
});
|
||||
|
||||
test('should not trigger scroll event when hidden', () => {
|
||||
const scroll = jest.fn();
|
||||
mount({
|
||||
|
||||
@ -348,7 +348,7 @@
|
||||
@field-label-width: 90px;
|
||||
@field-input-text-color: @text-color;
|
||||
@field-input-error-text-color: @red;
|
||||
@field-input-disabled-text-color: @gray-6;
|
||||
@field-input-disabled-text-color: @gray-5;
|
||||
@field-placeholder-text-color: @gray-5;
|
||||
@field-icon-size: 16px;
|
||||
@field-clear-icon-size: 16px;
|
||||
@ -360,7 +360,7 @@
|
||||
@field-word-limit-color: @gray-7;
|
||||
@field-word-limit-font-size: @font-size-sm;
|
||||
@field-word-limit-line-height: 16px;
|
||||
@field-word-num-full-color: @red;
|
||||
@field-disabled-text-color: @gray-5;
|
||||
|
||||
// GridItem
|
||||
@grid-item-content-padding: @padding-md @padding-xs;
|
||||
@ -536,6 +536,7 @@
|
||||
@picker-action-font-size: @font-size-md;
|
||||
@picker-confirm-action-color: @text-link-color;
|
||||
@picker-cancel-action-color: @gray-6;
|
||||
@picker-option-height: 44px;
|
||||
@picker-option-font-size: @font-size-lg;
|
||||
@picker-option-text-color: @black;
|
||||
@picker-option-disabled-opacity: 0.3;
|
||||
@ -596,6 +597,8 @@
|
||||
@share-sheet-icon-size: 48px;
|
||||
@share-sheet-option-name-color: @gray-7;
|
||||
@share-sheet-option-name-font-size: @font-size-sm;
|
||||
@share-sheet-option-description-color: @gray-5;
|
||||
@share-sheet-option-description-font-size: @font-size-sm;
|
||||
@share-sheet-cancel-button-font-size: @font-size-lg;
|
||||
@share-sheet-cancel-button-height: 48px;
|
||||
@share-sheet-cancel-button-background: @white;
|
||||
|
||||
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