diff --git a/vant/index.html b/vant/index.html index b141a5bf..e7a861ce 100644 --- a/vant/index.html +++ b/vant/index.html @@ -1 +1 @@ -
\u5728\u9875\u9762\u9876\u90E8\u5C55\u793A\u6D88\u606F\u63D0\u793A\uFF0C\u652F\u6301\u7EC4\u4EF6\u8C03\u7528\u548C\u51FD\u6570\u8C03\u7528\u4E24\u79CD\u65B9\u5F0F\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Notify } from 'vant';\n\nconst app = createApp();\napp.use(Notify);\n
\n\u4E3A\u4E86\u4FBF\u4E8E\u4F7F\u7528 Notify
\uFF0CVant \u63D0\u4F9B\u4E86\u4E00\u7CFB\u5217\u8F85\u52A9\u51FD\u6570\uFF0C\u901A\u8FC7\u8F85\u52A9\u51FD\u6570\u53EF\u4EE5\u5FEB\u901F\u5524\u8D77\u5168\u5C40\u7684\u6D88\u606F\u63D0\u793A\u3002
\u6BD4\u5982\u4F7F\u7528 showNotify
\u51FD\u6570\uFF0C\u8C03\u7528\u540E\u4F1A\u76F4\u63A5\u5728\u9875\u9762\u4E2D\u6E32\u67D3\u5BF9\u5E94\u7684\u63D0\u793A\u3002
import { showNotify } from 'vant';\n\nshowNotify({ message: '\u63D0\u793A' });\n
\nimport { showNotify, closeNotify } from 'vant';\n\n// 3 \u79D2\u540E\u81EA\u52A8\u5173\u95ED\nshowNotify('\u901A\u77E5\u5185\u5BB9');\n\n// \u4E3B\u52A8\u5173\u95ED\ncloseNotify();\n
\n\u652F\u6301 primary
\u3001success
\u3001warning
\u3001danger
\u56DB\u79CD\u901A\u77E5\u7C7B\u578B\uFF0C\u9ED8\u8BA4\u4E3A danger
\u3002
import { showNotify } from 'vant';\n\n// \u4E3B\u8981\u901A\u77E5\nshowNotify({ type: 'primary', message: '\u901A\u77E5\u5185\u5BB9' });\n\n// \u6210\u529F\u901A\u77E5\nshowNotify({ type: 'success', message: '\u901A\u77E5\u5185\u5BB9' });\n\n// \u5371\u9669\u901A\u77E5\nshowNotify({ type: 'danger', message: '\u901A\u77E5\u5185\u5BB9' });\n\n// \u8B66\u544A\u901A\u77E5\nshowNotify({ type: 'warning', message: '\u901A\u77E5\u5185\u5BB9' });\n
\n\u81EA\u5B9A\u4E49\u6D88\u606F\u901A\u77E5\u7684\u989C\u8272\u3001\u4F4D\u7F6E\u548C\u5C55\u793A\u65F6\u957F\u3002
\nimport { showNotify } from 'vant';\n\nshowNotify({\n message: '\u81EA\u5B9A\u4E49\u989C\u8272',\n color: '#ad0000',\n background: '#ffe1e1',\n});\n\nshowNotify({\n message: '\u81EA\u5B9A\u4E49\u4F4D\u7F6E',\n position: 'bottom',\n});\n\nshowNotify({\n message: '\u81EA\u5B9A\u4E49\u65F6\u957F',\n duration: 1000,\n});\n
\n\u5982\u679C\u9700\u8981\u5728 Notify \u5185\u5D4C\u5165\u7EC4\u4EF6\u6216\u5176\u4ED6\u81EA\u5B9A\u4E49\u5185\u5BB9\uFF0C\u53EF\u4EE5\u76F4\u63A5\u4F7F\u7528 Notify \u7EC4\u4EF6\uFF0C\u5E76\u4F7F\u7528\u9ED8\u8BA4\u63D2\u69FD\u8FDB\u884C\u5B9A\u5236\u3002\u4F7F\u7528\u524D\u9700\u8981\u901A\u8FC7 app.use
\u7B49\u65B9\u5F0F\u6CE8\u518C\u7EC4\u4EF6\u3002
<van-button type="primary" text="\u7EC4\u4EF6\u8C03\u7528" @click="showNotify" />\n<van-notify v-model:show="show" type="success">\n <van-icon name="bell" style="margin-right: 4px;" />\n <span>\u901A\u77E5\u5185\u5BB9</span>\n</van-notify>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n\n const showNotify = () => {\n show.value = true;\n setTimeout(() => {\n show.value = false;\n }, 2000);\n };\n\n return {\n show,\n showNotify,\n };\n },\n};\n
\nVant \u4E2D\u5BFC\u51FA\u4E86\u4EE5\u4E0B Notify \u76F8\u5173\u7684\u8F85\u52A9\u51FD\u6570\uFF1A
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
showNotify | \n\u5728\u9875\u9762\u9876\u90E8\u5C55\u793A Notify | \nNotifyOptions | string | \nnotify \u5B9E\u4F8B | \n
closeNotify | \n\u5173\u95ED\u5F53\u524D\u5C55\u793A\u7684 Notify | \n- | \nvoid | \n
setNotifyDefaultOptions | \n\u4FEE\u6539\u9ED8\u8BA4\u914D\u7F6E\uFF0C\u5F71\u54CD\u6240\u6709\u7684 showNotify \u8C03\u7528 | \nNotifyOptions | \nvoid | \n
resetNotifyDefaultOptions | \n\u91CD\u7F6E\u9ED8\u8BA4\u914D\u7F6E\uFF0C\u5F71\u54CD\u6240\u6709\u7684 showNotify \u8C03\u7528 | \n- | \nvoid | \n
\u8C03\u7528 showNotify
\u7B49\u65B9\u6CD5\u65F6\uFF0C\u652F\u6301\u4F20\u5165\u4EE5\u4E0B\u9009\u9879\uFF1A
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
type | \n\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A primary success warning | \nNotifyType | \ndanger | \n
message | \n\u5C55\u793A\u6587\u6848\uFF0C\u652F\u6301\u901A\u8FC7\\n \u6362\u884C | \nstring | \n- | \n
duration | \n\u5C55\u793A\u65F6\u957F(ms)\uFF0C\u503C\u4E3A 0 \u65F6\uFF0Cnotify \u4E0D\u4F1A\u6D88\u5931 | \nnumber | string | \n3000 | \n
z-index | \n\u5C06\u7EC4\u4EF6\u7684 z-index \u5C42\u7EA7\u8BBE\u7F6E\u4E3A\u4E00\u4E2A\u56FA\u5B9A\u503C | \nnumber | string | \n2000+ | \n
position | \n\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A bottom | \nNotifyPosition | \ntop | \n
color | \n\u5B57\u4F53\u989C\u8272 | \nstring | \nwhite | \n
background | \n\u80CC\u666F\u989C\u8272 | \nstring | \n- | \n
className | \n\u81EA\u5B9A\u4E49\u7C7B\u540D | \nstring | Array | object | \n- | \n
lockScroll | \n\u662F\u5426\u9501\u5B9A\u80CC\u666F\u6EDA\u52A8 | \nboolean | \nfalse | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \n- | \n
onClick | \n\u70B9\u51FB\u65F6\u7684\u56DE\u8C03\u51FD\u6570 | \n(event: MouseEvent): void | \n- | \n
onOpened | \n\u5B8C\u5168\u5C55\u793A\u540E\u7684\u56DE\u8C03\u51FD\u6570 | \n() => void | \n- | \n
onClose | \n\u5173\u95ED\u65F6\u7684\u56DE\u8C03\u51FD\u6570 | \n() => void | \n- | \n
\u901A\u8FC7\u7EC4\u4EF6\u8C03\u7528 Notify
\u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B Props\uFF1A
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:show | \n\u662F\u5426\u663E\u793A\u901A\u77E5 | \nboolean | \nfalse | \n
type | \n\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A primary success warning | \nNotifyType | \ndanger | \n
message | \n\u5C55\u793A\u6587\u6848\uFF0C\u652F\u6301\u901A\u8FC7\\n \u6362\u884C | \nstring | \n- | \n
z-index | \n\u5C06\u7EC4\u4EF6\u7684 z-index \u5C42\u7EA7\u8BBE\u7F6E\u4E3A\u4E00\u4E2A\u56FA\u5B9A\u503C | \nnumber | string | \n2000+ | \n
position | \n\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A bottom | \nNotifyPosition | \ntop | \n
color | \n\u5B57\u4F53\u989C\u8272 | \nstring | \nwhite | \n
background | \n\u80CC\u666F\u989C\u8272 | \nstring | \n- | \n
class-name | \n\u81EA\u5B9A\u4E49\u7C7B\u540D | \nstring | Array | object | \n- | \n
lock-scroll | \n\u662F\u5426\u9501\u5B9A\u80CC\u666F\u6EDA\u52A8 | \nboolean | \nfalse | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \n- | \n
\u901A\u8FC7\u7EC4\u4EF6\u8C03\u7528 Notify
\u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B\u4E8B\u4EF6\uFF1A
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u65F6\u7684\u56DE\u8C03\u51FD\u6570 | \nevent: MouseEvent | \n
close | \n\u5173\u95ED\u65F6\u7684\u56DE\u8C03\u51FD\u6570 | \n- | \n
opened | \n\u5B8C\u5168\u5C55\u793A\u540E\u7684\u56DE\u8C03\u51FD\u6570 | \n- | \n
\u901A\u8FC7\u7EC4\u4EF6\u8C03\u7528 Notify
\u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B\u63D2\u69FD\uFF1A
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u81EA\u5B9A\u4E49\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n NotifyType,\n NotifyProps,\n NotifyOptions,\n NotifyPosition,\n} from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-notify-text-color | \nvar(--van-white) | \n- | \n
--van-notify-padding | \nvar(--van-padding-xs) var(--van-padding-md) | \n- | \n
--van-notify-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-notify-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-notify-primary-background | \nvar(--van-primary-color) | \n- | \n
--van-notify-success-background | \nvar(--van-success-color) | \n- | \n
--van-notify-danger-background | \nvar(--van-danger-color) | \n- | \n
--van-notify-warning-background | \nvar(--van-warning-color) | \n- | \n
\u5982\u679C\u5F15\u7528 showNotify
\u65B9\u6CD5\u65F6\u51FA\u73B0\u4EE5\u4E0B\u62A5\u9519\uFF0C\u8BF4\u660E\u9879\u76EE\u4E2D\u4F7F\u7528\u4E86 babel-plugin-import
\u63D2\u4EF6\uFF0C\u5BFC\u81F4\u4EE3\u7801\u88AB\u9519\u8BEF\u7F16\u8BD1\u3002
These dependencies were not found:\n\n* vant/es/show-notify in ./src/xxx.js\n* vant/es/show-notify/style in ./src/xxx.js\n
\nVant \u4ECE 4.0 \u7248\u672C\u5F00\u59CB\u4E0D\u518D\u652F\u6301 babel-plugin-import
\u63D2\u4EF6\uFF0C\u8BF7\u53C2\u8003 \u8FC1\u79FB\u6307\u5357 \u79FB\u9664\u8BE5\u63D2\u4EF6\u3002
\u5728\u9875\u9762\u9876\u90E8\u5C55\u793A\u6D88\u606F\u63D0\u793A\uFF0C\u652F\u6301\u7EC4\u4EF6\u8C03\u7528\u548C\u51FD\u6570\u8C03\u7528\u4E24\u79CD\u65B9\u5F0F\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Notify } from 'vant';\n\nconst app = createApp();\napp.use(Notify);\n
\n\u4E3A\u4E86\u4FBF\u4E8E\u4F7F\u7528 Notify
\uFF0CVant \u63D0\u4F9B\u4E86\u4E00\u7CFB\u5217\u8F85\u52A9\u51FD\u6570\uFF0C\u901A\u8FC7\u8F85\u52A9\u51FD\u6570\u53EF\u4EE5\u5FEB\u901F\u5524\u8D77\u5168\u5C40\u7684\u6D88\u606F\u63D0\u793A\u3002
\u6BD4\u5982\u4F7F\u7528 showNotify
\u51FD\u6570\uFF0C\u8C03\u7528\u540E\u4F1A\u76F4\u63A5\u5728\u9875\u9762\u4E2D\u6E32\u67D3\u5BF9\u5E94\u7684\u63D0\u793A\u3002
import { showNotify } from 'vant';\n\nshowNotify({ message: '\u63D0\u793A' });\n
\nimport { showNotify, closeNotify } from 'vant';\n\n// 3 \u79D2\u540E\u81EA\u52A8\u5173\u95ED\nshowNotify('\u901A\u77E5\u5185\u5BB9');\n\n// \u4E3B\u52A8\u5173\u95ED\ncloseNotify();\n
\n\u652F\u6301 primary
\u3001success
\u3001warning
\u3001danger
\u56DB\u79CD\u901A\u77E5\u7C7B\u578B\uFF0C\u9ED8\u8BA4\u4E3A danger
\u3002
import { showNotify } from 'vant';\n\n// \u4E3B\u8981\u901A\u77E5\nshowNotify({ type: 'primary', message: '\u901A\u77E5\u5185\u5BB9' });\n\n// \u6210\u529F\u901A\u77E5\nshowNotify({ type: 'success', message: '\u901A\u77E5\u5185\u5BB9' });\n\n// \u5371\u9669\u901A\u77E5\nshowNotify({ type: 'danger', message: '\u901A\u77E5\u5185\u5BB9' });\n\n// \u8B66\u544A\u901A\u77E5\nshowNotify({ type: 'warning', message: '\u901A\u77E5\u5185\u5BB9' });\n
\n\u81EA\u5B9A\u4E49\u6D88\u606F\u901A\u77E5\u7684\u989C\u8272\u3001\u4F4D\u7F6E\u548C\u5C55\u793A\u65F6\u957F\u3002
\nimport { showNotify } from 'vant';\n\nshowNotify({\n message: '\u81EA\u5B9A\u4E49\u989C\u8272',\n color: '#ad0000',\n background: '#ffe1e1',\n});\n\nshowNotify({\n message: '\u81EA\u5B9A\u4E49\u4F4D\u7F6E',\n position: 'bottom',\n});\n\nshowNotify({\n message: '\u81EA\u5B9A\u4E49\u65F6\u957F',\n duration: 1000,\n});\n
\n\u5982\u679C\u9700\u8981\u5728 Notify \u5185\u5D4C\u5165\u7EC4\u4EF6\u6216\u5176\u4ED6\u81EA\u5B9A\u4E49\u5185\u5BB9\uFF0C\u53EF\u4EE5\u76F4\u63A5\u4F7F\u7528 Notify \u7EC4\u4EF6\uFF0C\u5E76\u4F7F\u7528\u9ED8\u8BA4\u63D2\u69FD\u8FDB\u884C\u5B9A\u5236\u3002\u4F7F\u7528\u524D\u9700\u8981\u901A\u8FC7 app.use
\u7B49\u65B9\u5F0F\u6CE8\u518C\u7EC4\u4EF6\u3002
<van-button type="primary" text="\u7EC4\u4EF6\u8C03\u7528" @click="showNotify" />\n<van-notify v-model:show="show" type="success">\n <van-icon name="bell" style="margin-right: 4px;" />\n <span>\u901A\u77E5\u5185\u5BB9</span>\n</van-notify>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n\n const showNotify = () => {\n show.value = true;\n setTimeout(() => {\n show.value = false;\n }, 2000);\n };\n\n return {\n show,\n showNotify,\n };\n },\n};\n
\nVant \u4E2D\u5BFC\u51FA\u4E86\u4EE5\u4E0B Notify \u76F8\u5173\u7684\u8F85\u52A9\u51FD\u6570\uFF1A
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
showNotify | \n\u5728\u9875\u9762\u9876\u90E8\u5C55\u793A Notify | \nNotifyOptions | string | \nnotify \u5B9E\u4F8B | \n
closeNotify | \n\u5173\u95ED\u5F53\u524D\u5C55\u793A\u7684 Notify | \n- | \nvoid | \n
setNotifyDefaultOptions | \n\u4FEE\u6539\u9ED8\u8BA4\u914D\u7F6E\uFF0C\u5F71\u54CD\u6240\u6709\u7684 showNotify \u8C03\u7528 | \nNotifyOptions | \nvoid | \n
resetNotifyDefaultOptions | \n\u91CD\u7F6E\u9ED8\u8BA4\u914D\u7F6E\uFF0C\u5F71\u54CD\u6240\u6709\u7684 showNotify \u8C03\u7528 | \n- | \nvoid | \n
\u8C03\u7528 showNotify
\u7B49\u65B9\u6CD5\u65F6\uFF0C\u652F\u6301\u4F20\u5165\u4EE5\u4E0B\u9009\u9879\uFF1A
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
type | \n\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A primary success warning | \nNotifyType | \ndanger | \n
message | \n\u5C55\u793A\u6587\u6848\uFF0C\u652F\u6301\u901A\u8FC7\\n \u6362\u884C | \nstring | \n- | \n
duration | \n\u5C55\u793A\u65F6\u957F(ms)\uFF0C\u503C\u4E3A 0 \u65F6\uFF0Cnotify \u4E0D\u4F1A\u6D88\u5931 | \nnumber | string | \n3000 | \n
z-index | \n\u5C06\u7EC4\u4EF6\u7684 z-index \u5C42\u7EA7\u8BBE\u7F6E\u4E3A\u4E00\u4E2A\u56FA\u5B9A\u503C | \nnumber | string | \n2000+ | \n
position | \n\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A bottom | \nNotifyPosition | \ntop | \n
color | \n\u5B57\u4F53\u989C\u8272 | \nstring | \nwhite | \n
background | \n\u80CC\u666F\u989C\u8272 | \nstring | \n- | \n
className | \n\u81EA\u5B9A\u4E49\u7C7B\u540D | \nstring | Array | object | \n- | \n
lockScroll | \n\u662F\u5426\u9501\u5B9A\u80CC\u666F\u6EDA\u52A8 | \nboolean | \nfalse | \n
onClick | \n\u70B9\u51FB\u65F6\u7684\u56DE\u8C03\u51FD\u6570 | \n(event: MouseEvent): void | \n- | \n
onOpened | \n\u5B8C\u5168\u5C55\u793A\u540E\u7684\u56DE\u8C03\u51FD\u6570 | \n() => void | \n- | \n
onClose | \n\u5173\u95ED\u65F6\u7684\u56DE\u8C03\u51FD\u6570 | \n() => void | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n NotifyType,\n NotifyProps,\n NotifyOptions,\n NotifyPosition,\n} from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-notify-text-color | \nvar(--van-white) | \n- | \n
--van-notify-padding | \nvar(--van-padding-xs) var(--van-padding-md) | \n- | \n
--van-notify-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-notify-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-notify-primary-background | \nvar(--van-primary-color) | \n- | \n
--van-notify-success-background | \nvar(--van-success-color) | \n- | \n
--van-notify-danger-background | \nvar(--van-danger-color) | \n- | \n
--van-notify-warning-background | \nvar(--van-warning-color) | \n- | \n
\u5982\u679C\u5F15\u7528 showNotify
\u65B9\u6CD5\u65F6\u51FA\u73B0\u4EE5\u4E0B\u62A5\u9519\uFF0C\u8BF4\u660E\u9879\u76EE\u4E2D\u4F7F\u7528\u4E86 babel-plugin-import
\u63D2\u4EF6\uFF0C\u5BFC\u81F4\u4EE3\u7801\u88AB\u9519\u8BEF\u7F16\u8BD1\u3002
These dependencies were not found:\n\n* vant/es/show-notify in ./src/xxx.js\n* vant/es/show-notify/style in ./src/xxx.js\n
\nVant \u4ECE 4.0 \u7248\u672C\u5F00\u59CB\u4E0D\u518D\u652F\u6301 babel-plugin-import
\u63D2\u4EF6\uFF0C\u8BF7\u53C2\u8003 \u8FC1\u79FB\u6307\u5357 \u79FB\u9664\u8BE5\u63D2\u4EF6\u3002
Get the closest parent element that is scrollable.
\n<div ref="root" />\n
\nimport { ref, watch } from 'vue';\nimport { useScrollParent, useEventListener } from '@vant/use';\n\nexport default {\n setup() {\n const root = ref();\n const scrollParent = useScrollParent(root);\n\n useEventListener(\n 'scroll',\n () => {\n console.log('scroll');\n },\n { target: scrollParent },\n );\n\n return { root };\n },\n};\n
\nfunction useScrollParent(\n element: Ref<Element | undefined>,\n): Ref<Element | Window | undefined>;\n
\nName | \nDescription | \nType | \nDefault Value | \n
---|---|---|---|
element | \nThe current element | \nRef<Element> | \n- | \n
Name | \nDescription | \nType | \n
---|---|---|
scrollParent | \nThe closest parent element that is scrollable | \nRef<Element> | \n
Get the closest parent element that is scrollable.
\n<div ref="root" />\n
\nimport { ref, watch } from 'vue';\nimport { useScrollParent, useEventListener } from '@vant/use';\n\nexport default {\n setup() {\n const root = ref();\n const scrollParent = useScrollParent(root);\n\n useEventListener(\n 'scroll',\n () => {\n console.log('scroll');\n },\n { target: scrollParent },\n );\n\n return { root };\n },\n};\n
\nfunction useScrollParent(\n element: Ref<Element | undefined>,\n): Ref<Element | Window | undefined>;\n
\nName | \nDescription | \nType | \nDefault Value | \n
---|---|---|---|
element | \nThe current element | \nRef<Element> | \n- | \n
Name | \nDescription | \nType | \n
---|---|---|
scrollParent | \nThe closest parent element that is scrollable | \nRef<Element> | \n
\u5C55\u793A\u8054\u7CFB\u4EBA\u5217\u8868\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { ContactList } from 'vant';\n\nconst app = createApp();\napp.use(ContactList);\n
\n<van-contact-list\n v-model="chosenContactId"\n :list="list"\n default-tag-text="\u9ED8\u8BA4"\n @add="onAdd"\n @edit="onEdit"\n @select="onSelect"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const chosenContactId = ref('1');\n const list = ref([\n {\n id: '1',\n name: '\u5F20\u4E09',\n tel: '13000000000',\n isDefault: true,\n },\n {\n id: '2',\n name: '\u674E\u56DB',\n tel: '1310000000',\n },\n ]);\n\n const onAdd = () => showToast('\u65B0\u589E');\n const onEdit = (contact) => showToast('\u7F16\u8F91' + contact.id);\n const onSelect = (contact) => showToast('\u9009\u62E9' + contact.id);\n\n return {\n list,\n onAdd,\n onEdit,\n onSelect,\n chosenContactId,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u9009\u4E2D\u8054\u7CFB\u4EBA\u7684 id | \nnumber | string | \n- | \n
list | \n\u8054\u7CFB\u4EBA\u5217\u8868 | \nContactListItem[] | \n[] | \n
add-text | \n\u65B0\u5EFA\u6309\u94AE\u6587\u6848 | \nstring | \n\u65B0\u5EFA\u8054\u7CFB\u4EBA | \n
default-tag-text | \n\u9ED8\u8BA4\u8054\u7CFB\u4EBA\u6807\u7B7E\u6587\u6848 | \nstring | \n- | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
add | \n\u70B9\u51FB\u65B0\u589E\u6309\u94AE\u65F6\u89E6\u53D1 | \n- | \n
edit | \n\u70B9\u51FB\u7F16\u8F91\u6309\u94AE\u65F6\u89E6\u53D1 | \ncontact: ContactListItem\uFF0Cindex: number | \n
select | \n\u5207\u6362\u9009\u4E2D\u7684\u8054\u7CFB\u4EBA\u65F6\u89E6\u53D1 | \ncontact: ContactListItem\uFF0Cindex: number | \n
\u952E\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
id | \n\u6BCF\u4F4D\u8054\u7CFB\u4EBA\u7684\u552F\u4E00\u6807\u8BC6 | \nnumber | string | \n
name | \n\u8054\u7CFB\u4EBA\u59D3\u540D | \nstring | \n
tel | \n\u8054\u7CFB\u4EBA\u624B\u673A\u53F7 | \nnumber | string | \n
isDefault | \n\u662F\u5426\u4E3A\u9ED8\u8BA4\u8054\u7CFB\u4EBA | \nboolean | undefined | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { ContactListItem, ContactListProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-contact-list-padding | \nvar(--van-padding-sm) var(--van-padding-sm) 80px | \n- | \n
--van-contact-list-edit-icon-size | \n16px | \n- | \n
--van-contact-list-add-button-z-index | \n999 | \n- | \n
--van-contact-list-radio-color | \nvar(--van-primary-color) | \n- | \n
--van-contact-list-item-padding | \nvar(--van-padding-md) | \n- | \n
\u5C55\u793A\u8054\u7CFB\u4EBA\u5217\u8868\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { ContactList } from 'vant';\n\nconst app = createApp();\napp.use(ContactList);\n
\n<van-contact-list\n v-model="chosenContactId"\n :list="list"\n default-tag-text="\u9ED8\u8BA4"\n @add="onAdd"\n @edit="onEdit"\n @select="onSelect"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const chosenContactId = ref('1');\n const list = ref([\n {\n id: '1',\n name: '\u5F20\u4E09',\n tel: '13000000000',\n isDefault: true,\n },\n {\n id: '2',\n name: '\u674E\u56DB',\n tel: '1310000000',\n },\n ]);\n\n const onAdd = () => showToast('\u65B0\u589E');\n const onEdit = (contact) => showToast('\u7F16\u8F91' + contact.id);\n const onSelect = (contact) => showToast('\u9009\u62E9' + contact.id);\n\n return {\n list,\n onAdd,\n onEdit,\n onSelect,\n chosenContactId,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u9009\u4E2D\u8054\u7CFB\u4EBA\u7684 id | \nnumber | string | \n- | \n
list | \n\u8054\u7CFB\u4EBA\u5217\u8868 | \nContactListItem[] | \n[] | \n
add-text | \n\u65B0\u5EFA\u6309\u94AE\u6587\u6848 | \nstring | \n\u65B0\u5EFA\u8054\u7CFB\u4EBA | \n
default-tag-text | \n\u9ED8\u8BA4\u8054\u7CFB\u4EBA\u6807\u7B7E\u6587\u6848 | \nstring | \n- | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
add | \n\u70B9\u51FB\u65B0\u589E\u6309\u94AE\u65F6\u89E6\u53D1 | \n- | \n
edit | \n\u70B9\u51FB\u7F16\u8F91\u6309\u94AE\u65F6\u89E6\u53D1 | \ncontact: ContactListItem\uFF0Cindex: number | \n
select | \n\u5207\u6362\u9009\u4E2D\u7684\u8054\u7CFB\u4EBA\u65F6\u89E6\u53D1 | \ncontact: ContactListItem\uFF0Cindex: number | \n
\u952E\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
id | \n\u6BCF\u4F4D\u8054\u7CFB\u4EBA\u7684\u552F\u4E00\u6807\u8BC6 | \nnumber | string | \n
name | \n\u8054\u7CFB\u4EBA\u59D3\u540D | \nstring | \n
tel | \n\u8054\u7CFB\u4EBA\u624B\u673A\u53F7 | \nnumber | string | \n
isDefault | \n\u662F\u5426\u4E3A\u9ED8\u8BA4\u8054\u7CFB\u4EBA | \nboolean | undefined | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { ContactListItem, ContactListProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-contact-list-padding | \nvar(--van-padding-sm) var(--van-padding-sm) 80px | \n- | \n
--van-contact-list-edit-icon-size | \n16px | \n- | \n
--van-contact-list-add-button-z-index | \n999 | \n- | \n
--van-contact-list-radio-color | \nvar(--van-primary-color) | \n- | \n
--van-contact-list-item-padding | \nvar(--van-padding-md) | \n- | \n
\u7528\u4E8E\u5C06\u5185\u5BB9\u5206\u9694\u4E3A\u591A\u4E2A\u533A\u57DF\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Divider } from 'vant';\n\nconst app = createApp();\napp.use(Divider);\n
\n\u9ED8\u8BA4\u6E32\u67D3\u4E00\u6761\u6C34\u5E73\u5206\u5272\u7EBF\u3002
\n<van-divider />\n
\n\u901A\u8FC7\u63D2\u69FD\u5728\u53EF\u4EE5\u5206\u5272\u7EBF\u4E2D\u95F4\u63D2\u5165\u5185\u5BB9\u3002
\n<van-divider>\u6587\u672C</van-divider>\n
\n\u901A\u8FC7 content-position
\u6307\u5B9A\u5185\u5BB9\u6240\u5728\u4F4D\u7F6E\u3002
<van-divider content-position="left">\u6587\u672C</van-divider>\n<van-divider content-position="right">\u6587\u672C</van-divider>\n
\n\u6DFB\u52A0 dashed
\u5C5E\u6027\u4F7F\u5206\u5272\u7EBF\u6E32\u67D3\u4E3A\u865A\u7EBF\u3002
<van-divider dashed>\u6587\u672C</van-divider>\n
\n\u53EF\u4EE5\u76F4\u63A5\u901A\u8FC7 style
\u5C5E\u6027\u8BBE\u7F6E\u5206\u5272\u7EBF\u7684\u6837\u5F0F\u3002
<van-divider\n :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"\n>\n \u6587\u672C\n</van-divider>\n
\n<van-divider vertical />\n\u6587\u672C\n<van-divider vertical dashed />\n\u6587\u672C\n<van-divider vertical :hairline="false" />\n\u6587\u672C\n<van-divider vertical :style="{ borderColor: '#1989fa' }" />\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
dashed | \n\u662F\u5426\u4F7F\u7528\u865A\u7EBF | \nboolean | \nfalse | \n
hairline | \n\u662F\u5426\u4F7F\u7528 0.5px \u7EBF | \nboolean | \ntrue | \n
content-position | \n\u5185\u5BB9\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A left right | \nstring | \ncenter | \n
vertical v4.4.0 | \n\u662F\u5426\u4F7F\u7528\u5782\u76F4 | \nboolean | \nfalse | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { DividerProps, DividerContentPosition } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-divider-margin | \nvar(--van-padding-md) 0 | \n- | \n
--van-divider-vertical-margin | \n0 var(--van-padding-xs) | \n- | \n
--van-divider-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-divider-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-divider-line-height | \n24px | \n- | \n
--van-divider-border-color | \nvar(--van-border-color) | \n- | \n
--van-divider-content-padding | \nvar(--van-padding-md) | \n- | \n
--van-divider-content-left-width | \n10% | \n- | \n
--van-divider-content-right-width | \n10% | \n- | \n
\u7528\u4E8E\u5C06\u5185\u5BB9\u5206\u9694\u4E3A\u591A\u4E2A\u533A\u57DF\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Divider } from 'vant';\n\nconst app = createApp();\napp.use(Divider);\n
\n\u9ED8\u8BA4\u6E32\u67D3\u4E00\u6761\u6C34\u5E73\u5206\u5272\u7EBF\u3002
\n<van-divider />\n
\n\u901A\u8FC7\u63D2\u69FD\u5728\u53EF\u4EE5\u5206\u5272\u7EBF\u4E2D\u95F4\u63D2\u5165\u5185\u5BB9\u3002
\n<van-divider>\u6587\u672C</van-divider>\n
\n\u901A\u8FC7 content-position
\u6307\u5B9A\u5185\u5BB9\u6240\u5728\u4F4D\u7F6E\u3002
<van-divider content-position="left">\u6587\u672C</van-divider>\n<van-divider content-position="right">\u6587\u672C</van-divider>\n
\n\u6DFB\u52A0 dashed
\u5C5E\u6027\u4F7F\u5206\u5272\u7EBF\u6E32\u67D3\u4E3A\u865A\u7EBF\u3002
<van-divider dashed>\u6587\u672C</van-divider>\n
\n\u53EF\u4EE5\u76F4\u63A5\u901A\u8FC7 style
\u5C5E\u6027\u8BBE\u7F6E\u5206\u5272\u7EBF\u7684\u6837\u5F0F\u3002
<van-divider\n :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"\n>\n \u6587\u672C\n</van-divider>\n
\n<van-divider vertical />\n\u6587\u672C\n<van-divider vertical dashed />\n\u6587\u672C\n<van-divider vertical :hairline="false" />\n\u6587\u672C\n<van-divider vertical :style="{ borderColor: '#1989fa' }" />\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
dashed | \n\u662F\u5426\u4F7F\u7528\u865A\u7EBF | \nboolean | \nfalse | \n
hairline | \n\u662F\u5426\u4F7F\u7528 0.5px \u7EBF | \nboolean | \ntrue | \n
content-position | \n\u5185\u5BB9\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A left right | \nstring | \ncenter | \n
vertical v4.4.0 | \n\u662F\u5426\u4F7F\u7528\u5782\u76F4 | \nboolean | \nfalse | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { DividerProps, DividerContentPosition } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-divider-margin | \nvar(--van-padding-md) 0 | \n- | \n
--van-divider-vertical-margin | \n0 var(--van-padding-xs) | \n- | \n
--van-divider-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-divider-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-divider-line-height | \n24px | \n- | \n
--van-divider-border-color | \nvar(--van-border-color) | \n- | \n
--van-divider-content-padding | \nvar(--van-padding-md) | \n- | \n
--van-divider-content-left-width | \n10% | \n- | \n
--van-divider-content-right-width | \n10% | \n- | \n
Clickable bubbles that hover around the edge of the page. Please upgrade vant
to >= v4.6.0 before using this component.
Register component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { FloatingBubble } from 'vant';\n\nconst app = createApp();\napp.use(FloatingBubble);\n
\nThe floating bubble is displayed by default in the bottom right corner and allows vertical dragging in the y-axis direction. You can set the icon of the bubble using the icon
prop.
<van-floating-bubble icon="chat" @click="onClick" />\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onClick = () => {\n showToast('Click Bubble');\n };\n return { onClick };\n },\n};\n
\nAllow x and y drags to attach to the nearest side of the x axis.
\n<van-floating-bubble\n axis="xy"\n icon="chat"\n magnetic="x"\n @offset-change="onOffsetChange"\n/>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onOffsetChange = (offset) => {\n showToast(`x: ${offset.x.toFixed(0)}, y: ${offset.y.toFixed(0)}`);\n };\n return { onOffsetChange };\n },\n};\n
\nUse v-model:offset
control the position.
<van-floating-bubble v-model:offset="offset" axis="xy" icon="chat" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const offset = ref({ x: 200, y: 400 });\n return { offset };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:offset | \nControl bubble position | \nOffsetType | \nDefault right-bottom coordinate | \n
axis | \nDrag direction, xy stands for free drag, lock stands for disable drag | \n\'x\' | \'y\' | \'xy\' | \'lock\' | \ny | \n
magnetic | \nDirection of automatic magnetic absorption | \n\'x\' | \'y\' | \n- | \n
icon | \nBubble icon | \nstring | \n- | \n
gap | \nMinimum gap between the bubble and the window, unit px | \nnumber | \n24 | \n
teleport | \nSpecifies a target element where BackTop will be mounted | \nstring | Element | \nbody | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nTriggered when a component is clicked | \nMouseEvent | \n
offset-change | \nTriggered when the position changes due to user dragging | \n{x: string, y: string} | \n
Name | \nDescription | \n
---|---|
default | \nCustomize the bubble display content | \n
The component exports the following type definitions:
\nexport type {\n FloatingBubbleProps,\n FloatingBubbleAxis,\n FloatingBubbleMagnetic,\n FloatingBubbleOffset,\n} from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-floating-bubble-size | \n48px | \n- | \n
--van-floating-bubble-initial-gap | \n24px | \n- | \n
--van-floating-bubble-icon-size | \n28px | \n- | \n
--van-floating-bubble-background | \nvar(--van-primary-color) | \n- | \n
--van-floating-bubble-color | \nvar(--van-background-2) | \n- | \n
--van-floating-bubble-z-index | \n999 | \n- | \n
--van-floating-bubble-border-radius | \n--van-floating-bubble-border-radius | \n- | \n
Clickable bubbles that hover around the edge of the page. Please upgrade vant
to >= v4.6.0 before using this component.
Register component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { FloatingBubble } from 'vant';\n\nconst app = createApp();\napp.use(FloatingBubble);\n
\nThe floating bubble is displayed by default in the bottom right corner and allows vertical dragging in the y-axis direction. You can set the icon of the bubble using the icon
prop.
<van-floating-bubble icon="chat" @click="onClick" />\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onClick = () => {\n showToast('Click Bubble');\n };\n return { onClick };\n },\n};\n
\nAllow x and y drags to attach to the nearest side of the x axis.
\n<van-floating-bubble\n axis="xy"\n icon="chat"\n magnetic="x"\n @offset-change="onOffsetChange"\n/>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onOffsetChange = (offset) => {\n showToast(`x: ${offset.x.toFixed(0)}, y: ${offset.y.toFixed(0)}`);\n };\n return { onOffsetChange };\n },\n};\n
\nUse v-model:offset
control the position.
<van-floating-bubble v-model:offset="offset" axis="xy" icon="chat" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const offset = ref({ x: 200, y: 400 });\n return { offset };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:offset | \nControl bubble position | \nOffsetType | \nDefault right-bottom coordinate | \n
axis | \nDrag direction, xy stands for free drag, lock stands for disable drag | \n\'x\' | \'y\' | \'xy\' | \'lock\' | \ny | \n
magnetic | \nDirection of automatic magnetic absorption | \n\'x\' | \'y\' | \n- | \n
icon | \nBubble icon | \nstring | \n- | \n
gap | \nMinimum gap between the bubble and the window, unit px | \nnumber | \n24 | \n
teleport | \nSpecifies a target element where BackTop will be mounted | \nstring | Element | \nbody | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nTriggered when a component is clicked | \nMouseEvent | \n
offset-change | \nTriggered when the position changes due to user dragging | \n{x: string, y: string} | \n
Name | \nDescription | \n
---|---|
default | \nCustomize the bubble display content | \n
The component exports the following type definitions:
\nexport type {\n FloatingBubbleProps,\n FloatingBubbleAxis,\n FloatingBubbleMagnetic,\n FloatingBubbleOffset,\n} from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-floating-bubble-size | \n48px | \n- | \n
--van-floating-bubble-initial-gap | \n24px | \n- | \n
--van-floating-bubble-icon-size | \n28px | \n- | \n
--van-floating-bubble-background | \nvar(--van-primary-color) | \n- | \n
--van-floating-bubble-color | \nvar(--van-background-2) | \n- | \n
--van-floating-bubble-z-index | \n999 | \n- | \n
--van-floating-bubble-border-radius | \n--van-floating-bubble-border-radius | \n- | \n
The display message prompt is at the top of the page, and supports two methods: component call and function call.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Notify } from 'vant';\n\nconst app = createApp();\napp.use(Notify);\n
\nVant provides some utility functions that can quickly evoke global Notify
components.
For example, calling the showNotify
function will render a Dialog directly in the page.
import { showNotify } from 'vant';\n\nshowNotify('Notify Message');\n
\nimport { showNotify, closeNotify } from 'vant';\n\n// auto close after 3s\nshowNotify('Message');\n\n// manually close\ncloseNotify();\n
\nimport { showNotify } from 'vant';\n\nshowNotify({ type: 'primary', message: 'Notify Message' });\nshowNotify({ type: 'success', message: 'Notify Message' });\nshowNotify({ type: 'danger', message: 'Notify Message' });\nshowNotify({ type: 'warning', message: 'Notify Message' });\n
\nimport { showNotify } from 'vant';\n\nshowNotify({\n message: 'Custom Color',\n color: '#ad0000',\n background: '#ffe1e1',\n});\n\nshowNotify({\n message: 'Custom Position',\n position: 'bottom',\n});\n\nshowNotify({\n message: 'Custom Duration',\n duration: 1000,\n});\n
\n<van-button type="primary" text="Use Notify Component" @click="showNotify" />\n<van-notify v-model:show="show" type="success">\n <van-icon name="bell" style="margin-right: 4px;" />\n <span>Content</span>\n</van-notify>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n\n const showNotify = () => {\n show.value = true;\n setTimeout(() => {\n show.value = false;\n }, 2000);\n };\n\n return {\n show,\n showNotify,\n };\n },\n};\n
\nVant exports following Notify utility functions:
\nMethods | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
showNotify | \nDisplay Notify at the top of the page | \nNotifyOptions | string | \nNotify instance | \n
closeNotify | \nClose the currently displayed Notify | \n- | \nvoid | \n
setNotifyDefaultOptions | \nModify the default configuration, affecting all showNotify calls | \nNotifyOptions | \nvoid | \n
resetNotifyDefaultOptions | \nReset the default configuration, affecting all showNotify calls | \n- | \nvoid | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
type | \nCan be set to primary success warning | \nNotifyType | \ndanger | \n
message | \nMessage | \nstring | \n- | \n
duration | \nDuration(ms), won\'t disappear if value is 0 | \nnumber | string | \n3000 | \n
z-index | \nSet the z-index to a fixed value | \nnumber | string | \n2000+ | \n
position | \nPosition, can be set to bottom | \nNotifyPosition | \ntop | \n
color | \nMessage color | \nstring | \nwhite | \n
background | \nBackground color | \nstring | \n- | \n
className | \nCustom className | \nstring | Array | object | \n- | \n
lockScroll | \nWhether to lock background scroll | \nboolean | \nfalse | \n
onClick | \nCallback function after click | \n(event: MouseEvent) => void | \n- | \n
onOpened | \nCallback function after opened | \n() => void | \n- | \n
onClose | \nCallback function after close | \n() => void | \n- | \n
The component exports the following type definitions:
\nimport type {\n NotifyType,\n NotifyProps,\n NotifyOptions,\n NotifyPosition,\n} from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-notify-text-color | \nvar(--van-white) | \n- | \n
--van-notify-padding | \nvar(--van-padding-xs) var(--van-padding-md) | \n- | \n
--van-notify-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-notify-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-notify-primary-background | \nvar(--van-primary-color) | \n- | \n
--van-notify-success-background | \nvar(--van-success-color) | \n- | \n
--van-notify-danger-background | \nvar(--van-danger-color) | \n- | \n
--van-notify-warning-background | \nvar(--van-warning-color) | \n- | \n
The display message prompt is at the top of the page, and supports two methods: component call and function call.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Notify } from 'vant';\n\nconst app = createApp();\napp.use(Notify);\n
\nVant provides some utility functions that can quickly evoke global Notify
components.
For example, calling the showNotify
function will render a Dialog directly in the page.
import { showNotify } from 'vant';\n\nshowNotify('Notify Message');\n
\nimport { showNotify, closeNotify } from 'vant';\n\n// auto close after 3s\nshowNotify('Message');\n\n// manually close\ncloseNotify();\n
\nimport { showNotify } from 'vant';\n\nshowNotify({ type: 'primary', message: 'Notify Message' });\nshowNotify({ type: 'success', message: 'Notify Message' });\nshowNotify({ type: 'danger', message: 'Notify Message' });\nshowNotify({ type: 'warning', message: 'Notify Message' });\n
\nimport { showNotify } from 'vant';\n\nshowNotify({\n message: 'Custom Color',\n color: '#ad0000',\n background: '#ffe1e1',\n});\n\nshowNotify({\n message: 'Custom Position',\n position: 'bottom',\n});\n\nshowNotify({\n message: 'Custom Duration',\n duration: 1000,\n});\n
\n<van-button type="primary" text="Use Notify Component" @click="showNotify" />\n<van-notify v-model:show="show" type="success">\n <van-icon name="bell" style="margin-right: 4px;" />\n <span>Content</span>\n</van-notify>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n\n const showNotify = () => {\n show.value = true;\n setTimeout(() => {\n show.value = false;\n }, 2000);\n };\n\n return {\n show,\n showNotify,\n };\n },\n};\n
\nVant exports following Notify utility functions:
\nMethods | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
showNotify | \nDisplay Notify at the top of the page | \nNotifyOptions | string | \nNotify instance | \n
closeNotify | \nClose the currently displayed Notify | \n- | \nvoid | \n
setNotifyDefaultOptions | \nModify the default configuration, affecting all showNotify calls | \nNotifyOptions | \nvoid | \n
resetNotifyDefaultOptions | \nReset the default configuration, affecting all showNotify calls | \n- | \nvoid | \n
When calling the showNotify
and other related methods, the following options are supported:
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
type | \nCan be set to primary success warning | \nNotifyType | \ndanger | \n
message | \nMessage | \nstring | \n- | \n
duration | \nDuration(ms), won\'t disappear if value is 0 | \nnumber | string | \n3000 | \n
z-index | \nSet the z-index to a fixed value | \nnumber | string | \n2000+ | \n
position | \nPosition, can be set to bottom | \nNotifyPosition | \ntop | \n
color | \nMessage color | \nstring | \nwhite | \n
background | \nBackground color | \nstring | \n- | \n
className | \nCustom className | \nstring | Array | object | \n- | \n
lockScroll | \nWhether to lock background scroll | \nboolean | \nfalse | \n
teleport | \nSpecifies a target element where Notify will be mounted | \nstring | Element | \n- | \n
onClick | \nCallback function after click | \n(event: MouseEvent) => void | \n- | \n
onOpened | \nCallback function after opened | \n() => void | \n- | \n
onClose | \nCallback function after close | \n() => void | \n- | \n
When using Notify
as a component, the following props are supported:
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:show | \nWhether to show notify | \nboolean | \nfalse | \n
type | \nCan be set to primary success warning | \nNotifyType | \ndanger | \n
message | \nMessage | \nstring | \n- | \n
z-index | \nSet the z-index to a fixed value | \nnumber | string | \n2000+ | \n
position | \nPosition, can be set to bottom | \nNotifyPosition | \ntop | \n
color | \nMessage color | \nstring | \nwhite | \n
background | \nBackground color | \nstring | \n- | \n
class-name | \nCustom className | \nstring | Array | object | \n- | \n
lock-scroll | \nWhether to lock background scroll | \nboolean | \nfalse | \n
teleport | \nSpecifies a target element where Notify will be mounted | \nstring | Element | \n- | \n
When using Notify
as a component, the following events are supported:
Event | \nDescription | \nParameters | \n
---|---|---|
click | \nCallback function after click | \nevent: MouseEvent | \n
close | \nCallback function after close | \n- | \n
opened | \nCallback function after opened | \n- | \n
When using Notify
as a component, the following slots are supported:
Name | \nDescription | \n
---|---|
default | \nCustom content | \n
The component exports the following type definitions:
\nimport type {\n NotifyType,\n NotifyProps,\n NotifyOptions,\n NotifyPosition,\n} from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-notify-text-color | \nvar(--van-white) | \n- | \n
--van-notify-padding | \nvar(--van-padding-xs) var(--van-padding-md) | \n- | \n
--van-notify-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-notify-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-notify-primary-background | \nvar(--van-primary-color) | \n- | \n
--van-notify-success-background | \nvar(--van-success-color) | \n- | \n
--van-notify-danger-background | \nvar(--van-danger-color) | \n- | \n
--van-notify-warning-background | \nvar(--van-warning-color) | \n- | \n
\u56FE\u7247\u653E\u5927\u9884\u89C8\uFF0C\u652F\u6301\u7EC4\u4EF6\u8C03\u7528\u548C\u51FD\u6570\u8C03\u7528\u4E24\u79CD\u65B9\u5F0F\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { ImagePreview } from 'vant';\n\nconst app = createApp();\napp.use(ImagePreview);\n
\n\u4E3A\u4E86\u4FBF\u4E8E\u4F7F\u7528 ImagePreview
\uFF0CVant \u63D0\u4F9B\u4E86\u4E00\u7CFB\u5217\u8F85\u52A9\u51FD\u6570\uFF0C\u901A\u8FC7\u8F85\u52A9\u51FD\u6570\u53EF\u4EE5\u5FEB\u901F\u5524\u8D77\u5168\u5C40\u7684\u56FE\u7247\u9884\u89C8\u7EC4\u4EF6\u3002
\u6BD4\u5982\u4F7F\u7528 showImagePreview
\u51FD\u6570\uFF0C\u8C03\u7528\u540E\u4F1A\u76F4\u63A5\u5728\u9875\u9762\u4E2D\u6E32\u67D3\u5BF9\u5E94\u7684\u56FE\u7247\u9884\u89C8\u7EC4\u4EF6\u3002
import { showImagePreview } from 'vant';\n\nshowImagePreview(['https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg']);\n
\n\u5728\u8C03\u7528 showImagePreview
\u65F6\uFF0C\u76F4\u63A5\u4F20\u5165\u56FE\u7247\u6570\u7EC4\uFF0C\u5373\u53EF\u5C55\u793A\u56FE\u7247\u9884\u89C8\u3002
import { showImagePreview } from 'vant';\n\nshowImagePreview([\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n]);\n
\nshowImagePreview
\u652F\u6301\u4F20\u5165\u914D\u7F6E\u5BF9\u8C61\uFF0C\u5E76\u901A\u8FC7 startPosition
\u9009\u9879\u6307\u5B9A\u56FE\u7247\u7684\u521D\u59CB\u4F4D\u7F6E\uFF08\u7D22\u5F15\u503C\uFF09\u3002
import { showImagePreview } from 'vant';\n\nshowImagePreview({\n images: [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n ],\n startPosition: 1,\n});\n
\n\u5F00\u542F closeable
\u9009\u9879\u540E\uFF0C\u4F1A\u5728\u5F39\u51FA\u5C42\u7684\u53F3\u4E0A\u89D2\u663E\u793A\u5173\u95ED\u56FE\u6807\uFF0C\u5E76\u4E14\u53EF\u4EE5\u901A\u8FC7 close-icon
\u5C5E\u6027\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u4F7F\u7528close-icon-position
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u56FE\u6807\u4F4D\u7F6E\u3002
import { showImagePreview } from 'vant';\n\nshowImagePreview({\n images: [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n ],\n closeable: true,\n});\n
\n\u901A\u8FC7 onClose
\u9009\u9879\u76D1\u542C\u56FE\u7247\u9884\u89C8\u7684\u5173\u95ED\u4E8B\u4EF6\u3002
import { showToast, showImagePreview } from 'vant';\n\nshowImagePreview({\n images: [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n ],\n onClose() {\n showToast('\u5173\u95ED');\n },\n});\n
\n\u901A\u8FC7 beforeClose
\u5C5E\u6027\u53EF\u4EE5\u4F20\u5165\u4E00\u4E2A\u56DE\u8C03\u51FD\u6570\uFF0C\u5728\u56FE\u7247\u9884\u89C8\u5173\u95ED\u524D\u8FDB\u884C\u7279\u5B9A\u64CD\u4F5C\u3002
import { showImagePreview } from 'vant';\n\nconst instance = showImagePreview({\n images: [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n ],\n beforeClose: () => false,\n});\n\nsetTimeout(() => {\n // \u8C03\u7528\u5B9E\u4F8B\u4E0A\u7684 close \u65B9\u6CD5\u624B\u52A8\u5173\u95ED\u56FE\u7247\u9884\u89C8\n instance.close();\n}, 2000);\n
\n\u5982\u679C\u9700\u8981\u5728 ImagePreview \u5185\u5D4C\u5165\u7EC4\u4EF6\u6216\u5176\u4ED6\u81EA\u5B9A\u4E49\u5185\u5BB9\uFF0C\u53EF\u4EE5\u76F4\u63A5\u4F7F\u7528 ImagePreview \u7EC4\u4EF6\uFF0C\u5E76\u4F7F\u7528 index
\u63D2\u69FD\u8FDB\u884C\u5B9A\u5236\u3002\u4F7F\u7528\u524D\u9700\u8981\u901A\u8FC7 app.use
\u7B49\u65B9\u5F0F\u6CE8\u518C\u7EC4\u4EF6\u3002
<van-image-preview v-model:show="show" :images="images" @change="onChange">\n <template v-slot:index>\u7B2C{{ index + 1 }}\u9875</template>\n</van-image-preview>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n const index = ref(0);\n const images = [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n ];\n const onChange = (newIndex) => {\n index.value = newIndex;\n };\n\n return {\n show,\n index,\n images,\n onChange,\n };\n },\n};\n
\n\u5F53\u4EE5\u7EC4\u4EF6\u8C03\u7528\u7684\u65B9\u5F0F\u4F7F\u7528 ImagePreview \u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7 image
\u63D2\u69FD\u6765\u63D2\u5165\u81EA\u5B9A\u4E49\u7684\u5185\u5BB9\uFF0C\u6BD4\u5982\u5C55\u793A\u4E00\u4E2A\u89C6\u9891\u5185\u5BB9\u3002\u5728\u8FD9\u4E2A\u4F8B\u5B50\u4E2D\uFF0C\u4F60\u53EF\u4EE5\u5C06 close-on-click-image
\u5C5E\u6027\u8BBE\u7F6E\u4E3A false
\uFF0C\u8FD9\u6837\u5F53\u4F60\u70B9\u51FB\u89C6\u9891\u65F6\u5C31\u4E0D\u4F1A\u610F\u5916\u5173\u95ED\u9884\u89C8\u4E86\u3002
<van-image-preview\n v-model:show="show"\n :images="images"\n :close-on-click-image="false"\n>\n <template #image="{ src }">\n <video style="width: 100%;" controls>\n <source :src="src" />\n </video>\n </template>\n</van-image-preview>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n const images = [\n 'https://www.w3school.com.cn/i/movie.ogg',\n 'https://www.w3school.com.cn/i/movie.ogg',\n 'https://www.w3school.com.cn/i/movie.ogg',\n ];\n return {\n show,\n images,\n };\n },\n};\n
\nVant \u4E2D\u5BFC\u51FA\u4E86\u4EE5\u4E0B ImagePreview \u76F8\u5173\u7684\u8F85\u52A9\u51FD\u6570\uFF1A
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
showImagePreview | \n\u5C55\u793A\u4E00\u4E2A\u5168\u5C4F\u7684\u56FE\u7247\u9884\u89C8\u7EC4\u4EF6 | \nstring[] | ImagePreviewOptions | \nImagePreview \u5B9E\u4F8B | \n
\u8C03\u7528 showImagePreview
\u65B9\u6CD5\u65F6\uFF0C\u652F\u6301\u4F20\u5165\u4EE5\u4E0B\u9009\u9879\uFF1A
\u53C2\u6570\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
images | \n\u9700\u8981\u9884\u89C8\u7684\u56FE\u7247 URL \u6570\u7EC4 | \nstring[] | \n[] | \n
startPosition | \n\u56FE\u7247\u9884\u89C8\u8D77\u59CB\u4F4D\u7F6E\u7D22\u5F15 | \nnumber | string | \n0 | \n
swipeDuration | \n\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u4E3A ms | \nnumber | string | \n300 | \n
showIndex | \n\u662F\u5426\u663E\u793A\u9875\u7801 | \nboolean | \ntrue | \n
showIndicators | \n\u662F\u5426\u663E\u793A\u8F6E\u64AD\u6307\u793A\u5668 | \nboolean | \nfalse | \n
loop | \n\u662F\u5426\u5F00\u542F\u5FAA\u73AF\u64AD\u653E | \nboolean | \ntrue | \n
doubleScale v4.7.2 | \n\u662F\u5426\u542F\u7528\u53CC\u51FB\u7F29\u653E\u624B\u52BF\uFF0C\u7981\u7528\u540E\uFF0C\u70B9\u51FB\u65F6\u4F1A\u7ACB\u5373\u5173\u95ED\u56FE\u7247\u9884\u89C8 | \nboolean | \ntrue | \n
onClose | \n\u5173\u95ED\u65F6\u7684\u56DE\u8C03\u51FD\u6570 | \nFunction | \n- | \n
onChange | \n\u5207\u6362\u56FE\u7247\u65F6\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u56DE\u8C03\u53C2\u6570\u4E3A\u5F53\u524D\u7D22\u5F15 | \nFunction | \n- | \n
onScale | \n\u7F29\u653E\u56FE\u7247\u65F6\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u56DE\u8C03\u53C2\u6570\u4E3A\u5F53\u524D\u7D22\u5F15\u548C\u5F53\u524D\u7F29\u653E\u503C\u7EC4\u6210\u7684\u5BF9\u8C61 | \nFunction | \n- | \n
beforeClose | \n\u5173\u95ED\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u963B\u6B62\u5173\u95ED\uFF0C\u652F\u6301\u8FD4\u56DE Promise | \n(active: number) => boolean | Promise<boolean> | \n- | \n
closeOnPopstate | \n\u662F\u5426\u5728\u9875\u9762\u56DE\u9000\u65F6\u81EA\u52A8\u5173\u95ED | \nboolean | \ntrue | \n
closeOnClickImage v4.8.3 | \n\u662F\u5426\u5728\u70B9\u51FB\u56FE\u7247\u540E\u5173\u95ED\u56FE\u7247\u9884\u89C8 | \nboolean | \ntrue | \n
closeOnClickOverlay v4.6.4 | \n\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED\u56FE\u7247\u9884\u89C8 | \nboolean | \ntrue | \n
className | \n\u81EA\u5B9A\u4E49\u7C7B\u540D (\u5E94\u7528\u5728\u56FE\u7247\u9884\u89C8\u7684\u5F39\u51FA\u5C42) | \nstring | Array | object | \n- | \n
maxZoom | \n\u624B\u52BF\u7F29\u653E\u65F6\uFF0C\u6700\u5927\u7F29\u653E\u6BD4\u4F8B | \nnumber | string | \n3 | \n
minZoom | \n\u624B\u52BF\u7F29\u653E\u65F6\uFF0C\u6700\u5C0F\u7F29\u653E\u6BD4\u4F8B | \nnumber | string | \n1/3 | \n
closeable | \n\u662F\u5426\u663E\u793A\u5173\u95ED\u56FE\u6807 | \nboolean | \nfalse | \n
closeIcon | \n\u5173\u95ED\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5 | \nstring | \nclear | \n
closeIconPosition | \n\u5173\u95ED\u56FE\u6807\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A top-left bottom-left bottom-right | \nstring | \ntop-right | \n
transition | \n\u52A8\u753B\u7C7B\u540D\uFF0C\u7B49\u4EF7\u4E8E transition \u7684 name \u5C5E\u6027 | \nstring | \nvan-fade | \n
overlayClass | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u7C7B\u540D | \nstring | Array | object | \n- | \n
overlayStyle | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0F | \nobject | \n- | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \n- | \n
\u901A\u8FC7\u7EC4\u4EF6\u8C03\u7528 ImagePreview
\u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B Props\uFF1A
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:show | \n\u662F\u5426\u5C55\u793A\u56FE\u7247\u9884\u89C8 | \nboolean | \nfalse | \n
images | \n\u9700\u8981\u9884\u89C8\u7684\u56FE\u7247 URL \u6570\u7EC4 | \nstring[] | \n[] | \n
start-position | \n\u56FE\u7247\u9884\u89C8\u8D77\u59CB\u4F4D\u7F6E\u7D22\u5F15 | \nnumber | string | \n0 | \n
swipe-duration | \n\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u4E3A ms | \nnumber | string | \n300 | \n
show-index | \n\u662F\u5426\u663E\u793A\u9875\u7801 | \nboolean | \ntrue | \n
show-indicators | \n\u662F\u5426\u663E\u793A\u8F6E\u64AD\u6307\u793A\u5668 | \nboolean | \nfalse | \n
loop | \n\u662F\u5426\u5F00\u542F\u5FAA\u73AF\u64AD\u653E | \nboolean | \ntrue | \n
double-scale v4.7.2 | \n\u662F\u5426\u542F\u7528\u53CC\u51FB\u7F29\u653E\u624B\u52BF\uFF0C\u7981\u7528\u540E\uFF0C\u70B9\u51FB\u65F6\u4F1A\u7ACB\u5373\u5173\u95ED\u56FE\u7247\u9884\u89C8 | \nboolean | \ntrue | \n
before-close | \n\u5173\u95ED\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u963B\u6B62\u5173\u95ED\uFF0C\u652F\u6301\u8FD4\u56DE Promise | \n(active: number) => boolean | Promise<boolean> | \n- | \n
close-on-popstate | \n\u662F\u5426\u5728\u9875\u9762\u56DE\u9000\u65F6\u81EA\u52A8\u5173\u95ED | \nboolean | \ntrue | \n
close-on-click-image v4.8.3 | \n\u662F\u5426\u5728\u70B9\u51FB\u56FE\u7247\u540E\u5173\u95ED\u56FE\u7247\u9884\u89C8 | \nboolean | \ntrue | \n
close-on-click-overlay v4.6.4 | \n\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED\u56FE\u7247\u9884\u89C8 | \nboolean | \ntrue | \n
class-name | \n\u81EA\u5B9A\u4E49\u7C7B\u540D | \nstring | Array | object | \n- | \n
max-zoom | \n\u624B\u52BF\u7F29\u653E\u65F6\uFF0C\u6700\u5927\u7F29\u653E\u6BD4\u4F8B | \nnumber | string | \n3 | \n
min-zoom | \n\u624B\u52BF\u7F29\u653E\u65F6\uFF0C\u6700\u5C0F\u7F29\u653E\u6BD4\u4F8B | \nnumber | string | \n1/3 | \n
closeable | \n\u662F\u5426\u663E\u793A\u5173\u95ED\u56FE\u6807 | \nboolean | \nfalse | \n
close-icon | \n\u5173\u95ED\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5 | \nstring | \nclear | \n
close-icon-position | \n\u5173\u95ED\u56FE\u6807\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A top-left bottom-left bottom-right | \nstring | \ntop-right | \n
transition | \n\u52A8\u753B\u7C7B\u540D\uFF0C\u7B49\u4EF7\u4E8E transition \u7684 name \u5C5E\u6027 | \nstring | \nvan-fade | \n
overlay-class | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u7C7B\u540D | \nstring | Array | object | \n- | \n
overlay-style | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0F | \nobject | \n- | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \n- | \n
\u901A\u8FC7\u7EC4\u4EF6\u8C03\u7528 ImagePreview
\u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B\u4E8B\u4EF6\uFF1A
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
close | \n\u5173\u95ED\u65F6\u89E6\u53D1 | \n{ index: number, url: string } | \n
closed | \n\u5173\u95ED\u4E14\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
change | \n\u5207\u6362\u5F53\u524D\u56FE\u7247\u65F6\u89E6\u53D1 | \nindex: number | \n
scale | \n\u7F29\u653E\u5F53\u524D\u56FE\u7247\u65F6\u89E6\u53D1 | \n{ index: number, scale: number } | \n
long-press | \n\u957F\u6309\u5F53\u524D\u56FE\u7247\u65F6\u89E6\u53D1 | \n{ index: number } | \n
\u901A\u8FC7\u7EC4\u4EF6\u8C03\u7528 ImagePreview
\u65F6\uFF0C\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 ImagePreview \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
resetScale 4.7.4 | \n\u91CD\u7F6E\u5F53\u524D\u56FE\u7247\u7684\u7F29\u653E\u6BD4 | \n- | \n- | \n
swipeTo | \n\u5207\u6362\u5230\u6307\u5B9A\u4F4D\u7F6E | \nindex: number, options?: SwipeToOptions | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n ImagePreviewProps,\n ImagePreviewOptions,\n ImagePreviewInstance,\n ImagePreviewScaleEventParams,\n} from 'vant';\n
\nImagePreviewInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { ImagePreviewInstance } from 'vant';\n\nconst imagePreviewRef = ref<ImagePreviewInstance>();\n\nimagePreviewRef.value?.swipeTo(1);\n
\n\u901A\u8FC7\u7EC4\u4EF6\u8C03\u7528 ImagePreview
\u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B\u63D2\u69FD\uFF1A
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
index | \n\u81EA\u5B9A\u4E49\u9875\u7801\u5185\u5BB9 | \n{ index: \u5F53\u524D\u56FE\u7247\u7684\u7D22\u5F15 } | \n
cover | \n\u81EA\u5B9A\u4E49\u8986\u76D6\u5728\u56FE\u7247\u9884\u89C8\u4E0A\u65B9\u7684\u5185\u5BB9 | \n- | \n
image | \n\u81EA\u5B9A\u4E49\u56FE\u7247\u5185\u5BB9 | \n{ src: \u5F53\u524D\u8D44\u6E90\u5730\u5740 } | \n
\u53C2\u6570\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
url | \n\u5F53\u524D\u56FE\u7247 URL | \nstring | \n
index | \n\u5F53\u524D\u56FE\u7247\u7684\u7D22\u5F15\u503C | \nnumber | \n
\u53C2\u6570\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
index | \n\u5F53\u524D\u56FE\u7247\u7684\u7D22\u5F15\u503C | \nnumber | \n
scale | \n\u5F53\u524D\u56FE\u7247\u7684\u7F29\u653E\u503C | \nnumber | \n
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-image-preview-index-text-color | \nvar(--van-white) | \n- | \n
--van-image-preview-index-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-image-preview-index-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-image-preview-index-text-shadow | \n0 1px 1px var(--van-gray-8) | \n- | \n
--van-image-preview-overlay-background | \nrgba(0, 0, 0, 0.9) | \n- | \n
--van-image-preview-close-icon-size | \n22px | \n- | \n
--van-image-preview-close-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-image-preview-close-icon-margin | \nvar(--van-padding-md) | \n- | \n
--van-image-preview-close-icon-z-index | \n1 | \n- | \n
\u53C2\u89C1\u684C\u9762\u7AEF\u9002\u914D\u3002
\n\u5982\u679C\u5F15\u7528 showImagePreview
\u65B9\u6CD5\u65F6\u51FA\u73B0\u4EE5\u4E0B\u62A5\u9519\uFF0C\u8BF4\u660E\u9879\u76EE\u4E2D\u4F7F\u7528\u4E86 babel-plugin-import
\u63D2\u4EF6\uFF0C\u5BFC\u81F4\u4EE3\u7801\u88AB\u9519\u8BEF\u7F16\u8BD1\u3002
These dependencies were not found:\n\n* vant/es/show-image-preview in ./src/xxx.js\n* vant/es/show-image-preview/style in ./src/xxx.js\n
\nVant \u4ECE 4.0 \u7248\u672C\u5F00\u59CB\u4E0D\u518D\u652F\u6301 babel-plugin-import
\u63D2\u4EF6\uFF0C\u8BF7\u53C2\u8003 \u8FC1\u79FB\u6307\u5357 \u79FB\u9664\u8BE5\u63D2\u4EF6\u3002
\u56FE\u7247\u653E\u5927\u9884\u89C8\uFF0C\u652F\u6301\u7EC4\u4EF6\u8C03\u7528\u548C\u51FD\u6570\u8C03\u7528\u4E24\u79CD\u65B9\u5F0F\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { ImagePreview } from 'vant';\n\nconst app = createApp();\napp.use(ImagePreview);\n
\n\u4E3A\u4E86\u4FBF\u4E8E\u4F7F\u7528 ImagePreview
\uFF0CVant \u63D0\u4F9B\u4E86\u4E00\u7CFB\u5217\u8F85\u52A9\u51FD\u6570\uFF0C\u901A\u8FC7\u8F85\u52A9\u51FD\u6570\u53EF\u4EE5\u5FEB\u901F\u5524\u8D77\u5168\u5C40\u7684\u56FE\u7247\u9884\u89C8\u7EC4\u4EF6\u3002
\u6BD4\u5982\u4F7F\u7528 showImagePreview
\u51FD\u6570\uFF0C\u8C03\u7528\u540E\u4F1A\u76F4\u63A5\u5728\u9875\u9762\u4E2D\u6E32\u67D3\u5BF9\u5E94\u7684\u56FE\u7247\u9884\u89C8\u7EC4\u4EF6\u3002
import { showImagePreview } from 'vant';\n\nshowImagePreview(['https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg']);\n
\n\u5728\u8C03\u7528 showImagePreview
\u65F6\uFF0C\u76F4\u63A5\u4F20\u5165\u56FE\u7247\u6570\u7EC4\uFF0C\u5373\u53EF\u5C55\u793A\u56FE\u7247\u9884\u89C8\u3002
import { showImagePreview } from 'vant';\n\nshowImagePreview([\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n]);\n
\nshowImagePreview
\u652F\u6301\u4F20\u5165\u914D\u7F6E\u5BF9\u8C61\uFF0C\u5E76\u901A\u8FC7 startPosition
\u9009\u9879\u6307\u5B9A\u56FE\u7247\u7684\u521D\u59CB\u4F4D\u7F6E\uFF08\u7D22\u5F15\u503C\uFF09\u3002
import { showImagePreview } from 'vant';\n\nshowImagePreview({\n images: [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n ],\n startPosition: 1,\n});\n
\n\u5F00\u542F closeable
\u9009\u9879\u540E\uFF0C\u4F1A\u5728\u5F39\u51FA\u5C42\u7684\u53F3\u4E0A\u89D2\u663E\u793A\u5173\u95ED\u56FE\u6807\uFF0C\u5E76\u4E14\u53EF\u4EE5\u901A\u8FC7 close-icon
\u5C5E\u6027\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u4F7F\u7528close-icon-position
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u56FE\u6807\u4F4D\u7F6E\u3002
import { showImagePreview } from 'vant';\n\nshowImagePreview({\n images: [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n ],\n closeable: true,\n});\n
\n\u901A\u8FC7 onClose
\u9009\u9879\u76D1\u542C\u56FE\u7247\u9884\u89C8\u7684\u5173\u95ED\u4E8B\u4EF6\u3002
import { showToast, showImagePreview } from 'vant';\n\nshowImagePreview({\n images: [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n ],\n onClose() {\n showToast('\u5173\u95ED');\n },\n});\n
\n\u901A\u8FC7 beforeClose
\u5C5E\u6027\u53EF\u4EE5\u4F20\u5165\u4E00\u4E2A\u56DE\u8C03\u51FD\u6570\uFF0C\u5728\u56FE\u7247\u9884\u89C8\u5173\u95ED\u524D\u8FDB\u884C\u7279\u5B9A\u64CD\u4F5C\u3002
import { showImagePreview } from 'vant';\n\nconst instance = showImagePreview({\n images: [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n ],\n beforeClose: () => false,\n});\n\nsetTimeout(() => {\n // \u8C03\u7528\u5B9E\u4F8B\u4E0A\u7684 close \u65B9\u6CD5\u624B\u52A8\u5173\u95ED\u56FE\u7247\u9884\u89C8\n instance.close();\n}, 2000);\n
\n\u5982\u679C\u9700\u8981\u5728 ImagePreview \u5185\u5D4C\u5165\u7EC4\u4EF6\u6216\u5176\u4ED6\u81EA\u5B9A\u4E49\u5185\u5BB9\uFF0C\u53EF\u4EE5\u76F4\u63A5\u4F7F\u7528 ImagePreview \u7EC4\u4EF6\uFF0C\u5E76\u4F7F\u7528 index
\u63D2\u69FD\u8FDB\u884C\u5B9A\u5236\u3002\u4F7F\u7528\u524D\u9700\u8981\u901A\u8FC7 app.use
\u7B49\u65B9\u5F0F\u6CE8\u518C\u7EC4\u4EF6\u3002
<van-image-preview v-model:show="show" :images="images" @change="onChange">\n <template v-slot:index>\u7B2C{{ index + 1 }}\u9875</template>\n</van-image-preview>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n const index = ref(0);\n const images = [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n ];\n const onChange = (newIndex) => {\n index.value = newIndex;\n };\n\n return {\n show,\n index,\n images,\n onChange,\n };\n },\n};\n
\n\u5F53\u4EE5\u7EC4\u4EF6\u8C03\u7528\u7684\u65B9\u5F0F\u4F7F\u7528 ImagePreview \u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7 image
\u63D2\u69FD\u6765\u63D2\u5165\u81EA\u5B9A\u4E49\u7684\u5185\u5BB9\uFF0C\u6BD4\u5982\u5C55\u793A\u4E00\u4E2A\u89C6\u9891\u5185\u5BB9\u3002
<van-image-preview v-model:show="show" :images="images">\n <template #image="{ src }">\n <video style="width: 100%;" controls>\n <source :src="src" />\n </video>\n </template>\n</van-image-preview>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n const images = [\n 'https://www.w3school.com.cn/i/movie.ogg',\n 'https://www.w3school.com.cn/i/movie.ogg',\n 'https://www.w3school.com.cn/i/movie.ogg',\n ];\n return {\n show,\n images,\n };\n },\n};\n
\nVant \u4E2D\u5BFC\u51FA\u4E86\u4EE5\u4E0B ImagePreview \u76F8\u5173\u7684\u8F85\u52A9\u51FD\u6570\uFF1A
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
showImagePreview | \n\u5C55\u793A\u4E00\u4E2A\u5168\u5C4F\u7684\u56FE\u7247\u9884\u89C8\u7EC4\u4EF6 | \nstring[] | ImagePreviewOptions | \nImagePreview \u5B9E\u4F8B | \n
\u8C03\u7528 showImagePreview
\u65B9\u6CD5\u65F6\uFF0C\u652F\u6301\u4F20\u5165\u4EE5\u4E0B\u9009\u9879\uFF1A
\u53C2\u6570\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
images | \n\u9700\u8981\u9884\u89C8\u7684\u56FE\u7247 URL \u6570\u7EC4 | \nstring[] | \n[] | \n
startPosition | \n\u56FE\u7247\u9884\u89C8\u8D77\u59CB\u4F4D\u7F6E\u7D22\u5F15 | \nnumber | string | \n0 | \n
swipeDuration | \n\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u4E3A ms | \nnumber | string | \n300 | \n
showIndex | \n\u662F\u5426\u663E\u793A\u9875\u7801 | \nboolean | \ntrue | \n
showIndicators | \n\u662F\u5426\u663E\u793A\u8F6E\u64AD\u6307\u793A\u5668 | \nboolean | \nfalse | \n
loop | \n\u662F\u5426\u5F00\u542F\u5FAA\u73AF\u64AD\u653E | \nboolean | \ntrue | \n
doubleScale v4.7.2 | \n\u662F\u5426\u542F\u7528\u53CC\u51FB\u7F29\u653E\u624B\u52BF\uFF0C\u7981\u7528\u540E\uFF0C\u70B9\u51FB\u65F6\u4F1A\u7ACB\u5373\u5173\u95ED\u56FE\u7247\u9884\u89C8 | \nboolean | \ntrue | \n
onClose | \n\u5173\u95ED\u65F6\u7684\u56DE\u8C03\u51FD\u6570 | \nFunction | \n- | \n
onChange | \n\u5207\u6362\u56FE\u7247\u65F6\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u56DE\u8C03\u53C2\u6570\u4E3A\u5F53\u524D\u7D22\u5F15 | \nFunction | \n- | \n
onScale | \n\u7F29\u653E\u56FE\u7247\u65F6\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u56DE\u8C03\u53C2\u6570\u4E3A\u5F53\u524D\u7D22\u5F15\u548C\u5F53\u524D\u7F29\u653E\u503C\u7EC4\u6210\u7684\u5BF9\u8C61 | \nFunction | \n- | \n
beforeClose | \n\u5173\u95ED\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u963B\u6B62\u5173\u95ED\uFF0C\u652F\u6301\u8FD4\u56DE Promise | \n(active: number) => boolean | Promise<boolean> | \n- | \n
closeOnPopstate | \n\u662F\u5426\u5728\u9875\u9762\u56DE\u9000\u65F6\u81EA\u52A8\u5173\u95ED | \nboolean | \ntrue | \n
closeOnClickOverlay v4.6.4 | \n\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED\u56FE\u7247\u9884\u89C8 | \nboolean | \ntrue | \n
className | \n\u81EA\u5B9A\u4E49\u7C7B\u540D (\u5E94\u7528\u5728\u56FE\u7247\u9884\u89C8\u7684\u5F39\u51FA\u5C42) | \nstring | Array | object | \n- | \n
maxZoom | \n\u624B\u52BF\u7F29\u653E\u65F6\uFF0C\u6700\u5927\u7F29\u653E\u6BD4\u4F8B | \nnumber | string | \n3 | \n
minZoom | \n\u624B\u52BF\u7F29\u653E\u65F6\uFF0C\u6700\u5C0F\u7F29\u653E\u6BD4\u4F8B | \nnumber | string | \n1/3 | \n
closeable | \n\u662F\u5426\u663E\u793A\u5173\u95ED\u56FE\u6807 | \nboolean | \nfalse | \n
closeIcon | \n\u5173\u95ED\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5 | \nstring | \nclear | \n
closeIconPosition | \n\u5173\u95ED\u56FE\u6807\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A top-left bottom-left bottom-right | \nstring | \ntop-right | \n
transition | \n\u52A8\u753B\u7C7B\u540D\uFF0C\u7B49\u4EF7\u4E8E transition \u7684 name \u5C5E\u6027 | \nstring | \nvan-fade | \n
overlayClass | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u7C7B\u540D | \nstring | Array | object | \n- | \n
overlayStyle | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0F | \nobject | \n- | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \n- | \n
\u901A\u8FC7\u7EC4\u4EF6\u8C03\u7528 ImagePreview
\u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B Props\uFF1A
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:show | \n\u662F\u5426\u5C55\u793A\u56FE\u7247\u9884\u89C8 | \nboolean | \nfalse | \n
images | \n\u9700\u8981\u9884\u89C8\u7684\u56FE\u7247 URL \u6570\u7EC4 | \nstring[] | \n[] | \n
start-position | \n\u56FE\u7247\u9884\u89C8\u8D77\u59CB\u4F4D\u7F6E\u7D22\u5F15 | \nnumber | string | \n0 | \n
swipe-duration | \n\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u4E3A ms | \nnumber | string | \n300 | \n
show-index | \n\u662F\u5426\u663E\u793A\u9875\u7801 | \nboolean | \ntrue | \n
show-indicators | \n\u662F\u5426\u663E\u793A\u8F6E\u64AD\u6307\u793A\u5668 | \nboolean | \nfalse | \n
loop | \n\u662F\u5426\u5F00\u542F\u5FAA\u73AF\u64AD\u653E | \nboolean | \ntrue | \n
double-scale v4.7.2 | \n\u662F\u5426\u542F\u7528\u53CC\u51FB\u7F29\u653E\u624B\u52BF\uFF0C\u7981\u7528\u540E\uFF0C\u70B9\u51FB\u65F6\u4F1A\u7ACB\u5373\u5173\u95ED\u56FE\u7247\u9884\u89C8 | \nboolean | \ntrue | \n
before-close | \n\u5173\u95ED\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u963B\u6B62\u5173\u95ED\uFF0C\u652F\u6301\u8FD4\u56DE Promise | \n(active: number) => boolean | Promise<boolean> | \n- | \n
close-on-popstate | \n\u662F\u5426\u5728\u9875\u9762\u56DE\u9000\u65F6\u81EA\u52A8\u5173\u95ED | \nboolean | \ntrue | \n
close-on-click-overlay v4.6.4 | \n\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED\u56FE\u7247\u9884\u89C8 | \nboolean | \ntrue | \n
class-name | \n\u81EA\u5B9A\u4E49\u7C7B\u540D | \nstring | Array | object | \n- | \n
max-zoom | \n\u624B\u52BF\u7F29\u653E\u65F6\uFF0C\u6700\u5927\u7F29\u653E\u6BD4\u4F8B | \nnumber | string | \n3 | \n
min-zoom | \n\u624B\u52BF\u7F29\u653E\u65F6\uFF0C\u6700\u5C0F\u7F29\u653E\u6BD4\u4F8B | \nnumber | string | \n1/3 | \n
closeable | \n\u662F\u5426\u663E\u793A\u5173\u95ED\u56FE\u6807 | \nboolean | \nfalse | \n
close-icon | \n\u5173\u95ED\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5 | \nstring | \nclear | \n
close-icon-position | \n\u5173\u95ED\u56FE\u6807\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A top-left bottom-left bottom-right | \nstring | \ntop-right | \n
transition | \n\u52A8\u753B\u7C7B\u540D\uFF0C\u7B49\u4EF7\u4E8E transition \u7684 name \u5C5E\u6027 | \nstring | \nvan-fade | \n
overlay-class | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u7C7B\u540D | \nstring | Array | object | \n- | \n
overlay-style | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0F | \nobject | \n- | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \n- | \n
\u901A\u8FC7\u7EC4\u4EF6\u8C03\u7528 ImagePreview
\u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B\u4E8B\u4EF6\uFF1A
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
close | \n\u5173\u95ED\u65F6\u89E6\u53D1 | \n{ index: number, url: string } | \n
closed | \n\u5173\u95ED\u4E14\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
change | \n\u5207\u6362\u5F53\u524D\u56FE\u7247\u65F6\u89E6\u53D1 | \nindex: number | \n
scale | \n\u7F29\u653E\u5F53\u524D\u56FE\u7247\u65F6\u89E6\u53D1 | \n{ index: number, scale: number } | \n
long-press | \n\u957F\u6309\u5F53\u524D\u56FE\u7247\u65F6\u89E6\u53D1 | \n{ index: number } | \n
\u901A\u8FC7\u7EC4\u4EF6\u8C03\u7528 ImagePreview
\u65F6\uFF0C\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 ImagePreview \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
resetScale 4.7.4 | \n\u91CD\u7F6E\u5F53\u524D\u56FE\u7247\u7684\u7F29\u653E\u6BD4 | \n- | \n- | \n
swipeTo | \n\u5207\u6362\u5230\u6307\u5B9A\u4F4D\u7F6E | \nindex: number, options?: SwipeToOptions | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n ImagePreviewProps,\n ImagePreviewOptions,\n ImagePreviewInstance,\n ImagePreviewScaleEventParams,\n} from 'vant';\n
\nImagePreviewInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { ImagePreviewInstance } from 'vant';\n\nconst imagePreviewRef = ref<ImagePreviewInstance>();\n\nimagePreviewRef.value?.swipeTo(1);\n
\n\u901A\u8FC7\u7EC4\u4EF6\u8C03\u7528 ImagePreview
\u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B\u63D2\u69FD\uFF1A
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
index | \n\u81EA\u5B9A\u4E49\u9875\u7801\u5185\u5BB9 | \n{ index: \u5F53\u524D\u56FE\u7247\u7684\u7D22\u5F15 } | \n
cover | \n\u81EA\u5B9A\u4E49\u8986\u76D6\u5728\u56FE\u7247\u9884\u89C8\u4E0A\u65B9\u7684\u5185\u5BB9 | \n- | \n
image | \n\u81EA\u5B9A\u4E49\u56FE\u7247\u5185\u5BB9 | \n{ src: \u5F53\u524D\u8D44\u6E90\u5730\u5740 } | \n
\u53C2\u6570\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
url | \n\u5F53\u524D\u56FE\u7247 URL | \nstring | \n
index | \n\u5F53\u524D\u56FE\u7247\u7684\u7D22\u5F15\u503C | \nnumber | \n
\u53C2\u6570\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
index | \n\u5F53\u524D\u56FE\u7247\u7684\u7D22\u5F15\u503C | \nnumber | \n
scale | \n\u5F53\u524D\u56FE\u7247\u7684\u7F29\u653E\u503C | \nnumber | \n
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-image-preview-index-text-color | \nvar(--van-white) | \n- | \n
--van-image-preview-index-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-image-preview-index-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-image-preview-index-text-shadow | \n0 1px 1px var(--van-gray-8) | \n- | \n
--van-image-preview-overlay-background | \nrgba(0, 0, 0, 0.9) | \n- | \n
--van-image-preview-close-icon-size | \n22px | \n- | \n
--van-image-preview-close-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-image-preview-close-icon-margin | \nvar(--van-padding-md) | \n- | \n
--van-image-preview-close-icon-z-index | \n1 | \n- | \n
\u53C2\u89C1\u684C\u9762\u7AEF\u9002\u914D\u3002
\n\u5982\u679C\u5F15\u7528 showImagePreview
\u65B9\u6CD5\u65F6\u51FA\u73B0\u4EE5\u4E0B\u62A5\u9519\uFF0C\u8BF4\u660E\u9879\u76EE\u4E2D\u4F7F\u7528\u4E86 babel-plugin-import
\u63D2\u4EF6\uFF0C\u5BFC\u81F4\u4EE3\u7801\u88AB\u9519\u8BEF\u7F16\u8BD1\u3002
These dependencies were not found:\n\n* vant/es/show-image-preview in ./src/xxx.js\n* vant/es/show-image-preview/style in ./src/xxx.js\n
\nVant \u4ECE 4.0 \u7248\u672C\u5F00\u59CB\u4E0D\u518D\u652F\u6301 babel-plugin-import
\u63D2\u4EF6\uFF0C\u8BF7\u53C2\u8003 \u8FC1\u79FB\u6307\u5357 \u79FB\u9664\u8BE5\u63D2\u4EF6\u3002
The cascader component is used for the selection of multi-level data. The typical scene is the selection of provinces and cities.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Cascader } from 'vant';\n\nconst app = createApp();\napp.use(Cascader);\n
\n<van-field\n v-model="fieldValue"\n is-link\n readonly\n label="Area"\n placeholder="Select Area"\n @click="show = true"\n/>\n<van-popup v-model="show" round position="bottom">\n <van-cascader\n v-model="cascaderValue"\n title="Select Area"\n :options="options"\n @close="show = false"\n @finish="onFinish"\n />\n</van-popup>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n const fieldValue = ref('');\n const cascaderValue = ref('');\n const options = [\n {\n text: 'Zhejiang',\n value: '330000',\n children: [{ text: 'Hangzhou', value: '330100' }],\n },\n {\n text: 'Jiangsu',\n value: '320000',\n children: [{ text: 'Nanjing', value: '320100' }],\n },\n ];\n const onFinish = ({ selectedOptions }) => {\n show.value = false;\n fieldValue.value = selectedOptions.map((option) => option.text).join('/');\n };\n\n return {\n show,\n options,\n onFinish,\n fieldValue,\n cascaderValue,\n };\n },\n};\n
\n<van-cascader\n v-model="cascaderValue"\n title="Select Area"\n :options="options"\n active-color="#ee0a24"\n @close="show = false"\n @finish="onFinish"\n/>\n
\n<van-field\n v-model="fieldValue"\n is-link\n readonly\n label="Area"\n placeholder="Select Area"\n @click="show = true"\n/>\n<van-popup v-model="show" round position="bottom">\n <van-cascader\n v-model="cascaderValue"\n title="Select Area"\n :options="options"\n @close="show = false"\n @change="onChange"\n @finish="onFinish"\n />\n</van-popup>\n
\nimport { ref } from 'vue';\nimport { closeToast, showLoadingToast } from 'vant';\n\nexport default {\n setup() {\n const show = ref(false);\n const fieldValue = ref('');\n const cascaderValue = ref('');\n const options = ref([\n {\n text: 'Zhejiang',\n value: '330000',\n children: [],\n },\n ]);\n const onChange = ({ value }) => {\n if (\n value === options.value[0].value &&\n options.value[0].children.length === 0\n ) {\n showLoadingToast('Loading...');\n // mock data request\n setTimeout(() => {\n options.value[0].children = [\n { text: 'Hangzhou', value: '330100' },\n { text: 'Ningbo', value: '330200' },\n ];\n closeToast();\n }, 1000);\n }\n };\n const onFinish = ({ selectedOptions }) => {\n show.value = false;\n fieldValue.value = selectedOptions.map((option) => option.text).join('/');\n };\n\n return {\n show,\n options,\n onFinish,\n fieldValue,\n cascaderValue,\n };\n },\n};\n
\n<van-cascader\n v-model="code"\n title="Select Area"\n :options="options"\n :field-names="fieldNames"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const code = ref('');\n const fieldNames = {\n text: 'name',\n value: 'code',\n children: 'items',\n };\n const options = [\n {\n name: 'Zhejiang',\n code: '330000',\n items: [{ name: 'Hangzhou', code: '330100' }],\n },\n {\n name: 'Jiangsu',\n code: '320000',\n items: [{ name: 'Nanjing', code: '320100' }],\n },\n ];\n\n return {\n code,\n options,\n fieldNames,\n };\n },\n};\n
\n<van-cascader v-model="code" title="Select Area" :options="options">\n <template #options-top="{ tabIndex }">\n <div class="current-level">Current level is {{ tabIndex + 1 }}</div>\n </template>\n</van-cascader>\n\n<style>\n .current-level {\n font-size: 14px;\n padding: 16px 16px 0;\n color: var(--van-gray-6);\n }\n</style>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const code = ref('');\n const options = [\n {\n name: 'Zhejiang',\n code: '330000',\n items: [{ name: 'Hangzhou', code: '330100' }],\n },\n {\n name: 'Jiangsu',\n code: '320000',\n items: [{ name: 'Nanjing', code: '320100' }],\n },\n ];\n\n return {\n code,\n options,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nValue of selected option | \nstring | number | \n- | \n
title | \nTitle | \nstring | \n- | \n
options | \nOptions | \nCascaderOption[] | \n[] | \n
placeholder | \nPlaceholder of unselected tab | \nstring | \nSelect | \n
active-color | \nActive color | \nstring | \n#1989fa | \n
swipeable | \nWhether to enable gestures to slide left and right | \nboolean | \ntrue | \n
closeable | \nWhether to show close icon | \nboolean | \ntrue | \n
show-header | \nWhether to show header | \nboolean | \ntrue | \n
close-icon | \nClose icon name | \nstring | \ncross | \n
field-names | \nCustom the fields of options | \nCascaderFieldNames | \n{ text: \'text\', value: \'value\', children: \'children\' } | \n
Key | \nDescription | \nType | \n
---|---|---|
text | \nOption text | \nstring | \n
value | \nOption value | \nstring | number | \n
color | \nText color | \nstring | \n
children | \nCascade children | \nCascaderOption[] | \n
disabled | \nWhether to disable option | \nboolean | \n
className | \nclassName for the option | \nstring | Array | object | \n
Event | \nDescription | \nArguments | \n
---|---|---|
change | \nEmitted when active option changed | \n{ value: string | number, selectedOptions: CascaderOption[], tabIndex: number } | \n
finish | \nEmitted when all options is selected | \n{ value: string | number, selectedOptions: CascaderOption[], tabIndex: number } | \n
close | \nEmitted when the close icon is clicked | \n- | \n
click-tab | \nEmitted when a tab is clicked | \nactiveTab: number, title: string | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
title | \nCustom title | \n- | \n
option | \nCustom option text | \n{ option: CascaderOption, selected: boolean } | \n
options-top | \nCustom the content above the options | \n{ tabIndex: number } | \n
options-bottom | \nCustom the content below the options | \n{ tabIndex: number } | \n
The component exports the following type definitions:
\nimport type { CascaderProps, CascaderOption, CascaderFieldNames } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-cascader-header-height | \n48px | \n- | \n
--van-cascader-header-padding | \n0 var(--van-padding-md) | \n- | \n
--van-cascader-title-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-cascader-title-line-height | \n20px | \n- | \n
--van-cascader-close-icon-size | \n22px | \n- | \n
--van-cascader-close-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-cascader-selected-icon-size | \n18px | \n- | \n
--van-cascader-tabs-height | \n48px | \n- | \n
--van-cascader-active-color | \nvar(--van-danger-color) | \n- | \n
--van-cascader-options-height | \n384px | \n- | \n
--van-cascader-tab-color | \nvar(--van-text-color) | \n- | \n
--van-cascader-unselected-tab-color | \nvar(--van-text-color-2) | \n- | \n
The cascader component is used for the selection of multi-level data. The typical scene is the selection of provinces and cities.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Cascader } from 'vant';\n\nconst app = createApp();\napp.use(Cascader);\n
\n<van-field\n v-model="fieldValue"\n is-link\n readonly\n label="Area"\n placeholder="Select Area"\n @click="show = true"\n/>\n<van-popup v-model="show" round position="bottom">\n <van-cascader\n v-model="cascaderValue"\n title="Select Area"\n :options="options"\n @close="show = false"\n @finish="onFinish"\n />\n</van-popup>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n const fieldValue = ref('');\n const cascaderValue = ref('');\n const options = [\n {\n text: 'Zhejiang',\n value: '330000',\n children: [{ text: 'Hangzhou', value: '330100' }],\n },\n {\n text: 'Jiangsu',\n value: '320000',\n children: [{ text: 'Nanjing', value: '320100' }],\n },\n ];\n const onFinish = ({ selectedOptions }) => {\n show.value = false;\n fieldValue.value = selectedOptions.map((option) => option.text).join('/');\n };\n\n return {\n show,\n options,\n onFinish,\n fieldValue,\n cascaderValue,\n };\n },\n};\n
\n<van-cascader\n v-model="cascaderValue"\n title="Select Area"\n :options="options"\n active-color="#ee0a24"\n @close="show = false"\n @finish="onFinish"\n/>\n
\n<van-field\n v-model="fieldValue"\n is-link\n readonly\n label="Area"\n placeholder="Select Area"\n @click="show = true"\n/>\n<van-popup v-model="show" round position="bottom">\n <van-cascader\n v-model="cascaderValue"\n title="Select Area"\n :options="options"\n @close="show = false"\n @change="onChange"\n @finish="onFinish"\n />\n</van-popup>\n
\nimport { ref } from 'vue';\nimport { closeToast, showLoadingToast } from 'vant';\n\nexport default {\n setup() {\n const show = ref(false);\n const fieldValue = ref('');\n const cascaderValue = ref('');\n const options = ref([\n {\n text: 'Zhejiang',\n value: '330000',\n children: [],\n },\n ]);\n const onChange = ({ value }) => {\n if (\n value === options.value[0].value &&\n options.value[0].children.length === 0\n ) {\n showLoadingToast('Loading...');\n // mock data request\n setTimeout(() => {\n options.value[0].children = [\n { text: 'Hangzhou', value: '330100' },\n { text: 'Ningbo', value: '330200' },\n ];\n closeToast();\n }, 1000);\n }\n };\n const onFinish = ({ selectedOptions }) => {\n show.value = false;\n fieldValue.value = selectedOptions.map((option) => option.text).join('/');\n };\n\n return {\n show,\n options,\n onFinish,\n fieldValue,\n cascaderValue,\n };\n },\n};\n
\n<van-cascader\n v-model="code"\n title="Select Area"\n :options="options"\n :field-names="fieldNames"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const code = ref('');\n const fieldNames = {\n text: 'name',\n value: 'code',\n children: 'items',\n };\n const options = [\n {\n name: 'Zhejiang',\n code: '330000',\n items: [{ name: 'Hangzhou', code: '330100' }],\n },\n {\n name: 'Jiangsu',\n code: '320000',\n items: [{ name: 'Nanjing', code: '320100' }],\n },\n ];\n\n return {\n code,\n options,\n fieldNames,\n };\n },\n};\n
\n<van-cascader v-model="code" title="Select Area" :options="options">\n <template #options-top="{ tabIndex }">\n <div class="current-level">Current level is {{ tabIndex + 1 }}</div>\n </template>\n</van-cascader>\n\n<style>\n .current-level {\n font-size: 14px;\n padding: 16px 16px 0;\n color: var(--van-gray-6);\n }\n</style>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const code = ref('');\n const options = [\n {\n name: 'Zhejiang',\n code: '330000',\n items: [{ name: 'Hangzhou', code: '330100' }],\n },\n {\n name: 'Jiangsu',\n code: '320000',\n items: [{ name: 'Nanjing', code: '320100' }],\n },\n ];\n\n return {\n code,\n options,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nValue of selected option | \nstring | number | \n- | \n
title | \nTitle | \nstring | \n- | \n
options | \nOptions | \nCascaderOption[] | \n[] | \n
placeholder | \nPlaceholder of unselected tab | \nstring | \nSelect | \n
active-color | \nActive color | \nstring | \n#1989fa | \n
swipeable | \nWhether to enable gestures to slide left and right | \nboolean | \ntrue | \n
closeable | \nWhether to show close icon | \nboolean | \ntrue | \n
show-header | \nWhether to show header | \nboolean | \ntrue | \n
close-icon | \nClose icon name | \nstring | \ncross | \n
field-names | \nCustom the fields of options | \nCascaderFieldNames | \n{ text: \'text\', value: \'value\', children: \'children\' } | \n
Key | \nDescription | \nType | \n
---|---|---|
text | \nOption text | \nstring | \n
value | \nOption value | \nstring | number | \n
color | \nText color | \nstring | \n
children | \nCascade children | \nCascaderOption[] | \n
disabled | \nWhether to disable option | \nboolean | \n
className | \nclassName for the option | \nstring | Array | object | \n
Event | \nDescription | \nArguments | \n
---|---|---|
change | \nEmitted when active option changed | \n{ value: string | number, selectedOptions: CascaderOption[], tabIndex: number } | \n
finish | \nEmitted when all options is selected | \n{ value: string | number, selectedOptions: CascaderOption[], tabIndex: number } | \n
close | \nEmitted when the close icon is clicked | \n- | \n
click-tab | \nEmitted when a tab is clicked | \nactiveTab: number, title: string | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
title | \nCustom title | \n- | \n
option | \nCustom option text | \n{ option: CascaderOption, selected: boolean } | \n
options-top | \nCustom the content above the options | \n{ tabIndex: number } | \n
options-bottom | \nCustom the content below the options | \n{ tabIndex: number } | \n
The component exports the following type definitions:
\nimport type { CascaderProps, CascaderOption, CascaderFieldNames } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-cascader-header-height | \n48px | \n- | \n
--van-cascader-header-padding | \n0 var(--van-padding-md) | \n- | \n
--van-cascader-title-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-cascader-title-line-height | \n20px | \n- | \n
--van-cascader-close-icon-size | \n22px | \n- | \n
--van-cascader-close-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-cascader-selected-icon-size | \n18px | \n- | \n
--van-cascader-tabs-height | \n48px | \n- | \n
--van-cascader-active-color | \nvar(--van-danger-color) | \n- | \n
--van-cascader-options-height | \n384px | \n- | \n
--van-cascader-tab-color | \nvar(--van-text-color) | \n- | \n
--van-cascader-unselected-tab-color | \nvar(--van-text-color-2) | \n- | \n
\u65F6\u95F4\u9009\u62E9\u5668\uFF0C\u901A\u5E38\u4E0E\u5F39\u51FA\u5C42\u7EC4\u4EF6\u914D\u5408\u4F7F\u7528\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { TimePicker } from 'vant';\n\nconst app = createApp();\napp.use(TimePicker);\n
\n\u901A\u8FC7 v-model
\u7ED1\u5B9A\u5F53\u524D\u9009\u4E2D\u7684\u65F6\u95F4\u3002
<van-time-picker v-model="currentTime" title="\u9009\u62E9\u65F6\u95F4" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '00']);\n return { currentTime };\n },\n};\n
\n\u901A\u8FC7 columns-type
\u5C5E\u6027\u53EF\u4EE5\u63A7\u5236\u9009\u9879\u7684\u7C7B\u578B\uFF0C\u652F\u6301\u4EE5\u4EFB\u610F\u987A\u5E8F\u5BF9 hour
\u3001minute
\u548C second
\u8FDB\u884C\u6392\u5217\u7EC4\u5408\u3002
\u6BD4\u5982\uFF1A
\n[\'hour\']
\u6765\u5355\u72EC\u9009\u62E9\u5C0F\u65F6\u3002[\'minute\']
\u6765\u5355\u72EC\u9009\u62E9\u5206\u949F\u3002[\'minute\', \'second\']
\u6765\u9009\u62E9\u5206\u949F\u548C\u79D2\u3002[\'hour\', \'minute\', \'second\']
\u6765\u9009\u62E9\u5C0F\u65F6\u3001\u5206\u949F\u548C\u79D2\u3002<van-time-picker\n v-model="currentTime"\n title="\u9009\u62E9\u65F6\u95F4"\n :columns-type="columnsType"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '00', '00']);\n const columnsType = ['hour', 'minute', 'second'];\n return {\n currentTime,\n columnsType,\n };\n },\n};\n
\n\u4F60\u53EF\u4EE5\u4F7F\u7528 min-hour
\u548C max-hour
\u7B49\u5C5E\u6027\u6765\u9650\u5236\u5C0F\u65F6\uFF08hour\uFF09\u8303\u56F4\u3001\u5206\u949F\uFF08minute\uFF09\u8303\u56F4\u548C\u79D2\uFF08second\uFF09\u8303\u56F4\u3002
\u6BD4\u5982\u4EE5\u4E0B\u793A\u4F8B\uFF0C\u7528\u6237\u53EF\u4EE5\u9009\u62E9\u7684\u5C0F\u65F6\u662F 10 ~ 20
\uFF0C\u5206\u949F\u662F 30 ~ 40
\u3002
<van-time-picker\n v-model="currentTime"\n title="\u9009\u62E9\u65F6\u95F4"\n :min-hour="10"\n :max-hour="20"\n :min-minute="30"\n :max-minute="40"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '35']);\n return { currentTime };\n },\n};\n
\n\u4F60\u53EF\u4EE5\u4F7F\u7528 min-time
\u548C max-time
\u5C5E\u6027\u6765\u9650\u5236\u6574\u4F53\u65F6\u95F4\u8303\u56F4\uFF0C\u7EA6\u5B9A\u683C\u5F0F 10:00:00
\u3002
min-time
\u540E\uFF0Cmin-hour
\u3001min-minute
\u3001min-second
\u5C5E\u6027\u5C06\u4E0D\u4F1A\u751F\u6548\u3002max-time
\u540E\uFF0Cmax-hour
\u3001max-minute
\u3001max-second
\u5C5E\u6027\u5C06\u4E0D\u4F1A\u751F\u6548\u3002\u6BD4\u5982\u4EE5\u4E0B\u793A\u4F8B\uFF0C\u7528\u6237\u53EF\u4EE5\u9009\u62E9\u4ECE 09:40:10
\u5230 20:20:50
\u7684\u4EFB\u610F\u65F6\u95F4\u3002
<van-time-picker\n v-model="currentTime"\n title="\u9009\u62E9\u65F6\u95F4"\n :columns-type="['hour', 'minute', 'second']"\n min-time="09:40:10"\n max-time="20:20:50"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '00', '00']);\n return { currentTime };\n },\n};\n
\n\u901A\u8FC7\u4F20\u5165 formatter
\u51FD\u6570\uFF0C\u53EF\u4EE5\u5BF9\u9009\u9879\u7684\u6587\u5B57\u8FDB\u884C\u683C\u5F0F\u5316\u3002
<van-time-picker\n v-model="currentTime"\n title="\u9009\u62E9\u65F6\u95F4"\n :formatter="formatter"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '00']);\n const formatter = (type, option) => {\n if (type === 'hour') {\n option.text += '\u65F6';\n }\n if (type === 'minute') {\n option.text += '\u5206';\n }\n return option;\n };\n\n return {\n formatter,\n currentTime,\n };\n },\n};\n
\n\u901A\u8FC7\u4F20\u5165 filter
\u51FD\u6570\uFF0C\u53EF\u4EE5\u5BF9\u9009\u9879\u6570\u7EC4\u8FDB\u884C\u8FC7\u6EE4\uFF0C\u5254\u9664\u4E0D\u9700\u8981\u7684\u65F6\u95F4\uFF0C\u5B9E\u73B0\u81EA\u5B9A\u4E49\u65F6\u95F4\u95F4\u9694\u3002
<van-time-picker v-model="currentTime" title="\u9009\u62E9\u65F6\u95F4" :filter="filter" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '00']);\n const filter = (type, options) => {\n if (type === 'minute') {\n return options.filter((option) => Number(option.value) % 10 === 0);\n }\n return options;\n };\n\n return {\n filter,\n currentTime,\n };\n },\n};\n
\nfilter
\u51FD\u6570\u7684\u7B2C\u4E09\u4E2A\u53C2\u6570\u80FD\u83B7\u53D6\u5230\u5F53\u524D\u9009\u62E9\u7684\u65F6\u95F4\uFF0C\u8FD9\u5728\u4F7F\u7528\u975E\u53D7\u63A7\u6A21\u5F0F\u65F6\uFF0C\u53EF\u4EE5\u66F4\u7075\u6D3B\u5730\u8FC7\u6EE4\u6389\u4E0D\u9700\u8981\u7684\u65F6\u95F4\u3002
<van-time-picker title="\u9009\u62E9\u65F6\u95F4" :filter="filter" />\n
\nexport default {\n setup() {\n const filter = (type, options, values) => {\n const hour = +values[0];\n\n if (type === 'hour') {\n return options.filter(\n (option) => Number(option.value) >= 8 && Number(option.value) <= 18,\n );\n }\n\n if (type === 'minute') {\n options = options.filter((option) => Number(option.value) % 10 === 0);\n\n if (hour === 8) {\n return options.filter((option) => Number(option.value) >= 40);\n }\n\n if (hour === 18) {\n return options.filter((option) => Number(option.value) <= 20);\n }\n }\n\n return options;\n };\n\n return {\n filter,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u9009\u4E2D\u7684\u65F6\u95F4 | \nstring[] | \n- | \n
columns-type | \n\u9009\u9879\u7C7B\u578B\uFF0C\u7531 hour \u3001minute \u548C second \u7EC4\u6210\u7684\u6570\u7EC4 | \nstring[] | \n[\'hour\', \'minute\'] | \n
min-hour | \n\u53EF\u9009\u7684\u6700\u5C0F\u5C0F\u65F6 | \nnumber | string | \n0 | \n
max-hour | \n\u53EF\u9009\u7684\u6700\u5927\u5C0F\u65F6 | \nnumber | string | \n23 | \n
min-minute | \n\u53EF\u9009\u7684\u6700\u5C0F\u5206\u949F | \nnumber | string | \n0 | \n
max-minute | \n\u53EF\u9009\u7684\u6700\u5927\u5206\u949F | \nnumber | string | \n59 | \n
min-second | \n\u53EF\u9009\u7684\u6700\u5C0F\u79D2\u6570 | \nnumber | string | \n0 | \n
max-second | \n\u53EF\u9009\u7684\u6700\u5927\u79D2\u6570 | \nnumber | string | \n59 | \n
min-time v4.5.0 | \n\u53EF\u9009\u7684\u6700\u5C0F\u65F6\u95F4\uFF0C\u683C\u5F0F\u53C2\u8003 07:40:00 \uFF0C\u4F7F\u7528\u65F6 min-hour min-minute min-second \u4E0D\u4F1A\u751F\u6548 | \nstring | \n- | \n
max-time v4.5.0 | \n\u53EF\u9009\u7684\u6700\u5927\u65F6\u95F4\uFF0C\u683C\u5F0F\u53C2\u8003 10:20:00 \uFF0C\u4F7F\u7528\u65F6 max-hour max-minute max-second \u4E0D\u4F1A\u751F\u6548 | \nstring | \n- | \n
title | \n\u9876\u90E8\u680F\u6807\u9898 | \nstring | \n\'\' | \n
confirm-button-text | \n\u786E\u8BA4\u6309\u94AE\u6587\u5B57 | \nstring | \n\u786E\u8BA4 | \n
cancel-button-text | \n\u53D6\u6D88\u6309\u94AE\u6587\u5B57 | \nstring | \n\u53D6\u6D88 | \n
show-toolbar | \n\u662F\u5426\u663E\u793A\u9876\u90E8\u680F | \nboolean | \ntrue | \n
loading | \n\u662F\u5426\u663E\u793A\u52A0\u8F7D\u72B6\u6001 | \nboolean | \nfalse | \n
readonly | \n\u662F\u5426\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u53EA\u8BFB\u72B6\u6001\u4E0B\u65E0\u6CD5\u5207\u6362\u9009\u9879 | \nboolean | \nfalse | \n
filter | \n\u9009\u9879\u8FC7\u6EE4\u51FD\u6570 | \n(type: string, options: PickerOption[], values: string[]) => PickerOption[] | \n- | \n
formatter | \n\u9009\u9879\u683C\u5F0F\u5316\u51FD\u6570 | \n(type: string, option: PickerOption) => PickerOption | \n- | \n
option-height | \n\u9009\u9879\u9AD8\u5EA6\uFF0C\u652F\u6301 px vw vh rem \u5355\u4F4D\uFF0C\u9ED8\u8BA4 px | \nnumber | string | \n44 | \n
visible-option-num | \n\u53EF\u89C1\u7684\u9009\u9879\u4E2A\u6570 | \nnumber | string | \n6 | \n
swipe-duration | \n\u5FEB\u901F\u6ED1\u52A8\u65F6\u60EF\u6027\u6EDA\u52A8\u7684\u65F6\u957F\uFF0C\u5355\u4F4D ms | \nnumber | string | \n1000 | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
confirm | \n\u70B9\u51FB\u5B8C\u6210\u6309\u94AE\u65F6\u89E6\u53D1 | \n{ selectedValues, selectedOptions } | \n
cancel | \n\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1 | \n{ selectedValues, selectedOptions } | \n
change | \n\u9009\u9879\u6539\u53D8\u65F6\u89E6\u53D1 | \n{ selectedValues, selectedOptions, columnIndex } | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
toolbar | \n\u81EA\u5B9A\u4E49\u6574\u4E2A\u9876\u90E8\u680F\u7684\u5185\u5BB9 | \n- | \n
title | \n\u81EA\u5B9A\u4E49\u6807\u9898\u5185\u5BB9 | \n- | \n
confirm | \n\u81EA\u5B9A\u4E49\u786E\u8BA4\u6309\u94AE\u5185\u5BB9 | \n- | \n
cancel | \n\u81EA\u5B9A\u4E49\u53D6\u6D88\u6309\u94AE\u5185\u5BB9 | \n- | \n
option | \n\u81EA\u5B9A\u4E49\u9009\u9879\u5185\u5BB9 | \noption: PickerOption, index: number | \n
columns-top | \n\u81EA\u5B9A\u4E49\u9009\u9879\u4E0A\u65B9\u5185\u5BB9 | \n- | \n
columns-bottom | \n\u81EA\u5B9A\u4E49\u9009\u9879\u4E0B\u65B9\u5185\u5BB9 | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { TimePickerProps, TimePickerColumnType } from 'vant';\n
\n\u53C2\u89C1\u684C\u9762\u7AEF\u9002\u914D\u3002
\n\u65F6\u95F4\u9009\u62E9\u5668\uFF0C\u901A\u5E38\u4E0E\u5F39\u51FA\u5C42\u7EC4\u4EF6\u914D\u5408\u4F7F\u7528\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { TimePicker } from 'vant';\n\nconst app = createApp();\napp.use(TimePicker);\n
\n\u901A\u8FC7 v-model
\u7ED1\u5B9A\u5F53\u524D\u9009\u4E2D\u7684\u65F6\u95F4\u3002
<van-time-picker v-model="currentTime" title="\u9009\u62E9\u65F6\u95F4" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '00']);\n return { currentTime };\n },\n};\n
\n\u901A\u8FC7 columns-type
\u5C5E\u6027\u53EF\u4EE5\u63A7\u5236\u9009\u9879\u7684\u7C7B\u578B\uFF0C\u652F\u6301\u4EE5\u4EFB\u610F\u987A\u5E8F\u5BF9 hour
\u3001minute
\u548C second
\u8FDB\u884C\u6392\u5217\u7EC4\u5408\u3002
\u6BD4\u5982\uFF1A
\n[\'hour\']
\u6765\u5355\u72EC\u9009\u62E9\u5C0F\u65F6\u3002[\'minute\']
\u6765\u5355\u72EC\u9009\u62E9\u5206\u949F\u3002[\'minute\', \'second\']
\u6765\u9009\u62E9\u5206\u949F\u548C\u79D2\u3002[\'hour\', \'minute\', \'second\']
\u6765\u9009\u62E9\u5C0F\u65F6\u3001\u5206\u949F\u548C\u79D2\u3002<van-time-picker\n v-model="currentTime"\n title="\u9009\u62E9\u65F6\u95F4"\n :columns-type="columnsType"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '00', '00']);\n const columnsType = ['hour', 'minute', 'second'];\n return {\n currentTime,\n columnsType,\n };\n },\n};\n
\n\u4F60\u53EF\u4EE5\u4F7F\u7528 min-hour
\u548C max-hour
\u7B49\u5C5E\u6027\u6765\u9650\u5236\u5C0F\u65F6\uFF08hour\uFF09\u8303\u56F4\u3001\u5206\u949F\uFF08minute\uFF09\u8303\u56F4\u548C\u79D2\uFF08second\uFF09\u8303\u56F4\u3002
\u6BD4\u5982\u4EE5\u4E0B\u793A\u4F8B\uFF0C\u7528\u6237\u53EF\u4EE5\u9009\u62E9\u7684\u5C0F\u65F6\u662F 10 ~ 20
\uFF0C\u5206\u949F\u662F 30 ~ 40
\u3002
<van-time-picker\n v-model="currentTime"\n title="\u9009\u62E9\u65F6\u95F4"\n :min-hour="10"\n :max-hour="20"\n :min-minute="30"\n :max-minute="40"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '35']);\n return { currentTime };\n },\n};\n
\n\u4F60\u53EF\u4EE5\u4F7F\u7528 min-time
\u548C max-time
\u5C5E\u6027\u6765\u9650\u5236\u6574\u4F53\u65F6\u95F4\u8303\u56F4\uFF0C\u7EA6\u5B9A\u683C\u5F0F 10:00:00
\u3002
min-time
\u540E\uFF0Cmin-hour
\u3001min-minute
\u3001min-second
\u5C5E\u6027\u5C06\u4E0D\u4F1A\u751F\u6548\u3002max-time
\u540E\uFF0Cmax-hour
\u3001max-minute
\u3001max-second
\u5C5E\u6027\u5C06\u4E0D\u4F1A\u751F\u6548\u3002\u6BD4\u5982\u4EE5\u4E0B\u793A\u4F8B\uFF0C\u7528\u6237\u53EF\u4EE5\u9009\u62E9\u4ECE 09:40:10
\u5230 20:20:50
\u7684\u4EFB\u610F\u65F6\u95F4\u3002
<van-time-picker\n v-model="currentTime"\n title="\u9009\u62E9\u65F6\u95F4"\n :columns-type="['hour', 'minute', 'second']"\n min-time="09:40:10"\n max-time="20:20:50"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '00', '00']);\n return { currentTime };\n },\n};\n
\n\u901A\u8FC7\u4F20\u5165 formatter
\u51FD\u6570\uFF0C\u53EF\u4EE5\u5BF9\u9009\u9879\u7684\u6587\u5B57\u8FDB\u884C\u683C\u5F0F\u5316\u3002
<van-time-picker\n v-model="currentTime"\n title="\u9009\u62E9\u65F6\u95F4"\n :formatter="formatter"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '00']);\n const formatter = (type, option) => {\n if (type === 'hour') {\n option.text += '\u65F6';\n }\n if (type === 'minute') {\n option.text += '\u5206';\n }\n return option;\n };\n\n return {\n formatter,\n currentTime,\n };\n },\n};\n
\n\u901A\u8FC7\u4F20\u5165 filter
\u51FD\u6570\uFF0C\u53EF\u4EE5\u5BF9\u9009\u9879\u6570\u7EC4\u8FDB\u884C\u8FC7\u6EE4\uFF0C\u5254\u9664\u4E0D\u9700\u8981\u7684\u65F6\u95F4\uFF0C\u5B9E\u73B0\u81EA\u5B9A\u4E49\u65F6\u95F4\u95F4\u9694\u3002
<van-time-picker v-model="currentTime" title="\u9009\u62E9\u65F6\u95F4" :filter="filter" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '00']);\n const filter = (type, options) => {\n if (type === 'minute') {\n return options.filter((option) => Number(option.value) % 10 === 0);\n }\n return options;\n };\n\n return {\n filter,\n currentTime,\n };\n },\n};\n
\nfilter
\u51FD\u6570\u7684\u7B2C\u4E09\u4E2A\u53C2\u6570\u80FD\u83B7\u53D6\u5230\u5F53\u524D\u9009\u62E9\u7684\u65F6\u95F4\uFF0C\u8FD9\u5728\u4F7F\u7528\u975E\u53D7\u63A7\u6A21\u5F0F\u65F6\uFF0C\u53EF\u4EE5\u66F4\u7075\u6D3B\u5730\u8FC7\u6EE4\u6389\u4E0D\u9700\u8981\u7684\u65F6\u95F4\u3002
<van-time-picker title="\u9009\u62E9\u65F6\u95F4" :filter="filter" />\n
\nexport default {\n setup() {\n const filter = (type, options, values) => {\n const hour = +values[0];\n\n if (type === 'hour') {\n return options.filter(\n (option) => Number(option.value) >= 8 && Number(option.value) <= 18,\n );\n }\n\n if (type === 'minute') {\n options = options.filter((option) => Number(option.value) % 10 === 0);\n\n if (hour === 8) {\n return options.filter((option) => Number(option.value) >= 40);\n }\n\n if (hour === 18) {\n return options.filter((option) => Number(option.value) <= 20);\n }\n }\n\n return options;\n };\n\n return {\n filter,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u9009\u4E2D\u7684\u65F6\u95F4 | \nstring[] | \n- | \n
columns-type | \n\u9009\u9879\u7C7B\u578B\uFF0C\u7531 hour \u3001minute \u548C second \u7EC4\u6210\u7684\u6570\u7EC4 | \nstring[] | \n[\'hour\', \'minute\'] | \n
min-hour | \n\u53EF\u9009\u7684\u6700\u5C0F\u5C0F\u65F6 | \nnumber | string | \n0 | \n
max-hour | \n\u53EF\u9009\u7684\u6700\u5927\u5C0F\u65F6 | \nnumber | string | \n23 | \n
min-minute | \n\u53EF\u9009\u7684\u6700\u5C0F\u5206\u949F | \nnumber | string | \n0 | \n
max-minute | \n\u53EF\u9009\u7684\u6700\u5927\u5206\u949F | \nnumber | string | \n59 | \n
min-second | \n\u53EF\u9009\u7684\u6700\u5C0F\u79D2\u6570 | \nnumber | string | \n0 | \n
max-second | \n\u53EF\u9009\u7684\u6700\u5927\u79D2\u6570 | \nnumber | string | \n59 | \n
min-time v4.5.0 | \n\u53EF\u9009\u7684\u6700\u5C0F\u65F6\u95F4\uFF0C\u683C\u5F0F\u53C2\u8003 07:40:00 \uFF0C\u4F7F\u7528\u65F6 min-hour min-minute min-second \u4E0D\u4F1A\u751F\u6548 | \nstring | \n- | \n
max-time v4.5.0 | \n\u53EF\u9009\u7684\u6700\u5927\u65F6\u95F4\uFF0C\u683C\u5F0F\u53C2\u8003 10:20:00 \uFF0C\u4F7F\u7528\u65F6 max-hour max-minute max-second \u4E0D\u4F1A\u751F\u6548 | \nstring | \n- | \n
title | \n\u9876\u90E8\u680F\u6807\u9898 | \nstring | \n\'\' | \n
confirm-button-text | \n\u786E\u8BA4\u6309\u94AE\u6587\u5B57 | \nstring | \n\u786E\u8BA4 | \n
cancel-button-text | \n\u53D6\u6D88\u6309\u94AE\u6587\u5B57 | \nstring | \n\u53D6\u6D88 | \n
show-toolbar | \n\u662F\u5426\u663E\u793A\u9876\u90E8\u680F | \nboolean | \ntrue | \n
loading | \n\u662F\u5426\u663E\u793A\u52A0\u8F7D\u72B6\u6001 | \nboolean | \nfalse | \n
readonly | \n\u662F\u5426\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u53EA\u8BFB\u72B6\u6001\u4E0B\u65E0\u6CD5\u5207\u6362\u9009\u9879 | \nboolean | \nfalse | \n
filter | \n\u9009\u9879\u8FC7\u6EE4\u51FD\u6570 | \n(type: string, options: PickerOption[], values: string[]) => PickerOption[] | \n- | \n
formatter | \n\u9009\u9879\u683C\u5F0F\u5316\u51FD\u6570 | \n(type: string, option: PickerOption) => PickerOption | \n- | \n
option-height | \n\u9009\u9879\u9AD8\u5EA6\uFF0C\u652F\u6301 px vw vh rem \u5355\u4F4D\uFF0C\u9ED8\u8BA4 px | \nnumber | string | \n44 | \n
visible-option-num | \n\u53EF\u89C1\u7684\u9009\u9879\u4E2A\u6570 | \nnumber | string | \n6 | \n
swipe-duration | \n\u5FEB\u901F\u6ED1\u52A8\u65F6\u60EF\u6027\u6EDA\u52A8\u7684\u65F6\u957F\uFF0C\u5355\u4F4D ms | \nnumber | string | \n1000 | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
confirm | \n\u70B9\u51FB\u5B8C\u6210\u6309\u94AE\u65F6\u89E6\u53D1 | \n{ selectedValues, selectedOptions } | \n
cancel | \n\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1 | \n{ selectedValues, selectedOptions } | \n
change | \n\u9009\u9879\u6539\u53D8\u65F6\u89E6\u53D1 | \n{ selectedValues, selectedOptions, columnIndex } | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
toolbar | \n\u81EA\u5B9A\u4E49\u6574\u4E2A\u9876\u90E8\u680F\u7684\u5185\u5BB9 | \n- | \n
title | \n\u81EA\u5B9A\u4E49\u6807\u9898\u5185\u5BB9 | \n- | \n
confirm | \n\u81EA\u5B9A\u4E49\u786E\u8BA4\u6309\u94AE\u5185\u5BB9 | \n- | \n
cancel | \n\u81EA\u5B9A\u4E49\u53D6\u6D88\u6309\u94AE\u5185\u5BB9 | \n- | \n
option | \n\u81EA\u5B9A\u4E49\u9009\u9879\u5185\u5BB9 | \noption: PickerOption, index: number | \n
columns-top | \n\u81EA\u5B9A\u4E49\u9009\u9879\u4E0A\u65B9\u5185\u5BB9 | \n- | \n
columns-bottom | \n\u81EA\u5B9A\u4E49\u9009\u9879\u4E0B\u65B9\u5185\u5BB9 | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { TimePickerProps, TimePickerColumnType } from 'vant';\n
\n\u53C2\u89C1\u684C\u9762\u7AEF\u9002\u914D\u3002
\n\u76D1\u542C\u70B9\u51FB\u5143\u7D20\u5916\u90E8\u7684\u4E8B\u4EF6\u3002
\n<div ref="root" />\n
\nimport { ref } from 'vue';\nimport { useClickAway } from '@vant/use';\n\nexport default {\n setup() {\n const root = ref();\n useClickAway(root, () => {\n console.log('click outside!');\n });\n\n return { root };\n },\n};\n
\n\u901A\u8FC7 eventName
\u9009\u9879\u53EF\u4EE5\u81EA\u5B9A\u4E49\u9700\u8981\u76D1\u542C\u7684\u4E8B\u4EF6\u7C7B\u578B\u3002
<div ref="root" />\n
\nimport { ref } from 'vue';\nimport { useClickAway } from '@vant/use';\n\nexport default {\n setup() {\n const root = ref();\n useClickAway(\n root,\n () => {\n console.log('touch outside!');\n },\n { eventName: 'touchstart' },\n );\n\n return { root };\n },\n};\n
\ntype Options = {\n eventName?: string;\n};\n\nfunction useClickAway(\n target:\n | Element\n | Ref<Element | undefined>\n | Array<Element | Ref<Element | undefined>>,\n listener: EventListener,\n options?: Options,\n): void;\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
target | \n\u7ED1\u5B9A\u4E8B\u4EF6\u7684\u5143\u7D20\uFF0C\u652F\u6301\u4F20\u5165\u6570\u7EC4\u6765\u7ED1\u5B9A\u591A\u4E2A\u5143\u7D20 | \nElement | Ref<Element> | Array<Element | Ref<Element>> | \n- | \n
listener | \n\u70B9\u51FB\u5916\u90E8\u65F6\u89E6\u53D1\u7684\u56DE\u8C03\u51FD\u6570 | \nEventListener | \n- | \n
options | \n\u53EF\u9009\u7684\u914D\u7F6E\u9879 | \nOptions | \n\u89C1\u4E0B\u8868 | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
eventName | \n\u76D1\u542C\u7684\u4E8B\u4EF6\u7C7B\u578B | \nstring | \nclick | \n
\u76D1\u542C\u70B9\u51FB\u5143\u7D20\u5916\u90E8\u7684\u4E8B\u4EF6\u3002
\n<div ref="root" />\n
\nimport { ref } from 'vue';\nimport { useClickAway } from '@vant/use';\n\nexport default {\n setup() {\n const root = ref();\n useClickAway(root, () => {\n console.log('click outside!');\n });\n\n return { root };\n },\n};\n
\n\u901A\u8FC7 eventName
\u9009\u9879\u53EF\u4EE5\u81EA\u5B9A\u4E49\u9700\u8981\u76D1\u542C\u7684\u4E8B\u4EF6\u7C7B\u578B\u3002
<div ref="root" />\n
\nimport { ref } from 'vue';\nimport { useClickAway } from '@vant/use';\n\nexport default {\n setup() {\n const root = ref();\n useClickAway(\n root,\n () => {\n console.log('touch outside!');\n },\n { eventName: 'touchstart' },\n );\n\n return { root };\n },\n};\n
\ntype Options = {\n eventName?: string;\n};\n\nfunction useClickAway(\n target:\n | Element\n | Ref<Element | undefined>\n | Array<Element | Ref<Element | undefined>>,\n listener: EventListener,\n options?: Options,\n): void;\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
target | \n\u7ED1\u5B9A\u4E8B\u4EF6\u7684\u5143\u7D20\uFF0C\u652F\u6301\u4F20\u5165\u6570\u7EC4\u6765\u7ED1\u5B9A\u591A\u4E2A\u5143\u7D20 | \nElement | Ref<Element> | Array<Element | Ref<Element>> | \n- | \n
listener | \n\u70B9\u51FB\u5916\u90E8\u65F6\u89E6\u53D1\u7684\u56DE\u8C03\u51FD\u6570 | \nEventListener | \n- | \n
options | \n\u53EF\u9009\u7684\u914D\u7F6E\u9879 | \nOptions | \n\u89C1\u4E0B\u8868 | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
eventName | \n\u76D1\u542C\u7684\u4E8B\u4EF6\u7C7B\u578B | \nstring | \nclick | \n
\u63D0\u4F9B\u4FBF\u6377\u7684 requestAnimationFrame \u7684\u8C03\u7528\u548C\u53D6\u6D88\u3002
\n\u901A\u8FC7 useRaf
\u65B9\u6CD5\uFF0C\u53EF\u4EE5\u5728\u4E0B\u4E00\u6B21\u6D4F\u89C8\u5668\u91CD\u65B0\u7ED8\u5236\u4E4B\u524D\u8C03\u7528\u6307\u5B9A\u7684\u51FD\u6570\u3002
import { useRaf } from '@vant/use';\n\nexport default {\n setup() {\n let count = 0;\n useRaf(() => {\n console.log(++count); // \u53EA\u4F1A\u6267\u884C 1 \u6B21\n });\n },\n};\n
\n\u901A\u8FC7\u5F00\u542F isLoop
\u9009\u9879\uFF0C\u4F60\u53EF\u4EE5\u6309\u6307\u5B9A\u7684\u95F4\u9694\u91CD\u590D\u6267\u884C\u67D0\u4E2A\u51FD\u6570\uFF0C\u76F4\u5230\u88AB\u53D6\u6D88\u3002
import { useRaf } from '@vant/use';\n\nexport default {\n setup() {\n let count = 0;\n const cancelRaf = useRaf(\n () => {\n console.log(++count); // \u65E0\u9650\u6267\u884C\uFF0C\u76F4\u5230\u88AB cancel\n\n if (count === 5) {\n cancelRaf();\n }\n },\n {\n isLoop: true, // \u5F00\u542F\u5FAA\u73AF\n interval: 100, // \u8BBE\u7F6E\u8C03\u7528\u95F4\u9694\n },\n );\n },\n};\n
\nfunction useRaf(\n callback: () => void,\n options: {\n interval?: number;\n isLoop?: boolean;\n },\n): void;\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4 | \n
---|---|---|---|
callback | \n\u56DE\u8C03\u51FD\u6570 | \n() => void | \n- | \n
options | \n\u914D\u7F6E\u53C2\u6570 | \n{ interval?: number; isLoop?: boolean } | \n{ interval: 0; isLoop: false } | \n
\u63D0\u4F9B\u4FBF\u6377\u7684 requestAnimationFrame \u7684\u8C03\u7528\u548C\u53D6\u6D88\u3002
\n\u901A\u8FC7 useRaf
\u65B9\u6CD5\uFF0C\u53EF\u4EE5\u5728\u4E0B\u4E00\u6B21\u6D4F\u89C8\u5668\u91CD\u65B0\u7ED8\u5236\u4E4B\u524D\u8C03\u7528\u6307\u5B9A\u7684\u51FD\u6570\u3002
import { useRaf } from '@vant/use';\n\nexport default {\n setup() {\n let count = 0;\n useRaf(() => {\n console.log(++count); // \u53EA\u4F1A\u6267\u884C 1 \u6B21\n });\n },\n};\n
\n\u901A\u8FC7\u5F00\u542F isLoop
\u9009\u9879\uFF0C\u4F60\u53EF\u4EE5\u6309\u6307\u5B9A\u7684\u95F4\u9694\u91CD\u590D\u6267\u884C\u67D0\u4E2A\u51FD\u6570\uFF0C\u76F4\u5230\u88AB\u53D6\u6D88\u3002
import { useRaf } from '@vant/use';\n\nexport default {\n setup() {\n let count = 0;\n const cancelRaf = useRaf(\n () => {\n console.log(++count); // \u65E0\u9650\u6267\u884C\uFF0C\u76F4\u5230\u88AB cancel\n\n if (count === 5) {\n cancelRaf();\n }\n },\n {\n isLoop: true, // \u5F00\u542F\u5FAA\u73AF\n interval: 100, // \u8BBE\u7F6E\u8C03\u7528\u95F4\u9694\n },\n );\n },\n};\n
\nfunction useRaf(\n callback: () => void,\n options: {\n interval?: number;\n isLoop?: boolean;\n },\n): void;\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4 | \n
---|---|---|---|
callback | \n\u56DE\u8C03\u51FD\u6570 | \n() => void | \n- | \n
options | \n\u914D\u7F6E\u53C2\u6570 | \n{ interval?: number; isLoop?: boolean } | \n{ interval: 0; isLoop: false } | \n
\u7528\u4E8E\u5BF9\u4E8B\u7269\u8FDB\u884C\u8BC4\u7EA7\u64CD\u4F5C\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Rate } from 'vant';\n\nconst app = createApp();\napp.use(Rate);\n
\n\u901A\u8FC7 v-model
\u6765\u7ED1\u5B9A\u5F53\u524D\u8BC4\u5206\u503C\u3002
<van-rate v-model="value" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(3);\n return { value };\n },\n};\n
\n\u901A\u8FC7 icon
\u5C5E\u6027\u8BBE\u7F6E\u9009\u4E2D\u65F6\u7684\u56FE\u6807\uFF0Cvoid-icon
\u5C5E\u6027\u8BBE\u7F6E\u672A\u9009\u4E2D\u65F6\u7684\u56FE\u6807\u3002
<van-rate v-model="value" icon="like" void-icon="like-o" />\n
\n\u901A\u8FC7 size
\u5C5E\u6027\u8BBE\u7F6E\u56FE\u6807\u5927\u5C0F\uFF0Ccolor
\u5C5E\u6027\u8BBE\u7F6E\u9009\u4E2D\u65F6\u7684\u989C\u8272\uFF0Cvoid-color
\u8BBE\u7F6E\u672A\u9009\u4E2D\u65F6\u7684\u989C\u8272\u3002
<van-rate\n v-model="value"\n :size="25"\n color="#ffd21e"\n void-icon="star"\n void-color="#eee"\n/>\n
\n\u8BBE\u7F6E allow-half
\u5C5E\u6027\u540E\u53EF\u4EE5\u9009\u4E2D\u534A\u661F\u3002
<van-rate v-model="value" allow-half />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(2.5);\n return { value };\n },\n};\n
\n\u901A\u8FC7 count
\u5C5E\u6027\u8BBE\u7F6E\u8BC4\u5206\u603B\u6570\u3002
<van-rate v-model="value" :count="6" />\n
\n\u5F53 clearable
\u5C5E\u6027\u8BBE\u7F6E\u4E3A true
\uFF0C\u518D\u6B21\u70B9\u51FB\u76F8\u540C\u7684\u503C\u65F6\uFF0C\u53EF\u4EE5\u5C06\u503C\u91CD\u7F6E\u4E3A 0
\u3002
<van-rate v-model="value" clearable />\n
\n\u901A\u8FC7 disabled
\u5C5E\u6027\u6765\u7981\u7528\u8BC4\u5206\u3002
<van-rate v-model="value" disabled />\n
\n\u901A\u8FC7 readonly
\u5C5E\u6027\u5C06\u8BC4\u5206\u8BBE\u7F6E\u4E3A\u53EA\u8BFB\u72B6\u6001\u3002
<van-rate v-model="value" readonly />\n
\n\u8BBE\u7F6E readonly
\u548C allow-half
\u5C5E\u6027\u540E\uFF0CRate \u7EC4\u4EF6\u53EF\u4EE5\u5C55\u793A\u4EFB\u610F\u5C0F\u6570\u7ED3\u679C\u3002
<van-rate v-model="value" readonly allow-half />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(3.3);\n return { value };\n },\n};\n
\n\u8BC4\u5206\u53D8\u5316\u65F6\uFF0C\u4F1A\u89E6\u53D1 change
\u4E8B\u4EF6\u3002
<van-rate v-model="value" @change="onChange" />\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const value = ref(3);\n const onChange = (value) => showToast('\u5F53\u524D\u503C\uFF1A' + value);\n return {\n value,\n onChange,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u5206\u503C | \nnumber | \n- | \n
count | \n\u56FE\u6807\u603B\u6570 | \nnumber | string | \n5 | \n
size | \n\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx | \nnumber | string | \n20px | \n
gutter | \n\u56FE\u6807\u95F4\u8DDD\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx | \nnumber | string | \n4px | \n
color | \n\u9009\u4E2D\u65F6\u7684\u989C\u8272 | \nstring | \n#ee0a24 | \n
void-color | \n\u672A\u9009\u4E2D\u65F6\u7684\u989C\u8272 | \nstring | \n#c8c9cc | \n
disabled-color | \n\u7981\u7528\u65F6\u7684\u989C\u8272 | \nstring | \n#c8c9cc | \n
icon | \n\u9009\u4E2D\u65F6\u7684\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \nstar | \n
void-icon | \n\u672A\u9009\u4E2D\u65F6\u7684\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \nstar-o | \n
icon-prefix | \n\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 | \nstring | \nvan-icon | \n
allow-half | \n\u662F\u5426\u5141\u8BB8\u534A\u9009 | \nboolean | \nfalse | \n
clearable v4.6.0 | \n\u662F\u5426\u5141\u8BB8\u518D\u6B21\u70B9\u51FB\u540E\u6E05\u9664 | \nboolean | \nfalse | \n
readonly | \n\u662F\u5426\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u53EA\u8BFB\u72B6\u6001\u4E0B\u65E0\u6CD5\u4FEE\u6539\u8BC4\u5206 | \nboolean | \nfalse | \n
disabled | \n\u662F\u5426\u7981\u7528\u8BC4\u5206 | \nboolean | \nfalse | \n
touchable | \n\u662F\u5426\u53EF\u4EE5\u901A\u8FC7\u6ED1\u52A8\u624B\u52BF\u9009\u62E9\u8BC4\u5206 | \nboolean | \ntrue | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u5F53\u524D\u5206\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6 | \ncurrentValue: number | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { RateProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-rate-icon-size | \n20px | \n- | \n
--van-rate-icon-gutter | \nvar(--van-padding-base) | \n- | \n
--van-rate-icon-void-color | \nvar(--van-gray-5) | \n- | \n
--van-rate-icon-full-color | \nvar(--van-danger-color) | \n- | \n
--van-rate-icon-disabled-color | \nvar(--van-gray-5) | \n- | \n
\u7528\u4E8E\u5BF9\u4E8B\u7269\u8FDB\u884C\u8BC4\u7EA7\u64CD\u4F5C\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Rate } from 'vant';\n\nconst app = createApp();\napp.use(Rate);\n
\n\u901A\u8FC7 v-model
\u6765\u7ED1\u5B9A\u5F53\u524D\u8BC4\u5206\u503C\u3002
<van-rate v-model="value" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(3);\n return { value };\n },\n};\n
\n\u901A\u8FC7 icon
\u5C5E\u6027\u8BBE\u7F6E\u9009\u4E2D\u65F6\u7684\u56FE\u6807\uFF0Cvoid-icon
\u5C5E\u6027\u8BBE\u7F6E\u672A\u9009\u4E2D\u65F6\u7684\u56FE\u6807\u3002
<van-rate v-model="value" icon="like" void-icon="like-o" />\n
\n\u901A\u8FC7 size
\u5C5E\u6027\u8BBE\u7F6E\u56FE\u6807\u5927\u5C0F\uFF0Ccolor
\u5C5E\u6027\u8BBE\u7F6E\u9009\u4E2D\u65F6\u7684\u989C\u8272\uFF0Cvoid-color
\u8BBE\u7F6E\u672A\u9009\u4E2D\u65F6\u7684\u989C\u8272\u3002
<van-rate\n v-model="value"\n :size="25"\n color="#ffd21e"\n void-icon="star"\n void-color="#eee"\n/>\n
\n\u8BBE\u7F6E allow-half
\u5C5E\u6027\u540E\u53EF\u4EE5\u9009\u4E2D\u534A\u661F\u3002
<van-rate v-model="value" allow-half />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(2.5);\n return { value };\n },\n};\n
\n\u901A\u8FC7 count
\u5C5E\u6027\u8BBE\u7F6E\u8BC4\u5206\u603B\u6570\u3002
<van-rate v-model="value" :count="6" />\n
\n\u5F53 clearable
\u5C5E\u6027\u8BBE\u7F6E\u4E3A true
\uFF0C\u518D\u6B21\u70B9\u51FB\u76F8\u540C\u7684\u503C\u65F6\uFF0C\u53EF\u4EE5\u5C06\u503C\u91CD\u7F6E\u4E3A 0
\u3002
<van-rate v-model="value" clearable />\n
\n\u901A\u8FC7 disabled
\u5C5E\u6027\u6765\u7981\u7528\u8BC4\u5206\u3002
<van-rate v-model="value" disabled />\n
\n\u901A\u8FC7 readonly
\u5C5E\u6027\u5C06\u8BC4\u5206\u8BBE\u7F6E\u4E3A\u53EA\u8BFB\u72B6\u6001\u3002
<van-rate v-model="value" readonly />\n
\n\u8BBE\u7F6E readonly
\u548C allow-half
\u5C5E\u6027\u540E\uFF0CRate \u7EC4\u4EF6\u53EF\u4EE5\u5C55\u793A\u4EFB\u610F\u5C0F\u6570\u7ED3\u679C\u3002
<van-rate v-model="value" readonly allow-half />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(3.3);\n return { value };\n },\n};\n
\n\u8BC4\u5206\u53D8\u5316\u65F6\uFF0C\u4F1A\u89E6\u53D1 change
\u4E8B\u4EF6\u3002
<van-rate v-model="value" @change="onChange" />\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const value = ref(3);\n const onChange = (value) => showToast('\u5F53\u524D\u503C\uFF1A' + value);\n return {\n value,\n onChange,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u5206\u503C | \nnumber | \n- | \n
count | \n\u56FE\u6807\u603B\u6570 | \nnumber | string | \n5 | \n
size | \n\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx | \nnumber | string | \n20px | \n
gutter | \n\u56FE\u6807\u95F4\u8DDD\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx | \nnumber | string | \n4px | \n
color | \n\u9009\u4E2D\u65F6\u7684\u989C\u8272 | \nstring | \n#ee0a24 | \n
void-color | \n\u672A\u9009\u4E2D\u65F6\u7684\u989C\u8272 | \nstring | \n#c8c9cc | \n
disabled-color | \n\u7981\u7528\u65F6\u7684\u989C\u8272 | \nstring | \n#c8c9cc | \n
icon | \n\u9009\u4E2D\u65F6\u7684\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \nstar | \n
void-icon | \n\u672A\u9009\u4E2D\u65F6\u7684\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \nstar-o | \n
icon-prefix | \n\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 | \nstring | \nvan-icon | \n
allow-half | \n\u662F\u5426\u5141\u8BB8\u534A\u9009 | \nboolean | \nfalse | \n
clearable v4.6.0 | \n\u662F\u5426\u5141\u8BB8\u518D\u6B21\u70B9\u51FB\u540E\u6E05\u9664 | \nboolean | \nfalse | \n
readonly | \n\u662F\u5426\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u53EA\u8BFB\u72B6\u6001\u4E0B\u65E0\u6CD5\u4FEE\u6539\u8BC4\u5206 | \nboolean | \nfalse | \n
disabled | \n\u662F\u5426\u7981\u7528\u8BC4\u5206 | \nboolean | \nfalse | \n
touchable | \n\u662F\u5426\u53EF\u4EE5\u901A\u8FC7\u6ED1\u52A8\u624B\u52BF\u9009\u62E9\u8BC4\u5206 | \nboolean | \ntrue | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u5F53\u524D\u5206\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6 | \ncurrentValue: number | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { RateProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-rate-icon-size | \n20px | \n- | \n
--van-rate-icon-gutter | \nvar(--van-padding-base) | \n- | \n
--van-rate-icon-void-color | \nvar(--van-gray-5) | \n- | \n
--van-rate-icon-full-color | \nvar(--van-danger-color) | \n- | \n
--van-rate-icon-disabled-color | \nvar(--van-gray-5) | \n- | \n
To realize the critical subtitle function when watching the video. Please upgrade vant
to >= v4.4.0 before using this component.
Register component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Barrage } from 'vant';\n\nconst app = createApp();\napp.use(Barrage);\n
\n<van-barrage v-model="list">\n <div class="video" style="width: 100%; height: 150px"></div>\n</van-barrage>\n<van-space style="margin-top: 10px">\n <van-button @click="add" type="primary" size="small"> barrage </van-button>\n</van-space>\n
\nexport default {\n setup() {\n const defaultList = [\n { id: 100, text: 'Lightweight' },\n { id: 101, text: 'Customizable' },\n { id: 102, text: 'Mobile' },\n { id: 103, text: 'Vue' },\n { id: 104, text: 'Library' },\n { id: 105, text: 'VantUI' },\n { id: 106, text: '666' },\n ];\n\n const list = ref([...defaultList]);\n const add = () => {\n list.value.push({ id: Math.random(), text: 'Barrage' });\n };\n return { list, add };\n },\n};\n
\n<van-barrage v-model="list" ref="barrage" :auto-play="false">\n <div class="video" style="width: 100%; height: 150px"></div>\n</van-barrage>\n<van-space style="margin-top: 10px">\n <van-button @click="add" type="primary" size="small" :disabled="!isPlay">\n barrage\n </van-button>\n <van-button @click="toggle()" size="small">\n {{ isPlay ? 'pause' : 'play' }}\n </van-button>\n</van-space>\n
\nexport default {\n setup() {\n const defaultList = [\n { id: 100, text: 'Lightweight' },\n { id: 101, text: 'Customizable' },\n { id: 102, text: 'Mobile' },\n { id: 103, text: 'Vue' },\n { id: 104, text: 'Library' },\n { id: 105, text: 'VantUI' },\n { id: 106, text: '666' },\n ];\n\n const list = ref([...defaultList]);\n const barrage = ref<BarrageInstance>();\n const add = () => {\n list.value.push({ id: Math.random(), text: 'Barrage' });\n };\n\n const [isPlay, toggle] = useToggle(false);\n\n watch(isPlay, () => {\n if (isPlay.value) barrage.value?.play();\n else barrage.value?.pause();\n });\n\n return { list, barrage, isPlay, toggle, add };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nBarrage data | \nBarrageItem[] | \n- | \n
auto-play | \nWhether to play the bullet screen automatically | \nboolean | \ntrue | \n
rows | \nThe number of lines of text | \nnumber | string | \n4 | \n
top | \nSpacing between the top of the barrage area, unit px | \nnumber | string | \n10 | \n
duration | \nText animation duration, unit ms | \nnumber | string | \n4000 | \n
delay | \nBarrage animation delay, unit ms | \nnumber | \n300 | \n
Use ref to get Barrage instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
play | \nPlay barrage | \n- | \n- | \n
pause | \nPause barrage | \n- | \n- | \n
Name | \nDescription | \n
---|---|
default | \nDefault slot | \n
The component exports the following type definitions:
\nimport type { BarrageProps, BarrageItem, BarrageInstance } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-barrage-font-size | \n16px | \n- | \n
--van-barrage-space | \n10px | \n- | \n
--van-barrage-color | \nvar(--van-white) | \n- | \n
--van-barrage-font | \ninherit | \n- | \n
To realize the critical subtitle function when watching the video. Please upgrade vant
to >= v4.4.0 before using this component.
Register component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Barrage } from 'vant';\n\nconst app = createApp();\napp.use(Barrage);\n
\n<van-barrage v-model="list">\n <div class="video" style="width: 100%; height: 150px"></div>\n</van-barrage>\n<van-space style="margin-top: 10px">\n <van-button @click="add" type="primary" size="small"> barrage </van-button>\n</van-space>\n
\nexport default {\n setup() {\n const defaultList = [\n { id: 100, text: 'Lightweight' },\n { id: 101, text: 'Customizable' },\n { id: 102, text: 'Mobile' },\n { id: 103, text: 'Vue' },\n { id: 104, text: 'Library' },\n { id: 105, text: 'VantUI' },\n { id: 106, text: '666' },\n ];\n\n const list = ref([...defaultList]);\n const add = () => {\n list.value.push({ id: Math.random(), text: 'Barrage' });\n };\n return { list, add };\n },\n};\n
\n<van-barrage v-model="list" ref="barrage" :auto-play="false">\n <div class="video" style="width: 100%; height: 150px"></div>\n</van-barrage>\n<van-space style="margin-top: 10px">\n <van-button @click="add" type="primary" size="small" :disabled="!isPlay">\n barrage\n </van-button>\n <van-button @click="toggle()" size="small">\n {{ isPlay ? 'pause' : 'play' }}\n </van-button>\n</van-space>\n
\nexport default {\n setup() {\n const defaultList = [\n { id: 100, text: 'Lightweight' },\n { id: 101, text: 'Customizable' },\n { id: 102, text: 'Mobile' },\n { id: 103, text: 'Vue' },\n { id: 104, text: 'Library' },\n { id: 105, text: 'VantUI' },\n { id: 106, text: '666' },\n ];\n\n const list = ref([...defaultList]);\n const barrage = ref<BarrageInstance>();\n const add = () => {\n list.value.push({ id: Math.random(), text: 'Barrage' });\n };\n\n const [isPlay, toggle] = useToggle(false);\n\n watch(isPlay, () => {\n if (isPlay.value) barrage.value?.play();\n else barrage.value?.pause();\n });\n\n return { list, barrage, isPlay, toggle, add };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nBarrage data | \nBarrageItem[] | \n- | \n
auto-play | \nWhether to play the bullet screen automatically | \nboolean | \ntrue | \n
rows | \nThe number of lines of text | \nnumber | string | \n4 | \n
top | \nSpacing between the top of the barrage area, unit px | \nnumber | string | \n10 | \n
duration | \nText animation duration, unit ms | \nnumber | string | \n4000 | \n
delay | \nBarrage animation delay, unit ms | \nnumber | \n300 | \n
Use ref to get Barrage instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
play | \nPlay barrage | \n- | \n- | \n
pause | \nPause barrage | \n- | \n- | \n
Name | \nDescription | \n
---|---|
default | \nDefault slot | \n
The component exports the following type definitions:
\nimport type { BarrageProps, BarrageItem, BarrageInstance } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-barrage-font-size | \n16px | \n- | \n
--van-barrage-space | \n10px | \n- | \n
--van-barrage-color | \nvar(--van-white) | \n- | \n
--van-barrage-font | \ninherit | \n- | \n
\u7528\u4E8E\u4ECE\u4E00\u7EC4\u76F8\u5173\u8054\u7684\u6570\u636E\u96C6\u5408\u4E2D\u8FDB\u884C\u9009\u62E9\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { TreeSelect } from 'vant';\n\nconst app = createApp();\napp.use(TreeSelect);\n
\nitem
\u4E3A\u5206\u7C7B\u663E\u793A\u6240\u9700\u7684\u6570\u636E\uFF0C\u6570\u636E\u683C\u5F0F\u89C1\u4E0B\u65B9\u793A\u4F8B\u3002main-active-index
\u8868\u793A\u5DE6\u4FA7\u9AD8\u4EAE\u9009\u9879\u7684\u7D22\u5F15\uFF0Cactive-id
\u8868\u793A\u53F3\u4FA7\u9AD8\u4EAE\u9009\u9879\u7684 id\u3002
<van-tree-select\n v-model:active-id="activeId"\n v-model:main-active-index="activeIndex"\n :items="items"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeId = ref(1);\n const activeIndex = ref(0);\n const items = [\n {\n text: '\u6D59\u6C5F',\n children: [\n { text: '\u676D\u5DDE', id: 1 },\n { text: '\u6E29\u5DDE', id: 2 },\n { text: '\u5B81\u6CE2', id: 3, disabled: true },\n ],\n },\n {\n text: '\u6C5F\u82CF',\n children: [\n { text: '\u5357\u4EAC', id: 4 },\n { text: '\u65E0\u9521', id: 5 },\n { text: '\u5F90\u5DDE', id: 6 },\n ],\n },\n { text: '\u798F\u5EFA', disabled: true },\n ];\n\n return {\n items,\n activeId,\n activeIndex,\n };\n },\n};\n
\nactive-id
\u4E3A\u6570\u7EC4\u683C\u5F0F\u65F6\uFF0C\u53EF\u4EE5\u9009\u4E2D\u591A\u4E2A\u53F3\u4FA7\u9009\u9879\u3002
<van-tree-select\n v-model:active-id="activeIds"\n v-model:main-active-index="activeIndex"\n :items="items"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeIds = ref([1, 2]);\n const activeIndex = ref(0);\n const items = [\n {\n text: '\u6D59\u6C5F',\n children: [\n { text: '\u676D\u5DDE', id: 1 },\n { text: '\u6E29\u5DDE', id: 2 },\n { text: '\u5B81\u6CE2', id: 3, disabled: true },\n ],\n },\n {\n text: '\u6C5F\u82CF',\n children: [\n { text: '\u5357\u4EAC', id: 4 },\n { text: '\u65E0\u9521', id: 5 },\n { text: '\u5F90\u5DDE', id: 6 },\n ],\n },\n { text: '\u798F\u5EFA', disabled: true },\n ];\n\n return {\n items,\n activeIds,\n activeIndex,\n };\n },\n};\n
\n\u901A\u8FC7 content
\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u53F3\u4FA7\u533A\u57DF\u7684\u5185\u5BB9\u3002
<van-tree-select\n v-model:main-active-index="activeIndex"\n height="55vw"\n :items="items"\n>\n <template #content>\n <van-image\n v-if="activeIndex === 0"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"\n />\n <van-image\n v-if="activeIndex === 1"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"\n />\n </template>\n</van-tree-select>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeIndex = ref(0);\n return {\n activeIndex,\n items: [{ text: '\u5206\u7EC4 1' }, { text: '\u5206\u7EC4 2' }],\n };\n },\n};\n
\n\u8BBE\u7F6E dot
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\uFF1B\u8BBE\u7F6E badge
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002
<van-tree-select\n v-model:main-active-index="activeIndex"\n height="55vw"\n :items="items"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeIndex = ref(0);\n return {\n activeIndex,\n items: [\n {\n text: '\u6D59\u6C5F',\n children: [\n { text: '\u676D\u5DDE', id: 1 },\n { text: '\u6E29\u5DDE', id: 2 },\n { text: '\u5B81\u6CE2', id: 3, disabled: true },\n ],\n dot: true,\n },\n {\n text: '\u6C5F\u82CF',\n children: [\n { text: '\u5357\u4EAC', id: 4 },\n { text: '\u65E0\u9521', id: 5 },\n { text: '\u5F90\u5DDE', id: 6 },\n ],\n badge: 5,\n },\n ],\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:main-active-index | \n\u5DE6\u4FA7\u9009\u4E2D\u9879\u7684\u7D22\u5F15 | \nnumber | string | \n0 | \n
v-model:active-id | \n\u53F3\u4FA7\u9009\u4E2D\u9879\u7684 id\uFF0C\u652F\u6301\u4F20\u5165\u6570\u7EC4 | \nnumber | string | (number | string)[] | \n0 | \n
items | \n\u5206\u7C7B\u663E\u793A\u6240\u9700\u7684\u6570\u636E | \nTreeSelectItem[] | \n[] | \n
height | \n\u9AD8\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx | \nnumber | string | \n300 | \n
max | \n\u53F3\u4FA7\u9879\u6700\u5927\u9009\u4E2D\u4E2A\u6570 | \nnumber | string | \nInfinity | \n
selected-icon | \n\u81EA\u5B9A\u4E49\u53F3\u4FA7\u680F\u9009\u4E2D\u72B6\u6001\u7684\u56FE\u6807 | \nstring | \nsuccess | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click-nav | \n\u70B9\u51FB\u5DE6\u4FA7\u5BFC\u822A\u65F6\u89E6\u53D1 | \nindex: number | \n
click-item | \n\u70B9\u51FB\u53F3\u4FA7\u9009\u62E9\u9879\u65F6\u89E6\u53D1 | \nitem: TreeSelectChild | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
nav-text v4.1.0 | \n\u81EA\u5B9A\u4E49\u5BFC\u822A\u540D\u79F0 | \nitem: TreeSelectChild | \n
content | \n\u81EA\u5B9A\u4E49\u53F3\u4FA7\u533A\u57DF\u5185\u5BB9 | \n- | \n
TreeSelectItem
\u6574\u4F53\u4E3A\u4E00\u4E2A\u6570\u7EC4\uFF0C\u6570\u7EC4\u5185\u5305\u542B\u4E00\u7CFB\u5217\u63CF\u8FF0\u5206\u7C7B\u7684\u5BF9\u8C61\uFF0C\u6BCF\u4E2A\u5206\u7C7B\u91CC\uFF0Ctext
\u8868\u793A\u5F53\u524D\u5206\u7C7B\u7684\u540D\u79F0\uFF0Cchildren
\u8868\u793A\u5206\u7C7B\u91CC\u7684\u53EF\u9009\u9879\u3002
[\n {\n // \u5BFC\u822A\u540D\u79F0\n text: '\u6240\u6709\u57CE\u5E02',\n // \u5BFC\u822A\u540D\u79F0\u53F3\u4E0A\u89D2\u5FBD\u6807\n badge: 3,\n // \u662F\u5426\u5728\u5BFC\u822A\u540D\u79F0\u53F3\u4E0A\u89D2\u663E\u793A\u5C0F\u7EA2\u70B9\n dot: true,\n // \u5BFC\u822A\u8282\u70B9\u989D\u5916\u7C7B\u540D\n className: 'my-class',\n // \u8BE5\u5BFC\u822A\u4E0B\u6240\u6709\u7684\u53EF\u9009\u9879\n children: [\n {\n // \u540D\u79F0\n text: '\u6E29\u5DDE',\n // id\uFF0C\u4F5C\u4E3A\u5339\u914D\u9009\u4E2D\u72B6\u6001\u7684\u6807\u8BC6\u7B26\n id: 1,\n // \u7981\u7528\u9009\u9879\n disabled: true,\n },\n {\n text: '\u676D\u5DDE',\n id: 2,\n },\n ],\n },\n];\n
\n\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { TreeSelectItem, TreeSelectChild, TreeSelectProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-tree-select-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-tree-select-nav-background | \nvar(--van-background) | \n- | \n
--van-tree-select-content-background | \nvar(--van-background-2) | \n- | \n
--van-tree-select-nav-item-padding | \n14px var(--van-padding-sm) | \n- | \n
--van-tree-select-item-height | \n48px | \n- | \n
--van-tree-select-item-active-color | \nvar(--van-primary-color) | \n- | \n
--van-tree-select-item-disabled-color | \nvar(--van-gray-5) | \n- | \n
--van-tree-select-item-selected-size | \n16px | \n- | \n
\u7528\u4E8E\u4ECE\u4E00\u7EC4\u76F8\u5173\u8054\u7684\u6570\u636E\u96C6\u5408\u4E2D\u8FDB\u884C\u9009\u62E9\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { TreeSelect } from 'vant';\n\nconst app = createApp();\napp.use(TreeSelect);\n
\nitem
\u4E3A\u5206\u7C7B\u663E\u793A\u6240\u9700\u7684\u6570\u636E\uFF0C\u6570\u636E\u683C\u5F0F\u89C1\u4E0B\u65B9\u793A\u4F8B\u3002main-active-index
\u8868\u793A\u5DE6\u4FA7\u9AD8\u4EAE\u9009\u9879\u7684\u7D22\u5F15\uFF0Cactive-id
\u8868\u793A\u53F3\u4FA7\u9AD8\u4EAE\u9009\u9879\u7684 id\u3002
<van-tree-select\n v-model:active-id="activeId"\n v-model:main-active-index="activeIndex"\n :items="items"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeId = ref(1);\n const activeIndex = ref(0);\n const items = [\n {\n text: '\u6D59\u6C5F',\n children: [\n { text: '\u676D\u5DDE', id: 1 },\n { text: '\u6E29\u5DDE', id: 2 },\n { text: '\u5B81\u6CE2', id: 3, disabled: true },\n ],\n },\n {\n text: '\u6C5F\u82CF',\n children: [\n { text: '\u5357\u4EAC', id: 4 },\n { text: '\u65E0\u9521', id: 5 },\n { text: '\u5F90\u5DDE', id: 6 },\n ],\n },\n { text: '\u798F\u5EFA', disabled: true },\n ];\n\n return {\n items,\n activeId,\n activeIndex,\n };\n },\n};\n
\nactive-id
\u4E3A\u6570\u7EC4\u683C\u5F0F\u65F6\uFF0C\u53EF\u4EE5\u9009\u4E2D\u591A\u4E2A\u53F3\u4FA7\u9009\u9879\u3002
<van-tree-select\n v-model:active-id="activeIds"\n v-model:main-active-index="activeIndex"\n :items="items"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeIds = ref([1, 2]);\n const activeIndex = ref(0);\n const items = [\n {\n text: '\u6D59\u6C5F',\n children: [\n { text: '\u676D\u5DDE', id: 1 },\n { text: '\u6E29\u5DDE', id: 2 },\n { text: '\u5B81\u6CE2', id: 3, disabled: true },\n ],\n },\n {\n text: '\u6C5F\u82CF',\n children: [\n { text: '\u5357\u4EAC', id: 4 },\n { text: '\u65E0\u9521', id: 5 },\n { text: '\u5F90\u5DDE', id: 6 },\n ],\n },\n { text: '\u798F\u5EFA', disabled: true },\n ];\n\n return {\n items,\n activeIds,\n activeIndex,\n };\n },\n};\n
\n\u901A\u8FC7 content
\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u53F3\u4FA7\u533A\u57DF\u7684\u5185\u5BB9\u3002
<van-tree-select\n v-model:main-active-index="activeIndex"\n height="55vw"\n :items="items"\n>\n <template #content>\n <van-image\n v-if="activeIndex === 0"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"\n />\n <van-image\n v-if="activeIndex === 1"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"\n />\n </template>\n</van-tree-select>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeIndex = ref(0);\n return {\n activeIndex,\n items: [{ text: '\u5206\u7EC4 1' }, { text: '\u5206\u7EC4 2' }],\n };\n },\n};\n
\n\u8BBE\u7F6E dot
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\uFF1B\u8BBE\u7F6E badge
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002
<van-tree-select\n v-model:main-active-index="activeIndex"\n height="55vw"\n :items="items"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeIndex = ref(0);\n return {\n activeIndex,\n items: [\n {\n text: '\u6D59\u6C5F',\n children: [\n { text: '\u676D\u5DDE', id: 1 },\n { text: '\u6E29\u5DDE', id: 2 },\n { text: '\u5B81\u6CE2', id: 3, disabled: true },\n ],\n dot: true,\n },\n {\n text: '\u6C5F\u82CF',\n children: [\n { text: '\u5357\u4EAC', id: 4 },\n { text: '\u65E0\u9521', id: 5 },\n { text: '\u5F90\u5DDE', id: 6 },\n ],\n badge: 5,\n },\n ],\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:main-active-index | \n\u5DE6\u4FA7\u9009\u4E2D\u9879\u7684\u7D22\u5F15 | \nnumber | string | \n0 | \n
v-model:active-id | \n\u53F3\u4FA7\u9009\u4E2D\u9879\u7684 id\uFF0C\u652F\u6301\u4F20\u5165\u6570\u7EC4 | \nnumber | string | (number | string)[] | \n0 | \n
items | \n\u5206\u7C7B\u663E\u793A\u6240\u9700\u7684\u6570\u636E | \nTreeSelectItem[] | \n[] | \n
height | \n\u9AD8\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx | \nnumber | string | \n300 | \n
max | \n\u53F3\u4FA7\u9879\u6700\u5927\u9009\u4E2D\u4E2A\u6570 | \nnumber | string | \nInfinity | \n
selected-icon | \n\u81EA\u5B9A\u4E49\u53F3\u4FA7\u680F\u9009\u4E2D\u72B6\u6001\u7684\u56FE\u6807 | \nstring | \nsuccess | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click-nav | \n\u70B9\u51FB\u5DE6\u4FA7\u5BFC\u822A\u65F6\u89E6\u53D1 | \nindex: number | \n
click-item | \n\u70B9\u51FB\u53F3\u4FA7\u9009\u62E9\u9879\u65F6\u89E6\u53D1 | \nitem: TreeSelectChild | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
nav-text v4.1.0 | \n\u81EA\u5B9A\u4E49\u5BFC\u822A\u540D\u79F0 | \nitem: TreeSelectChild | \n
content | \n\u81EA\u5B9A\u4E49\u53F3\u4FA7\u533A\u57DF\u5185\u5BB9 | \n- | \n
TreeSelectItem
\u6574\u4F53\u4E3A\u4E00\u4E2A\u6570\u7EC4\uFF0C\u6570\u7EC4\u5185\u5305\u542B\u4E00\u7CFB\u5217\u63CF\u8FF0\u5206\u7C7B\u7684\u5BF9\u8C61\uFF0C\u6BCF\u4E2A\u5206\u7C7B\u91CC\uFF0Ctext
\u8868\u793A\u5F53\u524D\u5206\u7C7B\u7684\u540D\u79F0\uFF0Cchildren
\u8868\u793A\u5206\u7C7B\u91CC\u7684\u53EF\u9009\u9879\u3002
[\n {\n // \u5BFC\u822A\u540D\u79F0\n text: '\u6240\u6709\u57CE\u5E02',\n // \u5BFC\u822A\u540D\u79F0\u53F3\u4E0A\u89D2\u5FBD\u6807\n badge: 3,\n // \u662F\u5426\u5728\u5BFC\u822A\u540D\u79F0\u53F3\u4E0A\u89D2\u663E\u793A\u5C0F\u7EA2\u70B9\n dot: true,\n // \u5BFC\u822A\u8282\u70B9\u989D\u5916\u7C7B\u540D\n className: 'my-class',\n // \u8BE5\u5BFC\u822A\u4E0B\u6240\u6709\u7684\u53EF\u9009\u9879\n children: [\n {\n // \u540D\u79F0\n text: '\u6E29\u5DDE',\n // id\uFF0C\u4F5C\u4E3A\u5339\u914D\u9009\u4E2D\u72B6\u6001\u7684\u6807\u8BC6\u7B26\n id: 1,\n // \u7981\u7528\u9009\u9879\n disabled: true,\n },\n {\n text: '\u676D\u5DDE',\n id: 2,\n },\n ],\n },\n];\n
\n\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { TreeSelectItem, TreeSelectChild, TreeSelectProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-tree-select-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-tree-select-nav-background | \nvar(--van-background) | \n- | \n
--van-tree-select-content-background | \nvar(--van-background-2) | \n- | \n
--van-tree-select-nav-item-padding | \n14px var(--van-padding-sm) | \n- | \n
--van-tree-select-item-height | \n48px | \n- | \n
--van-tree-select-item-active-color | \nvar(--van-primary-color) | \n- | \n
--van-tree-select-item-disabled-color | \nvar(--van-gray-5) | \n- | \n
--van-tree-select-item-selected-size | \n16px | \n- | \n
The font-based icon set that can be used via the Icon component or referenced in other components via the icon
attribute.
Register component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Icon } from 'vant';\n\nconst app = createApp();\napp.use(Icon);\n
\nUse name
prop to set icon name or icon URL.
<van-icon name="chat-o" />\n
\nYou can directly passing an image URL to the name
props.
<van-icon name="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" />\n
\nUse dot
prop, a small red dot will be displayed in the upper right corner of the icon.
Use badge
prop, the badge will be displayed in the upper right corner of the icon.
<van-icon name="chat-o" dot />\n<van-icon name="chat-o" badge="9" />\n<van-icon name="chat-o" badge="99+" />\n
\nUse color
prop to set icon color.
<van-icon name="cart-o" color="#1989fa" />\n<van-icon name="fire-o" color="#ee0a24" />\n
\nUse size
prop to set icon size.
<!-- Using px unit by default -->\n<van-icon name="chat-o" size="40" />\n<!-- Using rem unit -->\n<van-icon name="chat-o" size="3rem" />\n
\n@font-face {\n font-family: 'my-icon';\n src: url('./my-icon.ttf') format('truetype');\n}\n\n.my-icon {\n font-family: 'my-icon';\n}\n\n.my-icon-extra::before {\n content: '\\e626';\n}\n
\n<van-icon class-prefix="my-icon" name="extra" />\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
name | \nIcon name or URL | \nstring | \n\'\' | \n
dot | \nWhether to show red dot | \nboolean | \nfalse | \n
badge | \nContent of the badge | \nnumber | string | \n\'\' | \n
badge-props | \nProps of Badge, see Badge - props | \nBadgeProps | \n- | \n
color | \nIcon color | \nstring | \ninherit | \n
size | \nIcon size | \nnumber | string | \ninherit | \n
class-prefix | \nClassName prefix | \nstring | \nvan-icon | \n
tag | \nHTML Tag of root element | \nstring | \ni | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when icon is clicked | \nevent: MouseEvent | \n
The component exports the following type definitions:
\nimport type { IconProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-icon-font-family | \n\'van-icon\' | \n- | \n
The font-based icon set that can be used via the Icon component or referenced in other components via the icon
attribute.
Register component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Icon } from 'vant';\n\nconst app = createApp();\napp.use(Icon);\n
\nUse name
prop to set icon name or icon URL.
<van-icon name="chat-o" />\n
\nYou can directly passing an image URL to the name
props.
<van-icon name="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" />\n
\nUse dot
prop, a small red dot will be displayed in the upper right corner of the icon.
Use badge
prop, the badge will be displayed in the upper right corner of the icon.
<van-icon name="chat-o" dot />\n<van-icon name="chat-o" badge="9" />\n<van-icon name="chat-o" badge="99+" />\n
\nUse color
prop to set icon color.
<van-icon name="cart-o" color="#1989fa" />\n<van-icon name="fire-o" color="#ee0a24" />\n
\nUse size
prop to set icon size.
<!-- Using px unit by default -->\n<van-icon name="chat-o" size="40" />\n<!-- Using rem unit -->\n<van-icon name="chat-o" size="3rem" />\n
\n@font-face {\n font-family: 'my-icon';\n src: url('./my-icon.ttf') format('truetype');\n}\n\n.my-icon {\n font-family: 'my-icon';\n}\n\n.my-icon-extra::before {\n content: '\\e626';\n}\n
\n<van-icon class-prefix="my-icon" name="extra" />\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
name | \nIcon name or URL | \nstring | \n\'\' | \n
dot | \nWhether to show red dot | \nboolean | \nfalse | \n
badge | \nContent of the badge | \nnumber | string | \n\'\' | \n
badge-props | \nProps of Badge, see Badge - props | \nBadgeProps | \n- | \n
color | \nIcon color | \nstring | \ninherit | \n
size | \nIcon size | \nnumber | string | \ninherit | \n
class-prefix | \nClassName prefix | \nstring | \nvan-icon | \n
tag | \nHTML Tag of root element | \nstring | \ni | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when icon is clicked | \nevent: MouseEvent | \n
The component exports the following type definitions:
\nimport type { IconProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-icon-font-family | \n\'van-icon\' | \n- | \n
Vant provide some built-in composition APIs, you can directly use these APIs for development.
\nAlthough @vant/use
is already included in Vant\'s dependencies, it is still recommended to install this package explicitly:
# with npm\nnpm i @vant/use\n\n# with yarn\nyarn add @vant/use\n\n# with pnpm\npnpm add @vant/use\n\n# with Bun\nbun add @vant/use\n
\nimport { useWindowSize } from '@vant/use';\n\nconst { width, height } = useWindowSize();\n\nconsole.log(width.value); // -> window width\nconsole.log(height.value); // -> window height\n
\nName | \nDescription | \n
---|---|
useClickAway | \nTriggers a callback when user clicks outside of the target element | \n
useCountDown | \nUsed to manage the countdown | \n
useCustomFieldValue | \nUsed to custom Field value | \n
useEventListener | \nUsed to attach event | \n
usePageVisibility | \nGet the visible state of the page | \n
useRect | \nGet the size of an element and its position relative to the viewport | \n
useRelation | \nEstablish the association relationship between parent and child components | \n
useScrollParent | \nGet the closest parent element that is scrollable | \n
useToggle | \nUsed to switch between true and false | \n
useWindowSize | \nGet the viewport width and height of the browser window | \n
useRaf | \nUsed to manage the requestAnimationFrame | \n
Vant provide some built-in composition APIs, you can directly use these APIs for development.
\nAlthough @vant/use
is already included in Vant\'s dependencies, it is still recommended to install this package explicitly:
# with npm\nnpm i @vant/use\n\n# with yarn\nyarn add @vant/use\n\n# with pnpm\npnpm add @vant/use\n\n# with Bun\nbun add @vant/use\n
\nimport { useWindowSize } from '@vant/use';\n\nconst { width, height } = useWindowSize();\n\nconsole.log(width.value); // -> window width\nconsole.log(height.value); // -> window height\n
\nName | \nDescription | \n
---|---|
useClickAway | \nTriggers a callback when user clicks outside of the target element | \n
useCountDown | \nUsed to manage the countdown | \n
useCustomFieldValue | \nUsed to custom Field value | \n
useEventListener | \nUsed to attach event | \n
usePageVisibility | \nGet the visible state of the page | \n
useRect | \nGet the size of an element and its position relative to the viewport | \n
useRelation | \nEstablish the association relationship between parent and child components | \n
useScrollParent | \nGet the closest parent element that is scrollable | \n
useToggle | \nUsed to switch between true and false | \n
useWindowSize | \nGet the viewport width and height of the browser window | \n
useRaf | \nUsed to manage the requestAnimationFrame | \n
This document provides an upgrade guide from Vant 3 to Vant 4.
\nFirst you need to install Vant 4 and @vant/compat
.
@vant/compat
is a compatibility package that helps you to switch from Vant 3 to Vant 4.
# Install via npm\nnpm add vant@^4 @vant/compat@^1\n\n# Install via yarn\nyarn add vant@^4 @vant/compat@^1\n\n# Install via pnpm\npnpm add vant@^4 @vant/compat@^1\n\n# Install via Bun\nbun add vant@^4 @vant/compat@^1\n
\nYou can also change the version directly in the dependencies
field of package.json
, and you will need to reinstall the dependencies after the change.
{\n "dependencies": {\n- "vant": "^3.0.0",\n+ "vant": "^4.0.0",\n+ "@vant/compat": "^1.0.0",\n }\n}\n
\nStarting from Vant 4.0, babel-plugin-import
will no longer be supported, please remove the babel-plugin-import
plugin that the project depends on.
Simply remove the following code in babel.config.js
:
module.exports = {\n plugins: [\n- ['import', {\n- libraryName: 'vant',\n- libraryDirectory: 'es',\n- style: true\n- }, 'vant']\n ]\n};\n
\nThe main benefits of removing babel-plugin-import
are as follows:
babel-plugin-import
, you can import content other than Vant components, such as the new showToast
method in Vant 4, or the buttonProps
object:import { showToast, buttonProps } from 'vant';\n
\nRemoving babel-plugin-import
will not affect the JS size of the project, because Vant supports Tree Shaking to remove unnecessary JS code by default.
The way the CSS code is imported can be selected from the following two ways:
\nimport 'vant/lib/index.css';\n
\nIn Vant 4, three components have been refactored, they are:
\nArea
Picker
DatetimePicker
The reason for refactoring these three components is that in the previous version, the API design of the Picker
component had some unreasonable designs, which caused people to often encounter problems when using it, such as:
To solve the above problems, we have refactored the Picker
component in the v4 version, and also refactored the Area
and DatetimePicker
components derived from Picker
. If you use these three components in your project, please read the documentation carefully and upgrade.
v-model
, remove the default-index
prop.columns
prop.confirm
method remains.getSelectedOptions
instance method.confirm
, cancel
, change
events.item-height
prop to option-height
.visible-item-count
prop to visible-option-num
.\n\nPlease refer to Picker Component Documentation for detailed usage.
\n
The DatetimePicker component is split into three subcomponents:
\nAt the same time, the TimePicker and DatePicker components are also refactored based on the new version of the Picker component, and some API designs are optimized.
\nThe following are the main API changes of TimePicker and DatePicker. For more details, please refer to TimePicker and DatePicker documentation.
\nv-model
binding is adjusted to array format.columns-type
prop to control option type and order.type
and columns-order
props.getPicker
method.confirm
, cancel
, change
events to be consistent with the Picker component.\n\nVant 4 no longer provides the old version of the DatetimePicker component. The PickerGroup component can be used to achieve more flexible and richer interactive effects. For specific usage, please refer to the PickerGroup component documentation.
\n
The Area component is encapsulated based on the Picker component, so this upgrade also refactors the internal logic of the Area component and optimizes some APIs.
\nv-model
.reset
method, now can be reset by modifying v-model
.is-oversea-code
prop.confirm
, cancel
, change
events to be consistent with the Picker component.value
prop to modelValue
.item-height
prop to option-height
.visible-item-count
prop to visible-option-num
.\n\nPlease refer to Area Component Documentation for detailed usage.
\n
In Vant 3, Dialog
is a function, and calling the function can quickly evoke the global Dialog component, and Dialog.Component
is the Dialog
component object, which is different from the usage of most components, which can easily lead to mistake.
In order to be more intuitive, we adjusted the calling method of Dialog
in Vant 4, renamed the Dialog()
function to showDialog()
, and let Dialog
directly point to the component object.
// Vant 3\nDialog(); // function call\nDialog.Component; // Component object\n\n// Vant 4\nshowDialog(); // function call\nDialog; // component object\n
\nSince Dialog
has become a component object, other methods mounted on Dialog
have also been renamed. The mapping relationship between the old and new APIs is as follows:
Dialog(); // -> showDialog()\nDialog.alert(); // -> showDialog()\nDialog.confirm(); // -> showConfirmDialog()\nDialog.close(); // -> closeDialog();\nDialog.setDefaultOptions(); // -> setDialogDefaultOptions()\nDialog.resetDefaultOptions(); // -> resetDialogDefaultOptions()\n
\nIn order to facilitate the migration of old version code to v4, we provide a compatibility solution, you can use the Dialog
object exported in @vant/compat
to be compatible with the original code.
Reference the Dialog
method from @vant/compat
:
import { Dialog } from '@vant/compat';\n\nDialog();\nDialog.close();\n
\nThe Dialog
exported in @vant/compat
has exactly the same API and behavior as the Dialog
in Vant 3, so you only need to modify the reference path of Dialog
, and other codes can remain unchanged.
After the project is upgraded to Vant v4, it is recommended to gradually replace it with the new showDialog
and other methods in iterations, and remove the @vant/compat
package.
In Vant 4, the calling method of the Toast
component has also been adjusted, which is consistent with the changes of the Dialog
component:
// Vant 3\nToast(); // function call\n\n// Vant 4\nshowToast(); // function call\nToast; // component object\n
\nOther methods mounted on Toast
have also been renamed, and the mapping relationship between the old and new APIs is as follows:
Toast(); // -> showToast()\nToast.fail(); // -> showFailToast()\nToast.success(); // -> showSuccessToast()\nToast.loading(); // -> showLoadingToast()\nToast.clear(); // -> closeToast()\nToast.setDefaultOptions(); // -> setToastDefaultOptions()\nToast.resetDefaultOptions(); // -> resetToastDefaultOptions()\n
\nAt the same time, Vant 4 will no longer globally register the $toast
method on the this
object, which means that $toast
will not be accessible on the this
object.
In order to facilitate code migration, we provide a compatibility solution, you can use the Toast
object exported in @vant/compat
to be compatible with the original code.
import { Toast } from '@vant/compat';\n\nToast();\nToast.clear();\n
\nThe Toast
exported in @vant/compat
has exactly the same API and behavior as Toast
in Vant 3, so you only need to modify the reference path of Toast
, and other codes can remain unchanged.
In Vant 4, the calling method of the Notify
component has also been adjusted, which is consistent with the changes of the Dialog
component:
// Vant 3\nNotify(); // function call\nNotify.Component; // component object\n\n// Vant 4\nshowNotify(); // function call\nNotify; // component object\n
\nOther methods mounted on Notify
have also been renamed, and the mapping relationship between the old and new APIs is as follows:
Notify(); // -> showNotify()\nNotify.clear(); // -> closeNotify()\nNotify.setDefaultOptions(); // -> setNotifyDefaultOptions()\nNotify.resetDefaultOptions(); // -> resetNotifyDefaultOptions()\n
\nAt the same time, Vant 4 will no longer globally register the $notify
method on the this
object, which means that $notify
will not be accessible on the this
object.
In order to facilitate code migration, we provide a compatibility solution, you can use the Notify
object exported in @vant/compat
to be compatible with the original code.
import { Notify } from '@vant/compat';\n\nNotify();\nNotify.clear();\n
\nNotify
exported in @vant/compat
has exactly the same API and behavior as Notify
in Vant 3, so you only need to modify the reference path of Notify
, and other codes can remain unchanged.
In Vant 4, the calling method of the ImagePreview
component has also been adjusted, which is consistent with the changes of the Dialog
component:
// Vant 3\nImagePreview(); // function call\nImagePreview.Component; // component object\n\n// Vant 4\nshowImagePreview(); // function call\nImagePreview; // component object\n
\nIn order to facilitate code migration, we provide a compatibility solution, you can use the ImagePreview
object exported in @vant/compat
to be compatible with the original code.
import { ImagePreview } from '@vant/compat';\n\nImagePreview();\n
\nThe ImagePreview
exported in @vant/compat
has exactly the same API and behavior as the ImagePreview
in Vant 3, so you only need to modify the reference path of ImagePreview
, and other codes can remain unchanged.
Starting from Vant 4, all events are named in camelCase officially recommended by Vue.
\n// Vant 3\nemit('click-input');\n\n// Vant 4\nemit('clickInput');\n
\nThis change does not affect the original template code, Vue will automatically format the event name in the template, so you don\'t need to make any changes.
\n<!-- The following code works as usual without any changes -->\n<van-field @click-input="onClick" />\n
\nIf you use the Vant component in JSX, you need to adjust the monitored event name to camel case format, the original dash format will no longer take effect, and the new monitoring method is more in line with JSX\'s own specifications:
\n// Vant 3\n<Field onClick-input={onClick} />\n\n// Vant 4\n<Field onClickInput={onClick} />\n
\nIn Vant 4.0 version, the following APIs have been updated incompatible:
\nshow-postal
prop.postal-validator
prop.change-area
event changed to PickerOption[]
type.getArea
instance method.Some adjustments have been made to the CSS style of Popup. If you have added some custom CSS styles to the Popup component, please check if this update affects the UI in the project.
\nbox-sizing: border-box
style by default.position="center"
, to solve the problem that the width of the Popup cannot be adjusted correctly.// Vant 3\n.van-popup --center {\n left: 50%;\n transform: translate3d(-50%, -50%, 0);\n}\n\n// Vant 4\n.van-popup --center {\n left: 0;\n right: 0;\n width: fit-content;\n max-width: calc(100vw - var(--van-padding-md) * 2);\n margin: 0 auto;\n transform: translateY(-50%);\n}\n
\nclick
and disabled
events, please use click-tab
event insteadIn the previous version, Vant components had two primary colors, some components used blue (#1989fa) as the primary color, and others used red (#ee0a24).
\nTo keep the colour specification consistent,, we have unified the primary color in Vant 4, and all components use blue as the primary color.
\nThe primary color of the following components has been changed from red to blue:
\nCurrently, Vant already supports theme customization capabilities based on CSS variables, which is more flexible than Less customization. Therefore, Vant 4 will no longer provide Less-based theme customization.
\nThis means that Vant\'s npm package will no longer contain .less
style source files, only the compiled .css
style files will be provided.
If your project is using an old version of Less theme customization, please use the ConfigProvider global configuration component to replace it.
\nWith code size and usability in mind, we have simplified the names of some CSS variables, and used shorter words in the variable names to reduce the code size.
\nThis upgrade includes the following variable name changes:
\nanimation-duration -> duration\nanimation-timing-function-enter -> ease-out\nanimation-timing-function-leave -> ease-in\nbackground-color -> background\nbackground-color-light -> background-2\nborder-radius -> radius\nborder-width-base -> border-width\nbox-shadow -> shadow\nfont-family -> font\nfont-weight-bold -> font-bold\nprice-integer-font -> price-font\ntext-link -> link\ntransition-duration -> duration\n
\nDue to the large number of CSS variables involved, it is recommended that you perform a global match and replace in the code repository.
\nFor the ConfigProvider
component, we have added the ConfigProviderThemeVars
type definition to provide full type hints. In TypeScript code, you can use type hints to ensure that theme variables are substituted correctly.
import type { ConfigProviderThemeVars } from 'vant';\n\nconst themeVars: ConfigProviderThemeVars = {\n sliderBarHeight: '4px',\n};\n
\nThis document provides an upgrade guide from Vant 3 to Vant 4.
\nFirst you need to install Vant 4 and @vant/compat
.
@vant/compat
is a compatibility package that helps you to switch from Vant 3 to Vant 4.
# Install via npm\nnpm add vant@^4 @vant/compat@^1\n\n# Install via yarn\nyarn add vant@^4 @vant/compat@^1\n\n# Install via pnpm\npnpm add vant@^4 @vant/compat@^1\n\n# Install via Bun\nbun add vant@^4 @vant/compat@^1\n
\nYou can also change the version directly in the dependencies
field of package.json
, and you will need to reinstall the dependencies after the change.
{\n "dependencies": {\n- "vant": "^3.0.0",\n+ "vant": "^4.0.0",\n+ "@vant/compat": "^1.0.0",\n }\n}\n
\nStarting from Vant 4.0, babel-plugin-import
will no longer be supported, please remove the babel-plugin-import
plugin that the project depends on.
Simply remove the following code in babel.config.js
:
module.exports = {\n plugins: [\n- ['import', {\n- libraryName: 'vant',\n- libraryDirectory: 'es',\n- style: true\n- }, 'vant']\n ]\n};\n
\nThe main benefits of removing babel-plugin-import
are as follows:
babel-plugin-import
, you can import content other than Vant components, such as the new showToast
method in Vant 4, or the buttonProps
object:import { showToast, buttonProps } from 'vant';\n
\nRemoving babel-plugin-import
will not affect the JS size of the project, because Vant supports Tree Shaking to remove unnecessary JS code by default.
The way the CSS code is imported can be selected from the following two ways:
\nimport 'vant/lib/index.css';\n
\nIn Vant 4, three components have been refactored, they are:
\nArea
Picker
DatetimePicker
The reason for refactoring these three components is that in the previous version, the API design of the Picker
component had some unreasonable designs, which caused people to often encounter problems when using it, such as:
To solve the above problems, we have refactored the Picker
component in the v4 version, and also refactored the Area
and DatetimePicker
components derived from Picker
. If you use these three components in your project, please read the documentation carefully and upgrade.
v-model
, remove the default-index
prop.columns
prop.confirm
method remains.getSelectedOptions
instance method.confirm
, cancel
, change
events.item-height
prop to option-height
.visible-item-count
prop to visible-option-num
.\n\nPlease refer to Picker Component Documentation for detailed usage.
\n
The DatetimePicker component is split into three subcomponents:
\nAt the same time, the TimePicker and DatePicker components are also refactored based on the new version of the Picker component, and some API designs are optimized.
\nThe following are the main API changes of TimePicker and DatePicker. For more details, please refer to TimePicker and DatePicker documentation.
\nv-model
binding is adjusted to array format.columns-type
prop to control option type and order.type
and columns-order
props.getPicker
method.confirm
, cancel
, change
events to be consistent with the Picker component.\n\nVant 4 no longer provides the old version of the DatetimePicker component. The PickerGroup component can be used to achieve more flexible and richer interactive effects. For specific usage, please refer to the PickerGroup component documentation.
\n
The Area component is encapsulated based on the Picker component, so this upgrade also refactors the internal logic of the Area component and optimizes some APIs.
\nv-model
.reset
method, now can be reset by modifying v-model
.is-oversea-code
prop.confirm
, cancel
, change
events to be consistent with the Picker component.value
prop to modelValue
.item-height
prop to option-height
.visible-item-count
prop to visible-option-num
.\n\nPlease refer to Area Component Documentation for detailed usage.
\n
In Vant 3, Dialog
is a function, and calling the function can quickly evoke the global Dialog component, and Dialog.Component
is the Dialog
component object, which is different from the usage of most components, which can easily lead to mistake.
In order to be more intuitive, we adjusted the calling method of Dialog
in Vant 4, renamed the Dialog()
function to showDialog()
, and let Dialog
directly point to the component object.
// Vant 3\nDialog(); // function call\nDialog.Component; // Component object\n\n// Vant 4\nshowDialog(); // function call\nDialog; // component object\n
\nSince Dialog
has become a component object, other methods mounted on Dialog
have also been renamed. The mapping relationship between the old and new APIs is as follows:
Dialog(); // -> showDialog()\nDialog.alert(); // -> showDialog()\nDialog.confirm(); // -> showConfirmDialog()\nDialog.close(); // -> closeDialog();\nDialog.setDefaultOptions(); // -> setDialogDefaultOptions()\nDialog.resetDefaultOptions(); // -> resetDialogDefaultOptions()\n
\nIn order to facilitate the migration of old version code to v4, we provide a compatibility solution, you can use the Dialog
object exported in @vant/compat
to be compatible with the original code.
Reference the Dialog
method from @vant/compat
:
import { Dialog } from '@vant/compat';\n\nDialog();\nDialog.close();\n
\nThe Dialog
exported in @vant/compat
has exactly the same API and behavior as the Dialog
in Vant 3, so you only need to modify the reference path of Dialog
, and other codes can remain unchanged.
After the project is upgraded to Vant v4, it is recommended to gradually replace it with the new showDialog
and other methods in iterations, and remove the @vant/compat
package.
In Vant 4, the calling method of the Toast
component has also been adjusted, which is consistent with the changes of the Dialog
component:
// Vant 3\nToast(); // function call\n\n// Vant 4\nshowToast(); // function call\nToast; // component object\n
\nOther methods mounted on Toast
have also been renamed, and the mapping relationship between the old and new APIs is as follows:
Toast(); // -> showToast()\nToast.fail(); // -> showFailToast()\nToast.success(); // -> showSuccessToast()\nToast.loading(); // -> showLoadingToast()\nToast.clear(); // -> closeToast()\nToast.setDefaultOptions(); // -> setToastDefaultOptions()\nToast.resetDefaultOptions(); // -> resetToastDefaultOptions()\n
\nAt the same time, Vant 4 will no longer globally register the $toast
method on the this
object, which means that $toast
will not be accessible on the this
object.
In order to facilitate code migration, we provide a compatibility solution, you can use the Toast
object exported in @vant/compat
to be compatible with the original code.
import { Toast } from '@vant/compat';\n\nToast();\nToast.clear();\n
\nThe Toast
exported in @vant/compat
has exactly the same API and behavior as Toast
in Vant 3, so you only need to modify the reference path of Toast
, and other codes can remain unchanged.
In Vant 4, the calling method of the Notify
component has also been adjusted, which is consistent with the changes of the Dialog
component:
// Vant 3\nNotify(); // function call\nNotify.Component; // component object\n\n// Vant 4\nshowNotify(); // function call\nNotify; // component object\n
\nOther methods mounted on Notify
have also been renamed, and the mapping relationship between the old and new APIs is as follows:
Notify(); // -> showNotify()\nNotify.clear(); // -> closeNotify()\nNotify.setDefaultOptions(); // -> setNotifyDefaultOptions()\nNotify.resetDefaultOptions(); // -> resetNotifyDefaultOptions()\n
\nAt the same time, Vant 4 will no longer globally register the $notify
method on the this
object, which means that $notify
will not be accessible on the this
object.
In order to facilitate code migration, we provide a compatibility solution, you can use the Notify
object exported in @vant/compat
to be compatible with the original code.
import { Notify } from '@vant/compat';\n\nNotify();\nNotify.clear();\n
\nNotify
exported in @vant/compat
has exactly the same API and behavior as Notify
in Vant 3, so you only need to modify the reference path of Notify
, and other codes can remain unchanged.
In Vant 4, the calling method of the ImagePreview
component has also been adjusted, which is consistent with the changes of the Dialog
component:
// Vant 3\nImagePreview(); // function call\nImagePreview.Component; // component object\n\n// Vant 4\nshowImagePreview(); // function call\nImagePreview; // component object\n
\nIn order to facilitate code migration, we provide a compatibility solution, you can use the ImagePreview
object exported in @vant/compat
to be compatible with the original code.
import { ImagePreview } from '@vant/compat';\n\nImagePreview();\n
\nThe ImagePreview
exported in @vant/compat
has exactly the same API and behavior as the ImagePreview
in Vant 3, so you only need to modify the reference path of ImagePreview
, and other codes can remain unchanged.
Starting from Vant 4, all events are named in camelCase officially recommended by Vue.
\n// Vant 3\nemit('click-input');\n\n// Vant 4\nemit('clickInput');\n
\nThis change does not affect the original template code, Vue will automatically format the event name in the template, so you don\'t need to make any changes.
\n<!-- The following code works as usual without any changes -->\n<van-field @click-input="onClick" />\n
\nIf you use the Vant component in JSX, you need to adjust the monitored event name to camel case format, the original dash format will no longer take effect, and the new monitoring method is more in line with JSX\'s own specifications:
\n// Vant 3\n<Field onClick-input={onClick} />\n\n// Vant 4\n<Field onClickInput={onClick} />\n
\nIn Vant 4.0 version, the following APIs have been updated incompatible:
\nshow-postal
prop.postal-validator
prop.change-area
event changed to PickerOption[]
type.getArea
instance method.Some adjustments have been made to the CSS style of Popup. If you have added some custom CSS styles to the Popup component, please check if this update affects the UI in the project.
\nbox-sizing: border-box
style by default.position="center"
, to solve the problem that the width of the Popup cannot be adjusted correctly.// Vant 3\n.van-popup --center {\n left: 50%;\n transform: translate3d(-50%, -50%, 0);\n}\n\n// Vant 4\n.van-popup --center {\n left: 0;\n right: 0;\n width: fit-content;\n max-width: calc(100vw - var(--van-padding-md) * 2);\n margin: 0 auto;\n transform: translateY(-50%);\n}\n
\nclick
and disabled
events, please use click-tab
event insteadIn the previous version, Vant components had two primary colors, some components used blue (#1989fa) as the primary color, and others used red (#ee0a24).
\nTo keep the colour specification consistent,, we have unified the primary color in Vant 4, and all components use blue as the primary color.
\nThe primary color of the following components has been changed from red to blue:
\nCurrently, Vant already supports theme customization capabilities based on CSS variables, which is more flexible than Less customization. Therefore, Vant 4 will no longer provide Less-based theme customization.
\nThis means that Vant\'s npm package will no longer contain .less
style source files, only the compiled .css
style files will be provided.
If your project is using an old version of Less theme customization, please use the ConfigProvider global configuration component to replace it.
\nWith code size and usability in mind, we have simplified the names of some CSS variables, and used shorter words in the variable names to reduce the code size.
\nThis upgrade includes the following variable name changes:
\nanimation-duration -> duration\nanimation-timing-function-enter -> ease-out\nanimation-timing-function-leave -> ease-in\nbackground-color -> background\nbackground-color-light -> background-2\nborder-radius -> radius\nborder-width-base -> border-width\nbox-shadow -> shadow\nfont-family -> font\nfont-weight-bold -> font-bold\nprice-integer-font -> price-font\ntext-link -> link\ntransition-duration -> duration\n
\nDue to the large number of CSS variables involved, it is recommended that you perform a global match and replace in the code repository.
\nFor the ConfigProvider
component, we have added the ConfigProviderThemeVars
type definition to provide full type hints. In TypeScript code, you can use type hints to ensure that theme variables are substituted correctly.
import type { ConfigProviderThemeVars } from 'vant';\n\nconst themeVars: ConfigProviderThemeVars = {\n sliderBarHeight: '4px',\n};\n
\nVant \u4E2D\u9ED8\u8BA4\u5305\u542B\u4E86\u4E00\u4E9B\u5E38\u7528\u6837\u5F0F\uFF0C\u53EF\u4EE5\u76F4\u63A5\u901A\u8FC7 className \u7684\u65B9\u5F0F\u4F7F\u7528\u3002
\n\u5F53\u6587\u672C\u5185\u5BB9\u957F\u5EA6\u8D85\u8FC7\u5BB9\u5668\u6700\u5927\u5BBD\u5EA6\u65F6\uFF0C\u81EA\u52A8\u7701\u7565\u591A\u4F59\u7684\u6587\u672C\u3002
\n<!-- \u6700\u591A\u663E\u793A\u4E00\u884C -->\n<div class="van-ellipsis">\u8FD9\u662F\u4E00\u6BB5\u6700\u591A\u663E\u793A\u4E00\u884C\u7684\u6587\u5B57\uFF0C\u591A\u4F59\u7684\u5185\u5BB9\u4F1A\u88AB\u7701\u7565</div>\n\n<!-- \u6700\u591A\u663E\u793A\u4E24\u884C -->\n<div class="van-multi-ellipsis--l2">\n \u8FD9\u662F\u4E00\u6BB5\u6700\u591A\u663E\u793A\u4E24\u884C\u7684\u6587\u5B57\uFF0C\u591A\u4F59\u7684\u5185\u5BB9\u4F1A\u88AB\u7701\u7565\n</div>\n\n<!-- \u6700\u591A\u663E\u793A\u4E09\u884C -->\n<div class="van-multi-ellipsis--l3">\n \u8FD9\u662F\u4E00\u6BB5\u6700\u591A\u663E\u793A\u4E09\u884C\u7684\u6587\u5B57\uFF0C\u591A\u4F59\u7684\u5185\u5BB9\u4F1A\u88AB\u7701\u7565\n</div>\n
\n\u4E3A\u5143\u7D20\u6DFB\u52A0 Retina \u5C4F\u5E55\u4E0B\u7684 1px \u8FB9\u6846\uFF08\u5373 hairline\uFF09\uFF0C\u57FA\u4E8E\u4F2A\u7C7B transform \u5B9E\u73B0\u3002
\n<!-- \u4E0A\u8FB9\u6846 -->\n<div class="van-hairline--top"></div>\n\n<!-- \u4E0B\u8FB9\u6846 -->\n<div class="van-hairline--bottom"></div>\n\n<!-- \u5DE6\u8FB9\u6846 -->\n<div class="van-hairline--left"></div>\n\n<!-- \u53F3\u8FB9\u6846 -->\n<div class="van-hairline--right"></div>\n\n<!-- \u4E0A\u4E0B\u8FB9\u6846 -->\n<div class="van-hairline--top-bottom"></div>\n\n<!-- \u5168\u8FB9\u6846 -->\n<div class="van-hairline--surround"></div>\n
\n\u4E3A\u5143\u7D20\u6DFB\u52A0\u5B89\u5168\u533A\u9002\u914D\u3002
\n<!-- \u9876\u90E8\u5B89\u5168\u533A -->\n<div class="van-safe-area-top"></div>\n\n<!-- \u5E95\u90E8\u5B89\u5168\u533A -->\n<div class="van-safe-area-bottom"></div>\n
\n\u53EF\u4EE5\u901A\u8FC7 transition
\u7EC4\u4EF6\u4F7F\u7528\u5185\u7F6E\u7684\u52A8\u753B\u7C7B\u3002
<!-- \u6DE1\u5165 -->\n<transition name="van-fade">\n <div v-show="visible">Fade</div>\n</transition>\n\n<!-- \u4E0A\u6ED1\u8FDB\u5165 -->\n<transition name="van-slide-up">\n <div v-show="visible">Slide Up</div>\n</transition>\n\n<!-- \u4E0B\u6ED1\u8FDB\u5165 -->\n<transition name="van-slide-down">\n <div v-show="visible">Slide Down</div>\n</transition>\n\n<!-- \u5DE6\u6ED1\u8FDB\u5165 -->\n<transition name="van-slide-left">\n <div v-show="visible">Slide Left</div>\n</transition>\n\n<!-- \u53F3\u6ED1\u8FDB\u5165 -->\n<transition name="van-slide-right">\n <div v-show="visible">Slide Right</div>\n</transition>\n
\n\u4E3A\u5143\u7D20\u6DFB\u52A0\u89E6\u78B0\u53CD\u9988\u6548\u679C\uFF0C\u89E6\u78B0\u540E\uFF0C\u5143\u7D20\u7684\u900F\u660E\u5EA6\u4F1A\u964D\u4F4E\u3002
\n\u901A\u5E38\u7528\u4E8E\u6309\u94AE\u7B49\u53EF\u70B9\u51FB\u7684\u5143\u7D20\u4E0A\u3002
\n<div class="van-haptics-feedback"></div>\n
\n\u6E05\u9664\u5143\u7D20\u5728 float \u5E03\u5C40\u4E0B\u7684\u6D6E\u52A8\uFF0C
\n<div class="van-clearfix"></div>\n
\nVant \u4E2D\u9ED8\u8BA4\u5305\u542B\u4E86\u4E00\u4E9B\u5E38\u7528\u6837\u5F0F\uFF0C\u53EF\u4EE5\u76F4\u63A5\u901A\u8FC7 className \u7684\u65B9\u5F0F\u4F7F\u7528\u3002
\n\u5F53\u6587\u672C\u5185\u5BB9\u957F\u5EA6\u8D85\u8FC7\u5BB9\u5668\u6700\u5927\u5BBD\u5EA6\u65F6\uFF0C\u81EA\u52A8\u7701\u7565\u591A\u4F59\u7684\u6587\u672C\u3002
\n<!-- \u6700\u591A\u663E\u793A\u4E00\u884C -->\n<div class="van-ellipsis">\u8FD9\u662F\u4E00\u6BB5\u6700\u591A\u663E\u793A\u4E00\u884C\u7684\u6587\u5B57\uFF0C\u591A\u4F59\u7684\u5185\u5BB9\u4F1A\u88AB\u7701\u7565</div>\n\n<!-- \u6700\u591A\u663E\u793A\u4E24\u884C -->\n<div class="van-multi-ellipsis--l2">\n \u8FD9\u662F\u4E00\u6BB5\u6700\u591A\u663E\u793A\u4E24\u884C\u7684\u6587\u5B57\uFF0C\u591A\u4F59\u7684\u5185\u5BB9\u4F1A\u88AB\u7701\u7565\n</div>\n\n<!-- \u6700\u591A\u663E\u793A\u4E09\u884C -->\n<div class="van-multi-ellipsis--l3">\n \u8FD9\u662F\u4E00\u6BB5\u6700\u591A\u663E\u793A\u4E09\u884C\u7684\u6587\u5B57\uFF0C\u591A\u4F59\u7684\u5185\u5BB9\u4F1A\u88AB\u7701\u7565\n</div>\n
\n\u4E3A\u5143\u7D20\u6DFB\u52A0 Retina \u5C4F\u5E55\u4E0B\u7684 1px \u8FB9\u6846\uFF08\u5373 hairline\uFF09\uFF0C\u57FA\u4E8E\u4F2A\u7C7B transform \u5B9E\u73B0\u3002
\n<!-- \u4E0A\u8FB9\u6846 -->\n<div class="van-hairline--top"></div>\n\n<!-- \u4E0B\u8FB9\u6846 -->\n<div class="van-hairline--bottom"></div>\n\n<!-- \u5DE6\u8FB9\u6846 -->\n<div class="van-hairline--left"></div>\n\n<!-- \u53F3\u8FB9\u6846 -->\n<div class="van-hairline--right"></div>\n\n<!-- \u4E0A\u4E0B\u8FB9\u6846 -->\n<div class="van-hairline--top-bottom"></div>\n\n<!-- \u5168\u8FB9\u6846 -->\n<div class="van-hairline--surround"></div>\n
\n\u4E3A\u5143\u7D20\u6DFB\u52A0\u5B89\u5168\u533A\u9002\u914D\u3002
\n<!-- \u9876\u90E8\u5B89\u5168\u533A -->\n<div class="van-safe-area-top"></div>\n\n<!-- \u5E95\u90E8\u5B89\u5168\u533A -->\n<div class="van-safe-area-bottom"></div>\n
\n\u53EF\u4EE5\u901A\u8FC7 transition
\u7EC4\u4EF6\u4F7F\u7528\u5185\u7F6E\u7684\u52A8\u753B\u7C7B\u3002
<!-- \u6DE1\u5165 -->\n<transition name="van-fade">\n <div v-show="visible">Fade</div>\n</transition>\n\n<!-- \u4E0A\u6ED1\u8FDB\u5165 -->\n<transition name="van-slide-up">\n <div v-show="visible">Slide Up</div>\n</transition>\n\n<!-- \u4E0B\u6ED1\u8FDB\u5165 -->\n<transition name="van-slide-down">\n <div v-show="visible">Slide Down</div>\n</transition>\n\n<!-- \u5DE6\u6ED1\u8FDB\u5165 -->\n<transition name="van-slide-left">\n <div v-show="visible">Slide Left</div>\n</transition>\n\n<!-- \u53F3\u6ED1\u8FDB\u5165 -->\n<transition name="van-slide-right">\n <div v-show="visible">Slide Right</div>\n</transition>\n
\n\u4E3A\u5143\u7D20\u6DFB\u52A0\u89E6\u78B0\u53CD\u9988\u6548\u679C\uFF0C\u89E6\u78B0\u540E\uFF0C\u5143\u7D20\u7684\u900F\u660E\u5EA6\u4F1A\u964D\u4F4E\u3002
\n\u901A\u5E38\u7528\u4E8E\u6309\u94AE\u7B49\u53EF\u70B9\u51FB\u7684\u5143\u7D20\u4E0A\u3002
\n<div class="van-haptics-feedback"></div>\n
\n\u6E05\u9664\u5143\u7D20\u5728 float \u5E03\u5C40\u4E0B\u7684\u6D6E\u52A8\uFF0C
\n<div class="van-clearfix"></div>\n
\nEdit and save the contact information.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { ContactEdit } from 'vant';\n\nconst app = createApp();\napp.use(ContactEdit);\n
\n<van-contact-edit\n is-edit\n show-set-default\n :contact-info="editingContact"\n set-default-label="Set as the default contact"\n @save="onSave"\n @delete="onDelete"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const editingContact = ref({\n tel: '',\n name: '',\n });\n const onSave = (contactInfo) => showToast('Save');\n const onDelete = (contactInfo) => showToast('Delete');\n return {\n onSave,\n onDelete,\n editingContact,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
contact-info | \nContact Info | \nContactEditInfo | \n{} | \n
is-edit | \nWhether is editing | \nboolean | \nfalse | \n
is-saving | \nWhether to show save button loading status | \nboolean | \nfalse | \n
is-deleting | \nWhether to show delete button loading status | \nboolean | \nfalse | \n
tel-validator | \nThe method to validate tel | \n(tel: string) => boolean | \n- | \n
show-set-default | \nWhether to show default contact switch | \nboolean | \nfalse | \n
set-default-label | \ndefault contact switch label | \nstring | \n- | \n
Event | \nDescription | \nArguments | \n
---|---|---|
save | \nEmitted when the save button is clicked | \ncontent: contact info | \n
delete | \nEmitted when the delete button is clicked | \ncontent: contact info | \n
change-default | \nEmitted when the default contact is switched | \nchecked\uFF1Acontact is not the default | \n
key | \nDescription | \nType | \n
---|---|---|
name | \nName | \nstring | \n
tel | \nPhone | \nstring | \n
isDefault | \nIs Default | \nboolean | undefined | \n
The component exports the following type definitions:
\nimport type { ContactEditInfo, ContactEditProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-contact-edit-padding | \nvar(--van-padding-md) | \n- | \n
--van-contact-edit-fields-radius | \nvar(--van-radius-md) | \n- | \n
--van-contact-edit-buttons-padding | \nvar(--van-padding-xl) 0 | \n- | \n
--van-contact-edit-button-margin-bottom | \nvar(--van-padding-sm) | \n- | \n
--van-contact-edit-button-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-contact-edit-field-label-width | \n4.1em | \n- | \n
Edit and save the contact information.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { ContactEdit } from 'vant';\n\nconst app = createApp();\napp.use(ContactEdit);\n
\n<van-contact-edit\n is-edit\n show-set-default\n :contact-info="editingContact"\n set-default-label="Set as the default contact"\n @save="onSave"\n @delete="onDelete"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const editingContact = ref({\n tel: '',\n name: '',\n });\n const onSave = (contactInfo) => showToast('Save');\n const onDelete = (contactInfo) => showToast('Delete');\n return {\n onSave,\n onDelete,\n editingContact,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
contact-info | \nContact Info | \nContactEditInfo | \n{} | \n
is-edit | \nWhether is editing | \nboolean | \nfalse | \n
is-saving | \nWhether to show save button loading status | \nboolean | \nfalse | \n
is-deleting | \nWhether to show delete button loading status | \nboolean | \nfalse | \n
tel-validator | \nThe method to validate tel | \n(tel: string) => boolean | \n- | \n
show-set-default | \nWhether to show default contact switch | \nboolean | \nfalse | \n
set-default-label | \ndefault contact switch label | \nstring | \n- | \n
Event | \nDescription | \nArguments | \n
---|---|---|
save | \nEmitted when the save button is clicked | \ncontent: contact info | \n
delete | \nEmitted when the delete button is clicked | \ncontent: contact info | \n
change-default | \nEmitted when the default contact is switched | \nchecked\uFF1Acontact is not the default | \n
key | \nDescription | \nType | \n
---|---|---|
name | \nName | \nstring | \n
tel | \nPhone | \nstring | \n
isDefault | \nIs Default | \nboolean | undefined | \n
The component exports the following type definitions:
\nimport type { ContactEditInfo, ContactEditProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-contact-edit-padding | \nvar(--van-padding-md) | \n- | \n
--van-contact-edit-fields-radius | \nvar(--van-radius-md) | \n- | \n
--van-contact-edit-buttons-padding | \nvar(--van-padding-xl) 0 | \n- | \n
--van-contact-edit-button-margin-bottom | \nvar(--van-padding-sm) | \n- | \n
--van-contact-edit-button-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-contact-edit-field-label-width | \n4.1em | \n- | \n
Used to combine multiple Picker components, allow users to select multiple value.
\nThe following components can be placed inside PickerGroup:
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { PickerGroup } from 'vant';\n\nconst app = createApp();\napp.use(PickerGroup);\n
\nPlace a DatePicker
component and a TimePicker
component in the default slot of the PickerGroup
to select both a date and a time.
PickerGroup
will render a unified toolbar, so the child components will not render is\'s toolbar, and the toolbar props and events need to be set to the PickerGroup
, such as the title
prop, confirm
event, cancel
event, etc. Other props and events in child components can be used as before.
<van-picker-group\n title="Title"\n :tabs="['Date', 'Time']"\n @confirm="onConfirm"\n @cancel="onCancel"\n>\n <van-date-picker\n v-model="currentDate"\n :min-date="minDate"\n :max-date="maxDate"\n />\n <van-time-picker v-model="currentTime" />\n</van-picker-group>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const currentDate = ref(['2022', '06', '01']);\n const currentTime = ref(['12', '00']);\n\n const onConfirm = () => {\n showToast(\n `${currentDate.value.join('/')} ${currentTime.value.join(':')}`,\n );\n };\n\n const onCancel = () => {\n showToast('cancel');\n };\n\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n currentDate,\n currentTime,\n onConfirm,\n onCancel,\n };\n },\n};\n
\nIn some scenarios, in order to ensure that users can select all Pickers in turn, you can set the next-step-text
prop of PickerGroup. After setting the next-step-text
prop, if the user has not switched to the last tab, the button in the upper right corner will become "Next Step", and automatically switch to the next Picker after clicking. When the user switches to the last tab, the button in the upper right corner changes to "Confirm".
<van-picker-group\n title="Title"\n :tabs="['Date', 'Time']"\n next-step-text="Next Step"\n @confirm="onConfirm"\n @cancel="onCancel"\n>\n <van-date-picker\n v-model="currentDate"\n :min-date="minDate"\n :max-date="maxDate"\n />\n <van-time-picker v-model="currentTime" />\n</van-picker-group>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const currentDate = ref(['2022', '06', '01']);\n const currentTime = ref(['12', '00']);\n\n const onConfirm = () => {\n showToast(\n `${currentDate.value.join('/')} ${currentTime.value.join(':')}`,\n );\n };\n\n const onCancel = () => {\n showToast('cancel');\n };\n\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n currentDate,\n currentTime,\n onConfirm,\n onCancel,\n };\n },\n};\n
\nPlace two DatePicker
components in the default slot of PickerGroup
to select the time range.
<van-picker-group\n title="Title"\n :tabs="['Start Date', 'End Date']"\n @confirm="onConfirm"\n @cancel="onCancel"\n>\n <van-date-picker\n v-model="startDate"\n :min-date="minDate"\n :max-date="maxDate"\n />\n <van-date-picker v-model="endDate" :min-date="minDate" :max-date="maxDate" />\n</van-picker-group>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const startDate = ref(['2022', '06', '01']);\n const endDate = ref(['2023', '06', '01']);\n\n const onConfirm = () => {\n showToast(`${startDate.value.join('/')} ${endDate.value.join('/')}`);\n };\n\n const onCancel = () => {\n showToast('cancel');\n };\n\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n endDate,\n startDate,\n onConfirm,\n onCancel,\n };\n },\n};\n
\nPlace two TimePicker
components in the default slot of PickerGroup
to select the time range.
<van-picker-group\n title="Title"\n :tabs="['Start Time', 'End Time']"\n @confirm="onConfirm"\n @cancel="onCancel"\n>\n <van-time-picker v-model="startTime" />\n <van-time-picker v-model="endTime" />\n</van-picker-group>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const startTime = ref(['12', '00']);\n const endTime = ref(['12', '00']);\n\n const onConfirm = () => {\n showToast(`${startTime.value.join(':')} ${endTime.value.join(':')}`);\n };\n\n const onCancel = () => {\n showToast('cancel');\n };\n\n return {\n endTime,\n startTime,\n onConfirm,\n onCancel,\n };\n },\n};\n
\nSupports both uncontrolled and controlled modes:
\nv-model:active-tab
is not bound, the PickerGroup component completely controls the tab
switching.v-model:active-tab
is bound, PickerGroup supports controlled mode, and the tab
switching is controlled by both the v-model:active-tab
value and the component itself.<van-button type="primary" @click="setActiveTab">\n toggle tab, current {{ activeTab }}\n</van-button>\n<van-picker-group\n v-model:active-tab="activeTab"\n title="Title"\n :tabs="['Date', 'Time']"\n @confirm="onConfirm"\n @cancel="onCancel"\n>\n <van-date-picker\n v-model="currentDate"\n :min-date="minDate"\n :max-date="maxDate"\n />\n <van-time-picker v-model="currentTime" />\n</van-picker-group>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const activeTab = ref(0);\n const currentDate = ref(['2022', '06', '01']);\n const currentTime = ref(['12', '00']);\n\n const setActiveTab = () => {\n activeTab.value = activeTab.value ? 0 : 1;\n };\n\n const onConfirm = () => {\n showToast(\n `${currentDate.value.join('/')} ${currentTime.value.join(':')}`,\n );\n };\n const onCancel = () => {\n showToast('cancel');\n };\n\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n activeTab,\n currentDate,\n currentTime,\n setActiveTab,\n onConfirm,\n onCancel,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:active-tab v4.3.2 | \nSet index of active tab | \nnumber | string | \n0 | \n
tabs | \nTitles of tabs | \nstring[] | \n[] | \n
title | \nToolbar title | \nstring | \n\'\' | \n
next-step-text v4.0.8 | \nText of next step button | \nstring | \n\'\' | \n
confirm-button-text | \nText of confirm button | \nstring | \nConfirm | \n
cancel-button-text | \nText of cancel button | \nstring | \nCancel | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
toolbar | \nCustom toolbar content | \n- | \n
title | \nCustom title | \n- | \n
confirm | \nCustom confirm button text | \n- | \n
cancel | \nCustom cancel button text | \n- | \n
The component exports the following type definitions:
\nimport type { PickerGroupProps, PickerGroupThemeVars } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-picker-group-background | \n--van-background-2 | \n- | \n
Used to combine multiple Picker components, allow users to select multiple value.
\nThe following components can be placed inside PickerGroup:
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { PickerGroup } from 'vant';\n\nconst app = createApp();\napp.use(PickerGroup);\n
\nPlace a DatePicker
component and a TimePicker
component in the default slot of the PickerGroup
to select both a date and a time.
PickerGroup
will render a unified toolbar, so the child components will not render is\'s toolbar, and the toolbar props and events need to be set to the PickerGroup
, such as the title
prop, confirm
event, cancel
event, etc. Other props and events in child components can be used as before.
<van-picker-group\n title="Title"\n :tabs="['Date', 'Time']"\n @confirm="onConfirm"\n @cancel="onCancel"\n>\n <van-date-picker\n v-model="currentDate"\n :min-date="minDate"\n :max-date="maxDate"\n />\n <van-time-picker v-model="currentTime" />\n</van-picker-group>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const currentDate = ref(['2022', '06', '01']);\n const currentTime = ref(['12', '00']);\n\n const onConfirm = () => {\n showToast(\n `${currentDate.value.join('/')} ${currentTime.value.join(':')}`,\n );\n };\n\n const onCancel = () => {\n showToast('cancel');\n };\n\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n currentDate,\n currentTime,\n onConfirm,\n onCancel,\n };\n },\n};\n
\nIn some scenarios, in order to ensure that users can select all Pickers in turn, you can set the next-step-text
prop of PickerGroup. After setting the next-step-text
prop, if the user has not switched to the last tab, the button in the upper right corner will become "Next Step", and automatically switch to the next Picker after clicking. When the user switches to the last tab, the button in the upper right corner changes to "Confirm".
<van-picker-group\n title="Title"\n :tabs="['Date', 'Time']"\n next-step-text="Next Step"\n @confirm="onConfirm"\n @cancel="onCancel"\n>\n <van-date-picker\n v-model="currentDate"\n :min-date="minDate"\n :max-date="maxDate"\n />\n <van-time-picker v-model="currentTime" />\n</van-picker-group>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const currentDate = ref(['2022', '06', '01']);\n const currentTime = ref(['12', '00']);\n\n const onConfirm = () => {\n showToast(\n `${currentDate.value.join('/')} ${currentTime.value.join(':')}`,\n );\n };\n\n const onCancel = () => {\n showToast('cancel');\n };\n\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n currentDate,\n currentTime,\n onConfirm,\n onCancel,\n };\n },\n};\n
\nPlace two DatePicker
components in the default slot of PickerGroup
to select the time range.
<van-picker-group\n title="Title"\n :tabs="['Start Date', 'End Date']"\n @confirm="onConfirm"\n @cancel="onCancel"\n>\n <van-date-picker\n v-model="startDate"\n :min-date="minDate"\n :max-date="maxDate"\n />\n <van-date-picker v-model="endDate" :min-date="minDate" :max-date="maxDate" />\n</van-picker-group>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const startDate = ref(['2022', '06', '01']);\n const endDate = ref(['2023', '06', '01']);\n\n const onConfirm = () => {\n showToast(`${startDate.value.join('/')} ${endDate.value.join('/')}`);\n };\n\n const onCancel = () => {\n showToast('cancel');\n };\n\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n endDate,\n startDate,\n onConfirm,\n onCancel,\n };\n },\n};\n
\nPlace two TimePicker
components in the default slot of PickerGroup
to select the time range.
<van-picker-group\n title="Title"\n :tabs="['Start Time', 'End Time']"\n @confirm="onConfirm"\n @cancel="onCancel"\n>\n <van-time-picker v-model="startTime" />\n <van-time-picker v-model="endTime" />\n</van-picker-group>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const startTime = ref(['12', '00']);\n const endTime = ref(['12', '00']);\n\n const onConfirm = () => {\n showToast(`${startTime.value.join(':')} ${endTime.value.join(':')}`);\n };\n\n const onCancel = () => {\n showToast('cancel');\n };\n\n return {\n endTime,\n startTime,\n onConfirm,\n onCancel,\n };\n },\n};\n
\nSupports both uncontrolled and controlled modes:
\nv-model:active-tab
is not bound, the PickerGroup component completely controls the tab
switching.v-model:active-tab
is bound, PickerGroup supports controlled mode, and the tab
switching is controlled by both the v-model:active-tab
value and the component itself.<van-button type="primary" @click="setActiveTab">\n toggle tab, current {{ activeTab }}\n</van-button>\n<van-picker-group\n v-model:active-tab="activeTab"\n title="Title"\n :tabs="['Date', 'Time']"\n @confirm="onConfirm"\n @cancel="onCancel"\n>\n <van-date-picker\n v-model="currentDate"\n :min-date="minDate"\n :max-date="maxDate"\n />\n <van-time-picker v-model="currentTime" />\n</van-picker-group>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const activeTab = ref(0);\n const currentDate = ref(['2022', '06', '01']);\n const currentTime = ref(['12', '00']);\n\n const setActiveTab = () => {\n activeTab.value = activeTab.value ? 0 : 1;\n };\n\n const onConfirm = () => {\n showToast(\n `${currentDate.value.join('/')} ${currentTime.value.join(':')}`,\n );\n };\n const onCancel = () => {\n showToast('cancel');\n };\n\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n activeTab,\n currentDate,\n currentTime,\n setActiveTab,\n onConfirm,\n onCancel,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:active-tab v4.3.2 | \nSet index of active tab | \nnumber | string | \n0 | \n
tabs | \nTitles of tabs | \nstring[] | \n[] | \n
title | \nToolbar title | \nstring | \n\'\' | \n
next-step-text v4.0.8 | \nText of next step button | \nstring | \n\'\' | \n
confirm-button-text | \nText of confirm button | \nstring | \nConfirm | \n
cancel-button-text | \nText of cancel button | \nstring | \nCancel | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
toolbar | \nCustom toolbar content | \n- | \n
title | \nCustom title | \n- | \n
confirm | \nCustom confirm button text | \n- | \n
cancel | \nCustom cancel button text | \n- | \n
The component exports the following type definitions:
\nimport type { PickerGroupProps, PickerGroupThemeVars } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-picker-group-background | \n--van-background-2 | \n- | \n
\u5C55\u793A\u5730\u5740\u4FE1\u606F\u5217\u8868\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { AddressList } from 'vant';\n\nconst app = createApp();\napp.use(AddressList);\n
\n<van-address-list\n v-model="chosenAddressId"\n :list="list"\n :disabled-list="disabledList"\n disabled-text="\u4EE5\u4E0B\u5730\u5740\u8D85\u51FA\u914D\u9001\u8303\u56F4"\n default-tag-text="\u9ED8\u8BA4"\n @add="onAdd"\n @edit="onEdit"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const chosenAddressId = ref('1');\n const list = [\n {\n id: '1',\n name: '\u5F20\u4E09',\n tel: '13000000000',\n address: '\u6D59\u6C5F\u7701\u676D\u5DDE\u5E02\u897F\u6E56\u533A\u6587\u4E09\u8DEF 138 \u53F7\u4E1C\u65B9\u901A\u4FE1\u5927\u53A6 7 \u697C 501 \u5BA4',\n isDefault: true,\n },\n {\n id: '2',\n name: '\u674E\u56DB',\n tel: '1310000000',\n address: '\u6D59\u6C5F\u7701\u676D\u5DDE\u5E02\u62F1\u5885\u533A\u83AB\u5E72\u5C71\u8DEF 50 \u53F7',\n },\n ];\n const disabledList = [\n {\n id: '3',\n name: '\u738B\u4E94',\n tel: '1320000000',\n address: '\u6D59\u6C5F\u7701\u676D\u5DDE\u5E02\u6EE8\u6C5F\u533A\u6C5F\u5357\u5927\u9053 15 \u53F7',\n },\n ];\n\n const onAdd = () => showToast('\u65B0\u589E\u5730\u5740');\n const onEdit = (item, index) => showToast('\u7F16\u8F91\u5730\u5740:' + index);\n\n return {\n list,\n onAdd,\n onEdit,\n disabledList,\n chosenAddressId,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u9009\u4E2D\u5730\u5740\u7684 id | \nnumber | string | \n- | \n
list | \n\u5730\u5740\u5217\u8868 | \nAddressListAddress[] | \n[] | \n
disabled-list | \n\u4E0D\u53EF\u914D\u9001\u5730\u5740\u5217\u8868 | \nAddressListAddress[] | \n[] | \n
disabled-text | \n\u4E0D\u53EF\u914D\u9001\u63D0\u793A\u6587\u6848 | \nstring | \n- | \n
switchable | \n\u662F\u5426\u5141\u8BB8\u5207\u6362\u5730\u5740 | \nboolean | \ntrue | \n
show-add-button | \n\u662F\u5426\u663E\u793A\u5E95\u90E8\u6309\u94AE | \nboolean | \ntrue | \n
add-button-text | \n\u5E95\u90E8\u6309\u94AE\u6587\u5B57 | \nstring | \n\u65B0\u589E\u5730\u5740 | \n
default-tag-text | \n\u9ED8\u8BA4\u5730\u5740\u6807\u7B7E\u6587\u5B57 | \nstring | \n- | \n
right-icon v4.5.0 | \n\u53F3\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \nedit | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
add | \n\u70B9\u51FB\u65B0\u589E\u6309\u94AE\u65F6\u89E6\u53D1 | \n- | \n
edit | \n\u70B9\u51FB\u7F16\u8F91\u6309\u94AE\u65F6\u89E6\u53D1 | \nitem: AddressListAddress, index: number | \n
select | \n\u5207\u6362\u9009\u4E2D\u7684\u5730\u5740\u65F6\u89E6\u53D1 | \nitem: AddressListAddress, index: number | \n
edit-disabled | \n\u7F16\u8F91\u4E0D\u53EF\u914D\u9001\u7684\u5730\u5740\u65F6\u89E6\u53D1 | \nitem: AddressListAddress, index: number | \n
select-disabled | \n\u9009\u4E2D\u4E0D\u53EF\u914D\u9001\u7684\u5730\u5740\u65F6\u89E6\u53D1 | \nitem: AddressListAddress, index: number | \n
click-item | \n\u70B9\u51FB\u4EFB\u610F\u5730\u5740\u65F6\u89E6\u53D1 | \nitem: AddressListAddress, index: number | \n
\u952E\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
id | \n\u6BCF\u6761\u5730\u5740\u7684\u552F\u4E00\u6807\u8BC6 | \nnumber | string | \n
name | \n\u59D3\u540D | \nstring | \n
tel | \n\u624B\u673A\u53F7 | \nnumber | string | \n
address | \n\u8BE6\u7EC6\u5730\u5740 | \nstring | \n
isDefault | \n\u662F\u5426\u4E3A\u9ED8\u8BA4\u5730\u5740 | \nboolean | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
default | \n\u5728\u5217\u8868\u4E0B\u65B9\u63D2\u5165\u5185\u5BB9 | \n- | \n
top | \n\u5728\u9876\u90E8\u63D2\u5165\u5185\u5BB9 | \n- | \n
item-bottom | \n\u5728\u5217\u8868\u9879\u5E95\u90E8\u63D2\u5165\u5185\u5BB9 | \nitem: AddressListAddress | \n
tag | \n\u81EA\u5B9A\u4E49\u5217\u8868\u9879\u6807\u7B7E\u5185\u5BB9 | \nitem: AddressListAddress | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { AddressListProps, AddressListAddress } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-address-list-padding | \nvar(--van-padding-sm) var(--van-padding-sm) 80px | \n- | \n
--van-address-list-disabled-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-address-list-disabled-text-padding | \nvar(--van-padding-base) * 5 0 var(--van-padding-md) | \n- | \n
--van-address-list-disabled-text-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-address-list-disabled-text-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-address-list-add-button-z-index | \n999 | \n- | \n
--van-address-list-item-padding | \nvar(--van-padding-sm) | \n- | \n
--van-address-list-item-text-color | \nvar(--van-text-color) | \n- | \n
--van-address-list-item-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-address-list-item-font-size | \n13px | \n- | \n
--van-address-list-item-line-height | \nvar(--van-line-height-sm) | \n- | \n
--van-address-list-radio-color | \nvar(--van-primary-color) | \n- | \n
--van-address-list-edit-icon-size | \n20px | \n- | \n
\u5C55\u793A\u5730\u5740\u4FE1\u606F\u5217\u8868\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { AddressList } from 'vant';\n\nconst app = createApp();\napp.use(AddressList);\n
\n<van-address-list\n v-model="chosenAddressId"\n :list="list"\n :disabled-list="disabledList"\n disabled-text="\u4EE5\u4E0B\u5730\u5740\u8D85\u51FA\u914D\u9001\u8303\u56F4"\n default-tag-text="\u9ED8\u8BA4"\n @add="onAdd"\n @edit="onEdit"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const chosenAddressId = ref('1');\n const list = [\n {\n id: '1',\n name: '\u5F20\u4E09',\n tel: '13000000000',\n address: '\u6D59\u6C5F\u7701\u676D\u5DDE\u5E02\u897F\u6E56\u533A\u6587\u4E09\u8DEF 138 \u53F7\u4E1C\u65B9\u901A\u4FE1\u5927\u53A6 7 \u697C 501 \u5BA4',\n isDefault: true,\n },\n {\n id: '2',\n name: '\u674E\u56DB',\n tel: '1310000000',\n address: '\u6D59\u6C5F\u7701\u676D\u5DDE\u5E02\u62F1\u5885\u533A\u83AB\u5E72\u5C71\u8DEF 50 \u53F7',\n },\n ];\n const disabledList = [\n {\n id: '3',\n name: '\u738B\u4E94',\n tel: '1320000000',\n address: '\u6D59\u6C5F\u7701\u676D\u5DDE\u5E02\u6EE8\u6C5F\u533A\u6C5F\u5357\u5927\u9053 15 \u53F7',\n },\n ];\n\n const onAdd = () => showToast('\u65B0\u589E\u5730\u5740');\n const onEdit = (item, index) => showToast('\u7F16\u8F91\u5730\u5740:' + index);\n\n return {\n list,\n onAdd,\n onEdit,\n disabledList,\n chosenAddressId,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u9009\u4E2D\u5730\u5740\u7684 id | \nnumber | string | \n- | \n
list | \n\u5730\u5740\u5217\u8868 | \nAddressListAddress[] | \n[] | \n
disabled-list | \n\u4E0D\u53EF\u914D\u9001\u5730\u5740\u5217\u8868 | \nAddressListAddress[] | \n[] | \n
disabled-text | \n\u4E0D\u53EF\u914D\u9001\u63D0\u793A\u6587\u6848 | \nstring | \n- | \n
switchable | \n\u662F\u5426\u5141\u8BB8\u5207\u6362\u5730\u5740 | \nboolean | \ntrue | \n
show-add-button | \n\u662F\u5426\u663E\u793A\u5E95\u90E8\u6309\u94AE | \nboolean | \ntrue | \n
add-button-text | \n\u5E95\u90E8\u6309\u94AE\u6587\u5B57 | \nstring | \n\u65B0\u589E\u5730\u5740 | \n
default-tag-text | \n\u9ED8\u8BA4\u5730\u5740\u6807\u7B7E\u6587\u5B57 | \nstring | \n- | \n
right-icon v4.5.0 | \n\u53F3\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \nedit | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
add | \n\u70B9\u51FB\u65B0\u589E\u6309\u94AE\u65F6\u89E6\u53D1 | \n- | \n
edit | \n\u70B9\u51FB\u7F16\u8F91\u6309\u94AE\u65F6\u89E6\u53D1 | \nitem: AddressListAddress, index: number | \n
select | \n\u5207\u6362\u9009\u4E2D\u7684\u5730\u5740\u65F6\u89E6\u53D1 | \nitem: AddressListAddress, index: number | \n
edit-disabled | \n\u7F16\u8F91\u4E0D\u53EF\u914D\u9001\u7684\u5730\u5740\u65F6\u89E6\u53D1 | \nitem: AddressListAddress, index: number | \n
select-disabled | \n\u9009\u4E2D\u4E0D\u53EF\u914D\u9001\u7684\u5730\u5740\u65F6\u89E6\u53D1 | \nitem: AddressListAddress, index: number | \n
click-item | \n\u70B9\u51FB\u4EFB\u610F\u5730\u5740\u65F6\u89E6\u53D1 | \nitem: AddressListAddress, index: number | \n
\u952E\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
id | \n\u6BCF\u6761\u5730\u5740\u7684\u552F\u4E00\u6807\u8BC6 | \nnumber | string | \n
name | \n\u59D3\u540D | \nstring | \n
tel | \n\u624B\u673A\u53F7 | \nnumber | string | \n
address | \n\u8BE6\u7EC6\u5730\u5740 | \nstring | \n
isDefault | \n\u662F\u5426\u4E3A\u9ED8\u8BA4\u5730\u5740 | \nboolean | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
default | \n\u5728\u5217\u8868\u4E0B\u65B9\u63D2\u5165\u5185\u5BB9 | \n- | \n
top | \n\u5728\u9876\u90E8\u63D2\u5165\u5185\u5BB9 | \n- | \n
item-bottom | \n\u5728\u5217\u8868\u9879\u5E95\u90E8\u63D2\u5165\u5185\u5BB9 | \nitem: AddressListAddress | \n
tag | \n\u81EA\u5B9A\u4E49\u5217\u8868\u9879\u6807\u7B7E\u5185\u5BB9 | \nitem: AddressListAddress | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { AddressListProps, AddressListAddress } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-address-list-padding | \nvar(--van-padding-sm) var(--van-padding-sm) 80px | \n- | \n
--van-address-list-disabled-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-address-list-disabled-text-padding | \nvar(--van-padding-base) * 5 0 var(--van-padding-md) | \n- | \n
--van-address-list-disabled-text-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-address-list-disabled-text-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-address-list-add-button-z-index | \n999 | \n- | \n
--van-address-list-item-padding | \nvar(--van-padding-sm) | \n- | \n
--van-address-list-item-text-color | \nvar(--van-text-color) | \n- | \n
--van-address-list-item-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-address-list-item-font-size | \n13px | \n- | \n
--van-address-list-item-line-height | \nvar(--van-line-height-sm) | \n- | \n
--van-address-list-radio-color | \nvar(--van-primary-color) | \n- | \n
--van-address-list-edit-icon-size | \n20px | \n- | \n
Through this chapter, you can learn about some advanced usages of Vant.
\nVant supports multiple ways to register components:
\nimport { Button } from 'vant';\nimport { createApp } from 'vue';\n\nconst app = createApp();\n\n// Method 1. via app.use\napp.use(Button);\n\n// Method 2. Register via app.component\napp.component(Button.name, Button);\n
\nimport { Button } from 'vant';\n\nexport default {\n components: {\n [Button.name]: Button,\n },\n};\n
\n\n\nFor more information, please refer to Vue.js - Component Registration\u3002
\n
Vant components can be used directly in <script setup>
without component registration.
<script setup>\n import { Button } from 'vant';\n</script>\n\n<template>\n <Button />\n</template>\n
\nVant components can be used directly in JSX and TSX without component registration.
\nimport { Button } from 'vant';\n\nexport default {\n render() {\n return <Button />;\n },\n};\n
\nVant uses px
unit by default\uFF0Cyou can use tools such as postcss--px-to-viewport to transform px
unit to viewport units (vw, vh, vmin, vmax).
PostCSS config example:
\n// postcss.config.js\nmodule.exports = {\n plugins: {\n 'postcss-px-to-viewport': {\n viewportWidth: 375,\n },\n },\n};\n
\nYou can use tools such as postcss-pxtorem
to transform px
unit to rem
unit.
PostCSS config example:
\n// postcss.config.js\nmodule.exports = {\n plugins: {\n 'postcss-pxtorem': {\n rootValue: 37.5,\n propList: ['*'],\n },\n },\n};\n
\nIf the size of the design draft is 750 or other sizes, you can adjust the rootValue
to:
// postcss.config.js\nmodule.exports = {\n plugins: {\n // postcss-pxtorem version >= 5.0.0\n 'postcss-pxtorem': {\n rootValue({ file }) {\n return file.indexOf('vant') !== -1 ? 37.5 : 75;\n },\n propList: ['*'],\n },\n },\n};\n
\nVant is a mobile-first component library, if you want to use Vant in PC browsers, you can use the @vant/touch-emulator module. This module will automatically convert the mouse events of the PC browser into the touch events of the mobile browser.
\n# Install\nnpm i @vant/touch-emulator -S\n
\n// Just import this module, then Vant works in PC browser\nimport '@vant/touch-emulator';\n
\nThrough this chapter, you can learn about some advanced usages of Vant.
\nVant supports multiple ways to register components:
\nimport { Button } from 'vant';\nimport { createApp } from 'vue';\n\nconst app = createApp();\n\n// Method 1. via app.use\napp.use(Button);\n\n// Method 2. Register via app.component\napp.component(Button.name, Button);\n
\nimport { Button } from 'vant';\n\nexport default {\n components: {\n [Button.name]: Button,\n },\n};\n
\n\n\nFor more information, please refer to Vue.js - Component Registration\u3002
\n
Vant components can be used directly in <script setup>
without component registration.
<script setup>\n import { Button } from 'vant';\n</script>\n\n<template>\n <Button />\n</template>\n
\nVant components can be used directly in JSX and TSX without component registration.
\nimport { Button } from 'vant';\n\nexport default {\n render() {\n return <Button />;\n },\n};\n
\nVant uses px
unit by default\uFF0Cyou can use tools such as postcss--px-to-viewport to transform px
unit to viewport units (vw, vh, vmin, vmax).
PostCSS config example:
\n// postcss.config.js\nmodule.exports = {\n plugins: {\n 'postcss-px-to-viewport': {\n viewportWidth: 375,\n },\n },\n};\n
\nYou can use tools such as postcss-pxtorem
to transform px
unit to rem
unit.
PostCSS config example:
\n// postcss.config.js\nmodule.exports = {\n plugins: {\n 'postcss-pxtorem': {\n rootValue: 37.5,\n propList: ['*'],\n },\n },\n};\n
\nIf the size of the design draft is 750 or other sizes, you can adjust the rootValue
to:
// postcss.config.js\nmodule.exports = {\n plugins: {\n // postcss-pxtorem version >= 5.0.0\n 'postcss-pxtorem': {\n rootValue({ file }) {\n return file.indexOf('vant') !== -1 ? 37.5 : 75;\n },\n propList: ['*'],\n },\n },\n};\n
\nVant is a mobile-first component library, if you want to use Vant in PC browsers, you can use the @vant/touch-emulator module. This module will automatically convert the mouse events of the PC browser into the touch events of the mobile browser.
\n# Install\nnpm i @vant/touch-emulator -S\n
\n// Just import this module, then Vant works in PC browser\nimport '@vant/touch-emulator';\n
\n\u4E3A\u9875\u9762\u63D0\u4F9B\u5BFC\u822A\u529F\u80FD\uFF0C\u5E38\u7528\u4E8E\u9875\u9762\u9876\u90E8\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { NavBar } from 'vant';\n\nconst app = createApp();\napp.use(NavBar);\n
\n\u901A\u8FC7 title
\u5C5E\u6027\u8BBE\u7F6E\u5BFC\u822A\u680F\u6807\u9898\u3002
<van-nav-bar title="\u6807\u9898" />\n
\n\u5728\u5BFC\u822A\u680F\u5B9E\u73B0\u8FD4\u56DE\u4E0A\u7EA7\u529F\u80FD\u3002
\n<van-nav-bar\n title="\u6807\u9898"\n left-text="\u8FD4\u56DE"\n left-arrow\n @click-left="onClickLeft"\n/>\n
\nexport default {\n setup() {\n const onClickLeft = () => history.back();\n return {\n onClickLeft,\n };\n },\n};\n
\n\u5728\u5BFC\u822A\u680F\u53F3\u4FA7\u6DFB\u52A0\u53EF\u70B9\u51FB\u7684\u6309\u94AE\u3002
\n<van-nav-bar\n title="\u6807\u9898"\n left-text="\u8FD4\u56DE"\n right-text="\u6309\u94AE"\n left-arrow\n @click-left="onClickLeft"\n @click-right="onClickRight"\n/>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onClickLeft = () => history.back();\n const onClickRight = () => showToast('\u6309\u94AE');\n return {\n onClickLeft,\n onClickRight,\n };\n },\n};\n
\n\u53EF\u4EE5\u901A\u8FC7\u63D2\u69FD\u81EA\u5B9A\u4E49\u5BFC\u822A\u680F\u4E24\u4FA7\u7684\u5185\u5BB9\u3002
\n<van-nav-bar title="\u6807\u9898" left-text="\u8FD4\u56DE" left-arrow>\n <template #right>\n <van-icon name="search" size="18" />\n </template>\n</van-nav-bar>\n
\n\u901A\u8FC7 left-disabled
\u6216 right-disabled
\u5C5E\u6027\u6765\u7981\u7528\u4E24\u4FA7\u7684\u6309\u94AE\u3002\u6309\u94AE\u88AB\u7981\u7528\u65F6\u900F\u660E\u5EA6\u964D\u4F4E\uFF0C\u4E14\u65E0\u6CD5\u70B9\u51FB\u3002
<van-nav-bar\n title="\u6807\u9898"\n left-text="\u8FD4\u56DE"\n right-text="\u6309\u94AE"\n left-arrow\n left-disabled\n right-disabled\n/>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
title | \n\u6807\u9898 | \nstring | \n\'\' | \n
left-text | \n\u5DE6\u4FA7\u6587\u6848 | \nstring | \n\'\' | \n
right-text | \n\u53F3\u4FA7\u6587\u6848 | \nstring | \n\'\' | \n
left-disabled v4.6.8 | \n\u662F\u5426\u7981\u7528\u5DE6\u4FA7\u6309\u94AE\uFF0C\u7981\u7528\u65F6\u900F\u660E\u5EA6\u964D\u4F4E\uFF0C\u4E14\u65E0\u6CD5\u70B9\u51FB | \nboolean | \nfalse | \n
right-disabled v4.6.8 | \n\u662F\u5426\u7981\u7528\u53F3\u4FA7\u6309\u94AE\uFF0C\u7981\u7528\u65F6\u900F\u660E\u5EA6\u964D\u4F4E\uFF0C\u4E14\u65E0\u6CD5\u70B9\u51FB | \nboolean | \nfalse | \n
left-arrow | \n\u662F\u5426\u663E\u793A\u5DE6\u4FA7\u7BAD\u5934 | \nboolean | \nfalse | \n
border | \n\u662F\u5426\u663E\u793A\u4E0B\u8FB9\u6846 | \nboolean | \ntrue | \n
fixed | \n\u662F\u5426\u56FA\u5B9A\u5728\u9876\u90E8 | \nboolean | \nfalse | \n
placeholder | \n\u56FA\u5B9A\u5728\u9876\u90E8\u65F6\uFF0C\u662F\u5426\u5728\u6807\u7B7E\u4F4D\u7F6E\u751F\u6210\u4E00\u4E2A\u7B49\u9AD8\u7684\u5360\u4F4D\u5143\u7D20 | \nboolean | \nfalse | \n
z-index | \n\u5BFC\u822A\u680F z-index | \nnumber | string | \n1 | \n
safe-area-inset-top | \n\u662F\u5426\u5F00\u542F\u9876\u90E8\u5B89\u5168\u533A\u9002\u914D | \nboolean | \nfalse | \n
clickable | \n\u662F\u5426\u5F00\u542F\u4E24\u4FA7\u6309\u94AE\u7684\u70B9\u51FB\u53CD\u9988 | \nboolean | \ntrue | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
title | \n\u81EA\u5B9A\u4E49\u6807\u9898 | \n
left | \n\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u533A\u57DF\u5185\u5BB9 | \n
right | \n\u81EA\u5B9A\u4E49\u53F3\u4FA7\u533A\u57DF\u5185\u5BB9 | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click-left | \n\u70B9\u51FB\u5DE6\u4FA7\u6309\u94AE\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
click-right | \n\u70B9\u51FB\u53F3\u4FA7\u6309\u94AE\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { NavBarProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-nav-bar-height | \n46px | \n- | \n
--van-nav-bar-background | \nvar(--van-background-2) | \n- | \n
--van-nav-bar-arrow-size | \n16px | \n- | \n
--van-nav-bar-icon-color | \nvar(--van-primary-color) | \n- | \n
--van-nav-bar-text-color | \nvar(--van-primary-color) | \n- | \n
--van-nav-bar-title-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-nav-bar-title-text-color | \nvar(--van-text-color) | \n- | \n
--van-nav-bar-z-index | \n1 | \n- | \n
\u4E3A\u9875\u9762\u63D0\u4F9B\u5BFC\u822A\u529F\u80FD\uFF0C\u5E38\u7528\u4E8E\u9875\u9762\u9876\u90E8\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { NavBar } from 'vant';\n\nconst app = createApp();\napp.use(NavBar);\n
\n\u901A\u8FC7 title
\u5C5E\u6027\u8BBE\u7F6E\u5BFC\u822A\u680F\u6807\u9898\u3002
<van-nav-bar title="\u6807\u9898" />\n
\n\u5728\u5BFC\u822A\u680F\u5B9E\u73B0\u8FD4\u56DE\u4E0A\u7EA7\u529F\u80FD\u3002
\n<van-nav-bar\n title="\u6807\u9898"\n left-text="\u8FD4\u56DE"\n left-arrow\n @click-left="onClickLeft"\n/>\n
\nexport default {\n setup() {\n const onClickLeft = () => history.back();\n return {\n onClickLeft,\n };\n },\n};\n
\n\u5728\u5BFC\u822A\u680F\u53F3\u4FA7\u6DFB\u52A0\u53EF\u70B9\u51FB\u7684\u6309\u94AE\u3002
\n<van-nav-bar\n title="\u6807\u9898"\n left-text="\u8FD4\u56DE"\n right-text="\u6309\u94AE"\n left-arrow\n @click-left="onClickLeft"\n @click-right="onClickRight"\n/>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onClickLeft = () => history.back();\n const onClickRight = () => showToast('\u6309\u94AE');\n return {\n onClickLeft,\n onClickRight,\n };\n },\n};\n
\n\u53EF\u4EE5\u901A\u8FC7\u63D2\u69FD\u81EA\u5B9A\u4E49\u5BFC\u822A\u680F\u4E24\u4FA7\u7684\u5185\u5BB9\u3002
\n<van-nav-bar title="\u6807\u9898" left-text="\u8FD4\u56DE" left-arrow>\n <template #right>\n <van-icon name="search" size="18" />\n </template>\n</van-nav-bar>\n
\n\u901A\u8FC7 left-disabled
\u6216 right-disabled
\u5C5E\u6027\u6765\u7981\u7528\u4E24\u4FA7\u7684\u6309\u94AE\u3002\u6309\u94AE\u88AB\u7981\u7528\u65F6\u900F\u660E\u5EA6\u964D\u4F4E\uFF0C\u4E14\u65E0\u6CD5\u70B9\u51FB\u3002
<van-nav-bar\n title="\u6807\u9898"\n left-text="\u8FD4\u56DE"\n right-text="\u6309\u94AE"\n left-arrow\n left-disabled\n right-disabled\n/>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
title | \n\u6807\u9898 | \nstring | \n\'\' | \n
left-text | \n\u5DE6\u4FA7\u6587\u6848 | \nstring | \n\'\' | \n
right-text | \n\u53F3\u4FA7\u6587\u6848 | \nstring | \n\'\' | \n
left-disabled v4.6.8 | \n\u662F\u5426\u7981\u7528\u5DE6\u4FA7\u6309\u94AE\uFF0C\u7981\u7528\u65F6\u900F\u660E\u5EA6\u964D\u4F4E\uFF0C\u4E14\u65E0\u6CD5\u70B9\u51FB | \nboolean | \nfalse | \n
right-disabled v4.6.8 | \n\u662F\u5426\u7981\u7528\u53F3\u4FA7\u6309\u94AE\uFF0C\u7981\u7528\u65F6\u900F\u660E\u5EA6\u964D\u4F4E\uFF0C\u4E14\u65E0\u6CD5\u70B9\u51FB | \nboolean | \nfalse | \n
left-arrow | \n\u662F\u5426\u663E\u793A\u5DE6\u4FA7\u7BAD\u5934 | \nboolean | \nfalse | \n
border | \n\u662F\u5426\u663E\u793A\u4E0B\u8FB9\u6846 | \nboolean | \ntrue | \n
fixed | \n\u662F\u5426\u56FA\u5B9A\u5728\u9876\u90E8 | \nboolean | \nfalse | \n
placeholder | \n\u56FA\u5B9A\u5728\u9876\u90E8\u65F6\uFF0C\u662F\u5426\u5728\u6807\u7B7E\u4F4D\u7F6E\u751F\u6210\u4E00\u4E2A\u7B49\u9AD8\u7684\u5360\u4F4D\u5143\u7D20 | \nboolean | \nfalse | \n
z-index | \n\u5BFC\u822A\u680F z-index | \nnumber | string | \n1 | \n
safe-area-inset-top | \n\u662F\u5426\u5F00\u542F\u9876\u90E8\u5B89\u5168\u533A\u9002\u914D | \nboolean | \nfalse | \n
clickable | \n\u662F\u5426\u5F00\u542F\u4E24\u4FA7\u6309\u94AE\u7684\u70B9\u51FB\u53CD\u9988 | \nboolean | \ntrue | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
title | \n\u81EA\u5B9A\u4E49\u6807\u9898 | \n
left | \n\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u533A\u57DF\u5185\u5BB9 | \n
right | \n\u81EA\u5B9A\u4E49\u53F3\u4FA7\u533A\u57DF\u5185\u5BB9 | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click-left | \n\u70B9\u51FB\u5DE6\u4FA7\u6309\u94AE\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
click-right | \n\u70B9\u51FB\u53F3\u4FA7\u6309\u94AE\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { NavBarProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-nav-bar-height | \n46px | \n- | \n
--van-nav-bar-background | \nvar(--van-background-2) | \n- | \n
--van-nav-bar-arrow-size | \n16px | \n- | \n
--van-nav-bar-icon-color | \nvar(--van-primary-color) | \n- | \n
--van-nav-bar-text-color | \nvar(--van-primary-color) | \n- | \n
--van-nav-bar-title-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-nav-bar-title-text-color | \nvar(--van-text-color) | \n- | \n
--van-nav-bar-z-index | \n1 | \n- | \n
\u7528\u4E8E\u7ED3\u5408\u591A\u4E2A Picker \u9009\u62E9\u5668\u7EC4\u4EF6\uFF0C\u5728\u4E00\u6B21\u4EA4\u4E92\u4E2D\u5B8C\u6210\u591A\u4E2A\u503C\u7684\u9009\u62E9\u3002
\nPickerGroup \u4E2D\u53EF\u4EE5\u653E\u7F6E\u4EE5\u4E0B\u7EC4\u4EF6\uFF1A
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { PickerGroup } from 'vant';\n\nconst app = createApp();\napp.use(PickerGroup);\n
\n\u5728 PickerGroup
\u7684\u9ED8\u8BA4\u63D2\u69FD\u4E2D\u653E\u7F6E\u4E00\u4E2A DatePicker
\u7EC4\u4EF6\u548C\u4E00\u4E2A TimePicker
\u7EC4\u4EF6\uFF0C\u53EF\u4EE5\u5B9E\u73B0\u540C\u65F6\u9009\u62E9\u65E5\u671F\u548C\u65F6\u95F4\u7684\u4EA4\u4E92\u6548\u679C\u3002
PickerGroup
\u4F1A\u4EE3\u66FF\u5B50\u7EC4\u4EF6\u6765\u6E32\u67D3\u7EDF\u4E00\u7684\u6807\u9898\u680F\uFF0C\u8FD9\u610F\u5473\u7740\u5B50\u7EC4\u4EF6\u4E0D\u4F1A\u6E32\u67D3\u5355\u72EC\u7684\u6807\u9898\u680F\uFF0C\u4E0E\u6807\u9898\u680F\u6709\u5173\u7684 props \u548C events \u9700\u8981\u8BBE\u7F6E\u5230 PickerGroup
\u4E0A\uFF0C\u6BD4\u5982 title
\u5C5E\u6027\u3001confirm
\u4E8B\u4EF6\u3001cancel
\u4E8B\u4EF6\u7B49\uFF0C\u800C\u5B50\u7EC4\u4EF6\u4E2D\u4E0E\u6807\u9898\u680F\u65E0\u5173\u7684\u5C5E\u6027\u548C\u4E8B\u4EF6\u53EF\u4EE5\u6B63\u5E38\u4F7F\u7528\u3002
<van-picker-group\n title="\u9884\u7EA6\u65E5\u671F"\n :tabs="['\u9009\u62E9\u65E5\u671F', '\u9009\u62E9\u65F6\u95F4']"\n @confirm="onConfirm"\n @cancel="onCancel"\n>\n <van-date-picker\n v-model="currentDate"\n :min-date="minDate"\n :max-date="maxDate"\n />\n <van-time-picker v-model="currentTime" />\n</van-picker-group>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const currentDate = ref(['2022', '06', '01']);\n const currentTime = ref(['12', '00']);\n\n const onConfirm = () => {\n showToast(\n `${currentDate.value.join('/')} ${currentTime.value.join(':')}`,\n );\n };\n\n const onCancel = () => {\n showToast('cancel');\n };\n\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n currentDate,\n currentTime,\n onConfirm,\n onCancel,\n };\n },\n};\n
\n\u90E8\u5206\u573A\u666F\u4E0B\uFF0C\u4E3A\u4E86\u4FDD\u8BC1\u7528\u6237\u80FD\u591F\u4F9D\u6B21\u9009\u62E9\u6240\u6709\u7684 Picker\uFF0C\u4F60\u53EF\u4EE5\u8BBE\u7F6E PickerGroup \u7684 next-step-text
\u5C5E\u6027\u3002\u5728\u8BBE\u7F6E next-step-text
\u5C5E\u6027\u540E\uFF0C\u5982\u679C\u7528\u6237\u672A\u5207\u6362\u5230\u6700\u540E\u4E00\u4E2A\u6807\u7B7E\u9875\uFF0C\u90A3\u4E48\u53F3\u4E0A\u89D2\u7684\u6309\u94AE\u4F1A\u53D8\u6210\u300C\u4E0B\u4E00\u6B65\u300D\uFF0C\u70B9\u51FB\u540E\u81EA\u52A8\u5207\u6362\u5230\u4E0B\u4E00\u4E2A Picker\u3002\u5F53\u7528\u6237\u5207\u6362\u5230\u6700\u540E\u4E00\u4E2A\u6807\u7B7E\u9875\u65F6\uFF0C\u53F3\u4E0A\u89D2\u7684\u6309\u94AE\u4F1A\u53D8\u4E3A\u300C\u786E\u8BA4\u300D\u3002
<van-picker-group\n title="\u9884\u7EA6\u65E5\u671F"\n :tabs="['\u9009\u62E9\u65E5\u671F', '\u9009\u62E9\u65F6\u95F4']"\n next-step-text="\u4E0B\u4E00\u6B65"\n @confirm="onConfirm"\n @cancel="onCancel"\n>\n <van-date-picker\n v-model="currentDate"\n :min-date="minDate"\n :max-date="maxDate"\n />\n <van-time-picker v-model="currentTime" />\n</van-picker-group>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const currentDate = ref(['2022', '06', '01']);\n const currentTime = ref(['12', '00']);\n\n const onConfirm = () => {\n showToast(\n `${currentDate.value.join('/')} ${currentTime.value.join(':')}`,\n );\n };\n\n const onCancel = () => {\n showToast('cancel');\n };\n\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n currentDate,\n currentTime,\n onConfirm,\n onCancel,\n };\n },\n};\n
\n\u5728 PickerGroup
\u7684\u9ED8\u8BA4\u63D2\u69FD\u4E2D\u653E\u7F6E\u4E24\u4E2A DatePicker
\u7EC4\u4EF6\uFF0C\u53EF\u4EE5\u5B9E\u73B0\u9009\u62E9\u65E5\u671F\u8303\u56F4\u7684\u4EA4\u4E92\u6548\u679C\u3002
<van-picker-group\n title="\u9884\u7EA6\u65E5\u671F"\n :tabs="['\u5F00\u59CB\u65E5\u671F', '\u7ED3\u675F\u65E5\u671F']"\n @confirm="onConfirm"\n @cancel="onCancel"\n>\n <van-date-picker\n v-model="startDate"\n :min-date="minDate"\n :max-date="maxDate"\n />\n <van-date-picker v-model="endDate" :min-date="minDate" :max-date="maxDate" />\n</van-picker-group>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const startDate = ref(['2022', '06', '01']);\n const endDate = ref(['2023', '06', '01']);\n\n const onConfirm = () => {\n showToast(`${startDate.value.join('/')} ${endDate.value.join('/')}`);\n };\n\n const onCancel = () => {\n showToast('cancel');\n };\n\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n endDate,\n startDate,\n onConfirm,\n onCancel,\n };\n },\n};\n
\n\u5728 PickerGroup
\u7684\u9ED8\u8BA4\u63D2\u69FD\u4E2D\u653E\u7F6E\u4E24\u4E2A TimePicker
\u7EC4\u4EF6\uFF0C\u53EF\u4EE5\u5B9E\u73B0\u9009\u62E9\u65F6\u95F4\u8303\u56F4\u7684\u4EA4\u4E92\u6548\u679C\u3002
<van-picker-group\n title="\u9884\u7EA6\u65F6\u95F4"\n :tabs="['\u5F00\u59CB\u65F6\u95F4', '\u7ED3\u675F\u65F6\u95F4']"\n @confirm="onConfirm"\n @cancel="onCancel"\n>\n <van-time-picker v-model="startTime" />\n <van-time-picker v-model="endTime" />\n</van-picker-group>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const startTime = ref(['12', '00']);\n const endTime = ref(['12', '00']);\n\n const onConfirm = () => {\n showToast(`${startTime.value.join(':')} ${endTime.value.join(':')}`);\n };\n\n const onCancel = () => {\n showToast('cancel');\n };\n\n return {\n endTime,\n startTime,\n onConfirm,\n onCancel,\n };\n },\n};\n
\nPickerGroup
\u4E2D tab
\u7684\u5207\u6362\u652F\u6301\u975E\u53D7\u63A7\u6A21\u5F0F\u548C\u53D7\u63A7\u6A21\u5F0F\uFF1A
v-model:active-tab
\u65F6\uFF0CPickerGroup \u7EC4\u4EF6 tab
\u7684\u5207\u6362\u5B8C\u5168\u7531\u7EC4\u4EF6\u81EA\u8EAB\u63A7\u5236\u3002v-model:active-tab
\u65F6\uFF0CPickerGroup \u652F\u6301\u53D7\u63A7\u6A21\u5F0F\uFF0C\u6B64\u65F6\u7EC4\u4EF6 tab
\u7684\u5207\u6362\u540C\u65F6\u652F\u6301 v-model:active-tab
\u7684\u503C\u548C\u7EC4\u4EF6\u672C\u8EAB\u63A7\u5236\u3002<van-button type="primary" @click="setActiveTab">\n \u70B9\u51FB\u5207\u6362 tab\uFF0C\u5F53\u524D\u4E3A {{ activeTab }}\n</van-button>\n<van-picker-group\n v-model:active-tab="activeTab"\n title="\u9884\u7EA6\u65E5\u671F"\n :tabs="['\u9009\u62E9\u65E5\u671F', '\u9009\u62E9\u65F6\u95F4']"\n @confirm="onConfirm"\n @cancel="onCancel"\n>\n <van-date-picker\n v-model="currentDate"\n :min-date="minDate"\n :max-date="maxDate"\n />\n <van-time-picker v-model="currentTime" />\n</van-picker-group>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const activeTab = ref(0);\n const currentDate = ref(['2022', '06', '01']);\n const currentTime = ref(['12', '00']);\n\n const setActiveTab = () => {\n activeTab.value = activeTab.value ? 0 : 1;\n };\n\n const onConfirm = () => {\n showToast(\n `${currentDate.value.join('/')} ${currentTime.value.join(':')}`,\n );\n };\n\n const onCancel = () => {\n showToast('cancel');\n };\n\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n activeTab,\n currentDate,\n currentTime,\n setActiveTab,\n onConfirm,\n onCancel,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:active-tab v4.3.2 | \n\u8BBE\u7F6E\u5F53\u524D\u9009\u4E2D\u7684\u6807\u7B7E | \nnumber | string | \n0 | \n
tabs | \n\u8BBE\u7F6E\u6807\u7B7E\u9875\u7684\u6807\u9898 | \nstring[] | \n[] | \n
title | \n\u9876\u90E8\u680F\u6807\u9898 | \nstring | \n\'\' | \n
next-step-text v4.0.8 | \n\u4E0B\u4E00\u6B65\u6309\u94AE\u7684\u6587\u5B57 | \nstring | \n\'\' | \n
confirm-button-text | \n\u786E\u8BA4\u6309\u94AE\u7684\u6587\u5B57 | \nstring | \n\u786E\u8BA4 | \n
cancel-button-text | \n\u53D6\u6D88\u6309\u94AE\u7684\u6587\u5B57 | \nstring | \n\u53D6\u6D88 | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
toolbar | \n\u81EA\u5B9A\u4E49\u6574\u4E2A\u9876\u90E8\u680F\u7684\u5185\u5BB9 | \n- | \n
title | \n\u81EA\u5B9A\u4E49\u6807\u9898\u5185\u5BB9 | \n- | \n
confirm | \n\u81EA\u5B9A\u4E49\u786E\u8BA4\u6309\u94AE\u5185\u5BB9 | \n- | \n
cancel | \n\u81EA\u5B9A\u4E49\u53D6\u6D88\u6309\u94AE\u5185\u5BB9 | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { PickerGroupProps, PickerGroupThemeVars } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-picker-group-background | \n--van-background-2 | \n- | \n
\u7528\u4E8E\u7ED3\u5408\u591A\u4E2A Picker \u9009\u62E9\u5668\u7EC4\u4EF6\uFF0C\u5728\u4E00\u6B21\u4EA4\u4E92\u4E2D\u5B8C\u6210\u591A\u4E2A\u503C\u7684\u9009\u62E9\u3002
\nPickerGroup \u4E2D\u53EF\u4EE5\u653E\u7F6E\u4EE5\u4E0B\u7EC4\u4EF6\uFF1A
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { PickerGroup } from 'vant';\n\nconst app = createApp();\napp.use(PickerGroup);\n
\n\u5728 PickerGroup
\u7684\u9ED8\u8BA4\u63D2\u69FD\u4E2D\u653E\u7F6E\u4E00\u4E2A DatePicker
\u7EC4\u4EF6\u548C\u4E00\u4E2A TimePicker
\u7EC4\u4EF6\uFF0C\u53EF\u4EE5\u5B9E\u73B0\u540C\u65F6\u9009\u62E9\u65E5\u671F\u548C\u65F6\u95F4\u7684\u4EA4\u4E92\u6548\u679C\u3002
PickerGroup
\u4F1A\u4EE3\u66FF\u5B50\u7EC4\u4EF6\u6765\u6E32\u67D3\u7EDF\u4E00\u7684\u6807\u9898\u680F\uFF0C\u8FD9\u610F\u5473\u7740\u5B50\u7EC4\u4EF6\u4E0D\u4F1A\u6E32\u67D3\u5355\u72EC\u7684\u6807\u9898\u680F\uFF0C\u4E0E\u6807\u9898\u680F\u6709\u5173\u7684 props \u548C events \u9700\u8981\u8BBE\u7F6E\u5230 PickerGroup
\u4E0A\uFF0C\u6BD4\u5982 title
\u5C5E\u6027\u3001confirm
\u4E8B\u4EF6\u3001cancel
\u4E8B\u4EF6\u7B49\uFF0C\u800C\u5B50\u7EC4\u4EF6\u4E2D\u4E0E\u6807\u9898\u680F\u65E0\u5173\u7684\u5C5E\u6027\u548C\u4E8B\u4EF6\u53EF\u4EE5\u6B63\u5E38\u4F7F\u7528\u3002
<van-picker-group\n title="\u9884\u7EA6\u65E5\u671F"\n :tabs="['\u9009\u62E9\u65E5\u671F', '\u9009\u62E9\u65F6\u95F4']"\n @confirm="onConfirm"\n @cancel="onCancel"\n>\n <van-date-picker\n v-model="currentDate"\n :min-date="minDate"\n :max-date="maxDate"\n />\n <van-time-picker v-model="currentTime" />\n</van-picker-group>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const currentDate = ref(['2022', '06', '01']);\n const currentTime = ref(['12', '00']);\n\n const onConfirm = () => {\n showToast(\n `${currentDate.value.join('/')} ${currentTime.value.join(':')}`,\n );\n };\n\n const onCancel = () => {\n showToast('cancel');\n };\n\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n currentDate,\n currentTime,\n onConfirm,\n onCancel,\n };\n },\n};\n
\n\u90E8\u5206\u573A\u666F\u4E0B\uFF0C\u4E3A\u4E86\u4FDD\u8BC1\u7528\u6237\u80FD\u591F\u4F9D\u6B21\u9009\u62E9\u6240\u6709\u7684 Picker\uFF0C\u4F60\u53EF\u4EE5\u8BBE\u7F6E PickerGroup \u7684 next-step-text
\u5C5E\u6027\u3002\u5728\u8BBE\u7F6E next-step-text
\u5C5E\u6027\u540E\uFF0C\u5982\u679C\u7528\u6237\u672A\u5207\u6362\u5230\u6700\u540E\u4E00\u4E2A\u6807\u7B7E\u9875\uFF0C\u90A3\u4E48\u53F3\u4E0A\u89D2\u7684\u6309\u94AE\u4F1A\u53D8\u6210\u300C\u4E0B\u4E00\u6B65\u300D\uFF0C\u70B9\u51FB\u540E\u81EA\u52A8\u5207\u6362\u5230\u4E0B\u4E00\u4E2A Picker\u3002\u5F53\u7528\u6237\u5207\u6362\u5230\u6700\u540E\u4E00\u4E2A\u6807\u7B7E\u9875\u65F6\uFF0C\u53F3\u4E0A\u89D2\u7684\u6309\u94AE\u4F1A\u53D8\u4E3A\u300C\u786E\u8BA4\u300D\u3002
<van-picker-group\n title="\u9884\u7EA6\u65E5\u671F"\n :tabs="['\u9009\u62E9\u65E5\u671F', '\u9009\u62E9\u65F6\u95F4']"\n next-step-text="\u4E0B\u4E00\u6B65"\n @confirm="onConfirm"\n @cancel="onCancel"\n>\n <van-date-picker\n v-model="currentDate"\n :min-date="minDate"\n :max-date="maxDate"\n />\n <van-time-picker v-model="currentTime" />\n</van-picker-group>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const currentDate = ref(['2022', '06', '01']);\n const currentTime = ref(['12', '00']);\n\n const onConfirm = () => {\n showToast(\n `${currentDate.value.join('/')} ${currentTime.value.join(':')}`,\n );\n };\n\n const onCancel = () => {\n showToast('cancel');\n };\n\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n currentDate,\n currentTime,\n onConfirm,\n onCancel,\n };\n },\n};\n
\n\u5728 PickerGroup
\u7684\u9ED8\u8BA4\u63D2\u69FD\u4E2D\u653E\u7F6E\u4E24\u4E2A DatePicker
\u7EC4\u4EF6\uFF0C\u53EF\u4EE5\u5B9E\u73B0\u9009\u62E9\u65E5\u671F\u8303\u56F4\u7684\u4EA4\u4E92\u6548\u679C\u3002
<van-picker-group\n title="\u9884\u7EA6\u65E5\u671F"\n :tabs="['\u5F00\u59CB\u65E5\u671F', '\u7ED3\u675F\u65E5\u671F']"\n @confirm="onConfirm"\n @cancel="onCancel"\n>\n <van-date-picker\n v-model="startDate"\n :min-date="minDate"\n :max-date="maxDate"\n />\n <van-date-picker v-model="endDate" :min-date="minDate" :max-date="maxDate" />\n</van-picker-group>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const startDate = ref(['2022', '06', '01']);\n const endDate = ref(['2023', '06', '01']);\n\n const onConfirm = () => {\n showToast(`${startDate.value.join('/')} ${endDate.value.join('/')}`);\n };\n\n const onCancel = () => {\n showToast('cancel');\n };\n\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n endDate,\n startDate,\n onConfirm,\n onCancel,\n };\n },\n};\n
\n\u5728 PickerGroup
\u7684\u9ED8\u8BA4\u63D2\u69FD\u4E2D\u653E\u7F6E\u4E24\u4E2A TimePicker
\u7EC4\u4EF6\uFF0C\u53EF\u4EE5\u5B9E\u73B0\u9009\u62E9\u65F6\u95F4\u8303\u56F4\u7684\u4EA4\u4E92\u6548\u679C\u3002
<van-picker-group\n title="\u9884\u7EA6\u65F6\u95F4"\n :tabs="['\u5F00\u59CB\u65F6\u95F4', '\u7ED3\u675F\u65F6\u95F4']"\n @confirm="onConfirm"\n @cancel="onCancel"\n>\n <van-time-picker v-model="startTime" />\n <van-time-picker v-model="endTime" />\n</van-picker-group>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const startTime = ref(['12', '00']);\n const endTime = ref(['12', '00']);\n\n const onConfirm = () => {\n showToast(`${startTime.value.join(':')} ${endTime.value.join(':')}`);\n };\n\n const onCancel = () => {\n showToast('cancel');\n };\n\n return {\n endTime,\n startTime,\n onConfirm,\n onCancel,\n };\n },\n};\n
\nPickerGroup
\u4E2D tab
\u7684\u5207\u6362\u652F\u6301\u975E\u53D7\u63A7\u6A21\u5F0F\u548C\u53D7\u63A7\u6A21\u5F0F\uFF1A
v-model:active-tab
\u65F6\uFF0CPickerGroup \u7EC4\u4EF6 tab
\u7684\u5207\u6362\u5B8C\u5168\u7531\u7EC4\u4EF6\u81EA\u8EAB\u63A7\u5236\u3002v-model:active-tab
\u65F6\uFF0CPickerGroup \u652F\u6301\u53D7\u63A7\u6A21\u5F0F\uFF0C\u6B64\u65F6\u7EC4\u4EF6 tab
\u7684\u5207\u6362\u540C\u65F6\u652F\u6301 v-model:active-tab
\u7684\u503C\u548C\u7EC4\u4EF6\u672C\u8EAB\u63A7\u5236\u3002<van-button type="primary" @click="setActiveTab">\n \u70B9\u51FB\u5207\u6362 tab\uFF0C\u5F53\u524D\u4E3A {{ activeTab }}\n</van-button>\n<van-picker-group\n v-model:active-tab="activeTab"\n title="\u9884\u7EA6\u65E5\u671F"\n :tabs="['\u9009\u62E9\u65E5\u671F', '\u9009\u62E9\u65F6\u95F4']"\n @confirm="onConfirm"\n @cancel="onCancel"\n>\n <van-date-picker\n v-model="currentDate"\n :min-date="minDate"\n :max-date="maxDate"\n />\n <van-time-picker v-model="currentTime" />\n</van-picker-group>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const activeTab = ref(0);\n const currentDate = ref(['2022', '06', '01']);\n const currentTime = ref(['12', '00']);\n\n const setActiveTab = () => {\n activeTab.value = activeTab.value ? 0 : 1;\n };\n\n const onConfirm = () => {\n showToast(\n `${currentDate.value.join('/')} ${currentTime.value.join(':')}`,\n );\n };\n\n const onCancel = () => {\n showToast('cancel');\n };\n\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n activeTab,\n currentDate,\n currentTime,\n setActiveTab,\n onConfirm,\n onCancel,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:active-tab v4.3.2 | \n\u8BBE\u7F6E\u5F53\u524D\u9009\u4E2D\u7684\u6807\u7B7E | \nnumber | string | \n0 | \n
tabs | \n\u8BBE\u7F6E\u6807\u7B7E\u9875\u7684\u6807\u9898 | \nstring[] | \n[] | \n
title | \n\u9876\u90E8\u680F\u6807\u9898 | \nstring | \n\'\' | \n
next-step-text v4.0.8 | \n\u4E0B\u4E00\u6B65\u6309\u94AE\u7684\u6587\u5B57 | \nstring | \n\'\' | \n
confirm-button-text | \n\u786E\u8BA4\u6309\u94AE\u7684\u6587\u5B57 | \nstring | \n\u786E\u8BA4 | \n
cancel-button-text | \n\u53D6\u6D88\u6309\u94AE\u7684\u6587\u5B57 | \nstring | \n\u53D6\u6D88 | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
toolbar | \n\u81EA\u5B9A\u4E49\u6574\u4E2A\u9876\u90E8\u680F\u7684\u5185\u5BB9 | \n- | \n
title | \n\u81EA\u5B9A\u4E49\u6807\u9898\u5185\u5BB9 | \n- | \n
confirm | \n\u81EA\u5B9A\u4E49\u786E\u8BA4\u6309\u94AE\u5185\u5BB9 | \n- | \n
cancel | \n\u81EA\u5B9A\u4E49\u53D6\u6D88\u6309\u94AE\u5185\u5BB9 | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { PickerGroupProps, PickerGroupThemeVars } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-picker-group-background | \n--van-background-2 | \n- | \n
\u5E95\u90E8\u5BFC\u822A\u680F\uFF0C\u7528\u4E8E\u5728\u4E0D\u540C\u9875\u9762\u4E4B\u95F4\u8FDB\u884C\u5207\u6362\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Tabbar, TabbarItem } from 'vant';\n\nconst app = createApp();\napp.use(Tabbar);\napp.use(TabbarItem);\n
\nv-model
\u9ED8\u8BA4\u7ED1\u5B9A\u9009\u4E2D\u6807\u7B7E\u7684\u7D22\u5F15\u503C\uFF0C\u901A\u8FC7\u4FEE\u6539 v-model
\u5373\u53EF\u5207\u6362\u9009\u4E2D\u7684\u6807\u7B7E\u3002
<van-tabbar v-model="active">\n <van-tabbar-item icon="home-o">\u6807\u7B7E</van-tabbar-item>\n <van-tabbar-item icon="search">\u6807\u7B7E</van-tabbar-item>\n <van-tabbar-item icon="friends-o">\u6807\u7B7E</van-tabbar-item>\n <van-tabbar-item icon="setting-o">\u6807\u7B7E</van-tabbar-item>\n</van-tabbar>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref(0);\n return { active };\n },\n};\n
\n\u5728\u6807\u7B7E\u6307\u5B9A name
\u5C5E\u6027\u7684\u60C5\u51B5\u4E0B\uFF0Cv-model
\u7684\u503C\u4E3A\u5F53\u524D\u6807\u7B7E\u7684 name
\u3002
<van-tabbar v-model="active">\n <van-tabbar-item name="home" icon="home-o">\u6807\u7B7E</van-tabbar-item>\n <van-tabbar-item name="search" icon="search">\u6807\u7B7E</van-tabbar-item>\n <van-tabbar-item name="friends" icon="friends-o">\u6807\u7B7E</van-tabbar-item>\n <van-tabbar-item name="setting" icon="setting-o">\u6807\u7B7E</van-tabbar-item>\n</van-tabbar>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref('home');\n return { active };\n },\n};\n
\n\u8BBE\u7F6E dot
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\uFF1B\u8BBE\u7F6E badge
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002
<van-tabbar v-model="active">\n <van-tabbar-item icon="home-o">\u6807\u7B7E</van-tabbar-item>\n <van-tabbar-item icon="search" dot>\u6807\u7B7E</van-tabbar-item>\n <van-tabbar-item icon="friends-o" badge="5">\u6807\u7B7E</van-tabbar-item>\n <van-tabbar-item icon="setting-o" badge="20">\u6807\u7B7E</van-tabbar-item>\n</van-tabbar>\n
\n\u901A\u8FC7 icon
\u63D2\u69FD\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u53EF\u4EE5\u901A\u8FC7 slot-scope
\u5224\u65AD\u6807\u7B7E\u662F\u5426\u9009\u4E2D\u3002
<van-tabbar v-model="active">\n <van-tabbar-item badge="3">\n <span>\u81EA\u5B9A\u4E49</span>\n <template #icon="props">\n <img :src="props.active ? icon.active : icon.inactive" />\n </template>\n </van-tabbar-item>\n <van-tabbar-item icon="search">\u6807\u7B7E</van-tabbar-item>\n <van-tabbar-item icon="setting-o">\u6807\u7B7E</van-tabbar-item>\n</van-tabbar>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref(0);\n const icon = {\n active: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',\n inactive:\n 'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',\n };\n return {\n icon,\n active,\n };\n },\n};\n
\n\u901A\u8FC7 active-color
\u5C5E\u6027\u8BBE\u7F6E\u9009\u4E2D\u6807\u7B7E\u7684\u989C\u8272\uFF0C\u901A\u8FC7 inactive-color
\u5C5E\u6027\u8BBE\u7F6E\u672A\u9009\u4E2D\u6807\u7B7E\u7684\u989C\u8272\u3002
<van-tabbar v-model="active" active-color="#ee0a24">\n <van-tabbar-item icon="home-o">\u6807\u7B7E</van-tabbar-item>\n <van-tabbar-item icon="search">\u6807\u7B7E</van-tabbar-item>\n <van-tabbar-item icon="friends-o">\u6807\u7B7E</van-tabbar-item>\n <van-tabbar-item icon="setting-o">\u6807\u7B7E</van-tabbar-item>\n</van-tabbar>\n
\n\u901A\u8FC7 change
\u4E8B\u4EF6\u6765\u76D1\u542C\u9009\u4E2D\u6807\u7B7E\u7684\u53D8\u5316\u3002
<van-tabbar v-model="active" @change="onChange">\n <van-tabbar-item icon="home-o">\u6807\u7B7E 1</van-tabbar-item>\n <van-tabbar-item icon="search">\u6807\u7B7E 2</van-tabbar-item>\n <van-tabbar-item icon="friends-o">\u6807\u7B7E 3</van-tabbar-item>\n <van-tabbar-item icon="setting-o">\u6807\u7B7E 4</van-tabbar-item>\n</van-tabbar>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const active = ref(0);\n const onChange = (index) => showToast(`\u6807\u7B7E ${index}`);\n return {\n icon,\n onChange,\n };\n },\n};\n
\n\u6807\u7B7E\u680F\u652F\u6301\u8DEF\u7531\u6A21\u5F0F\uFF0C\u7528\u4E8E\u642D\u914D Vue Router \u4F7F\u7528\u3002\u8DEF\u7531\u6A21\u5F0F\u4E0B\u4F1A\u5339\u914D\u9875\u9762\u8DEF\u5F84\u548C\u6807\u7B7E\u7684 to
\u5C5E\u6027\uFF0C\u5E76\u81EA\u52A8\u9009\u4E2D\u5BF9\u5E94\u7684\u6807\u7B7E\u3002
<router-view />\n\n<van-tabbar route>\n <van-tabbar-item replace to="/home" icon="home-o">\u6807\u7B7E</van-tabbar-item>\n <van-tabbar-item replace to="/search" icon="search">\u6807\u7B7E</van-tabbar-item>\n</van-tabbar>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u9009\u4E2D\u6807\u7B7E\u7684\u540D\u79F0\u6216\u7D22\u5F15\u503C | \nnumber | string | \n0 | \n
fixed | \n\u662F\u5426\u56FA\u5B9A\u5728\u5E95\u90E8 | \nboolean | \ntrue | \n
border | \n\u662F\u5426\u663E\u793A\u5916\u8FB9\u6846 | \nboolean | \ntrue | \n
z-index | \n\u5143\u7D20 z-index | \nnumber | string | \n1 | \n
active-color | \n\u9009\u4E2D\u6807\u7B7E\u7684\u989C\u8272 | \nstring | \n#1989fa | \n
inactive-color | \n\u672A\u9009\u4E2D\u6807\u7B7E\u7684\u989C\u8272 | \nstring | \n#7d7e80 | \n
route | \n\u662F\u5426\u5F00\u542F\u8DEF\u7531\u6A21\u5F0F | \nboolean | \nfalse | \n
placeholder | \n\u56FA\u5B9A\u5728\u5E95\u90E8\u65F6\uFF0C\u662F\u5426\u5728\u6807\u7B7E\u4F4D\u7F6E\u751F\u6210\u4E00\u4E2A\u7B49\u9AD8\u7684\u5360\u4F4D\u5143\u7D20 | \nboolean | \nfalse | \n
safe-area-inset-bottom | \n\u662F\u5426\u5F00\u542F\u5E95\u90E8\u5B89\u5168\u533A\u9002\u914D\uFF0C\u8BBE\u7F6E fixed \u65F6\u9ED8\u8BA4\u5F00\u542F | \nboolean | \nfalse | \n
before-change | \n\u5207\u6362\u6807\u7B7E\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u963B\u6B62\u5207\u6362\uFF0C\u652F\u6301\u8FD4\u56DE Promise | \n(name: number | string) => boolean | Promise<boolean> | \n- | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u5207\u6362\u6807\u7B7E\u65F6\u89E6\u53D1 | \nactive: number | string | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
name | \n\u6807\u7B7E\u540D\u79F0\uFF0C\u4F5C\u4E3A\u5339\u914D\u7684\u6807\u8BC6\u7B26 | \nnumber | string | \n\u5F53\u524D\u6807\u7B7E\u7684\u7D22\u5F15\u503C | \n
icon | \n\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n- | \n
icon-prefix | \n\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 | \nstring | \nvan-icon | \n
dot | \n\u662F\u5426\u663E\u793A\u56FE\u6807\u53F3\u4E0A\u89D2\u5C0F\u7EA2\u70B9 | \nboolean | \nfalse | \n
badge | \n\u56FE\u6807\u53F3\u4E0A\u89D2\u5FBD\u6807\u7684\u5185\u5BB9 | \nnumber | string | \n- | \n
badge-props | \n\u81EA\u5B9A\u4E49\u5FBD\u6807\u7684\u5C5E\u6027\uFF0C\u4F20\u5165\u7684\u5BF9\u8C61\u4F1A\u88AB\u900F\u4F20\u7ED9 Badge \u7EC4\u4EF6\u7684 props | \nBadgeProps | \n- | \n
url | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740 | \nstring | \n- | \n
to | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u76EE\u6807\u8DEF\u7531\u5BF9\u8C61\uFF0C\u7B49\u540C\u4E8E Vue Router \u7684 to \u5C5E\u6027 | \nstring | object | \n- | \n
replace | \n\u662F\u5426\u5728\u8DF3\u8F6C\u65F6\u66FF\u6362\u5F53\u524D\u9875\u9762\u5386\u53F2 | \nboolean | \nfalse | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
icon | \n\u81EA\u5B9A\u4E49\u56FE\u6807 | \nactive: boolean | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { TabbarProps, TabbarItemProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-tabbar-height | \n50px | \n- | \n
--van-tabbar-z-index | \n1 | \n- | \n
--van-tabbar-background | \nvar(--van-background-2) | \n- | \n
--van-tabbar-item-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-tabbar-item-text-color | \nvar(--van-text-color) | \n- | \n
--van-tabbar-item-active-color | \nvar(--van-primary-color) | \n- | \n
--van-tabbar-item-active-background | \nvar(--van-background-2) | \n- | \n
--van-tabbar-item-line-height | \n1 | \n- | \n
--van-tabbar-item-icon-size | \n22px | \n- | \n
--van-tabbar-item-icon-margin-bottom | \nvar(--van-padding-base) | \n- | \n
\u5E95\u90E8\u5BFC\u822A\u680F\uFF0C\u7528\u4E8E\u5728\u4E0D\u540C\u9875\u9762\u4E4B\u95F4\u8FDB\u884C\u5207\u6362\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Tabbar, TabbarItem } from 'vant';\n\nconst app = createApp();\napp.use(Tabbar);\napp.use(TabbarItem);\n
\nv-model
\u9ED8\u8BA4\u7ED1\u5B9A\u9009\u4E2D\u6807\u7B7E\u7684\u7D22\u5F15\u503C\uFF0C\u901A\u8FC7\u4FEE\u6539 v-model
\u5373\u53EF\u5207\u6362\u9009\u4E2D\u7684\u6807\u7B7E\u3002
<van-tabbar v-model="active">\n <van-tabbar-item icon="home-o">\u6807\u7B7E</van-tabbar-item>\n <van-tabbar-item icon="search">\u6807\u7B7E</van-tabbar-item>\n <van-tabbar-item icon="friends-o">\u6807\u7B7E</van-tabbar-item>\n <van-tabbar-item icon="setting-o">\u6807\u7B7E</van-tabbar-item>\n</van-tabbar>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref(0);\n return { active };\n },\n};\n
\n\u5728\u6807\u7B7E\u6307\u5B9A name
\u5C5E\u6027\u7684\u60C5\u51B5\u4E0B\uFF0Cv-model
\u7684\u503C\u4E3A\u5F53\u524D\u6807\u7B7E\u7684 name
\u3002
<van-tabbar v-model="active">\n <van-tabbar-item name="home" icon="home-o">\u6807\u7B7E</van-tabbar-item>\n <van-tabbar-item name="search" icon="search">\u6807\u7B7E</van-tabbar-item>\n <van-tabbar-item name="friends" icon="friends-o">\u6807\u7B7E</van-tabbar-item>\n <van-tabbar-item name="setting" icon="setting-o">\u6807\u7B7E</van-tabbar-item>\n</van-tabbar>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref('home');\n return { active };\n },\n};\n
\n\u8BBE\u7F6E dot
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\uFF1B\u8BBE\u7F6E badge
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002
<van-tabbar v-model="active">\n <van-tabbar-item icon="home-o">\u6807\u7B7E</van-tabbar-item>\n <van-tabbar-item icon="search" dot>\u6807\u7B7E</van-tabbar-item>\n <van-tabbar-item icon="friends-o" badge="5">\u6807\u7B7E</van-tabbar-item>\n <van-tabbar-item icon="setting-o" badge="20">\u6807\u7B7E</van-tabbar-item>\n</van-tabbar>\n
\n\u901A\u8FC7 icon
\u63D2\u69FD\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u53EF\u4EE5\u901A\u8FC7 slot-scope
\u5224\u65AD\u6807\u7B7E\u662F\u5426\u9009\u4E2D\u3002
<van-tabbar v-model="active">\n <van-tabbar-item badge="3">\n <span>\u81EA\u5B9A\u4E49</span>\n <template #icon="props">\n <img :src="props.active ? icon.active : icon.inactive" />\n </template>\n </van-tabbar-item>\n <van-tabbar-item icon="search">\u6807\u7B7E</van-tabbar-item>\n <van-tabbar-item icon="setting-o">\u6807\u7B7E</van-tabbar-item>\n</van-tabbar>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref(0);\n const icon = {\n active: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',\n inactive:\n 'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',\n };\n return {\n icon,\n active,\n };\n },\n};\n
\n\u901A\u8FC7 active-color
\u5C5E\u6027\u8BBE\u7F6E\u9009\u4E2D\u6807\u7B7E\u7684\u989C\u8272\uFF0C\u901A\u8FC7 inactive-color
\u5C5E\u6027\u8BBE\u7F6E\u672A\u9009\u4E2D\u6807\u7B7E\u7684\u989C\u8272\u3002
<van-tabbar v-model="active" active-color="#ee0a24">\n <van-tabbar-item icon="home-o">\u6807\u7B7E</van-tabbar-item>\n <van-tabbar-item icon="search">\u6807\u7B7E</van-tabbar-item>\n <van-tabbar-item icon="friends-o">\u6807\u7B7E</van-tabbar-item>\n <van-tabbar-item icon="setting-o">\u6807\u7B7E</van-tabbar-item>\n</van-tabbar>\n
\n\u901A\u8FC7 change
\u4E8B\u4EF6\u6765\u76D1\u542C\u9009\u4E2D\u6807\u7B7E\u7684\u53D8\u5316\u3002
<van-tabbar v-model="active" @change="onChange">\n <van-tabbar-item icon="home-o">\u6807\u7B7E 1</van-tabbar-item>\n <van-tabbar-item icon="search">\u6807\u7B7E 2</van-tabbar-item>\n <van-tabbar-item icon="friends-o">\u6807\u7B7E 3</van-tabbar-item>\n <van-tabbar-item icon="setting-o">\u6807\u7B7E 4</van-tabbar-item>\n</van-tabbar>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const active = ref(0);\n const onChange = (index) => showToast(`\u6807\u7B7E ${index}`);\n return {\n icon,\n onChange,\n };\n },\n};\n
\n\u6807\u7B7E\u680F\u652F\u6301\u8DEF\u7531\u6A21\u5F0F\uFF0C\u7528\u4E8E\u642D\u914D Vue Router \u4F7F\u7528\u3002\u8DEF\u7531\u6A21\u5F0F\u4E0B\u4F1A\u5339\u914D\u9875\u9762\u8DEF\u5F84\u548C\u6807\u7B7E\u7684 to
\u5C5E\u6027\uFF0C\u5E76\u81EA\u52A8\u9009\u4E2D\u5BF9\u5E94\u7684\u6807\u7B7E\u3002
<router-view />\n\n<van-tabbar route>\n <van-tabbar-item replace to="/home" icon="home-o">\u6807\u7B7E</van-tabbar-item>\n <van-tabbar-item replace to="/search" icon="search">\u6807\u7B7E</van-tabbar-item>\n</van-tabbar>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u9009\u4E2D\u6807\u7B7E\u7684\u540D\u79F0\u6216\u7D22\u5F15\u503C | \nnumber | string | \n0 | \n
fixed | \n\u662F\u5426\u56FA\u5B9A\u5728\u5E95\u90E8 | \nboolean | \ntrue | \n
border | \n\u662F\u5426\u663E\u793A\u5916\u8FB9\u6846 | \nboolean | \ntrue | \n
z-index | \n\u5143\u7D20 z-index | \nnumber | string | \n1 | \n
active-color | \n\u9009\u4E2D\u6807\u7B7E\u7684\u989C\u8272 | \nstring | \n#1989fa | \n
inactive-color | \n\u672A\u9009\u4E2D\u6807\u7B7E\u7684\u989C\u8272 | \nstring | \n#7d7e80 | \n
route | \n\u662F\u5426\u5F00\u542F\u8DEF\u7531\u6A21\u5F0F | \nboolean | \nfalse | \n
placeholder | \n\u56FA\u5B9A\u5728\u5E95\u90E8\u65F6\uFF0C\u662F\u5426\u5728\u6807\u7B7E\u4F4D\u7F6E\u751F\u6210\u4E00\u4E2A\u7B49\u9AD8\u7684\u5360\u4F4D\u5143\u7D20 | \nboolean | \nfalse | \n
safe-area-inset-bottom | \n\u662F\u5426\u5F00\u542F\u5E95\u90E8\u5B89\u5168\u533A\u9002\u914D\uFF0C\u8BBE\u7F6E fixed \u65F6\u9ED8\u8BA4\u5F00\u542F | \nboolean | \nfalse | \n
before-change | \n\u5207\u6362\u6807\u7B7E\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u963B\u6B62\u5207\u6362\uFF0C\u652F\u6301\u8FD4\u56DE Promise | \n(name: number | string) => boolean | Promise<boolean> | \n- | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u5207\u6362\u6807\u7B7E\u65F6\u89E6\u53D1 | \nactive: number | string | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
name | \n\u6807\u7B7E\u540D\u79F0\uFF0C\u4F5C\u4E3A\u5339\u914D\u7684\u6807\u8BC6\u7B26 | \nnumber | string | \n\u5F53\u524D\u6807\u7B7E\u7684\u7D22\u5F15\u503C | \n
icon | \n\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n- | \n
icon-prefix | \n\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 | \nstring | \nvan-icon | \n
dot | \n\u662F\u5426\u663E\u793A\u56FE\u6807\u53F3\u4E0A\u89D2\u5C0F\u7EA2\u70B9 | \nboolean | \nfalse | \n
badge | \n\u56FE\u6807\u53F3\u4E0A\u89D2\u5FBD\u6807\u7684\u5185\u5BB9 | \nnumber | string | \n- | \n
badge-props | \n\u81EA\u5B9A\u4E49\u5FBD\u6807\u7684\u5C5E\u6027\uFF0C\u4F20\u5165\u7684\u5BF9\u8C61\u4F1A\u88AB\u900F\u4F20\u7ED9 Badge \u7EC4\u4EF6\u7684 props | \nBadgeProps | \n- | \n
url | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740 | \nstring | \n- | \n
to | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u76EE\u6807\u8DEF\u7531\u5BF9\u8C61\uFF0C\u7B49\u540C\u4E8E Vue Router \u7684 to \u5C5E\u6027 | \nstring | object | \n- | \n
replace | \n\u662F\u5426\u5728\u8DF3\u8F6C\u65F6\u66FF\u6362\u5F53\u524D\u9875\u9762\u5386\u53F2 | \nboolean | \nfalse | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
icon | \n\u81EA\u5B9A\u4E49\u56FE\u6807 | \nactive: boolean | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { TabbarProps, TabbarItemProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-tabbar-height | \n50px | \n- | \n
--van-tabbar-z-index | \n1 | \n- | \n
--van-tabbar-background | \nvar(--van-background-2) | \n- | \n
--van-tabbar-item-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-tabbar-item-text-color | \nvar(--van-text-color) | \n- | \n
--van-tabbar-item-active-color | \nvar(--van-primary-color) | \n- | \n
--van-tabbar-item-active-background | \nvar(--van-background-2) | \n- | \n
--van-tabbar-item-line-height | \n1 | \n- | \n
--van-tabbar-item-icon-size | \n22px | \n- | \n
--van-tabbar-item-icon-margin-bottom | \nvar(--van-padding-base) | \n- | \n
The menu list that pops down downwards.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { DropdownMenu, DropdownItem } from 'vant';\n\nconst app = createApp();\napp.use(DropdownMenu);\napp.use(DropdownItem);\n
\n<van-dropdown-menu>\n <van-dropdown-item v-model="value1" :options="option1" />\n <van-dropdown-item v-model="value2" :options="option2" />\n</van-dropdown-menu>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value1 = ref(0);\n const value2 = ref('a');\n const option1 = [\n { text: 'Option1', value: 0 },\n { text: 'Option2', value: 1 },\n { text: 'Option3', value: 2 },\n ];\n const option2 = [\n { text: 'Option A', value: 'a' },\n { text: 'Option B', value: 'b' },\n { text: 'Option C', value: 'c' },\n ];\n\n return {\n value1,\n value2,\n option1,\n option2,\n };\n },\n};\n
\n<van-dropdown-menu ref="menuRef">\n <van-dropdown-item v-model="value" :options="options" />\n <van-dropdown-item title="Title" ref="item">\n <van-cell center title="Title">\n <template #right-icon>\n <van-switch v-model="switch1" />\n </template>\n </van-cell>\n <van-cell center title="Title">\n <template #right-icon>\n <van-switch v-model="switch2" />\n </template>\n </van-cell>\n <div style="padding: 5px 16px;">\n <van-button type="primary" block round @click="onConfirm">\n Confirm\n </van-button>\n </div>\n </van-dropdown-item>\n</van-dropdown-menu>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const menuRef = ref(null);\n const itemRef = ref(null);\n const value = ref(0);\n const switch1 = ref(false);\n const switch2 = ref(false);\n const options = [\n { text: 'Option1', value: 0 },\n { text: 'Option2', value: 1 },\n { text: 'Option3', value: 2 },\n ];\n const onConfirm = () => {\n item.value.toggle();\n // or\n // menuRef.value.close();\n };\n\n return {\n menuRef,\n itemRef,\n value,\n switch1,\n switch2,\n options,\n onConfirm,\n };\n },\n};\n
\nUse active-color
prop to custom active color of the title and options.
<van-dropdown-menu active-color="#ee0a24">\n <van-dropdown-item v-model="value1" :options="option1" />\n <van-dropdown-item v-model="value2" :options="option2" />\n</van-dropdown-menu>\n
\nYou can set swipe-threshold
prop to customize threshold number.
<van-dropdown-menu swipe-threshold="4">\n <van-dropdown-item v-model="value1" :options="option1" />\n <van-dropdown-item v-model="value2" :options="option2" />\n <van-dropdown-item v-model="value2" :options="option2" />\n <van-dropdown-item v-model="value2" :options="option2" />\n <van-dropdown-item v-model="value2" :options="option2" />\n</van-dropdown-menu>\n
\n<van-dropdown-menu direction="up">\n <van-dropdown-item v-model="value1" :options="option1" />\n <van-dropdown-item v-model="value2" :options="option2" />\n</van-dropdown-menu>\n
\n<van-dropdown-menu>\n <van-dropdown-item v-model="value1" disabled :options="option1" />\n <van-dropdown-item v-model="value2" disabled :options="option2" />\n</van-dropdown-menu>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
active-color | \nActive color of title and option | \nstring | \n#1989fa | \n
direction | \nExpand direction, can be set to up | \nstring | \ndown | \n
z-index | \nz-index of menu item | \nnumber | string | \n10 | \n
duration | \nTransition duration, unit second | \nnumber | string | \n0.2 | \n
overlay | \nWhether to show overlay | \nboolean | \ntrue | \n
close-on-click-overlay | \nWhether to close when overlay is clicked | \nboolean | \ntrue | \n
close-on-click-outside | \nWhether to close when outside is clicked | \nboolean | \ntrue | \n
swipe-threshold | \nHorizontal scrolling is allowed when the number of items exceeds the threshold and the total width exceeds the width of the menu. | \nnumber | string | \n- | \n
auto-locate | \nWhen the ancestor element is set with a transform, the position of the dropdown menu will be automatically adjusted. | \nboolean | \nfalse | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nValue of current option | \nnumber | string | \n- | \n
title | \nItem title | \nstring | \nText of selected option | \n
options | \nOptions | \nOption[] | \n[] | \n
disabled | \nWhether to disable dropdown item | \nboolean | \nfalse | \n
lazy-render | \nWhether to lazy render util opened | \nboolean | \ntrue | \n
title-class | \nTitle class | \nstring | Array | object | \n- | \n
teleport | \nSpecifies a target element where DropdownItem will be mounted | \nstring | Element | \n- | \n
Event | \nDescription | \nArguments | \n
---|---|---|
change | \nEmitted select option and value changed | \nvalue: number | string | \n
open | \nEmitted when opening menu | \n- | \n
close | \nEmitted when closing menu | \n- | \n
opened | \nEmitted when menu is opened | \n- | \n
closed | \nEmitted when menu is closed | \n- | \n
Name | \nDescription | \n
---|---|
default | \nContent | \n
title | \nCustom title | \n
Use ref to get DropdownMenu instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
close | \nClose all dropdown items | \n- | \n- | \n
Use ref to get DropdownItem instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
toggle | \nToggle display | \nshow?: boolean | \n- | \n
The component exports the following type definitions:
\nimport type {\n DropdownMenuProps,\n DropdownItemProps,\n DropdownItemOption,\n DropdownItemInstance,\n DropdownMenuInstance,\n DropdownMenuDirection,\n} from 'vant';\n
\nDropdownMenuInstance
and DropdownItemInstance
are the types of component instances:
import { ref } from 'vue';\nimport type { DropdownMenuInstance, DropdownItemInstance } from 'vant';\n\nconst dropdownMenuRef = ref<DropdownMenuInstance>();\nconst dropdownItemRef = ref<DropdownItemInstance>();\n\ndropdownMenuRef.value?.close();\ndropdownItemRef.value?.toggle();\n
\nKey | \nDescription | \nType | \n
---|---|---|
text | \nText | \nstring | \n
value | \nValue | \nnumber | string | boolean | \n
icon | \nLeft icon | \nstring | \n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-dropdown-menu-height | \n48px | \n- | \n
--van-dropdown-menu-background | \nvar(--van-background-2) | \n- | \n
--van-dropdown-menu-shadow | \n0 2px 12px fade(var(--van-gray-7), 12) | \n- | \n
--van-dropdown-menu-title-font-size | \n15px | \n- | \n
--van-dropdown-menu-title-text-color | \nvar(--van-text-color) | \n- | \n
--van-dropdown-menu-title-active-text-color | \nvar(--van-primary-color) | \n- | \n
--van-dropdown-menu-title-disabled-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-dropdown-menu-title-padding | \n0 var(--van-padding-xs) | \n- | \n
--van-dropdown-menu-title-line-height | \nvar(--van-line-height-lg) | \n- | \n
--van-dropdown-menu-option-active-color | \nvar(--van-primary-color) | \n- | \n
--van-dropdown-menu-content-max-height | \n80% | \n- | \n
--van-dropdown-item-z-index | \n10 | \n- | \n
The menu list that pops down downwards.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { DropdownMenu, DropdownItem } from 'vant';\n\nconst app = createApp();\napp.use(DropdownMenu);\napp.use(DropdownItem);\n
\n<van-dropdown-menu>\n <van-dropdown-item v-model="value1" :options="option1" />\n <van-dropdown-item v-model="value2" :options="option2" />\n</van-dropdown-menu>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value1 = ref(0);\n const value2 = ref('a');\n const option1 = [\n { text: 'Option1', value: 0 },\n { text: 'Option2', value: 1 },\n { text: 'Option3', value: 2 },\n ];\n const option2 = [\n { text: 'Option A', value: 'a' },\n { text: 'Option B', value: 'b' },\n { text: 'Option C', value: 'c' },\n ];\n\n return {\n value1,\n value2,\n option1,\n option2,\n };\n },\n};\n
\n<van-dropdown-menu ref="menuRef">\n <van-dropdown-item v-model="value" :options="options" />\n <van-dropdown-item title="Title" ref="item">\n <van-cell center title="Title">\n <template #right-icon>\n <van-switch v-model="switch1" />\n </template>\n </van-cell>\n <van-cell center title="Title">\n <template #right-icon>\n <van-switch v-model="switch2" />\n </template>\n </van-cell>\n <div style="padding: 5px 16px;">\n <van-button type="primary" block round @click="onConfirm">\n Confirm\n </van-button>\n </div>\n </van-dropdown-item>\n</van-dropdown-menu>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const menuRef = ref(null);\n const itemRef = ref(null);\n const value = ref(0);\n const switch1 = ref(false);\n const switch2 = ref(false);\n const options = [\n { text: 'Option1', value: 0 },\n { text: 'Option2', value: 1 },\n { text: 'Option3', value: 2 },\n ];\n const onConfirm = () => {\n item.value.toggle();\n // or\n // menuRef.value.close();\n };\n\n return {\n menuRef,\n itemRef,\n value,\n switch1,\n switch2,\n options,\n onConfirm,\n };\n },\n};\n
\nUse active-color
prop to custom active color of the title and options.
<van-dropdown-menu active-color="#ee0a24">\n <van-dropdown-item v-model="value1" :options="option1" />\n <van-dropdown-item v-model="value2" :options="option2" />\n</van-dropdown-menu>\n
\nYou can set swipe-threshold
prop to customize threshold number.
<van-dropdown-menu swipe-threshold="4">\n <van-dropdown-item v-model="value1" :options="option1" />\n <van-dropdown-item v-model="value2" :options="option2" />\n <van-dropdown-item v-model="value2" :options="option2" />\n <van-dropdown-item v-model="value2" :options="option2" />\n <van-dropdown-item v-model="value2" :options="option2" />\n</van-dropdown-menu>\n
\n<van-dropdown-menu direction="up">\n <van-dropdown-item v-model="value1" :options="option1" />\n <van-dropdown-item v-model="value2" :options="option2" />\n</van-dropdown-menu>\n
\n<van-dropdown-menu>\n <van-dropdown-item v-model="value1" disabled :options="option1" />\n <van-dropdown-item v-model="value2" disabled :options="option2" />\n</van-dropdown-menu>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
active-color | \nActive color of title and option | \nstring | \n#1989fa | \n
direction | \nExpand direction, can be set to up | \nstring | \ndown | \n
z-index | \nz-index of menu item | \nnumber | string | \n10 | \n
duration | \nTransition duration, unit second | \nnumber | string | \n0.2 | \n
overlay | \nWhether to show overlay | \nboolean | \ntrue | \n
close-on-click-overlay | \nWhether to close when overlay is clicked | \nboolean | \ntrue | \n
close-on-click-outside | \nWhether to close when outside is clicked | \nboolean | \ntrue | \n
swipe-threshold | \nHorizontal scrolling is allowed when the number of items exceeds the threshold and the total width exceeds the width of the menu. | \nnumber | string | \n- | \n
auto-locate | \nWhen the ancestor element is set with a transform, the position of the dropdown menu will be automatically adjusted. | \nboolean | \nfalse | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nValue of current option | \nnumber | string | \n- | \n
title | \nItem title | \nstring | \nText of selected option | \n
options | \nOptions | \nOption[] | \n[] | \n
disabled | \nWhether to disable dropdown item | \nboolean | \nfalse | \n
lazy-render | \nWhether to lazy render util opened | \nboolean | \ntrue | \n
title-class | \nTitle class | \nstring | Array | object | \n- | \n
teleport | \nSpecifies a target element where DropdownItem will be mounted | \nstring | Element | \n- | \n
Event | \nDescription | \nArguments | \n
---|---|---|
change | \nEmitted select option and value changed | \nvalue: number | string | \n
open | \nEmitted when opening menu | \n- | \n
close | \nEmitted when closing menu | \n- | \n
opened | \nEmitted when menu is opened | \n- | \n
closed | \nEmitted when menu is closed | \n- | \n
Name | \nDescription | \n
---|---|
default | \nContent | \n
title | \nCustom title | \n
Use ref to get DropdownMenu instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
close | \nClose all dropdown items | \n- | \n- | \n
Use ref to get DropdownItem instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
toggle | \nToggle display | \nshow?: boolean | \n- | \n
The component exports the following type definitions:
\nimport type {\n DropdownMenuProps,\n DropdownItemProps,\n DropdownItemOption,\n DropdownItemInstance,\n DropdownMenuInstance,\n DropdownMenuDirection,\n} from 'vant';\n
\nDropdownMenuInstance
and DropdownItemInstance
are the types of component instances:
import { ref } from 'vue';\nimport type { DropdownMenuInstance, DropdownItemInstance } from 'vant';\n\nconst dropdownMenuRef = ref<DropdownMenuInstance>();\nconst dropdownItemRef = ref<DropdownItemInstance>();\n\ndropdownMenuRef.value?.close();\ndropdownItemRef.value?.toggle();\n
\nKey | \nDescription | \nType | \n
---|---|---|
text | \nText | \nstring | \n
value | \nValue | \nnumber | string | boolean | \n
icon | \nLeft icon | \nstring | \n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-dropdown-menu-height | \n48px | \n- | \n
--van-dropdown-menu-background | \nvar(--van-background-2) | \n- | \n
--van-dropdown-menu-shadow | \n0 2px 12px fade(var(--van-gray-7), 12) | \n- | \n
--van-dropdown-menu-title-font-size | \n15px | \n- | \n
--van-dropdown-menu-title-text-color | \nvar(--van-text-color) | \n- | \n
--van-dropdown-menu-title-active-text-color | \nvar(--van-primary-color) | \n- | \n
--van-dropdown-menu-title-disabled-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-dropdown-menu-title-padding | \n0 var(--van-padding-xs) | \n- | \n
--van-dropdown-menu-title-line-height | \nvar(--van-line-height-lg) | \n- | \n
--van-dropdown-menu-option-active-color | \nvar(--van-primary-color) | \n- | \n
--van-dropdown-menu-content-max-height | \n80% | \n- | \n
--van-dropdown-item-z-index | \n10 | \n- | \n
\u65E5\u5386\u7EC4\u4EF6\u7528\u4E8E\u9009\u62E9\u65E5\u671F\u6216\u65E5\u671F\u533A\u95F4\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Calendar } from 'vant';\n\nconst app = createApp();\napp.use(Calendar);\n
\n\u4E0B\u9762\u6F14\u793A\u4E86\u7ED3\u5408\u5355\u5143\u683C\u6765\u4F7F\u7528\u65E5\u5386\u7EC4\u4EF6\u7684\u7528\u6CD5\uFF0C\u65E5\u671F\u9009\u62E9\u5B8C\u6210\u540E\u4F1A\u89E6\u53D1 confirm
\u4E8B\u4EF6\u3002
<van-cell title="\u9009\u62E9\u5355\u4E2A\u65E5\u671F" :value="date" @click="show = true" />\n<van-calendar v-model:show="show" @confirm="onConfirm" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const date = ref('');\n const show = ref(false);\n\n const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;\n const onConfirm = (value) => {\n show.value = false;\n date.value = formatDate(value);\n };\n\n return {\n date,\n show,\n onConfirm,\n };\n },\n};\n
\n\u8BBE\u7F6E type
\u4E3A multiple
\u540E\u53EF\u4EE5\u9009\u62E9\u591A\u4E2A\u65E5\u671F\uFF0C\u6B64\u65F6 confirm
\u4E8B\u4EF6\u8FD4\u56DE\u7684 date \u4E3A\u6570\u7EC4\u7ED3\u6784\uFF0C\u6570\u7EC4\u5305\u542B\u82E5\u5E72\u4E2A\u9009\u4E2D\u7684\u65E5\u671F\u3002
<van-cell title="\u9009\u62E9\u591A\u4E2A\u65E5\u671F" :value="text" @click="show = true" />\n<van-calendar v-model:show="show" type="multiple" @confirm="onConfirm" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const text = ref('');\n const show = ref(false);\n\n const onConfirm = (dates) => {\n show.value = false;\n text.value = `\u9009\u62E9\u4E86 ${dates.length} \u4E2A\u65E5\u671F`;\n };\n\n return {\n text,\n show,\n onConfirm,\n };\n },\n};\n
\n\u8BBE\u7F6E type
\u4E3A range
\u540E\u53EF\u4EE5\u9009\u62E9\u65E5\u671F\u533A\u95F4\uFF0C\u6B64\u65F6 confirm
\u4E8B\u4EF6\u8FD4\u56DE\u7684 date \u4E3A\u6570\u7EC4\u7ED3\u6784\uFF0C\u6570\u7EC4\u7B2C\u4E00\u9879\u4E3A\u5F00\u59CB\u65F6\u95F4\uFF0C\u7B2C\u4E8C\u9879\u4E3A\u7ED3\u675F\u65F6\u95F4\u3002
<van-cell title="\u9009\u62E9\u65E5\u671F\u533A\u95F4" :value="date" @click="show = true" />\n<van-calendar v-model:show="show" type="range" @confirm="onConfirm" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const date = ref('');\n const show = ref(false);\n\n const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;\n const onConfirm = (values) => {\n const [start, end] = values;\n show.value = false;\n date.value = `${formatDate(start)} - ${formatDate(end)}`;\n };\n\n return {\n date,\n show,\n onConfirm,\n };\n },\n};\n
\n\n\nTips: \u9ED8\u8BA4\u60C5\u51B5\u4E0B\uFF0C\u65E5\u671F\u533A\u95F4\u7684\u8D77\u6B62\u65F6\u95F4\u4E0D\u80FD\u4E3A\u540C\u4E00\u5929\uFF0C\u53EF\u4EE5\u901A\u8FC7\u8BBE\u7F6E allow-same-day \u5C5E\u6027\u6765\u5141\u8BB8\u9009\u62E9\u540C\u4E00\u5929\u3002
\n
\u5C06 show-confirm
\u8BBE\u7F6E\u4E3A false
\u53EF\u4EE5\u9690\u85CF\u786E\u8BA4\u6309\u94AE\uFF0C\u8FD9\u79CD\u60C5\u51B5\u4E0B\u9009\u62E9\u5B8C\u6210\u540E\u4F1A\u7ACB\u5373\u89E6\u53D1 confirm
\u4E8B\u4EF6\u3002
<van-calendar v-model:show="show" :show-confirm="false" />\n
\n\u901A\u8FC7 color
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u65E5\u5386\u7684\u989C\u8272\uFF0C\u5BF9\u9009\u4E2D\u65E5\u671F\u548C\u5E95\u90E8\u6309\u94AE\u751F\u6548\u3002
<van-calendar v-model:show="show" color="#ee0a24" />\n
\n\u901A\u8FC7 min-date
\u548C max-date
\u5B9A\u4E49\u65E5\u5386\u7684\u8303\u56F4\u3002
<van-calendar v-model:show="show" :min-date="minDate" :max-date="maxDate" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n\n return {\n show,\n minDate: new Date(2010, 0, 1),\n maxDate: new Date(2010, 0, 31),\n };\n },\n};\n
\n\u901A\u8FC7 confirm-text
\u8BBE\u7F6E\u6309\u94AE\u6587\u5B57\uFF0C\u901A\u8FC7 confirm-disabled-text
\u8BBE\u7F6E\u6309\u94AE\u7981\u7528\u65F6\u7684\u6587\u5B57\u3002
<van-calendar\n v-model:show="show"\n type="range"\n confirm-text="\u5B8C\u6210"\n confirm-disabled-text="\u8BF7\u9009\u62E9\u7ED3\u675F\u65F6\u95F4"\n/>\n
\n\u901A\u8FC7\u4F20\u5165 formatter
\u51FD\u6570\u6765\u5BF9\u65E5\u5386\u4E0A\u6BCF\u4E00\u683C\u7684\u5185\u5BB9\u8FDB\u884C\u683C\u5F0F\u5316\u3002
<van-calendar v-model:show="show" type="range" :formatter="formatter" />\n
\nexport default {\n setup() {\n const formatter = (day) => {\n const month = day.date.getMonth() + 1;\n const date = day.date.getDate();\n\n if (month === 5) {\n if (date === 1) {\n day.topInfo = '\u52B3\u52A8\u8282';\n } else if (date === 4) {\n day.topInfo = '\u9752\u5E74\u8282';\n } else if (date === 11) {\n day.text = '\u4ECA\u5929';\n }\n }\n\n if (day.type === 'start') {\n day.bottomInfo = '\u5165\u4F4F';\n } else if (day.type === 'end') {\n day.bottomInfo = '\u79BB\u5E97';\n }\n\n return day;\n };\n\n return {\n formatter,\n };\n },\n};\n
\n\u901A\u8FC7 position
\u5C5E\u6027\u81EA\u5B9A\u4E49\u5F39\u51FA\u5C42\u7684\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A top
\u3001left
\u3001right
\u3002
<van-calendar v-model:show="show" :round="false" position="right" />\n
\n\u9009\u62E9\u65E5\u671F\u533A\u95F4\u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7 max-range
\u5C5E\u6027\u6765\u6307\u5B9A\u6700\u591A\u53EF\u9009\u5929\u6570\uFF0C\u9009\u62E9\u7684\u8303\u56F4\u8D85\u8FC7\u6700\u591A\u53EF\u9009\u5929\u6570\u65F6\uFF0C\u4F1A\u5F39\u51FA\u76F8\u5E94\u7684\u63D0\u793A\u6587\u6848\u3002
<van-calendar type="range" :max-range="3" :style="{ height: '500px' }" />\n
\n\u901A\u8FC7 first-day-of-week
\u5C5E\u6027\u8BBE\u7F6E\u4E00\u5468\u4ECE\u54EA\u5929\u5F00\u59CB\u3002
<van-calendar first-day-of-week="1" />\n
\n\u5C06 poppable
\u8BBE\u7F6E\u4E3A false
\uFF0C\u65E5\u5386\u4F1A\u76F4\u63A5\u5C55\u793A\u5728\u9875\u9762\u5185\uFF0C\u800C\u4E0D\u662F\u4EE5\u5F39\u5C42\u7684\u5F62\u5F0F\u51FA\u73B0\u3002
<van-calendar\n title="\u65E5\u5386"\n :poppable="false"\n :show-confirm="false"\n :style="{ height: '500px' }"\n/>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
type | \n\u9009\u62E9\u7C7B\u578B:single \u8868\u793A\u9009\u62E9\u5355\u4E2A\u65E5\u671F\uFF0Cmultiple \u8868\u793A\u9009\u62E9\u591A\u4E2A\u65E5\u671F\uFF0Crange \u8868\u793A\u9009\u62E9\u65E5\u671F\u533A\u95F4 | \nstring | \nsingle | \n
title | \n\u65E5\u5386\u6807\u9898 | \nstring | \n\u65E5\u671F\u9009\u62E9 | \n
color | \n\u4E3B\u9898\u8272\uFF0C\u5BF9\u5E95\u90E8\u6309\u94AE\u548C\u9009\u4E2D\u65E5\u671F\u751F\u6548 | \nstring | \n#1989fa | \n
min-date | \n\u53EF\u9009\u62E9\u7684\u6700\u5C0F\u65E5\u671F | \nDate | \n\u5F53\u524D\u65E5\u671F | \n
max-date | \n\u53EF\u9009\u62E9\u7684\u6700\u5927\u65E5\u671F | \nDate | \n\u5F53\u524D\u65E5\u671F\u7684\u516D\u4E2A\u6708\u540E | \n
default-date | \n\u9ED8\u8BA4\u9009\u4E2D\u7684\u65E5\u671F\uFF0Ctype \u4E3A multiple \u6216 range \u65F6\u4E3A\u6570\u7EC4\uFF0C\u4F20\u5165 null \u8868\u793A\u9ED8\u8BA4\u4E0D\u9009\u62E9 | \nDate | Date[] | null | \n\u4ECA\u5929 | \n
row-height | \n\u65E5\u671F\u884C\u9AD8 | \nnumber | string | \n64 | \n
formatter | \n\u65E5\u671F\u683C\u5F0F\u5316\u51FD\u6570 | \n(day: Day) => Day | \n- | \n
poppable | \n\u662F\u5426\u4EE5\u5F39\u5C42\u7684\u5F62\u5F0F\u5C55\u793A\u65E5\u5386 | \nboolean | \ntrue | \n
lazy-render | \n\u662F\u5426\u53EA\u6E32\u67D3\u53EF\u89C6\u533A\u57DF\u7684\u5185\u5BB9 | \nboolean | \ntrue | \n
show-mark | \n\u662F\u5426\u663E\u793A\u6708\u4EFD\u80CC\u666F\u6C34\u5370 | \nboolean | \ntrue | \n
show-title | \n\u662F\u5426\u5C55\u793A\u65E5\u5386\u6807\u9898 | \nboolean | \ntrue | \n
show-subtitle | \n\u662F\u5426\u5C55\u793A\u65E5\u5386\u526F\u6807\u9898\uFF08\u5E74\u6708\uFF09 | \nboolean | \ntrue | \n
show-confirm | \n\u662F\u5426\u5C55\u793A\u786E\u8BA4\u6309\u94AE | \nboolean | \ntrue | \n
readonly | \n\u662F\u5426\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u53EA\u8BFB\u72B6\u6001\u4E0B\u4E0D\u80FD\u9009\u62E9\u65E5\u671F | \nboolean | \nfalse | \n
confirm-text | \n\u786E\u8BA4\u6309\u94AE\u7684\u6587\u5B57 | \nstring | \n\u786E\u5B9A | \n
confirm-disabled-text | \n\u786E\u8BA4\u6309\u94AE\u5904\u4E8E\u7981\u7528\u72B6\u6001\u65F6\u7684\u6587\u5B57 | \nstring | \n\u786E\u5B9A | \n
first-day-of-week | \n\u8BBE\u7F6E\u5468\u8D77\u59CB\u65E5 | \n0-6 | \n0 | \n
\u5F53 Calendar \u7684 poppable
\u4E3A true
\u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B props:
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:show | \n\u662F\u5426\u663E\u793A\u65E5\u5386\u5F39\u7A97 | \nboolean | \nfalse | \n
position | \n\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A top right left | \nstring | \nbottom | \n
round | \n\u662F\u5426\u663E\u793A\u5706\u89D2\u5F39\u7A97 | \nboolean | \ntrue | \n
close-on-popstate | \n\u662F\u5426\u5728\u9875\u9762\u56DE\u9000\u65F6\u81EA\u52A8\u5173\u95ED | \nboolean | \ntrue | \n
close-on-click-overlay | \n\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED | \nboolean | \ntrue | \n
safe-area-inset-top | \n\u662F\u5426\u5F00\u542F\u9876\u90E8\u5B89\u5168\u533A\u9002\u914D | \nboolean | \nfalse | \n
safe-area-inset-bottom | \n\u662F\u5426\u5F00\u542F\u5E95\u90E8\u5B89\u5168\u533A\u9002\u914D | \nboolean | \ntrue | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \n- | \n
\u5F53 Calendar \u7684 type
\u4E3A range
\u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B props:
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
max-range | \n\u65E5\u671F\u533A\u95F4\u6700\u591A\u53EF\u9009\u5929\u6570 | \nnumber | string | \n\u65E0\u9650\u5236 | \n
range-prompt | \n\u8303\u56F4\u9009\u62E9\u8D85\u8FC7\u6700\u591A\u53EF\u9009\u5929\u6570\u65F6\u7684\u63D0\u793A\u6587\u6848 | \nstring | \n\u6700\u591A\u9009\u62E9 xx \u5929 | \n
show-range-prompt | \n\u8303\u56F4\u9009\u62E9\u8D85\u8FC7\u6700\u591A\u53EF\u9009\u5929\u6570\u65F6\uFF0C\u662F\u5426\u5C55\u793A\u63D0\u793A\u6587\u6848 | \nboolean | \ntrue | \n
allow-same-day | \n\u662F\u5426\u5141\u8BB8\u65E5\u671F\u8303\u56F4\u7684\u8D77\u6B62\u65F6\u95F4\u4E3A\u540C\u4E00\u5929 | \nboolean | \nfalse | \n
\u5F53 Calendar \u7684 type
\u4E3A multiple
\u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B props:
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
max-range | \n\u65E5\u671F\u6700\u591A\u53EF\u9009\u5929\u6570 | \nnumber | string | \n\u65E0\u9650\u5236 | \n
range-prompt | \n\u9009\u62E9\u8D85\u8FC7\u6700\u591A\u53EF\u9009\u5929\u6570\u65F6\u7684\u63D0\u793A\u6587\u6848 | \nstring | \n\u6700\u591A\u9009\u62E9 xx \u5929 | \n
\u65E5\u5386\u4E2D\u7684\u6BCF\u4E2A\u65E5\u671F\u90FD\u5BF9\u5E94\u4E00\u4E2A Day \u5BF9\u8C61\uFF0C\u901A\u8FC7formatter
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49 Day \u5BF9\u8C61\u7684\u5185\u5BB9
\u952E\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
date | \n\u65E5\u671F\u5BF9\u5E94\u7684 Date \u5BF9\u8C61 | \nDate | \n
type | \n\u65E5\u671F\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A selected \u3001start \u3001middle \u3001end \u3001disabled | \nstring | \n
text | \n\u4E2D\u95F4\u663E\u793A\u7684\u6587\u5B57 | \nstring | \n
topInfo | \n\u4E0A\u65B9\u7684\u63D0\u793A\u4FE1\u606F | \nstring | \n
bottomInfo | \n\u4E0B\u65B9\u7684\u63D0\u793A\u4FE1\u606F | \nstring | \n
className | \n\u989D\u5916\u7C7B\u540D | \nstring | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
select | \n\u70B9\u51FB\u5E76\u9009\u4E2D\u4EFB\u610F\u65E5\u671F\u65F6\u89E6\u53D1 | \nvalue: Date | Date[] | \n
confirm | \n\u65E5\u671F\u9009\u62E9\u5B8C\u6210\u540E\u89E6\u53D1\uFF0C\u82E5 show-confirm \u4E3A true \uFF0C\u5219\u70B9\u51FB\u786E\u8BA4\u6309\u94AE\u540E\u89E6\u53D1 | \nvalue: Date | Date[] | \n
open | \n\u6253\u5F00\u5F39\u51FA\u5C42\u65F6\u89E6\u53D1 | \n- | \n
close | \n\u5173\u95ED\u5F39\u51FA\u5C42\u65F6\u89E6\u53D1 | \n- | \n
opened | \n\u6253\u5F00\u5F39\u51FA\u5C42\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
closed | \n\u5173\u95ED\u5F39\u51FA\u5C42\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
unselect | \n\u5F53\u65E5\u5386\u7EC4\u4EF6\u7684 type \u4E3A multiple \u65F6\uFF0C\u53D6\u6D88\u9009\u4E2D\u65E5\u671F\u65F6\u89E6\u53D1 | \nvalue: Date | \n
month-show | \n\u5F53\u67D0\u4E2A\u6708\u4EFD\u8FDB\u5165\u53EF\u89C6\u533A\u57DF\u65F6\u89E6\u53D1 | \n{ date: Date, title: string } | \n
over-range | \n\u8303\u56F4\u9009\u62E9\u8D85\u8FC7\u6700\u591A\u53EF\u9009\u5929\u6570\u65F6\u89E6\u53D1 | \n- | \n
click-subtitle | \n\u70B9\u51FB\u65E5\u5386\u526F\u6807\u9898\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
click-disabled-date v4.7.0 | \n\u70B9\u51FB\u7981\u7528\u65E5\u671F\u65F6\u89E6\u53D1 | \nvalue: Date | Date[] | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
title | \n\u81EA\u5B9A\u4E49\u6807\u9898 | \n- | \n
subtitle | \n\u81EA\u5B9A\u4E49\u65E5\u5386\u526F\u6807\u9898 | \n{ text: string, date?: Date } | \n
month-title v4.0.9 | \n\u81EA\u5B9A\u4E49\u6BCF\u4E2A\u6708\u4EFD\u7684\u5C0F\u6807\u9898 | \n{ text: string, date: Date } | \n
footer | \n\u81EA\u5B9A\u4E49\u5E95\u90E8\u533A\u57DF\u5185\u5BB9 | \n- | \n
confirm-text | \n\u81EA\u5B9A\u4E49\u786E\u8BA4\u6309\u94AE\u7684\u5185\u5BB9 | \n{ disabled: boolean } | \n
top-info | \n\u81EA\u5B9A\u4E49\u65E5\u671F\u4E0A\u65B9\u7684\u63D0\u793A\u4FE1\u606F | \nday: Day | \n
bottom-info | \n\u81EA\u5B9A\u4E49\u65E5\u671F\u4E0B\u65B9\u7684\u63D0\u793A\u4FE1\u606F | \nday: Day | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Calendar \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
reset | \n\u5C06\u9009\u4E2D\u7684\u65E5\u671F\u91CD\u7F6E\u5230\u6307\u5B9A\u65E5\u671F\uFF0C\u672A\u4F20\u53C2\u65F6\u4F1A\u91CD\u7F6E\u5230\u9ED8\u8BA4\u65E5\u671F | \ndate?: Date | Date[] | \n- | \n
scrollToDate | \n\u6EDA\u52A8\u5230\u67D0\u4E2A\u65E5\u671F | \ndate: Date | \n- | \n
getSelectedDate | \n\u83B7\u53D6\u9009\u4E2D\u7684\u65E5\u671F | \n- | \nDate | Date[] | null | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n CalendarType,\n CalendarProps,\n CalendarDayItem,\n CalendarDayType,\n CalendarInstance,\n} from 'vant';\n
\nCalendarInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { CalendarInstance } from 'vant';\n\nconst calendarRef = ref<CalendarInstance>();\n\ncalendarRef.value?.reset();\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-calendar-background | \nvar(--van-background-2) | \n- | \n
--van-calendar-popup-height | \n80% | \n- | \n
--van-calendar-header-shadow | \n0 2px 10px rgba(125, 126, 128, 0.16) | \n- | \n
--van-calendar-header-title-height | \n44px | \n- | \n
--van-calendar-header-title-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-calendar-header-subtitle-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-calendar-weekdays-height | \n30px | \n- | \n
--van-calendar-weekdays-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-calendar-month-title-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-calendar-month-mark-color | \nfade(var(--van-gray-2), 80%) | \n- | \n
--van-calendar-month-mark-font-size | \n160px | \n- | \n
--van-calendar-day-height | \n64px | \n- | \n
--van-calendar-day-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-calendar-day-margin-bottom | \n4px | \n- | \n
--van-calendar-range-edge-color | \nvar(--van-white) | \n- | \n
--van-calendar-range-edge-background | \nvar(--van-primary-color) | \n- | \n
--van-calendar-range-middle-color | \nvar(--van-primary-color) | \n- | \n
--van-calendar-range-middle-background-opacity | \n0.1 | \n- | \n
--van-calendar-selected-day-size | \n54px | \n- | \n
--van-calendar-selected-day-color | \nvar(--van-white) | \n- | \n
--van-calendar-info-font-size | \nvar(--van-font-size-xs) | \n- | \n
--van-calendar-info-line-height | \nvar(--van-line-height-xs) | \n- | \n
--van-calendar-selected-day-background | \nvar(--van-primary-color) | \n- | \n
--van-calendar-day-disabled-color | \nvar(--van-text-color-3) | \n- | \n
--van-calendar-confirm-button-height | \n36px | \n- | \n
--van-calendar-confirm-button-margin | \n7px 0 | \n- | \n
\u5982\u679C\u9700\u8981\u5728 formatter \u4E2D\u4F7F\u7528\u5F02\u6B65\u8FD4\u56DE\u7684\u6570\u636E\uFF0C\u53EF\u4EE5\u4F7F\u7528\u8BA1\u7B97\u5C5E\u6027\u52A8\u6001\u521B\u5EFA formatter \u51FD\u6570\uFF0C\u793A\u4F8B\u5982\u4E0B\uFF1A
\nconst asyncData = ref();\n\nconst formatter = computed(() => {\n if (!asyncData.value) {\n return (day) => day;\n }\n return (day) => {\n day.bottomInfo = asyncData.value;\n return day;\n };\n});\n\nsetTimeout(() => {\n asyncData.value = '\u540E\u7AEF\u6587\u6848';\n}, 3000);\n
\n\u5982\u679C\u4F60\u9047\u5230\u4E86\u5728 iOS \u4E0A\u65E0\u6CD5\u6E32\u67D3\u7EC4\u4EF6\u7684\u95EE\u9898\uFF0C\u8BF7\u786E\u8BA4\u5728\u521B\u5EFA Date \u5BF9\u8C61\u65F6\u6CA1\u6709\u4F7F\u7528new Date(\'2020-01-01\')
\u8FD9\u6837\u7684\u5199\u6CD5\uFF0CiOS \u4E0D\u652F\u6301\u4EE5\u4E2D\u5212\u7EBF\u5206\u9694\u7684\u65E5\u671F\u683C\u5F0F\uFF0C\u6B63\u786E\u5199\u6CD5\u662Fnew Date(\'2020/01/01\')
\u3002
\u5BF9\u6B64\u95EE\u9898\u7684\u8BE6\u7EC6\u89E3\u91CA\uFF1Astackoverflow\u3002
\n\u65E5\u5386\u7EC4\u4EF6\u7528\u4E8E\u9009\u62E9\u65E5\u671F\u6216\u65E5\u671F\u533A\u95F4\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Calendar } from 'vant';\n\nconst app = createApp();\napp.use(Calendar);\n
\n\u4E0B\u9762\u6F14\u793A\u4E86\u7ED3\u5408\u5355\u5143\u683C\u6765\u4F7F\u7528\u65E5\u5386\u7EC4\u4EF6\u7684\u7528\u6CD5\uFF0C\u65E5\u671F\u9009\u62E9\u5B8C\u6210\u540E\u4F1A\u89E6\u53D1 confirm
\u4E8B\u4EF6\u3002
<van-cell title="\u9009\u62E9\u5355\u4E2A\u65E5\u671F" :value="date" @click="show = true" />\n<van-calendar v-model:show="show" @confirm="onConfirm" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const date = ref('');\n const show = ref(false);\n\n const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;\n const onConfirm = (value) => {\n show.value = false;\n date.value = formatDate(value);\n };\n\n return {\n date,\n show,\n onConfirm,\n };\n },\n};\n
\n\u8BBE\u7F6E type
\u4E3A multiple
\u540E\u53EF\u4EE5\u9009\u62E9\u591A\u4E2A\u65E5\u671F\uFF0C\u6B64\u65F6 confirm
\u4E8B\u4EF6\u8FD4\u56DE\u7684 date \u4E3A\u6570\u7EC4\u7ED3\u6784\uFF0C\u6570\u7EC4\u5305\u542B\u82E5\u5E72\u4E2A\u9009\u4E2D\u7684\u65E5\u671F\u3002
<van-cell title="\u9009\u62E9\u591A\u4E2A\u65E5\u671F" :value="text" @click="show = true" />\n<van-calendar v-model:show="show" type="multiple" @confirm="onConfirm" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const text = ref('');\n const show = ref(false);\n\n const onConfirm = (dates) => {\n show.value = false;\n text.value = `\u9009\u62E9\u4E86 ${dates.length} \u4E2A\u65E5\u671F`;\n };\n\n return {\n text,\n show,\n onConfirm,\n };\n },\n};\n
\n\u8BBE\u7F6E type
\u4E3A range
\u540E\u53EF\u4EE5\u9009\u62E9\u65E5\u671F\u533A\u95F4\uFF0C\u6B64\u65F6 confirm
\u4E8B\u4EF6\u8FD4\u56DE\u7684 date \u4E3A\u6570\u7EC4\u7ED3\u6784\uFF0C\u6570\u7EC4\u7B2C\u4E00\u9879\u4E3A\u5F00\u59CB\u65F6\u95F4\uFF0C\u7B2C\u4E8C\u9879\u4E3A\u7ED3\u675F\u65F6\u95F4\u3002
<van-cell title="\u9009\u62E9\u65E5\u671F\u533A\u95F4" :value="date" @click="show = true" />\n<van-calendar v-model:show="show" type="range" @confirm="onConfirm" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const date = ref('');\n const show = ref(false);\n\n const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;\n const onConfirm = (values) => {\n const [start, end] = values;\n show.value = false;\n date.value = `${formatDate(start)} - ${formatDate(end)}`;\n };\n\n return {\n date,\n show,\n onConfirm,\n };\n },\n};\n
\n\n\nTips: \u9ED8\u8BA4\u60C5\u51B5\u4E0B\uFF0C\u65E5\u671F\u533A\u95F4\u7684\u8D77\u6B62\u65F6\u95F4\u4E0D\u80FD\u4E3A\u540C\u4E00\u5929\uFF0C\u53EF\u4EE5\u901A\u8FC7\u8BBE\u7F6E allow-same-day \u5C5E\u6027\u6765\u5141\u8BB8\u9009\u62E9\u540C\u4E00\u5929\u3002
\n
\u5C06 show-confirm
\u8BBE\u7F6E\u4E3A false
\u53EF\u4EE5\u9690\u85CF\u786E\u8BA4\u6309\u94AE\uFF0C\u8FD9\u79CD\u60C5\u51B5\u4E0B\u9009\u62E9\u5B8C\u6210\u540E\u4F1A\u7ACB\u5373\u89E6\u53D1 confirm
\u4E8B\u4EF6\u3002
<van-calendar v-model:show="show" :show-confirm="false" />\n
\n\u901A\u8FC7 color
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u65E5\u5386\u7684\u989C\u8272\uFF0C\u5BF9\u9009\u4E2D\u65E5\u671F\u548C\u5E95\u90E8\u6309\u94AE\u751F\u6548\u3002
<van-calendar v-model:show="show" color="#ee0a24" />\n
\n\u901A\u8FC7 min-date
\u548C max-date
\u5B9A\u4E49\u65E5\u5386\u7684\u8303\u56F4\u3002
<van-calendar v-model:show="show" :min-date="minDate" :max-date="maxDate" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n\n return {\n show,\n minDate: new Date(2010, 0, 1),\n maxDate: new Date(2010, 0, 31),\n };\n },\n};\n
\n\u901A\u8FC7 confirm-text
\u8BBE\u7F6E\u6309\u94AE\u6587\u5B57\uFF0C\u901A\u8FC7 confirm-disabled-text
\u8BBE\u7F6E\u6309\u94AE\u7981\u7528\u65F6\u7684\u6587\u5B57\u3002
<van-calendar\n v-model:show="show"\n type="range"\n confirm-text="\u5B8C\u6210"\n confirm-disabled-text="\u8BF7\u9009\u62E9\u7ED3\u675F\u65F6\u95F4"\n/>\n
\n\u901A\u8FC7\u4F20\u5165 formatter
\u51FD\u6570\u6765\u5BF9\u65E5\u5386\u4E0A\u6BCF\u4E00\u683C\u7684\u5185\u5BB9\u8FDB\u884C\u683C\u5F0F\u5316\u3002
<van-calendar v-model:show="show" type="range" :formatter="formatter" />\n
\nexport default {\n setup() {\n const formatter = (day) => {\n const month = day.date.getMonth() + 1;\n const date = day.date.getDate();\n\n if (month === 5) {\n if (date === 1) {\n day.topInfo = '\u52B3\u52A8\u8282';\n } else if (date === 4) {\n day.topInfo = '\u9752\u5E74\u8282';\n } else if (date === 11) {\n day.text = '\u4ECA\u5929';\n }\n }\n\n if (day.type === 'start') {\n day.bottomInfo = '\u5165\u4F4F';\n } else if (day.type === 'end') {\n day.bottomInfo = '\u79BB\u5E97';\n }\n\n return day;\n };\n\n return {\n formatter,\n };\n },\n};\n
\n\u901A\u8FC7 position
\u5C5E\u6027\u81EA\u5B9A\u4E49\u5F39\u51FA\u5C42\u7684\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A top
\u3001left
\u3001right
\u3002
<van-calendar v-model:show="show" :round="false" position="right" />\n
\n\u9009\u62E9\u65E5\u671F\u533A\u95F4\u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7 max-range
\u5C5E\u6027\u6765\u6307\u5B9A\u6700\u591A\u53EF\u9009\u5929\u6570\uFF0C\u9009\u62E9\u7684\u8303\u56F4\u8D85\u8FC7\u6700\u591A\u53EF\u9009\u5929\u6570\u65F6\uFF0C\u4F1A\u5F39\u51FA\u76F8\u5E94\u7684\u63D0\u793A\u6587\u6848\u3002
<van-calendar type="range" :max-range="3" :style="{ height: '500px' }" />\n
\n\u901A\u8FC7 first-day-of-week
\u5C5E\u6027\u8BBE\u7F6E\u4E00\u5468\u4ECE\u54EA\u5929\u5F00\u59CB\u3002
<van-calendar first-day-of-week="1" />\n
\n\u5C06 poppable
\u8BBE\u7F6E\u4E3A false
\uFF0C\u65E5\u5386\u4F1A\u76F4\u63A5\u5C55\u793A\u5728\u9875\u9762\u5185\uFF0C\u800C\u4E0D\u662F\u4EE5\u5F39\u5C42\u7684\u5F62\u5F0F\u51FA\u73B0\u3002
<van-calendar\n title="\u65E5\u5386"\n :poppable="false"\n :show-confirm="false"\n :style="{ height: '500px' }"\n/>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
type | \n\u9009\u62E9\u7C7B\u578B:single \u8868\u793A\u9009\u62E9\u5355\u4E2A\u65E5\u671F\uFF0Cmultiple \u8868\u793A\u9009\u62E9\u591A\u4E2A\u65E5\u671F\uFF0Crange \u8868\u793A\u9009\u62E9\u65E5\u671F\u533A\u95F4 | \nstring | \nsingle | \n
title | \n\u65E5\u5386\u6807\u9898 | \nstring | \n\u65E5\u671F\u9009\u62E9 | \n
color | \n\u4E3B\u9898\u8272\uFF0C\u5BF9\u5E95\u90E8\u6309\u94AE\u548C\u9009\u4E2D\u65E5\u671F\u751F\u6548 | \nstring | \n#1989fa | \n
min-date | \n\u53EF\u9009\u62E9\u7684\u6700\u5C0F\u65E5\u671F | \nDate | \n\u5F53\u524D\u65E5\u671F | \n
max-date | \n\u53EF\u9009\u62E9\u7684\u6700\u5927\u65E5\u671F | \nDate | \n\u5F53\u524D\u65E5\u671F\u7684\u516D\u4E2A\u6708\u540E | \n
default-date | \n\u9ED8\u8BA4\u9009\u4E2D\u7684\u65E5\u671F\uFF0Ctype \u4E3A multiple \u6216 range \u65F6\u4E3A\u6570\u7EC4\uFF0C\u4F20\u5165 null \u8868\u793A\u9ED8\u8BA4\u4E0D\u9009\u62E9 | \nDate | Date[] | null | \n\u4ECA\u5929 | \n
row-height | \n\u65E5\u671F\u884C\u9AD8 | \nnumber | string | \n64 | \n
formatter | \n\u65E5\u671F\u683C\u5F0F\u5316\u51FD\u6570 | \n(day: Day) => Day | \n- | \n
poppable | \n\u662F\u5426\u4EE5\u5F39\u5C42\u7684\u5F62\u5F0F\u5C55\u793A\u65E5\u5386 | \nboolean | \ntrue | \n
lazy-render | \n\u662F\u5426\u53EA\u6E32\u67D3\u53EF\u89C6\u533A\u57DF\u7684\u5185\u5BB9 | \nboolean | \ntrue | \n
show-mark | \n\u662F\u5426\u663E\u793A\u6708\u4EFD\u80CC\u666F\u6C34\u5370 | \nboolean | \ntrue | \n
show-title | \n\u662F\u5426\u5C55\u793A\u65E5\u5386\u6807\u9898 | \nboolean | \ntrue | \n
show-subtitle | \n\u662F\u5426\u5C55\u793A\u65E5\u5386\u526F\u6807\u9898\uFF08\u5E74\u6708\uFF09 | \nboolean | \ntrue | \n
show-confirm | \n\u662F\u5426\u5C55\u793A\u786E\u8BA4\u6309\u94AE | \nboolean | \ntrue | \n
readonly | \n\u662F\u5426\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u53EA\u8BFB\u72B6\u6001\u4E0B\u4E0D\u80FD\u9009\u62E9\u65E5\u671F | \nboolean | \nfalse | \n
confirm-text | \n\u786E\u8BA4\u6309\u94AE\u7684\u6587\u5B57 | \nstring | \n\u786E\u5B9A | \n
confirm-disabled-text | \n\u786E\u8BA4\u6309\u94AE\u5904\u4E8E\u7981\u7528\u72B6\u6001\u65F6\u7684\u6587\u5B57 | \nstring | \n\u786E\u5B9A | \n
first-day-of-week | \n\u8BBE\u7F6E\u5468\u8D77\u59CB\u65E5 | \n0-6 | \n0 | \n
\u5F53 Calendar \u7684 poppable
\u4E3A true
\u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B props:
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:show | \n\u662F\u5426\u663E\u793A\u65E5\u5386\u5F39\u7A97 | \nboolean | \nfalse | \n
position | \n\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A top right left | \nstring | \nbottom | \n
round | \n\u662F\u5426\u663E\u793A\u5706\u89D2\u5F39\u7A97 | \nboolean | \ntrue | \n
close-on-popstate | \n\u662F\u5426\u5728\u9875\u9762\u56DE\u9000\u65F6\u81EA\u52A8\u5173\u95ED | \nboolean | \ntrue | \n
close-on-click-overlay | \n\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED | \nboolean | \ntrue | \n
safe-area-inset-top | \n\u662F\u5426\u5F00\u542F\u9876\u90E8\u5B89\u5168\u533A\u9002\u914D | \nboolean | \nfalse | \n
safe-area-inset-bottom | \n\u662F\u5426\u5F00\u542F\u5E95\u90E8\u5B89\u5168\u533A\u9002\u914D | \nboolean | \ntrue | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \n- | \n
\u5F53 Calendar \u7684 type
\u4E3A range
\u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B props:
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
max-range | \n\u65E5\u671F\u533A\u95F4\u6700\u591A\u53EF\u9009\u5929\u6570 | \nnumber | string | \n\u65E0\u9650\u5236 | \n
range-prompt | \n\u8303\u56F4\u9009\u62E9\u8D85\u8FC7\u6700\u591A\u53EF\u9009\u5929\u6570\u65F6\u7684\u63D0\u793A\u6587\u6848 | \nstring | \n\u6700\u591A\u9009\u62E9 xx \u5929 | \n
show-range-prompt | \n\u8303\u56F4\u9009\u62E9\u8D85\u8FC7\u6700\u591A\u53EF\u9009\u5929\u6570\u65F6\uFF0C\u662F\u5426\u5C55\u793A\u63D0\u793A\u6587\u6848 | \nboolean | \ntrue | \n
allow-same-day | \n\u662F\u5426\u5141\u8BB8\u65E5\u671F\u8303\u56F4\u7684\u8D77\u6B62\u65F6\u95F4\u4E3A\u540C\u4E00\u5929 | \nboolean | \nfalse | \n
\u5F53 Calendar \u7684 type
\u4E3A multiple
\u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B props:
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
max-range | \n\u65E5\u671F\u6700\u591A\u53EF\u9009\u5929\u6570 | \nnumber | string | \n\u65E0\u9650\u5236 | \n
range-prompt | \n\u9009\u62E9\u8D85\u8FC7\u6700\u591A\u53EF\u9009\u5929\u6570\u65F6\u7684\u63D0\u793A\u6587\u6848 | \nstring | \n\u6700\u591A\u9009\u62E9 xx \u5929 | \n
\u65E5\u5386\u4E2D\u7684\u6BCF\u4E2A\u65E5\u671F\u90FD\u5BF9\u5E94\u4E00\u4E2A Day \u5BF9\u8C61\uFF0C\u901A\u8FC7formatter
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49 Day \u5BF9\u8C61\u7684\u5185\u5BB9
\u952E\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
date | \n\u65E5\u671F\u5BF9\u5E94\u7684 Date \u5BF9\u8C61 | \nDate | \n
type | \n\u65E5\u671F\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A selected \u3001start \u3001middle \u3001end \u3001disabled | \nstring | \n
text | \n\u4E2D\u95F4\u663E\u793A\u7684\u6587\u5B57 | \nstring | \n
topInfo | \n\u4E0A\u65B9\u7684\u63D0\u793A\u4FE1\u606F | \nstring | \n
bottomInfo | \n\u4E0B\u65B9\u7684\u63D0\u793A\u4FE1\u606F | \nstring | \n
className | \n\u989D\u5916\u7C7B\u540D | \nstring | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
select | \n\u70B9\u51FB\u5E76\u9009\u4E2D\u4EFB\u610F\u65E5\u671F\u65F6\u89E6\u53D1 | \nvalue: Date | Date[] | \n
confirm | \n\u65E5\u671F\u9009\u62E9\u5B8C\u6210\u540E\u89E6\u53D1\uFF0C\u82E5 show-confirm \u4E3A true \uFF0C\u5219\u70B9\u51FB\u786E\u8BA4\u6309\u94AE\u540E\u89E6\u53D1 | \nvalue: Date | Date[] | \n
open | \n\u6253\u5F00\u5F39\u51FA\u5C42\u65F6\u89E6\u53D1 | \n- | \n
close | \n\u5173\u95ED\u5F39\u51FA\u5C42\u65F6\u89E6\u53D1 | \n- | \n
opened | \n\u6253\u5F00\u5F39\u51FA\u5C42\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
closed | \n\u5173\u95ED\u5F39\u51FA\u5C42\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
unselect | \n\u5F53\u65E5\u5386\u7EC4\u4EF6\u7684 type \u4E3A multiple \u65F6\uFF0C\u53D6\u6D88\u9009\u4E2D\u65E5\u671F\u65F6\u89E6\u53D1 | \nvalue: Date | \n
month-show | \n\u5F53\u67D0\u4E2A\u6708\u4EFD\u8FDB\u5165\u53EF\u89C6\u533A\u57DF\u65F6\u89E6\u53D1 | \n{ date: Date, title: string } | \n
over-range | \n\u8303\u56F4\u9009\u62E9\u8D85\u8FC7\u6700\u591A\u53EF\u9009\u5929\u6570\u65F6\u89E6\u53D1 | \n- | \n
click-subtitle | \n\u70B9\u51FB\u65E5\u5386\u526F\u6807\u9898\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
click-disabled-date v4.7.0 | \n\u70B9\u51FB\u7981\u7528\u65E5\u671F\u65F6\u89E6\u53D1 | \nvalue: Date | Date[] | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
title | \n\u81EA\u5B9A\u4E49\u6807\u9898 | \n- | \n
subtitle | \n\u81EA\u5B9A\u4E49\u65E5\u5386\u526F\u6807\u9898 | \n{ text: string, date?: Date } | \n
month-title v4.0.9 | \n\u81EA\u5B9A\u4E49\u6BCF\u4E2A\u6708\u4EFD\u7684\u5C0F\u6807\u9898 | \n{ text: string, date: Date } | \n
footer | \n\u81EA\u5B9A\u4E49\u5E95\u90E8\u533A\u57DF\u5185\u5BB9 | \n- | \n
confirm-text | \n\u81EA\u5B9A\u4E49\u786E\u8BA4\u6309\u94AE\u7684\u5185\u5BB9 | \n{ disabled: boolean } | \n
top-info | \n\u81EA\u5B9A\u4E49\u65E5\u671F\u4E0A\u65B9\u7684\u63D0\u793A\u4FE1\u606F | \nday: Day | \n
bottom-info | \n\u81EA\u5B9A\u4E49\u65E5\u671F\u4E0B\u65B9\u7684\u63D0\u793A\u4FE1\u606F | \nday: Day | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Calendar \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
reset | \n\u5C06\u9009\u4E2D\u7684\u65E5\u671F\u91CD\u7F6E\u5230\u6307\u5B9A\u65E5\u671F\uFF0C\u672A\u4F20\u53C2\u65F6\u4F1A\u91CD\u7F6E\u5230\u9ED8\u8BA4\u65E5\u671F | \ndate?: Date | Date[] | \n- | \n
scrollToDate | \n\u6EDA\u52A8\u5230\u67D0\u4E2A\u65E5\u671F | \ndate: Date | \n- | \n
getSelectedDate | \n\u83B7\u53D6\u9009\u4E2D\u7684\u65E5\u671F | \n- | \nDate | Date[] | null | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n CalendarType,\n CalendarProps,\n CalendarDayItem,\n CalendarDayType,\n CalendarInstance,\n} from 'vant';\n
\nCalendarInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { CalendarInstance } from 'vant';\n\nconst calendarRef = ref<CalendarInstance>();\n\ncalendarRef.value?.reset();\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-calendar-background | \nvar(--van-background-2) | \n- | \n
--van-calendar-popup-height | \n80% | \n- | \n
--van-calendar-header-shadow | \n0 2px 10px rgba(125, 126, 128, 0.16) | \n- | \n
--van-calendar-header-title-height | \n44px | \n- | \n
--van-calendar-header-title-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-calendar-header-subtitle-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-calendar-weekdays-height | \n30px | \n- | \n
--van-calendar-weekdays-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-calendar-month-title-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-calendar-month-mark-color | \nfade(var(--van-gray-2), 80%) | \n- | \n
--van-calendar-month-mark-font-size | \n160px | \n- | \n
--van-calendar-day-height | \n64px | \n- | \n
--van-calendar-day-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-calendar-day-margin-bottom | \n4px | \n- | \n
--van-calendar-range-edge-color | \nvar(--van-white) | \n- | \n
--van-calendar-range-edge-background | \nvar(--van-primary-color) | \n- | \n
--van-calendar-range-middle-color | \nvar(--van-primary-color) | \n- | \n
--van-calendar-range-middle-background-opacity | \n0.1 | \n- | \n
--van-calendar-selected-day-size | \n54px | \n- | \n
--van-calendar-selected-day-color | \nvar(--van-white) | \n- | \n
--van-calendar-info-font-size | \nvar(--van-font-size-xs) | \n- | \n
--van-calendar-info-line-height | \nvar(--van-line-height-xs) | \n- | \n
--van-calendar-selected-day-background | \nvar(--van-primary-color) | \n- | \n
--van-calendar-day-disabled-color | \nvar(--van-text-color-3) | \n- | \n
--van-calendar-confirm-button-height | \n36px | \n- | \n
--van-calendar-confirm-button-margin | \n7px 0 | \n- | \n
\u5982\u679C\u9700\u8981\u5728 formatter \u4E2D\u4F7F\u7528\u5F02\u6B65\u8FD4\u56DE\u7684\u6570\u636E\uFF0C\u53EF\u4EE5\u4F7F\u7528\u8BA1\u7B97\u5C5E\u6027\u52A8\u6001\u521B\u5EFA formatter \u51FD\u6570\uFF0C\u793A\u4F8B\u5982\u4E0B\uFF1A
\nconst asyncData = ref();\n\nconst formatter = computed(() => {\n if (!asyncData.value) {\n return (day) => day;\n }\n return (day) => {\n day.bottomInfo = asyncData.value;\n return day;\n };\n});\n\nsetTimeout(() => {\n asyncData.value = '\u540E\u7AEF\u6587\u6848';\n}, 3000);\n
\n\u5982\u679C\u4F60\u9047\u5230\u4E86\u5728 iOS \u4E0A\u65E0\u6CD5\u6E32\u67D3\u7EC4\u4EF6\u7684\u95EE\u9898\uFF0C\u8BF7\u786E\u8BA4\u5728\u521B\u5EFA Date \u5BF9\u8C61\u65F6\u6CA1\u6709\u4F7F\u7528new Date(\'2020-01-01\')
\u8FD9\u6837\u7684\u5199\u6CD5\uFF0CiOS \u4E0D\u652F\u6301\u4EE5\u4E2D\u5212\u7EBF\u5206\u9694\u7684\u65E5\u671F\u683C\u5F0F\uFF0C\u6B63\u786E\u5199\u6CD5\u662Fnew Date(\'2020/01/01\')
\u3002
\u5BF9\u6B64\u95EE\u9898\u7684\u8BE6\u7EC6\u89E3\u91CA\uFF1Astackoverflow\u3002
\n\u5F39\u51FA\u6A21\u6001\u6846\uFF0C\u5E38\u7528\u4E8E\u6D88\u606F\u63D0\u793A\u3001\u6D88\u606F\u786E\u8BA4\uFF0C\u6216\u5728\u5F53\u524D\u9875\u9762\u5185\u5B8C\u6210\u7279\u5B9A\u7684\u4EA4\u4E92\u64CD\u4F5C\u3002\u652F\u6301\u7EC4\u4EF6\u8C03\u7528\u548C\u51FD\u6570\u8C03\u7528\u4E24\u79CD\u65B9\u5F0F\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Dialog } from 'vant';\n\nconst app = createApp();\napp.use(Dialog);\n
\n\u4E3A\u4E86\u4FBF\u4E8E\u4F7F\u7528 Dialog
\uFF0CVant \u63D0\u4F9B\u4E86\u4E00\u7CFB\u5217\u8F85\u52A9\u51FD\u6570\uFF0C\u901A\u8FC7\u8F85\u52A9\u51FD\u6570\u53EF\u4EE5\u5FEB\u901F\u5524\u8D77\u5168\u5C40\u7684\u5F39\u7A97\u7EC4\u4EF6\u3002
\u6BD4\u5982\u4F7F\u7528 showDialog
\u51FD\u6570\uFF0C\u8C03\u7528\u540E\u4F1A\u76F4\u63A5\u5728\u9875\u9762\u4E2D\u6E32\u67D3\u5BF9\u5E94\u7684\u5F39\u51FA\u6846\u3002
import { showDialog } from 'vant';\n\nshowDialog({ message: '\u63D0\u793A' });\n
\n\u7528\u4E8E\u63D0\u793A\u4E00\u4E9B\u6D88\u606F\uFF0C\u9ED8\u8BA4\u53EA\u5305\u542B\u4E00\u4E2A\u786E\u8BA4\u6309\u94AE\u3002
\nimport { showDialog } from 'vant';\n\nshowDialog({\n title: '\u6807\u9898',\n message: '\u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C\u3002',\n}).then(() => {\n // on close\n});\n\nshowDialog({\n message: '\u751F\u547D\u8FDC\u4E0D\u6B62\u8FDE\u8F74\u8F6C\u548C\u5FD9\u5230\u6781\u9650\uFF0C\u4EBA\u7C7B\u7684\u4F53\u9A8C\u8FDC\u6BD4\u8FD9\u8FBD\u9614\u3001\u4E30\u5BCC\u5F97\u591A\u3002',\n}).then(() => {\n // on close\n});\n
\n\u7528\u4E8E\u786E\u8BA4\u6D88\u606F\uFF0C\u9ED8\u8BA4\u5305\u542B\u786E\u8BA4\u548C\u53D6\u6D88\u6309\u94AE\u3002
\nimport { showConfirmDialog } from 'vant';\n\nshowConfirmDialog({\n title: '\u6807\u9898',\n message:\n '\u5982\u679C\u89E3\u51B3\u65B9\u6CD5\u662F\u4E11\u964B\u7684\uFF0C\u90A3\u5C31\u80AF\u5B9A\u8FD8\u6709\u66F4\u597D\u7684\u89E3\u51B3\u65B9\u6CD5\uFF0C\u53EA\u662F\u8FD8\u6CA1\u6709\u53D1\u73B0\u800C\u5DF2\u3002',\n})\n .then(() => {\n // on confirm\n })\n .catch(() => {\n // on cancel\n });\n
\n\u5C06 theme \u9009\u9879\u8BBE\u7F6E\u4E3A round-button
\u53EF\u4EE5\u5C55\u793A\u5706\u89D2\u6309\u94AE\u98CE\u683C\u7684\u5F39\u7A97\u3002
import { showDialog } from 'vant';\n\nshowDialog({\n title: '\u6807\u9898',\n message: '\u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C\u3002',\n theme: 'round-button',\n}).then(() => {\n // on close\n});\n\nshowDialog({\n message: '\u751F\u547D\u8FDC\u4E0D\u6B62\u8FDE\u8F74\u8F6C\u548C\u5FD9\u5230\u6781\u9650\uFF0C\u4EBA\u7C7B\u7684\u4F53\u9A8C\u8FDC\u6BD4\u8FD9\u8FBD\u9614\u3001\u4E30\u5BCC\u5F97\u591A\u3002',\n theme: 'round-button',\n}).then(() => {\n // on close\n});\n
\n\u901A\u8FC7 beforeClose
\u5C5E\u6027\u53EF\u4EE5\u4F20\u5165\u4E00\u4E2A\u56DE\u8C03\u51FD\u6570\uFF0C\u5728\u5F39\u7A97\u5173\u95ED\u524D\u8FDB\u884C\u7279\u5B9A\u64CD\u4F5C\u3002
import { showConfirmDialog } from 'vant';\n\nconst beforeClose = (action) =>\n new Promise((resolve) => {\n setTimeout(() => {\n // action !== 'confirm' \u62E6\u622A\u53D6\u6D88\u64CD\u4F5C\n resolve(action === 'confirm');\n }, 1000);\n });\n\nshowConfirmDialog({\n title: '\u6807\u9898',\n message:\n '\u5982\u679C\u89E3\u51B3\u65B9\u6CD5\u662F\u4E11\u964B\u7684\uFF0C\u90A3\u5C31\u80AF\u5B9A\u8FD8\u6709\u66F4\u597D\u7684\u89E3\u51B3\u65B9\u6CD5\uFF0C\u53EA\u662F\u8FD8\u6CA1\u6709\u53D1\u73B0\u800C\u5DF2\u3002',\n beforeClose,\n});\n
\n\u5982\u679C\u4F60\u9700\u8981\u5728 Dialog \u5185\u5D4C\u5165\u7EC4\u4EF6\u6216\u5176\u4ED6\u81EA\u5B9A\u4E49\u5185\u5BB9\uFF0C\u53EF\u4EE5\u76F4\u63A5\u4F7F\u7528 Dialog \u7EC4\u4EF6\uFF0C\u5E76\u4F7F\u7528\u9ED8\u8BA4\u63D2\u69FD\u8FDB\u884C\u5B9A\u5236\u3002\u4F7F\u7528\u524D\u9700\u8981\u901A\u8FC7 app.use
\u7B49\u65B9\u5F0F\u6CE8\u518C\u7EC4\u4EF6\u3002
<van-dialog v-model:show="show" title="\u6807\u9898" show-cancel-button>\n <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" />\n</van-dialog>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n return { show };\n },\n};\n
\nVant \u4E2D\u5BFC\u51FA\u4E86\u4EE5\u4E0B Dialog \u76F8\u5173\u7684\u8F85\u52A9\u51FD\u6570\uFF1A
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
showDialog | \n\u5C55\u793A\u6D88\u606F\u63D0\u793A\u5F39\u7A97\uFF0C\u9ED8\u8BA4\u5305\u542B\u786E\u8BA4\u6309\u94AE | \noptions: DialogOptions | \nPromise<void> | \n
showConfirmDialog | \n\u5C55\u793A\u6D88\u606F\u786E\u8BA4\u5F39\u7A97\uFF0C\u9ED8\u8BA4\u5305\u542B\u786E\u8BA4\u548C\u53D6\u6D88\u6309\u94AE | \noptions: DialogOptions | \nPromise<void> | \n
closeDialog | \n\u5173\u95ED\u5F53\u524D\u5C55\u793A\u7684\u5F39\u7A97 | \n- | \nvoid | \n
setDialogDefaultOptions | \n\u4FEE\u6539\u9ED8\u8BA4\u914D\u7F6E\uFF0C\u5F71\u54CD\u6240\u6709\u7684 showDialog \u8C03\u7528 | \noptions: DialogOptions | \nvoid | \n
resetDialogDefaultOptions | \n\u91CD\u7F6E\u9ED8\u8BA4\u914D\u7F6E\uFF0C\u5F71\u54CD\u6240\u6709\u7684 showDialog \u8C03\u7528 | \n- | \nvoid | \n
\u8C03\u7528 showDialog
\u7B49\u65B9\u6CD5\u65F6\uFF0C\u652F\u6301\u4F20\u5165\u4EE5\u4E0B\u9009\u9879\uFF1A
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
title | \n\u6807\u9898 | \nstring | \n- | \n
width | \n\u5F39\u7A97\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n320px | \n
message | \n\u6587\u672C\u5185\u5BB9\uFF0C\u652F\u6301\u901A\u8FC7 \\n \u6362\u884C | \nstring | () => JSX.ELement | \n- | \n
messageAlign | \n\u5185\u5BB9\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A left right | \nstring | \ncenter | \n
theme | \n\u6837\u5F0F\u98CE\u683C\uFF0C\u53EF\u9009\u503C\u4E3A round-button | \nstring | \ndefault | \n
className | \n\u81EA\u5B9A\u4E49\u7C7B\u540D | \nstring | Array | object | \n- | \n
showConfirmButton | \n\u662F\u5426\u5C55\u793A\u786E\u8BA4\u6309\u94AE | \nboolean | \ntrue | \n
showCancelButton | \n\u662F\u5426\u5C55\u793A\u53D6\u6D88\u6309\u94AE | \nboolean | \nfalse | \n
confirmButtonText | \n\u786E\u8BA4\u6309\u94AE\u6587\u6848 | \nstring | \n\u786E\u8BA4 | \n
confirmButtonColor | \n\u786E\u8BA4\u6309\u94AE\u989C\u8272 | \nstring | \n#ee0a24 | \n
confirmButtonDisabled | \n\u662F\u5426\u7981\u7528\u786E\u8BA4\u6309\u94AE | \nboolean | \nfalse | \n
cancelButtonText | \n\u53D6\u6D88\u6309\u94AE\u6587\u6848 | \nstring | \n\u53D6\u6D88 | \n
cancelButtonColor | \n\u53D6\u6D88\u6309\u94AE\u989C\u8272 | \nstring | \nblack | \n
cancelButtonDisabled | \n\u662F\u5426\u7981\u7528\u53D6\u6D88\u6309\u94AE | \nboolean | \nfalse | \n
overlay | \n\u662F\u5426\u5C55\u793A\u906E\u7F69\u5C42 | \nboolean | \ntrue | \n
overlayClass | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u7C7B\u540D | \nstring | Array | object | \n- | \n
overlayStyle | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0F | \nobject | \n- | \n
closeOnPopstate | \n\u662F\u5426\u5728\u9875\u9762\u56DE\u9000\u65F6\u81EA\u52A8\u5173\u95ED | \nboolean | \ntrue | \n
closeOnClickOverlay | \n\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED\u5F39\u7A97 | \nboolean | \nfalse | \n
lockScroll | \n\u662F\u5426\u9501\u5B9A\u80CC\u666F\u6EDA\u52A8 | \nboolean | \ntrue | \n
allowHtml | \n\u662F\u5426\u5141\u8BB8 message \u5185\u5BB9\u4E2D\u6E32\u67D3 HTML | \nboolean | \nfalse | \n
beforeClose | \n\u5173\u95ED\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u963B\u6B62\u5173\u95ED\uFF0C\u652F\u6301\u8FD4\u56DE Promise | \n(action: string) => boolean | Promise<boolean> | \n- | \n
transition | \n\u52A8\u753B\u7C7B\u540D\uFF0C\u7B49\u4EF7\u4E8E transition \u7684 name \u5C5E\u6027 | \nstring | \n- | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \nbody | \n
\u901A\u8FC7\u7EC4\u4EF6\u8C03\u7528 Dialog
\u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B Props\uFF1A
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:show | \n\u662F\u5426\u663E\u793A\u5F39\u7A97 | \nboolean | \n- | \n
title | \n\u6807\u9898 | \nstring | \n- | \n
width | \n\u5F39\u7A97\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n320px | \n
message | \n\u6587\u672C\u5185\u5BB9\uFF0C\u652F\u6301\u901A\u8FC7 \\n \u6362\u884C | \nstring | () => JSX.Element | \n- | \n
message-align | \n\u5185\u5BB9\u6C34\u5E73\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A left right justify | \nstring | \ncenter | \n
theme | \n\u6837\u5F0F\u98CE\u683C\uFF0C\u53EF\u9009\u503C\u4E3A round-button | \nstring | \ndefault | \n
show-confirm-button | \n\u662F\u5426\u5C55\u793A\u786E\u8BA4\u6309\u94AE | \nboolean | \ntrue | \n
show-cancel-button | \n\u662F\u5426\u5C55\u793A\u53D6\u6D88\u6309\u94AE | \nboolean | \nfalse | \n
confirm-button-text | \n\u786E\u8BA4\u6309\u94AE\u6587\u6848 | \nstring | \n\u786E\u8BA4 | \n
confirm-button-color | \n\u786E\u8BA4\u6309\u94AE\u989C\u8272 | \nstring | \n#ee0a24 | \n
confirm-button-disabled | \n\u662F\u5426\u7981\u7528\u786E\u8BA4\u6309\u94AE | \nboolean | \nfalse | \n
cancel-button-text | \n\u53D6\u6D88\u6309\u94AE\u6587\u6848 | \nstring | \n\u53D6\u6D88 | \n
cancel-button-color | \n\u53D6\u6D88\u6309\u94AE\u989C\u8272 | \nstring | \nblack | \n
cancel-button-disabled | \n\u662F\u5426\u7981\u7528\u53D6\u6D88\u6309\u94AE | \nboolean | \nfalse | \n
z-index | \n\u5C06\u5F39\u7A97\u7684 z-index \u5C42\u7EA7\u8BBE\u7F6E\u4E3A\u4E00\u4E2A\u56FA\u5B9A\u503C | \nnumber | string | \n2000+ | \n
overlay | \n\u662F\u5426\u5C55\u793A\u906E\u7F69\u5C42 | \nboolean | \ntrue | \n
overlay-class | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u7C7B\u540D | \nstring | \n- | \n
overlay-style | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0F | \nobject | \n- | \n
close-on-popstate | \n\u662F\u5426\u5728\u9875\u9762\u56DE\u9000\u65F6\u81EA\u52A8\u5173\u95ED | \nboolean | \ntrue | \n
close-on-click-overlay | \n\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED\u5F39\u7A97 | \nboolean | \nfalse | \n
lazy-render | \n\u662F\u5426\u5728\u663E\u793A\u5F39\u5C42\u65F6\u624D\u6E32\u67D3\u8282\u70B9 | \nboolean | \ntrue | \n
lock-scroll | \n\u662F\u5426\u9501\u5B9A\u80CC\u666F\u6EDA\u52A8 | \nboolean | \ntrue | \n
allow-html | \n\u662F\u5426\u5141\u8BB8 message \u5185\u5BB9\u4E2D\u6E32\u67D3 HTML | \nboolean | \nfalse | \n
before-close | \n\u5173\u95ED\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u963B\u6B62\u5173\u95ED\uFF0C\u652F\u6301\u8FD4\u56DE Promise | \n(action: string) => boolean | Promise<boolean> | \n- | \n
transition | \n\u52A8\u753B\u7C7B\u540D\uFF0C\u7B49\u4EF7\u4E8E transition \u7684 name \u5C5E\u6027 | \nstring | \n- | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \n- | \n
\u901A\u8FC7\u7EC4\u4EF6\u8C03\u7528 Dialog
\u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B\u4E8B\u4EF6\uFF1A
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
confirm | \n\u70B9\u51FB\u786E\u8BA4\u6309\u94AE\u65F6\u89E6\u53D1 | \n- | \n
cancel | \n\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1 | \n- | \n
open | \n\u6253\u5F00\u5F39\u7A97\u65F6\u89E6\u53D1 | \n- | \n
close | \n\u5173\u95ED\u5F39\u7A97\u65F6\u89E6\u53D1 | \n- | \n
opened | \n\u6253\u5F00\u5F39\u7A97\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
closed | \n\u5173\u95ED\u5F39\u7A97\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
\u901A\u8FC7\u7EC4\u4EF6\u8C03\u7528 Dialog
\u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B\u63D2\u69FD\uFF1A
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u81EA\u5B9A\u4E49\u5185\u5BB9 | \n
title | \n\u81EA\u5B9A\u4E49\u6807\u9898 | \n
footer | \n\u81EA\u5B9A\u4E49\u5E95\u90E8\u6309\u94AE\u533A\u57DF | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n DialogProps,\n DialogTheme,\n DialogMessage,\n DialogOptions,\n DialogMessageAlign,\n} from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-dialog-width | \n320px | \n- | \n
--van-dialog-small-screen-width | \n90% | \n- | \n
--van-dialog-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-dialog-transition | \nvar(--van-duration-base) | \n- | \n
--van-dialog-radius | \n16px | \n- | \n
--van-dialog-background | \nvar(--van-background-2) | \n- | \n
--van-dialog-header-font-weight | \nvar(--van-font-bold) | \n- | \n
--van-dialog-header-line-height | \n24px | \n- | \n
--van-dialog-header-padding-top | \n26px | \n- | \n
--van-dialog-header-isolated-padding | \nvar(--van-padding-lg) 0 | \n- | \n
--van-dialog-message-padding | \nvar(--van-padding-lg) | \n- | \n
--van-dialog-message-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-dialog-message-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-dialog-message-max-height | \n60vh | \n- | \n
--van-dialog-has-title-message-text-color | \nvar(--van-gray-7) | \n- | \n
--van-dialog-has-title-message-padding-top | \nvar(--van-padding-xs) | \n- | \n
--van-dialog-button-height | \n48px | \n- | \n
--van-dialog-round-button-height | \n36px | \n- | \n
--van-dialog-confirm-button-text-color | \nvar(--van-primary-color) | \n- | \n
\u5982\u679C\u5F15\u7528 showDialog
\u65B9\u6CD5\u65F6\u51FA\u73B0\u4EE5\u4E0B\u62A5\u9519\uFF0C\u8BF4\u660E\u9879\u76EE\u4E2D\u4F7F\u7528\u4E86 babel-plugin-import
\u63D2\u4EF6\uFF0C\u5BFC\u81F4\u4EE3\u7801\u88AB\u9519\u8BEF\u7F16\u8BD1\u3002
These dependencies were not found:\n\n* vant/es/show-dialog in ./src/xxx.js\n* vant/es/show-dialog/style in ./src/xxx.js\n
\nVant \u4ECE 4.0 \u7248\u672C\u5F00\u59CB\u4E0D\u518D\u652F\u6301 babel-plugin-import
\u63D2\u4EF6\uFF0C\u8BF7\u53C2\u8003 \u8FC1\u79FB\u6307\u5357 \u79FB\u9664\u8BE5\u63D2\u4EF6\u3002
\u5C06 closeOnPopstate
\u5C5E\u6027\u8BBE\u7F6E\u4E3A false \u5373\u53EF\u3002
import { showDialog } from 'vant';\n\nshowDialog({\n title: '\u6807\u9898',\n message: '\u5F39\u7A97\u5185\u5BB9',\n closeOnPopstate: false,\n}).then(() => {\n // on close\n});\n
\n\u5F39\u51FA\u6A21\u6001\u6846\uFF0C\u5E38\u7528\u4E8E\u6D88\u606F\u63D0\u793A\u3001\u6D88\u606F\u786E\u8BA4\uFF0C\u6216\u5728\u5F53\u524D\u9875\u9762\u5185\u5B8C\u6210\u7279\u5B9A\u7684\u4EA4\u4E92\u64CD\u4F5C\u3002\u652F\u6301\u7EC4\u4EF6\u8C03\u7528\u548C\u51FD\u6570\u8C03\u7528\u4E24\u79CD\u65B9\u5F0F\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Dialog } from 'vant';\n\nconst app = createApp();\napp.use(Dialog);\n
\n\u4E3A\u4E86\u4FBF\u4E8E\u4F7F\u7528 Dialog
\uFF0CVant \u63D0\u4F9B\u4E86\u4E00\u7CFB\u5217\u8F85\u52A9\u51FD\u6570\uFF0C\u901A\u8FC7\u8F85\u52A9\u51FD\u6570\u53EF\u4EE5\u5FEB\u901F\u5524\u8D77\u5168\u5C40\u7684\u5F39\u7A97\u7EC4\u4EF6\u3002
\u6BD4\u5982\u4F7F\u7528 showDialog
\u51FD\u6570\uFF0C\u8C03\u7528\u540E\u4F1A\u76F4\u63A5\u5728\u9875\u9762\u4E2D\u6E32\u67D3\u5BF9\u5E94\u7684\u5F39\u51FA\u6846\u3002
import { showDialog } from 'vant';\n\nshowDialog({ message: '\u63D0\u793A' });\n
\n\u7528\u4E8E\u63D0\u793A\u4E00\u4E9B\u6D88\u606F\uFF0C\u9ED8\u8BA4\u53EA\u5305\u542B\u4E00\u4E2A\u786E\u8BA4\u6309\u94AE\u3002
\nimport { showDialog } from 'vant';\n\nshowDialog({\n title: '\u6807\u9898',\n message: '\u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C\u3002',\n}).then(() => {\n // on close\n});\n\nshowDialog({\n message: '\u751F\u547D\u8FDC\u4E0D\u6B62\u8FDE\u8F74\u8F6C\u548C\u5FD9\u5230\u6781\u9650\uFF0C\u4EBA\u7C7B\u7684\u4F53\u9A8C\u8FDC\u6BD4\u8FD9\u8FBD\u9614\u3001\u4E30\u5BCC\u5F97\u591A\u3002',\n}).then(() => {\n // on close\n});\n
\n\u7528\u4E8E\u786E\u8BA4\u6D88\u606F\uFF0C\u9ED8\u8BA4\u5305\u542B\u786E\u8BA4\u548C\u53D6\u6D88\u6309\u94AE\u3002
\nimport { showConfirmDialog } from 'vant';\n\nshowConfirmDialog({\n title: '\u6807\u9898',\n message:\n '\u5982\u679C\u89E3\u51B3\u65B9\u6CD5\u662F\u4E11\u964B\u7684\uFF0C\u90A3\u5C31\u80AF\u5B9A\u8FD8\u6709\u66F4\u597D\u7684\u89E3\u51B3\u65B9\u6CD5\uFF0C\u53EA\u662F\u8FD8\u6CA1\u6709\u53D1\u73B0\u800C\u5DF2\u3002',\n})\n .then(() => {\n // on confirm\n })\n .catch(() => {\n // on cancel\n });\n
\n\u5C06 theme \u9009\u9879\u8BBE\u7F6E\u4E3A round-button
\u53EF\u4EE5\u5C55\u793A\u5706\u89D2\u6309\u94AE\u98CE\u683C\u7684\u5F39\u7A97\u3002
import { showDialog } from 'vant';\n\nshowDialog({\n title: '\u6807\u9898',\n message: '\u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C\u3002',\n theme: 'round-button',\n}).then(() => {\n // on close\n});\n\nshowDialog({\n message: '\u751F\u547D\u8FDC\u4E0D\u6B62\u8FDE\u8F74\u8F6C\u548C\u5FD9\u5230\u6781\u9650\uFF0C\u4EBA\u7C7B\u7684\u4F53\u9A8C\u8FDC\u6BD4\u8FD9\u8FBD\u9614\u3001\u4E30\u5BCC\u5F97\u591A\u3002',\n theme: 'round-button',\n}).then(() => {\n // on close\n});\n
\n\u901A\u8FC7 beforeClose
\u5C5E\u6027\u53EF\u4EE5\u4F20\u5165\u4E00\u4E2A\u56DE\u8C03\u51FD\u6570\uFF0C\u5728\u5F39\u7A97\u5173\u95ED\u524D\u8FDB\u884C\u7279\u5B9A\u64CD\u4F5C\u3002
import { showConfirmDialog } from 'vant';\n\nconst beforeClose = (action) =>\n new Promise((resolve) => {\n setTimeout(() => {\n // action !== 'confirm' \u62E6\u622A\u53D6\u6D88\u64CD\u4F5C\n resolve(action === 'confirm');\n }, 1000);\n });\n\nshowConfirmDialog({\n title: '\u6807\u9898',\n message:\n '\u5982\u679C\u89E3\u51B3\u65B9\u6CD5\u662F\u4E11\u964B\u7684\uFF0C\u90A3\u5C31\u80AF\u5B9A\u8FD8\u6709\u66F4\u597D\u7684\u89E3\u51B3\u65B9\u6CD5\uFF0C\u53EA\u662F\u8FD8\u6CA1\u6709\u53D1\u73B0\u800C\u5DF2\u3002',\n beforeClose,\n});\n
\n\u5982\u679C\u4F60\u9700\u8981\u5728 Dialog \u5185\u5D4C\u5165\u7EC4\u4EF6\u6216\u5176\u4ED6\u81EA\u5B9A\u4E49\u5185\u5BB9\uFF0C\u53EF\u4EE5\u76F4\u63A5\u4F7F\u7528 Dialog \u7EC4\u4EF6\uFF0C\u5E76\u4F7F\u7528\u9ED8\u8BA4\u63D2\u69FD\u8FDB\u884C\u5B9A\u5236\u3002\u4F7F\u7528\u524D\u9700\u8981\u901A\u8FC7 app.use
\u7B49\u65B9\u5F0F\u6CE8\u518C\u7EC4\u4EF6\u3002
<van-dialog v-model:show="show" title="\u6807\u9898" show-cancel-button>\n <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" />\n</van-dialog>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n return { show };\n },\n};\n
\nVant \u4E2D\u5BFC\u51FA\u4E86\u4EE5\u4E0B Dialog \u76F8\u5173\u7684\u8F85\u52A9\u51FD\u6570\uFF1A
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
showDialog | \n\u5C55\u793A\u6D88\u606F\u63D0\u793A\u5F39\u7A97\uFF0C\u9ED8\u8BA4\u5305\u542B\u786E\u8BA4\u6309\u94AE | \noptions: DialogOptions | \nPromise<void> | \n
showConfirmDialog | \n\u5C55\u793A\u6D88\u606F\u786E\u8BA4\u5F39\u7A97\uFF0C\u9ED8\u8BA4\u5305\u542B\u786E\u8BA4\u548C\u53D6\u6D88\u6309\u94AE | \noptions: DialogOptions | \nPromise<void> | \n
closeDialog | \n\u5173\u95ED\u5F53\u524D\u5C55\u793A\u7684\u5F39\u7A97 | \n- | \nvoid | \n
setDialogDefaultOptions | \n\u4FEE\u6539\u9ED8\u8BA4\u914D\u7F6E\uFF0C\u5F71\u54CD\u6240\u6709\u7684 showDialog \u8C03\u7528 | \noptions: DialogOptions | \nvoid | \n
resetDialogDefaultOptions | \n\u91CD\u7F6E\u9ED8\u8BA4\u914D\u7F6E\uFF0C\u5F71\u54CD\u6240\u6709\u7684 showDialog \u8C03\u7528 | \n- | \nvoid | \n
\u8C03\u7528 showDialog
\u7B49\u65B9\u6CD5\u65F6\uFF0C\u652F\u6301\u4F20\u5165\u4EE5\u4E0B\u9009\u9879\uFF1A
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
title | \n\u6807\u9898 | \nstring | \n- | \n
width | \n\u5F39\u7A97\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n320px | \n
message | \n\u6587\u672C\u5185\u5BB9\uFF0C\u652F\u6301\u901A\u8FC7 \\n \u6362\u884C | \nstring | () => JSX.ELement | \n- | \n
messageAlign | \n\u5185\u5BB9\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A left right | \nstring | \ncenter | \n
theme | \n\u6837\u5F0F\u98CE\u683C\uFF0C\u53EF\u9009\u503C\u4E3A round-button | \nstring | \ndefault | \n
className | \n\u81EA\u5B9A\u4E49\u7C7B\u540D | \nstring | Array | object | \n- | \n
showConfirmButton | \n\u662F\u5426\u5C55\u793A\u786E\u8BA4\u6309\u94AE | \nboolean | \ntrue | \n
showCancelButton | \n\u662F\u5426\u5C55\u793A\u53D6\u6D88\u6309\u94AE | \nboolean | \nfalse | \n
confirmButtonText | \n\u786E\u8BA4\u6309\u94AE\u6587\u6848 | \nstring | \n\u786E\u8BA4 | \n
confirmButtonColor | \n\u786E\u8BA4\u6309\u94AE\u989C\u8272 | \nstring | \n#ee0a24 | \n
confirmButtonDisabled | \n\u662F\u5426\u7981\u7528\u786E\u8BA4\u6309\u94AE | \nboolean | \nfalse | \n
cancelButtonText | \n\u53D6\u6D88\u6309\u94AE\u6587\u6848 | \nstring | \n\u53D6\u6D88 | \n
cancelButtonColor | \n\u53D6\u6D88\u6309\u94AE\u989C\u8272 | \nstring | \nblack | \n
cancelButtonDisabled | \n\u662F\u5426\u7981\u7528\u53D6\u6D88\u6309\u94AE | \nboolean | \nfalse | \n
overlay | \n\u662F\u5426\u5C55\u793A\u906E\u7F69\u5C42 | \nboolean | \ntrue | \n
overlayClass | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u7C7B\u540D | \nstring | Array | object | \n- | \n
overlayStyle | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0F | \nobject | \n- | \n
closeOnPopstate | \n\u662F\u5426\u5728\u9875\u9762\u56DE\u9000\u65F6\u81EA\u52A8\u5173\u95ED | \nboolean | \ntrue | \n
closeOnClickOverlay | \n\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED\u5F39\u7A97 | \nboolean | \nfalse | \n
lockScroll | \n\u662F\u5426\u9501\u5B9A\u80CC\u666F\u6EDA\u52A8 | \nboolean | \ntrue | \n
allowHtml | \n\u662F\u5426\u5141\u8BB8 message \u5185\u5BB9\u4E2D\u6E32\u67D3 HTML | \nboolean | \nfalse | \n
beforeClose | \n\u5173\u95ED\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u963B\u6B62\u5173\u95ED\uFF0C\u652F\u6301\u8FD4\u56DE Promise | \n(action: string) => boolean | Promise<boolean> | \n- | \n
transition | \n\u52A8\u753B\u7C7B\u540D\uFF0C\u7B49\u4EF7\u4E8E transition \u7684 name \u5C5E\u6027 | \nstring | \n- | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \nbody | \n
\u901A\u8FC7\u7EC4\u4EF6\u8C03\u7528 Dialog
\u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B Props\uFF1A
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:show | \n\u662F\u5426\u663E\u793A\u5F39\u7A97 | \nboolean | \n- | \n
title | \n\u6807\u9898 | \nstring | \n- | \n
width | \n\u5F39\u7A97\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n320px | \n
message | \n\u6587\u672C\u5185\u5BB9\uFF0C\u652F\u6301\u901A\u8FC7 \\n \u6362\u884C | \nstring | () => JSX.Element | \n- | \n
message-align | \n\u5185\u5BB9\u6C34\u5E73\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A left right justify | \nstring | \ncenter | \n
theme | \n\u6837\u5F0F\u98CE\u683C\uFF0C\u53EF\u9009\u503C\u4E3A round-button | \nstring | \ndefault | \n
show-confirm-button | \n\u662F\u5426\u5C55\u793A\u786E\u8BA4\u6309\u94AE | \nboolean | \ntrue | \n
show-cancel-button | \n\u662F\u5426\u5C55\u793A\u53D6\u6D88\u6309\u94AE | \nboolean | \nfalse | \n
confirm-button-text | \n\u786E\u8BA4\u6309\u94AE\u6587\u6848 | \nstring | \n\u786E\u8BA4 | \n
confirm-button-color | \n\u786E\u8BA4\u6309\u94AE\u989C\u8272 | \nstring | \n#ee0a24 | \n
confirm-button-disabled | \n\u662F\u5426\u7981\u7528\u786E\u8BA4\u6309\u94AE | \nboolean | \nfalse | \n
cancel-button-text | \n\u53D6\u6D88\u6309\u94AE\u6587\u6848 | \nstring | \n\u53D6\u6D88 | \n
cancel-button-color | \n\u53D6\u6D88\u6309\u94AE\u989C\u8272 | \nstring | \nblack | \n
cancel-button-disabled | \n\u662F\u5426\u7981\u7528\u53D6\u6D88\u6309\u94AE | \nboolean | \nfalse | \n
z-index | \n\u5C06\u5F39\u7A97\u7684 z-index \u5C42\u7EA7\u8BBE\u7F6E\u4E3A\u4E00\u4E2A\u56FA\u5B9A\u503C | \nnumber | string | \n2000+ | \n
overlay | \n\u662F\u5426\u5C55\u793A\u906E\u7F69\u5C42 | \nboolean | \ntrue | \n
overlay-class | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u7C7B\u540D | \nstring | \n- | \n
overlay-style | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0F | \nobject | \n- | \n
close-on-popstate | \n\u662F\u5426\u5728\u9875\u9762\u56DE\u9000\u65F6\u81EA\u52A8\u5173\u95ED | \nboolean | \ntrue | \n
close-on-click-overlay | \n\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED\u5F39\u7A97 | \nboolean | \nfalse | \n
lazy-render | \n\u662F\u5426\u5728\u663E\u793A\u5F39\u5C42\u65F6\u624D\u6E32\u67D3\u8282\u70B9 | \nboolean | \ntrue | \n
lock-scroll | \n\u662F\u5426\u9501\u5B9A\u80CC\u666F\u6EDA\u52A8 | \nboolean | \ntrue | \n
allow-html | \n\u662F\u5426\u5141\u8BB8 message \u5185\u5BB9\u4E2D\u6E32\u67D3 HTML | \nboolean | \nfalse | \n
before-close | \n\u5173\u95ED\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u963B\u6B62\u5173\u95ED\uFF0C\u652F\u6301\u8FD4\u56DE Promise | \n(action: string) => boolean | Promise<boolean> | \n- | \n
transition | \n\u52A8\u753B\u7C7B\u540D\uFF0C\u7B49\u4EF7\u4E8E transition \u7684 name \u5C5E\u6027 | \nstring | \n- | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \n- | \n
\u901A\u8FC7\u7EC4\u4EF6\u8C03\u7528 Dialog
\u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B\u4E8B\u4EF6\uFF1A
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
confirm | \n\u70B9\u51FB\u786E\u8BA4\u6309\u94AE\u65F6\u89E6\u53D1 | \n- | \n
cancel | \n\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1 | \n- | \n
open | \n\u6253\u5F00\u5F39\u7A97\u65F6\u89E6\u53D1 | \n- | \n
close | \n\u5173\u95ED\u5F39\u7A97\u65F6\u89E6\u53D1 | \n- | \n
opened | \n\u6253\u5F00\u5F39\u7A97\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
closed | \n\u5173\u95ED\u5F39\u7A97\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
\u901A\u8FC7\u7EC4\u4EF6\u8C03\u7528 Dialog
\u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B\u63D2\u69FD\uFF1A
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u81EA\u5B9A\u4E49\u5185\u5BB9 | \n
title | \n\u81EA\u5B9A\u4E49\u6807\u9898 | \n
footer | \n\u81EA\u5B9A\u4E49\u5E95\u90E8\u6309\u94AE\u533A\u57DF | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n DialogProps,\n DialogTheme,\n DialogMessage,\n DialogOptions,\n DialogMessageAlign,\n} from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-dialog-width | \n320px | \n- | \n
--van-dialog-small-screen-width | \n90% | \n- | \n
--van-dialog-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-dialog-transition | \nvar(--van-duration-base) | \n- | \n
--van-dialog-radius | \n16px | \n- | \n
--van-dialog-background | \nvar(--van-background-2) | \n- | \n
--van-dialog-header-font-weight | \nvar(--van-font-bold) | \n- | \n
--van-dialog-header-line-height | \n24px | \n- | \n
--van-dialog-header-padding-top | \n26px | \n- | \n
--van-dialog-header-isolated-padding | \nvar(--van-padding-lg) 0 | \n- | \n
--van-dialog-message-padding | \nvar(--van-padding-lg) | \n- | \n
--van-dialog-message-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-dialog-message-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-dialog-message-max-height | \n60vh | \n- | \n
--van-dialog-has-title-message-text-color | \nvar(--van-gray-7) | \n- | \n
--van-dialog-has-title-message-padding-top | \nvar(--van-padding-xs) | \n- | \n
--van-dialog-button-height | \n48px | \n- | \n
--van-dialog-round-button-height | \n36px | \n- | \n
--van-dialog-confirm-button-text-color | \nvar(--van-primary-color) | \n- | \n
\u5982\u679C\u5F15\u7528 showDialog
\u65B9\u6CD5\u65F6\u51FA\u73B0\u4EE5\u4E0B\u62A5\u9519\uFF0C\u8BF4\u660E\u9879\u76EE\u4E2D\u4F7F\u7528\u4E86 babel-plugin-import
\u63D2\u4EF6\uFF0C\u5BFC\u81F4\u4EE3\u7801\u88AB\u9519\u8BEF\u7F16\u8BD1\u3002
These dependencies were not found:\n\n* vant/es/show-dialog in ./src/xxx.js\n* vant/es/show-dialog/style in ./src/xxx.js\n
\nVant \u4ECE 4.0 \u7248\u672C\u5F00\u59CB\u4E0D\u518D\u652F\u6301 babel-plugin-import
\u63D2\u4EF6\uFF0C\u8BF7\u53C2\u8003 \u8FC1\u79FB\u6307\u5357 \u79FB\u9664\u8BE5\u63D2\u4EF6\u3002
\u5C06 closeOnPopstate
\u5C5E\u6027\u8BBE\u7F6E\u4E3A false \u5373\u53EF\u3002
import { showDialog } from 'vant';\n\nshowDialog({\n title: '\u6807\u9898',\n message: '\u5F39\u7A97\u5185\u5BB9',\n closeOnPopstate: false,\n}).then(() => {\n // on close\n});\n
\n\u9009\u9879\u5361\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u5728\u4E0D\u540C\u7684\u5185\u5BB9\u533A\u57DF\u4E4B\u95F4\u8FDB\u884C\u5207\u6362\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Tab, Tabs } from 'vant';\n\nconst app = createApp();\napp.use(Tab);\napp.use(Tabs);\n
\n\u901A\u8FC7 v-model:active
\u7ED1\u5B9A\u5F53\u524D\u6FC0\u6D3B\u6807\u7B7E\u5BF9\u5E94\u7684\u7D22\u5F15\u503C\uFF0C\u9ED8\u8BA4\u60C5\u51B5\u4E0B\u542F\u7528\u7B2C\u4E00\u4E2A\u6807\u7B7E\u3002
<van-tabs v-model:active="active">\n <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>\n <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>\n <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>\n <van-tab title="\u6807\u7B7E 4">\u5185\u5BB9 4</van-tab>\n</van-tabs>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref(0);\n return { active };\n },\n};\n
\n\u5728\u6807\u7B7E\u6307\u5B9A name
\u5C5E\u6027\u7684\u60C5\u51B5\u4E0B\uFF0Cv-model:active
\u7684\u503C\u4E3A\u5F53\u524D\u6807\u7B7E\u7684 name
\uFF08\u6B64\u65F6\u65E0\u6CD5\u901A\u8FC7\u7D22\u5F15\u503C\u6765\u5339\u914D\u6807\u7B7E\uFF09\u3002
<van-tabs v-model:active="activeName">\n <van-tab title="\u6807\u7B7E 1" name="a">\u5185\u5BB9 1</van-tab>\n <van-tab title="\u6807\u7B7E 2" name="b">\u5185\u5BB9 2</van-tab>\n <van-tab title="\u6807\u7B7E 3" name="c">\u5185\u5BB9 3</van-tab>\n</van-tabs>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeName = ref('b');\n return { activeName };\n },\n};\n
\n\u6807\u7B7E\u6570\u91CF\u8D85\u8FC7 5 \u4E2A\u65F6\uFF0C\u6807\u7B7E\u680F\u53EF\u4EE5\u5728\u6C34\u5E73\u65B9\u5411\u4E0A\u6EDA\u52A8\uFF0C\u5207\u6362\u65F6\u4F1A\u81EA\u52A8\u5C06\u5F53\u524D\u6807\u7B7E\u5C45\u4E2D\u3002
\n<van-tabs v-model:active="active">\n <van-tab v-for="index in 8" :title="'\u6807\u7B7E ' + index">\n \u5185\u5BB9 {{ index }}\n </van-tab>\n</van-tabs>\n
\n\u8BBE\u7F6E disabled
\u5C5E\u6027\u5373\u53EF\u7981\u7528\u6807\u7B7E\u3002
<van-tabs v-model:active="active">\n <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>\n <van-tab title="\u6807\u7B7E 2" disabled>\u5185\u5BB9 2</van-tab>\n <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>\n</van-tabs>\n
\nTab
\u652F\u6301\u4E24\u79CD\u6837\u5F0F\u98CE\u683C\uFF1Aline
\u548Ccard
\uFF0C\u9ED8\u8BA4\u4E3A line
\u6837\u5F0F\uFF0C\u53EF\u4EE5\u901A\u8FC7 type
\u5C5E\u6027\u5207\u6362\u6837\u5F0F\u98CE\u683C\u3002
<van-tabs v-model:active="active" type="card">\n <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>\n <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>\n <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>\n</van-tabs>\n
\n\u70B9\u51FB\u6807\u7B7E\u9875\u65F6\uFF0C\u4F1A\u89E6\u53D1 click-tab
\u4E8B\u4EF6\u3002
<van-tabs v-model:active="active" @click-tab="onClickTab">\n <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>\n <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>\n</van-tabs>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const active = ref(0);\n const onClickTab = ({ title }) => showToast(title);\n return {\n active,\n onClickTab,\n };\n },\n};\n
\n\u901A\u8FC7 sticky
\u5C5E\u6027\u53EF\u4EE5\u5F00\u542F\u7C98\u6027\u5E03\u5C40\uFF0C\u7C98\u6027\u5E03\u5C40\u4E0B\uFF0C\u6807\u7B7E\u9875\u6EDA\u52A8\u5230\u9876\u90E8\u65F6\u4F1A\u81EA\u52A8\u5438\u9876\u3002
<van-tabs v-model:active="active" sticky>\n <van-tab v-for="index in 4" :title="'\u9009\u9879 ' + index">\n \u5185\u5BB9 {{ index }}\n </van-tab>\n</van-tabs>\n
\n\n\nTips: \u5982\u679C\u9875\u9762\u9876\u90E8\u6709\u5176\u4ED6\u5185\u5BB9\uFF0C\u53EF\u4EE5\u901A\u8FC7 offset-top \u5C5E\u6027\u8BBE\u7F6E\u5438\u9876\u65F6\u4E0E\u9876\u90E8\u7684\u8DDD\u79BB\u3002
\n
\u901A\u8FC7 shrink
\u5C5E\u6027\u53EF\u4EE5\u5F00\u542F\u6536\u7F29\u5E03\u5C40\uFF0C\u5F00\u542F\u540E\uFF0C\u6240\u6709\u7684\u6807\u7B7E\u4F1A\u5411\u5DE6\u4FA7\u6536\u7F29\u5BF9\u9F50\u3002
<van-tabs v-model:active="active" shrink>\n <van-tab v-for="index in 4" :title="'\u9009\u9879 ' + index">\n \u5185\u5BB9 {{ index }}\n </van-tab>\n</van-tabs>\n
\n\u901A\u8FC7 title
\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u6807\u7B7E\u5185\u5BB9\u3002
<van-tabs v-model:active="active">\n <van-tab v-for="index in 2">\n <template #title> <van-icon name="more-o" />\u9009\u9879 </template>\n \u5185\u5BB9 {{ index }}\n </van-tab>\n</van-tabs>\n
\n\u901A\u8FC7 animated
\u5C5E\u6027\u53EF\u4EE5\u5F00\u542F\u5207\u6362\u6807\u7B7E\u5185\u5BB9\u65F6\u7684\u8F6C\u573A\u52A8\u753B\u3002
<van-tabs v-model:active="active" animated>\n <van-tab v-for="index in 4" :title="'\u9009\u9879 ' + index">\n \u5185\u5BB9 {{ index }}\n </van-tab>\n</van-tabs>\n
\n\u901A\u8FC7 swipeable
\u5C5E\u6027\u53EF\u4EE5\u5F00\u542F\u6ED1\u52A8\u5207\u6362\u6807\u7B7E\u9875\u3002
<van-tabs v-model:active="active" swipeable>\n <van-tab v-for="index in 4" :title="'\u9009\u9879 ' + index">\n \u5185\u5BB9 {{ index }}\n </van-tab>\n</van-tabs>\n
\n\u901A\u8FC7 scrollspy
\u5C5E\u6027\u53EF\u4EE5\u5F00\u542F\u6EDA\u52A8\u5BFC\u822A\u6A21\u5F0F\uFF0C\u8BE5\u6A21\u5F0F\u4E0B\uFF0C\u5185\u5BB9\u5C06\u4F1A\u5E73\u94FA\u5C55\u793A\u3002
<van-tabs v-model:active="active" scrollspy sticky>\n <van-tab v-for="index in 8" :title="'\u9009\u9879 ' + index">\n \u5185\u5BB9 {{ index }}\n </van-tab>\n</van-tabs>\n
\n\u901A\u8FC7 before-change
\u5C5E\u6027\u53EF\u4EE5\u5728\u5207\u6362\u6807\u7B7E\u524D\u6267\u884C\u7279\u5B9A\u7684\u903B\u8F91\u3002
<van-tabs v-model:active="active" :before-change="beforeChange">\n <van-tab v-for="index in 4" :title="'\u9009\u9879 ' + index">\n \u5185\u5BB9 {{ index }}\n </van-tab>\n</van-tabs>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref(0);\n const beforeChange = (index) => {\n // \u8FD4\u56DE false \u8868\u793A\u963B\u6B62\u6B64\u6B21\u5207\u6362\n if (index === 1) {\n return false;\n }\n\n // \u8FD4\u56DE Promise \u6765\u6267\u884C\u5F02\u6B65\u903B\u8F91\n return new Promise((resolve) => {\n // \u5728 resolve \u51FD\u6570\u4E2D\u8FD4\u56DE true \u6216 false\n resolve(index !== 3);\n });\n };\n\n return {\n beforeChange,\n };\n },\n};\n
\n\n\nTips: \u901A\u8FC7\u624B\u52BF\u6ED1\u52A8\u4E0D\u4F1A\u89E6\u53D1 before-change \u5C5E\u6027\u3002
\n
\u901A\u8FC7\u5C06 showHeader
\u5C5E\u6027\u8BBE\u7F6E\u4E3A false
\uFF0C\u53EF\u4EE5\u4E0D\u6E32\u67D3 Tabs \u7684\u6807\u9898\u680F\u3002\u5728\u8FD9\u79CD\u60C5\u51B5\u4E0B\uFF0C\u4F60\u53EF\u4EE5\u901A\u8FC7\u4E00\u4E9B\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6765\u63A7\u5236 Tabs \u7684 active
\u5C5E\u6027\u3002
<van-tabs v-model:active="active" :show-header="false">\n <van-tab v-for="index in 4"> \u5185\u5BB9 {{ index }} </van-tab>\n</van-tabs>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:active | \n\u7ED1\u5B9A\u5F53\u524D\u9009\u4E2D\u6807\u7B7E\u7684\u6807\u8BC6\u7B26 | \nnumber | string | \n0 | \n
type | \n\u6837\u5F0F\u98CE\u683C\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A card | \nstring | \nline | \n
color | \n\u6807\u7B7E\u4E3B\u9898\u8272 | \nstring | \n#1989fa | \n
background | \n\u6807\u7B7E\u680F\u80CC\u666F\u8272 | \nstring | \nwhite | \n
duration | \n\u52A8\u753B\u65F6\u95F4\uFF0C\u5355\u4F4D\u79D2\uFF0C\u8BBE\u7F6E\u4E3A 0 \u53EF\u4EE5\u7981\u7528\u52A8\u753B | \nnumber | string | \n0.3 | \n
line-width | \n\u5E95\u90E8\u6761\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D px | \nnumber | string | \n40px | \n
line-height | \n\u5E95\u90E8\u6761\u9AD8\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D px | \nnumber | string | \n3px | \n
animated | \n\u662F\u5426\u5F00\u542F\u5207\u6362\u6807\u7B7E\u5185\u5BB9\u65F6\u7684\u8F6C\u573A\u52A8\u753B | \nboolean | \nfalse | \n
border | \n\u662F\u5426\u663E\u793A\u6807\u7B7E\u680F\u5916\u8FB9\u6846\uFF0C\u4EC5\u5728 type="line" \u65F6\u6709\u6548 | \nboolean | \nfalse | \n
ellipsis | \n\u662F\u5426\u7701\u7565\u8FC7\u957F\u7684\u6807\u9898\u6587\u5B57 | \nboolean | \ntrue | \n
sticky | \n\u662F\u5426\u4F7F\u7528\u7C98\u6027\u5E03\u5C40 | \nboolean | \nfalse | \n
shrink | \n\u662F\u5426\u5F00\u542F\u5DE6\u4FA7\u6536\u7F29\u5E03\u5C40 | \nboolean | \nfalse | \n
swipeable | \n\u662F\u5426\u5F00\u542F\u624B\u52BF\u5DE6\u53F3\u6ED1\u52A8\u5207\u6362 | \nboolean | \nfalse | \n
lazy-render | \n\u662F\u5426\u5F00\u542F\u5EF6\u8FDF\u6E32\u67D3\uFF08\u9996\u6B21\u5207\u6362\u5230\u6807\u7B7E\u65F6\u624D\u89E6\u53D1\u5185\u5BB9\u6E32\u67D3\uFF09 | \nboolean | \ntrue | \n
scrollspy | \n\u662F\u5426\u5F00\u542F\u6EDA\u52A8\u5BFC\u822A | \nboolean | \nfalse | \n
show-header v4.7.3 | \n\u662F\u5426\u663E\u793A\u6807\u9898\u680F | \nboolean | \ntrue | \n
offset-top | \n\u7C98\u6027\u5E03\u5C40\u4E0B\u5438\u9876\u65F6\u4E0E\u9876\u90E8\u7684\u8DDD\u79BB\uFF0C\u652F\u6301 px vw vh rem \u5355\u4F4D\uFF0C\u9ED8\u8BA4 px | \nnumber | string | \n0 | \n
swipe-threshold | \n\u6EDA\u52A8\u9608\u503C\uFF0C\u6807\u7B7E\u6570\u91CF\u8D85\u8FC7\u9608\u503C\u4E14\u603B\u5BBD\u5EA6\u8D85\u8FC7\u6807\u7B7E\u680F\u5BBD\u5EA6\u65F6\u5F00\u59CB\u6A2A\u5411\u6EDA\u52A8 | \nnumber | string | \n5 | \n
title-active-color | \n\u6807\u9898\u9009\u4E2D\u6001\u989C\u8272 | \nstring | \n- | \n
title-inactive-color | \n\u6807\u9898\u9ED8\u8BA4\u6001\u989C\u8272 | \nstring | \n- | \n
before-change | \n\u5207\u6362\u6807\u7B7E\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u963B\u6B62\u5207\u6362\uFF0C\u652F\u6301\u8FD4\u56DE Promise | \n(name: number | string) => boolean | Promise<boolean> | \n- | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
title | \n\u6807\u9898 | \nstring | \n- | \n
disabled | \n\u662F\u5426\u7981\u7528\u6807\u7B7E | \nboolean | \nfalse | \n
dot | \n\u662F\u5426\u5728\u6807\u9898\u53F3\u4E0A\u89D2\u663E\u793A\u5C0F\u7EA2\u70B9 | \nboolean | \nfalse | \n
badge | \n\u56FE\u6807\u53F3\u4E0A\u89D2\u5FBD\u6807\u7684\u5185\u5BB9 | \nnumber | string | \n- | \n
name | \n\u6807\u7B7E\u540D\u79F0\uFF0C\u4F5C\u4E3A\u5339\u914D\u7684\u6807\u8BC6\u7B26 | \nnumber | string | \n\u6807\u7B7E\u7684\u7D22\u5F15\u503C | \n
url | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740 | \nstring | \n- | \n
to | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u76EE\u6807\u8DEF\u7531\u5BF9\u8C61\uFF0C\u7B49\u540C\u4E8E Vue Router \u7684 to \u5C5E\u6027 | \nstring | object | \n- | \n
replace | \n\u662F\u5426\u5728\u8DF3\u8F6C\u65F6\u66FF\u6362\u5F53\u524D\u9875\u9762\u5386\u53F2 | \nboolean | \nfalse | \n
title-style | \n\u81EA\u5B9A\u4E49\u6807\u9898\u6837\u5F0F | \nstring | Array | object | \n- | \n
title-class | \n\u81EA\u5B9A\u4E49\u6807\u9898\u7C7B\u540D | \nstring | Array | object | \n- | \n
show-zero-badge | \n\u5F53 badge \u4E3A\u6570\u5B57 0 \u65F6\uFF0C\u662F\u5426\u5C55\u793A\u5FBD\u6807 | \nboolean | \ntrue | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click-tab | \n\u70B9\u51FB\u6807\u7B7E\u65F6\u89E6\u53D1 | \n{ name: string | number, title: string, event: MouseEvent, disabled: boolean } | \n
change | \n\u5F53\u524D\u6FC0\u6D3B\u7684\u6807\u7B7E\u6539\u53D8\u65F6\u89E6\u53D1 | \nname: string | number, title: string | \n
rendered | \n\u6807\u7B7E\u5185\u5BB9\u9996\u6B21\u6E32\u67D3\u65F6\u89E6\u53D1\uFF08\u4EC5\u5728\u5F00\u542F\u5EF6\u8FDF\u6E32\u67D3\u540E\u89E6\u53D1\uFF09 | \nname: string | number, title: string | \n
scroll | \n\u6EDA\u52A8\u65F6\u89E6\u53D1\uFF0C\u4EC5\u5728 sticky \u6A21\u5F0F\u4E0B\u751F\u6548 | \n{ scrollTop: number, isFixed: boolean } | \n
\n\n\u63D0\u793A\uFF1Aclick \u548C disabled \u4E8B\u4EF6\u5DF2\u5E9F\u5F03\uFF0C\u8BF7\u4F7F\u7528 click-tab \u4E8B\u4EF6\u4EE3\u66FF\u3002
\n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Tabs \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
resize | \n\u5916\u5C42\u5143\u7D20\u5927\u5C0F\u6216\u7EC4\u4EF6\u663E\u793A\u72B6\u6001\u53D8\u5316\u65F6\uFF0C\u53EF\u4EE5\u8C03\u7528\u6B64\u65B9\u6CD5\u6765\u89E6\u53D1\u91CD\u7ED8 | \n- | \n- | \n
scrollTo | \n\u6EDA\u52A8\u5230\u6307\u5B9A\u7684\u6807\u7B7E\u9875\uFF0C\u5728\u6EDA\u52A8\u5BFC\u822A\u6A21\u5F0F\u4E0B\u53EF\u7528 | \nname: string | number | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { TabProps, TabsType, TabsProps, TabsInstance } from 'vant';\n
\nTabsInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { TabsInstance } from 'vant';\n\nconst tabsRef = ref<TabsInstance>();\n\ntabsRef.value?.scrollTo(0);\n
\n\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
nav-left | \n\u6807\u7B7E\u680F\u5DE6\u4FA7\u5185\u5BB9 | \n
nav-right | \n\u6807\u7B7E\u680F\u53F3\u4FA7\u5185\u5BB9 | \n
nav-bottom | \n\u6807\u7B7E\u680F\u4E0B\u65B9\u5185\u5BB9 | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u6807\u7B7E\u9875\u5185\u5BB9 | \n
title | \n\u81EA\u5B9A\u4E49\u6807\u9898 | \n
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-tab-text-color | \nvar(--van-gray-7) | \n- | \n
--van-tab-active-text-color | \nvar(--van-text-color) | \n- | \n
--van-tab-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-tab-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-tab-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-tabs-default-color | \nvar(--van-primary-color) | \n- | \n
--van-tabs-line-height | \n44px | \n- | \n
--van-tabs-card-height | \n30px | \n- | \n
--van-tabs-nav-background | \nvar(--van-background-2) | \n- | \n
--van-tabs-bottom-bar-width | \n40px | \n- | \n
--van-tabs-bottom-bar-height | \n3px | \n- | \n
--van-tabs-bottom-bar-color | \nvar(--van-primary-color) | \n- | \n
Tabs \u7EC4\u4EF6\u5728\u6302\u8F7D\u65F6\uFF0C\u4F1A\u83B7\u53D6\u81EA\u8EAB\u7684\u5BBD\u5EA6\uFF0C\u5E76\u8BA1\u7B97\u51FA\u5E95\u90E8\u6761\u7684\u4F4D\u7F6E\u3002\u5982\u679C\u7EC4\u4EF6\u4E00\u5F00\u59CB\u5904\u4E8E\u9690\u85CF\u72B6\u6001\uFF0C\u5219\u83B7\u53D6\u5230\u7684\u5BBD\u5EA6\u6C38\u8FDC\u4E3A 0\uFF0C\u56E0\u6B64\u65E0\u6CD5\u5C55\u793A\u5E95\u90E8\u6761\u4F4D\u7F6E\u3002
\n\u65B9\u6CD5\u4E00\uFF0C\u5982\u679C\u662F\u4F7F\u7528 v-show
\u6765\u63A7\u5236\u7EC4\u4EF6\u5C55\u793A\u7684\uFF0C\u5219\u66FF\u6362\u4E3A v-if
\u5373\u53EF\u89E3\u51B3\u6B64\u95EE\u9898\uFF1A
<!-- Before -->\n<van-tabs v-show="show" />\n<!-- After -->\n<van-tabs v-if="show" />\n
\n\u65B9\u6CD5\u4E8C\uFF0C\u8C03\u7528\u7EC4\u4EF6\u7684 resize \u65B9\u6CD5\u6765\u4E3B\u52A8\u89E6\u53D1\u91CD\u7ED8\uFF1A
\n<van-tabs v-show="show" ref="tabs" />\n
\nthis.$refs.tabs.resize();\n
\n\u9009\u9879\u5361\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u5728\u4E0D\u540C\u7684\u5185\u5BB9\u533A\u57DF\u4E4B\u95F4\u8FDB\u884C\u5207\u6362\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Tab, Tabs } from 'vant';\n\nconst app = createApp();\napp.use(Tab);\napp.use(Tabs);\n
\n\u901A\u8FC7 v-model:active
\u7ED1\u5B9A\u5F53\u524D\u6FC0\u6D3B\u6807\u7B7E\u5BF9\u5E94\u7684\u7D22\u5F15\u503C\uFF0C\u9ED8\u8BA4\u60C5\u51B5\u4E0B\u542F\u7528\u7B2C\u4E00\u4E2A\u6807\u7B7E\u3002
<van-tabs v-model:active="active">\n <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>\n <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>\n <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>\n <van-tab title="\u6807\u7B7E 4">\u5185\u5BB9 4</van-tab>\n</van-tabs>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref(0);\n return { active };\n },\n};\n
\n\u5728\u6807\u7B7E\u6307\u5B9A name
\u5C5E\u6027\u7684\u60C5\u51B5\u4E0B\uFF0Cv-model:active
\u7684\u503C\u4E3A\u5F53\u524D\u6807\u7B7E\u7684 name
\uFF08\u6B64\u65F6\u65E0\u6CD5\u901A\u8FC7\u7D22\u5F15\u503C\u6765\u5339\u914D\u6807\u7B7E\uFF09\u3002
<van-tabs v-model:active="activeName">\n <van-tab title="\u6807\u7B7E 1" name="a">\u5185\u5BB9 1</van-tab>\n <van-tab title="\u6807\u7B7E 2" name="b">\u5185\u5BB9 2</van-tab>\n <van-tab title="\u6807\u7B7E 3" name="c">\u5185\u5BB9 3</van-tab>\n</van-tabs>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeName = ref('b');\n return { activeName };\n },\n};\n
\n\u6807\u7B7E\u6570\u91CF\u8D85\u8FC7 5 \u4E2A\u65F6\uFF0C\u6807\u7B7E\u680F\u53EF\u4EE5\u5728\u6C34\u5E73\u65B9\u5411\u4E0A\u6EDA\u52A8\uFF0C\u5207\u6362\u65F6\u4F1A\u81EA\u52A8\u5C06\u5F53\u524D\u6807\u7B7E\u5C45\u4E2D\u3002
\n<van-tabs v-model:active="active">\n <van-tab v-for="index in 8" :title="'\u6807\u7B7E ' + index">\n \u5185\u5BB9 {{ index }}\n </van-tab>\n</van-tabs>\n
\n\u8BBE\u7F6E disabled
\u5C5E\u6027\u5373\u53EF\u7981\u7528\u6807\u7B7E\u3002
<van-tabs v-model:active="active">\n <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>\n <van-tab title="\u6807\u7B7E 2" disabled>\u5185\u5BB9 2</van-tab>\n <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>\n</van-tabs>\n
\nTab
\u652F\u6301\u4E24\u79CD\u6837\u5F0F\u98CE\u683C\uFF1Aline
\u548Ccard
\uFF0C\u9ED8\u8BA4\u4E3A line
\u6837\u5F0F\uFF0C\u53EF\u4EE5\u901A\u8FC7 type
\u5C5E\u6027\u5207\u6362\u6837\u5F0F\u98CE\u683C\u3002
<van-tabs v-model:active="active" type="card">\n <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>\n <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>\n <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>\n</van-tabs>\n
\n\u70B9\u51FB\u6807\u7B7E\u9875\u65F6\uFF0C\u4F1A\u89E6\u53D1 click-tab
\u4E8B\u4EF6\u3002
<van-tabs v-model:active="active" @click-tab="onClickTab">\n <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>\n <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>\n</van-tabs>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const active = ref(0);\n const onClickTab = ({ title }) => showToast(title);\n return {\n active,\n onClickTab,\n };\n },\n};\n
\n\u901A\u8FC7 sticky
\u5C5E\u6027\u53EF\u4EE5\u5F00\u542F\u7C98\u6027\u5E03\u5C40\uFF0C\u7C98\u6027\u5E03\u5C40\u4E0B\uFF0C\u6807\u7B7E\u9875\u6EDA\u52A8\u5230\u9876\u90E8\u65F6\u4F1A\u81EA\u52A8\u5438\u9876\u3002
<van-tabs v-model:active="active" sticky>\n <van-tab v-for="index in 4" :title="'\u9009\u9879 ' + index">\n \u5185\u5BB9 {{ index }}\n </van-tab>\n</van-tabs>\n
\n\n\nTips: \u5982\u679C\u9875\u9762\u9876\u90E8\u6709\u5176\u4ED6\u5185\u5BB9\uFF0C\u53EF\u4EE5\u901A\u8FC7 offset-top \u5C5E\u6027\u8BBE\u7F6E\u5438\u9876\u65F6\u4E0E\u9876\u90E8\u7684\u8DDD\u79BB\u3002
\n
\u901A\u8FC7 shrink
\u5C5E\u6027\u53EF\u4EE5\u5F00\u542F\u6536\u7F29\u5E03\u5C40\uFF0C\u5F00\u542F\u540E\uFF0C\u6240\u6709\u7684\u6807\u7B7E\u4F1A\u5411\u5DE6\u4FA7\u6536\u7F29\u5BF9\u9F50\u3002
<van-tabs v-model:active="active" shrink>\n <van-tab v-for="index in 4" :title="'\u9009\u9879 ' + index">\n \u5185\u5BB9 {{ index }}\n </van-tab>\n</van-tabs>\n
\n\u901A\u8FC7 title
\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u6807\u7B7E\u5185\u5BB9\u3002
<van-tabs v-model:active="active">\n <van-tab v-for="index in 2">\n <template #title> <van-icon name="more-o" />\u9009\u9879 </template>\n \u5185\u5BB9 {{ index }}\n </van-tab>\n</van-tabs>\n
\n\u901A\u8FC7 animated
\u5C5E\u6027\u53EF\u4EE5\u5F00\u542F\u5207\u6362\u6807\u7B7E\u5185\u5BB9\u65F6\u7684\u8F6C\u573A\u52A8\u753B\u3002
<van-tabs v-model:active="active" animated>\n <van-tab v-for="index in 4" :title="'\u9009\u9879 ' + index">\n \u5185\u5BB9 {{ index }}\n </van-tab>\n</van-tabs>\n
\n\u901A\u8FC7 swipeable
\u5C5E\u6027\u53EF\u4EE5\u5F00\u542F\u6ED1\u52A8\u5207\u6362\u6807\u7B7E\u9875\u3002
<van-tabs v-model:active="active" swipeable>\n <van-tab v-for="index in 4" :title="'\u9009\u9879 ' + index">\n \u5185\u5BB9 {{ index }}\n </van-tab>\n</van-tabs>\n
\n\u901A\u8FC7 scrollspy
\u5C5E\u6027\u53EF\u4EE5\u5F00\u542F\u6EDA\u52A8\u5BFC\u822A\u6A21\u5F0F\uFF0C\u8BE5\u6A21\u5F0F\u4E0B\uFF0C\u5185\u5BB9\u5C06\u4F1A\u5E73\u94FA\u5C55\u793A\u3002
<van-tabs v-model:active="active" scrollspy sticky>\n <van-tab v-for="index in 8" :title="'\u9009\u9879 ' + index">\n \u5185\u5BB9 {{ index }}\n </van-tab>\n</van-tabs>\n
\n\u901A\u8FC7 before-change
\u5C5E\u6027\u53EF\u4EE5\u5728\u5207\u6362\u6807\u7B7E\u524D\u6267\u884C\u7279\u5B9A\u7684\u903B\u8F91\u3002
<van-tabs v-model:active="active" :before-change="beforeChange">\n <van-tab v-for="index in 4" :title="'\u9009\u9879 ' + index">\n \u5185\u5BB9 {{ index }}\n </van-tab>\n</van-tabs>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref(0);\n const beforeChange = (index) => {\n // \u8FD4\u56DE false \u8868\u793A\u963B\u6B62\u6B64\u6B21\u5207\u6362\n if (index === 1) {\n return false;\n }\n\n // \u8FD4\u56DE Promise \u6765\u6267\u884C\u5F02\u6B65\u903B\u8F91\n return new Promise((resolve) => {\n // \u5728 resolve \u51FD\u6570\u4E2D\u8FD4\u56DE true \u6216 false\n resolve(index !== 3);\n });\n };\n\n return {\n beforeChange,\n };\n },\n};\n
\n\n\nTips: \u901A\u8FC7\u624B\u52BF\u6ED1\u52A8\u4E0D\u4F1A\u89E6\u53D1 before-change \u5C5E\u6027\u3002
\n
\u901A\u8FC7\u5C06 showHeader
\u5C5E\u6027\u8BBE\u7F6E\u4E3A false
\uFF0C\u53EF\u4EE5\u4E0D\u6E32\u67D3 Tabs \u7684\u6807\u9898\u680F\u3002\u5728\u8FD9\u79CD\u60C5\u51B5\u4E0B\uFF0C\u4F60\u53EF\u4EE5\u901A\u8FC7\u4E00\u4E9B\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6765\u63A7\u5236 Tabs \u7684 active
\u5C5E\u6027\u3002
<van-tabs v-model:active="active" :show-header="false">\n <van-tab v-for="index in 4"> \u5185\u5BB9 {{ index }} </van-tab>\n</van-tabs>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:active | \n\u7ED1\u5B9A\u5F53\u524D\u9009\u4E2D\u6807\u7B7E\u7684\u6807\u8BC6\u7B26 | \nnumber | string | \n0 | \n
type | \n\u6837\u5F0F\u98CE\u683C\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A card | \nstring | \nline | \n
color | \n\u6807\u7B7E\u4E3B\u9898\u8272 | \nstring | \n#1989fa | \n
background | \n\u6807\u7B7E\u680F\u80CC\u666F\u8272 | \nstring | \nwhite | \n
duration | \n\u52A8\u753B\u65F6\u95F4\uFF0C\u5355\u4F4D\u79D2\uFF0C\u8BBE\u7F6E\u4E3A 0 \u53EF\u4EE5\u7981\u7528\u52A8\u753B | \nnumber | string | \n0.3 | \n
line-width | \n\u5E95\u90E8\u6761\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D px | \nnumber | string | \n40px | \n
line-height | \n\u5E95\u90E8\u6761\u9AD8\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D px | \nnumber | string | \n3px | \n
animated | \n\u662F\u5426\u5F00\u542F\u5207\u6362\u6807\u7B7E\u5185\u5BB9\u65F6\u7684\u8F6C\u573A\u52A8\u753B | \nboolean | \nfalse | \n
border | \n\u662F\u5426\u663E\u793A\u6807\u7B7E\u680F\u5916\u8FB9\u6846\uFF0C\u4EC5\u5728 type="line" \u65F6\u6709\u6548 | \nboolean | \nfalse | \n
ellipsis | \n\u662F\u5426\u7701\u7565\u8FC7\u957F\u7684\u6807\u9898\u6587\u5B57 | \nboolean | \ntrue | \n
sticky | \n\u662F\u5426\u4F7F\u7528\u7C98\u6027\u5E03\u5C40 | \nboolean | \nfalse | \n
shrink | \n\u662F\u5426\u5F00\u542F\u5DE6\u4FA7\u6536\u7F29\u5E03\u5C40 | \nboolean | \nfalse | \n
swipeable | \n\u662F\u5426\u5F00\u542F\u624B\u52BF\u5DE6\u53F3\u6ED1\u52A8\u5207\u6362 | \nboolean | \nfalse | \n
lazy-render | \n\u662F\u5426\u5F00\u542F\u5EF6\u8FDF\u6E32\u67D3\uFF08\u9996\u6B21\u5207\u6362\u5230\u6807\u7B7E\u65F6\u624D\u89E6\u53D1\u5185\u5BB9\u6E32\u67D3\uFF09 | \nboolean | \ntrue | \n
scrollspy | \n\u662F\u5426\u5F00\u542F\u6EDA\u52A8\u5BFC\u822A | \nboolean | \nfalse | \n
show-header v4.7.3 | \n\u662F\u5426\u663E\u793A\u6807\u9898\u680F | \nboolean | \ntrue | \n
offset-top | \n\u7C98\u6027\u5E03\u5C40\u4E0B\u5438\u9876\u65F6\u4E0E\u9876\u90E8\u7684\u8DDD\u79BB\uFF0C\u652F\u6301 px vw vh rem \u5355\u4F4D\uFF0C\u9ED8\u8BA4 px | \nnumber | string | \n0 | \n
swipe-threshold | \n\u6EDA\u52A8\u9608\u503C\uFF0C\u6807\u7B7E\u6570\u91CF\u8D85\u8FC7\u9608\u503C\u4E14\u603B\u5BBD\u5EA6\u8D85\u8FC7\u6807\u7B7E\u680F\u5BBD\u5EA6\u65F6\u5F00\u59CB\u6A2A\u5411\u6EDA\u52A8 | \nnumber | string | \n5 | \n
title-active-color | \n\u6807\u9898\u9009\u4E2D\u6001\u989C\u8272 | \nstring | \n- | \n
title-inactive-color | \n\u6807\u9898\u9ED8\u8BA4\u6001\u989C\u8272 | \nstring | \n- | \n
before-change | \n\u5207\u6362\u6807\u7B7E\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u963B\u6B62\u5207\u6362\uFF0C\u652F\u6301\u8FD4\u56DE Promise | \n(name: number | string) => boolean | Promise<boolean> | \n- | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
title | \n\u6807\u9898 | \nstring | \n- | \n
disabled | \n\u662F\u5426\u7981\u7528\u6807\u7B7E | \nboolean | \nfalse | \n
dot | \n\u662F\u5426\u5728\u6807\u9898\u53F3\u4E0A\u89D2\u663E\u793A\u5C0F\u7EA2\u70B9 | \nboolean | \nfalse | \n
badge | \n\u56FE\u6807\u53F3\u4E0A\u89D2\u5FBD\u6807\u7684\u5185\u5BB9 | \nnumber | string | \n- | \n
name | \n\u6807\u7B7E\u540D\u79F0\uFF0C\u4F5C\u4E3A\u5339\u914D\u7684\u6807\u8BC6\u7B26 | \nnumber | string | \n\u6807\u7B7E\u7684\u7D22\u5F15\u503C | \n
url | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740 | \nstring | \n- | \n
to | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u76EE\u6807\u8DEF\u7531\u5BF9\u8C61\uFF0C\u7B49\u540C\u4E8E Vue Router \u7684 to \u5C5E\u6027 | \nstring | object | \n- | \n
replace | \n\u662F\u5426\u5728\u8DF3\u8F6C\u65F6\u66FF\u6362\u5F53\u524D\u9875\u9762\u5386\u53F2 | \nboolean | \nfalse | \n
title-style | \n\u81EA\u5B9A\u4E49\u6807\u9898\u6837\u5F0F | \nstring | Array | object | \n- | \n
title-class | \n\u81EA\u5B9A\u4E49\u6807\u9898\u7C7B\u540D | \nstring | Array | object | \n- | \n
show-zero-badge | \n\u5F53 badge \u4E3A\u6570\u5B57 0 \u65F6\uFF0C\u662F\u5426\u5C55\u793A\u5FBD\u6807 | \nboolean | \ntrue | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click-tab | \n\u70B9\u51FB\u6807\u7B7E\u65F6\u89E6\u53D1 | \n{ name: string | number, title: string, event: MouseEvent, disabled: boolean } | \n
change | \n\u5F53\u524D\u6FC0\u6D3B\u7684\u6807\u7B7E\u6539\u53D8\u65F6\u89E6\u53D1 | \nname: string | number, title: string | \n
rendered | \n\u6807\u7B7E\u5185\u5BB9\u9996\u6B21\u6E32\u67D3\u65F6\u89E6\u53D1\uFF08\u4EC5\u5728\u5F00\u542F\u5EF6\u8FDF\u6E32\u67D3\u540E\u89E6\u53D1\uFF09 | \nname: string | number, title: string | \n
scroll | \n\u6EDA\u52A8\u65F6\u89E6\u53D1\uFF0C\u4EC5\u5728 sticky \u6A21\u5F0F\u4E0B\u751F\u6548 | \n{ scrollTop: number, isFixed: boolean } | \n
\n\n\u63D0\u793A\uFF1Aclick \u548C disabled \u4E8B\u4EF6\u5DF2\u5E9F\u5F03\uFF0C\u8BF7\u4F7F\u7528 click-tab \u4E8B\u4EF6\u4EE3\u66FF\u3002
\n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Tabs \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
resize | \n\u5916\u5C42\u5143\u7D20\u5927\u5C0F\u6216\u7EC4\u4EF6\u663E\u793A\u72B6\u6001\u53D8\u5316\u65F6\uFF0C\u53EF\u4EE5\u8C03\u7528\u6B64\u65B9\u6CD5\u6765\u89E6\u53D1\u91CD\u7ED8 | \n- | \n- | \n
scrollTo | \n\u6EDA\u52A8\u5230\u6307\u5B9A\u7684\u6807\u7B7E\u9875\uFF0C\u5728\u6EDA\u52A8\u5BFC\u822A\u6A21\u5F0F\u4E0B\u53EF\u7528 | \nname: string | number | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { TabProps, TabsType, TabsProps, TabsInstance } from 'vant';\n
\nTabsInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { TabsInstance } from 'vant';\n\nconst tabsRef = ref<TabsInstance>();\n\ntabsRef.value?.scrollTo(0);\n
\n\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
nav-left | \n\u6807\u7B7E\u680F\u5DE6\u4FA7\u5185\u5BB9 | \n
nav-right | \n\u6807\u7B7E\u680F\u53F3\u4FA7\u5185\u5BB9 | \n
nav-bottom | \n\u6807\u7B7E\u680F\u4E0B\u65B9\u5185\u5BB9 | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u6807\u7B7E\u9875\u5185\u5BB9 | \n
title | \n\u81EA\u5B9A\u4E49\u6807\u9898 | \n
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-tab-text-color | \nvar(--van-gray-7) | \n- | \n
--van-tab-active-text-color | \nvar(--van-text-color) | \n- | \n
--van-tab-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-tab-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-tab-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-tabs-default-color | \nvar(--van-primary-color) | \n- | \n
--van-tabs-line-height | \n44px | \n- | \n
--van-tabs-card-height | \n30px | \n- | \n
--van-tabs-nav-background | \nvar(--van-background-2) | \n- | \n
--van-tabs-bottom-bar-width | \n40px | \n- | \n
--van-tabs-bottom-bar-height | \n3px | \n- | \n
--van-tabs-bottom-bar-color | \nvar(--van-primary-color) | \n- | \n
Tabs \u7EC4\u4EF6\u5728\u6302\u8F7D\u65F6\uFF0C\u4F1A\u83B7\u53D6\u81EA\u8EAB\u7684\u5BBD\u5EA6\uFF0C\u5E76\u8BA1\u7B97\u51FA\u5E95\u90E8\u6761\u7684\u4F4D\u7F6E\u3002\u5982\u679C\u7EC4\u4EF6\u4E00\u5F00\u59CB\u5904\u4E8E\u9690\u85CF\u72B6\u6001\uFF0C\u5219\u83B7\u53D6\u5230\u7684\u5BBD\u5EA6\u6C38\u8FDC\u4E3A 0\uFF0C\u56E0\u6B64\u65E0\u6CD5\u5C55\u793A\u5E95\u90E8\u6761\u4F4D\u7F6E\u3002
\n\u65B9\u6CD5\u4E00\uFF0C\u5982\u679C\u662F\u4F7F\u7528 v-show
\u6765\u63A7\u5236\u7EC4\u4EF6\u5C55\u793A\u7684\uFF0C\u5219\u66FF\u6362\u4E3A v-if
\u5373\u53EF\u89E3\u51B3\u6B64\u95EE\u9898\uFF1A
<!-- Before -->\n<van-tabs v-show="show" />\n<!-- After -->\n<van-tabs v-if="show" />\n
\n\u65B9\u6CD5\u4E8C\uFF0C\u8C03\u7528\u7EC4\u4EF6\u7684 resize \u65B9\u6CD5\u6765\u4E3B\u52A8\u89E6\u53D1\u91CD\u7ED8\uFF1A
\n<van-tabs v-show="show" ref="tabs" />\n
\nthis.$refs.tabs.resize();\n
\nUsed to display the countdown value in real time, and precision supports milliseconds.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { CountDown } from 'vant';\n\nconst app = createApp();\napp.use(CountDown);\n
\n<van-count-down :time="time" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const time = ref(30 * 60 * 60 * 1000);\n return { time };\n },\n};\n
\n<van-count-down :time="time" format="DD Day, HH:mm:ss" />\n
\n<van-count-down millisecond :time="time" format="HH:mm:ss:SS" />\n
\n<van-count-down :time="time">\n <template #default="timeData">\n <span class="block">{{ timeData.hours }}</span>\n <span class="colon">:</span>\n <span class="block">{{ timeData.minutes }}</span>\n <span class="colon">:</span>\n <span class="block">{{ timeData.seconds }}</span>\n </template>\n</van-count-down>\n\n<style>\n .colon {\n display: inline-block;\n margin: 0 4px;\n color: #1989fa;\n }\n .block {\n display: inline-block;\n width: 22px;\n color: #fff;\n font-size: 12px;\n text-align: center;\n background-color: #1989fa;\n }\n</style>\n
\n<van-count-down\n ref="countDown"\n millisecond\n :time="3000"\n :auto-start="false"\n format="ss:SSS"\n @finish="onFinish"\n/>\n<van-grid clickable :column-num="3">\n <van-grid-item text="Start" icon="play-circle-o" @click="start" />\n <van-grid-item text="Pause" icon="pause-circle-o" @click="pause" />\n <van-grid-item text="Reset" icon="replay" @click="reset" />\n</van-grid>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const countDown = ref(null);\n\n const start = () => {\n countDown.value.start();\n };\n const pause = () => {\n countDown.value.pause();\n };\n const reset = () => {\n countDown.value.reset();\n };\n const onFinish = () => showToast('Finished');\n\n return {\n start,\n pause,\n reset,\n onFinish,\n countDown,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
time | \nTotal time, unit milliseconds | \nnumber | string | \n0 | \n
format | \nTime format | \nstring | \nHH:mm:ss | \n
auto-start | \nWhether to auto start count down | \nboolean | \ntrue | \n
millisecond | \nWhether to enable millisecond render | \nboolean | \nfalse | \n
Format | \nDescription | \n
---|---|
DD | \nDay | \n
HH | \nHour | \n
mm | \nMinute | \n
ss | \nSecond | \n
S | \nMillisecond, 1-digit | \n
SS | \nMillisecond, 2-digits | \n
SSS | \nMillisecond, 3-digits | \n
Event | \nDescription | \nArguments | \n
---|---|---|
finish | \nEmitted when count down finished | \n- | \n
change | \nEmitted when count down changed | \ncurrentTime: CurrentTime | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
default | \nCustom Content | \ncurrentTime: CurrentTime | \n
Name | \nDescription | \nType | \n
---|---|---|
total | \nTotal time, unit milliseconds | \nnumber | \n
days | \nRemain days | \nnumber | \n
hours | \nRemain hours | \nnumber | \n
minutes | \nRemain minutes | \nnumber | \n
seconds | \nRemain seconds | \nnumber | \n
milliseconds | \nRemain milliseconds | \nnumber | \n
Use ref to get CountDown instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
start | \nStart count down | \n- | \n- | \n
pause | \nPause count down | \n- | \n- | \n
reset | \nReset count down | \n- | \n- | \n
The component exports the following type definitions:
\nimport type {\n CountDownProps,\n CountDownInstance,\n CountDownCurrentTime,\n} from 'vant';\n
\nCountDownInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { CountDownInstance } from 'vant';\n\nconst countDownRef = ref<CountDownInstance>();\n\ncountDownRef.value?.start();\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-count-down-text-color | \nvar(--van-text-color) | \n- | \n
--van-count-down-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-count-down-line-height | \nvar(--van-line-height-md) | \n- | \n
Used to display the countdown value in real time, and precision supports milliseconds.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { CountDown } from 'vant';\n\nconst app = createApp();\napp.use(CountDown);\n
\n<van-count-down :time="time" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const time = ref(30 * 60 * 60 * 1000);\n return { time };\n },\n};\n
\n<van-count-down :time="time" format="DD Day, HH:mm:ss" />\n
\n<van-count-down millisecond :time="time" format="HH:mm:ss:SS" />\n
\n<van-count-down :time="time">\n <template #default="timeData">\n <span class="block">{{ timeData.hours }}</span>\n <span class="colon">:</span>\n <span class="block">{{ timeData.minutes }}</span>\n <span class="colon">:</span>\n <span class="block">{{ timeData.seconds }}</span>\n </template>\n</van-count-down>\n\n<style>\n .colon {\n display: inline-block;\n margin: 0 4px;\n color: #1989fa;\n }\n .block {\n display: inline-block;\n width: 22px;\n color: #fff;\n font-size: 12px;\n text-align: center;\n background-color: #1989fa;\n }\n</style>\n
\n<van-count-down\n ref="countDown"\n millisecond\n :time="3000"\n :auto-start="false"\n format="ss:SSS"\n @finish="onFinish"\n/>\n<van-grid clickable :column-num="3">\n <van-grid-item text="Start" icon="play-circle-o" @click="start" />\n <van-grid-item text="Pause" icon="pause-circle-o" @click="pause" />\n <van-grid-item text="Reset" icon="replay" @click="reset" />\n</van-grid>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const countDown = ref(null);\n\n const start = () => {\n countDown.value.start();\n };\n const pause = () => {\n countDown.value.pause();\n };\n const reset = () => {\n countDown.value.reset();\n };\n const onFinish = () => showToast('Finished');\n\n return {\n start,\n pause,\n reset,\n onFinish,\n countDown,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
time | \nTotal time, unit milliseconds | \nnumber | string | \n0 | \n
format | \nTime format | \nstring | \nHH:mm:ss | \n
auto-start | \nWhether to auto start count down | \nboolean | \ntrue | \n
millisecond | \nWhether to enable millisecond render | \nboolean | \nfalse | \n
Format | \nDescription | \n
---|---|
DD | \nDay | \n
HH | \nHour | \n
mm | \nMinute | \n
ss | \nSecond | \n
S | \nMillisecond, 1-digit | \n
SS | \nMillisecond, 2-digits | \n
SSS | \nMillisecond, 3-digits | \n
Event | \nDescription | \nArguments | \n
---|---|---|
finish | \nEmitted when count down finished | \n- | \n
change | \nEmitted when count down changed | \ncurrentTime: CurrentTime | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
default | \nCustom Content | \ncurrentTime: CurrentTime | \n
Name | \nDescription | \nType | \n
---|---|---|
total | \nTotal time, unit milliseconds | \nnumber | \n
days | \nRemain days | \nnumber | \n
hours | \nRemain hours | \nnumber | \n
minutes | \nRemain minutes | \nnumber | \n
seconds | \nRemain seconds | \nnumber | \n
milliseconds | \nRemain milliseconds | \nnumber | \n
Use ref to get CountDown instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
start | \nStart count down | \n- | \n- | \n
pause | \nPause count down | \n- | \n- | \n
reset | \nReset count down | \n- | \n- | \n
The component exports the following type definitions:
\nimport type {\n CountDownProps,\n CountDownInstance,\n CountDownCurrentTime,\n} from 'vant';\n
\nCountDownInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { CountDownInstance } from 'vant';\n\nconst countDownRef = ref<CountDownInstance>();\n\ncountDownRef.value?.start();\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-count-down-text-color | \nvar(--van-text-color) | \n- | \n
--van-count-down-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-count-down-line-height | \nvar(--van-line-height-md) | \n- | \n
After a year of iterations, Vant 4.0 has been officially released, which is the fourth major version of Vant since it was open-sourced in 2017.
\nIn this iteration, Vant supports the dark mode, adds five new components, improves the utility function API, and refactors components such as Picker, while continuing to make improvements in lightweighting and usability.
\nVant 4.0 supports switching all components to dark mode.
\nSimply set the theme
attribute of the ConfigProvider component to dark
to switch to dark mode, which will switch all Vant components on the page to a dark style.
<van-config-provider theme="dark">\n <!-- child components -->\n</van-config-provider>\n
\n\nAt the same time, the Vant 4.0 document also supports switching to dark mode:
\n\nVant 4.0 contains the following new components:
\nAmong them, TimePicker and DatePicker are split from the old DatetimePicker component, and the DatetimePicker component is removed. You can use PickerGroup to get the interactive effect of selecting the date and time at the same time.
\n\nVant 4.0 has a 30% reduction in installation size, keeping bundle size lightweight.
\nAs the npm ecosystem grows, node_modules are eating up our disk space. To alleviate the node_modules black hole and speed up installation, we have optimized Vant\'s npm dependencies and build outputs.
\nCompared with Vant 3.6.2, the installation size of Vant 4.0.0 has been reduced from 7MB to 5MB. In contrast, the installation size of mainstream component libraries in the community is generally between 15MB and 80MB. You can check the installation size of npm packages through packagephobia.
\n\nIn terms of bundle size, this update still increases the size without increasing the price, and the size after Minified + Gzipped remains below 70KB:
\n\nVant 4.0 unifies the primary color of all components.
\nIn the previous version, Vant components had two primary colors, some components used blue #1989fa
as their primary color, and others used red #ee0a24
.
To keep the color specification consistent, we have unified the primary color in Vant 4, and all components use blue as the primary color.
\n\nNow that the primary color is unified, theme customization becomes easier. For example, you can override the --van-primary-color
CSS variable to set the primary color of all components to green:
:root {\n --van-primary-color: #07c160;\n}\n
\nVant 4.0 no longer uses babel-plugin-import for on-demand import.
\nIn the early days, most component libraries used babel-plugin-import
to achieve on-demand import, which means that component libraries will strongly rely on Babel compilation. Starting from Vant 4.0, babel-plugin-import
is no longer supported, which has the following main advantages:
babel-plugin-import
, you can import content other than Vant components, such as the new showToast
method in Vant 4, or the buttonProps
object:import { showToast, buttonProps } from 'vant';\n
\nIn terms of bundle size, removing babel-plugin-import
will not affect on the JS size of the project, because Vant supports tree shaking by default to remove unnecessary JS code by default, and CSS code can be imported on demand via unplugin-vue-components. For detailed usage, please refer to "Quick Start".
Vant 4.0 provides type hints for style variables.
\nVant provides more than 700 style variables, which you can modify through CSS code or ConfigProvider
component. In Vant 4.0, we have added the ConfigProviderThemeVars
type to provide type hints for style variables.
So when writing TypeScript code, you can use type hints to complete theme variable names:
\n\nVant 4.0 refactored the Picker component, as well as the Picker-based Area and DatetimePicker components.
\nIn the previous version, the API design of the Picker
component was not sensible enough, causing people to often encounter problems when using it, such as:
To solve the above problems, we refactored the Picker
component in Vant 4.0, and also refactored the Area
and DatetimePicker
components derived from Picker
.
If these three components are used in your project, please read the "Upgrade Guide" to upgrade.
\nVant 4.0 adjusts the usage of component utility functions to be more intuitive.
\nVant 3 provides some component utils, such as calling the Dialog()
function, which can quickly invoke the global Dialog component, and Dialog.Component
is the component object corresponding to Dialog
.
// function call\nDialog({ message: 'Hello World!' });\n\n// component registration\napp.use('van-dialog', Dialog.Component);\n
\nThe above API design leads to usage differences between Dialog and other components, and is easily abused; it also prevents unplugin-vue-components
from automatically importing Dialog and other components.
To be more intuitive, we have adjusted the calling method of component utils in Vant 4. The affected functions include Dialog()
, Toast()
, Notify()
and ImagePreview()
. Taking Dialog as an example, we rename the Dialog()
function to showDialog()
, and let Dialog
directly point to the component object.
// function call\nshowDialog({ message: 'Hello World!' });\n\n// component registration\napp.use('van-dialog', Dialog);\n
\nTo facilitate the migration of existing code to Vant 4.0, we provide a compatibility solution. You can use the Dialog()
function exported from @vant/compat
to be compatible with the original code.
import { Dialog } from '@vant/compat';\n\nDialog({ message: 'Hello World!' });\n
\nThe Dialog()
exported in @vant/compat
has exactly the same API and behavior as Dialog()
in Vant 3, so when upgrading, you only need to change its reference path, and the rest of the code can remain constant. After upgrading the project to Vant 4.0, it is recommended to gradually replace it with the new showDialog()
and other methods in iterations, and remove the @vant/compat
package.
Vant 4.0 changes the event name to camel case.
\nStarting from Vant 4, all events are named in camelCase format recommended by Vue.
\n// Vant 3\nemit('click-input');\n\n// Vant 4\nemit('clickInput');\n
\nThis change does not affect the original template code, Vue will automatically format the event name in the template, so you don\'t need to make any changes.
\n<!-- The following code works as usual without any changes -->\n<van-field @click-input="onClick" />\n
\nIf you are using the Vant component in JSX, you will need to change the event name to camel case, the original dash format will no longer take effect, and the new monitoring method is more in line with JSX\'s own specifications:
\n// Vant 3\n<Field onClick-input={onClick} />\n\n// Vant 4\n<Field onClickInput={onClick} />\n
\nVant 4.0 no longer supports theme customization via Less variables.
\nCurrently Vant already supports theme customization based on CSS variables, which is more flexible than Less customization. Therefore, Vant 4 will no longer provide Less-based theme customization. This means that Vant\'s npm package will no longer contain .less
style source files, only the compiled .css
style files will be provided.
If your project is using an old version of Less theme customization, please use ConfigProvider global configuration to replace it.
\nThis update also releases Vant Cli 5.0.
\nVant Cli is the underlying component library construction tool of Vant. The content of this update includes:
\nstylelint
and @vant/stylelint-config
dependencies are no longer installed by default, you can install them yourself if needed:npm add stylelint@13 @vant/stylelint-config\n
\ngh-pages
dependency is no longer installed by default, please update package.json as follows:- "release:site": "pnpm build:site && gh-pages -d site-dist",\n+ "release:site": "pnpm build:site && npx gh-pages -d site-dist",\n
\nCurrently both Vant official website and npm latest tag point to Vant 4.0.
\nWe have prepared a complete upgrade guide for Vant 4.0, please read Upgrade from v3 to v4 to upgrade.
\nAt the same time, Vant 3.x will also enter the maintenance status, and the maintenance status of each version of Vant is as follows:
\nName | \nFramework | \nRelease Date | \nMaintenance Status | \n
---|---|---|---|
Vant 4 | \nVue 3 | \n2022.12 | \nContinuously adding new features | \n
Vant 3 | \nVue 3 | \n2020.12 | \nNo more new features, bugs will be fixed | \n
Vant 2 | \nVue 2 | \n2019.06 | \nNo more new features, critical bugs will be fixed | \n
Vant 1 | \nVue 2 | \n2018.03 | \nEnd of maintenance, no PRs accepted | \n
Thanks to all the friends who contributed to the development of Vant 4.0, thanks to all developers who use Vant, and hope that everyone will keep walking on the road of open source.
\n\nAfter a year of iterations, Vant 4.0 has been officially released, which is the fourth major version of Vant since it was open-sourced in 2017.
\nIn this iteration, Vant supports the dark mode, adds five new components, improves the utility function API, and refactors components such as Picker, while continuing to make improvements in lightweighting and usability.
\nVant 4.0 supports switching all components to dark mode.
\nSimply set the theme
attribute of the ConfigProvider component to dark
to switch to dark mode, which will switch all Vant components on the page to a dark style.
<van-config-provider theme="dark">\n <!-- child components -->\n</van-config-provider>\n
\n\nAt the same time, the Vant 4.0 document also supports switching to dark mode:
\n\nVant 4.0 contains the following new components:
\nAmong them, TimePicker and DatePicker are split from the old DatetimePicker component, and the DatetimePicker component is removed. You can use PickerGroup to get the interactive effect of selecting the date and time at the same time.
\n\nVant 4.0 has a 30% reduction in installation size, keeping bundle size lightweight.
\nAs the npm ecosystem grows, node_modules are eating up our disk space. To alleviate the node_modules black hole and speed up installation, we have optimized Vant\'s npm dependencies and build outputs.
\nCompared with Vant 3.6.2, the installation size of Vant 4.0.0 has been reduced from 7MB to 5MB. In contrast, the installation size of mainstream component libraries in the community is generally between 15MB and 80MB. You can check the installation size of npm packages through packagephobia.
\n\nIn terms of bundle size, this update still increases the size without increasing the price, and the size after Minified + Gzipped remains below 70KB:
\n\nVant 4.0 unifies the primary color of all components.
\nIn the previous version, Vant components had two primary colors, some components used blue #1989fa
as their primary color, and others used red #ee0a24
.
To keep the color specification consistent, we have unified the primary color in Vant 4, and all components use blue as the primary color.
\n\nNow that the primary color is unified, theme customization becomes easier. For example, you can override the --van-primary-color
CSS variable to set the primary color of all components to green:
:root {\n --van-primary-color: #07c160;\n}\n
\nVant 4.0 no longer uses babel-plugin-import for on-demand import.
\nIn the early days, most component libraries used babel-plugin-import
to achieve on-demand import, which means that component libraries will strongly rely on Babel compilation. Starting from Vant 4.0, babel-plugin-import
is no longer supported, which has the following main advantages:
babel-plugin-import
, you can import content other than Vant components, such as the new showToast
method in Vant 4, or the buttonProps
object:import { showToast, buttonProps } from 'vant';\n
\nIn terms of bundle size, removing babel-plugin-import
will not affect on the JS size of the project, because Vant supports tree shaking by default to remove unnecessary JS code by default, and CSS code can be imported on demand via unplugin-vue-components. For detailed usage, please refer to "Quick Start".
Vant 4.0 provides type hints for style variables.
\nVant provides more than 700 style variables, which you can modify through CSS code or ConfigProvider
component. In Vant 4.0, we have added the ConfigProviderThemeVars
type to provide type hints for style variables.
So when writing TypeScript code, you can use type hints to complete theme variable names:
\n\nVant 4.0 refactored the Picker component, as well as the Picker-based Area and DatetimePicker components.
\nIn the previous version, the API design of the Picker
component was not sensible enough, causing people to often encounter problems when using it, such as:
To solve the above problems, we refactored the Picker
component in Vant 4.0, and also refactored the Area
and DatetimePicker
components derived from Picker
.
If these three components are used in your project, please read the "Upgrade Guide" to upgrade.
\nVant 4.0 adjusts the usage of component utility functions to be more intuitive.
\nVant 3 provides some component utils, such as calling the Dialog()
function, which can quickly invoke the global Dialog component, and Dialog.Component
is the component object corresponding to Dialog
.
// function call\nDialog({ message: 'Hello World!' });\n\n// component registration\napp.use('van-dialog', Dialog.Component);\n
\nThe above API design leads to usage differences between Dialog and other components, and is easily abused; it also prevents unplugin-vue-components
from automatically importing Dialog and other components.
To be more intuitive, we have adjusted the calling method of component utils in Vant 4. The affected functions include Dialog()
, Toast()
, Notify()
and ImagePreview()
. Taking Dialog as an example, we rename the Dialog()
function to showDialog()
, and let Dialog
directly point to the component object.
// function call\nshowDialog({ message: 'Hello World!' });\n\n// component registration\napp.use('van-dialog', Dialog);\n
\nTo facilitate the migration of existing code to Vant 4.0, we provide a compatibility solution. You can use the Dialog()
function exported from @vant/compat
to be compatible with the original code.
import { Dialog } from '@vant/compat';\n\nDialog({ message: 'Hello World!' });\n
\nThe Dialog()
exported in @vant/compat
has exactly the same API and behavior as Dialog()
in Vant 3, so when upgrading, you only need to change its reference path, and the rest of the code can remain constant. After upgrading the project to Vant 4.0, it is recommended to gradually replace it with the new showDialog()
and other methods in iterations, and remove the @vant/compat
package.
Vant 4.0 changes the event name to camel case.
\nStarting from Vant 4, all events are named in camelCase format recommended by Vue.
\n// Vant 3\nemit('click-input');\n\n// Vant 4\nemit('clickInput');\n
\nThis change does not affect the original template code, Vue will automatically format the event name in the template, so you don\'t need to make any changes.
\n<!-- The following code works as usual without any changes -->\n<van-field @click-input="onClick" />\n
\nIf you are using the Vant component in JSX, you will need to change the event name to camel case, the original dash format will no longer take effect, and the new monitoring method is more in line with JSX\'s own specifications:
\n// Vant 3\n<Field onClick-input={onClick} />\n\n// Vant 4\n<Field onClickInput={onClick} />\n
\nVant 4.0 no longer supports theme customization via Less variables.
\nCurrently Vant already supports theme customization based on CSS variables, which is more flexible than Less customization. Therefore, Vant 4 will no longer provide Less-based theme customization. This means that Vant\'s npm package will no longer contain .less
style source files, only the compiled .css
style files will be provided.
If your project is using an old version of Less theme customization, please use ConfigProvider global configuration to replace it.
\nThis update also releases Vant Cli 5.0.
\nVant Cli is the underlying component library construction tool of Vant. The content of this update includes:
\nstylelint
and @vant/stylelint-config
dependencies are no longer installed by default, you can install them yourself if needed:npm add stylelint@13 @vant/stylelint-config\n
\ngh-pages
dependency is no longer installed by default, please update package.json as follows:- "release:site": "pnpm build:site && gh-pages -d site-dist",\n+ "release:site": "pnpm build:site && npx gh-pages -d site-dist",\n
\nCurrently both Vant official website and npm latest tag point to Vant 4.0.
\nWe have prepared a complete upgrade guide for Vant 4.0, please read Upgrade from v3 to v4 to upgrade.
\nAt the same time, Vant 3.x will also enter the maintenance status, and the maintenance status of each version of Vant is as follows:
\nName | \nFramework | \nRelease Date | \nMaintenance Status | \n
---|---|---|---|
Vant 4 | \nVue 3 | \n2022.12 | \nContinuously adding new features | \n
Vant 3 | \nVue 3 | \n2020.12 | \nNo more new features, bugs will be fixed | \n
Vant 2 | \nVue 2 | \n2019.06 | \nNo more new features, critical bugs will be fixed | \n
Vant 1 | \nVue 2 | \n2018.03 | \nEnd of maintenance, no PRs accepted | \n
Thanks to all the friends who contributed to the development of Vant 4.0, thanks to all developers who use Vant, and hope that everyone will keep walking on the road of open source.
\n\n\u7528\u4E8E\u81EA\u5B9A\u4E49 Form \u7EC4\u4EF6\u4E2D\u7684\u8868\u5355\u9879\u3002
\n\u5982\u679C\u9700\u8981\u81EA\u5B9A\u4E49\u8868\u5355\u9879\uFF0C\u53EF\u4EE5\u5728 Field \u7EC4\u4EF6\u7684 input
\u63D2\u69FD\u4E2D\u63D2\u5165\u4F60\u7684\u81EA\u5B9A\u4E49\u7EC4\u4EF6\uFF0C\u5E76\u5728\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u5185\u90E8\u8C03\u7528 useCustomFieldValue
\u65B9\u6CD5\u3002
\u9996\u5148\uFF0C\u5728\u4F60\u7684\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u4E2D\uFF0C\u8C03\u7528 useCustomFieldValue
\u65B9\u6CD5\uFF0C\u5E76\u4F20\u5165\u4E00\u4E2A\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD9\u4E2A\u51FD\u6570\u8FD4\u56DE\u503C\u4E3A\u8868\u5355\u9879\u7684\u503C\u3002
// MyComponent.vue\nimport { ref } from 'vue';\nimport { useCustomFieldValue } from '@vant/use';\n\nexport default {\n setup() {\n const myValue = ref(0);\n\n // \u6B64\u5904\u4F20\u5165\u7684\u503C\u4F1A\u66FF\u4EE3 Field \u7EC4\u4EF6\u5185\u90E8\u7684 value\n useCustomFieldValue(() => myValue.value);\n\n return { myValue };\n },\n};\n
\n\u63A5\u7740\uFF0C\u5728 Form \u7EC4\u4EF6\u4E2D\u5D4C\u5165\u4F60\u7684\u81EA\u5B9A\u4E49\u7EC4\u4EF6\uFF0C\u5F53\u63D0\u4EA4\u8868\u5355\u65F6\uFF0C\u5373\u53EF\u83B7\u53D6\u5230\u81EA\u5B9A\u4E49\u8868\u5355\u9879\u7684\u503C\u3002
\n<van-form>\n <!-- \u8FD9\u662F\u4E00\u4E2A\u81EA\u5B9A\u4E49\u8868\u5355\u9879 -->\n <!-- \u5F53\u8868\u5355\u63D0\u4EA4\u65F6\uFF0C\u4F1A\u5305\u62EC useCustomFieldValue \u4E2D\u4F20\u5165\u7684\u503C -->\n <van-field name="my-field" label="\u81EA\u5B9A\u4E49\u8868\u5355\u9879">\n <template #input>\n <my-component />\n </template>\n </van-field>\n</van-form>\n
\nfunction useCustomFieldValue(customValue: () => unknown): void;\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
customValue | \n\u83B7\u53D6\u8868\u5355\u9879\u503C\u7684\u51FD\u6570 | \n() => unknown | \n- | \n
\u7528\u4E8E\u81EA\u5B9A\u4E49 Form \u7EC4\u4EF6\u4E2D\u7684\u8868\u5355\u9879\u3002
\n\u5982\u679C\u9700\u8981\u81EA\u5B9A\u4E49\u8868\u5355\u9879\uFF0C\u53EF\u4EE5\u5728 Field \u7EC4\u4EF6\u7684 input
\u63D2\u69FD\u4E2D\u63D2\u5165\u4F60\u7684\u81EA\u5B9A\u4E49\u7EC4\u4EF6\uFF0C\u5E76\u5728\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u5185\u90E8\u8C03\u7528 useCustomFieldValue
\u65B9\u6CD5\u3002
\u9996\u5148\uFF0C\u5728\u4F60\u7684\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u4E2D\uFF0C\u8C03\u7528 useCustomFieldValue
\u65B9\u6CD5\uFF0C\u5E76\u4F20\u5165\u4E00\u4E2A\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD9\u4E2A\u51FD\u6570\u8FD4\u56DE\u503C\u4E3A\u8868\u5355\u9879\u7684\u503C\u3002
// MyComponent.vue\nimport { ref } from 'vue';\nimport { useCustomFieldValue } from '@vant/use';\n\nexport default {\n setup() {\n const myValue = ref(0);\n\n // \u6B64\u5904\u4F20\u5165\u7684\u503C\u4F1A\u66FF\u4EE3 Field \u7EC4\u4EF6\u5185\u90E8\u7684 value\n useCustomFieldValue(() => myValue.value);\n\n return { myValue };\n },\n};\n
\n\u63A5\u7740\uFF0C\u5728 Form \u7EC4\u4EF6\u4E2D\u5D4C\u5165\u4F60\u7684\u81EA\u5B9A\u4E49\u7EC4\u4EF6\uFF0C\u5F53\u63D0\u4EA4\u8868\u5355\u65F6\uFF0C\u5373\u53EF\u83B7\u53D6\u5230\u81EA\u5B9A\u4E49\u8868\u5355\u9879\u7684\u503C\u3002
\n<van-form>\n <!-- \u8FD9\u662F\u4E00\u4E2A\u81EA\u5B9A\u4E49\u8868\u5355\u9879 -->\n <!-- \u5F53\u8868\u5355\u63D0\u4EA4\u65F6\uFF0C\u4F1A\u5305\u62EC useCustomFieldValue \u4E2D\u4F20\u5165\u7684\u503C -->\n <van-field name="my-field" label="\u81EA\u5B9A\u4E49\u8868\u5355\u9879">\n <template #input>\n <my-component />\n </template>\n </van-field>\n</van-form>\n
\nfunction useCustomFieldValue(customValue: () => unknown): void;\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
customValue | \n\u83B7\u53D6\u8868\u5355\u9879\u503C\u7684\u51FD\u6570 | \n() => unknown | \n- | \n
The PasswordInput component is usually used with NumberKeyboard Component.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { PasswordInput, NumberKeyboard } from 'vant';\n\nconst app = createApp();\napp.use(PasswordInput);\napp.use(NumberKeyboard);\n
\n<van-password-input\n :value="value"\n :focused="showKeyboard"\n @focus="showKeyboard = true"\n/>\n<van-number-keyboard\n v-model="value"\n :show="showKeyboard"\n @blur="showKeyboard = false"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref('123');\n const showKeyboard = ref(true);\n\n return {\n value,\n showKeyboard,\n };\n },\n};\n
\n<van-password-input\n :value="value"\n :gutter="15"\n :focused="showKeyboard"\n @focus="showKeyboard = true"\n/>\n
\n<van-password-input\n :value="value"\n :gutter="10"\n :focused="showKeyboard"\n @focus="showKeyboard = true"\n/>\n
\n<van-password-input\n :value="value"\n :mask="false"\n :focused="showKeyboard"\n @focus="showKeyboard = true"\n/>\n
\nUse info
to set info message, use error-info
prop to set error message.
<van-password-input\n :value="value"\n info="Some tips"\n :error-info="errorInfo"\n :focused="showKeyboard"\n @focus="showKeyboard = true"\n/>\n<van-number-keyboard\n v-model="value"\n :show="showKeyboard"\n @blur="showKeyboard = false"\n/>\n
\nimport { ref, watch } from 'vue';\n\nexport default {\n setup() {\n const value = ref('123');\n const errorInfo = ref('');\n const showKeyboard = ref(true);\n\n watch(value, (newVal) => {\n if (newVal.length === 6 && newVal !== '123456') {\n errorInfo.value = 'Password Mistake';\n } else {\n errorInfo.value = '';\n }\n });\n\n return {\n value,\n errorInfo,\n showKeyboard,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
value | \nPassword value | \nstring | \n\'\' | \n
info | \nBottom info | \nstring | \n- | \n
error-info | \nBottom error info | \nstring | \n- | \n
length | \nMaxlength of password | \nnumber | string | \n6 | \n
gutter | \nGutter of input | \nnumber | string | \n0 | \n
mask | \nWhether to mask value | \nboolean | \ntrue | \n
focused | \nWhether to show focused cursor | \nboolean | \nfalse | \n
Event | \nDescription | \nArguments | \n
---|---|---|
focus | \nEmitted when input is focused | \n- | \n
The component exports the following type definitions:
\nimport type { PasswordInputProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-password-input-height | \n50px | \n- | \n
--van-password-input-margin | \n0 var(--van-padding-md) | \n- | \n
--van-password-input-font-size | \n20px | \n- | \n
--van-password-input-radius | \n6px | \n- | \n
--van-password-input-background | \nvar(--van-background-2) | \n- | \n
--van-password-input-info-color | \nvar(--van-text-color-2) | \n- | \n
--van-password-input-info-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-password-input-error-info-color | \nvar(--van-danger-color) | \n- | \n
--van-password-input-dot-size | \n10px | \n- | \n
--van-password-input-dot-color | \nvar(--van-text-color) | \n- | \n
--van-password-input-text-color | \nvar(--van-text-color) | \n- | \n
--van-password-input-cursor-color | \nvar(--van-text-color) | \n- | \n
--van-password-input-cursor-width | \n1px | \n- | \n
--van-password-input-cursor-height | \n40% | \n- | \n
--van-password-input-cursor-duration | \n1s | \n- | \n
The PasswordInput component is usually used with NumberKeyboard Component.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { PasswordInput, NumberKeyboard } from 'vant';\n\nconst app = createApp();\napp.use(PasswordInput);\napp.use(NumberKeyboard);\n
\n<van-password-input\n :value="value"\n :focused="showKeyboard"\n @focus="showKeyboard = true"\n/>\n<van-number-keyboard\n v-model="value"\n :show="showKeyboard"\n @blur="showKeyboard = false"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref('123');\n const showKeyboard = ref(true);\n\n return {\n value,\n showKeyboard,\n };\n },\n};\n
\n<van-password-input\n :value="value"\n :gutter="15"\n :focused="showKeyboard"\n @focus="showKeyboard = true"\n/>\n
\n<van-password-input\n :value="value"\n :gutter="10"\n :focused="showKeyboard"\n @focus="showKeyboard = true"\n/>\n
\n<van-password-input\n :value="value"\n :mask="false"\n :focused="showKeyboard"\n @focus="showKeyboard = true"\n/>\n
\nUse info
to set info message, use error-info
prop to set error message.
<van-password-input\n :value="value"\n info="Some tips"\n :error-info="errorInfo"\n :focused="showKeyboard"\n @focus="showKeyboard = true"\n/>\n<van-number-keyboard\n v-model="value"\n :show="showKeyboard"\n @blur="showKeyboard = false"\n/>\n
\nimport { ref, watch } from 'vue';\n\nexport default {\n setup() {\n const value = ref('123');\n const errorInfo = ref('');\n const showKeyboard = ref(true);\n\n watch(value, (newVal) => {\n if (newVal.length === 6 && newVal !== '123456') {\n errorInfo.value = 'Password Mistake';\n } else {\n errorInfo.value = '';\n }\n });\n\n return {\n value,\n errorInfo,\n showKeyboard,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
value | \nPassword value | \nstring | \n\'\' | \n
info | \nBottom info | \nstring | \n- | \n
error-info | \nBottom error info | \nstring | \n- | \n
length | \nMaxlength of password | \nnumber | string | \n6 | \n
gutter | \nGutter of input | \nnumber | string | \n0 | \n
mask | \nWhether to mask value | \nboolean | \ntrue | \n
focused | \nWhether to show focused cursor | \nboolean | \nfalse | \n
Event | \nDescription | \nArguments | \n
---|---|---|
focus | \nEmitted when input is focused | \n- | \n
The component exports the following type definitions:
\nimport type { PasswordInputProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-password-input-height | \n50px | \n- | \n
--van-password-input-margin | \n0 var(--van-padding-md) | \n- | \n
--van-password-input-font-size | \n20px | \n- | \n
--van-password-input-radius | \n6px | \n- | \n
--van-password-input-background | \nvar(--van-background-2) | \n- | \n
--van-password-input-info-color | \nvar(--van-text-color-2) | \n- | \n
--van-password-input-info-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-password-input-error-info-color | \nvar(--van-danger-color) | \n- | \n
--van-password-input-dot-size | \n10px | \n- | \n
--van-password-input-dot-color | \nvar(--van-text-color) | \n- | \n
--van-password-input-text-color | \nvar(--van-text-color) | \n- | \n
--van-password-input-cursor-color | \nvar(--van-text-color) | \n- | \n
--van-password-input-cursor-width | \n1px | \n- | \n
--van-password-input-cursor-height | \n40% | \n- | \n
--van-password-input-cursor-duration | \n1s | \n- | \n
Thank you for using Vant.
\nBelow are the guidelines for submitting feedback or code to Vant. Please take a few minutes to read the following before submitting an issue or PR to Vant.
\nBefore developing locally, please make sure that Node.js >= 18 is installed in your development environment.
\nFollow the steps below to develop Vant components locally.
\n# Clone repository\ngit clone git@github.com:vant-ui/vant.git\n\n# Enable pnpm package manager\ncorepack enable\n\n# Install dependencies\npnpm i\n\n# Start development\npnpm dev\n
\nDifferent branches of the repository correspond to different Vant versions, please switch to the appropriate branch for development:
\nIf GitHub cloning is slow, you can also directly clone Vant\'s mirror repository directly on gitee:
\ngit clone git@gitee.com:vant-contrib/vant.git\n
\nThe mirror repository is only used to speed up local access, please do not submit issues and pull requests to the mirror repository.
\nVant uses monorepo for code management, and all subpackages are in the packages/vant
directory:
root\n\u2514\u2500 packages\n \u251C\u2500 vant # Component library\n \u251C\u2500 vant-cli # Scaffolding\n \u251C\u2500 vant-icons # Icon library\n \u251C\u2500 vant-use # Composition API\n \u2514\u2500 .... # Other npm packages\n
\nAmong them, the packages/vant
directory is the core code of the component library:
vant\n\u251C\u2500 docs # Documentation\n\u251C\u2500 src # Component source code\n\u251C\u2500 test # Test utils\n\u2514\u2500 vant.config.mjs # Document configuration\n
\nThe packages/vant/src
directory contains the source code of each component, and each folder corresponds to a component:
src\n\u2514\u2500 button\n \u251C\u2500 demo # Demo code\n \u251C\u2500 test # Unit test\n \u251C\u2500 Component.tsx # Component\n \u251C\u2500 index.ts # Component entry\n \u251C\u2500 index.less # Styles\n \u251C\u2500 README.md # English document\n \u2514\u2500 README.zh-CN.md # Chinese document\n
\nWhen writing code, please note:
\nasync
, await
.If this is your first time submitting a pull request on GitHub, you can learn from the following article:
\n\nWhen submitting a Pull Request, please note:
\nfeature/button_color
.The title of the Pull Request should be in the following format:
\ntype(ComponentName?)\uFF1Acommit message\n
\nExample\uFF1A
\nAllowed Types:
\nBefore submitting a Pull Request, please synchronize the latest code of the main repository according to the following process:
\n# Add the main repository to remote\ngit remote add upstream git@github.com:vant-ui/vant.git\n\n# Pull the latest code from the main repository\ngit fetch upstream\n\n# Switch to the main branch\ngit checkout main\n\n# Merge the code from the main repository\ngit merge upstream/main\n
\nThank you for using Vant.
\nBelow are the guidelines for submitting feedback or code to Vant. Please take a few minutes to read the following before submitting an issue or PR to Vant.
\nBefore developing locally, please make sure that Node.js >= 18 is installed in your development environment.
\nFollow the steps below to develop Vant components locally.
\n# Clone repository\ngit clone git@github.com:vant-ui/vant.git\n\n# Enable pnpm package manager\ncorepack enable\n\n# Install dependencies\npnpm i\n\n# Start development\npnpm dev\n
\nDifferent branches of the repository correspond to different Vant versions, please switch to the appropriate branch for development:
\nIf GitHub cloning is slow, you can also directly clone Vant\'s mirror repository directly on gitee:
\ngit clone git@gitee.com:vant-contrib/vant.git\n
\nThe mirror repository is only used to speed up local access, please do not submit issues and pull requests to the mirror repository.
\nVant uses monorepo for code management, and all subpackages are in the packages/vant
directory:
root\n\u2514\u2500 packages\n \u251C\u2500 vant # Component library\n \u251C\u2500 vant-cli # Scaffolding\n \u251C\u2500 vant-icons # Icon library\n \u251C\u2500 vant-use # Composition API\n \u2514\u2500 .... # Other npm packages\n
\nAmong them, the packages/vant
directory is the core code of the component library:
vant\n\u251C\u2500 docs # Documentation\n\u251C\u2500 src # Component source code\n\u251C\u2500 test # Test utils\n\u2514\u2500 vant.config.mjs # Document configuration\n
\nThe packages/vant/src
directory contains the source code of each component, and each folder corresponds to a component:
src\n\u2514\u2500 button\n \u251C\u2500 demo # Demo code\n \u251C\u2500 test # Unit test\n \u251C\u2500 Component.tsx # Component\n \u251C\u2500 index.ts # Component entry\n \u251C\u2500 index.less # Styles\n \u251C\u2500 README.md # English document\n \u2514\u2500 README.zh-CN.md # Chinese document\n
\nWhen writing code, please note:
\nasync
, await
.If this is your first time submitting a pull request on GitHub, you can learn from the following article:
\n\nWhen submitting a Pull Request, please note:
\nfeature/button_color
.The title of the Pull Request should be in the following format:
\ntype(ComponentName?)\uFF1Acommit message\n
\nExample\uFF1A
\nAllowed Types:
\nBefore submitting a Pull Request, please synchronize the latest code of the main repository according to the following process:
\n# Add the main repository to remote\ngit remote add upstream git@github.com:vant-ui/vant.git\n\n# Pull the latest code from the main repository\ngit fetch upstream\n\n# Switch to the main branch\ngit checkout main\n\n# Merge the code from the main repository\ngit merge upstream/main\n
\nYou can download Vant\'s design resources here.
\nContains color specifications, font specifications, and component design specifications.
\nYou can download Vant\'s design resources here.
\nContains color specifications, font specifications, and component design specifications.
\nSticky \u7EC4\u4EF6\u4E0E CSS \u4E2D position: sticky
\u5C5E\u6027\u5B9E\u73B0\u7684\u6548\u679C\u4E00\u81F4\uFF0C\u5F53\u7EC4\u4EF6\u5728\u5C4F\u5E55\u8303\u56F4\u5185\u65F6\uFF0C\u4F1A\u6309\u7167\u6B63\u5E38\u7684\u5E03\u5C40\u6392\u5217\uFF0C\u5F53\u7EC4\u4EF6\u6EDA\u51FA\u5C4F\u5E55\u8303\u56F4\u65F6\uFF0C\u59CB\u7EC8\u4F1A\u56FA\u5B9A\u5728\u5C4F\u5E55\u9876\u90E8\u3002
\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Sticky } from 'vant';\n\nconst app = createApp();\napp.use(Sticky);\n
\n\u5C06\u5185\u5BB9\u5305\u88F9\u5728 Sticky
\u7EC4\u4EF6\u5185\u5373\u53EF\u3002
<van-sticky>\n <van-button type="primary">\u57FA\u7840\u7528\u6CD5</van-button>\n</van-sticky>\n
\n\u901A\u8FC7 offset-top
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u7EC4\u4EF6\u5728\u5438\u9876\u65F6\u4E0E\u9876\u90E8\u7684\u8DDD\u79BB\u3002
<van-sticky :offset-top="50">\n <van-button type="primary">\u5438\u9876\u8DDD\u79BB</van-button>\n</van-sticky>\n
\n\u901A\u8FC7 container
\u5C5E\u6027\u53EF\u4EE5\u6307\u5B9A\u7EC4\u4EF6\u7684\u5BB9\u5668\uFF0C\u9875\u9762\u6EDA\u52A8\u65F6\uFF0C\u7EC4\u4EF6\u4F1A\u59CB\u7EC8\u4FDD\u6301\u5728\u5BB9\u5668\u8303\u56F4\u5185\uFF0C\u5F53\u7EC4\u4EF6\u5373\u5C06\u8D85\u51FA\u5BB9\u5668\u5E95\u90E8\u65F6\uFF0C\u4F1A\u56FA\u5B9A\u5728\u5BB9\u5668\u7684\u5E95\u90E8\u3002
<div ref="container" style="height: 150px;">\n <van-sticky :container="container">\n <van-button type="warning">\u6307\u5B9A\u5BB9\u5668</van-button>\n </van-sticky>\n</div>\n
\nexport default {\n setup() {\n const container = ref(null);\n return { container };\n },\n};\n
\n\u5C06 position
\u8BBE\u7F6E\u4E3A bottom
\u53EF\u4EE5\u8BA9\u7EC4\u4EF6\u5438\u9644\u5728\u5E95\u90E8\u3002\u901A\u8FC7 offset-bottom
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u7EC4\u4EF6\u5728\u5438\u5E95\u65F6\u4E0E\u5E95\u90E8\u7684\u8DDD\u79BB\u3002
<van-sticky :offset-bottom="50" position="bottom">\n <van-button type="primary">\u5438\u5E95\u8DDD\u79BB</van-button>\n</van-sticky>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
position | \n\u5438\u9644\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A bottom | \nstring | \ntop | \n
offset-top | \n\u5438\u9876\u65F6\u4E0E\u9876\u90E8\u7684\u8DDD\u79BB\uFF0C\u652F\u6301 px vw vh rem \u5355\u4F4D\uFF0C\u9ED8\u8BA4 px | \nnumber | string | \n0 | \n
offset-bottom | \n\u5438\u5E95\u65F6\u4E0E\u5E95\u90E8\u7684\u8DDD\u79BB\uFF0C\u652F\u6301 px vw vh rem \u5355\u4F4D\uFF0C\u9ED8\u8BA4 px | \nnumber | string | \n0 | \n
z-index | \n\u5438\u9876\u65F6\u7684 z-index | \nnumber | string | \n99 | \n
container | \n\u5BB9\u5668\u5BF9\u5E94\u7684 HTML \u8282\u70B9 | \nElement | \n- | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u5F53\u5438\u9876\u72B6\u6001\u6539\u53D8\u65F6\u89E6\u53D1 | \nisFixed: boolean | \n
scroll | \n\u6EDA\u52A8\u65F6\u89E6\u53D1 | \n{ scrollTop: number, isFixed: boolean } | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { StickyProps, StickyPosition } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-sticky-z-index | \n99 | \n- | \n
Sticky \u7EC4\u4EF6\u4E0E CSS \u4E2D position: sticky
\u5C5E\u6027\u5B9E\u73B0\u7684\u6548\u679C\u4E00\u81F4\uFF0C\u5F53\u7EC4\u4EF6\u5728\u5C4F\u5E55\u8303\u56F4\u5185\u65F6\uFF0C\u4F1A\u6309\u7167\u6B63\u5E38\u7684\u5E03\u5C40\u6392\u5217\uFF0C\u5F53\u7EC4\u4EF6\u6EDA\u51FA\u5C4F\u5E55\u8303\u56F4\u65F6\uFF0C\u59CB\u7EC8\u4F1A\u56FA\u5B9A\u5728\u5C4F\u5E55\u9876\u90E8\u3002
\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Sticky } from 'vant';\n\nconst app = createApp();\napp.use(Sticky);\n
\n\u5C06\u5185\u5BB9\u5305\u88F9\u5728 Sticky
\u7EC4\u4EF6\u5185\u5373\u53EF\u3002
<van-sticky>\n <van-button type="primary">\u57FA\u7840\u7528\u6CD5</van-button>\n</van-sticky>\n
\n\u901A\u8FC7 offset-top
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u7EC4\u4EF6\u5728\u5438\u9876\u65F6\u4E0E\u9876\u90E8\u7684\u8DDD\u79BB\u3002
<van-sticky :offset-top="50">\n <van-button type="primary">\u5438\u9876\u8DDD\u79BB</van-button>\n</van-sticky>\n
\n\u901A\u8FC7 container
\u5C5E\u6027\u53EF\u4EE5\u6307\u5B9A\u7EC4\u4EF6\u7684\u5BB9\u5668\uFF0C\u9875\u9762\u6EDA\u52A8\u65F6\uFF0C\u7EC4\u4EF6\u4F1A\u59CB\u7EC8\u4FDD\u6301\u5728\u5BB9\u5668\u8303\u56F4\u5185\uFF0C\u5F53\u7EC4\u4EF6\u5373\u5C06\u8D85\u51FA\u5BB9\u5668\u5E95\u90E8\u65F6\uFF0C\u4F1A\u56FA\u5B9A\u5728\u5BB9\u5668\u7684\u5E95\u90E8\u3002
<div ref="container" style="height: 150px;">\n <van-sticky :container="container">\n <van-button type="warning">\u6307\u5B9A\u5BB9\u5668</van-button>\n </van-sticky>\n</div>\n
\nexport default {\n setup() {\n const container = ref(null);\n return { container };\n },\n};\n
\n\u5C06 position
\u8BBE\u7F6E\u4E3A bottom
\u53EF\u4EE5\u8BA9\u7EC4\u4EF6\u5438\u9644\u5728\u5E95\u90E8\u3002\u901A\u8FC7 offset-bottom
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u7EC4\u4EF6\u5728\u5438\u5E95\u65F6\u4E0E\u5E95\u90E8\u7684\u8DDD\u79BB\u3002
<van-sticky :offset-bottom="50" position="bottom">\n <van-button type="primary">\u5438\u5E95\u8DDD\u79BB</van-button>\n</van-sticky>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
position | \n\u5438\u9644\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A bottom | \nstring | \ntop | \n
offset-top | \n\u5438\u9876\u65F6\u4E0E\u9876\u90E8\u7684\u8DDD\u79BB\uFF0C\u652F\u6301 px vw vh rem \u5355\u4F4D\uFF0C\u9ED8\u8BA4 px | \nnumber | string | \n0 | \n
offset-bottom | \n\u5438\u5E95\u65F6\u4E0E\u5E95\u90E8\u7684\u8DDD\u79BB\uFF0C\u652F\u6301 px vw vh rem \u5355\u4F4D\uFF0C\u9ED8\u8BA4 px | \nnumber | string | \n0 | \n
z-index | \n\u5438\u9876\u65F6\u7684 z-index | \nnumber | string | \n99 | \n
container | \n\u5BB9\u5668\u5BF9\u5E94\u7684 HTML \u8282\u70B9 | \nElement | \n- | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u5F53\u5438\u9876\u72B6\u6001\u6539\u53D8\u65F6\u89E6\u53D1 | \nisFixed: boolean | \n
scroll | \n\u6EDA\u52A8\u65F6\u89E6\u53D1 | \n{ scrollTop: number, isFixed: boolean } | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { StickyProps, StickyPosition } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-sticky-z-index | \n99 | \n- | \n
\u7528\u4E8E\u5C06\u672C\u5730\u7684\u56FE\u7247\u6216\u6587\u4EF6\u4E0A\u4F20\u81F3\u670D\u52A1\u5668\uFF0C\u5E76\u5728\u4E0A\u4F20\u8FC7\u7A0B\u4E2D\u5C55\u793A\u9884\u89C8\u56FE\u548C\u4E0A\u4F20\u8FDB\u5EA6\u3002\u76EE\u524D Uploader \u7EC4\u4EF6\u4E0D\u5305\u542B\u5C06\u6587\u4EF6\u4E0A\u4F20\u81F3\u670D\u52A1\u5668\u7684\u63A5\u53E3\u903B\u8F91\uFF0C\u8BE5\u6B65\u9AA4\u9700\u8981\u81EA\u884C\u5B9E\u73B0\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Uploader } from 'vant';\n\nconst app = createApp();\napp.use(Uploader);\n
\n\u6587\u4EF6\u4E0A\u4F20\u5B8C\u6BD5\u540E\u4F1A\u89E6\u53D1 after-read
\u56DE\u8C03\u51FD\u6570\uFF0C\u83B7\u53D6\u5230\u5BF9\u5E94\u7684 file
\u5BF9\u8C61\u3002
<van-uploader :after-read="afterRead" />\n
\nexport default {\n setup() {\n const afterRead = (file) => {\n // \u6B64\u65F6\u53EF\u4EE5\u81EA\u884C\u5C06\u6587\u4EF6\u4E0A\u4F20\u81F3\u670D\u52A1\u5668\n console.log(file);\n };\n\n return {\n afterRead,\n };\n },\n};\n
\n\u901A\u8FC7 v-model
\u53EF\u4EE5\u7ED1\u5B9A\u5DF2\u7ECF\u4E0A\u4F20\u7684\u6587\u4EF6\u5217\u8868\uFF0C\u5E76\u5C55\u793A\u6587\u4EF6\u5217\u8868\u7684\u9884\u89C8\u56FE\u3002
<van-uploader v-model="fileList" multiple />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const fileList = ref([\n { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },\n // Uploader \u6839\u636E\u6587\u4EF6\u540E\u7F00\u6765\u5224\u65AD\u662F\u5426\u4E3A\u56FE\u7247\u6587\u4EF6\n // \u5982\u679C\u56FE\u7247 URL \u4E2D\u4E0D\u5305\u542B\u7C7B\u578B\u4FE1\u606F\uFF0C\u53EF\u4EE5\u6DFB\u52A0 isImage \u6807\u8BB0\u6765\u58F0\u660E\n { url: 'https://cloud-image', isImage: true },\n ]);\n\n return {\n fileList,\n };\n },\n};\n
\n\u901A\u8FC7 status
\u5C5E\u6027\u53EF\u4EE5\u6807\u8BC6\u4E0A\u4F20\u72B6\u6001\uFF0Cuploading
\u8868\u793A\u4E0A\u4F20\u4E2D\uFF0Cfailed
\u8868\u793A\u4E0A\u4F20\u5931\u8D25\uFF0Cdone
\u8868\u793A\u4E0A\u4F20\u5B8C\u6210\u3002
<van-uploader v-model="fileList" :after-read="afterRead" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const fileList = ref([\n {\n url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg',\n status: 'uploading',\n message: '\u4E0A\u4F20\u4E2D...',\n },\n {\n url: 'https://fastly.jsdelivr.net/npm/@vant/assets/tree.jpeg',\n status: 'failed',\n message: '\u4E0A\u4F20\u5931\u8D25',\n },\n ]);\n\n const afterRead = (file) => {\n file.status = 'uploading';\n file.message = '\u4E0A\u4F20\u4E2D...';\n\n setTimeout(() => {\n file.status = 'failed';\n file.message = '\u4E0A\u4F20\u5931\u8D25';\n }, 1000);\n };\n\n return {\n fileList,\n afterRead,\n };\n },\n};\n
\n\u901A\u8FC7 max-count
\u5C5E\u6027\u53EF\u4EE5\u9650\u5236\u4E0A\u4F20\u6587\u4EF6\u7684\u6570\u91CF\uFF0C\u4E0A\u4F20\u6570\u91CF\u8FBE\u5230\u9650\u5236\u540E\uFF0C\u4F1A\u81EA\u52A8\u9690\u85CF\u4E0A\u4F20\u533A\u57DF\u3002
<van-uploader v-model="fileList" multiple :max-count="2" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const fileList = ref([]);\n\n return {\n fileList,\n };\n },\n};\n
\n\u901A\u8FC7 max-size
\u5C5E\u6027\u53EF\u4EE5\u9650\u5236\u4E0A\u4F20\u6587\u4EF6\u7684\u5927\u5C0F\uFF0C\u8D85\u8FC7\u5927\u5C0F\u7684\u6587\u4EF6\u4F1A\u88AB\u81EA\u52A8\u8FC7\u6EE4\uFF0C\u8FD9\u4E9B\u6587\u4EF6\u4FE1\u606F\u53EF\u4EE5\u901A\u8FC7 oversize
\u4E8B\u4EF6\u83B7\u53D6\u3002
<van-uploader multiple :max-size="500 * 1024" @oversize="onOversize" />\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onOversize = (file) => {\n console.log(file);\n showToast('\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7 500kb');\n };\n\n return {\n onOversize,\n };\n },\n};\n
\n\u5982\u679C\u9700\u8981\u9488\u5BF9\u4E0D\u540C\u7C7B\u578B\u7684\u6587\u4EF6\u6765\u4F5C\u51FA\u4E0D\u540C\u7684\u5927\u5C0F\u9650\u5236\uFF0C\u53EF\u4EE5\u5728 max-size
\u5C5E\u6027\u4E2D\u4F20\u5165\u4E00\u4E2A\u51FD\u6570\uFF0C\u5728\u51FD\u6570\u4E2D\u901A\u8FC7 file.type
\u533A\u5206\u6587\u4EF6\u7C7B\u578B\uFF0C\u8FD4\u56DE true
\u8868\u793A\u8D85\u51FA\u9650\u5236\uFF0Cfalse
\u8868\u793A\u672A\u8D85\u51FA\u9650\u5236\u3002
<van-uploader multiple :max-size="isOverSize" />\n
\nexport default {\n setup() {\n const isOverSize = (file) => {\n const maxSize = file.type === 'image/jpeg' ? 500 * 1024 : 1000 * 1024;\n return file.size >= maxSize;\n };\n return {\n isOverSize,\n };\n },\n};\n
\n\u901A\u8FC7\u9ED8\u8BA4\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u4E0A\u4F20\u533A\u57DF\u7684\u6837\u5F0F\u3002
\n<van-uploader>\n <van-button icon="plus" type="primary">\u4E0A\u4F20\u6587\u4EF6</van-button>\n</van-uploader>\n
\n\u901A\u8FC7 preview-cover
\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u8986\u76D6\u5728\u9884\u89C8\u533A\u57DF\u4E0A\u65B9\u7684\u5185\u5BB9\u3002
<van-uploader v-model="fileList">\n <template #preview-cover="{ file }">\n <div class="preview-cover van-ellipsis">{{ file.name }}</div>\n </template>\n</van-uploader>\n\n<style>\n .preview-cover {\n position: absolute;\n bottom: 0;\n box-sizing: border-box;\n width: 100%;\n padding: 4px;\n color: #fff;\n font-size: 12px;\n text-align: center;\n background: rgba(0, 0, 0, 0.3);\n }\n</style>\n
\n\u901A\u8FC7 preview-size
\u5C5E\u6027\u5B9A\u4E49\u9884\u89C8\u56FE\u548C\u4E0A\u4F20\u533A\u57DF\u7684\u5927\u5C0F\u3002
<!-- \u4E0D\u6307\u5B9A\u5355\u4F4D\uFF0C\u9ED8\u8BA4\u4E3A px -->\n<van-uploader v-model="fileList" preview-size="60" />\n<!-- \u6307\u5B9A\u5355\u4F4D\uFF0C\u652F\u6301 rem, vh, vw -->\n<van-uploader v-model="fileList" preview-size="5rem" />\n
\n\u5C06 preview-size
\u8BBE\u7F6E\u4E3A\u6570\u7EC4\u683C\u5F0F\uFF0C\u53EF\u4EE5\u5206\u522B\u8BBE\u7F6E\u5BBD\u9AD8\u3002\u6570\u7EC4\u7B2C\u4E00\u9879\u5BF9\u5E94\u5BBD\u5EA6\uFF0C\u6570\u7EC4\u7B2C\u4E8C\u9879\u5BF9\u5E94\u9AD8\u5EA6\u3002
<van-uploader v-model="fileList" :preview-size="[60, 40]" />\n
\n\u901A\u8FC7\u4F20\u5165 beforeRead
\u51FD\u6570\u53EF\u4EE5\u5728\u4E0A\u4F20\u524D\u8FDB\u884C\u6821\u9A8C\u548C\u5904\u7406\uFF0C\u8FD4\u56DE true
\u8868\u793A\u6821\u9A8C\u901A\u8FC7\uFF0C\u8FD4\u56DE false
\u8868\u793A\u6821\u9A8C\u5931\u8D25\u3002\u652F\u6301\u8FD4\u56DE Promise
\u5BF9 file \u5BF9\u8C61\u8FDB\u884C\u81EA\u5B9A\u4E49\u5904\u7406\uFF0C\u4F8B\u5982\u538B\u7F29\u56FE\u7247\u3002
<van-uploader :before-read="beforeRead" />\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n // \u8FD4\u56DE\u5E03\u5C14\u503C\n const beforeRead = (file) => {\n if (file.type !== 'image/jpeg') {\n showToast('\u8BF7\u4E0A\u4F20 jpg \u683C\u5F0F\u56FE\u7247');\n return false;\n }\n return true;\n };\n\n // \u8FD4\u56DE Promise\n const asyncBeforeRead = (file) =>\n new Promise((resolve, reject) => {\n if (file.type !== 'image/jpeg') {\n showToast('\u8BF7\u4E0A\u4F20 jpg \u683C\u5F0F\u56FE\u7247');\n reject();\n } else {\n const img = new File(['foo'], 'bar.jpg', {\n type: 'image/jpeg',\n });\n resolve(img);\n }\n });\n\n return {\n beforeRead,\n asyncBeforeRead,\n };\n },\n};\n
\n\u901A\u8FC7 disabled
\u5C5E\u6027\u7981\u7528\u6587\u4EF6\u4E0A\u4F20\u3002
<van-uploader disabled />\n
\n\u5728 v-model
\u6570\u7EC4\u4E2D\u8BBE\u7F6E\u5355\u4E2A\u9884\u89C8\u56FE\u7247\u5C5E\u6027\uFF0C\u652F\u6301 imageFit
deletable
previewSize
beforeDelete
\u3002
<van-uploader v-model="fileList" :deletable="false" />\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const fileList = ref([\n {\n url: 'https://fastly.jsdelivr.net/npm/@vant/assets/sand.jpeg',\n deletable: true,\n beforeDelete: () => {\n showToast('\u5220\u9664\u524D\u7F6E\u5904\u7406');\n },\n },\n {\n url: 'https://fastly.jsdelivr.net/npm/@vant/assets/tree.jpeg',\n imageFit: 'contain',\n },\n ]);\n\n return { fileList };\n },\n};\n
\n<van-uploader v-model="fileList" reupload max-count="2" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const fileList = ref([\n { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },\n ]);\n\n return { fileList };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5DF2\u4E0A\u4F20\u7684\u6587\u4EF6\u5217\u8868 | \nFileListItem[] | \n- | \n
accept | \n\u5141\u8BB8\u4E0A\u4F20\u7684\u6587\u4EF6\u7C7B\u578B\uFF0C\u8BE6\u7EC6\u8BF4\u660E | \nstring | \nimage/* | \n
name | \n\u6807\u8BC6\u7B26\uFF0C\u901A\u5E38\u4E3A\u4E00\u4E2A\u552F\u4E00\u7684\u5B57\u7B26\u4E32\u6216\u6570\u5B57\uFF0C\u53EF\u4EE5\u5728\u56DE\u8C03\u51FD\u6570\u7684\u7B2C\u4E8C\u9879\u53C2\u6570\u4E2D\u83B7\u53D6 | \nnumber | string | \n- | \n
preview-size | \n\u9884\u89C8\u56FE\u548C\u4E0A\u4F20\u533A\u57DF\u7684\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | Array | \n80px | \n
preview-image | \n\u662F\u5426\u5728\u4E0A\u4F20\u5B8C\u6210\u540E\u5C55\u793A\u9884\u89C8\u56FE | \nboolean | \ntrue | \n
preview-full-image | \n\u662F\u5426\u5728\u70B9\u51FB\u9884\u89C8\u56FE\u540E\u5C55\u793A\u5168\u5C4F\u56FE\u7247\u9884\u89C8 | \nboolean | \ntrue | \n
preview-options | \n\u5168\u5C4F\u56FE\u7247\u9884\u89C8\u7684\u914D\u7F6E\u9879\uFF0C\u53EF\u9009\u503C\u89C1 ImagePreview | \nobject | \n- | \n
multiple | \n\u662F\u5426\u5F00\u542F\u56FE\u7247\u591A\u9009\uFF0C\u90E8\u5206\u5B89\u5353\u673A\u578B\u4E0D\u652F\u6301 | \nboolean | \nfalse | \n
disabled | \n\u662F\u5426\u7981\u7528\u6587\u4EF6\u4E0A\u4F20 | \nboolean | \nfalse | \n
readonly | \n\u662F\u5426\u5C06\u4E0A\u4F20\u533A\u57DF\u8BBE\u7F6E\u4E3A\u53EA\u8BFB\u72B6\u6001 | \nboolean | \nfalse | \n
deletable | \n\u662F\u5426\u5C55\u793A\u5220\u9664\u6309\u94AE | \nboolean | \ntrue | \n
reupload v4.4.0 | \n\u662F\u5426\u5F00\u542F\u8986\u76D6\u4E0A\u4F20\uFF0C\u5F00\u542F\u540E\u4F1A\u5173\u95ED\u56FE\u7247\u9884\u89C8 | \nboolean | \nfalse | \n
show-upload | \n\u662F\u5426\u5C55\u793A\u4E0A\u4F20\u533A\u57DF | \nboolean | \ntrue | \n
lazy-load | \n\u662F\u5426\u5F00\u542F\u56FE\u7247\u61D2\u52A0\u8F7D\uFF0C\u987B\u914D\u5408 Lazyload \u7EC4\u4EF6\u4F7F\u7528 | \nboolean | \nfalse | \n
capture | \n\u56FE\u7247\u9009\u53D6\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A camera (\u76F4\u63A5\u8C03\u8D77\u6444\u50CF\u5934) | \nstring | \n- | \n
after-read | \n\u6587\u4EF6\u8BFB\u53D6\u5B8C\u6210\u540E\u7684\u56DE\u8C03\u51FD\u6570 | \nFunction | \n- | \n
before-read | \n\u6587\u4EF6\u8BFB\u53D6\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u7EC8\u6B62\u6587\u4EF6\u8BFB\u53D6\uFF0C\u652F\u6301\u8FD4\u56DE Promise | \nFunction | \n- | \n
before-delete | \n\u6587\u4EF6\u5220\u9664\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u7EC8\u6B62\u6587\u4EF6\u8BFB\u53D6\uFF0C\u652F\u6301\u8FD4\u56DE Promise | \nFunction | \n- | \n
max-size | \n\u6587\u4EF6\u5927\u5C0F\u9650\u5236\uFF0C\u5355\u4F4D\u4E3A byte | \nnumber | string | (file: File) => boolean | \nInfinity | \n
max-count | \n\u6587\u4EF6\u4E0A\u4F20\u6570\u91CF\u9650\u5236 | \nnumber | string | \nInfinity | \n
result-type | \n\u6587\u4EF6\u8BFB\u53D6\u7ED3\u679C\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A file text | \nstring | \ndataUrl | \n
upload-text | \n\u4E0A\u4F20\u533A\u57DF\u6587\u5B57\u63D0\u793A | \nstring | \n- | \n
image-fit | \n\u9884\u89C8\u56FE\u88C1\u526A\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u89C1 Image \u7EC4\u4EF6 | \nstring | \ncover | \n
upload-icon | \n\u4E0A\u4F20\u533A\u57DF\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \nphotograph | \n
\n\n\u6CE8\u610F\uFF1Aaccept\u3001capture \u548C multiple \u4E3A\u6D4F\u89C8\u5668 input \u6807\u7B7E\u7684\u539F\u751F\u5C5E\u6027\uFF0C\u79FB\u52A8\u7AEF\u5404\u79CD\u673A\u578B\u5BF9\u8FD9\u4E9B\u5C5E\u6027\u7684\u652F\u6301\u7A0B\u5EA6\u6709\u6240\u5DEE\u5F02\uFF0C\u56E0\u6B64\u5728\u4E0D\u540C\u673A\u578B\u548C WebView \u4E0B\u53EF\u80FD\u51FA\u73B0\u4E00\u4E9B\u517C\u5BB9\u6027\u95EE\u9898\u3002
\n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
oversize | \n\u6587\u4EF6\u5927\u5C0F\u8D85\u8FC7\u9650\u5236\u65F6\u89E6\u53D1 | \n\u540C after-read | \n
click-upload | \n\u70B9\u51FB\u4E0A\u4F20\u533A\u57DF\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
click-preview | \n\u70B9\u51FB\u9884\u89C8\u56FE\u65F6\u89E6\u53D1 | \n\u540C after-read | \n
click-reupload | \n\u70B9\u51FB\u8986\u76D6\u4E0A\u4F20\u65F6\u89E6\u53D1 | \n\u540C after-read | \n
close-preview | \n\u5173\u95ED\u5168\u5C4F\u56FE\u7247\u9884\u89C8\u65F6\u89E6\u53D1 | \n- | \n
delete | \n\u5220\u9664\u6587\u4EF6\u9884\u89C8\u65F6\u89E6\u53D1 | \n\u540C after-read | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
default | \n\u81EA\u5B9A\u4E49\u4E0A\u4F20\u533A\u57DF | \n- | \n
preview-delete | \n\u81EA\u5B9A\u4E49\u5220\u9664\u6309\u94AE | \n- | \n
preview-cover | \n\u81EA\u5B9A\u4E49\u8986\u76D6\u5728\u9884\u89C8\u533A\u57DF\u4E0A\u65B9\u7684\u5185\u5BB9 | \nitem: FileListItem | \n
before-read\u3001after-read\u3001before-delete \u6267\u884C\u65F6\u4F1A\u4F20\u9012\u4EE5\u4E0B\u56DE\u8C03\u53C2\u6570\uFF1A
\n\u53C2\u6570\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
file | \nfile \u5BF9\u8C61 | \nobject | \n
detail | \n\u989D\u5916\u4FE1\u606F\uFF0C\u5305\u542B name \u548C index \u5B57\u6BB5 | \nobject | \n
result-type
\u5B57\u6BB5\u8868\u793A\u6587\u4EF6\u8BFB\u53D6\u7ED3\u679C\u7684\u7C7B\u578B\uFF0C\u4E0A\u4F20\u5927\u6587\u4EF6\u65F6\uFF0C\u5EFA\u8BAE\u4F7F\u7528 file \u7C7B\u578B\uFF0C\u907F\u514D\u5361\u987F\u3002
\u503C | \n\u63CF\u8FF0 | \n
---|---|
file | \n\u7ED3\u679C\u4EC5\u5305\u542B File \u5BF9\u8C61 | \n
text | \n\u7ED3\u679C\u5305\u542B File \u5BF9\u8C61\uFF0C\u4EE5\u53CA\u6587\u4EF6\u7684\u6587\u672C\u5185\u5BB9 | \n
dataUrl | \n\u7ED3\u679C\u5305\u542B File \u5BF9\u8C61\uFF0C\u4EE5\u53CA\u6587\u4EF6\u5BF9\u5E94\u7684 base64 \u7F16\u7801 | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Uploader \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
closeImagePreview | \n\u5173\u95ED\u5168\u5C4F\u7684\u56FE\u7247\u9884\u89C8 | \n- | \n- | \n
chooseFile | \n\u4E3B\u52A8\u8C03\u8D77\u6587\u4EF6\u9009\u62E9\uFF0C\u7531\u4E8E\u6D4F\u89C8\u5668\u5B89\u5168\u9650\u5236\uFF0C\u53EA\u6709\u5728\u7528\u6237\u89E6\u53D1\u64CD\u4F5C\u7684\u4E0A\u4E0B\u6587\u4E2D\u8C03\u7528\u624D\u6709\u6548 | \n- | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n UploaderProps,\n UploaderInstance,\n UploaderResultType,\n UploaderFileListItem,\n} from 'vant';\n
\nUploaderInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { UploaderInstance } from 'vant';\n\nconst uploaderRef = ref<UploaderInstance>();\n\nuploaderRef.value?.chooseFile();\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-uploader-size | \n80px | \n- | \n
--van-uploader-icon-size | \n24px | \n- | \n
--van-uploader-icon-color | \nvar(--van-gray-4) | \n- | \n
--van-uploader-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-uploader-text-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-uploader-upload-background | \nvar(--van-gray-1) | \n- | \n
--van-uploader-upload-active-color | \nvar(--van-active-color) | \n- | \n
--van-uploader-delete-color | \nvar(--van-white) | \n- | \n
--van-uploader-delete-icon-size | \n14px | \n- | \n
--van-uploader-delete-background | \nrgba(0, 0, 0, 0.7) | \n- | \n
--van-uploader-file-background | \nvar(--van-background) | \n- | \n
--van-uploader-file-icon-size | \n20px | \n- | \n
--van-uploader-file-icon-color | \nvar(--van-gray-7) | \n- | \n
--van-uploader-file-name-padding | \n0 var(--van-padding-base) | \n- | \n
--van-uploader-file-name-margin-top | \nvar(--van-padding-xs) | \n- | \n
--van-uploader-file-name-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-uploader-file-name-text-color | \nvar(--van-gray-7) | \n- | \n
--van-uploader-mask-text-color | \nvar(--van-white) | \n- | \n
--van-uploader-mask-background | \nfade(var(--van-gray-8), 88%) | \n- | \n
--van-uploader-mask-icon-size | \n22px | \n- | \n
--van-uploader-mask-message-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-uploader-mask-message-line-height | \nvar(--van-line-height-xs) | \n- | \n
--van-uploader-loading-icon-size | \n22px | \n- | \n
--van-uploader-loading-icon-color | \nvar(--van-white) | \n- | \n
--van-uploader-disabled-opacity | \nvar(--van-disabled-opacity) | \n- | \n
--van-uploader-border-radius | \n0px | \n- | \n
Uploader \u91C7\u7528\u4E86 HTML \u539F\u751F\u7684 <input type="file />
\u6807\u7B7E\u8FDB\u884C\u4E0A\u4F20\uFF0C\u80FD\u5426\u4E0A\u4F20\u53D6\u51B3\u4E8E\u5F53\u524D\u7CFB\u7EDF\u548C\u6D4F\u89C8\u5668\u7684\u517C\u5BB9\u6027\u3002\u5F53\u9047\u5230\u65E0\u6CD5\u4E0A\u4F20\u7684\u95EE\u9898\u65F6\uFF0C\u4E00\u822C\u6709\u4EE5\u4E0B\u51E0\u79CD\u60C5\u51B5\uFF1A
webp
\u6216 heic
\u683C\u5F0F\u3002\u90E8\u5206\u624B\u673A\u5728\u62CD\u7167\u4E0A\u4F20\u65F6\u4F1A\u51FA\u73B0\u56FE\u7247\u88AB\u65CB\u8F6C 90 \u5EA6\u7684\u95EE\u9898\uFF0C\u8FD9\u4E2A\u95EE\u9898\u53EF\u4EE5\u901A\u8FC7 compressorjs \u6216\u5176\u4ED6\u5F00\u6E90\u5E93\u8FDB\u884C\u5904\u7406\u3002
\ncompressorjs \u662F\u4E00\u4E2A\u5F00\u6E90\u7684\u56FE\u7247\u5904\u7406\u5E93\uFF0C\u63D0\u4F9B\u4E86\u56FE\u7247\u538B\u7F29\u3001\u56FE\u7247\u65CB\u8F6C\u7B49\u80FD\u529B\u3002
\n\u4F7F\u7528 compressorjs \u8FDB\u884C\u5904\u7406\u7684\u793A\u4F8B\u4EE3\u7801\u5982\u4E0B:
\n<van-uploader :before-read="beforeRead" />\n
\nimport Compressor from 'compressorjs';\n\nexport default {\n setup() {\n const beforeRead = (file) =>\n new Promise((resolve) => {\n // compressorjs \u9ED8\u8BA4\u5F00\u542F checkOrientation \u9009\u9879\n // \u4F1A\u5C06\u56FE\u7247\u4FEE\u6B63\u4E3A\u6B63\u786E\u65B9\u5411\n new Compressor(file, {\n success: resolve,\n error(err) {\n console.log(err.message);\n },\n });\n });\n\n return {\n beforeRead,\n };\n },\n};\n
\n\u8FD9\u79CD\u73B0\u8C61\u4E00\u822C\u662F\u5185\u5B58\u4E0D\u8DB3\u5BFC\u81F4\u7684\uFF0C\u901A\u5E38\u53D1\u751F\u5728\u65E7\u673A\u578B\u4E0A\uFF1B\u4E0A\u4F20\u4E00\u5F20\u8F83\u5927\u7684\u56FE\u7247\u5F15\u8D77\u4E5F\u5F15\u8D77\u6B64\u73B0\u8C61\u3002
\n\u4E3A\u4E86\u51CF\u5C11\u8FD9\u79CD\u60C5\u51B5\u7684\u51FA\u73B0\uFF0C\u53EF\u4EE5\u5728\u4E0A\u4F20\u56FE\u7247\u524D\u5BF9\u56FE\u7247\u8FDB\u884C\u538B\u7F29\uFF0C\u538B\u7F29\u65B9\u6CD5\u8BF7\u53C2\u8003\u4E0A\u6587\u4E2D\u63D0\u5230\u7684 compressorjs
\u5E93\u3002
\u76EE\u524D Chrome\u3001Safari \u7B49\u6D4F\u89C8\u5668\u4E0D\u652F\u6301\u5C55\u793A HEIC/HEIF \u683C\u5F0F\u7684\u56FE\u7247\uFF0C\u56E0\u6B64\u4E0A\u4F20\u540E\u65E0\u6CD5\u5728 Uploader \u7EC4\u4EF6\u4E2D\u8FDB\u884C\u9884\u89C8\u3002
\n[HEIF] \u683C\u5F0F\u7684\u517C\u5BB9\u6027\u8BF7\u53C2\u8003 caniuse\u3002
\n\u5728\u4E0A\u4F20\u56FE\u7247\u65F6\uFF0C\u5982\u679C\u7528\u6237\u6CA1\u6709\u6388\u4E88\u5F53\u524D App \u6444\u50CF\u5934\u6743\u9650\uFF0C\u4F1A\u5BFC\u81F4 Uploader \u7EC4\u4EF6\u65E0\u6CD5\u4F7F\u7528\u3002
\n\u4F60\u53EF\u4EE5\u901A\u8FC7\u6D4F\u89C8\u5668\u63D0\u4F9B\u7684 getUserMedia \u65B9\u6CD5\u6765\u5224\u65AD\u662F\u5426\u88AB\u6388\u4E88\u4E86\u6444\u50CF\u5934\u6743\u9650\uFF08\u8BF7\u7559\u610F getUserMedia
\u65B9\u6CD5\u65E0\u6CD5\u5728 iOS 10 \u4E2D\u4F7F\u7528\uFF09\u3002
\u4EE5\u4E0B\u662F\u4E00\u4E2A\u7B80\u5316\u7684\u793A\u4F8B\uFF1A
\nnavigator.mediaDevices\n .getUserMedia({ video: true })\n .then((stream) => {\n console.log(stream);\n })\n .catch((err) => {\n console.log(err);\n });\n
\n\u7528\u4E8E\u5C06\u672C\u5730\u7684\u56FE\u7247\u6216\u6587\u4EF6\u4E0A\u4F20\u81F3\u670D\u52A1\u5668\uFF0C\u5E76\u5728\u4E0A\u4F20\u8FC7\u7A0B\u4E2D\u5C55\u793A\u9884\u89C8\u56FE\u548C\u4E0A\u4F20\u8FDB\u5EA6\u3002\u76EE\u524D Uploader \u7EC4\u4EF6\u4E0D\u5305\u542B\u5C06\u6587\u4EF6\u4E0A\u4F20\u81F3\u670D\u52A1\u5668\u7684\u63A5\u53E3\u903B\u8F91\uFF0C\u8BE5\u6B65\u9AA4\u9700\u8981\u81EA\u884C\u5B9E\u73B0\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Uploader } from 'vant';\n\nconst app = createApp();\napp.use(Uploader);\n
\n\u6587\u4EF6\u4E0A\u4F20\u5B8C\u6BD5\u540E\u4F1A\u89E6\u53D1 after-read
\u56DE\u8C03\u51FD\u6570\uFF0C\u83B7\u53D6\u5230\u5BF9\u5E94\u7684 file
\u5BF9\u8C61\u3002
<van-uploader :after-read="afterRead" />\n
\nexport default {\n setup() {\n const afterRead = (file) => {\n // \u6B64\u65F6\u53EF\u4EE5\u81EA\u884C\u5C06\u6587\u4EF6\u4E0A\u4F20\u81F3\u670D\u52A1\u5668\n console.log(file);\n };\n\n return {\n afterRead,\n };\n },\n};\n
\n\u901A\u8FC7 v-model
\u53EF\u4EE5\u7ED1\u5B9A\u5DF2\u7ECF\u4E0A\u4F20\u7684\u6587\u4EF6\u5217\u8868\uFF0C\u5E76\u5C55\u793A\u6587\u4EF6\u5217\u8868\u7684\u9884\u89C8\u56FE\u3002
<van-uploader v-model="fileList" multiple />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const fileList = ref([\n { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },\n // Uploader \u6839\u636E\u6587\u4EF6\u540E\u7F00\u6765\u5224\u65AD\u662F\u5426\u4E3A\u56FE\u7247\u6587\u4EF6\n // \u5982\u679C\u56FE\u7247 URL \u4E2D\u4E0D\u5305\u542B\u7C7B\u578B\u4FE1\u606F\uFF0C\u53EF\u4EE5\u6DFB\u52A0 isImage \u6807\u8BB0\u6765\u58F0\u660E\n { url: 'https://cloud-image', isImage: true },\n ]);\n\n return {\n fileList,\n };\n },\n};\n
\n\u901A\u8FC7 status
\u5C5E\u6027\u53EF\u4EE5\u6807\u8BC6\u4E0A\u4F20\u72B6\u6001\uFF0Cuploading
\u8868\u793A\u4E0A\u4F20\u4E2D\uFF0Cfailed
\u8868\u793A\u4E0A\u4F20\u5931\u8D25\uFF0Cdone
\u8868\u793A\u4E0A\u4F20\u5B8C\u6210\u3002
<van-uploader v-model="fileList" :after-read="afterRead" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const fileList = ref([\n {\n url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg',\n status: 'uploading',\n message: '\u4E0A\u4F20\u4E2D...',\n },\n {\n url: 'https://fastly.jsdelivr.net/npm/@vant/assets/tree.jpeg',\n status: 'failed',\n message: '\u4E0A\u4F20\u5931\u8D25',\n },\n ]);\n\n const afterRead = (file) => {\n file.status = 'uploading';\n file.message = '\u4E0A\u4F20\u4E2D...';\n\n setTimeout(() => {\n file.status = 'failed';\n file.message = '\u4E0A\u4F20\u5931\u8D25';\n }, 1000);\n };\n\n return {\n fileList,\n afterRead,\n };\n },\n};\n
\n\u901A\u8FC7 max-count
\u5C5E\u6027\u53EF\u4EE5\u9650\u5236\u4E0A\u4F20\u6587\u4EF6\u7684\u6570\u91CF\uFF0C\u4E0A\u4F20\u6570\u91CF\u8FBE\u5230\u9650\u5236\u540E\uFF0C\u4F1A\u81EA\u52A8\u9690\u85CF\u4E0A\u4F20\u533A\u57DF\u3002
<van-uploader v-model="fileList" multiple :max-count="2" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const fileList = ref([]);\n\n return {\n fileList,\n };\n },\n};\n
\n\u901A\u8FC7 max-size
\u5C5E\u6027\u53EF\u4EE5\u9650\u5236\u4E0A\u4F20\u6587\u4EF6\u7684\u5927\u5C0F\uFF0C\u8D85\u8FC7\u5927\u5C0F\u7684\u6587\u4EF6\u4F1A\u88AB\u81EA\u52A8\u8FC7\u6EE4\uFF0C\u8FD9\u4E9B\u6587\u4EF6\u4FE1\u606F\u53EF\u4EE5\u901A\u8FC7 oversize
\u4E8B\u4EF6\u83B7\u53D6\u3002
<van-uploader multiple :max-size="500 * 1024" @oversize="onOversize" />\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onOversize = (file) => {\n console.log(file);\n showToast('\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7 500kb');\n };\n\n return {\n onOversize,\n };\n },\n};\n
\n\u5982\u679C\u9700\u8981\u9488\u5BF9\u4E0D\u540C\u7C7B\u578B\u7684\u6587\u4EF6\u6765\u4F5C\u51FA\u4E0D\u540C\u7684\u5927\u5C0F\u9650\u5236\uFF0C\u53EF\u4EE5\u5728 max-size
\u5C5E\u6027\u4E2D\u4F20\u5165\u4E00\u4E2A\u51FD\u6570\uFF0C\u5728\u51FD\u6570\u4E2D\u901A\u8FC7 file.type
\u533A\u5206\u6587\u4EF6\u7C7B\u578B\uFF0C\u8FD4\u56DE true
\u8868\u793A\u8D85\u51FA\u9650\u5236\uFF0Cfalse
\u8868\u793A\u672A\u8D85\u51FA\u9650\u5236\u3002
<van-uploader multiple :max-size="isOverSize" />\n
\nexport default {\n setup() {\n const isOverSize = (file) => {\n const maxSize = file.type === 'image/jpeg' ? 500 * 1024 : 1000 * 1024;\n return file.size >= maxSize;\n };\n return {\n isOverSize,\n };\n },\n};\n
\n\u901A\u8FC7\u9ED8\u8BA4\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u4E0A\u4F20\u533A\u57DF\u7684\u6837\u5F0F\u3002
\n<van-uploader>\n <van-button icon="plus" type="primary">\u4E0A\u4F20\u6587\u4EF6</van-button>\n</van-uploader>\n
\n\u901A\u8FC7 preview-cover
\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u8986\u76D6\u5728\u9884\u89C8\u533A\u57DF\u4E0A\u65B9\u7684\u5185\u5BB9\u3002
<van-uploader v-model="fileList">\n <template #preview-cover="{ file }">\n <div class="preview-cover van-ellipsis">{{ file.name }}</div>\n </template>\n</van-uploader>\n\n<style>\n .preview-cover {\n position: absolute;\n bottom: 0;\n box-sizing: border-box;\n width: 100%;\n padding: 4px;\n color: #fff;\n font-size: 12px;\n text-align: center;\n background: rgba(0, 0, 0, 0.3);\n }\n</style>\n
\n\u901A\u8FC7 preview-size
\u5C5E\u6027\u5B9A\u4E49\u9884\u89C8\u56FE\u548C\u4E0A\u4F20\u533A\u57DF\u7684\u5927\u5C0F\u3002
<!-- \u4E0D\u6307\u5B9A\u5355\u4F4D\uFF0C\u9ED8\u8BA4\u4E3A px -->\n<van-uploader v-model="fileList" preview-size="60" />\n<!-- \u6307\u5B9A\u5355\u4F4D\uFF0C\u652F\u6301 rem, vh, vw -->\n<van-uploader v-model="fileList" preview-size="5rem" />\n
\n\u5C06 preview-size
\u8BBE\u7F6E\u4E3A\u6570\u7EC4\u683C\u5F0F\uFF0C\u53EF\u4EE5\u5206\u522B\u8BBE\u7F6E\u5BBD\u9AD8\u3002\u6570\u7EC4\u7B2C\u4E00\u9879\u5BF9\u5E94\u5BBD\u5EA6\uFF0C\u6570\u7EC4\u7B2C\u4E8C\u9879\u5BF9\u5E94\u9AD8\u5EA6\u3002
<van-uploader v-model="fileList" :preview-size="[60, 40]" />\n
\n\u901A\u8FC7\u4F20\u5165 beforeRead
\u51FD\u6570\u53EF\u4EE5\u5728\u4E0A\u4F20\u524D\u8FDB\u884C\u6821\u9A8C\u548C\u5904\u7406\uFF0C\u8FD4\u56DE true
\u8868\u793A\u6821\u9A8C\u901A\u8FC7\uFF0C\u8FD4\u56DE false
\u8868\u793A\u6821\u9A8C\u5931\u8D25\u3002\u652F\u6301\u8FD4\u56DE Promise
\u5BF9 file \u5BF9\u8C61\u8FDB\u884C\u81EA\u5B9A\u4E49\u5904\u7406\uFF0C\u4F8B\u5982\u538B\u7F29\u56FE\u7247\u3002
<van-uploader :before-read="beforeRead" />\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n // \u8FD4\u56DE\u5E03\u5C14\u503C\n const beforeRead = (file) => {\n if (file.type !== 'image/jpeg') {\n showToast('\u8BF7\u4E0A\u4F20 jpg \u683C\u5F0F\u56FE\u7247');\n return false;\n }\n return true;\n };\n\n // \u8FD4\u56DE Promise\n const asyncBeforeRead = (file) =>\n new Promise((resolve, reject) => {\n if (file.type !== 'image/jpeg') {\n showToast('\u8BF7\u4E0A\u4F20 jpg \u683C\u5F0F\u56FE\u7247');\n reject();\n } else {\n const img = new File(['foo'], 'bar.jpg', {\n type: 'image/jpeg',\n });\n resolve(img);\n }\n });\n\n return {\n beforeRead,\n asyncBeforeRead,\n };\n },\n};\n
\n\u901A\u8FC7 disabled
\u5C5E\u6027\u7981\u7528\u6587\u4EF6\u4E0A\u4F20\u3002
<van-uploader disabled />\n
\n\u5728 v-model
\u6570\u7EC4\u4E2D\u8BBE\u7F6E\u5355\u4E2A\u9884\u89C8\u56FE\u7247\u5C5E\u6027\uFF0C\u652F\u6301 imageFit
deletable
previewSize
beforeDelete
\u3002
<van-uploader v-model="fileList" :deletable="false" />\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const fileList = ref([\n {\n url: 'https://fastly.jsdelivr.net/npm/@vant/assets/sand.jpeg',\n deletable: true,\n beforeDelete: () => {\n showToast('\u5220\u9664\u524D\u7F6E\u5904\u7406');\n },\n },\n {\n url: 'https://fastly.jsdelivr.net/npm/@vant/assets/tree.jpeg',\n imageFit: 'contain',\n },\n ]);\n\n return { fileList };\n },\n};\n
\n<van-uploader v-model="fileList" reupload max-count="2" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const fileList = ref([\n { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },\n ]);\n\n return { fileList };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5DF2\u4E0A\u4F20\u7684\u6587\u4EF6\u5217\u8868 | \nFileListItem[] | \n- | \n
accept | \n\u5141\u8BB8\u4E0A\u4F20\u7684\u6587\u4EF6\u7C7B\u578B\uFF0C\u8BE6\u7EC6\u8BF4\u660E | \nstring | \nimage/* | \n
name | \n\u6807\u8BC6\u7B26\uFF0C\u901A\u5E38\u4E3A\u4E00\u4E2A\u552F\u4E00\u7684\u5B57\u7B26\u4E32\u6216\u6570\u5B57\uFF0C\u53EF\u4EE5\u5728\u56DE\u8C03\u51FD\u6570\u7684\u7B2C\u4E8C\u9879\u53C2\u6570\u4E2D\u83B7\u53D6 | \nnumber | string | \n- | \n
preview-size | \n\u9884\u89C8\u56FE\u548C\u4E0A\u4F20\u533A\u57DF\u7684\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | Array | \n80px | \n
preview-image | \n\u662F\u5426\u5728\u4E0A\u4F20\u5B8C\u6210\u540E\u5C55\u793A\u9884\u89C8\u56FE | \nboolean | \ntrue | \n
preview-full-image | \n\u662F\u5426\u5728\u70B9\u51FB\u9884\u89C8\u56FE\u540E\u5C55\u793A\u5168\u5C4F\u56FE\u7247\u9884\u89C8 | \nboolean | \ntrue | \n
preview-options | \n\u5168\u5C4F\u56FE\u7247\u9884\u89C8\u7684\u914D\u7F6E\u9879\uFF0C\u53EF\u9009\u503C\u89C1 ImagePreview | \nobject | \n- | \n
multiple | \n\u662F\u5426\u5F00\u542F\u56FE\u7247\u591A\u9009\uFF0C\u90E8\u5206\u5B89\u5353\u673A\u578B\u4E0D\u652F\u6301 | \nboolean | \nfalse | \n
disabled | \n\u662F\u5426\u7981\u7528\u6587\u4EF6\u4E0A\u4F20 | \nboolean | \nfalse | \n
readonly | \n\u662F\u5426\u5C06\u4E0A\u4F20\u533A\u57DF\u8BBE\u7F6E\u4E3A\u53EA\u8BFB\u72B6\u6001 | \nboolean | \nfalse | \n
deletable | \n\u662F\u5426\u5C55\u793A\u5220\u9664\u6309\u94AE | \nboolean | \ntrue | \n
reupload v4.4.0 | \n\u662F\u5426\u5F00\u542F\u8986\u76D6\u4E0A\u4F20\uFF0C\u5F00\u542F\u540E\u4F1A\u5173\u95ED\u56FE\u7247\u9884\u89C8 | \nboolean | \nfalse | \n
show-upload | \n\u662F\u5426\u5C55\u793A\u4E0A\u4F20\u533A\u57DF | \nboolean | \ntrue | \n
lazy-load | \n\u662F\u5426\u5F00\u542F\u56FE\u7247\u61D2\u52A0\u8F7D\uFF0C\u987B\u914D\u5408 Lazyload \u7EC4\u4EF6\u4F7F\u7528 | \nboolean | \nfalse | \n
capture | \n\u56FE\u7247\u9009\u53D6\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A camera (\u76F4\u63A5\u8C03\u8D77\u6444\u50CF\u5934) | \nstring | \n- | \n
after-read | \n\u6587\u4EF6\u8BFB\u53D6\u5B8C\u6210\u540E\u7684\u56DE\u8C03\u51FD\u6570 | \nFunction | \n- | \n
before-read | \n\u6587\u4EF6\u8BFB\u53D6\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u7EC8\u6B62\u6587\u4EF6\u8BFB\u53D6\uFF0C\u652F\u6301\u8FD4\u56DE Promise | \nFunction | \n- | \n
before-delete | \n\u6587\u4EF6\u5220\u9664\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u7EC8\u6B62\u6587\u4EF6\u8BFB\u53D6\uFF0C\u652F\u6301\u8FD4\u56DE Promise | \nFunction | \n- | \n
max-size | \n\u6587\u4EF6\u5927\u5C0F\u9650\u5236\uFF0C\u5355\u4F4D\u4E3A byte | \nnumber | string | (file: File) => boolean | \nInfinity | \n
max-count | \n\u6587\u4EF6\u4E0A\u4F20\u6570\u91CF\u9650\u5236 | \nnumber | string | \nInfinity | \n
result-type | \n\u6587\u4EF6\u8BFB\u53D6\u7ED3\u679C\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A file text | \nstring | \ndataUrl | \n
upload-text | \n\u4E0A\u4F20\u533A\u57DF\u6587\u5B57\u63D0\u793A | \nstring | \n- | \n
image-fit | \n\u9884\u89C8\u56FE\u88C1\u526A\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u89C1 Image \u7EC4\u4EF6 | \nstring | \ncover | \n
upload-icon | \n\u4E0A\u4F20\u533A\u57DF\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \nphotograph | \n
\n\n\u6CE8\u610F\uFF1Aaccept\u3001capture \u548C multiple \u4E3A\u6D4F\u89C8\u5668 input \u6807\u7B7E\u7684\u539F\u751F\u5C5E\u6027\uFF0C\u79FB\u52A8\u7AEF\u5404\u79CD\u673A\u578B\u5BF9\u8FD9\u4E9B\u5C5E\u6027\u7684\u652F\u6301\u7A0B\u5EA6\u6709\u6240\u5DEE\u5F02\uFF0C\u56E0\u6B64\u5728\u4E0D\u540C\u673A\u578B\u548C WebView \u4E0B\u53EF\u80FD\u51FA\u73B0\u4E00\u4E9B\u517C\u5BB9\u6027\u95EE\u9898\u3002
\n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
oversize | \n\u6587\u4EF6\u5927\u5C0F\u8D85\u8FC7\u9650\u5236\u65F6\u89E6\u53D1 | \n\u540C after-read | \n
click-upload | \n\u70B9\u51FB\u4E0A\u4F20\u533A\u57DF\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
click-preview | \n\u70B9\u51FB\u9884\u89C8\u56FE\u65F6\u89E6\u53D1 | \n\u540C after-read | \n
click-reupload | \n\u70B9\u51FB\u8986\u76D6\u4E0A\u4F20\u65F6\u89E6\u53D1 | \n\u540C after-read | \n
close-preview | \n\u5173\u95ED\u5168\u5C4F\u56FE\u7247\u9884\u89C8\u65F6\u89E6\u53D1 | \n- | \n
delete | \n\u5220\u9664\u6587\u4EF6\u9884\u89C8\u65F6\u89E6\u53D1 | \n\u540C after-read | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
default | \n\u81EA\u5B9A\u4E49\u4E0A\u4F20\u533A\u57DF | \n- | \n
preview-delete | \n\u81EA\u5B9A\u4E49\u5220\u9664\u6309\u94AE | \n- | \n
preview-cover | \n\u81EA\u5B9A\u4E49\u8986\u76D6\u5728\u9884\u89C8\u533A\u57DF\u4E0A\u65B9\u7684\u5185\u5BB9 | \nitem: FileListItem | \n
before-read\u3001after-read\u3001before-delete \u6267\u884C\u65F6\u4F1A\u4F20\u9012\u4EE5\u4E0B\u56DE\u8C03\u53C2\u6570\uFF1A
\n\u53C2\u6570\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
file | \nfile \u5BF9\u8C61 | \nobject | \n
detail | \n\u989D\u5916\u4FE1\u606F\uFF0C\u5305\u542B name \u548C index \u5B57\u6BB5 | \nobject | \n
result-type
\u5B57\u6BB5\u8868\u793A\u6587\u4EF6\u8BFB\u53D6\u7ED3\u679C\u7684\u7C7B\u578B\uFF0C\u4E0A\u4F20\u5927\u6587\u4EF6\u65F6\uFF0C\u5EFA\u8BAE\u4F7F\u7528 file \u7C7B\u578B\uFF0C\u907F\u514D\u5361\u987F\u3002
\u503C | \n\u63CF\u8FF0 | \n
---|---|
file | \n\u7ED3\u679C\u4EC5\u5305\u542B File \u5BF9\u8C61 | \n
text | \n\u7ED3\u679C\u5305\u542B File \u5BF9\u8C61\uFF0C\u4EE5\u53CA\u6587\u4EF6\u7684\u6587\u672C\u5185\u5BB9 | \n
dataUrl | \n\u7ED3\u679C\u5305\u542B File \u5BF9\u8C61\uFF0C\u4EE5\u53CA\u6587\u4EF6\u5BF9\u5E94\u7684 base64 \u7F16\u7801 | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Uploader \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
closeImagePreview | \n\u5173\u95ED\u5168\u5C4F\u7684\u56FE\u7247\u9884\u89C8 | \n- | \n- | \n
chooseFile | \n\u4E3B\u52A8\u8C03\u8D77\u6587\u4EF6\u9009\u62E9\uFF0C\u7531\u4E8E\u6D4F\u89C8\u5668\u5B89\u5168\u9650\u5236\uFF0C\u53EA\u6709\u5728\u7528\u6237\u89E6\u53D1\u64CD\u4F5C\u7684\u4E0A\u4E0B\u6587\u4E2D\u8C03\u7528\u624D\u6709\u6548 | \n- | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n UploaderProps,\n UploaderInstance,\n UploaderResultType,\n UploaderFileListItem,\n} from 'vant';\n
\nUploaderInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { UploaderInstance } from 'vant';\n\nconst uploaderRef = ref<UploaderInstance>();\n\nuploaderRef.value?.chooseFile();\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-uploader-size | \n80px | \n- | \n
--van-uploader-icon-size | \n24px | \n- | \n
--van-uploader-icon-color | \nvar(--van-gray-4) | \n- | \n
--van-uploader-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-uploader-text-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-uploader-upload-background | \nvar(--van-gray-1) | \n- | \n
--van-uploader-upload-active-color | \nvar(--van-active-color) | \n- | \n
--van-uploader-delete-color | \nvar(--van-white) | \n- | \n
--van-uploader-delete-icon-size | \n14px | \n- | \n
--van-uploader-delete-background | \nrgba(0, 0, 0, 0.7) | \n- | \n
--van-uploader-file-background | \nvar(--van-background) | \n- | \n
--van-uploader-file-icon-size | \n20px | \n- | \n
--van-uploader-file-icon-color | \nvar(--van-gray-7) | \n- | \n
--van-uploader-file-name-padding | \n0 var(--van-padding-base) | \n- | \n
--van-uploader-file-name-margin-top | \nvar(--van-padding-xs) | \n- | \n
--van-uploader-file-name-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-uploader-file-name-text-color | \nvar(--van-gray-7) | \n- | \n
--van-uploader-mask-text-color | \nvar(--van-white) | \n- | \n
--van-uploader-mask-background | \nfade(var(--van-gray-8), 88%) | \n- | \n
--van-uploader-mask-icon-size | \n22px | \n- | \n
--van-uploader-mask-message-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-uploader-mask-message-line-height | \nvar(--van-line-height-xs) | \n- | \n
--van-uploader-loading-icon-size | \n22px | \n- | \n
--van-uploader-loading-icon-color | \nvar(--van-white) | \n- | \n
--van-uploader-disabled-opacity | \nvar(--van-disabled-opacity) | \n- | \n
--van-uploader-border-radius | \n0px | \n- | \n
Uploader \u91C7\u7528\u4E86 HTML \u539F\u751F\u7684 <input type="file />
\u6807\u7B7E\u8FDB\u884C\u4E0A\u4F20\uFF0C\u80FD\u5426\u4E0A\u4F20\u53D6\u51B3\u4E8E\u5F53\u524D\u7CFB\u7EDF\u548C\u6D4F\u89C8\u5668\u7684\u517C\u5BB9\u6027\u3002\u5F53\u9047\u5230\u65E0\u6CD5\u4E0A\u4F20\u7684\u95EE\u9898\u65F6\uFF0C\u4E00\u822C\u6709\u4EE5\u4E0B\u51E0\u79CD\u60C5\u51B5\uFF1A
webp
\u6216 heic
\u683C\u5F0F\u3002\u90E8\u5206\u624B\u673A\u5728\u62CD\u7167\u4E0A\u4F20\u65F6\u4F1A\u51FA\u73B0\u56FE\u7247\u88AB\u65CB\u8F6C 90 \u5EA6\u7684\u95EE\u9898\uFF0C\u8FD9\u4E2A\u95EE\u9898\u53EF\u4EE5\u901A\u8FC7 compressorjs \u6216\u5176\u4ED6\u5F00\u6E90\u5E93\u8FDB\u884C\u5904\u7406\u3002
\ncompressorjs \u662F\u4E00\u4E2A\u5F00\u6E90\u7684\u56FE\u7247\u5904\u7406\u5E93\uFF0C\u63D0\u4F9B\u4E86\u56FE\u7247\u538B\u7F29\u3001\u56FE\u7247\u65CB\u8F6C\u7B49\u80FD\u529B\u3002
\n\u4F7F\u7528 compressorjs \u8FDB\u884C\u5904\u7406\u7684\u793A\u4F8B\u4EE3\u7801\u5982\u4E0B:
\n<van-uploader :before-read="beforeRead" />\n
\nimport Compressor from 'compressorjs';\n\nexport default {\n setup() {\n const beforeRead = (file) =>\n new Promise((resolve) => {\n // compressorjs \u9ED8\u8BA4\u5F00\u542F checkOrientation \u9009\u9879\n // \u4F1A\u5C06\u56FE\u7247\u4FEE\u6B63\u4E3A\u6B63\u786E\u65B9\u5411\n new Compressor(file, {\n success: resolve,\n error(err) {\n console.log(err.message);\n },\n });\n });\n\n return {\n beforeRead,\n };\n },\n};\n
\n\u8FD9\u79CD\u73B0\u8C61\u4E00\u822C\u662F\u5185\u5B58\u4E0D\u8DB3\u5BFC\u81F4\u7684\uFF0C\u901A\u5E38\u53D1\u751F\u5728\u65E7\u673A\u578B\u4E0A\uFF1B\u4E0A\u4F20\u4E00\u5F20\u8F83\u5927\u7684\u56FE\u7247\u5F15\u8D77\u4E5F\u5F15\u8D77\u6B64\u73B0\u8C61\u3002
\n\u4E3A\u4E86\u51CF\u5C11\u8FD9\u79CD\u60C5\u51B5\u7684\u51FA\u73B0\uFF0C\u53EF\u4EE5\u5728\u4E0A\u4F20\u56FE\u7247\u524D\u5BF9\u56FE\u7247\u8FDB\u884C\u538B\u7F29\uFF0C\u538B\u7F29\u65B9\u6CD5\u8BF7\u53C2\u8003\u4E0A\u6587\u4E2D\u63D0\u5230\u7684 compressorjs
\u5E93\u3002
\u76EE\u524D Chrome\u3001Safari \u7B49\u6D4F\u89C8\u5668\u4E0D\u652F\u6301\u5C55\u793A HEIC/HEIF \u683C\u5F0F\u7684\u56FE\u7247\uFF0C\u56E0\u6B64\u4E0A\u4F20\u540E\u65E0\u6CD5\u5728 Uploader \u7EC4\u4EF6\u4E2D\u8FDB\u884C\u9884\u89C8\u3002
\n[HEIF] \u683C\u5F0F\u7684\u517C\u5BB9\u6027\u8BF7\u53C2\u8003 caniuse\u3002
\n\u5728\u4E0A\u4F20\u56FE\u7247\u65F6\uFF0C\u5982\u679C\u7528\u6237\u6CA1\u6709\u6388\u4E88\u5F53\u524D App \u6444\u50CF\u5934\u6743\u9650\uFF0C\u4F1A\u5BFC\u81F4 Uploader \u7EC4\u4EF6\u65E0\u6CD5\u4F7F\u7528\u3002
\n\u4F60\u53EF\u4EE5\u901A\u8FC7\u6D4F\u89C8\u5668\u63D0\u4F9B\u7684 getUserMedia \u65B9\u6CD5\u6765\u5224\u65AD\u662F\u5426\u88AB\u6388\u4E88\u4E86\u6444\u50CF\u5934\u6743\u9650\uFF08\u8BF7\u7559\u610F getUserMedia
\u65B9\u6CD5\u65E0\u6CD5\u5728 iOS 10 \u4E2D\u4F7F\u7528\uFF09\u3002
\u4EE5\u4E0B\u662F\u4E00\u4E2A\u7B80\u5316\u7684\u793A\u4F8B\uFF1A
\nnavigator.mediaDevices\n .getUserMedia({ video: true })\n .then((stream) => {\n console.log(stream);\n })\n .catch((err) => {\n console.log(err);\n });\n
\n\u5F53\u9875\u9762\u9700\u8981\u52A0\u8F7D\u5927\u91CF\u5185\u5BB9\u65F6\uFF0C\u4F7F\u7528\u61D2\u52A0\u8F7D\u53EF\u4EE5\u5B9E\u73B0\u5EF6\u8FDF\u52A0\u8F7D\u9875\u9762\u53EF\u89C6\u533A\u57DF\u5916\u7684\u5185\u5BB9\uFF0C\u4ECE\u800C\u4F7F\u9875\u9762\u52A0\u8F7D\u66F4\u6D41\u7545\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nLazyload
\u662F Vue
\u6307\u4EE4\uFF0C\u4F7F\u7528\u524D\u9700\u8981\u5BF9\u6307\u4EE4\u8FDB\u884C\u6CE8\u518C\u3002
import { createApp } from 'vue';\nimport { Lazyload } from 'vant';\n\nconst app = createApp();\napp.use(Lazyload);\n\n// \u6CE8\u518C\u65F6\u53EF\u4EE5\u914D\u7F6E\u989D\u5916\u7684\u9009\u9879\napp.use(Lazyload, {\n lazyComponent: true,\n});\n
\n\u5C06 v-lazy
\u6307\u4EE4\u7684\u503C\u8BBE\u7F6E\u4E3A\u4F60\u9700\u8981\u61D2\u52A0\u8F7D\u7684\u56FE\u7247\u3002
<img v-for="img in imageList" v-lazy="img" />\n
\nexport default {\n setup() {\n return {\n imageList: [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n ],\n };\n },\n};\n
\n\u548C\u56FE\u7247\u61D2\u52A0\u8F7D\u4E0D\u540C\uFF0C\u80CC\u666F\u56FE\u61D2\u52A0\u8F7D\u9700\u8981\u4F7F\u7528 v-lazy:background-image
\uFF0C\u503C\u8BBE\u7F6E\u4E3A\u80CC\u666F\u56FE\u7247\u7684\u5730\u5740\uFF0C\u9700\u8981\u6CE8\u610F\u7684\u662F\u5FC5\u987B\u58F0\u660E\u5BB9\u5668\u9AD8\u5EA6\u3002
<div v-for="img in imageList" v-lazy:background-image="img" />\n
\n\u5C06\u9700\u8981\u61D2\u52A0\u8F7D\u7684\u7EC4\u4EF6\u653E\u5728 lazy-component
\u6807\u7B7E\u4E2D\uFF0C\u5373\u53EF\u5B9E\u73B0\u7EC4\u4EF6\u61D2\u52A0\u8F7D\u3002
// \u6CE8\u518C\u65F6\u8BBE\u7F6E`lazyComponent`\u9009\u9879\napp.use(Lazyload, {\n lazyComponent: true,\n});\n
\n<lazy-component>\n <img v-for="img in imageList" v-lazy="img" />\n</lazy-component>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
loading | \n\u52A0\u8F7D\u65F6\u7684\u56FE\u7247 | \nstring | \n- | \n
error | \n\u9519\u8BEF\u65F6\u7684\u56FE\u7247 | \nstring | \n- | \n
preLoad | \n\u9884\u52A0\u8F7D\u9AD8\u5EA6\u7684\u6BD4\u4F8B | \nnumber | \n- | \n
attempt | \n\u5C1D\u8BD5\u6B21\u6570 | \nnumber | \n3 | \n
listenEvents | \n\u76D1\u542C\u7684\u4E8B\u4EF6 | \nstring[] | \nscroll \u7B49 | \n
adapter | \n\u9002\u914D\u5668 | \nobject | \n- | \n
filter | \n\u56FE\u7247 URL \u8FC7\u6EE4 | \nobject | \n- | \n
lazyComponent | \n\u662F\u5426\u80FD\u61D2\u52A0\u8F7D\u6A21\u5757 | \nboolean | \nfalse | \n
\n\n\u66F4\u591A\u5185\u5BB9\u8BF7\u53C2\u7167\uFF1Avue-lazyload \u5B98\u65B9\u6587\u6863
\n
\u7531\u4E8E Lazyload \u7EC4\u4EF6\u5728\u6CE8\u518C\u65F6\u53EF\u4EE5\u4F20\u5165\u4E00\u4E9B\u914D\u7F6E\u9879\uFF0C\u6240\u4EE5\u6211\u4EEC\u4E0D\u4F1A\u81EA\u52A8\u6CE8\u518C Lazyload \u7EC4\u4EF6\uFF0C\u9700\u8981\u624B\u52A8\u8FDB\u884C\u6CE8\u518C\uFF1A
\nconst app = Vue.createApp();\n\napp.use(vant.Lazyload, {\n lazyComponent: true,\n});\n
\n\u5F53\u9875\u9762\u9700\u8981\u52A0\u8F7D\u5927\u91CF\u5185\u5BB9\u65F6\uFF0C\u4F7F\u7528\u61D2\u52A0\u8F7D\u53EF\u4EE5\u5B9E\u73B0\u5EF6\u8FDF\u52A0\u8F7D\u9875\u9762\u53EF\u89C6\u533A\u57DF\u5916\u7684\u5185\u5BB9\uFF0C\u4ECE\u800C\u4F7F\u9875\u9762\u52A0\u8F7D\u66F4\u6D41\u7545\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nLazyload
\u662F Vue
\u6307\u4EE4\uFF0C\u4F7F\u7528\u524D\u9700\u8981\u5BF9\u6307\u4EE4\u8FDB\u884C\u6CE8\u518C\u3002
import { createApp } from 'vue';\nimport { Lazyload } from 'vant';\n\nconst app = createApp();\napp.use(Lazyload);\n\n// \u6CE8\u518C\u65F6\u53EF\u4EE5\u914D\u7F6E\u989D\u5916\u7684\u9009\u9879\napp.use(Lazyload, {\n lazyComponent: true,\n});\n
\n\u5C06 v-lazy
\u6307\u4EE4\u7684\u503C\u8BBE\u7F6E\u4E3A\u4F60\u9700\u8981\u61D2\u52A0\u8F7D\u7684\u56FE\u7247\u3002
<img v-for="img in imageList" v-lazy="img" />\n
\nexport default {\n setup() {\n return {\n imageList: [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n ],\n };\n },\n};\n
\n\u548C\u56FE\u7247\u61D2\u52A0\u8F7D\u4E0D\u540C\uFF0C\u80CC\u666F\u56FE\u61D2\u52A0\u8F7D\u9700\u8981\u4F7F\u7528 v-lazy:background-image
\uFF0C\u503C\u8BBE\u7F6E\u4E3A\u80CC\u666F\u56FE\u7247\u7684\u5730\u5740\uFF0C\u9700\u8981\u6CE8\u610F\u7684\u662F\u5FC5\u987B\u58F0\u660E\u5BB9\u5668\u9AD8\u5EA6\u3002
<div v-for="img in imageList" v-lazy:background-image="img" />\n
\n\u5C06\u9700\u8981\u61D2\u52A0\u8F7D\u7684\u7EC4\u4EF6\u653E\u5728 lazy-component
\u6807\u7B7E\u4E2D\uFF0C\u5373\u53EF\u5B9E\u73B0\u7EC4\u4EF6\u61D2\u52A0\u8F7D\u3002
// \u6CE8\u518C\u65F6\u8BBE\u7F6E`lazyComponent`\u9009\u9879\napp.use(Lazyload, {\n lazyComponent: true,\n});\n
\n<lazy-component>\n <img v-for="img in imageList" v-lazy="img" />\n</lazy-component>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
loading | \n\u52A0\u8F7D\u65F6\u7684\u56FE\u7247 | \nstring | \n- | \n
error | \n\u9519\u8BEF\u65F6\u7684\u56FE\u7247 | \nstring | \n- | \n
preload | \n\u9884\u52A0\u8F7D\u9AD8\u5EA6\u7684\u6BD4\u4F8B | \nstring | \n- | \n
attempt | \n\u5C1D\u8BD5\u6B21\u6570 | \nnumber | \n3 | \n
listenEvents | \n\u76D1\u542C\u7684\u4E8B\u4EF6 | \nstring[] | \nscroll \u7B49 | \n
adapter | \n\u9002\u914D\u5668 | \nobject | \n- | \n
filter | \n\u56FE\u7247 URL \u8FC7\u6EE4 | \nobject | \n- | \n
lazyComponent | \n\u662F\u5426\u80FD\u61D2\u52A0\u8F7D\u6A21\u5757 | \nboolean | \nfalse | \n
\n\n\u66F4\u591A\u5185\u5BB9\u8BF7\u53C2\u7167\uFF1Avue-lazyload \u5B98\u65B9\u6587\u6863
\n
\u7531\u4E8E Lazyload \u7EC4\u4EF6\u5728\u6CE8\u518C\u65F6\u53EF\u4EE5\u4F20\u5165\u4E00\u4E9B\u914D\u7F6E\u9879\uFF0C\u6240\u4EE5\u6211\u4EEC\u4E0D\u4F1A\u81EA\u52A8\u6CE8\u518C Lazyload \u7EC4\u4EF6\uFF0C\u9700\u8981\u624B\u52A8\u8FDB\u884C\u6CE8\u518C\uFF1A
\nconst app = Vue.createApp();\n\napp.use(vant.Lazyload, {\n lazyComponent: true,\n});\n
\nField component let users enter and edit text.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Field, CellGroup } from 'vant';\n\nconst app = createApp();\napp.use(Field);\napp.use(CellGroup);\n
\nThe value of field is bound with v-model.
\n<van-cell-group inset>\n <van-field v-model="value" label="Label" placeholder="Text" />\n</van-cell-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref('');\n return { value };\n },\n};\n
\nUse type
prop to custom different type fields.
<van-cell-group inset>\n <van-field v-model="text" label="Text" />\n <van-field v-model="tel" type="tel" label="Phone" />\n <van-field v-model="digit" type="digit" label="Digit" />\n <van-field v-model="number" type="number" label="Number" />\n <van-field v-model="password" type="password" label="Password" />\n</van-cell-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const tel = ref('');\n const text = ref('');\n const digit = ref('');\n const number = ref('');\n const password = ref('');\n\n return { tel, text, digit, number, password };\n },\n};\n
\n<van-cell-group inset>\n <van-field label="Text" model-value="Input Readonly" readonly />\n <van-field label="Text" model-value="Input Disabled" disabled />\n</van-cell-group>\n
\n<van-cell-group inset>\n <van-field\n v-model="value1"\n label="Text"\n left-icon="smile-o"\n right-icon="warning-o"\n placeholder="Show Icon"\n />\n <van-field\n v-model="value2"\n clearable\n label="Text"\n left-icon="music-o"\n placeholder="Show Clear Icon"\n />\n</van-cell-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value1 = ref('');\n const value2 = ref('123');\n return {\n value1,\n value2,\n };\n },\n};\n
\nUse the required
prop to display a required asterisk.
<van-cell-group inset>\n <van-field\n v-model="username"\n required\n label="Username"\n placeholder="Username"\n />\n <van-field v-model="phone" required label="Phone" placeholder="Phone" />\n</van-cell-group>\n
\nPlease note that the required
prop is only used for controlling the style. For form validation, you need to use the rule.required
option to control the validation logic.
You can set required="auto"
on the Form component, and all the fields inside the Form will automatically display the asterisk based on the rule.required
option.
<van-form required="auto">\n <van-field\n v-model="username"\n :rules="[{ required: true }]"\n label="Username"\n placeholder="Username"\n />\n <van-field\n v-model="phone"\n :rules="[{ required: false }]"\n label="Phone"\n placeholder="Phone"\n />\n</van-form>\n
\nUse error
or error-message
to show error info.
<van-cell-group inset>\n <van-field v-model="username" error label="Username" placeholder="Username" />\n <van-field\n v-model="phone"\n label="Phone"\n placeholder="Phone"\n error-message="Invalid phone"\n />\n</van-cell-group>\n
\nUse button slot to insert button.
\n<van-cell-group inset>\n <van-field v-model="sms" center clearable label="SMS" placeholder="SMS">\n <template #button>\n <van-button size="small" type="primary">Send SMS</van-button>\n </template>\n </van-field>\n</van-cell-group>\n
\nUse formatter
prop to format the input value.
<van-cell-group inset>\n <van-field\n v-model="value1"\n label="Text"\n :formatter="formatter"\n placeholder="Format On Change"\n />\n <van-field\n v-model="value2"\n label="Text"\n :formatter="formatter"\n format-trigger="onBlur"\n placeholder="Format On Blur"\n />\n</van-cell-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value1 = ref('');\n const value2 = ref('');\n const formatter = (value) => value.replace(/\\d/g, '');\n\n return {\n value1,\n value2,\n formatter,\n };\n },\n};\n
\nTextarea Field can be auto resize when has autosize
prop.
<van-cell-group inset>\n <van-field\n v-model="message"\n label="Message"\n type="textarea"\n placeholder="Message"\n rows="1"\n autosize\n />\n</van-cell-group>\n
\n<van-cell-group inset>\n <van-field\n v-model="message"\n rows="2"\n autosize\n label="Message"\n type="textarea"\n maxlength="50"\n placeholder="Message"\n show-word-limit\n />\n</van-cell-group>\n
\nUse input-align
prop to align the input value.
<van-cell-group inset>\n <van-field\n v-model="value"\n label="Text"\n placeholder="Input Align Right"\n input-align="right"\n />\n</van-cell-group>\n
\nUse label-align
prop to align the input value, can be set to center
, right
or top
.
<van-cell-group inset>\n <van-field\n v-model="value"\n label="Label"\n placeholder="Align Top"\n label-align="top"\n />\n <van-field\n v-model="value2"\n label="Label"\n placeholder="Align Left"\n label-align="left"\n />\n <van-field\n v-model="value3"\n label="Label"\n placeholder="Align Center"\n label-align="center"\n />\n <van-field\n v-model="value4"\n label="Label"\n placeholder="Align Right"\n label-align="right"\n />\n</van-cell-group>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nInput value | \nnumber | string | \n- | \n
label | \nLeft side label | \nstring | \n- | \n
name | \nAs the identifier when submitting the form | \nstring | \n- | \n
id | \nInput id, the for attribute of the label also will be set | \nstring | \nvan-field-n-input | \n
type | \nInput type, support all native types and digit type | \nFieldType | \ntext | \n
size | \nSize, can be set to large normal | \nstring | \n- | \n
maxlength | \nMax length of value | \nnumber | string | \n- | \n
placeholder | \nInput placeholder | \nstring | \n- | \n
border | \nWhether to show inner border | \nboolean | \ntrue | \n
disabled | \nWhether to disable field | \nboolean | \nfalse | \n
readonly | \nWhether to be readonly | \nboolean | \nfalse | \n
colon | \nWhether to display colon after label | \nboolean | \nfalse | \n
required | \nWhether to show required mark | \nboolean | \'auto\' | \nnull | \n
center | \nWhether to center content vertically | \nboolean | \ntrue | \n
clearable | \nWhether to be clearable | \nboolean | \nfalse | \n
clear-icon | \nClear icon name | \nstring | \nclear | \n
clear-trigger | \nWhen to display the clear icon, always means to display the icon when value is not empty, focus means to display the icon when input is focused | \nFieldClearTrigger | \nfocus | \n
clickable | \nWhether to show click feedback when clicked | \nboolean | \nfalse | \n
is-link | \nWhether to show link icon | \nboolean | \nfalse | \n
autofocus | \nWhether to auto focus, unsupported in iOS | \nboolean | \nfalse | \n
show-word-limit | \nWhether to show word limit, need to set the maxlength prop | \nboolean | \nfalse | \n
error | \nWhether to mark the input content in red | \nboolean | \nfalse | \n
error-message | \nError message | \nstring | \n- | \n
error-message-align | \nError message align, can be set to center right | \nFieldTextAlign | \nleft | \n
formatter | \nInput value formatter | \n(val: string) => string | \n- | \n
format-trigger | \nWhen to format value, can be set to onBlur | \nFieldFormatTrigger | \nonChange | \n
arrow-direction | \nCan be set to left up down | \nstring | \nright | \n
label-class | \nLabel className | \nstring | Array | object | \n- | \n
label-width | \nLabel width | \nnumber | string | \n6.2em | \n
label-align | \nLabel align, can be set to center right top | \nFieldTextAlign | \nleft | \n
input-align | \nInput align, can be set to center right | \nFieldTextAlign | \nleft | \n
autosize | \nTextarea auto resize, can accept an object, e.g. { maxHeight: 100, minHeight: 50 } | \nboolean | FieldAutosizeConfig | \nfalse | \n
left-icon | \nLeft side icon name | \nstring | \n- | \n
right-icon | \nRight side icon name | \nstring | \n- | \n
icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
rules | \nForm validation rules | \nFieldRule[] | \n- | \n
autocomplete | \nHTML native attribute, see MDN - autocomplete | \nstring | \n- | \n
autocapitalize v4.6.2 | \nHTML native attribute, see MDN - autocapitalize | \nstring | \n- | \n
enterkeyhint | \nHTML native attribute, see MDN - enterkeyhint | \nstring | \n- | \n
spellcheck v4.6.2 | \nHTML native attribute, see MDN - spellcheck | \nboolean | \n- | \n
autocorrect v4.6.2 | \nSafari only, see MDN - autocorrect | \nstring | \n- | \n
Event | \nDescription | \nArguments | \n
---|---|---|
update:model-value | \nEmitted when input value changed | \nvalue: string | \n
focus | \nEmitted when input is focused | \nevent: Event | \n
blur | \nEmitted when input is blurred | \nevent: Event | \n
clear | \nEmitted when the clear icon is clicked | \nevent: MouseEvent | \n
click | \nEmitted when component is clicked | \nevent: MouseEvent | \n
click-input | \nEmitted when the input is clicked | \nevent: MouseEvent | \n
click-left-icon | \nEmitted when the left icon is clicked | \nevent: MouseEvent | \n
click-right-icon | \nEmitted when the right icon is clicked | \nevent: MouseEvent | \n
start-validate | \nEmitted when start validation | \n- | \n
end-validate | \nEmitted when end validation | \n{ status: string, message: string } | \n
Use ref to get Field instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
focus | \nTrigger input focus | \n- | \n- | \n
blur | \nTrigger input blur | \n- | \n- | \n
The component exports the following type definitions:
\nimport type {\n FieldType,\n FieldRule,\n FieldProps,\n FieldInstance,\n FieldTextAlign,\n FieldRuleMessage,\n FieldClearTrigger,\n FieldFormatTrigger,\n FieldRuleValidator,\n FieldRuleFormatter,\n FieldValidateError,\n FieldAutosizeConfig,\n FieldValidateTrigger,\n FieldValidationStatus,\n} from 'vant';\n
\nFieldInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { FieldInstance } from 'vant';\n\nconst fieldRef = ref<FieldInstance>();\n\nfieldRef.value?.focus();\n
\nName | \nDescription | \nSlotProps | \n
---|---|---|
label | \nCustom label | \n- | \n
input | \nCustom input | \n- | \n
left-icon | \nCustom left icon | \n- | \n
right-icon | \nCustom right icon | \n- | \n
button | \nInsert button | \n- | \n
error-message | \nCustom error message | \n{ message: string } | \n
extra | \nCustom content on the right | \n- | \n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-field-label-width | \n6.2em | \n- | \n
--van-field-label-color | \nvar(--van-text-color) | \n- | \n
--van-field-label-margin-right | \nvar(--van-padding-sm) | \n- | \n
--van-field-input-text-color | \nvar(--van-text-color) | \n- | \n
--van-field-input-error-text-color | \nvar(--van-danger-color) | \n- | \n
--van-field-input-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-field-placeholder-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-field-icon-size | \n18px | \n- | \n
--van-field-clear-icon-size | \n18px | \n- | \n
--van-field-clear-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-field-right-icon-color | \nvar(--van-gray-6) | \n- | \n
--van-field-error-message-color | \nvar(--van-danger-color) | \n- | \n
--van-field-error-message-font-size | \n12px | \n- | \n
--van-field-text-area-min-height | \n60px | \n- | \n
--van-field-word-limit-color | \nvar(--van-gray-7) | \n- | \n
--van-field-word-limit-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-field-word-limit-line-height | \n16px | \n- | \n
--van-field-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-field-required-mark-color | \nvar(--van-red) | \n- | \n
Field component let users enter and edit text.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Field, CellGroup } from 'vant';\n\nconst app = createApp();\napp.use(Field);\napp.use(CellGroup);\n
\nThe value of field is bound with v-model.
\n<van-cell-group inset>\n <van-field v-model="value" label="Label" placeholder="Text" />\n</van-cell-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref('');\n return { value };\n },\n};\n
\nUse type
prop to custom different type fields.
<van-cell-group inset>\n <van-field v-model="text" label="Text" />\n <van-field v-model="tel" type="tel" label="Phone" />\n <van-field v-model="digit" type="digit" label="Digit" />\n <van-field v-model="number" type="number" label="Number" />\n <van-field v-model="password" type="password" label="Password" />\n</van-cell-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const tel = ref('');\n const text = ref('');\n const digit = ref('');\n const number = ref('');\n const password = ref('');\n\n return { tel, text, digit, number, password };\n },\n};\n
\n<van-cell-group inset>\n <van-field label="Text" model-value="Input Readonly" readonly />\n <van-field label="Text" model-value="Input Disabled" disabled />\n</van-cell-group>\n
\n<van-cell-group inset>\n <van-field\n v-model="value1"\n label="Text"\n left-icon="smile-o"\n right-icon="warning-o"\n placeholder="Show Icon"\n />\n <van-field\n v-model="value2"\n clearable\n label="Text"\n left-icon="music-o"\n placeholder="Show Clear Icon"\n />\n</van-cell-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value1 = ref('');\n const value2 = ref('123');\n return {\n value1,\n value2,\n };\n },\n};\n
\nUse the required
prop to display a required asterisk.
<van-cell-group inset>\n <van-field\n v-model="username"\n required\n label="Username"\n placeholder="Username"\n />\n <van-field v-model="phone" required label="Phone" placeholder="Phone" />\n</van-cell-group>\n
\nPlease note that the required
prop is only used for controlling the style. For form validation, you need to use the rule.required
option to control the validation logic.
You can set required="auto"
on the Form component, and all the fields inside the Form will automatically display the asterisk based on the rule.required
option.
<van-form required="auto">\n <van-field\n v-model="username"\n :rules="[{ required: true }]"\n label="Username"\n placeholder="Username"\n />\n <van-field\n v-model="phone"\n :rules="[{ required: false }]"\n label="Phone"\n placeholder="Phone"\n />\n</van-form>\n
\nUse error
or error-message
to show error info.
<van-cell-group inset>\n <van-field v-model="username" error label="Username" placeholder="Username" />\n <van-field\n v-model="phone"\n label="Phone"\n placeholder="Phone"\n error-message="Invalid phone"\n />\n</van-cell-group>\n
\nUse button slot to insert button.
\n<van-cell-group inset>\n <van-field v-model="sms" center clearable label="SMS" placeholder="SMS">\n <template #button>\n <van-button size="small" type="primary">Send SMS</van-button>\n </template>\n </van-field>\n</van-cell-group>\n
\nUse formatter
prop to format the input value.
<van-cell-group inset>\n <van-field\n v-model="value1"\n label="Text"\n :formatter="formatter"\n placeholder="Format On Change"\n />\n <van-field\n v-model="value2"\n label="Text"\n :formatter="formatter"\n format-trigger="onBlur"\n placeholder="Format On Blur"\n />\n</van-cell-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value1 = ref('');\n const value2 = ref('');\n const formatter = (value) => value.replace(/\\d/g, '');\n\n return {\n value1,\n value2,\n formatter,\n };\n },\n};\n
\nTextarea Field can be auto resize when has autosize
prop.
<van-cell-group inset>\n <van-field\n v-model="message"\n label="Message"\n type="textarea"\n placeholder="Message"\n rows="1"\n autosize\n />\n</van-cell-group>\n
\n<van-cell-group inset>\n <van-field\n v-model="message"\n rows="2"\n autosize\n label="Message"\n type="textarea"\n maxlength="50"\n placeholder="Message"\n show-word-limit\n />\n</van-cell-group>\n
\nUse input-align
prop to align the input value.
<van-cell-group inset>\n <van-field\n v-model="value"\n label="Text"\n placeholder="Input Align Right"\n input-align="right"\n />\n</van-cell-group>\n
\nUse label-align
prop to align the input value, can be set to center
, right
or top
.
<van-cell-group inset>\n <van-field\n v-model="value"\n label="Label"\n placeholder="Align Top"\n label-align="top"\n />\n <van-field\n v-model="value2"\n label="Label"\n placeholder="Align Left"\n label-align="left"\n />\n <van-field\n v-model="value3"\n label="Label"\n placeholder="Align Center"\n label-align="center"\n />\n <van-field\n v-model="value4"\n label="Label"\n placeholder="Align Right"\n label-align="right"\n />\n</van-cell-group>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nInput value | \nnumber | string | \n- | \n
label | \nLeft side label | \nstring | \n- | \n
name | \nAs the identifier when submitting the form | \nstring | \n- | \n
id | \nInput id, the for attribute of the label also will be set | \nstring | \nvan-field-n-input | \n
type | \nInput type, support all native types and digit type | \nFieldType | \ntext | \n
size | \nSize, can be set to large normal | \nstring | \n- | \n
maxlength | \nMax length of value | \nnumber | string | \n- | \n
placeholder | \nInput placeholder | \nstring | \n- | \n
border | \nWhether to show inner border | \nboolean | \ntrue | \n
disabled | \nWhether to disable field | \nboolean | \nfalse | \n
readonly | \nWhether to be readonly | \nboolean | \nfalse | \n
colon | \nWhether to display colon after label | \nboolean | \nfalse | \n
required | \nWhether to show required mark | \nboolean | \'auto\' | \nnull | \n
center | \nWhether to center content vertically | \nboolean | \ntrue | \n
clearable | \nWhether to be clearable | \nboolean | \nfalse | \n
clear-icon | \nClear icon name | \nstring | \nclear | \n
clear-trigger | \nWhen to display the clear icon, always means to display the icon when value is not empty, focus means to display the icon when input is focused | \nFieldClearTrigger | \nfocus | \n
clickable | \nWhether to show click feedback when clicked | \nboolean | \nfalse | \n
is-link | \nWhether to show link icon | \nboolean | \nfalse | \n
autofocus | \nWhether to auto focus, unsupported in iOS | \nboolean | \nfalse | \n
show-word-limit | \nWhether to show word limit, need to set the maxlength prop | \nboolean | \nfalse | \n
error | \nWhether to mark the input content in red | \nboolean | \nfalse | \n
error-message | \nError message | \nstring | \n- | \n
error-message-align | \nError message align, can be set to center right | \nFieldTextAlign | \nleft | \n
formatter | \nInput value formatter | \n(val: string) => string | \n- | \n
format-trigger | \nWhen to format value, can be set to onBlur | \nFieldFormatTrigger | \nonChange | \n
arrow-direction | \nCan be set to left up down | \nstring | \nright | \n
label-class | \nLabel className | \nstring | Array | object | \n- | \n
label-width | \nLabel width | \nnumber | string | \n6.2em | \n
label-align | \nLabel align, can be set to center right top | \nFieldTextAlign | \nleft | \n
input-align | \nInput align, can be set to center right | \nFieldTextAlign | \nleft | \n
autosize | \nTextarea auto resize, can accept an object, e.g. { maxHeight: 100, minHeight: 50 } | \nboolean | FieldAutosizeConfig | \nfalse | \n
left-icon | \nLeft side icon name | \nstring | \n- | \n
right-icon | \nRight side icon name | \nstring | \n- | \n
icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
rules | \nForm validation rules | \nFieldRule[] | \n- | \n
autocomplete | \nHTML native attribute, see MDN - autocomplete | \nstring | \n- | \n
autocapitalize v4.6.2 | \nHTML native attribute, see MDN - autocapitalize | \nstring | \n- | \n
enterkeyhint | \nHTML native attribute, see MDN - enterkeyhint | \nstring | \n- | \n
spellcheck v4.6.2 | \nHTML native attribute, see MDN - spellcheck | \nboolean | \n- | \n
autocorrect v4.6.2 | \nSafari only, see MDN - autocorrect | \nstring | \n- | \n
Event | \nDescription | \nArguments | \n
---|---|---|
update:model-value | \nEmitted when input value changed | \nvalue: string | \n
focus | \nEmitted when input is focused | \nevent: Event | \n
blur | \nEmitted when input is blurred | \nevent: Event | \n
clear | \nEmitted when the clear icon is clicked | \nevent: MouseEvent | \n
click | \nEmitted when component is clicked | \nevent: MouseEvent | \n
click-input | \nEmitted when the input is clicked | \nevent: MouseEvent | \n
click-left-icon | \nEmitted when the left icon is clicked | \nevent: MouseEvent | \n
click-right-icon | \nEmitted when the right icon is clicked | \nevent: MouseEvent | \n
start-validate | \nEmitted when start validation | \n- | \n
end-validate | \nEmitted when end validation | \n{ status: string, message: string } | \n
Use ref to get Field instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
focus | \nTrigger input focus | \n- | \n- | \n
blur | \nTrigger input blur | \n- | \n- | \n
The component exports the following type definitions:
\nimport type {\n FieldType,\n FieldRule,\n FieldProps,\n FieldInstance,\n FieldTextAlign,\n FieldRuleMessage,\n FieldClearTrigger,\n FieldFormatTrigger,\n FieldRuleValidator,\n FieldRuleFormatter,\n FieldValidateError,\n FieldAutosizeConfig,\n FieldValidateTrigger,\n FieldValidationStatus,\n} from 'vant';\n
\nFieldInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { FieldInstance } from 'vant';\n\nconst fieldRef = ref<FieldInstance>();\n\nfieldRef.value?.focus();\n
\nName | \nDescription | \nSlotProps | \n
---|---|---|
label | \nCustom label | \n- | \n
input | \nCustom input | \n- | \n
left-icon | \nCustom left icon | \n- | \n
right-icon | \nCustom right icon | \n- | \n
button | \nInsert button | \n- | \n
error-message | \nCustom error message | \n{ message: string } | \n
extra | \nCustom content on the right | \n- | \n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-field-label-width | \n6.2em | \n- | \n
--van-field-label-color | \nvar(--van-text-color) | \n- | \n
--van-field-label-margin-right | \nvar(--van-padding-sm) | \n- | \n
--van-field-input-text-color | \nvar(--van-text-color) | \n- | \n
--van-field-input-error-text-color | \nvar(--van-danger-color) | \n- | \n
--van-field-input-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-field-placeholder-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-field-icon-size | \n18px | \n- | \n
--van-field-clear-icon-size | \n18px | \n- | \n
--van-field-clear-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-field-right-icon-color | \nvar(--van-gray-6) | \n- | \n
--van-field-error-message-color | \nvar(--van-danger-color) | \n- | \n
--van-field-error-message-font-size | \n12px | \n- | \n
--van-field-text-area-min-height | \n60px | \n- | \n
--van-field-word-limit-color | \nvar(--van-gray-7) | \n- | \n
--van-field-word-limit-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-field-word-limit-line-height | \n16px | \n- | \n
--van-field-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-field-required-mark-color | \nvar(--van-red) | \n- | \n
\u611F\u8C22\u4F60\u4F7F\u7528 Vant\u3002
\n\u4EE5\u4E0B\u662F\u5173\u4E8E\u5411 Vant \u63D0\u4EA4\u53CD\u9988\u6216\u4EE3\u7801\u7684\u6307\u5357\u3002\u5728\u5411 Vant \u63D0\u4EA4 issue \u6216\u8005 PR \u4E4B\u524D\uFF0C\u8BF7\u5148\u82B1\u51E0\u5206\u949F\u65F6\u95F4\u9605\u8BFB\u4EE5\u4E0B\u5185\u5BB9\u3002
\n\u5728\u8FDB\u884C\u672C\u5730\u5F00\u53D1\u524D\uFF0C\u8BF7\u5148\u786E\u4FDD\u4F60\u7684\u5F00\u53D1\u73AF\u5883\u4E2D\u5B89\u88C5\u4E86 Node.js >= 18\u3002
\n\u6309\u7167\u4E0B\u9762\u7684\u6B65\u9AA4\u64CD\u4F5C\uFF0C\u5373\u53EF\u5728\u672C\u5730\u5F00\u53D1 Vant \u7EC4\u4EF6\u3002
\n# \u514B\u9686\u4ED3\u5E93\ngit clone git@github.com:vant-ui/vant.git\n\n# \u542F\u7528 pnpm \u5305\u7BA1\u7406\u5668\ncorepack enable\n\n# \u5B89\u88C5\u4F9D\u8D56\npnpm i\n\n# \u8FDB\u5165\u5F00\u53D1\u6A21\u5F0F\uFF0C\u6D4F\u89C8\u5668\u8BBF\u95EE localhost\npnpm dev\n
\n\u4ED3\u5E93\u7684\u4E0D\u540C\u5206\u652F\u5BF9\u5E94\u4E0D\u540C\u7684 Vant \u7248\u672C\uFF0C\u8BF7\u5207\u6362\u5230\u5BF9\u5E94\u5206\u652F\u8FDB\u884C\u5F00\u53D1\uFF1A
\n\u5982\u679C GitHub \u514B\u9686\u901F\u5EA6\u8F83\u6162\uFF0C\u4F60\u4E5F\u53EF\u4EE5\u76F4\u63A5\u514B\u9686 Vant \u5728 gitee \u4E0A\u7684\u955C\u50CF\u4ED3\u5E93\uFF1A
\ngit clone git@gitee.com:vant-contrib/vant.git\n
\n\u955C\u50CF\u4ED3\u5E93\u4EC5\u7528\u4E8E\u52A0\u5FEB\u56FD\u5185\u7684\u8BBF\u95EE\u901F\u5EA6\uFF0C\u8BF7\u52FF\u5728\u955C\u50CF\u4ED3\u5E93\u4E2D\u63D0 issue \u548C Pull Request\u3002
\nVant \u91C7\u7528 monorepo \u8FDB\u884C\u4EE3\u7801\u7BA1\u7406\uFF0C\u6240\u6709\u5B50\u5305\u5728 packages
\u76EE\u5F55\u4E0B:
root\n\u2514\u2500 packages\n \u251C\u2500 vant # \u7EC4\u4EF6\u5E93\n \u251C\u2500 vant-cli # \u811A\u624B\u67B6\n \u251C\u2500 vant-icons # \u56FE\u6807\u5E93\n \u251C\u2500 vant-use # Composition API\n \u2514\u2500 .... # \u5176\u4ED6\u5468\u8FB9 npm \u5305\n
\n\u5176\u4E2D\uFF0Cpackages/vant
\u76EE\u5F55\u4E3A\u7EC4\u4EF6\u5E93\u7684\u6838\u5FC3\u4EE3\u7801\uFF1A
vant\n\u251C\u2500 docs # \u6587\u6863\n\u251C\u2500 src # \u7EC4\u4EF6\u6E90\u4EE3\u7801\n\u251C\u2500 test # \u5355\u6D4B\u5DE5\u5177\u7C7B\n\u2514\u2500 vant.config.mjs # \u6587\u6863\u7F51\u7AD9\u914D\u7F6E\n
\npackages/vant/src
\u76EE\u5F55\u5305\u542B\u5404\u4E2A\u7EC4\u4EF6\u7684\u6E90\u7801\uFF0C\u6BCF\u4E2A\u6587\u4EF6\u5939\u5BF9\u5E94\u4E00\u4E2A\u7EC4\u4EF6\uFF1A
src\n\u2514\u2500 button\n \u251C\u2500 demo # \u793A\u4F8B\u4EE3\u7801\n \u251C\u2500 test # \u5355\u5143\u6D4B\u8BD5\n \u251C\u2500 Component.tsx # \u7EC4\u4EF6\n \u251C\u2500 index.ts # \u7EC4\u4EF6\u5165\u53E3\n \u251C\u2500 index.less # \u6837\u5F0F\n \u251C\u2500 README.md # \u82F1\u6587\u6587\u6863\n \u2514\u2500 README.zh-CN.md # \u4E2D\u6587\u6587\u6863\n
\n\u5728\u7F16\u5199\u4EE3\u7801\u65F6\uFF0C\u8BF7\u6CE8\u610F\uFF1A
\nasync
, await
.\u5982\u679C\u4F60\u662F\u7B2C\u4E00\u6B21\u5728 GitHub \u4E0A\u63D0 Pull Request \uFF0C\u53EF\u4EE5\u9605\u8BFB\u4E0B\u9762\u8FD9\u4E24\u7BC7\u6587\u7AE0\u6765\u5B66\u4E60\uFF1A
\n\n\u5728\u63D0\u4EA4 Pull Request \u65F6\uFF0C\u8BF7\u6CE8\u610F\uFF1A
\nfeature/button_color
\u3002Pull Request \u7684\u6807\u9898\u5E94\u8BE5\u9075\u5FAA\u4EE5\u4E0B\u683C\u5F0F\uFF1A
\ntype(ComponentName?)\uFF1Acommit message\n
\n\u793A\u4F8B\uFF1A
\n\u53EF\u9009\u7684\u7C7B\u578B\uFF1A
\n\u63D0 Pull Request \u524D\uFF0C\u8BF7\u4F9D\u7167\u4E0B\u9762\u7684\u6D41\u7A0B\u540C\u6B65\u4E3B\u4ED3\u5E93\u7684\u6700\u65B0\u4EE3\u7801\uFF1A
\n# \u6DFB\u52A0\u4E3B\u4ED3\u5E93\u5230 remote\ngit remote add upstream git@github.com:vant-ui/vant.git\n\n# \u62C9\u53D6\u4E3B\u4ED3\u5E93\u6700\u65B0\u4EE3\u7801\ngit fetch upstream\n\n# \u5207\u6362\u81F3 main \u5206\u652F\ngit checkout main\n\n# \u5408\u5E76\u4E3B\u4ED3\u5E93\u4EE3\u7801\ngit merge upstream/main\n
\n\u611F\u8C22\u4F60\u4F7F\u7528 Vant\u3002
\n\u4EE5\u4E0B\u662F\u5173\u4E8E\u5411 Vant \u63D0\u4EA4\u53CD\u9988\u6216\u4EE3\u7801\u7684\u6307\u5357\u3002\u5728\u5411 Vant \u63D0\u4EA4 issue \u6216\u8005 PR \u4E4B\u524D\uFF0C\u8BF7\u5148\u82B1\u51E0\u5206\u949F\u65F6\u95F4\u9605\u8BFB\u4EE5\u4E0B\u5185\u5BB9\u3002
\n\u5728\u8FDB\u884C\u672C\u5730\u5F00\u53D1\u524D\uFF0C\u8BF7\u5148\u786E\u4FDD\u4F60\u7684\u5F00\u53D1\u73AF\u5883\u4E2D\u5B89\u88C5\u4E86 Node.js >= 18\u3002
\n\u6309\u7167\u4E0B\u9762\u7684\u6B65\u9AA4\u64CD\u4F5C\uFF0C\u5373\u53EF\u5728\u672C\u5730\u5F00\u53D1 Vant \u7EC4\u4EF6\u3002
\n# \u514B\u9686\u4ED3\u5E93\ngit clone git@github.com:vant-ui/vant.git\n\n# \u542F\u7528 pnpm \u5305\u7BA1\u7406\u5668\ncorepack enable\n\n# \u5B89\u88C5\u4F9D\u8D56\npnpm i\n\n# \u8FDB\u5165\u5F00\u53D1\u6A21\u5F0F\uFF0C\u6D4F\u89C8\u5668\u8BBF\u95EE localhost\npnpm dev\n
\n\u4ED3\u5E93\u7684\u4E0D\u540C\u5206\u652F\u5BF9\u5E94\u4E0D\u540C\u7684 Vant \u7248\u672C\uFF0C\u8BF7\u5207\u6362\u5230\u5BF9\u5E94\u5206\u652F\u8FDB\u884C\u5F00\u53D1\uFF1A
\n\u5982\u679C GitHub \u514B\u9686\u901F\u5EA6\u8F83\u6162\uFF0C\u4F60\u4E5F\u53EF\u4EE5\u76F4\u63A5\u514B\u9686 Vant \u5728 gitee \u4E0A\u7684\u955C\u50CF\u4ED3\u5E93\uFF1A
\ngit clone git@gitee.com:vant-contrib/vant.git\n
\n\u955C\u50CF\u4ED3\u5E93\u4EC5\u7528\u4E8E\u52A0\u5FEB\u56FD\u5185\u7684\u8BBF\u95EE\u901F\u5EA6\uFF0C\u8BF7\u52FF\u5728\u955C\u50CF\u4ED3\u5E93\u4E2D\u63D0 issue \u548C Pull Request\u3002
\nVant \u91C7\u7528 monorepo \u8FDB\u884C\u4EE3\u7801\u7BA1\u7406\uFF0C\u6240\u6709\u5B50\u5305\u5728 packages
\u76EE\u5F55\u4E0B:
root\n\u2514\u2500 packages\n \u251C\u2500 vant # \u7EC4\u4EF6\u5E93\n \u251C\u2500 vant-cli # \u811A\u624B\u67B6\n \u251C\u2500 vant-icons # \u56FE\u6807\u5E93\n \u251C\u2500 vant-use # Composition API\n \u2514\u2500 .... # \u5176\u4ED6\u5468\u8FB9 npm \u5305\n
\n\u5176\u4E2D\uFF0Cpackages/vant
\u76EE\u5F55\u4E3A\u7EC4\u4EF6\u5E93\u7684\u6838\u5FC3\u4EE3\u7801\uFF1A
vant\n\u251C\u2500 docs # \u6587\u6863\n\u251C\u2500 src # \u7EC4\u4EF6\u6E90\u4EE3\u7801\n\u251C\u2500 test # \u5355\u6D4B\u5DE5\u5177\u7C7B\n\u2514\u2500 vant.config.mjs # \u6587\u6863\u7F51\u7AD9\u914D\u7F6E\n
\npackages/vant/src
\u76EE\u5F55\u5305\u542B\u5404\u4E2A\u7EC4\u4EF6\u7684\u6E90\u7801\uFF0C\u6BCF\u4E2A\u6587\u4EF6\u5939\u5BF9\u5E94\u4E00\u4E2A\u7EC4\u4EF6\uFF1A
src\n\u2514\u2500 button\n \u251C\u2500 demo # \u793A\u4F8B\u4EE3\u7801\n \u251C\u2500 test # \u5355\u5143\u6D4B\u8BD5\n \u251C\u2500 Component.tsx # \u7EC4\u4EF6\n \u251C\u2500 index.ts # \u7EC4\u4EF6\u5165\u53E3\n \u251C\u2500 index.less # \u6837\u5F0F\n \u251C\u2500 README.md # \u82F1\u6587\u6587\u6863\n \u2514\u2500 README.zh-CN.md # \u4E2D\u6587\u6587\u6863\n
\n\u5728\u7F16\u5199\u4EE3\u7801\u65F6\uFF0C\u8BF7\u6CE8\u610F\uFF1A
\nasync
, await
.\u5982\u679C\u4F60\u662F\u7B2C\u4E00\u6B21\u5728 GitHub \u4E0A\u63D0 Pull Request \uFF0C\u53EF\u4EE5\u9605\u8BFB\u4E0B\u9762\u8FD9\u4E24\u7BC7\u6587\u7AE0\u6765\u5B66\u4E60\uFF1A
\n\n\u5728\u63D0\u4EA4 Pull Request \u65F6\uFF0C\u8BF7\u6CE8\u610F\uFF1A
\nfeature/button_color
\u3002Pull Request \u7684\u6807\u9898\u5E94\u8BE5\u9075\u5FAA\u4EE5\u4E0B\u683C\u5F0F\uFF1A
\ntype(ComponentName?)\uFF1Acommit message\n
\n\u793A\u4F8B\uFF1A
\n\u53EF\u9009\u7684\u7C7B\u578B\uFF1A
\n\u63D0 Pull Request \u524D\uFF0C\u8BF7\u4F9D\u7167\u4E0B\u9762\u7684\u6D41\u7A0B\u540C\u6B65\u4E3B\u4ED3\u5E93\u7684\u6700\u65B0\u4EE3\u7801\uFF1A
\n# \u6DFB\u52A0\u4E3B\u4ED3\u5E93\u5230 remote\ngit remote add upstream git@github.com:vant-ui/vant.git\n\n# \u62C9\u53D6\u4E3B\u4ED3\u5E93\u6700\u65B0\u4EE3\u7801\ngit fetch upstream\n\n# \u5207\u6362\u81F3 main \u5206\u652F\ngit checkout main\n\n# \u5408\u5E76\u4E3B\u4ED3\u5E93\u4EE3\u7801\ngit merge upstream/main\n
\n\u5EFA\u7ACB\u7236\u5B50\u7EC4\u4EF6\u4E4B\u95F4\u7684\u5173\u8054\u5173\u7CFB\uFF0C\u8FDB\u884C\u6570\u636E\u901A\u4FE1\u548C\u65B9\u6CD5\u8C03\u7528\uFF0C\u57FA\u4E8E provide
\u548C inject
\u5B9E\u73B0\u3002
\u5728\u7236\u7EC4\u4EF6\u4E2D\u4F7F\u7528 useChildren
\u5173\u8054\u5B50\u7EC4\u4EF6:
import { ref } from 'vue';\nimport { useChildren } from '@vant/use';\n\nconst RELATION_KEY = Symbol('my-relation');\n\nexport default {\n setup() {\n const { linkChildren } = useChildren(RELATION_KEY);\n\n const count = ref(0);\n const add = () => {\n count.value++;\n };\n\n // \u5411\u5B50\u7EC4\u4EF6\u63D0\u4F9B\u6570\u636E\u548C\u65B9\u6CD5\n linkChildren({ add, count });\n },\n};\n
\n\u5728\u5B50\u7EC4\u4EF6\u4E2D\u4F7F\u7528 useParent
\u83B7\u53D6\u7236\u7EC4\u4EF6\u63D0\u4F9B\u7684\u6570\u636E\u548C\u65B9\u6CD5:
import { useParent } from '@vant/use';\n\nexport default {\n setup() {\n const { parent } = useParent(RELATION_KEY);\n\n // \u8C03\u7528\u7236\u7EC4\u4EF6\u63D0\u4F9B\u7684\u6570\u636E\u548C\u65B9\u6CD5\n if (parent) {\n parent.add();\n console.log(parent.count.value); // -> 1\n }\n },\n};\n
\nfunction useParent<T>(key: string | symbol): {\n parent?: T;\n index?: Ref<number>;\n};\n\nfunction useChildren(key: string | symbol): {\n children: ComponentPublicInstance[];\n linkChildren: (value: any) => void;\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
parent | \n\u7236\u7EC4\u4EF6\u63D0\u4F9B\u7684\u503C | \nany | \n
index | \n\u5F53\u524D\u7EC4\u4EF6\u5728\u7236\u7EC4\u4EF6\u7684\u6240\u6709\u5B50\u7EC4\u4EF6\u4E2D\u5BF9\u5E94\u7684\u7D22\u5F15\u4F4D\u7F6E | \nRef<number> | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
children | \n\u5B50\u7EC4\u4EF6\u5217\u8868 | \nComponentPublicInstance[] | \n
linkChildren | \n\u5411\u5B50\u7EC4\u4EF6\u63D0\u4F9B\u503C\u7684\u65B9\u6CD5 | \n(value: any) => void | \n
\u5EFA\u7ACB\u7236\u5B50\u7EC4\u4EF6\u4E4B\u95F4\u7684\u5173\u8054\u5173\u7CFB\uFF0C\u8FDB\u884C\u6570\u636E\u901A\u4FE1\u548C\u65B9\u6CD5\u8C03\u7528\uFF0C\u57FA\u4E8E provide
\u548C inject
\u5B9E\u73B0\u3002
\u5728\u7236\u7EC4\u4EF6\u4E2D\u4F7F\u7528 useChildren
\u5173\u8054\u5B50\u7EC4\u4EF6:
import { ref } from 'vue';\nimport { useChildren } from '@vant/use';\n\nconst RELATION_KEY = Symbol('my-relation');\n\nexport default {\n setup() {\n const { linkChildren } = useChildren(RELATION_KEY);\n\n const count = ref(0);\n const add = () => {\n count.value++;\n };\n\n // \u5411\u5B50\u7EC4\u4EF6\u63D0\u4F9B\u6570\u636E\u548C\u65B9\u6CD5\n linkChildren({ add, count });\n },\n};\n
\n\u5728\u5B50\u7EC4\u4EF6\u4E2D\u4F7F\u7528 useParent
\u83B7\u53D6\u7236\u7EC4\u4EF6\u63D0\u4F9B\u7684\u6570\u636E\u548C\u65B9\u6CD5:
import { useParent } from '@vant/use';\n\nexport default {\n setup() {\n const { parent } = useParent(RELATION_KEY);\n\n // \u8C03\u7528\u7236\u7EC4\u4EF6\u63D0\u4F9B\u7684\u6570\u636E\u548C\u65B9\u6CD5\n if (parent) {\n parent.add();\n console.log(parent.count.value); // -> 1\n }\n },\n};\n
\nfunction useParent<T>(key: string | symbol): {\n parent?: T;\n index?: Ref<number>;\n};\n\nfunction useChildren(key: string | symbol): {\n children: ComponentPublicInstance[];\n linkChildren: (value: any) => void;\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
parent | \n\u7236\u7EC4\u4EF6\u63D0\u4F9B\u7684\u503C | \nany | \n
index | \n\u5F53\u524D\u7EC4\u4EF6\u5728\u7236\u7EC4\u4EF6\u7684\u6240\u6709\u5B50\u7EC4\u4EF6\u4E2D\u5BF9\u5E94\u7684\u7D22\u5F15\u4F4D\u7F6E | \nRef<number> | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
children | \n\u5B50\u7EC4\u4EF6\u5217\u8868 | \nComponentPublicInstance[] | \n
linkChildren | \n\u5411\u5B50\u7EC4\u4EF6\u63D0\u4F9B\u503C\u7684\u65B9\u6CD5 | \n(value: any) => void | \n
\u6309\u94AE\u7528\u4E8E\u89E6\u53D1\u4E00\u4E2A\u64CD\u4F5C\uFF0C\u5982\u63D0\u4EA4\u8868\u5355\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Button } from 'vant';\n\nconst app = createApp();\napp.use(Button);\n
\n\u6309\u94AE\u652F\u6301 default
\u3001primary
\u3001success
\u3001warning
\u3001danger
\u4E94\u79CD\u7C7B\u578B\uFF0C\u9ED8\u8BA4\u4E3A default
\u3002
<van-button type="primary">\u4E3B\u8981\u6309\u94AE</van-button>\n<van-button type="success">\u6210\u529F\u6309\u94AE</van-button>\n<van-button type="default">\u9ED8\u8BA4\u6309\u94AE</van-button>\n<van-button type="warning">\u8B66\u544A\u6309\u94AE</van-button>\n<van-button type="danger">\u5371\u9669\u6309\u94AE</van-button>\n
\n\u901A\u8FC7 plain
\u5C5E\u6027\u5C06\u6309\u94AE\u8BBE\u7F6E\u4E3A\u6734\u7D20\u6309\u94AE\uFF0C\u6734\u7D20\u6309\u94AE\u7684\u6587\u5B57\u4E3A\u6309\u94AE\u989C\u8272\uFF0C\u80CC\u666F\u4E3A\u767D\u8272\u3002
<van-button plain type="primary">\u6734\u7D20\u6309\u94AE</van-button>\n<van-button plain type="success">\u6734\u7D20\u6309\u94AE</van-button>\n
\n\u8BBE\u7F6E hairline
\u5C5E\u6027\u53EF\u4EE5\u5C55\u793A 0.5px \u7684\u7EC6\u8FB9\u6846\u3002
<van-button plain hairline type="primary">\u7EC6\u8FB9\u6846\u6309\u94AE</van-button>\n<van-button plain hairline type="success">\u7EC6\u8FB9\u6846\u6309\u94AE</van-button>\n
\n\u901A\u8FC7 disabled
\u5C5E\u6027\u6765\u7981\u7528\u6309\u94AE\uFF0C\u7981\u7528\u72B6\u6001\u4E0B\u6309\u94AE\u4E0D\u53EF\u70B9\u51FB\u3002
<van-button disabled type="primary">\u7981\u7528\u72B6\u6001</van-button>\n<van-button disabled type="success">\u7981\u7528\u72B6\u6001</van-button>\n
\n\u901A\u8FC7 loading
\u5C5E\u6027\u8BBE\u7F6E\u6309\u94AE\u4E3A\u52A0\u8F7D\u72B6\u6001\uFF0C\u52A0\u8F7D\u72B6\u6001\u4E0B\u9ED8\u8BA4\u4F1A\u9690\u85CF\u6309\u94AE\u6587\u5B57\uFF0C\u53EF\u4EE5\u901A\u8FC7 loading-text
\u8BBE\u7F6E\u52A0\u8F7D\u72B6\u6001\u4E0B\u7684\u6587\u5B57\u3002
<van-button loading type="primary" />\n<van-button loading type="primary" loading-type="spinner" />\n<van-button loading type="success" loading-text="\u52A0\u8F7D\u4E2D..." />\n
\n\u901A\u8FC7 square
\u8BBE\u7F6E\u65B9\u5F62\u6309\u94AE\uFF0C\u901A\u8FC7 round
\u8BBE\u7F6E\u5706\u5F62\u6309\u94AE\u3002
<van-button square type="primary">\u65B9\u5F62\u6309\u94AE</van-button>\n<van-button round type="success">\u5706\u5F62\u6309\u94AE</van-button>\n
\n\u901A\u8FC7 icon
\u5C5E\u6027\u8BBE\u7F6E\u6309\u94AE\u56FE\u6807\uFF0C\u652F\u6301 Icon \u7EC4\u4EF6\u91CC\u7684\u6240\u6709\u56FE\u6807\uFF0C\u4E5F\u53EF\u4EE5\u4F20\u5165\u56FE\u6807 URL\u3002
<van-button icon="plus" type="primary" />\n<van-button icon="plus" type="primary">\u6309\u94AE</van-button>\n<van-button\n icon="https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png"\n type="primary"\n>\n \u6309\u94AE\n</van-button>\n
\n\u652F\u6301 large
\u3001normal
\u3001small
\u3001mini
\u56DB\u79CD\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4\u4E3A normal
\u3002
<van-button type="primary" size="large">\u5927\u53F7\u6309\u94AE</van-button>\n<van-button type="primary" size="normal">\u666E\u901A\u6309\u94AE</van-button>\n<van-button type="primary" size="small">\u5C0F\u578B\u6309\u94AE</van-button>\n<van-button type="primary" size="mini">\u8FF7\u4F60\u6309\u94AE</van-button>\n
\n\u6309\u94AE\u5728\u9ED8\u8BA4\u60C5\u51B5\u4E0B\u4E3A\u884C\u5185\u5757\u7EA7\u5143\u7D20\uFF0C\u901A\u8FC7 block
\u5C5E\u6027\u53EF\u4EE5\u5C06\u6309\u94AE\u7684\u5143\u7D20\u7C7B\u578B\u8BBE\u7F6E\u4E3A\u5757\u7EA7\u5143\u7D20\u3002
<van-button type="primary" block>\u5757\u7EA7\u5143\u7D20</van-button>\n
\n\u53EF\u4EE5\u901A\u8FC7 url
\u5C5E\u6027\u8FDB\u884C URL \u8DF3\u8F6C\uFF0C\u6216\u901A\u8FC7 to
\u5C5E\u6027\u8FDB\u884C\u8DEF\u7531\u8DF3\u8F6C\u3002
<van-button type="primary" url="https://github.com">URL \u8DF3\u8F6C</van-button>\n<van-button type="primary" to="index">\u8DEF\u7531\u8DF3\u8F6C</van-button>\n
\n\u901A\u8FC7 color
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u6309\u94AE\u7684\u989C\u8272\u3002
<van-button color="#7232dd">\u5355\u8272\u6309\u94AE</van-button>\n<van-button color="#7232dd" plain>\u5355\u8272\u6309\u94AE</van-button>\n<van-button color="linear-gradient(to right, #ff6034, #ee0a24)">\n \u6E10\u53D8\u8272\u6309\u94AE\n</van-button>\n
\n\u642D\u914D Button \u548C Swipe \u7EC4\u4EF6\uFF0C\u53EF\u4EE5\u5B9E\u73B0\u5782\u76F4\u6EDA\u52A8\u7684\u52A8\u753B\u6309\u94AE\u6548\u679C\u3002
\n<van-button type="danger" round>\n <van-swipe\n vertical\n class="notice-swipe"\n :autoplay="2000"\n :touchable="false"\n :show-indicators="false"\n >\n <van-swipe-item>\u505A\u4EFB\u52A1</van-swipe-item>\n <van-swipe-item>\u62BD\u5927\u5956</van-swipe-item>\n </van-swipe>\n</van-button>\n\n<style>\n .notice-swipe {\n height: 40px;\n line-height: 40px;\n }\n</style>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
type | \n\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A primary success warning danger | \nstring | \ndefault | \n
size | \n\u5C3A\u5BF8\uFF0C\u53EF\u9009\u503C\u4E3A large small mini | \nstring | \nnormal | \n
text | \n\u6309\u94AE\u6587\u5B57 | \nstring | \n- | \n
color | \n\u6309\u94AE\u989C\u8272\uFF0C\u652F\u6301\u4F20\u5165 linear-gradient \u6E10\u53D8\u8272 | \nstring | \n- | \n
icon | \n\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n- | \n
icon-prefix | \n\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 | \nstring | \nvan-icon | \n
icon-position | \n\u56FE\u6807\u5C55\u793A\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A right | \nstring | \nleft | \n
tag | \n\u6309\u94AE\u6839\u8282\u70B9\u7684 HTML \u6807\u7B7E | \nstring | \nbutton | \n
native-type | \n\u539F\u751F button \u6807\u7B7E\u7684 type \u5C5E\u6027 | \nstring | \nbutton | \n
block | \n\u662F\u5426\u4E3A\u5757\u7EA7\u5143\u7D20 | \nboolean | \nfalse | \n
plain | \n\u662F\u5426\u4E3A\u6734\u7D20\u6309\u94AE | \nboolean | \nfalse | \n
square | \n\u662F\u5426\u4E3A\u65B9\u5F62\u6309\u94AE | \nboolean | \nfalse | \n
round | \n\u662F\u5426\u4E3A\u5706\u5F62\u6309\u94AE | \nboolean | \nfalse | \n
disabled | \n\u662F\u5426\u7981\u7528\u6309\u94AE | \nboolean | \nfalse | \n
hairline | \n\u662F\u5426\u4F7F\u7528 0.5px \u8FB9\u6846 | \nboolean | \nfalse | \n
loading | \n\u662F\u5426\u663E\u793A\u4E3A\u52A0\u8F7D\u72B6\u6001 | \nboolean | \nfalse | \n
loading-text | \n\u52A0\u8F7D\u72B6\u6001\u63D0\u793A\u6587\u5B57 | \nstring | \n- | \n
loading-type | \n\u52A0\u8F7D\u56FE\u6807\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A spinner | \nstring | \ncircular | \n
loading-size | \n\u52A0\u8F7D\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n20px | \n
url | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740 | \nstring | \n- | \n
to | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u76EE\u6807\u8DEF\u7531\u5BF9\u8C61\uFF0C\u7B49\u540C\u4E8E Vue Router \u7684 to \u5C5E\u6027 | \nstring | object | \n- | \n
replace | \n\u662F\u5426\u5728\u8DF3\u8F6C\u65F6\u66FF\u6362\u5F53\u524D\u9875\u9762\u5386\u53F2 | \nboolean | \nfalse | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u6309\u94AE\uFF0C\u4E14\u6309\u94AE\u72B6\u6001\u4E0D\u4E3A\u52A0\u8F7D\u6216\u7981\u7528\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
touchstart | \n\u5F00\u59CB\u89E6\u6478\u6309\u94AE\u65F6\u89E6\u53D1 | \nevent: TouchEvent | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u6309\u94AE\u5185\u5BB9 | \n
icon | \n\u81EA\u5B9A\u4E49\u56FE\u6807 | \n
loading | \n\u81EA\u5B9A\u4E49\u52A0\u8F7D\u56FE\u6807 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n ButtonType,\n ButtonSize,\n ButtonProps,\n ButtonNativeType,\n ButtonIconPosition,\n} from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-button-mini-height | \n24px | \n- | \n
--van-button-mini-padding | \n0 var(--van-padding-base) | \n- | \n
--van-button-mini-font-size | \nvar(--van-font-size-xs) | \n- | \n
--van-button-small-height | \n32px | \n- | \n
--van-button-small-padding | \n0 var(--van-padding-xs) | \n- | \n
--van-button-small-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-button-normal-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-button-normal-padding | \n0 15px | \n- | \n
--van-button-large-height | \n50px | \n- | \n
--van-button-default-height | \n44px | \n- | \n
--van-button-default-line-height | \n1.2 | \n- | \n
--van-button-default-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-button-default-color | \nvar(--van-text-color) | \n- | \n
--van-button-default-background | \nvar(--van-background-2) | \n- | \n
--van-button-default-border-color | \nvar(--van-gray-4) | \n- | \n
--van-button-primary-color | \nvar(--van-white) | \n- | \n
--van-button-primary-background | \nvar(--van-primary-color) | \n- | \n
--van-button-primary-border-color | \nvar(--van-primary-color) | \n- | \n
--van-button-success-color | \nvar(--van-white) | \n- | \n
--van-button-success-background | \nvar(--van-success-color) | \n- | \n
--van-button-success-border-color | \nvar(--van-success-color) | \n- | \n
--van-button-danger-color | \nvar(--van-white) | \n- | \n
--van-button-danger-background | \nvar(--van-danger-color) | \n- | \n
--van-button-danger-border-color | \nvar(--van-danger-color) | \n- | \n
--van-button-warning-color | \nvar(--van-white) | \n- | \n
--van-button-warning-background | \nvar(--van-orange) | \n- | \n
--van-button-warning-border-color | \nvar(--van-orange) | \n- | \n
--van-button-border-width | \nvar(--van-border-width) | \n- | \n
--van-button-radius | \nvar(--van-radius-md) | \n- | \n
--van-button-round-radius | \nvar(--van-radius-max) | \n- | \n
--van-button-plain-background | \nvar(--van-white) | \n- | \n
--van-button-disabled-opacity | \nvar(--van-disabled-opacity) | \n- | \n
--van-button-icon-size | \n1.2em | \n- | \n
--van-button-loading-icon-size | \n20px | \n- | \n
\u6309\u94AE\u7528\u4E8E\u89E6\u53D1\u4E00\u4E2A\u64CD\u4F5C\uFF0C\u5982\u63D0\u4EA4\u8868\u5355\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Button } from 'vant';\n\nconst app = createApp();\napp.use(Button);\n
\n\u6309\u94AE\u652F\u6301 default
\u3001primary
\u3001success
\u3001warning
\u3001danger
\u4E94\u79CD\u7C7B\u578B\uFF0C\u9ED8\u8BA4\u4E3A default
\u3002
<van-button type="primary">\u4E3B\u8981\u6309\u94AE</van-button>\n<van-button type="success">\u6210\u529F\u6309\u94AE</van-button>\n<van-button type="default">\u9ED8\u8BA4\u6309\u94AE</van-button>\n<van-button type="warning">\u8B66\u544A\u6309\u94AE</van-button>\n<van-button type="danger">\u5371\u9669\u6309\u94AE</van-button>\n
\n\u901A\u8FC7 plain
\u5C5E\u6027\u5C06\u6309\u94AE\u8BBE\u7F6E\u4E3A\u6734\u7D20\u6309\u94AE\uFF0C\u6734\u7D20\u6309\u94AE\u7684\u6587\u5B57\u4E3A\u6309\u94AE\u989C\u8272\uFF0C\u80CC\u666F\u4E3A\u767D\u8272\u3002
<van-button plain type="primary">\u6734\u7D20\u6309\u94AE</van-button>\n<van-button plain type="success">\u6734\u7D20\u6309\u94AE</van-button>\n
\n\u8BBE\u7F6E hairline
\u5C5E\u6027\u53EF\u4EE5\u5C55\u793A 0.5px \u7684\u7EC6\u8FB9\u6846\u3002
<van-button plain hairline type="primary">\u7EC6\u8FB9\u6846\u6309\u94AE</van-button>\n<van-button plain hairline type="success">\u7EC6\u8FB9\u6846\u6309\u94AE</van-button>\n
\n\u901A\u8FC7 disabled
\u5C5E\u6027\u6765\u7981\u7528\u6309\u94AE\uFF0C\u7981\u7528\u72B6\u6001\u4E0B\u6309\u94AE\u4E0D\u53EF\u70B9\u51FB\u3002
<van-button disabled type="primary">\u7981\u7528\u72B6\u6001</van-button>\n<van-button disabled type="success">\u7981\u7528\u72B6\u6001</van-button>\n
\n\u901A\u8FC7 loading
\u5C5E\u6027\u8BBE\u7F6E\u6309\u94AE\u4E3A\u52A0\u8F7D\u72B6\u6001\uFF0C\u52A0\u8F7D\u72B6\u6001\u4E0B\u9ED8\u8BA4\u4F1A\u9690\u85CF\u6309\u94AE\u6587\u5B57\uFF0C\u53EF\u4EE5\u901A\u8FC7 loading-text
\u8BBE\u7F6E\u52A0\u8F7D\u72B6\u6001\u4E0B\u7684\u6587\u5B57\u3002
<van-button loading type="primary" />\n<van-button loading type="primary" loading-type="spinner" />\n<van-button loading type="success" loading-text="\u52A0\u8F7D\u4E2D..." />\n
\n\u901A\u8FC7 square
\u8BBE\u7F6E\u65B9\u5F62\u6309\u94AE\uFF0C\u901A\u8FC7 round
\u8BBE\u7F6E\u5706\u5F62\u6309\u94AE\u3002
<van-button square type="primary">\u65B9\u5F62\u6309\u94AE</van-button>\n<van-button round type="success">\u5706\u5F62\u6309\u94AE</van-button>\n
\n\u901A\u8FC7 icon
\u5C5E\u6027\u8BBE\u7F6E\u6309\u94AE\u56FE\u6807\uFF0C\u652F\u6301 Icon \u7EC4\u4EF6\u91CC\u7684\u6240\u6709\u56FE\u6807\uFF0C\u4E5F\u53EF\u4EE5\u4F20\u5165\u56FE\u6807 URL\u3002
<van-button icon="plus" type="primary" />\n<van-button icon="plus" type="primary">\u6309\u94AE</van-button>\n<van-button\n icon="https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png"\n type="primary"\n>\n \u6309\u94AE\n</van-button>\n
\n\u652F\u6301 large
\u3001normal
\u3001small
\u3001mini
\u56DB\u79CD\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4\u4E3A normal
\u3002
<van-button type="primary" size="large">\u5927\u53F7\u6309\u94AE</van-button>\n<van-button type="primary" size="normal">\u666E\u901A\u6309\u94AE</van-button>\n<van-button type="primary" size="small">\u5C0F\u578B\u6309\u94AE</van-button>\n<van-button type="primary" size="mini">\u8FF7\u4F60\u6309\u94AE</van-button>\n
\n\u6309\u94AE\u5728\u9ED8\u8BA4\u60C5\u51B5\u4E0B\u4E3A\u884C\u5185\u5757\u7EA7\u5143\u7D20\uFF0C\u901A\u8FC7 block
\u5C5E\u6027\u53EF\u4EE5\u5C06\u6309\u94AE\u7684\u5143\u7D20\u7C7B\u578B\u8BBE\u7F6E\u4E3A\u5757\u7EA7\u5143\u7D20\u3002
<van-button type="primary" block>\u5757\u7EA7\u5143\u7D20</van-button>\n
\n\u53EF\u4EE5\u901A\u8FC7 url
\u5C5E\u6027\u8FDB\u884C URL \u8DF3\u8F6C\uFF0C\u6216\u901A\u8FC7 to
\u5C5E\u6027\u8FDB\u884C\u8DEF\u7531\u8DF3\u8F6C\u3002
<van-button type="primary" url="https://github.com">URL \u8DF3\u8F6C</van-button>\n<van-button type="primary" to="index">\u8DEF\u7531\u8DF3\u8F6C</van-button>\n
\n\u901A\u8FC7 color
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u6309\u94AE\u7684\u989C\u8272\u3002
<van-button color="#7232dd">\u5355\u8272\u6309\u94AE</van-button>\n<van-button color="#7232dd" plain>\u5355\u8272\u6309\u94AE</van-button>\n<van-button color="linear-gradient(to right, #ff6034, #ee0a24)">\n \u6E10\u53D8\u8272\u6309\u94AE\n</van-button>\n
\n\u642D\u914D Button \u548C Swipe \u7EC4\u4EF6\uFF0C\u53EF\u4EE5\u5B9E\u73B0\u5782\u76F4\u6EDA\u52A8\u7684\u52A8\u753B\u6309\u94AE\u6548\u679C\u3002
\n<van-button type="danger" round>\n <van-swipe\n vertical\n class="notice-swipe"\n :autoplay="2000"\n :touchable="false"\n :show-indicators="false"\n >\n <van-swipe-item>\u505A\u4EFB\u52A1</van-swipe-item>\n <van-swipe-item>\u62BD\u5927\u5956</van-swipe-item>\n </van-swipe>\n</van-button>\n\n<style>\n .notice-swipe {\n height: 40px;\n line-height: 40px;\n }\n</style>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
type | \n\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A primary success warning danger | \nstring | \ndefault | \n
size | \n\u5C3A\u5BF8\uFF0C\u53EF\u9009\u503C\u4E3A large small mini | \nstring | \nnormal | \n
text | \n\u6309\u94AE\u6587\u5B57 | \nstring | \n- | \n
color | \n\u6309\u94AE\u989C\u8272\uFF0C\u652F\u6301\u4F20\u5165 linear-gradient \u6E10\u53D8\u8272 | \nstring | \n- | \n
icon | \n\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n- | \n
icon-prefix | \n\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 | \nstring | \nvan-icon | \n
icon-position | \n\u56FE\u6807\u5C55\u793A\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A right | \nstring | \nleft | \n
tag | \n\u6309\u94AE\u6839\u8282\u70B9\u7684 HTML \u6807\u7B7E | \nstring | \nbutton | \n
native-type | \n\u539F\u751F button \u6807\u7B7E\u7684 type \u5C5E\u6027 | \nstring | \nbutton | \n
block | \n\u662F\u5426\u4E3A\u5757\u7EA7\u5143\u7D20 | \nboolean | \nfalse | \n
plain | \n\u662F\u5426\u4E3A\u6734\u7D20\u6309\u94AE | \nboolean | \nfalse | \n
square | \n\u662F\u5426\u4E3A\u65B9\u5F62\u6309\u94AE | \nboolean | \nfalse | \n
round | \n\u662F\u5426\u4E3A\u5706\u5F62\u6309\u94AE | \nboolean | \nfalse | \n
disabled | \n\u662F\u5426\u7981\u7528\u6309\u94AE | \nboolean | \nfalse | \n
hairline | \n\u662F\u5426\u4F7F\u7528 0.5px \u8FB9\u6846 | \nboolean | \nfalse | \n
loading | \n\u662F\u5426\u663E\u793A\u4E3A\u52A0\u8F7D\u72B6\u6001 | \nboolean | \nfalse | \n
loading-text | \n\u52A0\u8F7D\u72B6\u6001\u63D0\u793A\u6587\u5B57 | \nstring | \n- | \n
loading-type | \n\u52A0\u8F7D\u56FE\u6807\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A spinner | \nstring | \ncircular | \n
loading-size | \n\u52A0\u8F7D\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n20px | \n
url | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740 | \nstring | \n- | \n
to | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u76EE\u6807\u8DEF\u7531\u5BF9\u8C61\uFF0C\u7B49\u540C\u4E8E Vue Router \u7684 to \u5C5E\u6027 | \nstring | object | \n- | \n
replace | \n\u662F\u5426\u5728\u8DF3\u8F6C\u65F6\u66FF\u6362\u5F53\u524D\u9875\u9762\u5386\u53F2 | \nboolean | \nfalse | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u6309\u94AE\uFF0C\u4E14\u6309\u94AE\u72B6\u6001\u4E0D\u4E3A\u52A0\u8F7D\u6216\u7981\u7528\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
touchstart | \n\u5F00\u59CB\u89E6\u6478\u6309\u94AE\u65F6\u89E6\u53D1 | \nevent: TouchEvent | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u6309\u94AE\u5185\u5BB9 | \n
icon | \n\u81EA\u5B9A\u4E49\u56FE\u6807 | \n
loading | \n\u81EA\u5B9A\u4E49\u52A0\u8F7D\u56FE\u6807 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n ButtonType,\n ButtonSize,\n ButtonProps,\n ButtonNativeType,\n ButtonIconPosition,\n} from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-button-mini-height | \n24px | \n- | \n
--van-button-mini-padding | \n0 var(--van-padding-base) | \n- | \n
--van-button-mini-font-size | \nvar(--van-font-size-xs) | \n- | \n
--van-button-small-height | \n32px | \n- | \n
--van-button-small-padding | \n0 var(--van-padding-xs) | \n- | \n
--van-button-small-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-button-normal-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-button-normal-padding | \n0 15px | \n- | \n
--van-button-large-height | \n50px | \n- | \n
--van-button-default-height | \n44px | \n- | \n
--van-button-default-line-height | \n1.2 | \n- | \n
--van-button-default-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-button-default-color | \nvar(--van-text-color) | \n- | \n
--van-button-default-background | \nvar(--van-background-2) | \n- | \n
--van-button-default-border-color | \nvar(--van-gray-4) | \n- | \n
--van-button-primary-color | \nvar(--van-white) | \n- | \n
--van-button-primary-background | \nvar(--van-primary-color) | \n- | \n
--van-button-primary-border-color | \nvar(--van-primary-color) | \n- | \n
--van-button-success-color | \nvar(--van-white) | \n- | \n
--van-button-success-background | \nvar(--van-success-color) | \n- | \n
--van-button-success-border-color | \nvar(--van-success-color) | \n- | \n
--van-button-danger-color | \nvar(--van-white) | \n- | \n
--van-button-danger-background | \nvar(--van-danger-color) | \n- | \n
--van-button-danger-border-color | \nvar(--van-danger-color) | \n- | \n
--van-button-warning-color | \nvar(--van-white) | \n- | \n
--van-button-warning-background | \nvar(--van-orange) | \n- | \n
--van-button-warning-border-color | \nvar(--van-orange) | \n- | \n
--van-button-border-width | \nvar(--van-border-width) | \n- | \n
--van-button-radius | \nvar(--van-radius-md) | \n- | \n
--van-button-round-radius | \nvar(--van-radius-max) | \n- | \n
--van-button-plain-background | \nvar(--van-white) | \n- | \n
--van-button-disabled-opacity | \nvar(--van-disabled-opacity) | \n- | \n
--van-button-icon-size | \n1.2em | \n- | \n
--van-button-loading-icon-size | \n20px | \n- | \n
\u4EE5\u5361\u7247\u7684\u5F62\u5F0F\u5C55\u793A\u8054\u7CFB\u4EBA\u4FE1\u606F\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { ContactCard } from 'vant';\n\nconst app = createApp();\napp.use(ContactCard);\n
\n<van-contact-card type="add" @click="onAdd" />\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onAdd = () => showToast('\u65B0\u589E');\n return {\n onAdd,\n };\n },\n};\n
\n<van-contact-card type="edit" :tel="tel" :name="name" @click="onEdit" />\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const tel = ref('13000000000');\n const name = ref('\u5F20\u4E09');\n const onEdit = () => showToast('edit');\n return {\n tel,\n name,\n onEdit,\n };\n },\n};\n
\n<van-contact-card type="edit" name="\u5F20\u4E09" tel="13000000000" :editable="false" />\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
type | \n\u5361\u7247\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A edit | \nstring | \nadd | \n
name | \n\u8054\u7CFB\u4EBA\u59D3\u540D | \nstring | \n- | \n
tel | \n\u8054\u7CFB\u4EBA\u624B\u673A\u53F7 | \nstring | \n- | \n
add-text | \n\u6DFB\u52A0\u65F6\u7684\u6587\u6848\u63D0\u793A | \nstring | \n\u6DFB\u52A0\u8054\u7CFB\u4EBA | \n
editable | \n\u662F\u5426\u53EF\u4EE5\u7F16\u8F91\u8054\u7CFB\u4EBA | \nboolean | \ntrue | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { ContactCardType, ContactCardProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-contact-card-padding | \nvar(--van-padding-md) | \n- | \n
--van-contact-card-add-icon-size | \n40px | \n- | \n
--van-contact-card-add-icon-color | \nvar(--van-primary-color) | \n- | \n
--van-contact-card-title-line-height | \nvar(--van-line-height-md) | \n- | \n
\u4EE5\u5361\u7247\u7684\u5F62\u5F0F\u5C55\u793A\u8054\u7CFB\u4EBA\u4FE1\u606F\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { ContactCard } from 'vant';\n\nconst app = createApp();\napp.use(ContactCard);\n
\n<van-contact-card type="add" @click="onAdd" />\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onAdd = () => showToast('\u65B0\u589E');\n return {\n onAdd,\n };\n },\n};\n
\n<van-contact-card type="edit" :tel="tel" :name="name" @click="onEdit" />\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const tel = ref('13000000000');\n const name = ref('\u5F20\u4E09');\n const onEdit = () => showToast('edit');\n return {\n tel,\n name,\n onEdit,\n };\n },\n};\n
\n<van-contact-card type="edit" name="\u5F20\u4E09" tel="13000000000" :editable="false" />\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
type | \n\u5361\u7247\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A edit | \nstring | \nadd | \n
name | \n\u8054\u7CFB\u4EBA\u59D3\u540D | \nstring | \n- | \n
tel | \n\u8054\u7CFB\u4EBA\u624B\u673A\u53F7 | \nstring | \n- | \n
add-text | \n\u6DFB\u52A0\u65F6\u7684\u6587\u6848\u63D0\u793A | \nstring | \n\u6DFB\u52A0\u8054\u7CFB\u4EBA | \n
editable | \n\u662F\u5426\u53EF\u4EE5\u7F16\u8F91\u8054\u7CFB\u4EBA | \nboolean | \ntrue | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { ContactCardType, ContactCardProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-contact-card-padding | \nvar(--van-padding-md) | \n- | \n
--van-contact-card-add-icon-size | \n40px | \n- | \n
--van-contact-card-add-icon-color | \nvar(--van-primary-color) | \n- | \n
--van-contact-card-title-line-height | \nvar(--van-line-height-md) | \n- | \n
Create a mask layer to emphasize specific page elements and prevent users from performing other operations.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Overlay } from 'vant';\n\nconst app = createApp();\napp.use(Overlay);\n
\n<van-button type="primary" text="Show Overlay" @click="show = true" />\n<van-overlay :show="show" @click="show = false" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n return { show };\n },\n};\n
\n<van-overlay :show="show" @click="show = false">\n <div class="wrapper" @click.stop>\n <div class="block" />\n </div>\n</van-overlay>\n\n<style>\n .wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n }\n\n .block {\n width: 120px;\n height: 120px;\n background-color: #fff;\n }\n</style>\n
\nThe default z-index level of the Overlay component is 1
. You can set its z-index level using the z-index
prop.
<van-overlay z-index="100" />\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
show | \nWhether to show overlay | \nboolean | \nfalse | \n
z-index | \nz-index | \nnumber | string | \n1 | \n
duration | \nAnimation duration | \nnumber | string | \n0.3 | \n
class-name | \nClassName | \nstring | \n- | \n
custom-class | \nCustom style | \nobject | \n- | \n
lock-scroll | \nWhether to lock background scroll | \nboolean | \ntrue | \n
lazy-render | \nWhether to lazy render util appeared | \nboolean | \ntrue | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when component is clicked | \nevent: MouseEvent | \n
Name | \nDescription | \n
---|---|
default | \nDefault slot | \n
The component exports the following type definitions:
\nimport type { OverlayProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-overlay-z-index | \n1 | \n- | \n
--van-overlay-background | \nrgba(0, 0, 0, 0.7) | \n- | \n
Create a mask layer to emphasize specific page elements and prevent users from performing other operations.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Overlay } from 'vant';\n\nconst app = createApp();\napp.use(Overlay);\n
\n<van-button type="primary" text="Show Overlay" @click="show = true" />\n<van-overlay :show="show" @click="show = false" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n return { show };\n },\n};\n
\n<van-overlay :show="show" @click="show = false">\n <div class="wrapper" @click.stop>\n <div class="block" />\n </div>\n</van-overlay>\n\n<style>\n .wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n }\n\n .block {\n width: 120px;\n height: 120px;\n background-color: #fff;\n }\n</style>\n
\nThe default z-index level of the Overlay component is 1
. You can set its z-index level using the z-index
prop.
<van-overlay z-index="100" />\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
show | \nWhether to show overlay | \nboolean | \nfalse | \n
z-index | \nz-index | \nnumber | string | \n1 | \n
duration | \nAnimation duration | \nnumber | string | \n0.3 | \n
class-name | \nClassName | \nstring | \n- | \n
custom-class | \nCustom style | \nobject | \n- | \n
lock-scroll | \nWhether to lock background scroll | \nboolean | \ntrue | \n
lazy-render | \nWhether to lazy render util appeared | \nboolean | \ntrue | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when component is clicked | \nevent: MouseEvent | \n
Name | \nDescription | \n
---|---|
default | \nDefault slot | \n
The component exports the following type definitions:
\nimport type { OverlayProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-overlay-z-index | \n1 | \n- | \n
--van-overlay-background | \nrgba(0, 0, 0, 0.7) | \n- | \n
\u7528\u4E8E\u5217\u8868\u7684\u7D22\u5F15\u5206\u7C7B\u663E\u793A\u548C\u5FEB\u901F\u5B9A\u4F4D\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { IndexBar, IndexAnchor } from 'vant';\n\nconst app = createApp();\napp.use(IndexBar);\napp.use(IndexAnchor);\n
\n\u70B9\u51FB\u7D22\u5F15\u680F\u65F6\uFF0C\u4F1A\u81EA\u52A8\u8DF3\u8F6C\u5230\u5BF9\u5E94\u7684 IndexAnchor
\u951A\u70B9\u4F4D\u7F6E\u3002
<van-index-bar>\n <van-index-anchor index="A" />\n <van-cell title="\u6587\u672C" />\n <van-cell title="\u6587\u672C" />\n <van-cell title="\u6587\u672C" />\n\n <van-index-anchor index="B" />\n <van-cell title="\u6587\u672C" />\n <van-cell title="\u6587\u672C" />\n <van-cell title="\u6587\u672C" />\n\n ...\n</van-index-bar>\n
\n\u53EF\u4EE5\u901A\u8FC7 index-list
\u5C5E\u6027\u81EA\u5B9A\u4E49\u5C55\u793A\u7684\u7D22\u5F15\u5B57\u7B26\u5217\u8868\u3002
<van-index-bar :index-list="indexList">\n <van-index-anchor index="1">\u6807\u98981</van-index-anchor>\n <van-cell title="\u6587\u672C" />\n <van-cell title="\u6587\u672C" />\n <van-cell title="\u6587\u672C" />\n\n <van-index-anchor index="2">\u6807\u98982</van-index-anchor>\n <van-cell title="\u6587\u672C" />\n <van-cell title="\u6587\u672C" />\n <van-cell title="\u6587\u672C" />\n\n ...\n</van-index-bar>\n
\nexport default {\n setup() {\n return {\n indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
index-list | \n\u7D22\u5F15\u5B57\u7B26\u5217\u8868 | \n(string | number)[] | \nA-Z | \n
z-index | \nz-index \u5C42\u7EA7 | \nnumber | string | \n1 | \n
sticky | \n\u662F\u5426\u5F00\u542F\u951A\u70B9\u81EA\u52A8\u5438\u9876 | \nboolean | \ntrue | \n
sticky-offset-top | \n\u951A\u70B9\u81EA\u52A8\u5438\u9876\u65F6\u4E0E\u9876\u90E8\u7684\u8DDD\u79BB | \nnumber | \n0 | \n
highlight-color | \n\u7D22\u5F15\u5B57\u7B26\u9AD8\u4EAE\u989C\u8272 | \nstring | \n#1989fa | \n
teleport | \n\u6307\u5B9A\u7D22\u5F15\u680F\u6302\u8F7D\u7684\u8282\u70B9 | \nstring | Element | \n- | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
index | \n\u7D22\u5F15\u5B57\u7B26 | \nnumber | string | \n- | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
select | \n\u70B9\u51FB\u7D22\u5F15\u680F\u7684\u5B57\u7B26\u65F6\u89E6\u53D1 | \nindex: number | string | \n
change | \n\u5F53\u524D\u9AD8\u4EAE\u7684\u7D22\u5F15\u5B57\u7B26\u53D8\u5316\u65F6\u89E6\u53D1 | \nindex: number | string | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 IndexBar \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
scrollTo | \n\u6EDA\u52A8\u5230\u6307\u5B9A\u951A\u70B9 | \nindex: number | string | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { IndexBarProps, IndexAnchorProps, IndexBarInstance } from 'vant';\n
\nIndexBarInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { IndexBarInstance } from 'vant';\n\nconst indexBarRef = ref<IndexBarInstance>();\n\nindexBarRef.value?.scrollTo('B');\n
\n\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u951A\u70B9\u4F4D\u7F6E\u663E\u793A\u5185\u5BB9\uFF0C\u9ED8\u8BA4\u4E3A\u7D22\u5F15\u5B57\u7B26 | \n
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-index-bar-sidebar-z-index | \n2 | \n- | \n
--van-index-bar-index-font-size | \nvar(--van-font-size-xs) | \n- | \n
--van-index-bar-index-line-height | \nvar(--van-line-height-xs) | \n- | \n
--van-index-bar-index-active-color | \nvar(--van-primary-color) | \n- | \n
--van-index-anchor-z-index | \n1 | \n- | \n
--van-index-anchor-padding | \n0 var(--van-padding-md) | \n- | \n
--van-index-anchor-text-color | \nvar(--van-text-color) | \n- | \n
--van-index-anchor-font-weight | \nvar(--van-font-bold) | \n- | \n
--van-index-anchor-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-index-anchor-line-height | \n32px | \n- | \n
--van-index-anchor-background | \ntransparent | \n- | \n
--van-index-anchor-sticky-text-color | \nvar(--van-primary-color) | \n- | \n
--van-index-anchor-sticky-background | \nvar(--van-background-2) | \n- | \n
\u7528\u4E8E\u5217\u8868\u7684\u7D22\u5F15\u5206\u7C7B\u663E\u793A\u548C\u5FEB\u901F\u5B9A\u4F4D\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { IndexBar, IndexAnchor } from 'vant';\n\nconst app = createApp();\napp.use(IndexBar);\napp.use(IndexAnchor);\n
\n\u70B9\u51FB\u7D22\u5F15\u680F\u65F6\uFF0C\u4F1A\u81EA\u52A8\u8DF3\u8F6C\u5230\u5BF9\u5E94\u7684 IndexAnchor
\u951A\u70B9\u4F4D\u7F6E\u3002
<van-index-bar>\n <van-index-anchor index="A" />\n <van-cell title="\u6587\u672C" />\n <van-cell title="\u6587\u672C" />\n <van-cell title="\u6587\u672C" />\n\n <van-index-anchor index="B" />\n <van-cell title="\u6587\u672C" />\n <van-cell title="\u6587\u672C" />\n <van-cell title="\u6587\u672C" />\n\n ...\n</van-index-bar>\n
\n\u53EF\u4EE5\u901A\u8FC7 index-list
\u5C5E\u6027\u81EA\u5B9A\u4E49\u5C55\u793A\u7684\u7D22\u5F15\u5B57\u7B26\u5217\u8868\u3002
<van-index-bar :index-list="indexList">\n <van-index-anchor index="1">\u6807\u98981</van-index-anchor>\n <van-cell title="\u6587\u672C" />\n <van-cell title="\u6587\u672C" />\n <van-cell title="\u6587\u672C" />\n\n <van-index-anchor index="2">\u6807\u98982</van-index-anchor>\n <van-cell title="\u6587\u672C" />\n <van-cell title="\u6587\u672C" />\n <van-cell title="\u6587\u672C" />\n\n ...\n</van-index-bar>\n
\nexport default {\n setup() {\n return {\n indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
index-list | \n\u7D22\u5F15\u5B57\u7B26\u5217\u8868 | \n(string | number)[] | \nA-Z | \n
z-index | \nz-index \u5C42\u7EA7 | \nnumber | string | \n1 | \n
sticky | \n\u662F\u5426\u5F00\u542F\u951A\u70B9\u81EA\u52A8\u5438\u9876 | \nboolean | \ntrue | \n
sticky-offset-top | \n\u951A\u70B9\u81EA\u52A8\u5438\u9876\u65F6\u4E0E\u9876\u90E8\u7684\u8DDD\u79BB | \nnumber | \n0 | \n
highlight-color | \n\u7D22\u5F15\u5B57\u7B26\u9AD8\u4EAE\u989C\u8272 | \nstring | \n#1989fa | \n
teleport | \n\u6307\u5B9A\u7D22\u5F15\u680F\u6302\u8F7D\u7684\u8282\u70B9 | \nstring | Element | \n- | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
index | \n\u7D22\u5F15\u5B57\u7B26 | \nnumber | string | \n- | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
select | \n\u70B9\u51FB\u7D22\u5F15\u680F\u7684\u5B57\u7B26\u65F6\u89E6\u53D1 | \nindex: number | string | \n
change | \n\u5F53\u524D\u9AD8\u4EAE\u7684\u7D22\u5F15\u5B57\u7B26\u53D8\u5316\u65F6\u89E6\u53D1 | \nindex: number | string | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 IndexBar \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
scrollTo | \n\u6EDA\u52A8\u5230\u6307\u5B9A\u951A\u70B9 | \nindex: number | string | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { IndexBarProps, IndexAnchorProps, IndexBarInstance } from 'vant';\n
\nIndexBarInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { IndexBarInstance } from 'vant';\n\nconst indexBarRef = ref<IndexBarInstance>();\n\nindexBarRef.value?.scrollTo('B');\n
\n\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u951A\u70B9\u4F4D\u7F6E\u663E\u793A\u5185\u5BB9\uFF0C\u9ED8\u8BA4\u4E3A\u7D22\u5F15\u5B57\u7B26 | \n
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-index-bar-sidebar-z-index | \n2 | \n- | \n
--van-index-bar-index-font-size | \nvar(--van-font-size-xs) | \n- | \n
--van-index-bar-index-line-height | \nvar(--van-line-height-xs) | \n- | \n
--van-index-bar-index-active-color | \nvar(--van-primary-color) | \n- | \n
--van-index-anchor-z-index | \n1 | \n- | \n
--van-index-anchor-padding | \n0 var(--van-padding-md) | \n- | \n
--van-index-anchor-text-color | \nvar(--van-text-color) | \n- | \n
--van-index-anchor-font-weight | \nvar(--van-font-bold) | \n- | \n
--van-index-anchor-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-index-anchor-line-height | \n32px | \n- | \n
--van-index-anchor-background | \ntransparent | \n- | \n
--van-index-anchor-sticky-text-color | \nvar(--van-primary-color) | \n- | \n
--van-index-anchor-sticky-background | \nvar(--van-background-2) | \n- | \n
Enhanced img tag with multiple image fill modes, support for image lazy loading, loading hint, loading failure hint.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Image as VanImage } from 'vant';\n\nconst app = createApp();\napp.use(VanImage);\n
\n<van-image\n width="100"\n height="100"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"\n/>\n
\nSame as object-fit.
\n<van-image\n width="10rem"\n height="10rem"\n fit="contain"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"\n/>\n
\nSame as object-position.
\n<van-image\n width="10rem"\n height="10rem"\n fit="cover"\n position="left"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"\n/>\n
\nShow round image, it may not works at fit=contain
and fit=scale-down
.
<van-image\n round\n width="10rem"\n height="10rem"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"\n/>\n
\n<van-image\n width="100"\n height="100"\n lazy-load\n src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"\n/>\n
\nimport { createApp } from 'vue';\nimport { Lazyload } from 'vant';\n\nconst app = createApp();\napp.use(Lazyload);\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
src | \nSrc | \nstring | \n- | \n
fit | \nFit mode, same as object-fit | \nstring | \nfill | \n
position | \nPosition, same as object-position, can be set to top right bottom left or string | \nstring | \ncenter | \n
alt | \nAlt | \nstring | \n- | \n
width | \nWidth | \nnumber | string | \n- | \n
height | \nHeight | \nnumber | string | \n- | \n
radius | \nBorder Radius | \nnumber | string | \n0 | \n
round | \nWhether to be round | \nboolean | \nfalse | \n
block 3.6.3 | \nWhether the root node is a block element | \nboolean | \nfalse | \n
lazy-load | \nWhether to enable lazy load, should register Lazyload component | \nboolean | \nfalse | \n
show-error | \nWhether to show error placeholder | \nboolean | \ntrue | \n
show-loading | \nWhether to show loading placeholder | \nboolean | \ntrue | \n
error-icon | \nError icon | \nstring | \nphoto-fail | \n
loading-icon | \nLoading icon | \nstring | \nphoto | \n
icon-size | \nIcon size | \nnumber | string | \n32px | \n
icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
name | \ndescription | \n
---|---|
contain | \nKeep aspect ratio, fully display the long side of the image | \n
cover | \nKeep aspect ratio, fully display the short side of the image, cutting the long side | \n
fill | \nStretch and resize image to fill the content box | \n
none | \nNot resize image | \n
scale-down | \nTake the smaller of none or contain | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when image is clicked | \nevent: MouseEvent | \n
load | \nEmitted when image loaded | \nevent: Event | \n
error | \nEmitted when image load failed | \n- | \n
Name | \nDescription | \n
---|---|
default | \nCustom the content below the image | \n
loading | \nCustom loading placeholder | \n
error | \nCustom error placeholder | \n
The component exports the following type definitions:
\nimport type { ImageFit, ImagePosition, ImageProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-image-placeholder-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-image-placeholder-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-image-placeholder-background | \nvar(--van-background) | \n- | \n
--van-image-loading-icon-size | \n32px | \n- | \n
--van-image-loading-icon-color | \nvar(--van-gray-4) | \n- | \n
--van-image-error-icon-size | \n32px | \n- | \n
--van-image-error-icon-color | \nvar(--van-gray-4) | \n- | \n
Enhanced img tag with multiple image fill modes, support for image lazy loading, loading hint, loading failure hint.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Image as VanImage } from 'vant';\n\nconst app = createApp();\napp.use(VanImage);\n
\n<van-image\n width="100"\n height="100"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"\n/>\n
\nSame as object-fit.
\n<van-image\n width="10rem"\n height="10rem"\n fit="contain"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"\n/>\n
\nSame as object-position.
\n<van-image\n width="10rem"\n height="10rem"\n fit="cover"\n position="left"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"\n/>\n
\nShow round image, it may not works at fit=contain
and fit=scale-down
.
<van-image\n round\n width="10rem"\n height="10rem"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"\n/>\n
\n<van-image\n width="100"\n height="100"\n lazy-load\n src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"\n/>\n
\nimport { createApp } from 'vue';\nimport { Lazyload } from 'vant';\n\nconst app = createApp();\napp.use(Lazyload);\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
src | \nSrc | \nstring | \n- | \n
fit | \nFit mode, same as object-fit | \nstring | \nfill | \n
position | \nPosition, same as object-position, can be set to top right bottom left or string | \nstring | \ncenter | \n
alt | \nAlt | \nstring | \n- | \n
width | \nWidth | \nnumber | string | \n- | \n
height | \nHeight | \nnumber | string | \n- | \n
radius | \nBorder Radius | \nnumber | string | \n0 | \n
round | \nWhether to be round | \nboolean | \nfalse | \n
block 3.6.3 | \nWhether the root node is a block element | \nboolean | \nfalse | \n
lazy-load | \nWhether to enable lazy load, should register Lazyload component | \nboolean | \nfalse | \n
show-error | \nWhether to show error placeholder | \nboolean | \ntrue | \n
show-loading | \nWhether to show loading placeholder | \nboolean | \ntrue | \n
error-icon | \nError icon | \nstring | \nphoto-fail | \n
loading-icon | \nLoading icon | \nstring | \nphoto | \n
icon-size | \nIcon size | \nnumber | string | \n32px | \n
icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
name | \ndescription | \n
---|---|
contain | \nKeep aspect ratio, fully display the long side of the image | \n
cover | \nKeep aspect ratio, fully display the short side of the image, cutting the long side | \n
fill | \nStretch and resize image to fill the content box | \n
none | \nNot resize image | \n
scale-down | \nTake the smaller of none or contain | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when image is clicked | \nevent: MouseEvent | \n
load | \nEmitted when image loaded | \nevent: Event | \n
error | \nEmitted when image load failed | \n- | \n
Name | \nDescription | \n
---|---|
default | \nCustom the content below the image | \n
loading | \nCustom loading placeholder | \n
error | \nCustom error placeholder | \n
The component exports the following type definitions:
\nimport type { ImageFit, ImagePosition, ImageProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-image-placeholder-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-image-placeholder-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-image-placeholder-background | \nvar(--van-background) | \n- | \n
--van-image-loading-icon-size | \n32px | \n- | \n
--van-image-loading-icon-color | \nvar(--van-gray-4) | \n- | \n
--van-image-error-icon-size | \n32px | \n- | \n
--van-image-error-icon-color | \nvar(--van-gray-4) | \n- | \n
\u63D0\u4F9B\u5012\u8BA1\u65F6\u7BA1\u7406\u80FD\u529B\u3002
\n<span>\u603B\u65F6\u95F4\uFF1A{{ current.total }}</span>\n<span>\u5269\u4F59\u5929\u6570\uFF1A{{ current.days }}</span>\n<span>\u5269\u4F59\u5C0F\u65F6\uFF1A{{ current.hours }}</span>\n<span>\u5269\u4F59\u5206\u949F\uFF1A{{ current.minutes }}</span>\n<span>\u5269\u4F59\u79D2\u6570\uFF1A{{ current.seconds }}</span>\n<span>\u5269\u4F59\u6BEB\u79D2\uFF1A{{ current.milliseconds }}</span>\n
\nimport { useCountDown } from '@vant/use';\n\nexport default {\n setup() {\n const countDown = useCountDown({\n // \u5012\u8BA1\u65F6 24 \u5C0F\u65F6\n time: 24 * 60 * 60 * 1000,\n });\n\n // \u5F00\u59CB\u5012\u8BA1\u65F6\n countDown.start();\n\n return {\n current: countDown.current,\n };\n },\n};\n
\n\u5012\u8BA1\u65F6\u9ED8\u8BA4\u6BCF\u79D2\u6E32\u67D3\u4E00\u6B21\uFF0C\u8BBE\u7F6E millisecond \u9009\u9879\u53EF\u4EE5\u5F00\u542F\u6BEB\u79D2\u7EA7\u6E32\u67D3\u3002
\nimport { useCountDown } from '@vant/use';\n\nexport default {\n setup() {\n const countDown = useCountDown({\n time: 24 * 60 * 60 * 1000,\n millisecond: true,\n });\n countDown.start();\n\n return {\n current: countDown.current,\n };\n },\n};\n
\ntype CurrentTime = {\n days: number;\n hours: number;\n total: number;\n minutes: number;\n seconds: number;\n milliseconds: number;\n};\n\ntype CountDown = {\n start: () => void;\n pause: () => void;\n reset: (totalTime: number) => void;\n current: ComputedRef<CurrentTime>;\n};\n\ntype UseCountDownOptions = {\n time: number;\n millisecond?: boolean;\n onChange?: (current: CurrentTime) => void;\n onFinish?: () => void;\n};\n\nfunction useCountDown(options: UseCountDownOptions): CountDown;\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
time | \n\u5012\u8BA1\u65F6\u65F6\u957F\uFF0C\u5355\u4F4D\u6BEB\u79D2 | \nnumber | \n- | \n
millisecond | \n\u662F\u5426\u5F00\u542F\u6BEB\u79D2\u7EA7\u6E32\u67D3 | \nboolean | \nfalse | \n
onChange | \n\u5012\u8BA1\u65F6\u6539\u53D8\u65F6\u89E6\u53D1\u7684\u56DE\u8C03\u51FD\u6570 | \n(current: CurrentTime) => void | \n- | \n
onFinish | \n\u5012\u8BA1\u65F6\u7ED3\u675F\u65F6\u89E6\u53D1\u7684\u56DE\u8C03\u51FD\u6570 | \n() => void | \n- | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
current | \n\u5F53\u524D\u5269\u4F59\u7684\u65F6\u95F4 | \nCurrentTime | \n
start | \n\u5F00\u59CB\u5012\u8BA1\u65F6 | \n() => void | \n
pause | \n\u6682\u505C\u5012\u8BA1\u65F6 | \n() => void | \n
reset | \n\u91CD\u7F6E\u5012\u8BA1\u65F6\uFF0C\u652F\u6301\u4F20\u5165\u65B0\u7684\u5012\u8BA1\u65F6\u65F6\u957F | \n(time?: number): void | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
total | \n\u5269\u4F59\u603B\u65F6\u95F4\uFF08\u5355\u4F4D\u6BEB\u79D2\uFF09 | \nnumber | \n
days | \n\u5269\u4F59\u5929\u6570 | \nnumber | \n
hours | \n\u5269\u4F59\u5C0F\u65F6 | \nnumber | \n
minutes | \n\u5269\u4F59\u5206\u949F | \nnumber | \n
seconds | \n\u5269\u4F59\u79D2\u6570 | \nnumber | \n
milliseconds | \n\u5269\u4F59\u6BEB\u79D2 | \nnumber | \n
\u63D0\u4F9B\u5012\u8BA1\u65F6\u7BA1\u7406\u80FD\u529B\u3002
\n<span>\u603B\u65F6\u95F4\uFF1A{{ current.total }}</span>\n<span>\u5269\u4F59\u5929\u6570\uFF1A{{ current.days }}</span>\n<span>\u5269\u4F59\u5C0F\u65F6\uFF1A{{ current.hours }}</span>\n<span>\u5269\u4F59\u5206\u949F\uFF1A{{ current.minutes }}</span>\n<span>\u5269\u4F59\u79D2\u6570\uFF1A{{ current.seconds }}</span>\n<span>\u5269\u4F59\u6BEB\u79D2\uFF1A{{ current.milliseconds }}</span>\n
\nimport { useCountDown } from '@vant/use';\n\nexport default {\n setup() {\n const countDown = useCountDown({\n // \u5012\u8BA1\u65F6 24 \u5C0F\u65F6\n time: 24 * 60 * 60 * 1000,\n });\n\n // \u5F00\u59CB\u5012\u8BA1\u65F6\n countDown.start();\n\n return {\n current: countDown.current,\n };\n },\n};\n
\n\u5012\u8BA1\u65F6\u9ED8\u8BA4\u6BCF\u79D2\u6E32\u67D3\u4E00\u6B21\uFF0C\u8BBE\u7F6E millisecond \u9009\u9879\u53EF\u4EE5\u5F00\u542F\u6BEB\u79D2\u7EA7\u6E32\u67D3\u3002
\nimport { useCountDown } from '@vant/use';\n\nexport default {\n setup() {\n const countDown = useCountDown({\n time: 24 * 60 * 60 * 1000,\n millisecond: true,\n });\n countDown.start();\n\n return {\n current: countDown.current,\n };\n },\n};\n
\ntype CurrentTime = {\n days: number;\n hours: number;\n total: number;\n minutes: number;\n seconds: number;\n milliseconds: number;\n};\n\ntype CountDown = {\n start: () => void;\n pause: () => void;\n reset: (totalTime: number) => void;\n current: ComputedRef<CurrentTime>;\n};\n\ntype UseCountDownOptions = {\n time: number;\n millisecond?: boolean;\n onChange?: (current: CurrentTime) => void;\n onFinish?: () => void;\n};\n\nfunction useCountDown(options: UseCountDownOptions): CountDown;\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
time | \n\u5012\u8BA1\u65F6\u65F6\u957F\uFF0C\u5355\u4F4D\u6BEB\u79D2 | \nnumber | \n- | \n
millisecond | \n\u662F\u5426\u5F00\u542F\u6BEB\u79D2\u7EA7\u6E32\u67D3 | \nboolean | \nfalse | \n
onChange | \n\u5012\u8BA1\u65F6\u6539\u53D8\u65F6\u89E6\u53D1\u7684\u56DE\u8C03\u51FD\u6570 | \n(current: CurrentTime) => void | \n- | \n
onFinish | \n\u5012\u8BA1\u65F6\u7ED3\u675F\u65F6\u89E6\u53D1\u7684\u56DE\u8C03\u51FD\u6570 | \n() => void | \n- | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
current | \n\u5F53\u524D\u5269\u4F59\u7684\u65F6\u95F4 | \nCurrentTime | \n
start | \n\u5F00\u59CB\u5012\u8BA1\u65F6 | \n() => void | \n
pause | \n\u6682\u505C\u5012\u8BA1\u65F6 | \n() => void | \n
reset | \n\u91CD\u7F6E\u5012\u8BA1\u65F6\uFF0C\u652F\u6301\u4F20\u5165\u65B0\u7684\u5012\u8BA1\u65F6\u65F6\u957F | \n(time?: number): void | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
total | \n\u5269\u4F59\u603B\u65F6\u95F4\uFF08\u5355\u4F4D\u6BEB\u79D2\uFF09 | \nnumber | \n
days | \n\u5269\u4F59\u5929\u6570 | \nnumber | \n
hours | \n\u5269\u4F59\u5C0F\u65F6 | \nnumber | \n
minutes | \n\u5269\u4F59\u5206\u949F | \nnumber | \n
seconds | \n\u5269\u4F59\u79D2\u6570 | \nnumber | \n
milliseconds | \n\u5269\u4F59\u6BEB\u79D2 | \nnumber | \n
\u65B9\u4FBF\u5730\u8FDB\u884C\u4E8B\u4EF6\u7ED1\u5B9A\uFF0C\u5728\u7EC4\u4EF6 mounted
\u548C activated
\u65F6\u7ED1\u5B9A\u4E8B\u4EF6\uFF0Cunmounted
\u548C deactivated
\u65F6\u89E3\u7ED1\u4E8B\u4EF6\u3002
import { ref } from 'vue';\nimport { useEventListener } from '@vant/use';\n\nexport default {\n setup() {\n // \u5728 window \u4E0A\u7ED1\u5B9A resize \u4E8B\u4EF6\n // \u672A\u6307\u5B9A\u76D1\u542C\u5BF9\u8C61\u65F6\uFF0C\u9ED8\u8BA4\u4F1A\u76D1\u542C window \u7684\u4E8B\u4EF6\n useEventListener('resize', () => {\n console.log('window resize');\n });\n\n // \u5728 body \u5143\u7D20\u4E0A\u7ED1\u5B9A click \u4E8B\u4EF6\n useEventListener(\n 'click',\n () => {\n console.log('click body');\n },\n { target: document.body },\n );\n },\n};\n
\nuseEventListener
\u4F1A\u8FD4\u56DE\u4E00\u4E2A cleanup
\u51FD\u6570\uFF0C\u8C03\u7528\u8BE5\u51FD\u6570\u53EF\u4EE5\u53D6\u6D88\u4E8B\u4EF6\u76D1\u542C\u3002
import { ref } from 'vue';\nimport { useEventListener } from '@vant/use';\n\nexport default {\n setup() {\n const cleanup = useEventListener('resize', () => {\n console.log('window resize');\n });\n\n cleanup();\n },\n};\n
\ntype Options = {\n target?: EventTarget | Ref<EventTarget>;\n capture?: boolean;\n passive?: boolean;\n};\n\nfunction useEventListener(\n type: string,\n listener: EventListener,\n options?: Options,\n): () => void;\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
type | \n\u76D1\u542C\u7684\u4E8B\u4EF6\u7C7B\u578B | \nstring | \n- | \n
listener | \n\u4E8B\u4EF6\u56DE\u8C03\u51FD\u6570 | \nEventListener | \n- | \n
options | \n\u53EF\u9009\u7684\u914D\u7F6E\u9879 | \nOptions | \n- | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
target | \n\u7ED1\u5B9A\u4E8B\u4EF6\u7684\u5143\u7D20 | \nEventTarget | Ref<EventTarget> | \nwindow | \n
capture | \n\u662F\u5426\u5728\u4E8B\u4EF6\u6355\u83B7\u9636\u6BB5\u89E6\u53D1 | \nboolean | \nfalse | \n
passive | \n\u8BBE\u7F6E\u4E3A true \u65F6\uFF0C\u8868\u793A listener \u6C38\u8FDC\u4E0D\u4F1A\u8C03\u7528 preventDefault | \nboolean | \nfalse | \n
\u65B9\u4FBF\u5730\u8FDB\u884C\u4E8B\u4EF6\u7ED1\u5B9A\uFF0C\u5728\u7EC4\u4EF6 mounted
\u548C activated
\u65F6\u7ED1\u5B9A\u4E8B\u4EF6\uFF0Cunmounted
\u548C deactivated
\u65F6\u89E3\u7ED1\u4E8B\u4EF6\u3002
import { ref } from 'vue';\nimport { useEventListener } from '@vant/use';\n\nexport default {\n setup() {\n // \u5728 window \u4E0A\u7ED1\u5B9A resize \u4E8B\u4EF6\n // \u672A\u6307\u5B9A\u76D1\u542C\u5BF9\u8C61\u65F6\uFF0C\u9ED8\u8BA4\u4F1A\u76D1\u542C window \u7684\u4E8B\u4EF6\n useEventListener('resize', () => {\n console.log('window resize');\n });\n\n // \u5728 body \u5143\u7D20\u4E0A\u7ED1\u5B9A click \u4E8B\u4EF6\n useEventListener(\n 'click',\n () => {\n console.log('click body');\n },\n { target: document.body },\n );\n },\n};\n
\nuseEventListener
\u4F1A\u8FD4\u56DE\u4E00\u4E2A cleanup
\u51FD\u6570\uFF0C\u8C03\u7528\u8BE5\u51FD\u6570\u53EF\u4EE5\u53D6\u6D88\u4E8B\u4EF6\u76D1\u542C\u3002
import { ref } from 'vue';\nimport { useEventListener } from '@vant/use';\n\nexport default {\n setup() {\n const cleanup = useEventListener('resize', () => {\n console.log('window resize');\n });\n\n cleanup();\n },\n};\n
\ntype Options = {\n target?: EventTarget | Ref<EventTarget>;\n capture?: boolean;\n passive?: boolean;\n};\n\nfunction useEventListener(\n type: string,\n listener: EventListener,\n options?: Options,\n): () => void;\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
type | \n\u76D1\u542C\u7684\u4E8B\u4EF6\u7C7B\u578B | \nstring | \n- | \n
listener | \n\u4E8B\u4EF6\u56DE\u8C03\u51FD\u6570 | \nEventListener | \n- | \n
options | \n\u53EF\u9009\u7684\u914D\u7F6E\u9879 | \nOptions | \n- | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
target | \n\u7ED1\u5B9A\u4E8B\u4EF6\u7684\u5143\u7D20 | \nEventTarget | Ref<EventTarget> | \nwindow | \n
capture | \n\u662F\u5426\u5728\u4E8B\u4EF6\u6355\u83B7\u9636\u6BB5\u89E6\u53D1 | \nboolean | \nfalse | \n
passive | \n\u8BBE\u7F6E\u4E3A true \u65F6\uFF0C\u8868\u793A listener \u6C38\u8FDC\u4E0D\u4F1A\u8C03\u7528 preventDefault | \nboolean | \nfalse | \n
Provide convenient call and cancellation of requestAnimationFrame.
\nBy using the useRaf
method, you can execute a function before the next browser repaint.
import { useRaf } from '@vant/use';\n\nexport default {\n setup() {\n let count = 0;\n useRaf(() => {\n console.log(++count); // It will only be executed once.\n });\n },\n};\n
\nBy using the isLoop
option, you can execution of a function repeatedly at a specified interval until it is canceled.
import { useRaf } from '@vant/use';\n\nexport default {\n setup() {\n let count = 0;\n const cancelRaf = useRaf(\n () => {\n console.log(++count); // Execute infinitely until canceled\n\n if (count === 5) {\n cancelRaf();\n }\n },\n {\n isLoop: true, // Enable the loop\n interval: 100, // Set call interval\n },\n );\n },\n};\n
\nfunction useRaf(\n callback: () => void,\n options: {\n interval?: number;\n isLoop?: boolean;\n },\n): void;\n
\nName | \nDescription | \nType | \nDefault | \n
---|---|---|---|
callback | \nCallback | \n() => void | \n- | \n
options | \nOptions | \n{ interval?: number; isLoop?: boolean } | \n{ interval: 0; isLoop: false } | \n
Provide convenient call and cancellation of requestAnimationFrame.
\nBy using the useRaf
method, you can execute a function before the next browser repaint.
import { useRaf } from '@vant/use';\n\nexport default {\n setup() {\n let count = 0;\n useRaf(() => {\n console.log(++count); // It will only be executed once.\n });\n },\n};\n
\nBy using the isLoop
option, you can execution of a function repeatedly at a specified interval until it is canceled.
import { useRaf } from '@vant/use';\n\nexport default {\n setup() {\n let count = 0;\n const cancelRaf = useRaf(\n () => {\n console.log(++count); // Execute infinitely until canceled\n\n if (count === 5) {\n cancelRaf();\n }\n },\n {\n isLoop: true, // Enable the loop\n interval: 100, // Set call interval\n },\n );\n },\n};\n
\nfunction useRaf(\n callback: () => void,\n options: {\n interval?: number;\n isLoop?: boolean;\n },\n): void;\n
\nName | \nDescription | \nType | \nDefault | \n
---|---|---|---|
callback | \nCallback | \n() => void | \n- | \n
options | \nOptions | \n{ interval?: number; isLoop?: boolean } | \n{ interval: 0; isLoop: false } | \n
\u6587\u672C\u7FFB\u6EDA\u52A8\u6548\uFF0C\u53EF\u4EE5\u7FFB\u6EDA\u6570\u5B57\u548C\u5176\u4ED6\u7C7B\u578B\u6587\u672C\u3002\u8BF7\u5347\u7EA7 vant
\u5230 >= 4.6.0 \u7248\u672C\u6765\u4F7F\u7528\u8BE5\u7EC4\u4EF6\u3002
\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { RollingText } from 'vant';\n\nconst app = createApp();\napp.use(RollingText);\n
\n\u4F60\u53EF\u4EE5\u901A\u8FC7 start-num
\u8BBE\u7F6E\u8D77\u59CB\u6570\u503C\uFF0Ctarget-num
\u8BBE\u7F6E\u76EE\u6807\u6570\u503C\u3002RollingText \u7EC4\u4EF6\u4F1A\u81EA\u52A8\u5F00\u59CB\u52A8\u753B\uFF0C\u4ECE\u8D77\u59CB\u6570\u503C\u7FFB\u6EDA\u5230\u76EE\u6807\u6570\u503C\u3002
<van-rolling-text :start-num="0" :target-num="123" />\n
\n\u4F60\u53EF\u4EE5\u901A\u8FC7 direction
\u5C5E\u6027\u8BBE\u7F6E\u6570\u5B57\u7684\u7FFB\u6EDA\u65B9\u5411\uFF0C\u9ED8\u8BA4\u4E3A\u5411\u4E0B\u7FFB\u6EDA\uFF0C\u8BBE\u7F6E\u4E3A up
\u5373\u53EF\u5411\u4E0A\u7FFB\u6EDA\u3002
<van-rolling-text :start-num="0" :target-num="432" direction="up" />\n
\n\u4F60\u53EF\u4EE5\u901A\u8FC7 stop-order
\u5C5E\u6027\u8BBE\u7F6E\u52A8\u753B\u5404\u4E2A\u6570\u4F4D\u7684\u505C\u6B62\u5148\u540E\u987A\u5E8F\u3002\u9ED8\u8BA4\u5148\u505C\u6B62\u9AD8\u4F4D\uFF0C\u8BBE\u7F6E\u4E3A rtl
\u53EF\u4EE5\u5148\u4ECE\u4E2A\u4F4D\u505C\u6B62\u3002
<van-rolling-text :start-num="0" :target-num="54321" stop-order="rtl" />\n
\n\u4F60\u53EF\u4EE5\u4F7F\u7528 text-list
\u5C5E\u6027\u8BBE\u7F6E\u975E\u6570\u5B57\u5185\u5BB9\u7684\u7FFB\u8F6C\u3002\u7EC4\u4EF6\u4F1A\u4ECE\u6570\u7EC4\u7684\u7B2C\u4E00\u9879\u7FFB\u8F6C\u5230\u6700\u540E\u4E00\u9879\uFF0C\u8BF7\u786E\u4FDD\u6570\u7EC4\u957F\u5EA6\u5927\u4E8E\u7B49\u4E8E 2\uFF0C\u4EE5\u53CA\u6BCF\u4E00\u9879\u7684\u957F\u5EA6\u4E00\u81F4\u3002
<van-rolling-text :text-list="textList" :duration="1" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const textList = ref([\n 'aaaaa',\n 'bbbbb',\n 'ccccc',\n 'ddddd',\n 'eeeee',\n 'fffff',\n 'ggggg',\n ]);\n return { textList };\n },\n};\n
\nRollingText \u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E00\u4E9B CSS \u53D8\u91CF\uFF0C\u4F60\u53EF\u4EE5\u8986\u76D6\u8FD9\u4E9B\u53D8\u91CF\u6765\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4E5F\u53EF\u4EE5\u76F4\u63A5\u4FEE\u6539\u7EC4\u4EF6\u7684\u6837\u5F0F\u3002\u6B64\u5916\uFF0C\u4F60\u8FD8\u53EF\u4EE5\u901A\u8FC7 height
\u5C5E\u6027\u8BBE\u7F6E\u6570\u5B57\u9AD8\u5EA6\u3002
<van-rolling-text\n class="my-rolling-text"\n :height="54"\n :start-num="12345"\n :target-num="54321"\n/>\n
\n.my-rolling-text {\n --van-rolling-text-background: #1989fa;\n --van-rolling-text-color: white;\n --van-rolling-text-font-size: 24px;\n --van-rolling-text-gap: 6px;\n --van-rolling-text-item-border-radius: 5px;\n --van-rolling-text-item-width: 40px;\n}\n
\n\u901A\u8FC7 ref \u83B7\u53D6\u5230\u7EC4\u4EF6\u5B9E\u4F8B\u540E\uFF0C\u4F60\u53EF\u4EE5\u8C03\u7528 start
\u3001reset
\u65B9\u6CD5\uFF0Cstart
\u65B9\u6CD5\u7528\u4E8E\u5F00\u59CB\u52A8\u753B\uFF0Creset
\u65B9\u6CD5\u7528\u4E8E\u91CD\u7F6E\u52A8\u753B\u3002
<van-rolling-text\n ref="rollingTextRef"\n :start-num="0"\n :target-num="54321"\n :auto-start="false"\n/>\n<van-grid clickable :column-num="3">\n <van-grid-item icon="play-circle-o" :text="start" @click="start" />\n <van-grid-item icon="replay" :text="reset" @click="reset" />\n</van-grid>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const rollingTextRef = ref(null);\n const start = () => {\n rollingTextRef.value.start();\n };\n const reset = () => {\n rollingTextRef.value.reset();\n };\n return { rollingTextRef, start, reset };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
start-num | \n\u8D77\u59CB\u6570\u503C | \nnumber | \n0 | \n
target-num | \n\u76EE\u6807\u6570\u503C | \nnumber | \n- | \n
text-list | \n\u5185\u5BB9\u6570\u7EC4\uFF0C\u7528\u4E8E\u7FFB\u8F6C\u975E\u6570\u5B57\u5185\u5BB9 | \nstring[] | \n[] | \n
duration | \n\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u4E3A\u79D2 | \nnumber | \n2 | \n
direction | \n\u6587\u672C\u7FFB\u6EDA\u65B9\u5411\uFF0C\u503C\u4E3A down \u548C up | \nstring | \ndown | \n
auto-start | \n\u662F\u5426\u81EA\u52A8\u5F00\u59CB\u52A8\u753B | \nboolean | \ntrue | \n
stop-order | \n\u5404\u4E2A\u6570\u4F4D\u52A8\u753B\u505C\u6B62\u5148\u540E\u987A\u5E8F\uFF0C\u503C\u4E3A ltr \u548C rtl | \nstring | \nltr | \n
height | \n\u6570\u5B57\u9AD8\u5EA6\uFF0C\u5355\u4F4D\u4E3A px | \nnumber | \n40 | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 RollingText \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
start | \n\u5F00\u59CB\u52A8\u753B | \n- | \n- | \n
reset | \n\u91CD\u7F6E\u52A8\u753B | \n- | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n RollingTextProps,\n RollingTextInstance,\n RollingTextDirection,\n RollingTextStopOrder,\n} from 'vant';\n
\nRollingTextInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { RollingTextInstance } from 'vant';\n\nconst rollingTextRef = ref<RollingTextInstance>();\n\nrollingTextRef.value?.start();\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-rolling-text-background | \ninherit | \n\u5355\u4E2A\u6570\u4F4D\u80CC\u666F\u8272 | \n
--van-rolling-text-color | \nvar(--van-text-color) | \n\u6570\u5B57\u989C\u8272 | \n
--van-rolling-text-font-size | \nvar(--van-font-size-md) | \n\u5B57\u4F53\u5927\u5C0F | \n
--van-rolling-text-gap | \n0px | \n\u6570\u4F4D\u4E4B\u95F4\u7684\u95F4\u9694 | \n
--van-rolling-text-item-width | \n15px | \n\u5355\u4E2A\u6570\u4F4D\u5BBD\u5EA6 | \n
--van-rolling-text-item-border-radius | \n0px | \n\u5355\u4E2A\u6570\u4F4D\u8FB9\u6846\u5706\u89D2 | \n
\u6587\u672C\u7FFB\u6EDA\u52A8\u6548\uFF0C\u53EF\u4EE5\u7FFB\u6EDA\u6570\u5B57\u548C\u5176\u4ED6\u7C7B\u578B\u6587\u672C\u3002\u8BF7\u5347\u7EA7 vant
\u5230 >= 4.6.0 \u7248\u672C\u6765\u4F7F\u7528\u8BE5\u7EC4\u4EF6\u3002
\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { RollingText } from 'vant';\n\nconst app = createApp();\napp.use(RollingText);\n
\n\u4F60\u53EF\u4EE5\u901A\u8FC7 start-num
\u8BBE\u7F6E\u8D77\u59CB\u6570\u503C\uFF0Ctarget-num
\u8BBE\u7F6E\u76EE\u6807\u6570\u503C\u3002RollingText \u7EC4\u4EF6\u4F1A\u81EA\u52A8\u5F00\u59CB\u52A8\u753B\uFF0C\u4ECE\u8D77\u59CB\u6570\u503C\u7FFB\u6EDA\u5230\u76EE\u6807\u6570\u503C\u3002
<van-rolling-text :start-num="0" :target-num="123" />\n
\n\u4F60\u53EF\u4EE5\u901A\u8FC7 direction
\u5C5E\u6027\u8BBE\u7F6E\u6570\u5B57\u7684\u7FFB\u6EDA\u65B9\u5411\uFF0C\u9ED8\u8BA4\u4E3A\u5411\u4E0B\u7FFB\u6EDA\uFF0C\u8BBE\u7F6E\u4E3A up
\u5373\u53EF\u5411\u4E0A\u7FFB\u6EDA\u3002
<van-rolling-text :start-num="0" :target-num="432" direction="up" />\n
\n\u4F60\u53EF\u4EE5\u901A\u8FC7 stop-order
\u5C5E\u6027\u8BBE\u7F6E\u52A8\u753B\u5404\u4E2A\u6570\u4F4D\u7684\u505C\u6B62\u5148\u540E\u987A\u5E8F\u3002\u9ED8\u8BA4\u5148\u505C\u6B62\u9AD8\u4F4D\uFF0C\u8BBE\u7F6E\u4E3A rtl
\u53EF\u4EE5\u5148\u4ECE\u4E2A\u4F4D\u505C\u6B62\u3002
<van-rolling-text :start-num="0" :target-num="54321" stop-order="rtl" />\n
\n\u4F60\u53EF\u4EE5\u4F7F\u7528 text-list
\u5C5E\u6027\u8BBE\u7F6E\u975E\u6570\u5B57\u5185\u5BB9\u7684\u7FFB\u8F6C\u3002\u7EC4\u4EF6\u4F1A\u4ECE\u6570\u7EC4\u7684\u7B2C\u4E00\u9879\u7FFB\u8F6C\u5230\u6700\u540E\u4E00\u9879\uFF0C\u8BF7\u786E\u4FDD\u6570\u7EC4\u957F\u5EA6\u5927\u4E8E\u7B49\u4E8E 2\uFF0C\u4EE5\u53CA\u6BCF\u4E00\u9879\u7684\u957F\u5EA6\u4E00\u81F4\u3002
<van-rolling-text :text-list="textList" :duration="1" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const textList = ref([\n 'aaaaa',\n 'bbbbb',\n 'ccccc',\n 'ddddd',\n 'eeeee',\n 'fffff',\n 'ggggg',\n ]);\n return { textList };\n },\n};\n
\nRollingText \u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E00\u4E9B CSS \u53D8\u91CF\uFF0C\u4F60\u53EF\u4EE5\u8986\u76D6\u8FD9\u4E9B\u53D8\u91CF\u6765\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4E5F\u53EF\u4EE5\u76F4\u63A5\u4FEE\u6539\u7EC4\u4EF6\u7684\u6837\u5F0F\u3002\u6B64\u5916\uFF0C\u4F60\u8FD8\u53EF\u4EE5\u901A\u8FC7 height
\u5C5E\u6027\u8BBE\u7F6E\u6570\u5B57\u9AD8\u5EA6\u3002
<van-rolling-text\n class="my-rolling-text"\n :height="54"\n :start-num="12345"\n :target-num="54321"\n/>\n
\n.my-rolling-text {\n --van-rolling-text-background: #1989fa;\n --van-rolling-text-color: white;\n --van-rolling-text-font-size: 24px;\n --van-rolling-text-gap: 6px;\n --van-rolling-text-item-border-radius: 5px;\n --van-rolling-text-item-width: 40px;\n}\n
\n\u901A\u8FC7 ref \u83B7\u53D6\u5230\u7EC4\u4EF6\u5B9E\u4F8B\u540E\uFF0C\u4F60\u53EF\u4EE5\u8C03\u7528 start
\u3001reset
\u65B9\u6CD5\uFF0Cstart
\u65B9\u6CD5\u7528\u4E8E\u5F00\u59CB\u52A8\u753B\uFF0Creset
\u65B9\u6CD5\u7528\u4E8E\u91CD\u7F6E\u52A8\u753B\u3002
<van-rolling-text\n ref="rollingTextRef"\n :start-num="0"\n :target-num="54321"\n :auto-start="false"\n/>\n<van-grid clickable :column-num="3">\n <van-grid-item icon="play-circle-o" :text="start" @click="start" />\n <van-grid-item icon="replay" :text="reset" @click="reset" />\n</van-grid>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const rollingTextRef = ref(null);\n const start = () => {\n rollingTextRef.value.start();\n };\n const reset = () => {\n rollingTextRef.value.reset();\n };\n return { rollingTextRef, start, reset };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
start-num | \n\u8D77\u59CB\u6570\u503C | \nnumber | \n0 | \n
target-num | \n\u76EE\u6807\u6570\u503C | \nnumber | \n- | \n
text-list | \n\u5185\u5BB9\u6570\u7EC4\uFF0C\u7528\u4E8E\u7FFB\u8F6C\u975E\u6570\u5B57\u5185\u5BB9 | \nstring[] | \n[] | \n
duration | \n\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u4E3A\u79D2 | \nnumber | \n2 | \n
direction | \n\u6587\u672C\u7FFB\u6EDA\u65B9\u5411\uFF0C\u503C\u4E3A down \u548C up | \nstring | \ndown | \n
auto-start | \n\u662F\u5426\u81EA\u52A8\u5F00\u59CB\u52A8\u753B | \nboolean | \ntrue | \n
stop-order | \n\u5404\u4E2A\u6570\u4F4D\u52A8\u753B\u505C\u6B62\u5148\u540E\u987A\u5E8F\uFF0C\u503C\u4E3A ltr \u548C rtl | \nstring | \nltr | \n
height | \n\u6570\u5B57\u9AD8\u5EA6\uFF0C\u5355\u4F4D\u4E3A px | \nnumber | \n40 | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 RollingText \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
start | \n\u5F00\u59CB\u52A8\u753B | \n- | \n- | \n
reset | \n\u91CD\u7F6E\u52A8\u753B | \n- | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n RollingTextProps,\n RollingTextInstance,\n RollingTextDirection,\n RollingTextStopOrder,\n} from 'vant';\n
\nRollingTextInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { RollingTextInstance } from 'vant';\n\nconst rollingTextRef = ref<RollingTextInstance>();\n\nrollingTextRef.value?.start();\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-rolling-text-background | \ninherit | \n\u5355\u4E2A\u6570\u4F4D\u80CC\u666F\u8272 | \n
--van-rolling-text-color | \nvar(--van-text-color) | \n\u6570\u5B57\u989C\u8272 | \n
--van-rolling-text-font-size | \nvar(--van-font-size-md) | \n\u5B57\u4F53\u5927\u5C0F | \n
--van-rolling-text-gap | \n0px | \n\u6570\u4F4D\u4E4B\u95F4\u7684\u95F4\u9694 | \n
--van-rolling-text-item-width | \n15px | \n\u5355\u4E2A\u6570\u4F4D\u5BBD\u5EA6 | \n
--van-rolling-text-item-border-radius | \n0px | \n\u5355\u4E2A\u6570\u4F4D\u8FB9\u6846\u5706\u89D2 | \n
Vant \u57FA\u4E8E CSS \u53D8\u91CF\u63D0\u4F9B\u4E86\u4E3B\u9898\u5B9A\u5236\u7684\u80FD\u529B\uFF0C\u53EF\u4EE5\u5BF9\u7EC4\u4EF6\u6837\u5F0F\u8FDB\u884C\u7EDF\u4E00\u4FEE\u6539\uFF0C\u8BE6\u89C1 ConfigProvider \u5168\u5C40\u914D\u7F6E \u7EC4\u4EF6\u3002
\n\u5982\u679C\u4E3B\u9898\u5B9A\u5236\u4E0D\u80FD\u6EE1\u8DB3\u4F60\u7684\u9700\u6C42\uFF0C\u4E5F\u53EF\u4EE5\u901A\u8FC7\u81EA\u5B9A\u4E49\u6837\u5F0F\u7C7B\u6765\u8986\u76D6\u9ED8\u8BA4\u6837\u5F0F\uFF0C\u53C2\u8003\u4E0B\u9762\u7684\u793A\u4F8B\uFF1A
\n<template>\n <van-button class="my-button">\u6309\u94AE</van-button>\n</template>\n\n<style>\n /** \u8986\u76D6 Button \u6700\u5916\u5C42\u5143\u7D20\u7684\u6837\u5F0F */\n .my-button {\n width: 200px;\n }\n\n /** \u8986\u76D6 Button \u5185\u90E8\u5B50\u5143\u7D20\u7684\u6837\u5F0F */\n .my-button .van-button__text {\n color: red;\n }\n</style>\n
\n\u5728 HTML \u4E2D\u4F7F\u7528 Vant \u7EC4\u4EF6\u65F6\uFF0C\u4F60\u53EF\u80FD\u4F1A\u78B0\u5230\u90E8\u5206\u793A\u4F8B\u4EE3\u7801\u65E0\u6CD5\u6B63\u786E\u6E32\u67D3\u7684\u60C5\u51B5\uFF0C\u6BD4\u5982\u4E0B\u9762\u7684\u7528\u6CD5\uFF1A
\n<van-cell-group>\n <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />\n <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />\n</van-cell-group>\n
\n\u8FD9\u662F\u56E0\u4E3A HTML \u5E76\u4E0D\u652F\u6301\u81EA\u95ED\u5408\u7684\u81EA\u5B9A\u4E49\u5143\u7D20\uFF0C\u4E5F\u5C31\u662F\u8BF4 <van-cell />
\u8FD9\u6837\u7684\u8BED\u6CD5\u662F\u4E0D\u88AB\u8BC6\u522B\u7684\uFF0C\u4F7F\u7528\u5B8C\u6574\u7684\u95ED\u5408\u6807\u7B7E\u53EF\u4EE5\u907F\u514D\u8FD9\u4E2A\u95EE\u9898\uFF1A
<van-cell-group>\n <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9"></van-cell>\n <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9"></van-cell>\n</van-cell-group>\n
\n\u5728\u5355\u6587\u4EF6\u7EC4\u4EF6\u3001\u5B57\u7B26\u4E32\u6A21\u677F\u548C JSX \u4E2D\u53EF\u4EE5\u4F7F\u7528\u81EA\u95ED\u5408\u7684\u81EA\u5B9A\u4E49\u5143\u7D20\uFF0C\u56E0\u6B64\u4E0D\u4F1A\u51FA\u73B0\u8FD9\u4E2A\u95EE\u9898\u3002
\n\u8FD9\u662F\u56E0\u4E3A iOS Safari \u9ED8\u8BA4\u4E0D\u4F1A\u89E6\u53D1 :active
\u4F2A\u7C7B\uFF0C\u89E3\u51B3\u65B9\u6CD5\u662F\u5728 body
\u6807\u7B7E\u4E0A\u6DFB\u52A0\u4E00\u4E2A\u7A7A\u7684 ontouchstart
\u5C5E\u6027\uFF1A
<body ontouchstart="">\n ...\n</body>\n
\n\u53C2\u8003\u94FE\u63A5\uFF1Astackoverflow - :active pseudo-class doesn\'t work in mobile safari
\nSelect \u662F\u684C\u9762\u7AEF\u5E38\u7528\u7684\u7EC4\u4EF6\uFF0C\u4F46\u5B83\u7684\u4EA4\u4E92\u5F62\u5F0F\u4E0D\u9002\u5408\u79FB\u52A8\u7AEF\u3002
\n\u5728\u79FB\u52A8\u7AEF\uFF0C\u6211\u4EEC\u63A8\u8350\u4F7F\u7528 Picker \u9009\u62E9\u5668\u7EC4\u4EF6 \u4F5C\u4E3A\u4EE3\u66FF\u3002
\nVant \u6240\u6709\u7EC4\u4EF6\u90FD\u662F\u57FA\u4E8E Vue \u6846\u67B6\u5B9E\u73B0\u7684\uFF0C\u6CA1\u6709\u9488\u5BF9 uni-app \u8FDB\u884C\u9002\u914D\uFF0C\u56E0\u6B64\u4E0D\u4FDD\u8BC1\u5404\u4E2A\u7EC4\u4EF6\u5728 uni-app \u4E0B\u7684\u53EF\u7528\u6027\u3002
\n\u5982\u679C\u4F60\u5728 uni-app \u4E2D\u4F7F\u7528 Vant \u9047\u5230\u95EE\u9898\uFF0C\u5EFA\u8BAE\u5411 uni-app \u8FDB\u884C\u53CD\u9988\u3002
\n\u53C2\u89C1\u684C\u9762\u7AEF\u9002\u914D\u3002
\n\u53C2\u89C1\u6D4F\u89C8\u5668\u9002\u914D\u3002
\nVant \u57FA\u4E8E CSS \u53D8\u91CF\u63D0\u4F9B\u4E86\u4E3B\u9898\u5B9A\u5236\u7684\u80FD\u529B\uFF0C\u53EF\u4EE5\u5BF9\u7EC4\u4EF6\u6837\u5F0F\u8FDB\u884C\u7EDF\u4E00\u4FEE\u6539\uFF0C\u8BE6\u89C1 ConfigProvider \u5168\u5C40\u914D\u7F6E \u7EC4\u4EF6\u3002
\n\u5982\u679C\u4E3B\u9898\u5B9A\u5236\u4E0D\u80FD\u6EE1\u8DB3\u4F60\u7684\u9700\u6C42\uFF0C\u4E5F\u53EF\u4EE5\u901A\u8FC7\u81EA\u5B9A\u4E49\u6837\u5F0F\u7C7B\u6765\u8986\u76D6\u9ED8\u8BA4\u6837\u5F0F\uFF0C\u53C2\u8003\u4E0B\u9762\u7684\u793A\u4F8B\uFF1A
\n<template>\n <van-button class="my-button">\u6309\u94AE</van-button>\n</template>\n\n<style>\n /** \u8986\u76D6 Button \u6700\u5916\u5C42\u5143\u7D20\u7684\u6837\u5F0F */\n .my-button {\n width: 200px;\n }\n\n /** \u8986\u76D6 Button \u5185\u90E8\u5B50\u5143\u7D20\u7684\u6837\u5F0F */\n .my-button .van-button__text {\n color: red;\n }\n</style>\n
\n\u5728 HTML \u4E2D\u4F7F\u7528 Vant \u7EC4\u4EF6\u65F6\uFF0C\u4F60\u53EF\u80FD\u4F1A\u78B0\u5230\u90E8\u5206\u793A\u4F8B\u4EE3\u7801\u65E0\u6CD5\u6B63\u786E\u6E32\u67D3\u7684\u60C5\u51B5\uFF0C\u6BD4\u5982\u4E0B\u9762\u7684\u7528\u6CD5\uFF1A
\n<van-cell-group>\n <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />\n <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />\n</van-cell-group>\n
\n\u8FD9\u662F\u56E0\u4E3A HTML \u5E76\u4E0D\u652F\u6301\u81EA\u95ED\u5408\u7684\u81EA\u5B9A\u4E49\u5143\u7D20\uFF0C\u4E5F\u5C31\u662F\u8BF4 <van-cell />
\u8FD9\u6837\u7684\u8BED\u6CD5\u662F\u4E0D\u88AB\u8BC6\u522B\u7684\uFF0C\u4F7F\u7528\u5B8C\u6574\u7684\u95ED\u5408\u6807\u7B7E\u53EF\u4EE5\u907F\u514D\u8FD9\u4E2A\u95EE\u9898\uFF1A
<van-cell-group>\n <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9"></van-cell>\n <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9"></van-cell>\n</van-cell-group>\n
\n\u5728\u5355\u6587\u4EF6\u7EC4\u4EF6\u3001\u5B57\u7B26\u4E32\u6A21\u677F\u548C JSX \u4E2D\u53EF\u4EE5\u4F7F\u7528\u81EA\u95ED\u5408\u7684\u81EA\u5B9A\u4E49\u5143\u7D20\uFF0C\u56E0\u6B64\u4E0D\u4F1A\u51FA\u73B0\u8FD9\u4E2A\u95EE\u9898\u3002
\n\u8FD9\u662F\u56E0\u4E3A iOS Safari \u9ED8\u8BA4\u4E0D\u4F1A\u89E6\u53D1 :active
\u4F2A\u7C7B\uFF0C\u89E3\u51B3\u65B9\u6CD5\u662F\u5728 body
\u6807\u7B7E\u4E0A\u6DFB\u52A0\u4E00\u4E2A\u7A7A\u7684 ontouchstart
\u5C5E\u6027\uFF1A
<body ontouchstart="">\n ...\n</body>\n
\n\u53C2\u8003\u94FE\u63A5\uFF1Astackoverflow - :active pseudo-class doesn\'t work in mobile safari
\nSelect \u662F\u684C\u9762\u7AEF\u5E38\u7528\u7684\u7EC4\u4EF6\uFF0C\u4F46\u5B83\u7684\u4EA4\u4E92\u5F62\u5F0F\u4E0D\u9002\u5408\u79FB\u52A8\u7AEF\u3002
\n\u5728\u79FB\u52A8\u7AEF\uFF0C\u6211\u4EEC\u63A8\u8350\u4F7F\u7528 Picker \u9009\u62E9\u5668\u7EC4\u4EF6 \u4F5C\u4E3A\u4EE3\u66FF\u3002
\nVant \u6240\u6709\u7EC4\u4EF6\u90FD\u662F\u57FA\u4E8E Vue \u6846\u67B6\u5B9E\u73B0\u7684\uFF0C\u6CA1\u6709\u9488\u5BF9 uni-app \u8FDB\u884C\u9002\u914D\uFF0C\u56E0\u6B64\u4E0D\u4FDD\u8BC1\u5404\u4E2A\u7EC4\u4EF6\u5728 uni-app \u4E0B\u7684\u53EF\u7528\u6027\u3002
\n\u5982\u679C\u4F60\u5728 uni-app \u4E2D\u4F7F\u7528 Vant \u9047\u5230\u95EE\u9898\uFF0C\u5EFA\u8BAE\u5411 uni-app \u8FDB\u884C\u53CD\u9988\u3002
\n\u53C2\u89C1\u684C\u9762\u7AEF\u9002\u914D\u3002
\n\u53C2\u89C1\u6D4F\u89C8\u5668\u9002\u914D\u3002
\nUsed to divide the page into blocks of equal width in the horizontal direction for displaying content or page navigation.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Grid, GridItem } from 'vant';\n\nconst app = createApp();\napp.use(Grid);\napp.use(GridItem);\n
\n<van-grid>\n <van-grid-item icon="photo-o" text="Text" />\n <van-grid-item icon="photo-o" text="Text" />\n <van-grid-item icon="photo-o" text="Text" />\n <van-grid-item icon="photo-o" text="Text" />\n</van-grid>\n
\n<van-grid :column-num="3">\n <van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="Text" />\n</van-grid>\n
\n<van-grid :border="false" :column-num="3">\n <van-grid-item>\n <van-image\n src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"\n />\n </van-grid-item>\n <van-grid-item>\n <van-image\n src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"\n />\n </van-grid-item>\n <van-grid-item>\n <van-image\n src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg"\n />\n </van-grid-item>\n</van-grid>\n
\n<van-grid square>\n <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="Text" />\n</van-grid>\n
\n<van-grid :gutter="10">\n <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="Text" />\n</van-grid>\n
\n<van-grid direction="horizontal" :column-num="3">\n <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n</van-grid>\n
\n<van-grid clickable :column-num="2">\n <van-grid-item icon="home-o" text="Vue Router" to="/" />\n <van-grid-item icon="search" text="URL" url="https://github.com" />\n</van-grid>\n
\n<van-grid :column-num="2">\n <van-grid-item icon="home-o" text="Text" dot />\n <van-grid-item icon="search" text="Text" badge="99+" />\n</van-grid>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
column-num | \nColumn Num | \nnumber | string | \n4 | \n
icon-size | \nIcon size | \nnumber | string | \n28px | \n
gutter | \nGutter | \nnumber | string | \n0 | \n
border | \nWhether to show border | \nboolean | \ntrue | \n
center | \nWhether to center content | \nboolean | \ntrue | \n
square | \nWhether to be square shape | \nboolean | \nfalse | \n
clickable | \nWhether to show click feedback when clicked | \nboolean | \nfalse | \n
direction | \nContent arrangement direction, can be set to horizontal | \nstring | \nvertical | \n
reverse | \nWhether to reverse the position of icon and text | \nboolean | \nfalse | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
text | \nText | \nstring | \n- | \n
icon | \nIcon name or URL | \nstring | \n- | \n
icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
icon-color | \nIcon color | \nstring | \n- | \n
dot | \nWhether to show red dot | \nboolean | \nfalse | \n
badge | \nContent of the badge | \nnumber | string | \n- | \n
badge-props | \nProps of Badge, see Badge - props | \nBadgeProps | \n- | \n
url | \nLink URL | \nstring | \n- | \n
to | \nThe target route should navigate to when clicked on, same as the to prop of Vue Router | \nstring | object | \n- | \n
replace | \nIf true, the navigation will not leave a history record | \nboolean | \nfalse | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when component is clicked | \nevent: MouseEvent | \n
Name | \nDescription | \n
---|---|
default | \nCustom content | \n
icon | \nCustom icon | \n
text | \nCustom text | \n
The component exports the following type definitions:
\nimport type { GridProps, GridDirection, GridItemProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-grid-item-content-padding | \nvar(--van-padding-md) var(--van-padding-xs) | \n- | \n
--van-grid-item-content-background | \nvar(--van-background-2) | \n- | \n
--van-grid-item-content-active-color | \nvar(--van-active-color) | \n- | \n
--van-grid-item-icon-size | \n28px | \n- | \n
--van-grid-item-text-color | \nvar(--van-text-color) | \n- | \n
--van-grid-item-text-font-size | \nvar(--van-font-size-sm) | \n- | \n
Used to divide the page into blocks of equal width in the horizontal direction for displaying content or page navigation.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Grid, GridItem } from 'vant';\n\nconst app = createApp();\napp.use(Grid);\napp.use(GridItem);\n
\n<van-grid>\n <van-grid-item icon="photo-o" text="Text" />\n <van-grid-item icon="photo-o" text="Text" />\n <van-grid-item icon="photo-o" text="Text" />\n <van-grid-item icon="photo-o" text="Text" />\n</van-grid>\n
\n<van-grid :column-num="3">\n <van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="Text" />\n</van-grid>\n
\n<van-grid :border="false" :column-num="3">\n <van-grid-item>\n <van-image\n src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"\n />\n </van-grid-item>\n <van-grid-item>\n <van-image\n src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"\n />\n </van-grid-item>\n <van-grid-item>\n <van-image\n src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg"\n />\n </van-grid-item>\n</van-grid>\n
\n<van-grid square>\n <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="Text" />\n</van-grid>\n
\n<van-grid :gutter="10">\n <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="Text" />\n</van-grid>\n
\n<van-grid direction="horizontal" :column-num="3">\n <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n</van-grid>\n
\n<van-grid clickable :column-num="2">\n <van-grid-item icon="home-o" text="Vue Router" to="/" />\n <van-grid-item icon="search" text="URL" url="https://github.com" />\n</van-grid>\n
\n<van-grid :column-num="2">\n <van-grid-item icon="home-o" text="Text" dot />\n <van-grid-item icon="search" text="Text" badge="99+" />\n</van-grid>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
column-num | \nColumn Num | \nnumber | string | \n4 | \n
icon-size | \nIcon size | \nnumber | string | \n28px | \n
gutter | \nGutter | \nnumber | string | \n0 | \n
border | \nWhether to show border | \nboolean | \ntrue | \n
center | \nWhether to center content | \nboolean | \ntrue | \n
square | \nWhether to be square shape | \nboolean | \nfalse | \n
clickable | \nWhether to show click feedback when clicked | \nboolean | \nfalse | \n
direction | \nContent arrangement direction, can be set to horizontal | \nstring | \nvertical | \n
reverse | \nWhether to reverse the position of icon and text | \nboolean | \nfalse | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
text | \nText | \nstring | \n- | \n
icon | \nIcon name or URL | \nstring | \n- | \n
icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
icon-color | \nIcon color | \nstring | \n- | \n
dot | \nWhether to show red dot | \nboolean | \nfalse | \n
badge | \nContent of the badge | \nnumber | string | \n- | \n
badge-props | \nProps of Badge, see Badge - props | \nBadgeProps | \n- | \n
url | \nLink URL | \nstring | \n- | \n
to | \nThe target route should navigate to when clicked on, same as the to prop of Vue Router | \nstring | object | \n- | \n
replace | \nIf true, the navigation will not leave a history record | \nboolean | \nfalse | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when component is clicked | \nevent: MouseEvent | \n
Name | \nDescription | \n
---|---|
default | \nCustom content | \n
icon | \nCustom icon | \n
text | \nCustom text | \n
The component exports the following type definitions:
\nimport type { GridProps, GridDirection, GridItemProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-grid-item-content-padding | \nvar(--van-padding-md) var(--van-padding-xs) | \n- | \n
--van-grid-item-content-background | \nvar(--van-background-2) | \n- | \n
--van-grid-item-content-active-color | \nvar(--van-active-color) | \n- | \n
--van-grid-item-icon-size | \n28px | \n- | \n
--van-grid-item-text-color | \nvar(--van-text-color) | \n- | \n
--van-grid-item-text-font-size | \nvar(--van-font-size-sm) | \n- | \n
Attaching an event when the component is mounted
and activated
, then removing the event when the component is unmounted
and deactivated
.
import { ref } from 'vue';\nimport { useEventListener } from '@vant/use';\n\nexport default {\n setup() {\n // attach the resize event to window\n useEventListener('resize', () => {\n console.log('window resize');\n });\n\n // attach the click event to the body element\n useEventListener(\n 'click',\n () => {\n console.log('click body');\n },\n { target: document.body },\n );\n },\n};\n
\nuseEventListener
will return a cleanup
function\uFF0Cyou can call it to remove the event listener.
import { ref } from 'vue';\nimport { useEventListener } from '@vant/use';\n\nexport default {\n setup() {\n const cleanup = useEventListener('resize', () => {\n console.log('window resize');\n });\n\n cleanup();\n },\n};\n
\ntype Options = {\n target?: EventTarget | Ref<EventTarget>;\n capture?: boolean;\n passive?: boolean;\n};\n\nfunction useEventListener(\n type: string,\n listener: EventListener,\n options?: Options,\n): () => void;\n
\nName | \nDescription | \nType | \nDefault Value | \n
---|---|---|---|
type | \nEvent type | \nstring | \n- | \n
listener | \nCallback function | \nEventListener | \n- | \n
options | \nOptions | \nOptions | \n- | \n
Name | \nDescription | \nType | \nDefault Value | \n
---|---|---|---|
target | \nTarget element | \nEventTarget | Ref<EventTarget> | \nwindow | \n
capture | \nWhether to enable capture | \nboolean | \nfalse | \n
passive | \nif true, indicates that the listener will never call preventDefault() | \nboolean | \nfalse | \n
Attaching an event when the component is mounted
and activated
, then removing the event when the component is unmounted
and deactivated
.
import { ref } from 'vue';\nimport { useEventListener } from '@vant/use';\n\nexport default {\n setup() {\n // attach the resize event to window\n useEventListener('resize', () => {\n console.log('window resize');\n });\n\n // attach the click event to the body element\n useEventListener(\n 'click',\n () => {\n console.log('click body');\n },\n { target: document.body },\n );\n },\n};\n
\nuseEventListener
will return a cleanup
function\uFF0Cyou can call it to remove the event listener.
import { ref } from 'vue';\nimport { useEventListener } from '@vant/use';\n\nexport default {\n setup() {\n const cleanup = useEventListener('resize', () => {\n console.log('window resize');\n });\n\n cleanup();\n },\n};\n
\ntype Options = {\n target?: EventTarget | Ref<EventTarget>;\n capture?: boolean;\n passive?: boolean;\n};\n\nfunction useEventListener(\n type: string,\n listener: EventListener,\n options?: Options,\n): () => void;\n
\nName | \nDescription | \nType | \nDefault Value | \n
---|---|---|---|
type | \nEvent type | \nstring | \n- | \n
listener | \nCallback function | \nEventListener | \n- | \n
options | \nOptions | \nOptions | \n- | \n
Name | \nDescription | \nType | \nDefault Value | \n
---|---|---|---|
target | \nTarget element | \nEventTarget | Ref<EventTarget> | \nwindow | \n
capture | \nWhether to enable capture | \nboolean | \nfalse | \n
passive | \nif true, indicates that the listener will never call preventDefault() | \nboolean | \nfalse | \n
\u5C06\u4E00\u7EC4\u5185\u5BB9\u653E\u7F6E\u5728\u591A\u4E2A\u6298\u53E0\u9762\u677F\u4E2D\uFF0C\u70B9\u51FB\u9762\u677F\u7684\u6807\u9898\u53EF\u4EE5\u5C55\u5F00\u6216\u6536\u7F29\u5176\u5185\u5BB9\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Collapse, CollapseItem } from 'vant';\n\nconst app = createApp();\napp.use(Collapse);\napp.use(CollapseItem);\n
\n\u901A\u8FC7 v-model
\u63A7\u5236\u5C55\u5F00\u7684\u9762\u677F\u5217\u8868\uFF0CactiveNames
\u4E3A\u6570\u7EC4\u683C\u5F0F\u3002
<van-collapse v-model="activeNames">\n <van-collapse-item title="\u6807\u98981" name="1">\n \u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C\u3002\n </van-collapse-item>\n <van-collapse-item title="\u6807\u98982" name="2">\n \u6280\u672F\u65E0\u975E\u5C31\u662F\u90A3\u4E9B\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002\n </van-collapse-item>\n <van-collapse-item title="\u6807\u98983" name="3">\n \u5728\u4EE3\u7801\u9605\u8BFB\u8FC7\u7A0B\u4E2D\u4EBA\u4EEC\u8BF4\u810F\u8BDD\u7684\u9891\u7387\u662F\u8861\u91CF\u4EE3\u7801\u8D28\u91CF\u7684\u552F\u4E00\u6807\u51C6\u3002\n </van-collapse-item>\n</van-collapse>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeNames = ref(['1']);\n return { activeNames };\n },\n};\n
\n\u901A\u8FC7 accordion
\u53EF\u4EE5\u8BBE\u7F6E\u4E3A\u624B\u98CE\u7434\u6A21\u5F0F\uFF0C\u6700\u591A\u5C55\u5F00\u4E00\u4E2A\u9762\u677F\uFF0C\u6B64\u65F6 activeName
\u4E3A\u5B57\u7B26\u4E32\u683C\u5F0F\u3002
<van-collapse v-model="activeName" accordion>\n <van-collapse-item title="\u6807\u98981" name="1">\n \u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C\u3002\n </van-collapse-item>\n <van-collapse-item title="\u6807\u98982" name="2">\n \u6280\u672F\u65E0\u975E\u5C31\u662F\u90A3\u4E9B\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002\n </van-collapse-item>\n <van-collapse-item title="\u6807\u98983" name="3">\n \u5728\u4EE3\u7801\u9605\u8BFB\u8FC7\u7A0B\u4E2D\u4EBA\u4EEC\u8BF4\u810F\u8BDD\u7684\u9891\u7387\u662F\u8861\u91CF\u4EE3\u7801\u8D28\u91CF\u7684\u552F\u4E00\u6807\u51C6\u3002\n </van-collapse-item>\n</van-collapse>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeName = ref('1');\n return { activeName };\n },\n};\n
\n\u901A\u8FC7 disabled
\u5C5E\u6027\u6765\u7981\u7528\u5355\u4E2A\u9762\u677F\u3002
<van-collapse v-model="activeNames">\n <van-collapse-item title="\u6807\u98981" name="1">\n \u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C\u3002\n </van-collapse-item>\n <van-collapse-item title="\u6807\u98982" name="2" disabled>\n \u6280\u672F\u65E0\u975E\u5C31\u662F\u90A3\u4E9B\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002\n </van-collapse-item>\n <van-collapse-item title="\u6807\u98983" name="3" disabled>\n \u5728\u4EE3\u7801\u9605\u8BFB\u8FC7\u7A0B\u4E2D\u4EBA\u4EEC\u8BF4\u810F\u8BDD\u7684\u9891\u7387\u662F\u8861\u91CF\u4EE3\u7801\u8D28\u91CF\u7684\u552F\u4E00\u6807\u51C6\u3002\n </van-collapse-item>\n</van-collapse>\n
\n\u901A\u8FC7 title
\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u6807\u9898\u680F\u7684\u5185\u5BB9\u3002
<van-collapse v-model="activeNames">\n <van-collapse-item name="1">\n <template #title>\n <div>\u6807\u98981 <van-icon name="question-o" /></div>\n </template>\n \u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C\u3002\n </van-collapse-item>\n <van-collapse-item title="\u6807\u98982" name="2" icon="shop-o">\n \u6280\u672F\u65E0\u975E\u5C31\u662F\u90A3\u4E9B\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002\n </van-collapse-item>\n</van-collapse>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeNames = ref(['1']);\n return { activeNames };\n },\n};\n
\n\u901A\u8FC7 Collapse
\u5B9E\u4F8B\u4E0A\u7684 toggleAll
\u65B9\u6CD5\u53EF\u4EE5\u5B9E\u73B0\u5168\u90E8\u5C55\u5F00\u4E0E\u5168\u90E8\u5207\u6362\u3002
<van-collapse v-model="activeNames" ref="collapse">\n <van-collapse-item title="\u6807\u98981" name="1">\n \u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C\u3002\n </van-collapse-item>\n <van-collapse-item title="\u6807\u98982" name="2">\n \u6280\u672F\u65E0\u975E\u5C31\u662F\u90A3\u4E9B\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002\n </van-collapse-item>\n <van-collapse-item title="\u6807\u98983" name="3">\n \u5728\u4EE3\u7801\u9605\u8BFB\u8FC7\u7A0B\u4E2D\u4EBA\u4EEC\u8BF4\u810F\u8BDD\u7684\u9891\u7387\u662F\u8861\u91CF\u4EE3\u7801\u8D28\u91CF\u7684\u552F\u4E00\u6807\u51C6\u3002\n </van-collapse-item>\n</van-collapse>\n\n<van-button type="primary" @click="openAll">\u5168\u90E8\u5C55\u5F00</van-button>\n<van-button type="primary" @click="toggleAll">\u5168\u90E8\u5207\u6362</van-button>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeNames = ref(['1']);\n const collapse = ref(null);\n\n const openAll = () => {\n collapse.value.toggleAll(true);\n }\n const toggleAll = () => {\n collapse.value.toggleAll();\n },\n\n return {\n activeNames,\n openAll,\n toggleAll,\n collapse,\n };\n },\n};\n
\n\n\nTips: \u624B\u98CE\u7434\u6A21\u5F0F\u4E0B\u65E0\u6CD5\u4F7F\u7528 toggleAll \u65B9\u6CD5\u3002
\n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u5C55\u5F00\u9762\u677F\u7684 name | \n\u624B\u98CE\u7434\u6A21\u5F0F\uFF1Anumber | string \u975E\u624B\u98CE\u7434\u6A21\u5F0F\uFF1A(number | string)[] | \n- | \n
accordion | \n\u662F\u5426\u5F00\u542F\u624B\u98CE\u7434\u6A21\u5F0F | \nboolean | \nfalse | \n
border | \n\u662F\u5426\u663E\u793A\u5916\u8FB9\u6846 | \nboolean | \ntrue | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u5207\u6362\u9762\u677F\u65F6\u89E6\u53D1 | \nactiveNames: \u7C7B\u578B\u4E0E v-model \u7ED1\u5B9A\u7684\u503C\u4E00\u81F4 | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
name | \n\u552F\u4E00\u6807\u8BC6\u7B26\uFF0C\u9ED8\u8BA4\u4E3A\u7D22\u5F15\u503C | \nnumber | string | \nindex | \n
icon | \n\u6807\u9898\u680F\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n- | \n
size | \n\u6807\u9898\u680F\u5927\u5C0F\uFF0C\u53EF\u9009\u503C\u4E3A large | \nstring | \n- | \n
title | \n\u6807\u9898\u680F\u5DE6\u4FA7\u5185\u5BB9 | \nnumber | string | \n- | \n
value | \n\u6807\u9898\u680F\u53F3\u4FA7\u5185\u5BB9 | \nnumber | string | \n- | \n
label | \n\u6807\u9898\u680F\u63CF\u8FF0\u4FE1\u606F | \nnumber | string | \n- | \n
border | \n\u662F\u5426\u663E\u793A\u5185\u8FB9\u6846 | \nboolean | \ntrue | \n
is-link | \n\u662F\u5426\u5C55\u793A\u6807\u9898\u680F\u53F3\u4FA7\u7BAD\u5934\u5E76\u5F00\u542F\u70B9\u51FB\u53CD\u9988 | \nboolean | \ntrue | \n
disabled | \n\u662F\u5426\u7981\u7528\u9762\u677F | \nboolean | \nfalse | \n
readonly | \n\u662F\u5426\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u53EA\u8BFB\u72B6\u6001\u4E0B\u65E0\u6CD5\u64CD\u4F5C\u9762\u677F | \nboolean | \nfalse | \n
lazy-render | \n\u662F\u5426\u5728\u9996\u6B21\u5C55\u5F00\u65F6\u624D\u6E32\u67D3\u9762\u677F\u5185\u5BB9 | \nboolean | \ntrue | \n
title-class | \n\u5DE6\u4FA7\u6807\u9898\u989D\u5916\u7C7B\u540D | \nstring | \n- | \n
value-class | \n\u53F3\u4FA7\u5185\u5BB9\u989D\u5916\u7C7B\u540D | \nstring | \n- | \n
label-class | \n\u63CF\u8FF0\u4FE1\u606F\u989D\u5916\u7C7B\u540D | \nstring | \n- | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 CollapseItem \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
toggleAll | \n\u5207\u6362\u6240\u6709\u9762\u677F\u5C55\u5F00\u72B6\u6001\uFF0C\u4F20 true \u4E3A\u5168\u90E8\u5C55\u5F00\uFF0Cfalse \u4E3A\u5168\u90E8\u6536\u8D77\uFF0C\u4E0D\u4F20\u53C2\u4E3A\u5168\u90E8\u5207\u6362 | \noptions?: boolean | object | \n- | \n
import { ref } from 'vue';\nimport type { CollapseInstance } from 'vant';\n\nconst collapseRef = ref<CollapseInstance>();\n\n// \u5168\u90E8\u5207\u6362\ncollapseRef.value?.toggleAll();\n// \u5168\u90E8\u5C55\u5F00\ncollapseRef.value?.toggleAll(true);\n// \u5168\u90E8\u6536\u8D77\ncollapseRef.value?.toggleAll(false);\n\n// \u5168\u90E8\u5168\u90E8\u5207\u6362\uFF0C\u5E76\u8DF3\u8FC7\u7981\u7528\u7684\u590D\u9009\u6846\ncollapseRef.value?.toggleAll({\n skipDisabled: true,\n});\n// \u5168\u90E8\u9009\u4E2D\uFF0C\u5E76\u8DF3\u8FC7\u7981\u7528\u7684\u590D\u9009\u6846\ncollapseRef.value?.toggleAll({\n expanded: true,\n skipDisabled: true,\n});\n
\n\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 CollapseItem \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
toggle | \n\u5207\u6362\u9762\u677F\u5C55\u5F00\u72B6\u6001\uFF0C\u4F20 true \u4E3A\u5C55\u5F00\uFF0Cfalse \u4E3A\u6536\u8D77\uFF0C\u4E0D\u4F20\u53C2\u4E3A\u5207\u6362 | \nexpand?: boolean | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n CollapseProps,\n CollapseItemProps,\n CollapseItemInstance,\n CollapseToggleAllOptions,\n} from 'vant';\n
\nCollapseItemInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { CollapseItemInstance } from 'vant';\n\nconst collapseItemRef = ref<CollapseItemInstance>();\n\ncollapseItemRef.value?.toggle();\n
\n\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u9762\u677F\u5185\u5BB9 | \n
title | \n\u81EA\u5B9A\u4E49\u6807\u9898\u680F\u5DE6\u4FA7\u5185\u5BB9 | \n
value | \n\u81EA\u5B9A\u4E49\u6807\u9898\u680F\u53F3\u4FA7\u5185\u5BB9 | \n
label | \n\u81EA\u5B9A\u4E49\u6807\u9898\u680F\u63CF\u8FF0\u4FE1\u606F | \n
icon | \n\u81EA\u5B9A\u4E49\u6807\u9898\u680F\u5DE6\u4FA7\u56FE\u6807 | \n
right-icon | \n\u81EA\u5B9A\u4E49\u6807\u9898\u680F\u53F3\u4FA7\u56FE\u6807 | \n
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-collapse-item-duration | \nvar(--van-duration-base) | \n- | \n
--van-collapse-item-content-padding | \nvar(--van-padding-sm) var(--van-padding-md) | \n- | \n
--van-collapse-item-content-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-collapse-item-content-line-height | \n1.5 | \n- | \n
--van-collapse-item-content-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-collapse-item-content-background | \nvar(--van-background-2) | \n- | \n
--van-collapse-item-title-disabled-color | \nvar(--van-text-color-3) | \n- | \n
\u5C06\u4E00\u7EC4\u5185\u5BB9\u653E\u7F6E\u5728\u591A\u4E2A\u6298\u53E0\u9762\u677F\u4E2D\uFF0C\u70B9\u51FB\u9762\u677F\u7684\u6807\u9898\u53EF\u4EE5\u5C55\u5F00\u6216\u6536\u7F29\u5176\u5185\u5BB9\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Collapse, CollapseItem } from 'vant';\n\nconst app = createApp();\napp.use(Collapse);\napp.use(CollapseItem);\n
\n\u901A\u8FC7 v-model
\u63A7\u5236\u5C55\u5F00\u7684\u9762\u677F\u5217\u8868\uFF0CactiveNames
\u4E3A\u6570\u7EC4\u683C\u5F0F\u3002
<van-collapse v-model="activeNames">\n <van-collapse-item title="\u6807\u98981" name="1">\n \u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C\u3002\n </van-collapse-item>\n <van-collapse-item title="\u6807\u98982" name="2">\n \u6280\u672F\u65E0\u975E\u5C31\u662F\u90A3\u4E9B\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002\n </van-collapse-item>\n <van-collapse-item title="\u6807\u98983" name="3">\n \u5728\u4EE3\u7801\u9605\u8BFB\u8FC7\u7A0B\u4E2D\u4EBA\u4EEC\u8BF4\u810F\u8BDD\u7684\u9891\u7387\u662F\u8861\u91CF\u4EE3\u7801\u8D28\u91CF\u7684\u552F\u4E00\u6807\u51C6\u3002\n </van-collapse-item>\n</van-collapse>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeNames = ref(['1']);\n return { activeNames };\n },\n};\n
\n\u901A\u8FC7 accordion
\u53EF\u4EE5\u8BBE\u7F6E\u4E3A\u624B\u98CE\u7434\u6A21\u5F0F\uFF0C\u6700\u591A\u5C55\u5F00\u4E00\u4E2A\u9762\u677F\uFF0C\u6B64\u65F6 activeName
\u4E3A\u5B57\u7B26\u4E32\u683C\u5F0F\u3002
<van-collapse v-model="activeName" accordion>\n <van-collapse-item title="\u6807\u98981" name="1">\n \u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C\u3002\n </van-collapse-item>\n <van-collapse-item title="\u6807\u98982" name="2">\n \u6280\u672F\u65E0\u975E\u5C31\u662F\u90A3\u4E9B\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002\n </van-collapse-item>\n <van-collapse-item title="\u6807\u98983" name="3">\n \u5728\u4EE3\u7801\u9605\u8BFB\u8FC7\u7A0B\u4E2D\u4EBA\u4EEC\u8BF4\u810F\u8BDD\u7684\u9891\u7387\u662F\u8861\u91CF\u4EE3\u7801\u8D28\u91CF\u7684\u552F\u4E00\u6807\u51C6\u3002\n </van-collapse-item>\n</van-collapse>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeName = ref('1');\n return { activeName };\n },\n};\n
\n\u901A\u8FC7 disabled
\u5C5E\u6027\u6765\u7981\u7528\u5355\u4E2A\u9762\u677F\u3002
<van-collapse v-model="activeNames">\n <van-collapse-item title="\u6807\u98981" name="1">\n \u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C\u3002\n </van-collapse-item>\n <van-collapse-item title="\u6807\u98982" name="2" disabled>\n \u6280\u672F\u65E0\u975E\u5C31\u662F\u90A3\u4E9B\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002\n </van-collapse-item>\n <van-collapse-item title="\u6807\u98983" name="3" disabled>\n \u5728\u4EE3\u7801\u9605\u8BFB\u8FC7\u7A0B\u4E2D\u4EBA\u4EEC\u8BF4\u810F\u8BDD\u7684\u9891\u7387\u662F\u8861\u91CF\u4EE3\u7801\u8D28\u91CF\u7684\u552F\u4E00\u6807\u51C6\u3002\n </van-collapse-item>\n</van-collapse>\n
\n\u901A\u8FC7 title
\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u6807\u9898\u680F\u7684\u5185\u5BB9\u3002
<van-collapse v-model="activeNames">\n <van-collapse-item name="1">\n <template #title>\n <div>\u6807\u98981 <van-icon name="question-o" /></div>\n </template>\n \u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C\u3002\n </van-collapse-item>\n <van-collapse-item title="\u6807\u98982" name="2" icon="shop-o">\n \u6280\u672F\u65E0\u975E\u5C31\u662F\u90A3\u4E9B\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002\n </van-collapse-item>\n</van-collapse>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeNames = ref(['1']);\n return { activeNames };\n },\n};\n
\n\u901A\u8FC7 Collapse
\u5B9E\u4F8B\u4E0A\u7684 toggleAll
\u65B9\u6CD5\u53EF\u4EE5\u5B9E\u73B0\u5168\u90E8\u5C55\u5F00\u4E0E\u5168\u90E8\u5207\u6362\u3002
<van-collapse v-model="activeNames" ref="collapse">\n <van-collapse-item title="\u6807\u98981" name="1">\n \u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C\u3002\n </van-collapse-item>\n <van-collapse-item title="\u6807\u98982" name="2">\n \u6280\u672F\u65E0\u975E\u5C31\u662F\u90A3\u4E9B\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002\n </van-collapse-item>\n <van-collapse-item title="\u6807\u98983" name="3">\n \u5728\u4EE3\u7801\u9605\u8BFB\u8FC7\u7A0B\u4E2D\u4EBA\u4EEC\u8BF4\u810F\u8BDD\u7684\u9891\u7387\u662F\u8861\u91CF\u4EE3\u7801\u8D28\u91CF\u7684\u552F\u4E00\u6807\u51C6\u3002\n </van-collapse-item>\n</van-collapse>\n\n<van-button type="primary" @click="openAll">\u5168\u90E8\u5C55\u5F00</van-button>\n<van-button type="primary" @click="toggleAll">\u5168\u90E8\u5207\u6362</van-button>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeNames = ref(['1']);\n const collapse = ref(null);\n\n const openAll = () => {\n collapse.value.toggleAll(true);\n }\n const toggleAll = () => {\n collapse.value.toggleAll();\n },\n\n return {\n activeNames,\n openAll,\n toggleAll,\n collapse,\n };\n },\n};\n
\n\n\nTips: \u624B\u98CE\u7434\u6A21\u5F0F\u4E0B\u65E0\u6CD5\u4F7F\u7528 toggleAll \u65B9\u6CD5\u3002
\n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u5C55\u5F00\u9762\u677F\u7684 name | \n\u624B\u98CE\u7434\u6A21\u5F0F\uFF1Anumber | string \u975E\u624B\u98CE\u7434\u6A21\u5F0F\uFF1A(number | string)[] | \n- | \n
accordion | \n\u662F\u5426\u5F00\u542F\u624B\u98CE\u7434\u6A21\u5F0F | \nboolean | \nfalse | \n
border | \n\u662F\u5426\u663E\u793A\u5916\u8FB9\u6846 | \nboolean | \ntrue | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u5207\u6362\u9762\u677F\u65F6\u89E6\u53D1 | \nactiveNames: \u7C7B\u578B\u4E0E v-model \u7ED1\u5B9A\u7684\u503C\u4E00\u81F4 | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
name | \n\u552F\u4E00\u6807\u8BC6\u7B26\uFF0C\u9ED8\u8BA4\u4E3A\u7D22\u5F15\u503C | \nnumber | string | \nindex | \n
icon | \n\u6807\u9898\u680F\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n- | \n
size | \n\u6807\u9898\u680F\u5927\u5C0F\uFF0C\u53EF\u9009\u503C\u4E3A large | \nstring | \n- | \n
title | \n\u6807\u9898\u680F\u5DE6\u4FA7\u5185\u5BB9 | \nnumber | string | \n- | \n
value | \n\u6807\u9898\u680F\u53F3\u4FA7\u5185\u5BB9 | \nnumber | string | \n- | \n
label | \n\u6807\u9898\u680F\u63CF\u8FF0\u4FE1\u606F | \nnumber | string | \n- | \n
border | \n\u662F\u5426\u663E\u793A\u5185\u8FB9\u6846 | \nboolean | \ntrue | \n
is-link | \n\u662F\u5426\u5C55\u793A\u6807\u9898\u680F\u53F3\u4FA7\u7BAD\u5934\u5E76\u5F00\u542F\u70B9\u51FB\u53CD\u9988 | \nboolean | \ntrue | \n
disabled | \n\u662F\u5426\u7981\u7528\u9762\u677F | \nboolean | \nfalse | \n
readonly | \n\u662F\u5426\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u53EA\u8BFB\u72B6\u6001\u4E0B\u65E0\u6CD5\u64CD\u4F5C\u9762\u677F | \nboolean | \nfalse | \n
lazy-render | \n\u662F\u5426\u5728\u9996\u6B21\u5C55\u5F00\u65F6\u624D\u6E32\u67D3\u9762\u677F\u5185\u5BB9 | \nboolean | \ntrue | \n
title-class | \n\u5DE6\u4FA7\u6807\u9898\u989D\u5916\u7C7B\u540D | \nstring | \n- | \n
value-class | \n\u53F3\u4FA7\u5185\u5BB9\u989D\u5916\u7C7B\u540D | \nstring | \n- | \n
label-class | \n\u63CF\u8FF0\u4FE1\u606F\u989D\u5916\u7C7B\u540D | \nstring | \n- | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 CollapseItem \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
toggleAll | \n\u5207\u6362\u6240\u6709\u9762\u677F\u5C55\u5F00\u72B6\u6001\uFF0C\u4F20 true \u4E3A\u5168\u90E8\u5C55\u5F00\uFF0Cfalse \u4E3A\u5168\u90E8\u6536\u8D77\uFF0C\u4E0D\u4F20\u53C2\u4E3A\u5168\u90E8\u5207\u6362 | \noptions?: boolean | object | \n- | \n
import { ref } from 'vue';\nimport type { CollapseInstance } from 'vant';\n\nconst collapseRef = ref<CollapseInstance>();\n\n// \u5168\u90E8\u5207\u6362\ncollapseRef.value?.toggleAll();\n// \u5168\u90E8\u5C55\u5F00\ncollapseRef.value?.toggleAll(true);\n// \u5168\u90E8\u6536\u8D77\ncollapseRef.value?.toggleAll(false);\n\n// \u5168\u90E8\u5168\u90E8\u5207\u6362\uFF0C\u5E76\u8DF3\u8FC7\u7981\u7528\u7684\u590D\u9009\u6846\ncollapseRef.value?.toggleAll({\n skipDisabled: true,\n});\n// \u5168\u90E8\u9009\u4E2D\uFF0C\u5E76\u8DF3\u8FC7\u7981\u7528\u7684\u590D\u9009\u6846\ncollapseRef.value?.toggleAll({\n expanded: true,\n skipDisabled: true,\n});\n
\n\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 CollapseItem \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
toggle | \n\u5207\u6362\u9762\u677F\u5C55\u5F00\u72B6\u6001\uFF0C\u4F20 true \u4E3A\u5C55\u5F00\uFF0Cfalse \u4E3A\u6536\u8D77\uFF0C\u4E0D\u4F20\u53C2\u4E3A\u5207\u6362 | \nexpand?: boolean | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n CollapseProps,\n CollapseItemProps,\n CollapseItemInstance,\n CollapseToggleAllOptions,\n} from 'vant';\n
\nCollapseItemInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { CollapseItemInstance } from 'vant';\n\nconst collapseItemRef = ref<CollapseItemInstance>();\n\ncollapseItemRef.value?.toggle();\n
\n\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u9762\u677F\u5185\u5BB9 | \n
title | \n\u81EA\u5B9A\u4E49\u6807\u9898\u680F\u5DE6\u4FA7\u5185\u5BB9 | \n
value | \n\u81EA\u5B9A\u4E49\u6807\u9898\u680F\u53F3\u4FA7\u5185\u5BB9 | \n
label | \n\u81EA\u5B9A\u4E49\u6807\u9898\u680F\u63CF\u8FF0\u4FE1\u606F | \n
icon | \n\u81EA\u5B9A\u4E49\u6807\u9898\u680F\u5DE6\u4FA7\u56FE\u6807 | \n
right-icon | \n\u81EA\u5B9A\u4E49\u6807\u9898\u680F\u53F3\u4FA7\u56FE\u6807 | \n
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-collapse-item-duration | \nvar(--van-duration-base) | \n- | \n
--van-collapse-item-content-padding | \nvar(--van-padding-sm) var(--van-padding-md) | \n- | \n
--van-collapse-item-content-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-collapse-item-content-line-height | \n1.5 | \n- | \n
--van-collapse-item-content-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-collapse-item-content-background | \nvar(--van-background-2) | \n- | \n
--van-collapse-item-title-disabled-color | \nvar(--van-text-color-3) | \n- | \n
Highlight the specified text content. Please upgrade vant
to >= v4.8.0 before using this component.
Register component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Highlight } from 'vant';\n\nconst app = createApp();\napp.use(Highlight);\n
\nYou can specify keywords to be highlighted with keywords
and source text with source-string
.
<van-highlight :keywords="keywords" :source-string="text" />\n
\nexport default {\n setup() {\n const text =\n 'Take your time and be patient. Life itself will eventually answer all those questions it once raised for you.';\n const keywords = 'questions';\n\n return {\n text,\n keywords,\n };\n },\n};\n
\nIf you need to specific more than one keywords, you can pass in keywords
as an array.
<van-highlight :keywords="keywords" :source-string="text" />\n
\nexport default {\n setup() {\n const text =\n 'Take your time and be patient. Life itself will eventually answer all those questions it once raised for you.';\n const keywords = ['time', 'life', 'answer'];\n\n return {\n text,\n keywords,\n };\n },\n};\n
\nSet the highlight-class
of the highlighted tag to customize the style.
<van-highlight\n :keywords="keywords"\n :source-string="text"\n highlight-class="custom-class"\n/>\n
\nexport default {\n setup() {\n const text =\n 'Take your time and be patient. Life itself will eventually answer all those questions it once raised for you.';\n const keywords = 'life';\n\n return {\n text,\n keywords,\n };\n },\n};\n
\n.custom-class {\n color: red;\n}\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
auto-escape | \nWhether to automatically escape | \nboolean | \ntrue | \n
case-sensitive | \nIs case sensitive | \nboolean | \nfalse | \n
highlight-class | \nClass name of the highlight element | \nstring | \n- | \n
highlight-tag | \nHTML Tag of highlighted element | \nstring | \nspan | \n
keywords | \nExpected highlighted text | \nstring | string[] | \n- | \n
source-string | \nSource text | \nstring | \n- | \n
tag | \nHTML Tag of root element | \nstring | \ndiv | \n
unhighlight-class | \nClass name of the unhighlight element | \nstring | \n- | \n
unhighlight-tag | \nHTML Tag of unhighlighted element | \nstring | \nspan | \n
The component exports the following type definitions:
\nimport type { HighlightProps, HighlightThemeVars } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-highlight-tag-color | \nvar(--van-primary-color) | \nColor of highlighted text | \n
Highlight the specified text content. Please upgrade vant
to >= v4.8.0 before using this component.
Register component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Highlight } from 'vant';\n\nconst app = createApp();\napp.use(Highlight);\n
\nYou can specify keywords to be highlighted with keywords
and source text with source-string
.
<van-highlight :keywords="keywords" :source-string="text" />\n
\nexport default {\n setup() {\n const text =\n 'Take your time and be patient. Life itself will eventually answer all those questions it once raised for you.';\n const keywords = 'questions';\n\n return {\n text,\n keywords,\n };\n },\n};\n
\nIf you need to specific more than one keywords, you can pass in keywords
as an array.
<van-highlight :keywords="keywords" :source-string="text" />\n
\nexport default {\n setup() {\n const text =\n 'Take your time and be patient. Life itself will eventually answer all those questions it once raised for you.';\n const keywords = ['time', 'life', 'answer'];\n\n return {\n text,\n keywords,\n };\n },\n};\n
\nSet the highlight-class
of the highlighted tag to customize the style.
<van-highlight\n :keywords="keywords"\n :source-string="text"\n highlight-class="custom-class"\n/>\n
\nexport default {\n setup() {\n const text =\n 'Take your time and be patient. Life itself will eventually answer all those questions it once raised for you.';\n const keywords = 'life';\n\n return {\n text,\n keywords,\n };\n },\n};\n
\n.custom-class {\n color: red;\n}\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
auto-escape | \nWhether to automatically escape | \nboolean | \ntrue | \n
case-sensitive | \nIs case sensitive | \nboolean | \nfalse | \n
highlight-class | \nClass name of the highlight element | \nstring | \n- | \n
highlight-tag | \nHTML Tag of highlighted element | \nstring | \nspan | \n
keywords | \nExpected highlighted text | \nstring | string[] | \n- | \n
source-string | \nSource text | \nstring | \n- | \n
tag | \nHTML Tag of root element | \nstring | \ndiv | \n
unhighlight-class | \nClass name of the unhighlight element | \nstring | \n- | \n
unhighlight-tag | \nHTML Tag of unhighlighted element | \nstring | \nspan | \n
The component exports the following type definitions:
\nimport type { HighlightProps, HighlightThemeVars } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-highlight-tag-color | \nvar(--van-primary-color) | \nColor of highlighted text | \n
\u5386\u7ECF\u4E00\u5E74\u7684\u8FED\u4EE3\uFF0CVant 4.0 \u7248\u672C\u5DF2\u6B63\u5F0F\u53D1\u5E03\uFF0C\u8FD9\u662F Vant \u81EA 2017 \u5E74\u5F00\u6E90\u4EE5\u6765\u53D1\u5E03\u7684\u7B2C\u56DB\u4E2A\u91CD\u8981\u7248\u672C\u3002
\n\u5728\u672C\u6B21\u8FED\u4EE3\u4E2D\uFF0CVant \u652F\u6301\u4E86\u6DF1\u8272\u6A21\u5F0F\uFF0C\u589E\u52A0\u4E94\u4E2A\u65B0\u7EC4\u4EF6\uFF0C\u6539\u5584\u5DE5\u5177\u51FD\u6570 API \u5E76\u91CD\u6784 Picker \u7B49\u7EC4\u4EF6\uFF0C\u540C\u65F6\u7EE7\u7EED\u5728\u8F7B\u91CF\u5316\u548C\u6613\u7528\u6027\u65B9\u9762\u505A\u51FA\u6539\u8FDB\u3002
\nVant 4.0 \u652F\u6301\u5207\u6362\u6240\u6709\u7EC4\u4EF6\u4E3A\u6DF1\u8272\u6A21\u5F0F\u3002
\n\u53EA\u9700\u8981\u628A ConfigProvider \u7EC4\u4EF6\u7684 theme
\u5C5E\u6027\u8BBE\u7F6E\u4E3A dark
\uFF0C\u5373\u53EF\u5207\u6362\u4E3A\u6DF1\u8272\u6A21\u5F0F\uFF0C\u5C06\u9875\u9762\u4E0A\u7684\u6240\u6709 Vant \u7EC4\u4EF6\u53D8\u6210\u6DF1\u8272\u98CE\u683C\u3002
<van-config-provider theme="dark">\n <!-- child components -->\n</van-config-provider>\n
\n\n\u540C\u65F6\uFF0CVant 4.0 \u6587\u6863\u4E5F\u5DF2\u652F\u6301\u5207\u6362\u4E3A\u6DF1\u8272\u6A21\u5F0F\uFF1A
\n\nVant 4.0 \u5305\u542B\u4EE5\u4E0B\u65B0\u7EC4\u4EF6\uFF1A
\n\u5176\u4E2D\uFF0CTimePicker \u548C DatePicker \u7531\u65E7\u7248\u7684 DatetimePicker \u7EC4\u4EF6\u62C6\u5206\u800C\u6765\uFF0CDatetimePicker \u7EC4\u4EF6\u4E0D\u518D\u63D0\u4F9B\u3002\u4F60\u53EF\u4EE5\u901A\u8FC7 PickerGroup \u6765\u5B9E\u73B0\u540C\u65F6\u9009\u62E9\u65E5\u671F\u548C\u65F6\u95F4\u7684\u4EA4\u4E92\u6548\u679C\u3002
\n\nVant 4.0 \u7684\u5B89\u88C5\u4F53\u79EF\u964D\u4F4E 30%\uFF0C\u5305\u4F53\u79EF\u4FDD\u6301\u8F7B\u91CF\u3002
\n\u968F\u7740 npm \u751F\u6001\u7684\u53D1\u5C55\uFF0Cnode_modules \u6B63\u5728\u541E\u566C\u6211\u4EEC\u7684\u78C1\u76D8\u7A7A\u95F4\u3002\u4E3A\u4E86\u7F13\u89E3 node_modules \u9ED1\u6D1E\u3001\u52A0\u5FEB\u5B89\u88C5\u901F\u5EA6\uFF0C\u6211\u4EEC\u5BF9 Vant \u7684 npm \u4F9D\u8D56\u548C\u6784\u5EFA\u4EA7\u7269\u8FDB\u884C\u4E86\u4F18\u5316\u3002
\n\u76F8\u8F83\u4E8E Vant 3.6.2 \u7248\u672C\uFF0CVant 4.0.0 \u7248\u672C\u7684\u5B89\u88C5\u4F53\u79EF\u7531 7MB \u4E0B\u964D\u81F3 5MB\u3002\u4F5C\u4E3A\u5BF9\u6BD4\uFF0C\u793E\u533A\u4E2D\u4E3B\u6D41\u7EC4\u4EF6\u5E93\u7684\u5B89\u88C5\u4F53\u79EF\u666E\u904D\u5728 15MB ~ 80MB\u3002\u4F60\u53EF\u4EE5\u901A\u8FC7 packagephobia \u6765\u67E5\u8BE2 npm \u5305\u7684\u5B89\u88C5\u4F53\u79EF\u3002
\n\n\u5728\u5305\u4F53\u79EF\u4E0A\uFF0C\u672C\u6B21\u66F4\u65B0\u4F9D\u7136\u52A0\u91CF\u4E0D\u52A0\u4EF7\uFF0CMinified + Gzipped \u540E\u7684\u4F53\u79EF\u4FDD\u6301\u5728 70KB \u4EE5\u4E0B\uFF1A
\n\nVant 4.0 \u7EDF\u4E00\u4E86\u6240\u6709\u7EC4\u4EF6\u7684\u4E3B\u8272\u8C03\u3002
\n\u5728\u4E4B\u524D\u7684\u7248\u672C\u4E2D\uFF0CVant \u7EC4\u4EF6\u6709\u4E24\u79CD\u4E3B\u8272\u8C03\uFF0C\u90E8\u5206\u7EC4\u4EF6\u91C7\u7528\u84DD\u8272 #1989fa
\u4F5C\u4E3A\u4E3B\u8272\u8C03\uFF0C\u53E6\u4E00\u90E8\u5206\u5219\u91C7\u7528\u7EA2\u8272 #ee0a24
\u3002
\u4E3A\u4E86\u4FDD\u6301\u8272\u5F69\u89C4\u8303\u7684\u4E00\u81F4\u6027\uFF0C\u6211\u4EEC\u5728 Vant 4 \u4E2D\u5BF9\u4E3B\u8272\u8C03\u8FDB\u884C\u7EDF\u4E00\uFF0C\u6240\u6709\u7EC4\u4EF6\u5747\u91C7\u7528\u84DD\u8272\u4F5C\u4E3A\u4E3B\u8272\u8C03\u3002
\n\n\u7EDF\u4E00\u4E3B\u8272\u8C03\u540E\uFF0C\u4E3B\u9898\u5B9A\u5236\u4F1A\u53D8\u5F97\u66F4\u52A0\u5BB9\u6613\u3002\u6BD4\u5982\uFF0C\u4F60\u53EF\u4EE5\u8986\u76D6 --van-primary-color
\u8FD9\u4E2A CSS \u53D8\u91CF\uFF0C\u5C06\u6240\u6709\u7EC4\u4EF6\u7684\u4E3B\u8272\u8C03\u8BBE\u7F6E\u4E3A\u7EFF\u8272\uFF1A
:root {\n --van-primary-color: #07c160;\n}\n
\nVant 4.0 \u4E0D\u518D\u4F7F\u7528 babel-plugin-import \u5B9E\u73B0\u6309\u9700\u5F15\u5165\u3002
\n\u5728\u65E9\u671F\uFF0C\u7EC4\u4EF6\u5E93\u5927\u591A\u4F7F\u7528 babel-plugin-import
\u5B9E\u73B0\u6309\u9700\u5F15\u5165\uFF0C\u8FD9\u610F\u5473\u7740\u7EC4\u4EF6\u5E93\u4F1A\u5F3A\u4F9D\u8D56 Babel \u7F16\u8BD1\u3002\u4ECE Vant 4.0 \u5F00\u59CB\uFF0C\u5C06\u4E0D\u518D\u652F\u6301 babel-plugin-import
\uFF0C\u4E3B\u8981\u5E26\u6765\u4EE5\u4E0B\u6536\u76CA\uFF1A
babel-plugin-import
\u7684 import \u9650\u5236\uFF0C\u53EF\u4EE5\u4ECE Vant \u4E2D\u5BFC\u5165\u9664\u7EC4\u4EF6\u4EE5\u5916\u7684\u5185\u5BB9\uFF0C\u6BD4\u5982 Vant 4 \u4E2D\u65B0\u589E\u7684 showToast
\u65B9\u6CD5\uFF0C\u6216\u662F buttonProps
\u5BF9\u8C61\uFF1Aimport { showToast, buttonProps } from 'vant';\n
\n\u5728\u5305\u4F53\u79EF\u65B9\u9762\uFF0C\u79FB\u9664 babel-plugin-import
\u5BF9\u9879\u76EE\u7684 JS \u4F53\u79EF\u4E0D\u4F1A\u6709\u5F71\u54CD\uFF0C\u56E0\u4E3A Vant \u9ED8\u8BA4\u652F\u6301\u901A\u8FC7 Tree Shaking \u6765\u79FB\u9664\u4E0D\u9700\u8981\u7684 JS \u4EE3\u7801\uFF0C\u800C CSS \u4EE3\u7801\u53EF\u4EE5\u901A\u8FC7 unplugin-vue-components \u63D2\u4EF6\u5B9E\u73B0\u6309\u9700\u5F15\u5165\uFF0C\u8BE6\u7EC6\u7528\u6CD5\u8BF7\u53C2\u8003 \u300C\u5FEB\u901F\u4E0A\u624B\u300D\u3002
Vant 4.0 \u63D0\u4F9B\u4E86\u6837\u5F0F\u53D8\u91CF\u7684\u7C7B\u578B\u63D0\u793A\u3002
\nVant \u63D0\u4F9B\u4E86 700 \u591A\u4E2A\u6837\u5F0F\u53D8\u91CF\uFF0C\u4F60\u53EF\u4EE5\u901A\u8FC7 CSS \u4EE3\u7801\u6216 ConfigProvider
\u7EC4\u4EF6\u4FEE\u6539\u8FD9\u4E9B\u6837\u5F0F\u53D8\u91CF\u3002\u5728 Vant 4.0 \u4E2D\uFF0C\u6211\u4EEC\u65B0\u589E\u4E86 ConfigProviderThemeVars
\u7C7B\u578B\uFF0C\u4EE5\u63D0\u4F9B\u6837\u5F0F\u53D8\u91CF\u7684\u7C7B\u578B\u63D0\u793A\u3002
\u56E0\u6B64\u5728\u7F16\u5199 TypeScript \u4EE3\u7801\u65F6\uFF0C\u4F60\u53EF\u4EE5\u901A\u8FC7\u7C7B\u578B\u63D0\u793A\u6765\u8865\u5168\u4E3B\u9898\u53D8\u91CF\u540D\u79F0\uFF1A
\n\nVant 4.0 \u91CD\u6784\u4E86 Picker \u7EC4\u4EF6\uFF0C\u4EE5\u53CA\u57FA\u4E8E Picker \u7684 Area \u548C DatetimePicker \u7EC4\u4EF6\u3002
\n\u5728\u4E4B\u524D\u7684\u7248\u672C\u4E2D\uFF0CPicker
\u7EC4\u4EF6\u7684 API \u8BBE\u8BA1\u4E0D\u591F\u5408\u7406\uFF0C\u5BFC\u81F4\u5927\u5BB6\u5728\u4F7F\u7528\u65F6\u7ECF\u5E38\u9047\u5230\u95EE\u9898\uFF0C\u6BD4\u5982\uFF1A
\u4E3A\u4E86\u89E3\u51B3\u4E0A\u8FF0\u95EE\u9898\uFF0C\u6211\u4EEC\u5728 Vant 4.0 \u4E2D\u5BF9 Picker
\u7EC4\u4EF6\u8FDB\u884C\u4E86\u91CD\u6784\uFF0C\u540C\u65F6\u4E5F\u91CD\u6784\u4E86\u57FA\u4E8E Picker
\u6D3E\u751F\u51FA\u7684 Area
\u548C DatetimePicker
\u7EC4\u4EF6\u3002
\u5982\u679C\u4F60\u7684\u9879\u76EE\u4E2D\u4F7F\u7528\u4E86\u8FD9\u4E09\u4E2A\u7EC4\u4EF6\uFF0C\u8BF7\u9605\u8BFB \u300C\u5347\u7EA7\u6307\u5357\u300D \u8FDB\u884C\u5347\u7EA7\u3002
\nVant 4.0 \u8C03\u6574\u4E86\u7EC4\u4EF6\u5DE5\u5177\u51FD\u6570\u7684\u7528\u6CD5\uFF0C\u4F7F\u5176\u66F4\u7B26\u5408\u76F4\u89C9\u3002
\nVant 3 \u63D0\u4F9B\u4E86\u4E00\u4E9B\u7EC4\u4EF6\u5DE5\u5177\u51FD\u6570\uFF0C\u6BD4\u5982\u8C03\u7528 Dialog()
\u51FD\u6570\uFF0C\u53EF\u4EE5\u5FEB\u901F\u5524\u8D77\u5168\u5C40\u7684\u5F39\u7A97\u7EC4\u4EF6\uFF0C\u800C Dialog.Component
\u624D\u662F Dialog
\u5BF9\u5E94\u7684\u7EC4\u4EF6\u5BF9\u8C61\u3002
// \u51FD\u6570\u8C03\u7528\nDialog({ message: 'Hello World!' });\n\n// \u7EC4\u4EF6\u6CE8\u518C\napp.use('van-dialog', Dialog.Component);\n
\n\u4EE5\u4E0A API \u8BBE\u8BA1\u5BFC\u81F4 Dialog \u7B49\u652F\u6301\u5DE5\u5177\u51FD\u6570\u7684\u7EC4\u4EF6\u4E0E\u5E38\u89C4\u7EC4\u4EF6\u5B58\u5728\u7528\u6CD5\u5DEE\u5F02\uFF0C\u5BB9\u6613\u88AB\u8BEF\u7528\uFF1B\u540C\u65F6\u4E5F\u5BFC\u81F4 unplugin-vue-components
\u65E0\u6CD5\u81EA\u52A8\u5F15\u5165 Dialog \u7B49\u7EC4\u4EF6\u3002
\u4E3A\u4E86\u66F4\u7B26\u5408\u76F4\u89C9\uFF0C\u6211\u4EEC\u5728 Vant 4 \u4E2D\u8C03\u6574\u4E86\u7EC4\u4EF6\u5DE5\u5177\u51FD\u6570\u7684\u8C03\u7528\u65B9\u5F0F\uFF0C\u53D7\u5F71\u54CD\u7684\u51FD\u6570\u5305\u62EC Dialog()
\u3001Toast()
\u3001Notify()
\u548C ImagePreview()
\u3002\u4EE5 Dialog \u4E3A\u4F8B\uFF0C\u6211\u4EEC\u5C06 Dialog()
\u51FD\u6570\u91CD\u547D\u540D\u4E3A showDialog()
\uFF0C\u5E76\u8BA9 Dialog
\u76F4\u63A5\u6307\u5411\u7EC4\u4EF6\u5BF9\u8C61\u3002
// \u51FD\u6570\u8C03\u7528\nshowDialog({ message: 'Hello World!' });\n\n// \u7EC4\u4EF6\u6CE8\u518C\napp.use('van-dialog', Dialog);\n
\n\u4E3A\u4E86\u4FBF\u4E8E\u5B58\u91CF\u4EE3\u7801\u8FC1\u79FB\u81F3 Vant 4.0\uFF0C\u6211\u4EEC\u63D0\u4F9B\u4E86\u517C\u5BB9\u65B9\u6848\uFF0C\u4F60\u53EF\u4EE5\u4F7F\u7528 @vant/compat
\u4E2D\u5BFC\u51FA\u7684 Dialog()
\u51FD\u6570\u6765\u517C\u5BB9\u539F\u6709\u4EE3\u7801\u3002
import { Dialog } from '@vant/compat';\n\nDialog({ message: 'Hello World!' });\n
\n@vant/compat
\u4E2D\u5BFC\u51FA\u7684 Dialog()
\u4E0E Vant 3 \u4E2D\u7684 Dialog()
\u62E5\u6709\u5B8C\u5168\u4E00\u81F4\u7684 API \u548C\u884C\u4E3A\uFF0C\u56E0\u6B64\u5728\u5347\u7EA7\u65F6\uFF0C\u4F60\u53EA\u9700\u8981\u4FEE\u6539\u5B83\u7684\u5F15\u7528\u8DEF\u5F84\uFF0C\u5176\u4F59\u4EE3\u7801\u53EF\u4EE5\u4FDD\u6301\u4E0D\u53D8\u3002\u5728\u9879\u76EE\u5B8C\u6210\u5347\u7EA7\u5230 Vant 4.0 \u540E\uFF0C\u5EFA\u8BAE\u5728\u8FED\u4EE3\u4E2D\u9010\u6B65\u66FF\u6362\u4E3A\u65B0\u7684 showDialog()
\u7B49\u65B9\u6CD5\uFF0C\u5E76\u79FB\u9664 @vant/compat
\u5305\u3002
Vant 4.0 \u5C06\u4E8B\u4EF6\u540D\u6539\u4E3A\u9A7C\u5CF0\u683C\u5F0F\u3002
\n\u4ECE Vant 4 \u5F00\u59CB\uFF0C\u6240\u6709\u7684\u4E8B\u4EF6\u5747\u91C7\u7528 Vue \u5B98\u65B9\u63A8\u8350\u7684\u9A7C\u5CF0\u683C\u5F0F\u8FDB\u884C\u547D\u540D\u3002
\n// Vant 3\nemit('click-input');\n\n// Vant 4\nemit('clickInput');\n
\n\u8FD9\u9879\u6539\u52A8\u4E0D\u5F71\u54CD\u539F\u6709\u7684\u6A21\u677F\u4EE3\u7801\uFF0CVue \u4F1A\u81EA\u52A8\u5728\u6A21\u677F\u4E2D\u5BF9\u4E8B\u4EF6\u540D\u8FDB\u884C\u683C\u5F0F\u8F6C\u6362\uFF0C\u56E0\u6B64\u4F60\u65E0\u987B\u505A\u4EFB\u4F55\u66F4\u6539\u3002
\n<!-- \u4EE5\u4E0B\u4EE3\u7801\u53EF\u4EE5\u7167\u5E38\u8FD0\u884C\uFF0C\u65E0\u987B\u505A\u4EFB\u4F55\u66F4\u6539 -->\n<van-field @click-input="onClick" />\n
\n\u5982\u679C\u4F60\u5728 JSX \u4E2D\u4F7F\u7528 Vant \u7EC4\u4EF6\uFF0C\u9700\u8981\u5C06\u76D1\u542C\u7684\u4E8B\u4EF6\u540D\u8C03\u6574\u4E3A\u9A7C\u5CF0\u683C\u5F0F\uFF0C\u539F\u6709\u7684\u4E2D\u5212\u7EBF\u683C\u5F0F\u5C06\u4E0D\u518D\u751F\u6548\uFF0C\u65B0\u7684\u76D1\u542C\u65B9\u5F0F\u66F4\u52A0\u7B26\u5408 JSX \u672C\u8EAB\u7684\u89C4\u8303\uFF1A
\n// Vant 3\n<Field onClick-input={onClick} />\n\n// Vant 4\n<Field onClickInput={onClick} />\n
\nVant 4.0 \u4E0D\u518D\u652F\u6301\u901A\u8FC7 Less \u53D8\u91CF\u5B9A\u5236\u4E3B\u9898\u3002
\n\u76EE\u524D Vant \u5DF2\u7ECF\u652F\u6301\u57FA\u4E8E CSS \u53D8\u91CF\u7684\u4E3B\u9898\u5B9A\u5236\uFF0C\u76F8\u8F83\u4E8E Less \u5B9A\u5236\u66F4\u52A0\u7075\u6D3B\u3002\u56E0\u6B64\uFF0CVant 4 \u5C06\u4E0D\u518D\u63D0\u4F9B\u57FA\u4E8E Less \u7684\u4E3B\u9898\u5B9A\u5236\u3002\u8FD9\u610F\u5473\u7740 Vant \u7684 npm \u5305\u4E2D\u5C06\u4E0D\u518D\u4F1A\u5305\u542B .less
\u6837\u5F0F\u6E90\u6587\u4EF6\uFF0C\u4EC5\u4F1A\u63D0\u4F9B\u7F16\u8BD1\u540E\u7684 .css
\u6837\u5F0F\u6587\u4EF6\u3002
\u5982\u679C\u4F60\u7684\u9879\u76EE\u6B63\u5728\u4F7F\u7528\u65E7\u7248\u7684 Less \u4E3B\u9898\u5B9A\u5236\uFF0C\u8BF7\u4F7F\u7528 ConfigProvider \u5168\u5C40\u914D\u7F6E \u8FDB\u884C\u66FF\u6362\u3002
\n\u672C\u6B21\u66F4\u65B0\u540C\u6B65\u53D1\u5E03\u4E86 Vant Cli 5.0 \u7248\u672C\u3002
\nVant Cli \u662F Vant \u5E95\u5C42\u7684\u7EC4\u4EF6\u5E93\u6784\u5EFA\u5DE5\u5177\uFF0C\u672C\u6B21\u66F4\u65B0\u5185\u5BB9\u6709\uFF1A
\nstylelint
\u548C @vant/stylelint-config
\u4F9D\u8D56\uFF0C\u9700\u8981\u7684\u8BDD\u53EF\u4EE5\u81EA\u884C\u5B89\u88C5\uFF1Anpm add stylelint@13 @vant/stylelint-config\n
\ngh-pages
\u4F9D\u8D56\uFF0C\u8BF7\u6309\u7167\u5982\u4E0B\u65B9\u5F0F\u66F4\u65B0 package.json\uFF1A- "release:site": "pnpm build:site && gh-pages -d site-dist",\n+ "release:site": "pnpm build:site && npx gh-pages -d site-dist",\n
\n\u76EE\u524D Vant \u5B98\u7F51 \u548C npm latest \u6807\u7B7E\u5747\u5DF2\u6307\u5411 Vant 4.0\u3002
\n\u6211\u4EEC\u4E3A Vant 4.0 \u51C6\u5907\u4E86\u5B8C\u6574\u7684\u5347\u7EA7\u6307\u5357\uFF0C\u8BF7\u9605\u8BFB \u4ECE v3 \u5347\u7EA7\u5230 v4 \u8FDB\u884C\u5347\u7EA7\u3002
\n\u540C\u65F6\uFF0CVant 3.x \u4E5F\u4F1A\u8FDB\u5165\u7EF4\u62A4\u72B6\u6001\uFF0C\u540E\u7EED Vant \u5404\u4E2A\u7248\u672C\u7684\u7EF4\u62A4\u72B6\u6001\u5982\u4E0B\uFF1A
\n\u540D\u79F0 | \n\u6846\u67B6 | \n\u53D1\u5E03\u65F6\u95F4 | \n\u7EF4\u62A4\u72B6\u6001 | \n
---|---|---|---|
Vant 4 | \nVue 3 | \n2022.12 | \n\u6301\u7EED\u8FED\u4EE3\u65B0\u529F\u80FD | \n
Vant 3 | \nVue 3 | \n2020.12 | \n\u505C\u6B62\u8FED\u4EE3\u65B0\u529F\u80FD\uFF0Cbug \u4F1A\u88AB\u5904\u7406\u548C\u4FEE\u590D | \n
Vant 2 | \nVue 2 | \n2019.06 | \n\u505C\u6B62\u8FED\u4EE3\u65B0\u529F\u80FD\uFF0C\u91CD\u8981 bug \u4F1A\u88AB\u5904\u7406\u548C\u4FEE\u590D | \n
Vant 1 | \nVue 2 | \n2018.03 | \n\u505C\u6B62\u7EF4\u62A4\uFF0C\u4E0D\u518D\u63A5\u53D7 PR | \n
\u611F\u8C22\u5728 Vant 4.0 \u8FED\u4EE3\u671F\u95F4\u505A\u51FA\u8D21\u732E\u7684\u670B\u53CB\u4EEC\uFF0C\u611F\u8C22\u6240\u6709\u4F7F\u7528 Vant \u7684\u5F00\u53D1\u8005\uFF0C\u613F\u5927\u5BB6\u5728\u5F00\u6E90\u7684\u9053\u8DEF\u4E0A\u6B65\u5C65\u4E0D\u505C\u3002
\n\n\u5386\u7ECF\u4E00\u5E74\u7684\u8FED\u4EE3\uFF0CVant 4.0 \u7248\u672C\u5DF2\u6B63\u5F0F\u53D1\u5E03\uFF0C\u8FD9\u662F Vant \u81EA 2017 \u5E74\u5F00\u6E90\u4EE5\u6765\u53D1\u5E03\u7684\u7B2C\u56DB\u4E2A\u91CD\u8981\u7248\u672C\u3002
\n\u5728\u672C\u6B21\u8FED\u4EE3\u4E2D\uFF0CVant \u652F\u6301\u4E86\u6DF1\u8272\u6A21\u5F0F\uFF0C\u589E\u52A0\u4E94\u4E2A\u65B0\u7EC4\u4EF6\uFF0C\u6539\u5584\u5DE5\u5177\u51FD\u6570 API \u5E76\u91CD\u6784 Picker \u7B49\u7EC4\u4EF6\uFF0C\u540C\u65F6\u7EE7\u7EED\u5728\u8F7B\u91CF\u5316\u548C\u6613\u7528\u6027\u65B9\u9762\u505A\u51FA\u6539\u8FDB\u3002
\nVant 4.0 \u652F\u6301\u5207\u6362\u6240\u6709\u7EC4\u4EF6\u4E3A\u6DF1\u8272\u6A21\u5F0F\u3002
\n\u53EA\u9700\u8981\u628A ConfigProvider \u7EC4\u4EF6\u7684 theme
\u5C5E\u6027\u8BBE\u7F6E\u4E3A dark
\uFF0C\u5373\u53EF\u5207\u6362\u4E3A\u6DF1\u8272\u6A21\u5F0F\uFF0C\u5C06\u9875\u9762\u4E0A\u7684\u6240\u6709 Vant \u7EC4\u4EF6\u53D8\u6210\u6DF1\u8272\u98CE\u683C\u3002
<van-config-provider theme="dark">\n <!-- child components -->\n</van-config-provider>\n
\n\n\u540C\u65F6\uFF0CVant 4.0 \u6587\u6863\u4E5F\u5DF2\u652F\u6301\u5207\u6362\u4E3A\u6DF1\u8272\u6A21\u5F0F\uFF1A
\n\nVant 4.0 \u5305\u542B\u4EE5\u4E0B\u65B0\u7EC4\u4EF6\uFF1A
\n\u5176\u4E2D\uFF0CTimePicker \u548C DatePicker \u7531\u65E7\u7248\u7684 DatetimePicker \u7EC4\u4EF6\u62C6\u5206\u800C\u6765\uFF0CDatetimePicker \u7EC4\u4EF6\u4E0D\u518D\u63D0\u4F9B\u3002\u4F60\u53EF\u4EE5\u901A\u8FC7 PickerGroup \u6765\u5B9E\u73B0\u540C\u65F6\u9009\u62E9\u65E5\u671F\u548C\u65F6\u95F4\u7684\u4EA4\u4E92\u6548\u679C\u3002
\n\nVant 4.0 \u7684\u5B89\u88C5\u4F53\u79EF\u964D\u4F4E 30%\uFF0C\u5305\u4F53\u79EF\u4FDD\u6301\u8F7B\u91CF\u3002
\n\u968F\u7740 npm \u751F\u6001\u7684\u53D1\u5C55\uFF0Cnode_modules \u6B63\u5728\u541E\u566C\u6211\u4EEC\u7684\u78C1\u76D8\u7A7A\u95F4\u3002\u4E3A\u4E86\u7F13\u89E3 node_modules \u9ED1\u6D1E\u3001\u52A0\u5FEB\u5B89\u88C5\u901F\u5EA6\uFF0C\u6211\u4EEC\u5BF9 Vant \u7684 npm \u4F9D\u8D56\u548C\u6784\u5EFA\u4EA7\u7269\u8FDB\u884C\u4E86\u4F18\u5316\u3002
\n\u76F8\u8F83\u4E8E Vant 3.6.2 \u7248\u672C\uFF0CVant 4.0.0 \u7248\u672C\u7684\u5B89\u88C5\u4F53\u79EF\u7531 7MB \u4E0B\u964D\u81F3 5MB\u3002\u4F5C\u4E3A\u5BF9\u6BD4\uFF0C\u793E\u533A\u4E2D\u4E3B\u6D41\u7EC4\u4EF6\u5E93\u7684\u5B89\u88C5\u4F53\u79EF\u666E\u904D\u5728 15MB ~ 80MB\u3002\u4F60\u53EF\u4EE5\u901A\u8FC7 packagephobia \u6765\u67E5\u8BE2 npm \u5305\u7684\u5B89\u88C5\u4F53\u79EF\u3002
\n\n\u5728\u5305\u4F53\u79EF\u4E0A\uFF0C\u672C\u6B21\u66F4\u65B0\u4F9D\u7136\u52A0\u91CF\u4E0D\u52A0\u4EF7\uFF0CMinified + Gzipped \u540E\u7684\u4F53\u79EF\u4FDD\u6301\u5728 70KB \u4EE5\u4E0B\uFF1A
\n\nVant 4.0 \u7EDF\u4E00\u4E86\u6240\u6709\u7EC4\u4EF6\u7684\u4E3B\u8272\u8C03\u3002
\n\u5728\u4E4B\u524D\u7684\u7248\u672C\u4E2D\uFF0CVant \u7EC4\u4EF6\u6709\u4E24\u79CD\u4E3B\u8272\u8C03\uFF0C\u90E8\u5206\u7EC4\u4EF6\u91C7\u7528\u84DD\u8272 #1989fa
\u4F5C\u4E3A\u4E3B\u8272\u8C03\uFF0C\u53E6\u4E00\u90E8\u5206\u5219\u91C7\u7528\u7EA2\u8272 #ee0a24
\u3002
\u4E3A\u4E86\u4FDD\u6301\u8272\u5F69\u89C4\u8303\u7684\u4E00\u81F4\u6027\uFF0C\u6211\u4EEC\u5728 Vant 4 \u4E2D\u5BF9\u4E3B\u8272\u8C03\u8FDB\u884C\u7EDF\u4E00\uFF0C\u6240\u6709\u7EC4\u4EF6\u5747\u91C7\u7528\u84DD\u8272\u4F5C\u4E3A\u4E3B\u8272\u8C03\u3002
\n\n\u7EDF\u4E00\u4E3B\u8272\u8C03\u540E\uFF0C\u4E3B\u9898\u5B9A\u5236\u4F1A\u53D8\u5F97\u66F4\u52A0\u5BB9\u6613\u3002\u6BD4\u5982\uFF0C\u4F60\u53EF\u4EE5\u8986\u76D6 --van-primary-color
\u8FD9\u4E2A CSS \u53D8\u91CF\uFF0C\u5C06\u6240\u6709\u7EC4\u4EF6\u7684\u4E3B\u8272\u8C03\u8BBE\u7F6E\u4E3A\u7EFF\u8272\uFF1A
:root {\n --van-primary-color: #07c160;\n}\n
\nVant 4.0 \u4E0D\u518D\u4F7F\u7528 babel-plugin-import \u5B9E\u73B0\u6309\u9700\u5F15\u5165\u3002
\n\u5728\u65E9\u671F\uFF0C\u7EC4\u4EF6\u5E93\u5927\u591A\u4F7F\u7528 babel-plugin-import
\u5B9E\u73B0\u6309\u9700\u5F15\u5165\uFF0C\u8FD9\u610F\u5473\u7740\u7EC4\u4EF6\u5E93\u4F1A\u5F3A\u4F9D\u8D56 Babel \u7F16\u8BD1\u3002\u4ECE Vant 4.0 \u5F00\u59CB\uFF0C\u5C06\u4E0D\u518D\u652F\u6301 babel-plugin-import
\uFF0C\u4E3B\u8981\u5E26\u6765\u4EE5\u4E0B\u6536\u76CA\uFF1A
babel-plugin-import
\u7684 import \u9650\u5236\uFF0C\u53EF\u4EE5\u4ECE Vant \u4E2D\u5BFC\u5165\u9664\u7EC4\u4EF6\u4EE5\u5916\u7684\u5185\u5BB9\uFF0C\u6BD4\u5982 Vant 4 \u4E2D\u65B0\u589E\u7684 showToast
\u65B9\u6CD5\uFF0C\u6216\u662F buttonProps
\u5BF9\u8C61\uFF1Aimport { showToast, buttonProps } from 'vant';\n
\n\u5728\u5305\u4F53\u79EF\u65B9\u9762\uFF0C\u79FB\u9664 babel-plugin-import
\u5BF9\u9879\u76EE\u7684 JS \u4F53\u79EF\u4E0D\u4F1A\u6709\u5F71\u54CD\uFF0C\u56E0\u4E3A Vant \u9ED8\u8BA4\u652F\u6301\u901A\u8FC7 Tree Shaking \u6765\u79FB\u9664\u4E0D\u9700\u8981\u7684 JS \u4EE3\u7801\uFF0C\u800C CSS \u4EE3\u7801\u53EF\u4EE5\u901A\u8FC7 unplugin-vue-components \u63D2\u4EF6\u5B9E\u73B0\u6309\u9700\u5F15\u5165\uFF0C\u8BE6\u7EC6\u7528\u6CD5\u8BF7\u53C2\u8003 \u300C\u5FEB\u901F\u4E0A\u624B\u300D\u3002
Vant 4.0 \u63D0\u4F9B\u4E86\u6837\u5F0F\u53D8\u91CF\u7684\u7C7B\u578B\u63D0\u793A\u3002
\nVant \u63D0\u4F9B\u4E86 700 \u591A\u4E2A\u6837\u5F0F\u53D8\u91CF\uFF0C\u4F60\u53EF\u4EE5\u901A\u8FC7 CSS \u4EE3\u7801\u6216 ConfigProvider
\u7EC4\u4EF6\u4FEE\u6539\u8FD9\u4E9B\u6837\u5F0F\u53D8\u91CF\u3002\u5728 Vant 4.0 \u4E2D\uFF0C\u6211\u4EEC\u65B0\u589E\u4E86 ConfigProviderThemeVars
\u7C7B\u578B\uFF0C\u4EE5\u63D0\u4F9B\u6837\u5F0F\u53D8\u91CF\u7684\u7C7B\u578B\u63D0\u793A\u3002
\u56E0\u6B64\u5728\u7F16\u5199 TypeScript \u4EE3\u7801\u65F6\uFF0C\u4F60\u53EF\u4EE5\u901A\u8FC7\u7C7B\u578B\u63D0\u793A\u6765\u8865\u5168\u4E3B\u9898\u53D8\u91CF\u540D\u79F0\uFF1A
\n\nVant 4.0 \u91CD\u6784\u4E86 Picker \u7EC4\u4EF6\uFF0C\u4EE5\u53CA\u57FA\u4E8E Picker \u7684 Area \u548C DatetimePicker \u7EC4\u4EF6\u3002
\n\u5728\u4E4B\u524D\u7684\u7248\u672C\u4E2D\uFF0CPicker
\u7EC4\u4EF6\u7684 API \u8BBE\u8BA1\u4E0D\u591F\u5408\u7406\uFF0C\u5BFC\u81F4\u5927\u5BB6\u5728\u4F7F\u7528\u65F6\u7ECF\u5E38\u9047\u5230\u95EE\u9898\uFF0C\u6BD4\u5982\uFF1A
\u4E3A\u4E86\u89E3\u51B3\u4E0A\u8FF0\u95EE\u9898\uFF0C\u6211\u4EEC\u5728 Vant 4.0 \u4E2D\u5BF9 Picker
\u7EC4\u4EF6\u8FDB\u884C\u4E86\u91CD\u6784\uFF0C\u540C\u65F6\u4E5F\u91CD\u6784\u4E86\u57FA\u4E8E Picker
\u6D3E\u751F\u51FA\u7684 Area
\u548C DatetimePicker
\u7EC4\u4EF6\u3002
\u5982\u679C\u4F60\u7684\u9879\u76EE\u4E2D\u4F7F\u7528\u4E86\u8FD9\u4E09\u4E2A\u7EC4\u4EF6\uFF0C\u8BF7\u9605\u8BFB \u300C\u5347\u7EA7\u6307\u5357\u300D \u8FDB\u884C\u5347\u7EA7\u3002
\nVant 4.0 \u8C03\u6574\u4E86\u7EC4\u4EF6\u5DE5\u5177\u51FD\u6570\u7684\u7528\u6CD5\uFF0C\u4F7F\u5176\u66F4\u7B26\u5408\u76F4\u89C9\u3002
\nVant 3 \u63D0\u4F9B\u4E86\u4E00\u4E9B\u7EC4\u4EF6\u5DE5\u5177\u51FD\u6570\uFF0C\u6BD4\u5982\u8C03\u7528 Dialog()
\u51FD\u6570\uFF0C\u53EF\u4EE5\u5FEB\u901F\u5524\u8D77\u5168\u5C40\u7684\u5F39\u7A97\u7EC4\u4EF6\uFF0C\u800C Dialog.Component
\u624D\u662F Dialog
\u5BF9\u5E94\u7684\u7EC4\u4EF6\u5BF9\u8C61\u3002
// \u51FD\u6570\u8C03\u7528\nDialog({ message: 'Hello World!' });\n\n// \u7EC4\u4EF6\u6CE8\u518C\napp.use('van-dialog', Dialog.Component);\n
\n\u4EE5\u4E0A API \u8BBE\u8BA1\u5BFC\u81F4 Dialog \u7B49\u652F\u6301\u5DE5\u5177\u51FD\u6570\u7684\u7EC4\u4EF6\u4E0E\u5E38\u89C4\u7EC4\u4EF6\u5B58\u5728\u7528\u6CD5\u5DEE\u5F02\uFF0C\u5BB9\u6613\u88AB\u8BEF\u7528\uFF1B\u540C\u65F6\u4E5F\u5BFC\u81F4 unplugin-vue-components
\u65E0\u6CD5\u81EA\u52A8\u5F15\u5165 Dialog \u7B49\u7EC4\u4EF6\u3002
\u4E3A\u4E86\u66F4\u7B26\u5408\u76F4\u89C9\uFF0C\u6211\u4EEC\u5728 Vant 4 \u4E2D\u8C03\u6574\u4E86\u7EC4\u4EF6\u5DE5\u5177\u51FD\u6570\u7684\u8C03\u7528\u65B9\u5F0F\uFF0C\u53D7\u5F71\u54CD\u7684\u51FD\u6570\u5305\u62EC Dialog()
\u3001Toast()
\u3001Notify()
\u548C ImagePreview()
\u3002\u4EE5 Dialog \u4E3A\u4F8B\uFF0C\u6211\u4EEC\u5C06 Dialog()
\u51FD\u6570\u91CD\u547D\u540D\u4E3A showDialog()
\uFF0C\u5E76\u8BA9 Dialog
\u76F4\u63A5\u6307\u5411\u7EC4\u4EF6\u5BF9\u8C61\u3002
// \u51FD\u6570\u8C03\u7528\nshowDialog({ message: 'Hello World!' });\n\n// \u7EC4\u4EF6\u6CE8\u518C\napp.use('van-dialog', Dialog);\n
\n\u4E3A\u4E86\u4FBF\u4E8E\u5B58\u91CF\u4EE3\u7801\u8FC1\u79FB\u81F3 Vant 4.0\uFF0C\u6211\u4EEC\u63D0\u4F9B\u4E86\u517C\u5BB9\u65B9\u6848\uFF0C\u4F60\u53EF\u4EE5\u4F7F\u7528 @vant/compat
\u4E2D\u5BFC\u51FA\u7684 Dialog()
\u51FD\u6570\u6765\u517C\u5BB9\u539F\u6709\u4EE3\u7801\u3002
import { Dialog } from '@vant/compat';\n\nDialog({ message: 'Hello World!' });\n
\n@vant/compat
\u4E2D\u5BFC\u51FA\u7684 Dialog()
\u4E0E Vant 3 \u4E2D\u7684 Dialog()
\u62E5\u6709\u5B8C\u5168\u4E00\u81F4\u7684 API \u548C\u884C\u4E3A\uFF0C\u56E0\u6B64\u5728\u5347\u7EA7\u65F6\uFF0C\u4F60\u53EA\u9700\u8981\u4FEE\u6539\u5B83\u7684\u5F15\u7528\u8DEF\u5F84\uFF0C\u5176\u4F59\u4EE3\u7801\u53EF\u4EE5\u4FDD\u6301\u4E0D\u53D8\u3002\u5728\u9879\u76EE\u5B8C\u6210\u5347\u7EA7\u5230 Vant 4.0 \u540E\uFF0C\u5EFA\u8BAE\u5728\u8FED\u4EE3\u4E2D\u9010\u6B65\u66FF\u6362\u4E3A\u65B0\u7684 showDialog()
\u7B49\u65B9\u6CD5\uFF0C\u5E76\u79FB\u9664 @vant/compat
\u5305\u3002
Vant 4.0 \u5C06\u4E8B\u4EF6\u540D\u6539\u4E3A\u9A7C\u5CF0\u683C\u5F0F\u3002
\n\u4ECE Vant 4 \u5F00\u59CB\uFF0C\u6240\u6709\u7684\u4E8B\u4EF6\u5747\u91C7\u7528 Vue \u5B98\u65B9\u63A8\u8350\u7684\u9A7C\u5CF0\u683C\u5F0F\u8FDB\u884C\u547D\u540D\u3002
\n// Vant 3\nemit('click-input');\n\n// Vant 4\nemit('clickInput');\n
\n\u8FD9\u9879\u6539\u52A8\u4E0D\u5F71\u54CD\u539F\u6709\u7684\u6A21\u677F\u4EE3\u7801\uFF0CVue \u4F1A\u81EA\u52A8\u5728\u6A21\u677F\u4E2D\u5BF9\u4E8B\u4EF6\u540D\u8FDB\u884C\u683C\u5F0F\u8F6C\u6362\uFF0C\u56E0\u6B64\u4F60\u65E0\u987B\u505A\u4EFB\u4F55\u66F4\u6539\u3002
\n<!-- \u4EE5\u4E0B\u4EE3\u7801\u53EF\u4EE5\u7167\u5E38\u8FD0\u884C\uFF0C\u65E0\u987B\u505A\u4EFB\u4F55\u66F4\u6539 -->\n<van-field @click-input="onClick" />\n
\n\u5982\u679C\u4F60\u5728 JSX \u4E2D\u4F7F\u7528 Vant \u7EC4\u4EF6\uFF0C\u9700\u8981\u5C06\u76D1\u542C\u7684\u4E8B\u4EF6\u540D\u8C03\u6574\u4E3A\u9A7C\u5CF0\u683C\u5F0F\uFF0C\u539F\u6709\u7684\u4E2D\u5212\u7EBF\u683C\u5F0F\u5C06\u4E0D\u518D\u751F\u6548\uFF0C\u65B0\u7684\u76D1\u542C\u65B9\u5F0F\u66F4\u52A0\u7B26\u5408 JSX \u672C\u8EAB\u7684\u89C4\u8303\uFF1A
\n// Vant 3\n<Field onClick-input={onClick} />\n\n// Vant 4\n<Field onClickInput={onClick} />\n
\nVant 4.0 \u4E0D\u518D\u652F\u6301\u901A\u8FC7 Less \u53D8\u91CF\u5B9A\u5236\u4E3B\u9898\u3002
\n\u76EE\u524D Vant \u5DF2\u7ECF\u652F\u6301\u57FA\u4E8E CSS \u53D8\u91CF\u7684\u4E3B\u9898\u5B9A\u5236\uFF0C\u76F8\u8F83\u4E8E Less \u5B9A\u5236\u66F4\u52A0\u7075\u6D3B\u3002\u56E0\u6B64\uFF0CVant 4 \u5C06\u4E0D\u518D\u63D0\u4F9B\u57FA\u4E8E Less \u7684\u4E3B\u9898\u5B9A\u5236\u3002\u8FD9\u610F\u5473\u7740 Vant \u7684 npm \u5305\u4E2D\u5C06\u4E0D\u518D\u4F1A\u5305\u542B .less
\u6837\u5F0F\u6E90\u6587\u4EF6\uFF0C\u4EC5\u4F1A\u63D0\u4F9B\u7F16\u8BD1\u540E\u7684 .css
\u6837\u5F0F\u6587\u4EF6\u3002
\u5982\u679C\u4F60\u7684\u9879\u76EE\u6B63\u5728\u4F7F\u7528\u65E7\u7248\u7684 Less \u4E3B\u9898\u5B9A\u5236\uFF0C\u8BF7\u4F7F\u7528 ConfigProvider \u5168\u5C40\u914D\u7F6E \u8FDB\u884C\u66FF\u6362\u3002
\n\u672C\u6B21\u66F4\u65B0\u540C\u6B65\u53D1\u5E03\u4E86 Vant Cli 5.0 \u7248\u672C\u3002
\nVant Cli \u662F Vant \u5E95\u5C42\u7684\u7EC4\u4EF6\u5E93\u6784\u5EFA\u5DE5\u5177\uFF0C\u672C\u6B21\u66F4\u65B0\u5185\u5BB9\u6709\uFF1A
\nstylelint
\u548C @vant/stylelint-config
\u4F9D\u8D56\uFF0C\u9700\u8981\u7684\u8BDD\u53EF\u4EE5\u81EA\u884C\u5B89\u88C5\uFF1Anpm add stylelint@13 @vant/stylelint-config\n
\ngh-pages
\u4F9D\u8D56\uFF0C\u8BF7\u6309\u7167\u5982\u4E0B\u65B9\u5F0F\u66F4\u65B0 package.json\uFF1A- "release:site": "pnpm build:site && gh-pages -d site-dist",\n+ "release:site": "pnpm build:site && npx gh-pages -d site-dist",\n
\n\u76EE\u524D Vant \u5B98\u7F51 \u548C npm latest \u6807\u7B7E\u5747\u5DF2\u6307\u5411 Vant 4.0\u3002
\n\u6211\u4EEC\u4E3A Vant 4.0 \u51C6\u5907\u4E86\u5B8C\u6574\u7684\u5347\u7EA7\u6307\u5357\uFF0C\u8BF7\u9605\u8BFB \u4ECE v3 \u5347\u7EA7\u5230 v4 \u8FDB\u884C\u5347\u7EA7\u3002
\n\u540C\u65F6\uFF0CVant 3.x \u4E5F\u4F1A\u8FDB\u5165\u7EF4\u62A4\u72B6\u6001\uFF0C\u540E\u7EED Vant \u5404\u4E2A\u7248\u672C\u7684\u7EF4\u62A4\u72B6\u6001\u5982\u4E0B\uFF1A
\n\u540D\u79F0 | \n\u6846\u67B6 | \n\u53D1\u5E03\u65F6\u95F4 | \n\u7EF4\u62A4\u72B6\u6001 | \n
---|---|---|---|
Vant 4 | \nVue 3 | \n2022.12 | \n\u6301\u7EED\u8FED\u4EE3\u65B0\u529F\u80FD | \n
Vant 3 | \nVue 3 | \n2020.12 | \n\u505C\u6B62\u8FED\u4EE3\u65B0\u529F\u80FD\uFF0Cbug \u4F1A\u88AB\u5904\u7406\u548C\u4FEE\u590D | \n
Vant 2 | \nVue 2 | \n2019.06 | \n\u505C\u6B62\u8FED\u4EE3\u65B0\u529F\u80FD\uFF0C\u91CD\u8981 bug \u4F1A\u88AB\u5904\u7406\u548C\u4FEE\u590D | \n
Vant 1 | \nVue 2 | \n2018.03 | \n\u505C\u6B62\u7EF4\u62A4\uFF0C\u4E0D\u518D\u63A5\u53D7 PR | \n
\u611F\u8C22\u5728 Vant 4.0 \u8FED\u4EE3\u671F\u95F4\u505A\u51FA\u8D21\u732E\u7684\u670B\u53CB\u4EEC\uFF0C\u611F\u8C22\u6240\u6709\u4F7F\u7528 Vant \u7684\u5F00\u53D1\u8005\uFF0C\u613F\u5927\u5BB6\u5728\u5F00\u6E90\u7684\u9053\u8DEF\u4E0A\u6B65\u5C65\u4E0D\u505C\u3002
\n\nDisplay a small badge or a red dot to the top-right of its child.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Badge } from 'vant';\n\nconst app = createApp();\napp.use(Badge);\n
\n<van-badge :content="5">\n <div class="child" />\n</van-badge>\n<van-badge :content="10">\n <div class="child" />\n</van-badge>\n<van-badge content="Hot">\n <div class="child" />\n</van-badge>\n<van-badge dot>\n <div class="child" />\n</van-badge>\n\n<style>\n .child {\n width: 40px;\n height: 40px;\n background: #f2f3f5;\n border-radius: 4px;\n }\n</style>\n
\n<van-badge :content="20" max="9">\n <div class="child" />\n</van-badge>\n<van-badge :content="50" max="20">\n <div class="child" />\n</van-badge>\n<van-badge :content="200" max="99">\n <div class="child" />\n</van-badge>\n
\n<van-badge :content="5" color="#1989fa">\n <div class="child" />\n</van-badge>\n<van-badge :content="10" color="#1989fa">\n <div class="child" />\n</van-badge>\n<van-badge dot color="#1989fa">\n <div class="child" />\n</van-badge>\n
\nUse content
slot to custom the content of badge.
<van-badge>\n <div class="child" />\n <template #content>\n <van-icon name="success" class="badge-icon" />\n </template>\n</van-badge>\n<van-badge>\n <div class="child" />\n <template #content>\n <van-icon name="cross" class="badge-icon" />\n </template>\n</van-badge>\n<van-badge>\n <div class="child" />\n <template #content>\n <van-icon name="down" class="badge-icon" />\n </template>\n</van-badge>\n
\n.badge-icon {\n display: block;\n font-size: 10px;\n line-height: 16px;\n}\n
\nUse position
prop to set the position of badge.
<van-badge :content="10" position="top-left">\n <div class="child" />\n</van-badge>\n<van-badge :content="10" position="bottom-left">\n <div class="child" />\n</van-badge>\n<van-badge :content="10" position="bottom-right">\n <div class="child" />\n</van-badge>\n
\n<van-badge :content="20" />\n\n<van-badge :content="200" max="99" />\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
content | \nBadge content | \nnumber | string | \n- | \n
color | \nBackground color | \nstring | \n#ee0a24 | \n
dot | \nWhether to show dot | \nboolean | \nfalse | \n
max | \nMax value, show {max}+ when exceed, only works when content is number | \nnumber | string | \n- | \n
offset | \nOffset of badge dot, the two items of the array correspond to the horizontal and vertical offsets | \n[number | string, number | string] | \n- | \n
show-zero | \nWhether to show badge when content is zero | \nboolean | \ntrue | \n
position | \nBadge position, can be set to top-left bottom-left bottom-right | \nstring | \ntop-right | \n
Name | \nDescription | \n
---|---|
default | \nDefault slot | \n
content | \nCustom badge content | \n
The component exports the following type definitions:
\nimport type { BadgeProps, BadgePosition } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-badge-size | \n16px | \n- | \n
--van-badge-color | \nvar(--van-white) | \n- | \n
--van-badge-padding | \n0 3px | \n- | \n
--van-badge-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-badge-font-weight | \nvar(--van-font-bold) | \n- | \n
--van-badge-border-width | \nvar(--van-border-width) | \n- | \n
--van-badge-background | \nvar(--van-danger-color) | \n- | \n
--van-badge-dot-color | \nvar(--van-danger-color) | \n- | \n
--van-badge-dot-size | \n8px | \n- | \n
--van-badge-font | \n-apple-system-font, Helvetica Neue, Arial, sans-serif | \n- | \n
Display a small badge or a red dot to the top-right of its child.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Badge } from 'vant';\n\nconst app = createApp();\napp.use(Badge);\n
\n<van-badge :content="5">\n <div class="child" />\n</van-badge>\n<van-badge :content="10">\n <div class="child" />\n</van-badge>\n<van-badge content="Hot">\n <div class="child" />\n</van-badge>\n<van-badge dot>\n <div class="child" />\n</van-badge>\n\n<style>\n .child {\n width: 40px;\n height: 40px;\n background: #f2f3f5;\n border-radius: 4px;\n }\n</style>\n
\n<van-badge :content="20" max="9">\n <div class="child" />\n</van-badge>\n<van-badge :content="50" max="20">\n <div class="child" />\n</van-badge>\n<van-badge :content="200" max="99">\n <div class="child" />\n</van-badge>\n
\n<van-badge :content="5" color="#1989fa">\n <div class="child" />\n</van-badge>\n<van-badge :content="10" color="#1989fa">\n <div class="child" />\n</van-badge>\n<van-badge dot color="#1989fa">\n <div class="child" />\n</van-badge>\n
\nUse content
slot to custom the content of badge.
<van-badge>\n <div class="child" />\n <template #content>\n <van-icon name="success" class="badge-icon" />\n </template>\n</van-badge>\n<van-badge>\n <div class="child" />\n <template #content>\n <van-icon name="cross" class="badge-icon" />\n </template>\n</van-badge>\n<van-badge>\n <div class="child" />\n <template #content>\n <van-icon name="down" class="badge-icon" />\n </template>\n</van-badge>\n
\n.badge-icon {\n display: block;\n font-size: 10px;\n line-height: 16px;\n}\n
\nUse position
prop to set the position of badge.
<van-badge :content="10" position="top-left">\n <div class="child" />\n</van-badge>\n<van-badge :content="10" position="bottom-left">\n <div class="child" />\n</van-badge>\n<van-badge :content="10" position="bottom-right">\n <div class="child" />\n</van-badge>\n
\n<van-badge :content="20" />\n\n<van-badge :content="200" max="99" />\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
content | \nBadge content | \nnumber | string | \n- | \n
color | \nBackground color | \nstring | \n#ee0a24 | \n
dot | \nWhether to show dot | \nboolean | \nfalse | \n
max | \nMax value, show {max}+ when exceed, only works when content is number | \nnumber | string | \n- | \n
offset | \nOffset of badge dot, the two items of the array correspond to the horizontal and vertical offsets | \n[number | string, number | string] | \n- | \n
show-zero | \nWhether to show badge when content is zero | \nboolean | \ntrue | \n
position | \nBadge position, can be set to top-left bottom-left bottom-right | \nstring | \ntop-right | \n
Name | \nDescription | \n
---|---|
default | \nDefault slot | \n
content | \nCustom badge content | \n
The component exports the following type definitions:
\nimport type { BadgeProps, BadgePosition } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-badge-size | \n16px | \n- | \n
--van-badge-color | \nvar(--van-white) | \n- | \n
--van-badge-padding | \n0 3px | \n- | \n
--van-badge-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-badge-font-weight | \nvar(--van-font-bold) | \n- | \n
--van-badge-border-width | \nvar(--van-border-width) | \n- | \n
--van-badge-background | \nvar(--van-danger-color) | \n- | \n
--van-badge-dot-color | \nvar(--van-danger-color) | \n- | \n
--van-badge-dot-size | \n8px | \n- | \n
--van-badge-font | \n-apple-system-font, Helvetica Neue, Arial, sans-serif | \n- | \n
\u9AD8\u4EAE\u6307\u5B9A\u6587\u672C\u5185\u5BB9\u3002\u8BF7\u5347\u7EA7 vant
\u5230 >= 4.8.0 \u7248\u672C\u6765\u4F7F\u7528\u8BE5\u7EC4\u4EF6\u3002
\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Highlight } from 'vant';\n\nconst app = createApp();\napp.use(Highlight);\n
\n\u4F60\u53EF\u4EE5\u901A\u8FC7 keywords
\u6307\u5B9A\u9700\u8981\u9AD8\u4EAE\u7684\u5173\u952E\u5B57\uFF0C\u901A\u8FC7 source-string
\u6307\u5B9A\u6E90\u6587\u672C\u3002
<van-highlight :keywords="keywords" :source-string="text" />\n
\nexport default {\n setup() {\n const text = '\u6162\u6162\u6765\uFF0C\u4E0D\u8981\u6025\uFF0C\u751F\u6D3B\u7ED9\u4F60\u51FA\u4E86\u96BE\u9898\uFF0C\u53EF\u4E5F\u7EC8\u6709\u4E00\u5929\u4F1A\u7ED9\u51FA\u7B54\u6848\u3002';\n const keywords = '\u96BE\u9898';\n\n return {\n text,\n keywords,\n };\n },\n};\n
\n\u5982\u679C\u9700\u8981\u6307\u5B9A\u591A\u4E2A\u5173\u952E\u5B57\uFF0C\u53EF\u4EE5\u4EE5\u6570\u7EC4\u7684\u5F62\u5F0F\u4F20\u5165 keywords
\u3002
<van-highlight :keywords="keywords" :source-string="text" />\n
\nexport default {\n setup() {\n const text = '\u6162\u6162\u6765\uFF0C\u4E0D\u8981\u6025\uFF0C\u751F\u6D3B\u7ED9\u4F60\u51FA\u4E86\u96BE\u9898\uFF0C\u53EF\u4E5F\u7EC8\u6709\u4E00\u5929\u4F1A\u7ED9\u51FA\u7B54\u6848\u3002';\n const keywords = ['\u96BE\u9898', '\u7EC8\u6709\u4E00\u5929', '\u7B54\u6848'];\n\n return {\n text,\n keywords,\n };\n },\n};\n
\n\u901A\u8FC7 highlight-class
\u53EF\u4EE5\u8BBE\u7F6E\u9AD8\u4EAE\u6807\u7B7E\u7684\u7C7B\u540D\uFF0C\u4EE5\u4FBF\u81EA\u5B9A\u4E49\u6837\u5F0F\u3002
<van-highlight\n :keywords="keywords"\n :source-string="text"\n highlight-class="custom-class"\n/>\n
\nexport default {\n setup() {\n const text = '\u6162\u6162\u6765\uFF0C\u4E0D\u8981\u6025\uFF0C\u751F\u6D3B\u7ED9\u4F60\u51FA\u4E86\u96BE\u9898\uFF0C\u53EF\u4E5F\u7EC8\u6709\u4E00\u5929\u4F1A\u7ED9\u51FA\u7B54\u6848\u3002';\n const keywords = '\u751F\u6D3B';\n\n return {\n text,\n keywords,\n };\n },\n};\n
\n.custom-class {\n color: red;\n}\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
auto-escape | \n\u662F\u5426\u81EA\u52A8\u8F6C\u4E49 | \nboolean | \ntrue | \n
case-sensitive | \n\u662F\u5426\u533A\u5206\u5927\u5C0F\u5199 | \nboolean | \nfalse | \n
highlight-class | \n\u9AD8\u4EAE\u5143\u7D20\u7684\u7C7B\u540D | \nstring | \n- | \n
highlight-tag | \n\u9AD8\u4EAE\u5143\u7D20\u5BF9\u5E94\u7684 HTML \u6807\u7B7E\u540D | \nstring | \nspan | \n
keywords | \n\u671F\u671B\u9AD8\u4EAE\u7684\u6587\u672C | \nstring | string[] | \n- | \n
source-string | \n\u6E90\u6587\u672C | \nstring | \n- | \n
tag | \n\u6839\u8282\u70B9\u5BF9\u5E94\u7684 HTML \u6807\u7B7E\u540D | \nstring | \ndiv | \n
unhighlight-class | \n\u975E\u9AD8\u4EAE\u5143\u7D20\u7684\u7C7B\u540D | \nstring | \n- | \n
unhighlight-tag | \n\u975E\u9AD8\u4EAE\u5143\u7D20\u5BF9\u5E94\u7684 HTML \u6807\u7B7E\u540D | \nstring | \nspan | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { HighlightProps, HighlightThemeVars } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-highlight-tag-color | \nvar(--van-primary-color) | \n\u9AD8\u4EAE\u6587\u672C\u989C\u8272 | \n
\u9AD8\u4EAE\u6307\u5B9A\u6587\u672C\u5185\u5BB9\u3002\u8BF7\u5347\u7EA7 vant
\u5230 >= 4.8.0 \u7248\u672C\u6765\u4F7F\u7528\u8BE5\u7EC4\u4EF6\u3002
\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Highlight } from 'vant';\n\nconst app = createApp();\napp.use(Highlight);\n
\n\u4F60\u53EF\u4EE5\u901A\u8FC7 keywords
\u6307\u5B9A\u9700\u8981\u9AD8\u4EAE\u7684\u5173\u952E\u5B57\uFF0C\u901A\u8FC7 source-string
\u6307\u5B9A\u6E90\u6587\u672C\u3002
<van-highlight :keywords="keywords" :source-string="text" />\n
\nexport default {\n setup() {\n const text = '\u6162\u6162\u6765\uFF0C\u4E0D\u8981\u6025\uFF0C\u751F\u6D3B\u7ED9\u4F60\u51FA\u4E86\u96BE\u9898\uFF0C\u53EF\u4E5F\u7EC8\u6709\u4E00\u5929\u4F1A\u7ED9\u51FA\u7B54\u6848\u3002';\n const keywords = '\u96BE\u9898';\n\n return {\n text,\n keywords,\n };\n },\n};\n
\n\u5982\u679C\u9700\u8981\u6307\u5B9A\u591A\u4E2A\u5173\u952E\u5B57\uFF0C\u53EF\u4EE5\u4EE5\u6570\u7EC4\u7684\u5F62\u5F0F\u4F20\u5165 keywords
\u3002
<van-highlight :keywords="keywords" :source-string="text" />\n
\nexport default {\n setup() {\n const text = '\u6162\u6162\u6765\uFF0C\u4E0D\u8981\u6025\uFF0C\u751F\u6D3B\u7ED9\u4F60\u51FA\u4E86\u96BE\u9898\uFF0C\u53EF\u4E5F\u7EC8\u6709\u4E00\u5929\u4F1A\u7ED9\u51FA\u7B54\u6848\u3002';\n const keywords = ['\u96BE\u9898', '\u7EC8\u6709\u4E00\u5929', '\u7B54\u6848'];\n\n return {\n text,\n keywords,\n };\n },\n};\n
\n\u901A\u8FC7 highlight-class
\u53EF\u4EE5\u8BBE\u7F6E\u9AD8\u4EAE\u6807\u7B7E\u7684\u7C7B\u540D\uFF0C\u4EE5\u4FBF\u81EA\u5B9A\u4E49\u6837\u5F0F\u3002
<van-highlight\n :keywords="keywords"\n :source-string="text"\n highlight-class="custom-class"\n/>\n
\nexport default {\n setup() {\n const text = '\u6162\u6162\u6765\uFF0C\u4E0D\u8981\u6025\uFF0C\u751F\u6D3B\u7ED9\u4F60\u51FA\u4E86\u96BE\u9898\uFF0C\u53EF\u4E5F\u7EC8\u6709\u4E00\u5929\u4F1A\u7ED9\u51FA\u7B54\u6848\u3002';\n const keywords = '\u751F\u6D3B';\n\n return {\n text,\n keywords,\n };\n },\n};\n
\n.custom-class {\n color: red;\n}\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
auto-escape | \n\u662F\u5426\u81EA\u52A8\u8F6C\u4E49 | \nboolean | \ntrue | \n
case-sensitive | \n\u662F\u5426\u533A\u5206\u5927\u5C0F\u5199 | \nboolean | \nfalse | \n
highlight-class | \n\u9AD8\u4EAE\u5143\u7D20\u7684\u7C7B\u540D | \nstring | \n- | \n
highlight-tag | \n\u9AD8\u4EAE\u5143\u7D20\u5BF9\u5E94\u7684 HTML \u6807\u7B7E\u540D | \nstring | \nspan | \n
keywords | \n\u671F\u671B\u9AD8\u4EAE\u7684\u6587\u672C | \nstring | string[] | \n- | \n
source-string | \n\u6E90\u6587\u672C | \nstring | \n- | \n
tag | \n\u6839\u8282\u70B9\u5BF9\u5E94\u7684 HTML \u6807\u7B7E\u540D | \nstring | \ndiv | \n
unhighlight-class | \n\u975E\u9AD8\u4EAE\u5143\u7D20\u7684\u7C7B\u540D | \nstring | \n- | \n
unhighlight-tag | \n\u975E\u9AD8\u4EAE\u5143\u7D20\u5BF9\u5E94\u7684 HTML \u6807\u7B7E\u540D | \nstring | \nspan | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { HighlightProps, HighlightThemeVars } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-highlight-tag-color | \nvar(--van-primary-color) | \n\u9AD8\u4EAE\u6587\u672C\u989C\u8272 | \n
Display ellipsis for long text and support for expanding or collapsing text. Please upgrade vant
to >= v4.1.0 before using this component.
Register component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { TextEllipsis } from 'vant';\n\nconst app = createApp();\napp.use(TextEllipsis);\n
\nShow one rows by default.
\n<van-text-ellipsis :content="text" />\n
\nexport default {\n setup() {\n const text =\n 'Take your time and be patient. Life itself will eventually answer all those questions it once raised for you.';\n return { text };\n },\n};\n
\nSupport Expand/Collapse.
\n<van-text-ellipsis\n :content="text"\n expand-text="expand"\n collapse-text="collapse"\n/>\n
\nexport default {\n setup() {\n const text =\n "The fleeting time of one's life is everything that belongs to a person. Only this thing truly belongs to you. Everything else is just a momentary pleasure or misfortune, which will soon be gone with the passing of time.";\n return { text };\n },\n};\n
\nDisplay the number of rows
by setting rows.
<van-text-ellipsis\n rows="3"\n :content="text"\n expand-text="expand"\n collapse-text="collapse"\n/>\n
\nexport default {\n setup() {\n const text =\n "That day, I turned twenty-one. In the golden age of my life, I was full of dreams. I wanted to love, to eat, and to instantly transform into one of these clouds, part alight, part darkened. It was only later that I understood life is but a slow, drawn-out process of getting your balls crushed. Day by day, you get older. Day by day, your dreams fade. In the end you are no different from a crushed ox. But I hadn't foreseen any of it on my twenty-first birthday. I thought I would be vigorous forever, and that nothing could ever crush me.";\n return { text };\n },\n};\n
\n<van-text-ellipsis\n rows="1"\n :content="text"\n expand-text="expand"\n collapse-text="collapse"\n position="start"\n/>\n
\nexport default {\n setup() {\n const text =\n "That day, I turned twenty-one. In the golden age of my life, I was full of dreams. I wanted to love, to eat, and to instantly transform into one of these clouds, part alight, part darkened. It was only later that I understood life is but a slow, drawn-out process of getting your balls crushed. Day by day, you get older. Day by day, your dreams fade. In the end you are no different from a crushed ox. But I hadn't foreseen any of it on my twenty-first birthday. I thought I would be vigorous forever, and that nothing could ever crush me.";\n return { text };\n },\n};\n
\n<van-text-ellipsis\n rows="2"\n :content="text"\n expand-text="expand"\n collapse-text="collapse"\n position="middle"\n/>\n
\nexport default {\n setup() {\n const text =\n "That day, I turned twenty-one. In the golden age of my life, I was full of dreams. I wanted to love, to eat, and to instantly transform into one of these clouds, part alight, part darkened. It was only later that I understood life is but a slow, drawn-out process of getting your balls crushed. Day by day, you get older. Day by day, your dreams fade. In the end you are no different from a crushed ox. But I hadn't foreseen any of it on my twenty-first birthday. I thought I would be vigorous forever, and that nothing could ever crush me.";\n return { text };\n },\n};\n
\nUse action
slots to custom action.
<van-text-ellipsis :content="text">\n <template #action="{ expanded }">\n {{ expanded ? 'Collapse' : 'Expand' }}\n </template>\n</van-text-ellipsis>\n
\nexport default {\n setup() {\n const text =\n 'Take your time and be patient. Life itself will eventually answer all those questions it once raised for you.';\n return { text };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
rows | \nNumber of rows displayed | \nnumber | string | \n1 | \n
content | \nThe text displayed | \nstring | \n- | \n
expand-text | \nExpand operation text | \nstring | \n- | \n
collapse-text | \nCollapse operation text | \nstring | \n- | \n
dots v4.2.0 | \nText content of ellipsis | \nstring | \n\'...\' | \n
position v4.6.2 | \nCan be set to start middle | \nstring | \n\'end\' | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click-action | \nEmitted when Expand/Collapse is clicked | \nevent: MouseEvent | \n
Use ref to get TextEllipsis instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
toggle | \nToggle expanded status | \nexpanded?: boolean | \n- | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
action v4.8.3 | \nCustom action | \n{ expanded: boolean } | \n
The component exports the following type definitions:
\nimport type {\n TextEllipsisProps,\n TextEllipsisInstance,\n TextEllipsisThemeVars,\n} from 'vant';\n
\nTextEllipsisInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { TextEllipsisInstance } from 'vant';\n\nconst textEllipsisRef = ref<TextEllipsisInstance>();\n\ntextEllipsisRef.value?.toggle();\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-text-ellipsis-action-color | \nvar(--van-blue) | \nColor of action text | \n
--van-text-ellipsis-line-height | \n1.6 | \nLine height of text | \n
Display ellipsis for long text and support for expanding or collapsing text. Please upgrade vant
to >= v4.1.0 before using this component.
Register component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { TextEllipsis } from 'vant';\n\nconst app = createApp();\napp.use(TextEllipsis);\n
\nShow one rows by default.
\n<van-text-ellipsis :content="text" />\n
\nexport default {\n setup() {\n const text =\n 'Take your time and be patient. Life itself will eventually answer all those questions it once raised for you.';\n return { text };\n },\n};\n
\nSupport Expand/Collapse.
\n<van-text-ellipsis\n :content="text"\n expand-text="expand"\n collapse-text="collapse"\n/>\n
\nexport default {\n setup() {\n const text =\n "The fleeting time of one's life is everything that belongs to a person. Only this thing truly belongs to you. Everything else is just a momentary pleasure or misfortune, which will soon be gone with the passing of time.";\n return { text };\n },\n};\n
\nDisplay the number of rows
by setting rows.
<van-text-ellipsis\n rows="3"\n :content="text"\n expand-text="expand"\n collapse-text="collapse"\n/>\n
\nexport default {\n setup() {\n const text =\n "That day, I turned twenty-one. In the golden age of my life, I was full of dreams. I wanted to love, to eat, and to instantly transform into one of these clouds, part alight, part darkened. It was only later that I understood life is but a slow, drawn-out process of getting your balls crushed. Day by day, you get older. Day by day, your dreams fade. In the end you are no different from a crushed ox. But I hadn't foreseen any of it on my twenty-first birthday. I thought I would be vigorous forever, and that nothing could ever crush me.";\n return { text };\n },\n};\n
\n<van-text-ellipsis\n rows="1"\n :content="text"\n expand-text="expand"\n collapse-text="collapse"\n position="start"\n/>\n
\nexport default {\n setup() {\n const text =\n "That day, I turned twenty-one. In the golden age of my life, I was full of dreams. I wanted to love, to eat, and to instantly transform into one of these clouds, part alight, part darkened. It was only later that I understood life is but a slow, drawn-out process of getting your balls crushed. Day by day, you get older. Day by day, your dreams fade. In the end you are no different from a crushed ox. But I hadn't foreseen any of it on my twenty-first birthday. I thought I would be vigorous forever, and that nothing could ever crush me.";\n return { text };\n },\n};\n
\n<van-text-ellipsis\n rows="2"\n :content="text"\n expand-text="expand"\n collapse-text="collapse"\n position="middle"\n/>\n
\nexport default {\n setup() {\n const text =\n "That day, I turned twenty-one. In the golden age of my life, I was full of dreams. I wanted to love, to eat, and to instantly transform into one of these clouds, part alight, part darkened. It was only later that I understood life is but a slow, drawn-out process of getting your balls crushed. Day by day, you get older. Day by day, your dreams fade. In the end you are no different from a crushed ox. But I hadn't foreseen any of it on my twenty-first birthday. I thought I would be vigorous forever, and that nothing could ever crush me.";\n return { text };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
rows | \nNumber of rows displayed | \nnumber | string | \n1 | \n
content | \nThe text displayed | \nstring | \n- | \n
expand-text | \nExpand operation text | \nstring | \n- | \n
collapse-text | \nCollapse operation text | \nstring | \n- | \n
dots v4.2.0 | \nText content of ellipsis | \nstring | \n\'...\' | \n
position v4.6.2 | \nCan be set to start middle | \nstring | \n\'end\' | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click-action | \nEmitted when Expand/Collapse is clicked | \nevent: MouseEvent | \n
Use ref to get TextEllipsis instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
toggle | \nToggle expanded status | \nexpanded?: boolean | \n- | \n
The component exports the following type definitions:
\nimport type {\n TextEllipsisProps,\n TextEllipsisInstance,\n TextEllipsisThemeVars,\n} from 'vant';\n
\nTextEllipsisInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { TextEllipsisInstance } from 'vant';\n\nconst textEllipsisRef = ref<TextEllipsisInstance>();\n\ntextEllipsisRef.value?.toggle();\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-text-ellipsis-action-color | \nvar(--van-blue) | \nColor of action text | \n
--van-text-ellipsis-line-height | \n1.6 | \nLine height of text | \n
\u5728\u9875\u9762\u4E2D\u95F4\u5F39\u51FA\u9ED1\u8272\u534A\u900F\u660E\u63D0\u793A\uFF0C\u7528\u4E8E\u6D88\u606F\u901A\u77E5\u3001\u52A0\u8F7D\u63D0\u793A\u3001\u64CD\u4F5C\u7ED3\u679C\u63D0\u793A\u7B49\u573A\u666F\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Toast } from 'vant';\n\nconst app = createApp();\napp.use(Toast);\n
\n\u4E3A\u4E86\u4FBF\u4E8E\u4F7F\u7528 Toast
\uFF0CVant \u63D0\u4F9B\u4E86\u4E00\u7CFB\u5217\u8F85\u52A9\u51FD\u6570\uFF0C\u901A\u8FC7\u8F85\u52A9\u51FD\u6570\u53EF\u4EE5\u5FEB\u901F\u5524\u8D77\u5168\u5C40\u7684 Toast \u7EC4\u4EF6\u3002
\u6BD4\u5982\u4F7F\u7528 showToast
\u51FD\u6570\uFF0C\u8C03\u7528\u540E\u4F1A\u76F4\u63A5\u5728\u9875\u9762\u4E2D\u6E32\u67D3\u5BF9\u5E94\u7684\u8F7B\u63D0\u793A\u3002
import { showToast } from 'vant';\n\nshowToast('\u63D0\u793A\u5185\u5BB9');\n
\n\u4F7F\u7528 showToast
\u65B9\u6CD5\u5728\u5C4F\u5E55\u4E2D\u95F4\u5C55\u793A\u4E00\u6761\u6587\u5B57\u63D0\u793A\u3002
import { showToast } from 'vant';\n\nshowToast('\u63D0\u793A\u5185\u5BB9');\n
\n\u4F7F\u7528 showLoadingToast
\u65B9\u6CD5\u5C55\u793A\u52A0\u8F7D\u63D0\u793A\uFF0C\u901A\u8FC7 forbidClick
\u9009\u9879\u53EF\u4EE5\u7981\u7528\u80CC\u666F\u70B9\u51FB\u3002
import { showLoadingToast } from 'vant';\n\nshowLoadingToast({\n message: '\u52A0\u8F7D\u4E2D...',\n forbidClick: true,\n});\n
\n\u4F7F\u7528 showSuccessToast
\u65B9\u6CD5\u5C55\u793A\u6210\u529F\u63D0\u793A\uFF0C\u4F7F\u7528 showFailToast
\u65B9\u6CD5\u5C55\u793A\u5931\u8D25\u63D0\u793A\u3002
import { showSuccessToast, showFailToast } from 'vant';\n\nshowSuccessToast('\u6210\u529F\u6587\u6848');\nshowFailToast('\u5931\u8D25\u6587\u6848');\n
\n\u901A\u8FC7 icon
\u9009\u9879\u53EF\u4EE5\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u652F\u6301\u4F20\u5165\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027\u3002
import { showToast } from 'vant';\n\nshowToast({\n message: '\u81EA\u5B9A\u4E49\u56FE\u6807',\n icon: 'like-o',\n});\n\nshowToast({\n message: '\u81EA\u5B9A\u4E49\u56FE\u7247',\n icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png',\n});\n
\n\u901A\u8FC7 loadingType
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u52A0\u8F7D\u56FE\u6807\u7C7B\u578B\u3002
import { showLoadingToast } from 'vant';\n\nshowLoadingToast({\n message: '\u52A0\u8F7D\u4E2D...',\n forbidClick: true,\n loadingType: 'spinner',\n});\n
\nToast \u9ED8\u8BA4\u6E32\u67D3\u5728\u5C4F\u5E55\u6B63\u4E2D\u4F4D\u7F6E\uFF0C\u901A\u8FC7 position
\u5C5E\u6027\u53EF\u4EE5\u63A7\u5236 Toast \u5C55\u793A\u7684\u4F4D\u7F6E\u3002
import { showToast } from 'vant';\n\nshowToast({\n message: '\u9876\u90E8\u5C55\u793A',\n position: 'top',\n});\n\nshowToast({\n message: '\u5E95\u90E8\u5C55\u793A',\n position: 'bottom',\n});\n
\n\u901A\u8FC7 wordBreak
\u9009\u9879\u53EF\u4EE5\u63A7\u5236 Toast \u4E2D\u7684\u6587\u5B57\u8FC7\u957F\u65F6\u7684\u622A\u65AD\u65B9\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A break-all
\uFF0C\u53EF\u9009\u503C\u4E3A break-word
\u548C normal
\u3002
import { showToast } from 'vant';\n\n// \u6362\u884C\u65F6\u622A\u65AD\u5355\u8BCD\nshowToast({\n message: 'This message will contain a incomprehensibilities long word.',\n wordBreak: 'break-all',\n});\n\n// \u6362\u884C\u65F6\u4E0D\u622A\u65AD\u5355\u8BCD\nshowToast({\n message: 'This message will contain a incomprehensibilities long word.',\n wordBreak: 'break-word',\n});\n
\n\u6267\u884C Toast \u65B9\u6CD5\u65F6\u4F1A\u8FD4\u56DE\u5BF9\u5E94\u7684 Toast \u5B9E\u4F8B\uFF0C\u901A\u8FC7\u4FEE\u6539\u5B9E\u4F8B\u4E0A\u7684 message
\u5C5E\u6027\u53EF\u4EE5\u5B9E\u73B0\u52A8\u6001\u66F4\u65B0\u63D0\u793A\u7684\u6548\u679C\u3002
import { showLoadingToast, closeToast } from 'vant';\n\nconst toast = showLoadingToast({\n duration: 0,\n forbidClick: true,\n message: '\u5012\u8BA1\u65F6 3 \u79D2',\n});\n\nlet second = 3;\nconst timer = setInterval(() => {\n second--;\n if (second) {\n toast.message = `\u5012\u8BA1\u65F6 ${second} \u79D2`;\n } else {\n clearInterval(timer);\n closeToast();\n }\n}, 1000);\n
\nToast \u9ED8\u8BA4\u91C7\u7528\u5355\u4F8B\u6A21\u5F0F\uFF0C\u5373\u540C\u4E00\u65F6\u95F4\u53EA\u4F1A\u5B58\u5728\u4E00\u4E2A Toast\uFF0C\u5982\u679C\u9700\u8981\u5728\u540C\u4E00\u65F6\u95F4\u5F39\u51FA\u591A\u4E2A Toast\uFF0C\u53EF\u4EE5\u53C2\u8003\u4E0B\u9762\u7684\u793A\u4F8B\uFF1A
\nimport { showToast, showSuccessToast, allowMultipleToast } from 'vant';\n\nallowMultipleToast();\n\nconst toast1 = showToast('\u7B2C\u4E00\u4E2A Toast');\nconst toast2 = showSuccessToast('\u7B2C\u4E8C\u4E2A Toast');\n\ntoast1.close();\ntoast2.close();\n
\n\u901A\u8FC7 setToastDefaultOptions
\u51FD\u6570\u53EF\u4EE5\u5168\u5C40\u4FEE\u6539 showToast
\u7B49\u65B9\u6CD5\u7684\u9ED8\u8BA4\u914D\u7F6E\u3002
import { setToastDefaultOptions, resetToastDefaultOptions } from 'vant';\n\nsetToastDefaultOptions({ duration: 2000 });\n\nsetToastDefaultOptions('loading', { forbidClick: true });\n\nresetToastDefaultOptions();\n\nresetToastDefaultOptions('loading');\n
\n\u5982\u679C\u4F60\u9700\u8981\u5728 Toast \u5185\u5D4C\u5165\u7EC4\u4EF6\u6216\u5176\u4ED6\u81EA\u5B9A\u4E49\u5185\u5BB9\uFF0C\u53EF\u4EE5\u76F4\u63A5\u4F7F\u7528 Toast \u7EC4\u4EF6\uFF0C\u5E76\u4F7F\u7528 message \u63D2\u69FD\u8FDB\u884C\u5B9A\u5236\u3002\u4F7F\u7528\u524D\u9700\u8981\u901A\u8FC7 app.use
\u7B49\u65B9\u5F0F\u6CE8\u518C\u7EC4\u4EF6\u3002
<van-toast v-model:show="show" style="padding: 0">\n <template #message>\n <van-image :src="image" width="200" height="140" style="display: block" />\n </template>\n</van-toast>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n return { show };\n },\n};\n
\nVant \u4E2D\u5BFC\u51FA\u4E86\u4EE5\u4E0B Toast \u76F8\u5173\u7684\u8F85\u52A9\u51FD\u6570\uFF1A
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
showToast | \n\u5C55\u793A\u6587\u5B57\u63D0\u793A | \nToastOptions | string | \nToast \u5B9E\u4F8B | \n
showLoadingToast | \n\u5C55\u793A\u52A0\u8F7D\u63D0\u793A | \nToastOptions | string | \nToast \u5B9E\u4F8B | \n
showSuccessToast | \n\u5C55\u793A\u6210\u529F\u63D0\u793A | \nToastOptions | string | \nToast \u5B9E\u4F8B | \n
showFailToast | \n\u5C55\u793A\u5931\u8D25\u63D0\u793A | \nToastOptions | string | \nToast \u5B9E\u4F8B | \n
closeToast | \n\u5173\u95ED\u5F53\u524D\u5C55\u793A\u7684\u63D0\u793A | \ncloseAll: boolean | \nvoid | \n
allowMultipleToast | \n\u5141\u8BB8\u540C\u65F6\u5B58\u5728\u591A\u4E2A Toast | \n- | \nvoid | \n
setToastDefaultOptions | \n\u4FEE\u6539\u9ED8\u8BA4\u914D\u7F6E\uFF0C\u5F71\u54CD\u6240\u6709\u7684 showToast \u8C03\u7528\u3002\u4F20\u5165 type \u53EF\u4EE5\u4FEE\u6539\u6307\u5B9A\u7C7B\u578B Toast \u7684\u9ED8\u8BA4\u914D\u7F6E | \ntype | ToastOptions | \nvoid | \n
resetToastDefaultOptions | \n\u91CD\u7F6E\u9ED8\u8BA4\u914D\u7F6E\uFF0C\u5F71\u54CD\u6240\u6709\u7684 showToast \u8C03\u7528\u3002\u4F20\u5165 type \u53EF\u4EE5\u91CD\u7F6E\u6307\u5B9A\u7C7B\u578B Toast \u7684\u9ED8\u8BA4\u914D\u7F6E | \ntype | \nvoid | \n
\u8C03\u7528 showToast
\u7B49\u65B9\u6CD5\u65F6\uFF0C\u652F\u6301\u4F20\u5165\u4EE5\u4E0B\u9009\u9879\uFF1A
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
type | \n\u63D0\u793A\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A loading success fail html | \nToastType | \ntext | \n
position | \n\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A top bottom | \nToastPosition | \nmiddle | \n
message | \n\u6587\u672C\u5185\u5BB9\uFF0C\u652F\u6301\u901A\u8FC7\\n \u6362\u884C | \nstring | \n\'\' | \n
wordBreak | \n\u6587\u672C\u5185\u5BB9\u7684\u6362\u884C\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A normal break-all break-word | \nToastWordBreak | \n\'break-all\' | \n
icon | \n\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u652F\u6301\u4F20\u5165\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n- | \n
iconSize | \n\u56FE\u6807\u5927\u5C0F\uFF0C\u5982 20px 2em \uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n36px | \n
iconPrefix | \n\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 | \nstring | \nvan-icon | \n
overlay | \n\u662F\u5426\u663E\u793A\u80CC\u666F\u906E\u7F69\u5C42 | \nboolean | \nfalse | \n
forbidClick | \n\u662F\u5426\u7981\u6B62\u80CC\u666F\u70B9\u51FB | \nboolean | \nfalse | \n
closeOnClick | \n\u662F\u5426\u5728\u70B9\u51FB\u540E\u5173\u95ED | \nboolean | \nfalse | \n
closeOnClickOverlay | \n\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED | \nboolean | \nfalse | \n
loadingType | \n\u52A0\u8F7D\u56FE\u6807\u7C7B\u578B, \u53EF\u9009\u503C\u4E3A spinner | \nstring | \ncircular | \n
duration | \n\u5C55\u793A\u65F6\u957F(ms)\uFF0C\u503C\u4E3A 0 \u65F6\uFF0Ctoast \u4E0D\u4F1A\u6D88\u5931 | \nnumber | \n2000 | \n
className | \n\u81EA\u5B9A\u4E49\u7C7B\u540D | \nstring | Array | object | \n- | \n
overlayClass | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u7C7B\u540D | \nstring | Array | object | \n- | \n
overlayStyle | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0F | \nobject | \n- | \n
onOpened | \n\u5B8C\u5168\u5C55\u793A\u540E\u7684\u56DE\u8C03\u51FD\u6570 | \nFunction | \n- | \n
onClose | \n\u5173\u95ED\u65F6\u7684\u56DE\u8C03\u51FD\u6570 | \nFunction | \n- | \n
transition | \n\u52A8\u753B\u7C7B\u540D\uFF0C\u7B49\u4EF7\u4E8E transition \u7684name \u5C5E\u6027 | \nstring | \nvan-fade | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \nbody | \n
\u4F7F\u7528 Toast
\u7EC4\u4EF6\u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B\u63D2\u69FD\uFF1A
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
message | \n\u81EA\u5B9A\u4E49\u6587\u672C\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n ToastType,\n ToastProps,\n ToastOptions,\n ToastPosition,\n ToastWordBreak,\n ToastWrapperInstance,\n} from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-toast-max-width | \n70% | \n- | \n
--van-toast-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-toast-text-color | \nvar(--van-white) | \n- | \n
--van-toast-loading-icon-color | \nvar(--van-white) | \n- | \n
--van-toast-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-toast-radius | \nvar(--van-radius-lg) | \n- | \n
--van-toast-background | \nfade(var(--van-black), 70%) | \n- | \n
--van-toast-icon-size | \n36px | \n- | \n
--van-toast-text-min-width | \n96px | \n- | \n
--van-toast-text-padding | \nvar(--van-padding-xs) var(--van-padding-sm) | \n- | \n
--van-toast-default-padding | \nvar(--van-padding-md) | \n- | \n
--van-toast-default-width | \n88px | \n- | \n
--van-toast-default-min-height | \n88px | \n- | \n
--van-toast-position-top-distance | \n20% | \n- | \n
--van-toast-position-bottom-distance | \n20% | \n- | \n
\u5982\u679C\u5F15\u7528 showToast
\u65B9\u6CD5\u65F6\u51FA\u73B0\u4EE5\u4E0B\u62A5\u9519\uFF0C\u8BF4\u660E\u9879\u76EE\u4E2D\u4F7F\u7528\u4E86 babel-plugin-import
\u63D2\u4EF6\uFF0C\u5BFC\u81F4\u4EE3\u7801\u88AB\u9519\u8BEF\u7F16\u8BD1\u3002
These dependencies were not found:\n\n* vant/es/show-toast in ./src/xxx.js\n* vant/es/show-toast/style in ./src/xxx.js\n
\nVant \u4ECE 4.0 \u7248\u672C\u5F00\u59CB\u4E0D\u518D\u652F\u6301 babel-plugin-import
\u63D2\u4EF6\uFF0C\u8BF7\u53C2\u8003 \u8FC1\u79FB\u6307\u5357 \u79FB\u9664\u8BE5\u63D2\u4EF6\u3002
\u5728\u9875\u9762\u4E2D\u95F4\u5F39\u51FA\u9ED1\u8272\u534A\u900F\u660E\u63D0\u793A\uFF0C\u7528\u4E8E\u6D88\u606F\u901A\u77E5\u3001\u52A0\u8F7D\u63D0\u793A\u3001\u64CD\u4F5C\u7ED3\u679C\u63D0\u793A\u7B49\u573A\u666F\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Toast } from 'vant';\n\nconst app = createApp();\napp.use(Toast);\n
\n\u4E3A\u4E86\u4FBF\u4E8E\u4F7F\u7528 Toast
\uFF0CVant \u63D0\u4F9B\u4E86\u4E00\u7CFB\u5217\u8F85\u52A9\u51FD\u6570\uFF0C\u901A\u8FC7\u8F85\u52A9\u51FD\u6570\u53EF\u4EE5\u5FEB\u901F\u5524\u8D77\u5168\u5C40\u7684 Toast \u7EC4\u4EF6\u3002
\u6BD4\u5982\u4F7F\u7528 showToast
\u51FD\u6570\uFF0C\u8C03\u7528\u540E\u4F1A\u76F4\u63A5\u5728\u9875\u9762\u4E2D\u6E32\u67D3\u5BF9\u5E94\u7684\u8F7B\u63D0\u793A\u3002
import { showToast } from 'vant';\n\nshowToast('\u63D0\u793A\u5185\u5BB9');\n
\n\u4F7F\u7528 showToast
\u65B9\u6CD5\u5728\u5C4F\u5E55\u4E2D\u95F4\u5C55\u793A\u4E00\u6761\u6587\u5B57\u63D0\u793A\u3002
import { showToast } from 'vant';\n\nshowToast('\u63D0\u793A\u5185\u5BB9');\n
\n\u4F7F\u7528 showLoadingToast
\u65B9\u6CD5\u5C55\u793A\u52A0\u8F7D\u63D0\u793A\uFF0C\u901A\u8FC7 forbidClick
\u9009\u9879\u53EF\u4EE5\u7981\u7528\u80CC\u666F\u70B9\u51FB\u3002
import { showLoadingToast } from 'vant';\n\nshowLoadingToast({\n message: '\u52A0\u8F7D\u4E2D...',\n forbidClick: true,\n});\n
\n\u4F7F\u7528 showSuccessToast
\u65B9\u6CD5\u5C55\u793A\u6210\u529F\u63D0\u793A\uFF0C\u4F7F\u7528 showFailToast
\u65B9\u6CD5\u5C55\u793A\u5931\u8D25\u63D0\u793A\u3002
import { showSuccessToast, showFailToast } from 'vant';\n\nshowSuccessToast('\u6210\u529F\u6587\u6848');\nshowFailToast('\u5931\u8D25\u6587\u6848');\n
\n\u901A\u8FC7 icon
\u9009\u9879\u53EF\u4EE5\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u652F\u6301\u4F20\u5165\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027\u3002
import { showToast } from 'vant';\n\nshowToast({\n message: '\u81EA\u5B9A\u4E49\u56FE\u6807',\n icon: 'like-o',\n});\n\nshowToast({\n message: '\u81EA\u5B9A\u4E49\u56FE\u7247',\n icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png',\n});\n
\n\u901A\u8FC7 loadingType
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u52A0\u8F7D\u56FE\u6807\u7C7B\u578B\u3002
import { showLoadingToast } from 'vant';\n\nshowLoadingToast({\n message: '\u52A0\u8F7D\u4E2D...',\n forbidClick: true,\n loadingType: 'spinner',\n});\n
\nToast \u9ED8\u8BA4\u6E32\u67D3\u5728\u5C4F\u5E55\u6B63\u4E2D\u4F4D\u7F6E\uFF0C\u901A\u8FC7 position
\u5C5E\u6027\u53EF\u4EE5\u63A7\u5236 Toast \u5C55\u793A\u7684\u4F4D\u7F6E\u3002
import { showToast } from 'vant';\n\nshowToast({\n message: '\u9876\u90E8\u5C55\u793A',\n position: 'top',\n});\n\nshowToast({\n message: '\u5E95\u90E8\u5C55\u793A',\n position: 'bottom',\n});\n
\n\u901A\u8FC7 wordBreak
\u9009\u9879\u53EF\u4EE5\u63A7\u5236 Toast \u4E2D\u7684\u6587\u5B57\u8FC7\u957F\u65F6\u7684\u622A\u65AD\u65B9\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A break-all
\uFF0C\u53EF\u9009\u503C\u4E3A break-word
\u548C normal
\u3002
import { showToast } from 'vant';\n\n// \u6362\u884C\u65F6\u622A\u65AD\u5355\u8BCD\nshowToast({\n message: 'This message will contain a incomprehensibilities long word.',\n wordBreak: 'break-all',\n});\n\n// \u6362\u884C\u65F6\u4E0D\u622A\u65AD\u5355\u8BCD\nshowToast({\n message: 'This message will contain a incomprehensibilities long word.',\n wordBreak: 'break-word',\n});\n
\n\u6267\u884C Toast \u65B9\u6CD5\u65F6\u4F1A\u8FD4\u56DE\u5BF9\u5E94\u7684 Toast \u5B9E\u4F8B\uFF0C\u901A\u8FC7\u4FEE\u6539\u5B9E\u4F8B\u4E0A\u7684 message
\u5C5E\u6027\u53EF\u4EE5\u5B9E\u73B0\u52A8\u6001\u66F4\u65B0\u63D0\u793A\u7684\u6548\u679C\u3002
import { showLoadingToast, closeToast } from 'vant';\n\nconst toast = showLoadingToast({\n duration: 0,\n forbidClick: true,\n message: '\u5012\u8BA1\u65F6 3 \u79D2',\n});\n\nlet second = 3;\nconst timer = setInterval(() => {\n second--;\n if (second) {\n toast.message = `\u5012\u8BA1\u65F6 ${second} \u79D2`;\n } else {\n clearInterval(timer);\n closeToast();\n }\n}, 1000);\n
\nToast \u9ED8\u8BA4\u91C7\u7528\u5355\u4F8B\u6A21\u5F0F\uFF0C\u5373\u540C\u4E00\u65F6\u95F4\u53EA\u4F1A\u5B58\u5728\u4E00\u4E2A Toast\uFF0C\u5982\u679C\u9700\u8981\u5728\u540C\u4E00\u65F6\u95F4\u5F39\u51FA\u591A\u4E2A Toast\uFF0C\u53EF\u4EE5\u53C2\u8003\u4E0B\u9762\u7684\u793A\u4F8B\uFF1A
\nimport { showToast, showSuccessToast, allowMultipleToast } from 'vant';\n\nallowMultipleToast();\n\nconst toast1 = showToast('\u7B2C\u4E00\u4E2A Toast');\nconst toast2 = showSuccessToast('\u7B2C\u4E8C\u4E2A Toast');\n\ntoast1.close();\ntoast2.close();\n
\n\u901A\u8FC7 setToastDefaultOptions
\u51FD\u6570\u53EF\u4EE5\u5168\u5C40\u4FEE\u6539 showToast
\u7B49\u65B9\u6CD5\u7684\u9ED8\u8BA4\u914D\u7F6E\u3002
import { setToastDefaultOptions, resetToastDefaultOptions } from 'vant';\n\nsetToastDefaultOptions({ duration: 2000 });\n\nsetToastDefaultOptions('loading', { forbidClick: true });\n\nresetToastDefaultOptions();\n\nresetToastDefaultOptions('loading');\n
\n\u5982\u679C\u4F60\u9700\u8981\u5728 Toast \u5185\u5D4C\u5165\u7EC4\u4EF6\u6216\u5176\u4ED6\u81EA\u5B9A\u4E49\u5185\u5BB9\uFF0C\u53EF\u4EE5\u76F4\u63A5\u4F7F\u7528 Toast \u7EC4\u4EF6\uFF0C\u5E76\u4F7F\u7528 message \u63D2\u69FD\u8FDB\u884C\u5B9A\u5236\u3002\u4F7F\u7528\u524D\u9700\u8981\u901A\u8FC7 app.use
\u7B49\u65B9\u5F0F\u6CE8\u518C\u7EC4\u4EF6\u3002
<van-toast v-model:show="show" style="padding: 0">\n <template #message>\n <van-image :src="image" width="200" height="140" style="display: block" />\n </template>\n</van-toast>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n return { show };\n },\n};\n
\nVant \u4E2D\u5BFC\u51FA\u4E86\u4EE5\u4E0B Toast \u76F8\u5173\u7684\u8F85\u52A9\u51FD\u6570\uFF1A
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
showToast | \n\u5C55\u793A\u6587\u5B57\u63D0\u793A | \nToastOptions | string | \nToast \u5B9E\u4F8B | \n
showLoadingToast | \n\u5C55\u793A\u52A0\u8F7D\u63D0\u793A | \nToastOptions | string | \nToast \u5B9E\u4F8B | \n
showSuccessToast | \n\u5C55\u793A\u6210\u529F\u63D0\u793A | \nToastOptions | string | \nToast \u5B9E\u4F8B | \n
showFailToast | \n\u5C55\u793A\u5931\u8D25\u63D0\u793A | \nToastOptions | string | \nToast \u5B9E\u4F8B | \n
closeToast | \n\u5173\u95ED\u5F53\u524D\u5C55\u793A\u7684\u63D0\u793A | \ncloseAll: boolean | \nvoid | \n
allowMultipleToast | \n\u5141\u8BB8\u540C\u65F6\u5B58\u5728\u591A\u4E2A Toast | \n- | \nvoid | \n
setToastDefaultOptions | \n\u4FEE\u6539\u9ED8\u8BA4\u914D\u7F6E\uFF0C\u5F71\u54CD\u6240\u6709\u7684 showToast \u8C03\u7528\u3002\u4F20\u5165 type \u53EF\u4EE5\u4FEE\u6539\u6307\u5B9A\u7C7B\u578B Toast \u7684\u9ED8\u8BA4\u914D\u7F6E | \ntype | ToastOptions | \nvoid | \n
resetToastDefaultOptions | \n\u91CD\u7F6E\u9ED8\u8BA4\u914D\u7F6E\uFF0C\u5F71\u54CD\u6240\u6709\u7684 showToast \u8C03\u7528\u3002\u4F20\u5165 type \u53EF\u4EE5\u91CD\u7F6E\u6307\u5B9A\u7C7B\u578B Toast \u7684\u9ED8\u8BA4\u914D\u7F6E | \ntype | \nvoid | \n
\u8C03\u7528 showToast
\u7B49\u65B9\u6CD5\u65F6\uFF0C\u652F\u6301\u4F20\u5165\u4EE5\u4E0B\u9009\u9879\uFF1A
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
type | \n\u63D0\u793A\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A loading success fail html | \nToastType | \ntext | \n
position | \n\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A top bottom | \nToastPosition | \nmiddle | \n
message | \n\u6587\u672C\u5185\u5BB9\uFF0C\u652F\u6301\u901A\u8FC7\\n \u6362\u884C | \nstring | \n\'\' | \n
wordBreak | \n\u6587\u672C\u5185\u5BB9\u7684\u6362\u884C\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A normal break-all break-word | \nToastWordBreak | \n\'break-all\' | \n
icon | \n\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u652F\u6301\u4F20\u5165\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n- | \n
iconSize | \n\u56FE\u6807\u5927\u5C0F\uFF0C\u5982 20px 2em \uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n36px | \n
iconPrefix | \n\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 | \nstring | \nvan-icon | \n
overlay | \n\u662F\u5426\u663E\u793A\u80CC\u666F\u906E\u7F69\u5C42 | \nboolean | \nfalse | \n
forbidClick | \n\u662F\u5426\u7981\u6B62\u80CC\u666F\u70B9\u51FB | \nboolean | \nfalse | \n
closeOnClick | \n\u662F\u5426\u5728\u70B9\u51FB\u540E\u5173\u95ED | \nboolean | \nfalse | \n
closeOnClickOverlay | \n\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED | \nboolean | \nfalse | \n
loadingType | \n\u52A0\u8F7D\u56FE\u6807\u7C7B\u578B, \u53EF\u9009\u503C\u4E3A spinner | \nstring | \ncircular | \n
duration | \n\u5C55\u793A\u65F6\u957F(ms)\uFF0C\u503C\u4E3A 0 \u65F6\uFF0Ctoast \u4E0D\u4F1A\u6D88\u5931 | \nnumber | \n2000 | \n
className | \n\u81EA\u5B9A\u4E49\u7C7B\u540D | \nstring | Array | object | \n- | \n
overlayClass | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u7C7B\u540D | \nstring | Array | object | \n- | \n
overlayStyle | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0F | \nobject | \n- | \n
onOpened | \n\u5B8C\u5168\u5C55\u793A\u540E\u7684\u56DE\u8C03\u51FD\u6570 | \nFunction | \n- | \n
onClose | \n\u5173\u95ED\u65F6\u7684\u56DE\u8C03\u51FD\u6570 | \nFunction | \n- | \n
transition | \n\u52A8\u753B\u7C7B\u540D\uFF0C\u7B49\u4EF7\u4E8E transition \u7684name \u5C5E\u6027 | \nstring | \nvan-fade | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \nbody | \n
\u4F7F\u7528 Toast
\u7EC4\u4EF6\u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B\u63D2\u69FD\uFF1A
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
message | \n\u81EA\u5B9A\u4E49\u6587\u672C\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n ToastType,\n ToastProps,\n ToastOptions,\n ToastPosition,\n ToastWordBreak,\n ToastWrapperInstance,\n} from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-toast-max-width | \n70% | \n- | \n
--van-toast-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-toast-text-color | \nvar(--van-white) | \n- | \n
--van-toast-loading-icon-color | \nvar(--van-white) | \n- | \n
--van-toast-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-toast-radius | \nvar(--van-radius-lg) | \n- | \n
--van-toast-background | \nfade(var(--van-black), 70%) | \n- | \n
--van-toast-icon-size | \n36px | \n- | \n
--van-toast-text-min-width | \n96px | \n- | \n
--van-toast-text-padding | \nvar(--van-padding-xs) var(--van-padding-sm) | \n- | \n
--van-toast-default-padding | \nvar(--van-padding-md) | \n- | \n
--van-toast-default-width | \n88px | \n- | \n
--van-toast-default-min-height | \n88px | \n- | \n
--van-toast-position-top-distance | \n20% | \n- | \n
--van-toast-position-bottom-distance | \n20% | \n- | \n
\u5982\u679C\u5F15\u7528 showToast
\u65B9\u6CD5\u65F6\u51FA\u73B0\u4EE5\u4E0B\u62A5\u9519\uFF0C\u8BF4\u660E\u9879\u76EE\u4E2D\u4F7F\u7528\u4E86 babel-plugin-import
\u63D2\u4EF6\uFF0C\u5BFC\u81F4\u4EE3\u7801\u88AB\u9519\u8BEF\u7F16\u8BD1\u3002
These dependencies were not found:\n\n* vant/es/show-toast in ./src/xxx.js\n* vant/es/show-toast/style in ./src/xxx.js\n
\nVant \u4ECE 4.0 \u7248\u672C\u5F00\u59CB\u4E0D\u518D\u652F\u6301 babel-plugin-import
\u63D2\u4EF6\uFF0C\u8BF7\u53C2\u8003 \u8FC1\u79FB\u6307\u5357 \u79FB\u9664\u8BE5\u63D2\u4EF6\u3002
\u5411\u4E0B\u5F39\u51FA\u7684\u83DC\u5355\u5217\u8868\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { DropdownMenu, DropdownItem } from 'vant';\n\nconst app = createApp();\napp.use(DropdownMenu);\napp.use(DropdownItem);\n
\n<van-dropdown-menu>\n <van-dropdown-item v-model="value1" :options="option1" />\n <van-dropdown-item v-model="value2" :options="option2" />\n</van-dropdown-menu>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value1 = ref(0);\n const value2 = ref('a');\n const option1 = [\n { text: '\u5168\u90E8\u5546\u54C1', value: 0 },\n { text: '\u65B0\u6B3E\u5546\u54C1', value: 1 },\n { text: '\u6D3B\u52A8\u5546\u54C1', value: 2 },\n ];\n const option2 = [\n { text: '\u9ED8\u8BA4\u6392\u5E8F', value: 'a' },\n { text: '\u597D\u8BC4\u6392\u5E8F', value: 'b' },\n { text: '\u9500\u91CF\u6392\u5E8F', value: 'c' },\n ];\n\n return {\n value1,\n value2,\n option1,\n option2,\n };\n },\n};\n
\n\u901A\u8FC7\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49 DropdownItem
\u7684\u5185\u5BB9\uFF0C\u6B64\u65F6\u9700\u8981\u4F7F\u7528 DropdownMenu
\u5B9E\u4F8B\u4E0A\u7684 close
\u6216\u6307\u5B9A DropdownItem
\u7684 toggle
\u65B9\u6CD5\u624B\u52A8\u63A7\u5236\u83DC\u5355\u7684\u663E\u793A\u3002
<van-dropdown-menu ref="menuRef">\n <van-dropdown-item v-model="value" :options="options" />\n <van-dropdown-item title="\u7B5B\u9009" ref="itemRef">\n <van-cell center title="\u5305\u90AE">\n <template #right-icon>\n <van-switch v-model="switch1" />\n </template>\n </van-cell>\n <van-cell center title="\u56E2\u8D2D">\n <template #right-icon>\n <van-switch v-model="switch2" />\n </template>\n </van-cell>\n <div style="padding: 5px 16px;">\n <van-button type="primary" block round @click="onConfirm">\n \u786E\u8BA4\n </van-button>\n </div>\n </van-dropdown-item>\n</van-dropdown-menu>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const menuRef = ref(null);\n const itemRef = ref(null);\n const value = ref(0);\n const switch1 = ref(false);\n const switch2 = ref(false);\n const options = [\n { text: '\u5168\u90E8\u5546\u54C1', value: 0 },\n { text: '\u65B0\u6B3E\u5546\u54C1', value: 1 },\n { text: '\u6D3B\u52A8\u5546\u54C1', value: 2 },\n ];\n const onConfirm = () => {\n itemRef.value.toggle();\n // \u6216\u8005\n // menuRef.value.close();\n };\n\n return {\n menuRef,\n itemRef,\n value,\n switch1,\n switch2,\n options,\n onConfirm,\n };\n },\n};\n
\n\u901A\u8FC7 active-color
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u83DC\u5355\u6807\u9898\u548C\u9009\u9879\u7684\u9009\u4E2D\u6001\u989C\u8272\u3002
<van-dropdown-menu active-color="#ee0a24">\n <van-dropdown-item v-model="value1" :options="option1" />\n <van-dropdown-item v-model="value2" :options="option2" />\n</van-dropdown-menu>\n
\n\u901A\u8FC7 swipe-threshold
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u6EDA\u52A8\u9608\u503C\u3002
<van-dropdown-menu swipe-threshold="4">\n <van-dropdown-item v-model="value1" :options="option1" />\n <van-dropdown-item v-model="value2" :options="option2" />\n <van-dropdown-item v-model="value2" :options="option2" />\n <van-dropdown-item v-model="value2" :options="option2" />\n <van-dropdown-item v-model="value2" :options="option2" />\n</van-dropdown-menu>\n
\n\u5C06 direction
\u5C5E\u6027\u503C\u8BBE\u7F6E\u4E3A up
\uFF0C\u83DC\u5355\u5373\u53EF\u5411\u4E0A\u5C55\u5F00\u3002
<van-dropdown-menu direction="up">\n <van-dropdown-item v-model="value1" :options="option1" />\n <van-dropdown-item v-model="value2" :options="option2" />\n</van-dropdown-menu>\n
\n<van-dropdown-menu>\n <van-dropdown-item v-model="value1" disabled :options="option1" />\n <van-dropdown-item v-model="value2" disabled :options="option2" />\n</van-dropdown-menu>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
active-color | \n\u83DC\u5355\u6807\u9898\u548C\u9009\u9879\u7684\u9009\u4E2D\u6001\u989C\u8272 | \nstring | \n#1989fa | \n
direction | \n\u83DC\u5355\u5C55\u5F00\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3Aup | \nstring | \ndown | \n
z-index | \n\u83DC\u5355\u680F z-index \u5C42\u7EA7 | \nnumber | string | \n10 | \n
duration | \n\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u79D2\uFF0C\u8BBE\u7F6E\u4E3A 0 \u53EF\u4EE5\u7981\u7528\u52A8\u753B | \nnumber | string | \n0.2 | \n
overlay | \n\u662F\u5426\u663E\u793A\u906E\u7F69\u5C42 | \nboolean | \ntrue | \n
close-on-click-overlay | \n\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED\u83DC\u5355 | \nboolean | \ntrue | \n
close-on-click-outside | \n\u662F\u5426\u5728\u70B9\u51FB\u5916\u90E8\u5143\u7D20\u540E\u5173\u95ED\u83DC\u5355 | \nboolean | \ntrue | \n
swipe-threshold | \n\u6EDA\u52A8\u9608\u503C\uFF0C\u9009\u9879\u6570\u91CF\u8D85\u8FC7\u9608\u503C\u4E14\u603B\u5BBD\u5EA6\u8D85\u8FC7\u83DC\u5355\u680F\u5BBD\u5EA6\u65F6\uFF0C\u53EF\u4EE5\u6A2A\u5411\u6EDA\u52A8 | \nnumber | string | \n- | \n
auto-locate | \n\u5F53\u7956\u5148\u5143\u7D20\u8BBE\u7F6E\u4E86 transform \u65F6\uFF0C\u81EA\u52A8\u8C03\u6574\u4E0B\u62C9\u83DC\u5355\u7684\u4F4D\u7F6E | \nboolean | \nfalse | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u9009\u4E2D\u9879\u5BF9\u5E94\u7684 value | \nnumber | string | \n- | \n
title | \n\u83DC\u5355\u9879\u6807\u9898 | \nstring | \n\u5F53\u524D\u9009\u4E2D\u9879\u6587\u5B57 | \n
options | \n\u9009\u9879\u6570\u7EC4 | \nOption[] | \n[] | \n
disabled | \n\u662F\u5426\u7981\u7528\u83DC\u5355 | \nboolean | \nfalse | \n
lazy-render | \n\u662F\u5426\u5728\u9996\u6B21\u5C55\u5F00\u65F6\u624D\u6E32\u67D3\u83DC\u5355\u5185\u5BB9 | \nboolean | \ntrue | \n
title-class | \n\u6807\u9898\u989D\u5916\u7C7B\u540D | \nstring | Array | object | \n- | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \n- | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u70B9\u51FB\u9009\u9879\u5BFC\u81F4 value \u53D8\u5316\u65F6\u89E6\u53D1 | \nvalue | \n
open | \n\u6253\u5F00\u83DC\u5355\u680F\u65F6\u89E6\u53D1 | \n- | \n
close | \n\u5173\u95ED\u83DC\u5355\u680F\u65F6\u89E6\u53D1 | \n- | \n
opened | \n\u6253\u5F00\u83DC\u5355\u680F\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
closed | \n\u5173\u95ED\u83DC\u5355\u680F\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u83DC\u5355\u5185\u5BB9 | \n
title | \n\u81EA\u5B9A\u4E49\u83DC\u5355\u9879\u6807\u9898 | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 DropdownMenu \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
close | \n\u5173\u95ED\u6240\u6709\u83DC\u5355\u7684\u5C55\u793A\u72B6\u6001 | \n- | \n- | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 DropdownItem \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
toggle | \n\u5207\u6362\u83DC\u5355\u5C55\u793A\u72B6\u6001\uFF0C\u4F20 true \u4E3A\u663E\u793A\uFF0Cfalse \u4E3A\u9690\u85CF\uFF0C\u4E0D\u4F20\u53C2\u4E3A\u53D6\u53CD | \nshow?: boolean | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n DropdownMenuProps,\n DropdownItemProps,\n DropdownItemOption,\n DropdownItemInstance,\n DropdownMenuInstance,\n DropdownMenuDirection,\n} from 'vant';\n
\nDropdownMenuInstance
\u548C DropdownItemInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { DropdownMenuInstance, DropdownItemInstance } from 'vant';\n\nconst dropdownMenuRef = ref<DropdownMenuInstance>();\nconst dropdownItemRef = ref<DropdownItemInstance>();\n\ndropdownMenuRef.value?.close();\ndropdownItemRef.value?.toggle();\n
\n\u952E\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
text | \n\u6587\u5B57 | \nstring | \n
value | \n\u6807\u8BC6\u7B26 | \nnumber | string | boolean | \n
icon | \n\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-dropdown-menu-height | \n48px | \n- | \n
--van-dropdown-menu-background | \nvar(--van-background-2) | \n- | \n
--van-dropdown-menu-shadow | \n0 2px 12px fade(var(--van-gray-7), 12) | \n- | \n
--van-dropdown-menu-title-font-size | \n15px | \n- | \n
--van-dropdown-menu-title-text-color | \nvar(--van-text-color) | \n- | \n
--van-dropdown-menu-title-active-text-color | \nvar(--van-primary-color) | \n- | \n
--van-dropdown-menu-title-disabled-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-dropdown-menu-title-padding | \n0 var(--van-padding-xs) | \n- | \n
--van-dropdown-menu-title-line-height | \nvar(--van-line-height-lg) | \n- | \n
--van-dropdown-menu-option-active-color | \nvar(--van-primary-color) | \n- | \n
--van-dropdown-menu-content-max-height | \n80% | \n- | \n
--van-dropdown-item-z-index | \n10 | \n- | \n
\u628A DropdownMenu
\u5D4C\u5957\u5728 Tabs
\u7B49\u7EC4\u4EF6\u5185\u90E8\u4F7F\u7528\u65F6\uFF0C\u53EF\u80FD\u4F1A\u9047\u5230\u4E0B\u62C9\u83DC\u5355\u4F4D\u7F6E\u9519\u8BEF\u7684\u95EE\u9898\u3002\u8FD9\u662F\u56E0\u4E3A transform \u5143\u7D20\u5185\u90E8\u7684 fixed \u5B9A\u4F4D\u4F1A\u76F8\u5BF9\u4E8E\u8BE5\u5143\u7D20\u8FDB\u884C\u8BA1\u7B97\uFF0C\u800C\u4E0D\u662F\u76F8\u5BF9\u4E8E\u6574\u4E2A\u6587\u6863\uFF0C\u4ECE\u800C\u5BFC\u81F4\u4E0B\u62C9\u83DC\u5355\u7684\u5E03\u5C40\u5F02\u5E38\u3002
\u5C06 DropdownItem
\u7684 teleport
\u5C5E\u6027\u8BBE\u7F6E\u4E3A body
\u5373\u53EF\u907F\u514D\u6B64\u95EE\u9898\uFF1A
<van-dropdown-menu>\n <van-dropdown-item teleport="body" />\n <van-dropdown-item teleport="body" />\n</van-dropdown-menu>\n
\n\u4E5F\u53EF\u4EE5\u5C06 DropdownMenu
\u7684 auto-locate
\u5C5E\u6027\u8BBE\u7F6E\u4E3A true
\uFF1A
<van-dropdown-menu auto-locate>\n <van-dropdown-item />\n <van-dropdown-item />\n</van-dropdown-menu>\n
\n\u5411\u4E0B\u5F39\u51FA\u7684\u83DC\u5355\u5217\u8868\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { DropdownMenu, DropdownItem } from 'vant';\n\nconst app = createApp();\napp.use(DropdownMenu);\napp.use(DropdownItem);\n
\n<van-dropdown-menu>\n <van-dropdown-item v-model="value1" :options="option1" />\n <van-dropdown-item v-model="value2" :options="option2" />\n</van-dropdown-menu>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value1 = ref(0);\n const value2 = ref('a');\n const option1 = [\n { text: '\u5168\u90E8\u5546\u54C1', value: 0 },\n { text: '\u65B0\u6B3E\u5546\u54C1', value: 1 },\n { text: '\u6D3B\u52A8\u5546\u54C1', value: 2 },\n ];\n const option2 = [\n { text: '\u9ED8\u8BA4\u6392\u5E8F', value: 'a' },\n { text: '\u597D\u8BC4\u6392\u5E8F', value: 'b' },\n { text: '\u9500\u91CF\u6392\u5E8F', value: 'c' },\n ];\n\n return {\n value1,\n value2,\n option1,\n option2,\n };\n },\n};\n
\n\u901A\u8FC7\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49 DropdownItem
\u7684\u5185\u5BB9\uFF0C\u6B64\u65F6\u9700\u8981\u4F7F\u7528 DropdownMenu
\u5B9E\u4F8B\u4E0A\u7684 close
\u6216\u6307\u5B9A DropdownItem
\u7684 toggle
\u65B9\u6CD5\u624B\u52A8\u63A7\u5236\u83DC\u5355\u7684\u663E\u793A\u3002
<van-dropdown-menu ref="menuRef">\n <van-dropdown-item v-model="value" :options="options" />\n <van-dropdown-item title="\u7B5B\u9009" ref="itemRef">\n <van-cell center title="\u5305\u90AE">\n <template #right-icon>\n <van-switch v-model="switch1" />\n </template>\n </van-cell>\n <van-cell center title="\u56E2\u8D2D">\n <template #right-icon>\n <van-switch v-model="switch2" />\n </template>\n </van-cell>\n <div style="padding: 5px 16px;">\n <van-button type="primary" block round @click="onConfirm">\n \u786E\u8BA4\n </van-button>\n </div>\n </van-dropdown-item>\n</van-dropdown-menu>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const menuRef = ref(null);\n const itemRef = ref(null);\n const value = ref(0);\n const switch1 = ref(false);\n const switch2 = ref(false);\n const options = [\n { text: '\u5168\u90E8\u5546\u54C1', value: 0 },\n { text: '\u65B0\u6B3E\u5546\u54C1', value: 1 },\n { text: '\u6D3B\u52A8\u5546\u54C1', value: 2 },\n ];\n const onConfirm = () => {\n itemRef.value.toggle();\n // \u6216\u8005\n // menuRef.value.close();\n };\n\n return {\n menuRef,\n itemRef,\n value,\n switch1,\n switch2,\n options,\n onConfirm,\n };\n },\n};\n
\n\u901A\u8FC7 active-color
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u83DC\u5355\u6807\u9898\u548C\u9009\u9879\u7684\u9009\u4E2D\u6001\u989C\u8272\u3002
<van-dropdown-menu active-color="#ee0a24">\n <van-dropdown-item v-model="value1" :options="option1" />\n <van-dropdown-item v-model="value2" :options="option2" />\n</van-dropdown-menu>\n
\n\u901A\u8FC7 swipe-threshold
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u6EDA\u52A8\u9608\u503C\u3002
<van-dropdown-menu swipe-threshold="4">\n <van-dropdown-item v-model="value1" :options="option1" />\n <van-dropdown-item v-model="value2" :options="option2" />\n <van-dropdown-item v-model="value2" :options="option2" />\n <van-dropdown-item v-model="value2" :options="option2" />\n <van-dropdown-item v-model="value2" :options="option2" />\n</van-dropdown-menu>\n
\n\u5C06 direction
\u5C5E\u6027\u503C\u8BBE\u7F6E\u4E3A up
\uFF0C\u83DC\u5355\u5373\u53EF\u5411\u4E0A\u5C55\u5F00\u3002
<van-dropdown-menu direction="up">\n <van-dropdown-item v-model="value1" :options="option1" />\n <van-dropdown-item v-model="value2" :options="option2" />\n</van-dropdown-menu>\n
\n<van-dropdown-menu>\n <van-dropdown-item v-model="value1" disabled :options="option1" />\n <van-dropdown-item v-model="value2" disabled :options="option2" />\n</van-dropdown-menu>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
active-color | \n\u83DC\u5355\u6807\u9898\u548C\u9009\u9879\u7684\u9009\u4E2D\u6001\u989C\u8272 | \nstring | \n#1989fa | \n
direction | \n\u83DC\u5355\u5C55\u5F00\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3Aup | \nstring | \ndown | \n
z-index | \n\u83DC\u5355\u680F z-index \u5C42\u7EA7 | \nnumber | string | \n10 | \n
duration | \n\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u79D2\uFF0C\u8BBE\u7F6E\u4E3A 0 \u53EF\u4EE5\u7981\u7528\u52A8\u753B | \nnumber | string | \n0.2 | \n
overlay | \n\u662F\u5426\u663E\u793A\u906E\u7F69\u5C42 | \nboolean | \ntrue | \n
close-on-click-overlay | \n\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED\u83DC\u5355 | \nboolean | \ntrue | \n
close-on-click-outside | \n\u662F\u5426\u5728\u70B9\u51FB\u5916\u90E8\u5143\u7D20\u540E\u5173\u95ED\u83DC\u5355 | \nboolean | \ntrue | \n
swipe-threshold | \n\u6EDA\u52A8\u9608\u503C\uFF0C\u9009\u9879\u6570\u91CF\u8D85\u8FC7\u9608\u503C\u4E14\u603B\u5BBD\u5EA6\u8D85\u8FC7\u83DC\u5355\u680F\u5BBD\u5EA6\u65F6\uFF0C\u53EF\u4EE5\u6A2A\u5411\u6EDA\u52A8 | \nnumber | string | \n- | \n
auto-locate | \n\u5F53\u7956\u5148\u5143\u7D20\u8BBE\u7F6E\u4E86 transform \u65F6\uFF0C\u81EA\u52A8\u8C03\u6574\u4E0B\u62C9\u83DC\u5355\u7684\u4F4D\u7F6E | \nboolean | \nfalse | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u9009\u4E2D\u9879\u5BF9\u5E94\u7684 value | \nnumber | string | \n- | \n
title | \n\u83DC\u5355\u9879\u6807\u9898 | \nstring | \n\u5F53\u524D\u9009\u4E2D\u9879\u6587\u5B57 | \n
options | \n\u9009\u9879\u6570\u7EC4 | \nOption[] | \n[] | \n
disabled | \n\u662F\u5426\u7981\u7528\u83DC\u5355 | \nboolean | \nfalse | \n
lazy-render | \n\u662F\u5426\u5728\u9996\u6B21\u5C55\u5F00\u65F6\u624D\u6E32\u67D3\u83DC\u5355\u5185\u5BB9 | \nboolean | \ntrue | \n
title-class | \n\u6807\u9898\u989D\u5916\u7C7B\u540D | \nstring | Array | object | \n- | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \n- | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u70B9\u51FB\u9009\u9879\u5BFC\u81F4 value \u53D8\u5316\u65F6\u89E6\u53D1 | \nvalue | \n
open | \n\u6253\u5F00\u83DC\u5355\u680F\u65F6\u89E6\u53D1 | \n- | \n
close | \n\u5173\u95ED\u83DC\u5355\u680F\u65F6\u89E6\u53D1 | \n- | \n
opened | \n\u6253\u5F00\u83DC\u5355\u680F\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
closed | \n\u5173\u95ED\u83DC\u5355\u680F\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u83DC\u5355\u5185\u5BB9 | \n
title | \n\u81EA\u5B9A\u4E49\u83DC\u5355\u9879\u6807\u9898 | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 DropdownMenu \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
close | \n\u5173\u95ED\u6240\u6709\u83DC\u5355\u7684\u5C55\u793A\u72B6\u6001 | \n- | \n- | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 DropdownItem \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
toggle | \n\u5207\u6362\u83DC\u5355\u5C55\u793A\u72B6\u6001\uFF0C\u4F20 true \u4E3A\u663E\u793A\uFF0Cfalse \u4E3A\u9690\u85CF\uFF0C\u4E0D\u4F20\u53C2\u4E3A\u53D6\u53CD | \nshow?: boolean | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n DropdownMenuProps,\n DropdownItemProps,\n DropdownItemOption,\n DropdownItemInstance,\n DropdownMenuInstance,\n DropdownMenuDirection,\n} from 'vant';\n
\nDropdownMenuInstance
\u548C DropdownItemInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { DropdownMenuInstance, DropdownItemInstance } from 'vant';\n\nconst dropdownMenuRef = ref<DropdownMenuInstance>();\nconst dropdownItemRef = ref<DropdownItemInstance>();\n\ndropdownMenuRef.value?.close();\ndropdownItemRef.value?.toggle();\n
\n\u952E\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
text | \n\u6587\u5B57 | \nstring | \n
value | \n\u6807\u8BC6\u7B26 | \nnumber | string | boolean | \n
icon | \n\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-dropdown-menu-height | \n48px | \n- | \n
--van-dropdown-menu-background | \nvar(--van-background-2) | \n- | \n
--van-dropdown-menu-shadow | \n0 2px 12px fade(var(--van-gray-7), 12) | \n- | \n
--van-dropdown-menu-title-font-size | \n15px | \n- | \n
--van-dropdown-menu-title-text-color | \nvar(--van-text-color) | \n- | \n
--van-dropdown-menu-title-active-text-color | \nvar(--van-primary-color) | \n- | \n
--van-dropdown-menu-title-disabled-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-dropdown-menu-title-padding | \n0 var(--van-padding-xs) | \n- | \n
--van-dropdown-menu-title-line-height | \nvar(--van-line-height-lg) | \n- | \n
--van-dropdown-menu-option-active-color | \nvar(--van-primary-color) | \n- | \n
--van-dropdown-menu-content-max-height | \n80% | \n- | \n
--van-dropdown-item-z-index | \n10 | \n- | \n
\u628A DropdownMenu
\u5D4C\u5957\u5728 Tabs
\u7B49\u7EC4\u4EF6\u5185\u90E8\u4F7F\u7528\u65F6\uFF0C\u53EF\u80FD\u4F1A\u9047\u5230\u4E0B\u62C9\u83DC\u5355\u4F4D\u7F6E\u9519\u8BEF\u7684\u95EE\u9898\u3002\u8FD9\u662F\u56E0\u4E3A transform \u5143\u7D20\u5185\u90E8\u7684 fixed \u5B9A\u4F4D\u4F1A\u76F8\u5BF9\u4E8E\u8BE5\u5143\u7D20\u8FDB\u884C\u8BA1\u7B97\uFF0C\u800C\u4E0D\u662F\u76F8\u5BF9\u4E8E\u6574\u4E2A\u6587\u6863\uFF0C\u4ECE\u800C\u5BFC\u81F4\u4E0B\u62C9\u83DC\u5355\u7684\u5E03\u5C40\u5F02\u5E38\u3002
\u5C06 DropdownItem
\u7684 teleport
\u5C5E\u6027\u8BBE\u7F6E\u4E3A body
\u5373\u53EF\u907F\u514D\u6B64\u95EE\u9898\uFF1A
<van-dropdown-menu>\n <van-dropdown-item teleport="body" />\n <van-dropdown-item teleport="body" />\n</van-dropdown-menu>\n
\n\u4E5F\u53EF\u4EE5\u5C06 DropdownMenu
\u7684 auto-locate
\u5C5E\u6027\u8BBE\u7F6E\u4E3A true
\uFF1A
<van-dropdown-menu auto-locate>\n <van-dropdown-item />\n <van-dropdown-item />\n</van-dropdown-menu>\n
\n\u7528\u4E8E\u5FAA\u73AF\u64AD\u653E\u5C55\u793A\u4E00\u7EC4\u6D88\u606F\u901A\u77E5\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { NoticeBar } from 'vant';\n\nconst app = createApp();\napp.use(NoticeBar);\n
\n\u901A\u8FC7 text
\u5C5E\u6027\u8BBE\u7F6E\u901A\u77E5\u680F\u7684\u5185\u5BB9\uFF0C\u901A\u8FC7 left-icon
\u5C5E\u6027\u8BBE\u7F6E\u901A\u77E5\u680F\u5DE6\u4FA7\u7684\u56FE\u6807\u3002
<van-notice-bar\n left-icon="volume-o"\n text="\u65E0\u8BBA\u6211\u4EEC\u80FD\u6D3B\u591A\u4E45\uFF0C\u6211\u4EEC\u80FD\u591F\u4EAB\u53D7\u7684\u53EA\u6709\u65E0\u6CD5\u5206\u5272\u7684\u6B64\u523B\uFF0C\u6B64\u5916\u522B\u65E0\u5176\u4ED6\u3002"\n/>\n
\n\u901A\u77E5\u680F\u7684\u5185\u5BB9\u957F\u5EA6\u6EA2\u51FA\u65F6\u4F1A\u81EA\u52A8\u5F00\u542F\u6EDA\u52A8\u64AD\u653E\uFF0C\u901A\u8FC7 scrollable
\u5C5E\u6027\u53EF\u4EE5\u63A7\u5236\u8BE5\u884C\u4E3A\u3002
<!-- \u6587\u5B57\u8F83\u77ED\u65F6\uFF0C\u901A\u8FC7\u8BBE\u7F6E scrollable \u5C5E\u6027\u5F00\u542F\u6EDA\u52A8\u64AD\u653E -->\n<van-notice-bar scrollable text="\u7C73\u888B\u867D\u7A7A\u2014\u2014\u6A31\u82B1\u5F00\u54C9\uFF01" />\n\n<!-- \u6587\u5B57\u8F83\u957F\u65F6\uFF0C\u901A\u8FC7\u7981\u7528 scrollable \u5C5E\u6027\u5173\u95ED\u6EDA\u52A8\u64AD\u653E -->\n<van-notice-bar\n :scrollable="false"\n text="\u4E0D\u4F1A\u56DE\u5934\u7684\u4E1C\u897F\u6709\u56DB\u4EF6\uFF1A\u8BF4\u51FA\u53E3\u7684\u8BDD\u3001\u79BB\u5F26\u7684\u7BAD\u3001\u901D\u53BB\u7684\u751F\u6D3B\u548C\u5931\u53BB\u7684\u673A\u4F1A\u3002"\n/>\n
\n\u6587\u5B57\u8F83\u957F\u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7\u8BBE\u7F6E wrapable
\u5C5E\u6027\u6765\u5F00\u542F\u591A\u884C\u5C55\u793A\u3002
<van-notice-bar\n wrapable\n :scrollable="false"\n text="\u4E0D\u4F1A\u56DE\u5934\u7684\u4E1C\u897F\u6709\u56DB\u4EF6\uFF1A\u8BF4\u51FA\u53E3\u7684\u8BDD\u3001\u79BB\u5F26\u7684\u7BAD\u3001\u901D\u53BB\u7684\u751F\u6D3B\u548C\u5931\u53BB\u7684\u673A\u4F1A\u3002"\n/>\n
\n\u901A\u77E5\u680F\u652F\u6301 closeable
\u548C link
\u4E24\u79CD\u6A21\u5F0F\u3002
<!-- closeable \u6A21\u5F0F\uFF0C\u5728\u53F3\u4FA7\u663E\u793A\u5173\u95ED\u6309\u94AE -->\n<van-notice-bar mode="closeable">\u7C73\u888B\u867D\u7A7A\u2014\u2014\u6A31\u82B1\u5F00\u54C9\uFF01</van-notice-bar>\n\n<!-- link \u6A21\u5F0F\uFF0C\u5728\u53F3\u4FA7\u663E\u793A\u94FE\u63A5\u7BAD\u5934 -->\n<van-notice-bar mode="link">\u7C73\u888B\u867D\u7A7A\u2014\u2014\u6A31\u82B1\u5F00\u54C9\uFF01</van-notice-bar>\n
\n\u901A\u8FC7 color
\u5C5E\u6027\u8BBE\u7F6E\u6587\u672C\u989C\u8272\uFF0C\u901A\u8FC7 background
\u5C5E\u6027\u8BBE\u7F6E\u80CC\u666F\u8272\u3002
<van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">\n \u7C73\u888B\u867D\u7A7A\u2014\u2014\u6A31\u82B1\u5F00\u54C9\uFF01\n</van-notice-bar>\n
\n\u642D\u914D NoticeBar \u548C Swipe \u7EC4\u4EF6\uFF0C\u53EF\u4EE5\u5B9E\u73B0\u5782\u76F4\u6EDA\u52A8\u7684\u6548\u679C\u3002
\n<van-notice-bar left-icon="volume-o" :scrollable="false">\n <van-swipe\n vertical\n class="notice-swipe"\n :autoplay="3000"\n :touchable="false"\n :show-indicators="false"\n >\n <van-swipe-item>\u660E\u6708\u76F4\u5165\uFF0C\u65E0\u5FC3\u53EF\u731C\u3002</van-swipe-item>\n <van-swipe-item>\u4ED9\u4EBA\u629A\u6211\u9876\uFF0C\u7ED3\u53D1\u53D7\u957F\u751F\u3002</van-swipe-item>\n <van-swipe-item>\u4ECA\u4EBA\u4E0D\u89C1\u53E4\u65F6\u6708\uFF0C\u4ECA\u6708\u66FE\u7ECF\u7167\u53E4\u4EBA\u3002</van-swipe-item>\n </van-swipe>\n</van-notice-bar>\n\n<style>\n .notice-swipe {\n height: 40px;\n line-height: 40px;\n }\n</style>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
mode | \n\u901A\u77E5\u680F\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A closeable link | \nstring | \n\'\' | \n
text | \n\u901A\u77E5\u6587\u672C\u5185\u5BB9 | \nstring | \n\'\' | \n
color | \n\u901A\u77E5\u6587\u672C\u989C\u8272 | \nstring | \n#ed6a0c | \n
background | \n\u6EDA\u52A8\u6761\u80CC\u666F | \nstring | \n#fffbe8 | \n
left-icon | \n\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n- | \n
delay | \n\u52A8\u753B\u5EF6\u8FDF\u65F6\u95F4 (s) | \nnumber | string | \n1 | \n
speed | \n\u6EDA\u52A8\u901F\u7387 (px/s) | \nnumber | string | \n60 | \n
scrollable | \n\u662F\u5426\u5F00\u542F\u6EDA\u52A8\u64AD\u653E\uFF0C\u5185\u5BB9\u957F\u5EA6\u6EA2\u51FA\u65F6\u9ED8\u8BA4\u5F00\u542F | \nboolean | \n- | \n
wrapable | \n\u662F\u5426\u5F00\u542F\u6587\u672C\u6362\u884C\uFF0C\u53EA\u5728\u7981\u7528\u6EDA\u52A8\u65F6\u751F\u6548 | \nboolean | \nfalse | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u901A\u77E5\u680F\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
close | \n\u5173\u95ED\u901A\u77E5\u680F\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
replay | \n\u6BCF\u5F53\u6EDA\u52A8\u680F\u91CD\u65B0\u5F00\u59CB\u6EDA\u52A8\u65F6\u89E6\u53D1 | \n- | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 NoticeBar \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
reset | \n\u91CD\u7F6E\u901A\u77E5\u680F\u5230\u521D\u59CB\u72B6\u6001 | \n- | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { NoticeBarMode, NoticeBarProps, NoticeBarInstance } from 'vant';\n
\nNoticeBarInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { NoticeBarInstance } from 'vant';\n\nconst noticeBarRef = ref<NoticeBarInstance>();\n\nnoticeBarRef.value?.reset();\n
\n\u540D\u79F0 | \n\u5185\u5BB9 | \n
---|---|
default | \n\u901A\u77E5\u6587\u672C\u5185\u5BB9 | \n
left-icon | \n\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u56FE\u6807 | \n
right-icon | \n\u81EA\u5B9A\u4E49\u53F3\u4FA7\u56FE\u6807 | \n
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-notice-bar-height | \n40px | \n- | \n
--van-notice-bar-padding | \n0 var(--van-padding-md) | \n- | \n
--van-notice-bar-wrapable-padding | \nvar(--van-padding-xs) var(--van-padding-md) | \n- | \n
--van-notice-bar-text-color | \nvar(--van-orange-dark) | \n- | \n
--van-notice-bar-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-notice-bar-line-height | \n24px | \n- | \n
--van-notice-bar-background | \nvar(--van-orange-light) | \n- | \n
--van-notice-bar-icon-size | \n16px | \n- | \n
--van-notice-bar-icon-min-width | \n24px | \n- | \n
\u7528\u4E8E\u5FAA\u73AF\u64AD\u653E\u5C55\u793A\u4E00\u7EC4\u6D88\u606F\u901A\u77E5\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { NoticeBar } from 'vant';\n\nconst app = createApp();\napp.use(NoticeBar);\n
\n\u901A\u8FC7 text
\u5C5E\u6027\u8BBE\u7F6E\u901A\u77E5\u680F\u7684\u5185\u5BB9\uFF0C\u901A\u8FC7 left-icon
\u5C5E\u6027\u8BBE\u7F6E\u901A\u77E5\u680F\u5DE6\u4FA7\u7684\u56FE\u6807\u3002
<van-notice-bar\n left-icon="volume-o"\n text="\u65E0\u8BBA\u6211\u4EEC\u80FD\u6D3B\u591A\u4E45\uFF0C\u6211\u4EEC\u80FD\u591F\u4EAB\u53D7\u7684\u53EA\u6709\u65E0\u6CD5\u5206\u5272\u7684\u6B64\u523B\uFF0C\u6B64\u5916\u522B\u65E0\u5176\u4ED6\u3002"\n/>\n
\n\u901A\u77E5\u680F\u7684\u5185\u5BB9\u957F\u5EA6\u6EA2\u51FA\u65F6\u4F1A\u81EA\u52A8\u5F00\u542F\u6EDA\u52A8\u64AD\u653E\uFF0C\u901A\u8FC7 scrollable
\u5C5E\u6027\u53EF\u4EE5\u63A7\u5236\u8BE5\u884C\u4E3A\u3002
<!-- \u6587\u5B57\u8F83\u77ED\u65F6\uFF0C\u901A\u8FC7\u8BBE\u7F6E scrollable \u5C5E\u6027\u5F00\u542F\u6EDA\u52A8\u64AD\u653E -->\n<van-notice-bar scrollable text="\u7C73\u888B\u867D\u7A7A\u2014\u2014\u6A31\u82B1\u5F00\u54C9\uFF01" />\n\n<!-- \u6587\u5B57\u8F83\u957F\u65F6\uFF0C\u901A\u8FC7\u7981\u7528 scrollable \u5C5E\u6027\u5173\u95ED\u6EDA\u52A8\u64AD\u653E -->\n<van-notice-bar\n :scrollable="false"\n text="\u4E0D\u4F1A\u56DE\u5934\u7684\u4E1C\u897F\u6709\u56DB\u4EF6\uFF1A\u8BF4\u51FA\u53E3\u7684\u8BDD\u3001\u79BB\u5F26\u7684\u7BAD\u3001\u901D\u53BB\u7684\u751F\u6D3B\u548C\u5931\u53BB\u7684\u673A\u4F1A\u3002"\n/>\n
\n\u6587\u5B57\u8F83\u957F\u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7\u8BBE\u7F6E wrapable
\u5C5E\u6027\u6765\u5F00\u542F\u591A\u884C\u5C55\u793A\u3002
<van-notice-bar\n wrapable\n :scrollable="false"\n text="\u4E0D\u4F1A\u56DE\u5934\u7684\u4E1C\u897F\u6709\u56DB\u4EF6\uFF1A\u8BF4\u51FA\u53E3\u7684\u8BDD\u3001\u79BB\u5F26\u7684\u7BAD\u3001\u901D\u53BB\u7684\u751F\u6D3B\u548C\u5931\u53BB\u7684\u673A\u4F1A\u3002"\n/>\n
\n\u901A\u77E5\u680F\u652F\u6301 closeable
\u548C link
\u4E24\u79CD\u6A21\u5F0F\u3002
<!-- closeable \u6A21\u5F0F\uFF0C\u5728\u53F3\u4FA7\u663E\u793A\u5173\u95ED\u6309\u94AE -->\n<van-notice-bar mode="closeable">\u7C73\u888B\u867D\u7A7A\u2014\u2014\u6A31\u82B1\u5F00\u54C9\uFF01</van-notice-bar>\n\n<!-- link \u6A21\u5F0F\uFF0C\u5728\u53F3\u4FA7\u663E\u793A\u94FE\u63A5\u7BAD\u5934 -->\n<van-notice-bar mode="link">\u7C73\u888B\u867D\u7A7A\u2014\u2014\u6A31\u82B1\u5F00\u54C9\uFF01</van-notice-bar>\n
\n\u901A\u8FC7 color
\u5C5E\u6027\u8BBE\u7F6E\u6587\u672C\u989C\u8272\uFF0C\u901A\u8FC7 background
\u5C5E\u6027\u8BBE\u7F6E\u80CC\u666F\u8272\u3002
<van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">\n \u7C73\u888B\u867D\u7A7A\u2014\u2014\u6A31\u82B1\u5F00\u54C9\uFF01\n</van-notice-bar>\n
\n\u642D\u914D NoticeBar \u548C Swipe \u7EC4\u4EF6\uFF0C\u53EF\u4EE5\u5B9E\u73B0\u5782\u76F4\u6EDA\u52A8\u7684\u6548\u679C\u3002
\n<van-notice-bar left-icon="volume-o" :scrollable="false">\n <van-swipe\n vertical\n class="notice-swipe"\n :autoplay="3000"\n :touchable="false"\n :show-indicators="false"\n >\n <van-swipe-item>\u660E\u6708\u76F4\u5165\uFF0C\u65E0\u5FC3\u53EF\u731C\u3002</van-swipe-item>\n <van-swipe-item>\u4ED9\u4EBA\u629A\u6211\u9876\uFF0C\u7ED3\u53D1\u53D7\u957F\u751F\u3002</van-swipe-item>\n <van-swipe-item>\u4ECA\u4EBA\u4E0D\u89C1\u53E4\u65F6\u6708\uFF0C\u4ECA\u6708\u66FE\u7ECF\u7167\u53E4\u4EBA\u3002</van-swipe-item>\n </van-swipe>\n</van-notice-bar>\n\n<style>\n .notice-swipe {\n height: 40px;\n line-height: 40px;\n }\n</style>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
mode | \n\u901A\u77E5\u680F\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A closeable link | \nstring | \n\'\' | \n
text | \n\u901A\u77E5\u6587\u672C\u5185\u5BB9 | \nstring | \n\'\' | \n
color | \n\u901A\u77E5\u6587\u672C\u989C\u8272 | \nstring | \n#ed6a0c | \n
background | \n\u6EDA\u52A8\u6761\u80CC\u666F | \nstring | \n#fffbe8 | \n
left-icon | \n\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n- | \n
delay | \n\u52A8\u753B\u5EF6\u8FDF\u65F6\u95F4 (s) | \nnumber | string | \n1 | \n
speed | \n\u6EDA\u52A8\u901F\u7387 (px/s) | \nnumber | string | \n60 | \n
scrollable | \n\u662F\u5426\u5F00\u542F\u6EDA\u52A8\u64AD\u653E\uFF0C\u5185\u5BB9\u957F\u5EA6\u6EA2\u51FA\u65F6\u9ED8\u8BA4\u5F00\u542F | \nboolean | \n- | \n
wrapable | \n\u662F\u5426\u5F00\u542F\u6587\u672C\u6362\u884C\uFF0C\u53EA\u5728\u7981\u7528\u6EDA\u52A8\u65F6\u751F\u6548 | \nboolean | \nfalse | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u901A\u77E5\u680F\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
close | \n\u5173\u95ED\u901A\u77E5\u680F\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
replay | \n\u6BCF\u5F53\u6EDA\u52A8\u680F\u91CD\u65B0\u5F00\u59CB\u6EDA\u52A8\u65F6\u89E6\u53D1 | \n- | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 NoticeBar \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
reset | \n\u91CD\u7F6E\u901A\u77E5\u680F\u5230\u521D\u59CB\u72B6\u6001 | \n- | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { NoticeBarMode, NoticeBarProps, NoticeBarInstance } from 'vant';\n
\nNoticeBarInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { NoticeBarInstance } from 'vant';\n\nconst noticeBarRef = ref<NoticeBarInstance>();\n\nnoticeBarRef.value?.reset();\n
\n\u540D\u79F0 | \n\u5185\u5BB9 | \n
---|---|
default | \n\u901A\u77E5\u6587\u672C\u5185\u5BB9 | \n
left-icon | \n\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u56FE\u6807 | \n
right-icon | \n\u81EA\u5B9A\u4E49\u53F3\u4FA7\u56FE\u6807 | \n
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-notice-bar-height | \n40px | \n- | \n
--van-notice-bar-padding | \n0 var(--van-padding-md) | \n- | \n
--van-notice-bar-wrapable-padding | \nvar(--van-padding-xs) var(--van-padding-md) | \n- | \n
--van-notice-bar-text-color | \nvar(--van-orange-dark) | \n- | \n
--van-notice-bar-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-notice-bar-line-height | \n24px | \n- | \n
--van-notice-bar-background | \nvar(--van-orange-light) | \n- | \n
--van-notice-bar-icon-size | \n16px | \n- | \n
--van-notice-bar-icon-min-width | \n24px | \n- | \n
Used to provide convenient interaction for page-related operations.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { ActionBar, ActionBarIcon, ActionBarButton } from 'vant';\n\nconst app = createApp();\napp.use(ActionBar);\napp.use(ActionBarIcon);\napp.use(ActionBarButton);\n
\n<van-action-bar>\n <van-action-bar-icon icon="chat-o" text="Icon1" @click="onClickIcon" />\n <van-action-bar-icon icon="cart-o" text="Icon2" @click="onClickIcon" />\n <van-action-bar-icon icon="shop-o" text="Icon3" @click="onClickIcon" />\n <van-action-bar-button type="danger" text="Button" @click="onClickButton" />\n</van-action-bar>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onClickIcon = () => showToast('Click Icon');\n const onClickButton = () => showToast('Click Button');\n return {\n onClickIcon,\n onClickButton,\n };\n },\n};\n
\nUse badge
prop to show badge in icon.
<van-action-bar>\n <van-action-bar-icon icon="chat-o" text="Icon1" dot />\n <van-action-bar-icon icon="cart-o" text="Icon2" badge="5" />\n <van-action-bar-icon icon="shop-o" text="Icon3" badge="12" />\n <van-action-bar-button type="warning" text="Button" />\n <van-action-bar-button type="danger" text="Button" />\n</van-action-bar>\n
\n<van-action-bar>\n <van-action-bar-icon icon="chat-o" text="Icon1" color="#ee0a24" />\n <van-action-bar-icon icon="cart-o" text="Icon2" />\n <van-action-bar-icon icon="star" text="Collected" color="#ff5000" />\n <van-action-bar-button type="warning" text="Button" />\n <van-action-bar-button type="danger" text="Button" />\n</van-action-bar>\n
\n<van-action-bar>\n <van-action-bar-icon icon="chat-o" text="Icon1" />\n <van-action-bar-icon icon="shop-o" text="Icon2" />\n <van-action-bar-button color="#be99ff" type="warning" text="Button" />\n <van-action-bar-button color="#7232dd" type="danger" text="Button" />\n</van-action-bar>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
safe-area-inset-bottom | \nWhether to enable bottom safe area adaptation | \nboolean | \ntrue | \n
placeholder | \nWhether to generate a placeholder element | \nboolean | \nfalse | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
text | \nButton text | \nstring | \n- | \n
icon | \nIcon | \nstring | \n- | \n
color | \nIcon color | \nstring | \n#323233 | \n
icon-class | \nIcon class name | \nstring | Array | object | \n\'\' | \n
icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
dot | \nWhether to show red dot | \nboolean | \n- | \n
badge | \nContent of the badge | \nnumber | string | \n- | \n
badge-props | \nProps of Badge, see Badge - props | \nBadgeProps | \n- | \n
url | \nLink URL | \nstring | \n- | \n
to | \nThe target route should navigate to when clicked on, same as the to prop of Vue Router | \nstring | object | \n- | \n
replace | \nIf true, the navigation will not leave a history record | \nboolean | \nfalse | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
text | \nButton text | \nstring | \n- | \n
type | \nButton type, Can be set to default primary success warning danger | \nstring | \ndefault | \n
color | \nButton color, support linear-gradient | \nstring | \n- | \n
icon | \nLeft Icon | \nstring | \n- | \n
disabled | \nWhether to disable button | \nboolean | \nfalse | \n
loading | \nWhether to show loading status | \nboolean | \nfalse | \n
url | \nLink | \nstring | \n- | \n
to | \nThe target route should navigate to when clicked on, same as the to prop of Vue Router | \nstring | object | \n- | \n
replace | \nIf true, the navigation will not leave a history record | \nboolean | \nfalse | \n
Name | \nDescription | \n
---|---|
default | \nText | \n
icon | \nCustom icon | \n
Name | \nDescription | \n
---|---|
default | \nButton content | \n
The component exports the following type definitions:
\nimport type {\n ActionBarProps,\n ActionBarIconProps,\n ActionBarButtonProps,\n} from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-action-bar-background | \nvar(--van-background-2) | \n- | \n
--van-action-bar-height | \n50px | \n- | \n
--van-action-bar-icon-width | \n48px | \n- | \n
--van-action-bar-icon-height | \n100% | \n- | \n
--van-action-bar-icon-color | \nvar(--van-text-color) | \n- | \n
--van-action-bar-icon-size | \n18px | \n- | \n
--van-action-bar-icon-font-size | \nvar(--van-font-size-xs) | \n- | \n
--van-action-bar-icon-active-color | \nvar(--van-active-color) | \n- | \n
--van-action-bar-icon-text-color | \nvar(--van-text-color) | \n- | \n
--van-action-bar-icon-background | \nvar(--van-background-2) | \n- | \n
--van-action-bar-button-height | \n40px | \n- | \n
--van-action-bar-button-warning-color | \nvar(--van-gradient-orange) | \n- | \n
--van-action-bar-button-danger-color | \nvar(--van-gradient-red) | \n- | \n
Used to provide convenient interaction for page-related operations.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { ActionBar, ActionBarIcon, ActionBarButton } from 'vant';\n\nconst app = createApp();\napp.use(ActionBar);\napp.use(ActionBarIcon);\napp.use(ActionBarButton);\n
\n<van-action-bar>\n <van-action-bar-icon icon="chat-o" text="Icon1" @click="onClickIcon" />\n <van-action-bar-icon icon="cart-o" text="Icon2" @click="onClickIcon" />\n <van-action-bar-icon icon="shop-o" text="Icon3" @click="onClickIcon" />\n <van-action-bar-button type="danger" text="Button" @click="onClickButton" />\n</van-action-bar>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onClickIcon = () => showToast('Click Icon');\n const onClickButton = () => showToast('Click Button');\n return {\n onClickIcon,\n onClickButton,\n };\n },\n};\n
\nUse badge
prop to show badge in icon.
<van-action-bar>\n <van-action-bar-icon icon="chat-o" text="Icon1" dot />\n <van-action-bar-icon icon="cart-o" text="Icon2" badge="5" />\n <van-action-bar-icon icon="shop-o" text="Icon3" badge="12" />\n <van-action-bar-button type="warning" text="Button" />\n <van-action-bar-button type="danger" text="Button" />\n</van-action-bar>\n
\n<van-action-bar>\n <van-action-bar-icon icon="chat-o" text="Icon1" color="#ee0a24" />\n <van-action-bar-icon icon="cart-o" text="Icon2" />\n <van-action-bar-icon icon="star" text="Collected" color="#ff5000" />\n <van-action-bar-button type="warning" text="Button" />\n <van-action-bar-button type="danger" text="Button" />\n</van-action-bar>\n
\n<van-action-bar>\n <van-action-bar-icon icon="chat-o" text="Icon1" />\n <van-action-bar-icon icon="shop-o" text="Icon2" />\n <van-action-bar-button color="#be99ff" type="warning" text="Button" />\n <van-action-bar-button color="#7232dd" type="danger" text="Button" />\n</van-action-bar>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
safe-area-inset-bottom | \nWhether to enable bottom safe area adaptation | \nboolean | \ntrue | \n
placeholder | \nWhether to generate a placeholder element | \nboolean | \nfalse | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
text | \nButton text | \nstring | \n- | \n
icon | \nIcon | \nstring | \n- | \n
color | \nIcon color | \nstring | \n#323233 | \n
icon-class | \nIcon class name | \nstring | Array | object | \n\'\' | \n
icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
dot | \nWhether to show red dot | \nboolean | \n- | \n
badge | \nContent of the badge | \nnumber | string | \n- | \n
badge-props | \nProps of Badge, see Badge - props | \nBadgeProps | \n- | \n
url | \nLink URL | \nstring | \n- | \n
to | \nThe target route should navigate to when clicked on, same as the to prop of Vue Router | \nstring | object | \n- | \n
replace | \nIf true, the navigation will not leave a history record | \nboolean | \nfalse | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
text | \nButton text | \nstring | \n- | \n
type | \nButton type, Can be set to default primary success warning danger | \nstring | \ndefault | \n
color | \nButton color, support linear-gradient | \nstring | \n- | \n
icon | \nLeft Icon | \nstring | \n- | \n
disabled | \nWhether to disable button | \nboolean | \nfalse | \n
loading | \nWhether to show loading status | \nboolean | \nfalse | \n
url | \nLink | \nstring | \n- | \n
to | \nThe target route should navigate to when clicked on, same as the to prop of Vue Router | \nstring | object | \n- | \n
replace | \nIf true, the navigation will not leave a history record | \nboolean | \nfalse | \n
Name | \nDescription | \n
---|---|
default | \nText | \n
icon | \nCustom icon | \n
Name | \nDescription | \n
---|---|
default | \nButton content | \n
The component exports the following type definitions:
\nimport type {\n ActionBarProps,\n ActionBarIconProps,\n ActionBarButtonProps,\n} from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-action-bar-background | \nvar(--van-background-2) | \n- | \n
--van-action-bar-height | \n50px | \n- | \n
--van-action-bar-icon-width | \n48px | \n- | \n
--van-action-bar-icon-height | \n100% | \n- | \n
--van-action-bar-icon-color | \nvar(--van-text-color) | \n- | \n
--van-action-bar-icon-size | \n18px | \n- | \n
--van-action-bar-icon-font-size | \nvar(--van-font-size-xs) | \n- | \n
--van-action-bar-icon-active-color | \nvar(--van-active-color) | \n- | \n
--van-action-bar-icon-text-color | \nvar(--van-text-color) | \n- | \n
--van-action-bar-icon-background | \nvar(--van-background-2) | \n- | \n
--van-action-bar-button-height | \n40px | \n- | \n
--van-action-bar-button-warning-color | \nvar(--van-gradient-orange) | \n- | \n
--van-action-bar-button-danger-color | \nvar(--van-gradient-red) | \n- | \n
Used to display the order amount and submit the order.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { SubmitBar } from 'vant';\n\nconst app = createApp();\napp.use(SubmitBar);\n
\n<van-submit-bar :price="3050" button-text="Submit" @submit="onSubmit" />\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onSubmit = () => showToast('Submit');\n return {\n onSubmit,\n };\n },\n};\n
\nsubmit
event will not triggered when disabled.
<van-submit-bar\n disabled\n :price="3050"\n button-text="Submit"\n tip="Some tips"\n tip-icon="info-o"\n @submit="onSubmit"\n/>\n
\nsubmit
event will not triggered when loading.
<van-submit-bar loading :price="3050" button-text="Submit" @submit="onSubmit" />\n
\nUse slot to add custom contents.
\n<van-submit-bar :price="3050" button-text="Submit" @submit="onSubmit">\n <van-checkbox v-model="checked">Check</van-checkbox>\n <template #tip> Some tips, <span @click="onClickLink">Link</span> </template>\n</van-submit-bar>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onSubmit = () => showToast('Submit');\n const onClickLink = () => showToast('Click Link');\n return {\n onSubmit,\n onClickLink,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
price | \nPrice | \nnumber | \n- | \n
decimal-length | \nPrice decimal length | \nnumber | string | \n2 | \n
label | \nPrice left label | \nstring | \nTotal: | \n
suffix-label | \nPrice right label | \nstring | \n- | \n
text-align | \nPrice label text align can be set to left | \nstring | \nright | \n
button-text | \nButton text | \nstring | \n- | \n
button-type | \nButton type | \nstring | \ndanger | \n
button-color | \nButton color | \nstring | \n- | \n
tip | \nTip | \nstring | \n- | \n
tip-icon | \nTip left icon | \nstring | \n- | \n
currency | \nCurrency symbol | \nstring | \n\xa5 | \n
disabled | \nWhether to disable button | \nboolean | \nfalse | \n
loading | \nWhether to show loading icon | \nboolean | \nfalse | \n
safe-area-inset-bottom | \nWhether to enable bottom safe area adaptation | \nboolean | \ntrue | \n
placeholder | \nWhether to generate a placeholder element | \nboolean | \nfalse | \n
Event | \nDescription | \nArguments | \n
---|---|---|
submit | \nTriggered when click submit button | \n- | \n
Name | \nDescription | \n
---|---|
default | \nCustom left content | \n
button | \nCustom button | \n
top | \nCustom top content | \n
tip | \nCustom tips | \n
The component exports the following type definitions:
\nimport type { SubmitBarProps, SubmitBarTextAlign } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-submit-bar-height | \n50px | \n- | \n
--van-submit-bar-z-index | \n100 | \n- | \n
--van-submit-bar-background | \nvar(--van-background-2) | \n- | \n
--van-submit-bar-button-width | \n110px | \n- | \n
--van-submit-bar-price-color | \nvar(--van-danger-color) | \n- | \n
--van-submit-bar-price-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-submit-bar-price-integer-font-size | \n20px | \n- | \n
--van-submit-bar-price-font | \nvar(--van-price-font) | \n- | \n
--van-submit-bar-text-color | \nvar(--van-text-color) | \n- | \n
--van-submit-bar-text-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-submit-bar-tip-padding | \nvar(--van-padding-xs) var(--van-padding-sm) | \n- | \n
--van-submit-bar-tip-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-submit-bar-tip-line-height | \n1.5 | \n- | \n
--van-submit-bar-tip-color | \nvar(--van-orange-dark) | \n- | \n
--van-submit-bar-tip-background | \nvar(--van-orange-light) | \n- | \n
--van-submit-bar-tip-icon-size | \n12px | \n- | \n
--van-submit-bar-button-height | \n40px | \n- | \n
--van-submit-bar-padding | \n0 var(--van-padding-md) | \n- | \n
Used to display the order amount and submit the order.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { SubmitBar } from 'vant';\n\nconst app = createApp();\napp.use(SubmitBar);\n
\n<van-submit-bar :price="3050" button-text="Submit" @submit="onSubmit" />\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onSubmit = () => showToast('Submit');\n return {\n onSubmit,\n };\n },\n};\n
\nsubmit
event will not triggered when disabled.
<van-submit-bar\n disabled\n :price="3050"\n button-text="Submit"\n tip="Some tips"\n tip-icon="info-o"\n @submit="onSubmit"\n/>\n
\nsubmit
event will not triggered when loading.
<van-submit-bar loading :price="3050" button-text="Submit" @submit="onSubmit" />\n
\nUse slot to add custom contents.
\n<van-submit-bar :price="3050" button-text="Submit" @submit="onSubmit">\n <van-checkbox v-model="checked">Check</van-checkbox>\n <template #tip> Some tips, <span @click="onClickLink">Link</span> </template>\n</van-submit-bar>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onSubmit = () => showToast('Submit');\n const onClickLink = () => showToast('Click Link');\n return {\n onSubmit,\n onClickLink,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
price | \nPrice | \nnumber | \n- | \n
decimal-length | \nPrice decimal length | \nnumber | string | \n2 | \n
label | \nPrice left label | \nstring | \nTotal: | \n
suffix-label | \nPrice right label | \nstring | \n- | \n
text-align | \nPrice label text align can be set to left | \nstring | \nright | \n
button-text | \nButton text | \nstring | \n- | \n
button-type | \nButton type | \nstring | \ndanger | \n
button-color | \nButton color | \nstring | \n- | \n
tip | \nTip | \nstring | \n- | \n
tip-icon | \nTip left icon | \nstring | \n- | \n
currency | \nCurrency symbol | \nstring | \n\xa5 | \n
disabled | \nWhether to disable button | \nboolean | \nfalse | \n
loading | \nWhether to show loading icon | \nboolean | \nfalse | \n
safe-area-inset-bottom | \nWhether to enable bottom safe area adaptation | \nboolean | \ntrue | \n
placeholder | \nWhether to generate a placeholder element | \nboolean | \nfalse | \n
Event | \nDescription | \nArguments | \n
---|---|---|
submit | \nTriggered when click submit button | \n- | \n
Name | \nDescription | \n
---|---|
default | \nCustom left content | \n
button | \nCustom button | \n
top | \nCustom top content | \n
tip | \nCustom tips | \n
The component exports the following type definitions:
\nimport type { SubmitBarProps, SubmitBarTextAlign } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-submit-bar-height | \n50px | \n- | \n
--van-submit-bar-z-index | \n100 | \n- | \n
--van-submit-bar-background | \nvar(--van-background-2) | \n- | \n
--van-submit-bar-button-width | \n110px | \n- | \n
--van-submit-bar-price-color | \nvar(--van-danger-color) | \n- | \n
--van-submit-bar-price-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-submit-bar-price-integer-font-size | \n20px | \n- | \n
--van-submit-bar-price-font | \nvar(--van-price-font) | \n- | \n
--van-submit-bar-text-color | \nvar(--van-text-color) | \n- | \n
--van-submit-bar-text-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-submit-bar-tip-padding | \nvar(--van-padding-xs) var(--van-padding-sm) | \n- | \n
--van-submit-bar-tip-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-submit-bar-tip-line-height | \n1.5 | \n- | \n
--van-submit-bar-tip-color | \nvar(--van-orange-dark) | \n- | \n
--van-submit-bar-tip-background | \nvar(--van-orange-light) | \n- | \n
--van-submit-bar-tip-icon-size | \n12px | \n- | \n
--van-submit-bar-button-height | \n40px | \n- | \n
--van-submit-bar-padding | \n0 var(--van-padding-md) | \n- | \n
\u7528\u4E8E\u5C55\u793A\u8BA2\u5355\u91D1\u989D\u4E0E\u63D0\u4EA4\u8BA2\u5355\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { SubmitBar } from 'vant';\n\nconst app = createApp();\napp.use(SubmitBar);\n
\n<van-submit-bar :price="3050" button-text="\u63D0\u4EA4\u8BA2\u5355" @submit="onSubmit" />\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onSubmit = () => showToast('\u70B9\u51FB\u6309\u94AE');\n return {\n onSubmit,\n };\n },\n};\n
\n\u7981\u7528\u72B6\u6001\u4E0B\u4E0D\u4F1A\u89E6\u53D1 submit
\u4E8B\u4EF6\u3002
<van-submit-bar\n disabled\n :price="3050"\n button-text="\u63D0\u4EA4\u8BA2\u5355"\n tip="\u4F60\u7684\u6536\u8D27\u5730\u5740\u4E0D\u652F\u6301\u914D\u9001"\n tip-icon="info-o"\n @submit="onSubmit"\n/>\n
\n\u52A0\u8F7D\u72B6\u6001\u4E0B\u4E0D\u4F1A\u89E6\u53D1 submit
\u4E8B\u4EF6\u3002
<van-submit-bar\n loading\n :price="3050"\n button-text="\u63D0\u4EA4\u8BA2\u5355"\n @submit="onSubmit"\n/>\n
\n\u901A\u8FC7\u63D2\u69FD\u63D2\u5165\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002
\n<van-submit-bar :price="3050" button-text="\u63D0\u4EA4\u8BA2\u5355" @submit="onSubmit">\n <van-checkbox v-model="checked">\u5168\u9009</van-checkbox>\n <template #tip>\n \u4F60\u7684\u6536\u8D27\u5730\u5740\u4E0D\u652F\u6301\u914D\u9001, <span @click="onClickLink">\u4FEE\u6539\u5730\u5740</span>\n </template>\n</van-submit-bar>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onSubmit = () => showToast('\u70B9\u51FB\u6309\u94AE');\n const onClickLink = () => showToast('\u4FEE\u6539\u5730\u5740');\n return {\n onSubmit,\n onClickLink,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
price | \n\u91D1\u989D\uFF08\u5355\u4F4D\u5206\uFF09 | \nnumber | \n- | \n
decimal-length | \n\u91D1\u989D\u5C0F\u6570\u70B9\u4F4D\u6570 | \nnumber | string | \n2 | \n
label | \n\u91D1\u989D\u5DE6\u4FA7\u6587\u6848 | \nstring | \n\u5408\u8BA1\uFF1A | \n
suffix-label | \n\u91D1\u989D\u53F3\u4FA7\u6587\u6848 | \nstring | \n- | \n
text-align | \n\u91D1\u989D\u6587\u6848\u5BF9\u9F50\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A left | \nstring | \nright | \n
button-text | \n\u6309\u94AE\u6587\u5B57 | \nstring | \n- | \n
button-type | \n\u6309\u94AE\u7C7B\u578B | \nstring | \ndanger | \n
button-color | \n\u81EA\u5B9A\u4E49\u6309\u94AE\u989C\u8272 | \nstring | \n- | \n
tip | \n\u5728\u8BA2\u5355\u680F\u4E0A\u65B9\u7684\u63D0\u793A\u6587\u6848 | \nstring | \n- | \n
tip-icon | \n\u63D0\u793A\u6587\u6848\u5DE6\u4FA7\u7684\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n- | \n
currency | \n\u8D27\u5E01\u7B26\u53F7 | \nstring | \n\xa5 | \n
disabled | \n\u662F\u5426\u7981\u7528\u6309\u94AE | \nboolean | \nfalse | \n
loading | \n\u662F\u5426\u663E\u793A\u5C06\u6309\u94AE\u663E\u793A\u4E3A\u52A0\u8F7D\u4E2D\u72B6\u6001 | \nboolean | \nfalse | \n
safe-area-inset-bottom | \n\u662F\u5426\u5F00\u542F\u5E95\u90E8\u5B89\u5168\u533A\u9002\u914D | \nboolean | \ntrue | \n
placeholder | \n\u662F\u5426\u5728\u6807\u7B7E\u4F4D\u7F6E\u751F\u6210\u4E00\u4E2A\u7B49\u9AD8\u7684\u5360\u4F4D\u5143\u7D20 | \nboolean | \nfalse | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
submit | \n\u6309\u94AE\u70B9\u51FB\u4E8B\u4EF6\u56DE\u8C03 | \n- | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u81EA\u5B9A\u4E49\u8BA2\u5355\u680F\u5DE6\u4FA7\u5185\u5BB9 | \n
button | \n\u81EA\u5B9A\u4E49\u6309\u94AE | \n
top | \n\u81EA\u5B9A\u4E49\u8BA2\u5355\u680F\u4E0A\u65B9\u5185\u5BB9 | \n
tip | \n\u63D0\u793A\u6587\u6848\u4E2D\u7684\u989D\u5916\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { SubmitBarProps, SubmitBarTextAlign } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-submit-bar-height | \n50px | \n- | \n
--van-submit-bar-z-index | \n100 | \n- | \n
--van-submit-bar-background | \nvar(--van-background-2) | \n- | \n
--van-submit-bar-button-width | \n110px | \n- | \n
--van-submit-bar-price-color | \nvar(--van-danger-color) | \n- | \n
--van-submit-bar-price-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-submit-bar-price-integer-font-size | \n20px | \n- | \n
--van-submit-bar-price-font | \nvar(--van-price-font) | \n- | \n
--van-submit-bar-text-color | \nvar(--van-text-color) | \n- | \n
--van-submit-bar-text-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-submit-bar-tip-padding | \nvar(--van-padding-xs) var(--van-padding-sm) | \n- | \n
--van-submit-bar-tip-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-submit-bar-tip-line-height | \n1.5 | \n- | \n
--van-submit-bar-tip-color | \nvar(--van-orange-dark) | \n- | \n
--van-submit-bar-tip-background | \nvar(--van-orange-light) | \n- | \n
--van-submit-bar-tip-icon-size | \n12px | \n- | \n
--van-submit-bar-button-height | \n40px | \n- | \n
--van-submit-bar-padding | \n0 var(--van-padding-md) | \n- | \n
\u7528\u4E8E\u5C55\u793A\u8BA2\u5355\u91D1\u989D\u4E0E\u63D0\u4EA4\u8BA2\u5355\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { SubmitBar } from 'vant';\n\nconst app = createApp();\napp.use(SubmitBar);\n
\n<van-submit-bar :price="3050" button-text="\u63D0\u4EA4\u8BA2\u5355" @submit="onSubmit" />\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onSubmit = () => showToast('\u70B9\u51FB\u6309\u94AE');\n return {\n onSubmit,\n };\n },\n};\n
\n\u7981\u7528\u72B6\u6001\u4E0B\u4E0D\u4F1A\u89E6\u53D1 submit
\u4E8B\u4EF6\u3002
<van-submit-bar\n disabled\n :price="3050"\n button-text="\u63D0\u4EA4\u8BA2\u5355"\n tip="\u4F60\u7684\u6536\u8D27\u5730\u5740\u4E0D\u652F\u6301\u914D\u9001"\n tip-icon="info-o"\n @submit="onSubmit"\n/>\n
\n\u52A0\u8F7D\u72B6\u6001\u4E0B\u4E0D\u4F1A\u89E6\u53D1 submit
\u4E8B\u4EF6\u3002
<van-submit-bar\n loading\n :price="3050"\n button-text="\u63D0\u4EA4\u8BA2\u5355"\n @submit="onSubmit"\n/>\n
\n\u901A\u8FC7\u63D2\u69FD\u63D2\u5165\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002
\n<van-submit-bar :price="3050" button-text="\u63D0\u4EA4\u8BA2\u5355" @submit="onSubmit">\n <van-checkbox v-model="checked">\u5168\u9009</van-checkbox>\n <template #tip>\n \u4F60\u7684\u6536\u8D27\u5730\u5740\u4E0D\u652F\u6301\u914D\u9001, <span @click="onClickLink">\u4FEE\u6539\u5730\u5740</span>\n </template>\n</van-submit-bar>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onSubmit = () => showToast('\u70B9\u51FB\u6309\u94AE');\n const onClickLink = () => showToast('\u4FEE\u6539\u5730\u5740');\n return {\n onSubmit,\n onClickLink,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
price | \n\u91D1\u989D\uFF08\u5355\u4F4D\u5206\uFF09 | \nnumber | \n- | \n
decimal-length | \n\u91D1\u989D\u5C0F\u6570\u70B9\u4F4D\u6570 | \nnumber | string | \n2 | \n
label | \n\u91D1\u989D\u5DE6\u4FA7\u6587\u6848 | \nstring | \n\u5408\u8BA1\uFF1A | \n
suffix-label | \n\u91D1\u989D\u53F3\u4FA7\u6587\u6848 | \nstring | \n- | \n
text-align | \n\u91D1\u989D\u6587\u6848\u5BF9\u9F50\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A left | \nstring | \nright | \n
button-text | \n\u6309\u94AE\u6587\u5B57 | \nstring | \n- | \n
button-type | \n\u6309\u94AE\u7C7B\u578B | \nstring | \ndanger | \n
button-color | \n\u81EA\u5B9A\u4E49\u6309\u94AE\u989C\u8272 | \nstring | \n- | \n
tip | \n\u5728\u8BA2\u5355\u680F\u4E0A\u65B9\u7684\u63D0\u793A\u6587\u6848 | \nstring | \n- | \n
tip-icon | \n\u63D0\u793A\u6587\u6848\u5DE6\u4FA7\u7684\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n- | \n
currency | \n\u8D27\u5E01\u7B26\u53F7 | \nstring | \n\xa5 | \n
disabled | \n\u662F\u5426\u7981\u7528\u6309\u94AE | \nboolean | \nfalse | \n
loading | \n\u662F\u5426\u663E\u793A\u5C06\u6309\u94AE\u663E\u793A\u4E3A\u52A0\u8F7D\u4E2D\u72B6\u6001 | \nboolean | \nfalse | \n
safe-area-inset-bottom | \n\u662F\u5426\u5F00\u542F\u5E95\u90E8\u5B89\u5168\u533A\u9002\u914D | \nboolean | \ntrue | \n
placeholder | \n\u662F\u5426\u5728\u6807\u7B7E\u4F4D\u7F6E\u751F\u6210\u4E00\u4E2A\u7B49\u9AD8\u7684\u5360\u4F4D\u5143\u7D20 | \nboolean | \nfalse | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
submit | \n\u6309\u94AE\u70B9\u51FB\u4E8B\u4EF6\u56DE\u8C03 | \n- | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u81EA\u5B9A\u4E49\u8BA2\u5355\u680F\u5DE6\u4FA7\u5185\u5BB9 | \n
button | \n\u81EA\u5B9A\u4E49\u6309\u94AE | \n
top | \n\u81EA\u5B9A\u4E49\u8BA2\u5355\u680F\u4E0A\u65B9\u5185\u5BB9 | \n
tip | \n\u63D0\u793A\u6587\u6848\u4E2D\u7684\u989D\u5916\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { SubmitBarProps, SubmitBarTextAlign } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-submit-bar-height | \n50px | \n- | \n
--van-submit-bar-z-index | \n100 | \n- | \n
--van-submit-bar-background | \nvar(--van-background-2) | \n- | \n
--van-submit-bar-button-width | \n110px | \n- | \n
--van-submit-bar-price-color | \nvar(--van-danger-color) | \n- | \n
--van-submit-bar-price-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-submit-bar-price-integer-font-size | \n20px | \n- | \n
--van-submit-bar-price-font | \nvar(--van-price-font) | \n- | \n
--van-submit-bar-text-color | \nvar(--van-text-color) | \n- | \n
--van-submit-bar-text-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-submit-bar-tip-padding | \nvar(--van-padding-xs) var(--van-padding-sm) | \n- | \n
--van-submit-bar-tip-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-submit-bar-tip-line-height | \n1.5 | \n- | \n
--van-submit-bar-tip-color | \nvar(--van-orange-dark) | \n- | \n
--van-submit-bar-tip-background | \nvar(--van-orange-light) | \n- | \n
--van-submit-bar-tip-icon-size | \n12px | \n- | \n
--van-submit-bar-button-height | \n40px | \n- | \n
--van-submit-bar-padding | \n0 var(--van-padding-md) | \n- | \n
\u83B7\u53D6\u5143\u7D20\u6700\u8FD1\u7684\u53EF\u6EDA\u52A8\u7236\u5143\u7D20\u3002
\n<div ref="root" />\n
\nimport { ref, watch } from 'vue';\nimport { useScrollParent, useEventListener } from '@vant/use';\n\nexport default {\n setup() {\n const root = ref();\n const scrollParent = useScrollParent(root);\n\n useEventListener(\n 'scroll',\n () => {\n console.log('scroll');\n },\n { target: scrollParent },\n );\n\n return { root };\n },\n};\n
\nfunction useScrollParent(\n element: Ref<Element | undefined>,\n): Ref<Element | Window | undefined>;\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
element | \n\u5F53\u524D\u5143\u7D20 | \nRef<Element> | \n- | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
scrollParent | \n\u6700\u8FD1\u7684\u53EF\u6EDA\u52A8\u7236\u5143\u7D20 | \nRef<Element> | \n
\u83B7\u53D6\u5143\u7D20\u6700\u8FD1\u7684\u53EF\u6EDA\u52A8\u7236\u5143\u7D20\u3002
\n<div ref="root" />\n
\nimport { ref, watch } from 'vue';\nimport { useScrollParent, useEventListener } from '@vant/use';\n\nexport default {\n setup() {\n const root = ref();\n const scrollParent = useScrollParent(root);\n\n useEventListener(\n 'scroll',\n () => {\n console.log('scroll');\n },\n { target: scrollParent },\n );\n\n return { root };\n },\n};\n
\nfunction useScrollParent(\n element: Ref<Element | undefined>,\n): Ref<Element | Window | undefined>;\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
element | \n\u5F53\u524D\u5143\u7D20 | \nRef<Element> | \n- | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
scrollParent | \n\u6700\u8FD1\u7684\u53EF\u6EDA\u52A8\u7236\u5143\u7D20 | \nRef<Element> | \n
Vant contains some common styles that can be used directly by the className.
\nWhen the text content length exceeds the maximum container width, the excess text is automatically omitted.
\n<div class="van-ellipsis">\n This is a paragraph that displays up to one line of text, and the rest of the\n text will be omitted.\n</div>\n\n<div class="van-multi-ellipsis--l2">\n This is a paragraph that displays up to two lines of text, and the rest of the\n text will be omitted.\n</div>\n\n<div class="van-multi-ellipsis--l3">\n This is a paragraph that displays up to three lines of text, and the rest of\n the text will be omitted.\n</div>\n
\nAdd 1px border under the Retina screen for the element, based on a pseudo element.
\n<!-- border top -->\n<div class="van-hairline--top"></div>\n\n<!-- border bottom -->\n<div class="van-hairline--bottom"></div>\n\n<!-- border left -->\n<div class="van-hairline--left"></div>\n\n<!-- border right -->\n<div class="van-hairline--right"></div>\n\n<!-- border top & bottom -->\n<div class="van-hairline--top-bottom"></div>\n\n<!-- full border -->\n<div class="van-hairline--surround"></div>\n
\nEnable safe area.
\n<!-- top -->\n<div class="van-safe-area-top"></div>\n\n<!-- bottom -->\n<div class="van-safe-area-bottom"></div>\n
\n<!-- fade in -->\n<transition name="van-fade">\n <div v-show="visible">Fade</div>\n</transition>\n\n<!-- slide up -->\n<transition name="van-slide-up">\n <div v-show="visible">Slide Up</div>\n</transition>\n\n<!-- slide down -->\n<transition name="van-slide-down">\n <div v-show="visible">Slide Down</div>\n</transition>\n\n<!-- slide left -->\n<transition name="van-slide-left">\n <div v-show="visible">Slide Left</div>\n</transition>\n\n<!-- slide right -->\n<transition name="van-slide-right">\n <div v-show="visible">Slide Right</div>\n</transition>\n
\nAdd haptics feedback for an element. When touched, the opacity of the element is reduced.
\nUsually used in clickable elements such as button.
\n<div class="van-haptics-feedback"></div>\n
\nClear floated content within a container.
\n<div class="van-clearfix"></div>\n
\nVant contains some common styles that can be used directly by the className.
\nWhen the text content length exceeds the maximum container width, the excess text is automatically omitted.
\n<div class="van-ellipsis">\n This is a paragraph that displays up to one line of text, and the rest of the\n text will be omitted.\n</div>\n\n<div class="van-multi-ellipsis--l2">\n This is a paragraph that displays up to two lines of text, and the rest of the\n text will be omitted.\n</div>\n\n<div class="van-multi-ellipsis--l3">\n This is a paragraph that displays up to three lines of text, and the rest of\n the text will be omitted.\n</div>\n
\nAdd 1px border under the Retina screen for the element, based on a pseudo element.
\n<!-- border top -->\n<div class="van-hairline--top"></div>\n\n<!-- border bottom -->\n<div class="van-hairline--bottom"></div>\n\n<!-- border left -->\n<div class="van-hairline--left"></div>\n\n<!-- border right -->\n<div class="van-hairline--right"></div>\n\n<!-- border top & bottom -->\n<div class="van-hairline--top-bottom"></div>\n\n<!-- full border -->\n<div class="van-hairline--surround"></div>\n
\nEnable safe area.
\n<!-- top -->\n<div class="van-safe-area-top"></div>\n\n<!-- bottom -->\n<div class="van-safe-area-bottom"></div>\n
\n<!-- fade in -->\n<transition name="van-fade">\n <div v-show="visible">Fade</div>\n</transition>\n\n<!-- slide up -->\n<transition name="van-slide-up">\n <div v-show="visible">Slide Up</div>\n</transition>\n\n<!-- slide down -->\n<transition name="van-slide-down">\n <div v-show="visible">Slide Down</div>\n</transition>\n\n<!-- slide left -->\n<transition name="van-slide-left">\n <div v-show="visible">Slide Left</div>\n</transition>\n\n<!-- slide right -->\n<transition name="van-slide-right">\n <div v-show="visible">Slide Right</div>\n</transition>\n
\nAdd haptics feedback for an element. When touched, the opacity of the element is reduced.
\nUsually used in clickable elements such as button.
\n<div class="van-haptics-feedback"></div>\n
\nClear floated content within a container.
\n<div class="van-clearfix"></div>\n
\nBlack semi-transparent pop-up hint in the middle of the page, used for message notification, loading hint, operation result hint and other scenarios.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Toast } from 'vant';\n\nconst app = createApp();\napp.use(Toast);\n
\nVant provides some utility functions that can quickly evoke global Toast
components.
For example, calling the showToast
function will render a Toast directly in the page.
import { showToast } from 'vant';\n\nshowToast('Some messages');\n
\nUse the showToast
method to display a text toast in the center of the screen.
import { showToast } from 'vant';\n\nshowToast('Some messages');\n
\nUse the showLoadingToast
method to display a loading toast. The forbidClick
option can be used to disable background clicks.
import { showLoadingToast } from 'vant';\n\nshowLoadingToast({\n message: 'Loading...',\n forbidClick: true,\n});\n
\nUse the showSuccessToast
method to display a success message, and use the showFailToast
method to display a failure message.
import { showSuccessToast, showFailToast } from 'vant';\n\nshowSuccessToast('Success');\nshowFailToast('Fail');\n
\nThe icon
option allows you to customize the icon by specifying either the icon name or an image URL, which is equivalent to the name
attribute of the Icon component.
import { showToast, showLoadingToast } from 'vant';\n\nshowToast({\n message: 'Custom Icon',\n icon: 'like-o',\n});\n\nshowToast({\n message: 'Custom Image',\n icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png',\n});\n
\nThe loadingType
option allows you to customize the type of loading icon.
showLoadingToast({\n message: 'Loading...',\n forbidClick: true,\n loadingType: 'spinner',\n});\n
\nBy default, the Toast is rendered in the center of the screen. You can control the position of the Toast by using the position
option.
import { showToast } from 'vant';\n\nshowToast({\n message: 'Top',\n position: 'top',\n});\n\nshowToast({\n message: 'Bottom',\n position: 'bottom',\n});\n
\nThe wordBreak
option controls how the text in the Toast is truncated when it exceeds the available space. The default value is break-all
, and the optional values are break-word
and normal
.
import { showToast } from 'vant';\n\nshowToast({\n message: 'This message will contain a incomprehensibilities long word.',\n wordBreak: 'break-all',\n});\n\nshowToast({\n message: 'This message will contain a incomprehensibilities long word.',\n wordBreak: 'break-word',\n});\n
\nWhen executing the Toast method, it returns the corresponding Toast instance. You can dynamically update the message by modifying the message
property on the instance.
import { showLoadingToast, closeToast } from 'vant';\n\nconst toast = showLoadingToast({\n duration: 0,\n forbidClick: true,\n loadingType: 'spinner',\n message: '3 seconds',\n});\n\nlet second = 3;\nconst timer = setInterval(() => {\n second--;\n if (second) {\n toast.message = `${second} seconds`;\n } else {\n clearInterval(timer);\n closeToast();\n }\n}, 1000);\n
\nThe Toast is implemented as a singleton by default, which means that only one Toast can exist at a time. If you need to display multiple Toasts at the same time, you can refer to the following example:
\nimport { showToast, showSuccessToast, allowMultipleToast } from 'vant';\n\nallowMultipleToast();\n\nconst toast1 = showToast('First Toast');\nconst toast2 = showSuccessToast('Second Toast');\n\ntoast1.close();\ntoast2.close();\n
\nYou can globally modify the default configuration of the showToast
and other methods by using the setToastDefaultOptions
function.
import { setToastDefaultOptions, resetToastDefaultOptions } from 'vant';\n\nsetToastDefaultOptions({ duration: 2000 });\n\nsetToastDefaultOptions('loading', { forbidClick: true });\n\nresetToastDefaultOptions();\n\nresetToastDefaultOptions('loading');\n
\nIf you need to embed components or other custom content within the Toast, you can directly use the Toast component and customize it using the message slot. Before using it, you need to register the component using app.use
or other methods.
<van-toast v-model:show="show" style="padding: 0">\n <template #message>\n <van-image :src="image" width="200" height="140" style="display: block" />\n </template>\n</van-toast>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n return { show };\n },\n};\n
\nVant exports following Toast utility functions:
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
showToast | \nDisplay a text toast | \nToastOptions | string | \nToast instance | \n
showLoadingToast | \nDisplay a loading toast | \nToastOptions | string | \nToast instance | \n
showSuccessToast | \nDisplay a success toast | \nToastOptions | string | \nToast instance | \n
showFailToast | \nDisplay a fail toast | \nToastOptions | string | \nToast instance | \n
closeToast | \nClose the currently displayed toast | \ncloseAll: boolean | \nvoid | \n
allowMultipleToast | \nAllow multiple toasts to be displayed as the same time | \n- | \nvoid | \n
setToastDefaultOptions | \nModify the default configuration that affects all showToast calls. Specify the type parameter to modify the default configuration of a specific type of toast | \ntype | ToastOptions | \nvoid | \n
resetToastDefaultOptions | \nReset the default configuration that affects all showToast calls. Specify the type parameter to reset the default configuration of a specific type of toast | \ntype | \nvoid | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
type | \nCan be set to loading success fail html | \nToastType | \ntext | \n
position | \nCan be set to top middle bottom | \nToastPosition | \nmiddle | \n
message | \nMessage | \nstring | \n\'\' | \n
wordBreak | \nCan be set to normal break-all break-word | \nToastWordBreak | \n\'break-all\' | \n
icon | \nCustom icon | \nstring | \n- | \n
iconSize | \nCustom icon size | \nnumber | string | \n36px | \n
iconPrefix | \nIcon className prefix | \nstring | \nvan-icon | \n
overlay | \nWhether to show overlay | \nboolean | \nfalse | \n
forbidClick | \nWhether to forbid click background | \nboolean | \nfalse | \n
closeOnClick | \nWhether to close after clicked | \nboolean | \nfalse | \n
closeOnClickOverlay | \nWhether to close when overlay is clicked | \nboolean | \nfalse | \n
loadingType | \nLoading icon type, can be set to spinner | \nstring | \ncircular | \n
duration | \nToast duration(ms), won\'t disappear if value is 0 | \nnumber | \n2000 | \n
className | \nCustom className | \nstring | Array | object | \n- | \n
overlayClass | \nCustom overlay class | \nstring | Array | object | \n- | \n
overlayStyle | \nCustom overlay style | \nobject | \n- | \n
onOpened | \nCallback function after opened | \nFunction | \n- | \n
onClose | \nCallback function after close | \nFunction | \n- | \n
transition | \nTransition, equivalent to name prop of transition | \nstring | \nvan-fade | \n
teleport | \nSpecifies a target element where Toast will be mounted | \nstring | Element | \nbody | \n
You can use following slots when using Toast
component:
Name | \nDescription | \n
---|---|
message | \nCustom message | \n
The component exports the following type definitions:
\nimport type {\n ToastType,\n ToastProps,\n ToastOptions,\n ToastPosition,\n ToastWordBreak,\n ToastWrapperInstance,\n} from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-toast-max-width | \n70% | \n- | \n
--van-toast-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-toast-text-color | \nvar(--van-white) | \n- | \n
--van-toast-loading-icon-color | \nvar(--van-white) | \n- | \n
--van-toast-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-toast-radius | \nvar(--van-radius-lg) | \n- | \n
--van-toast-background | \nfade(var(--van-black), 70%) | \n- | \n
--van-toast-icon-size | \n36px | \n- | \n
--van-toast-text-min-width | \n96px | \n- | \n
--van-toast-text-padding | \nvar(--van-padding-xs) var(--van-padding-sm) | \n- | \n
--van-toast-default-padding | \nvar(--van-padding-md) | \n- | \n
--van-toast-default-width | \n88px | \n- | \n
--van-toast-default-min-height | \n88px | \n- | \n
--van-toast-position-top-distance | \n20% | \n- | \n
--van-toast-position-bottom-distance | \n20% | \n- | \n
Black semi-transparent pop-up hint in the middle of the page, used for message notification, loading hint, operation result hint and other scenarios.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Toast } from 'vant';\n\nconst app = createApp();\napp.use(Toast);\n
\nVant provides some utility functions that can quickly evoke global Toast
components.
For example, calling the showToast
function will render a Toast directly in the page.
import { showToast } from 'vant';\n\nshowToast('Some messages');\n
\nUse the showToast
method to display a text toast in the center of the screen.
import { showToast } from 'vant';\n\nshowToast('Some messages');\n
\nUse the showLoadingToast
method to display a loading toast. The forbidClick
option can be used to disable background clicks.
import { showLoadingToast } from 'vant';\n\nshowLoadingToast({\n message: 'Loading...',\n forbidClick: true,\n});\n
\nUse the showSuccessToast
method to display a success message, and use the showFailToast
method to display a failure message.
import { showSuccessToast, showFailToast } from 'vant';\n\nshowSuccessToast('Success');\nshowFailToast('Fail');\n
\nThe icon
option allows you to customize the icon by specifying either the icon name or an image URL, which is equivalent to the name
attribute of the Icon component.
import { showToast, showLoadingToast } from 'vant';\n\nshowToast({\n message: 'Custom Icon',\n icon: 'like-o',\n});\n\nshowToast({\n message: 'Custom Image',\n icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png',\n});\n
\nThe loadingType
option allows you to customize the type of loading icon.
showLoadingToast({\n message: 'Loading...',\n forbidClick: true,\n loadingType: 'spinner',\n});\n
\nBy default, the Toast is rendered in the center of the screen. You can control the position of the Toast by using the position
option.
import { showToast } from 'vant';\n\nshowToast({\n message: 'Top',\n position: 'top',\n});\n\nshowToast({\n message: 'Bottom',\n position: 'bottom',\n});\n
\nThe wordBreak
option controls how the text in the Toast is truncated when it exceeds the available space. The default value is break-all
, and the optional values are break-word
and normal
.
import { showToast } from 'vant';\n\nshowToast({\n message: 'This message will contain a incomprehensibilities long word.',\n wordBreak: 'break-all',\n});\n\nshowToast({\n message: 'This message will contain a incomprehensibilities long word.',\n wordBreak: 'break-word',\n});\n
\nWhen executing the Toast method, it returns the corresponding Toast instance. You can dynamically update the message by modifying the message
property on the instance.
import { showLoadingToast, closeToast } from 'vant';\n\nconst toast = showLoadingToast({\n duration: 0,\n forbidClick: true,\n loadingType: 'spinner',\n message: '3 seconds',\n});\n\nlet second = 3;\nconst timer = setInterval(() => {\n second--;\n if (second) {\n toast.message = `${second} seconds`;\n } else {\n clearInterval(timer);\n closeToast();\n }\n}, 1000);\n
\nThe Toast is implemented as a singleton by default, which means that only one Toast can exist at a time. If you need to display multiple Toasts at the same time, you can refer to the following example:
\nimport { showToast, showSuccessToast, allowMultipleToast } from 'vant';\n\nallowMultipleToast();\n\nconst toast1 = showToast('First Toast');\nconst toast2 = showSuccessToast('Second Toast');\n\ntoast1.close();\ntoast2.close();\n
\nYou can globally modify the default configuration of the showToast
and other methods by using the setToastDefaultOptions
function.
import { setToastDefaultOptions, resetToastDefaultOptions } from 'vant';\n\nsetToastDefaultOptions({ duration: 2000 });\n\nsetToastDefaultOptions('loading', { forbidClick: true });\n\nresetToastDefaultOptions();\n\nresetToastDefaultOptions('loading');\n
\nIf you need to embed components or other custom content within the Toast, you can directly use the Toast component and customize it using the message slot. Before using it, you need to register the component using app.use
or other methods.
<van-toast v-model:show="show" style="padding: 0">\n <template #message>\n <van-image :src="image" width="200" height="140" style="display: block" />\n </template>\n</van-toast>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n return { show };\n },\n};\n
\nVant exports following Toast utility functions:
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
showToast | \nDisplay a text toast | \nToastOptions | string | \nToast instance | \n
showLoadingToast | \nDisplay a loading toast | \nToastOptions | string | \nToast instance | \n
showSuccessToast | \nDisplay a success toast | \nToastOptions | string | \nToast instance | \n
showFailToast | \nDisplay a fail toast | \nToastOptions | string | \nToast instance | \n
closeToast | \nClose the currently displayed toast | \ncloseAll: boolean | \nvoid | \n
allowMultipleToast | \nAllow multiple toasts to be displayed as the same time | \n- | \nvoid | \n
setToastDefaultOptions | \nModify the default configuration that affects all showToast calls. Specify the type parameter to modify the default configuration of a specific type of toast | \ntype | ToastOptions | \nvoid | \n
resetToastDefaultOptions | \nReset the default configuration that affects all showToast calls. Specify the type parameter to reset the default configuration of a specific type of toast | \ntype | \nvoid | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
type | \nCan be set to loading success fail html | \nToastType | \ntext | \n
position | \nCan be set to top middle bottom | \nToastPosition | \nmiddle | \n
message | \nMessage | \nstring | \n\'\' | \n
wordBreak | \nCan be set to normal break-all break-word | \nToastWordBreak | \n\'break-all\' | \n
icon | \nCustom icon | \nstring | \n- | \n
iconSize | \nCustom icon size | \nnumber | string | \n36px | \n
iconPrefix | \nIcon className prefix | \nstring | \nvan-icon | \n
overlay | \nWhether to show overlay | \nboolean | \nfalse | \n
forbidClick | \nWhether to forbid click background | \nboolean | \nfalse | \n
closeOnClick | \nWhether to close after clicked | \nboolean | \nfalse | \n
closeOnClickOverlay | \nWhether to close when overlay is clicked | \nboolean | \nfalse | \n
loadingType | \nLoading icon type, can be set to spinner | \nstring | \ncircular | \n
duration | \nToast duration(ms), won\'t disappear if value is 0 | \nnumber | \n2000 | \n
className | \nCustom className | \nstring | Array | object | \n- | \n
overlayClass | \nCustom overlay class | \nstring | Array | object | \n- | \n
overlayStyle | \nCustom overlay style | \nobject | \n- | \n
onOpened | \nCallback function after opened | \nFunction | \n- | \n
onClose | \nCallback function after close | \nFunction | \n- | \n
transition | \nTransition, equivalent to name prop of transition | \nstring | \nvan-fade | \n
teleport | \nSpecifies a target element where Toast will be mounted | \nstring | Element | \nbody | \n
You can use following slots when using Toast
component:
Name | \nDescription | \n
---|---|
message | \nCustom message | \n
The component exports the following type definitions:
\nimport type {\n ToastType,\n ToastProps,\n ToastOptions,\n ToastPosition,\n ToastWordBreak,\n ToastWrapperInstance,\n} from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-toast-max-width | \n70% | \n- | \n
--van-toast-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-toast-text-color | \nvar(--van-white) | \n- | \n
--van-toast-loading-icon-color | \nvar(--van-white) | \n- | \n
--van-toast-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-toast-radius | \nvar(--van-radius-lg) | \n- | \n
--van-toast-background | \nfade(var(--van-black), 70%) | \n- | \n
--van-toast-icon-size | \n36px | \n- | \n
--van-toast-text-min-width | \n96px | \n- | \n
--van-toast-text-padding | \nvar(--van-padding-xs) var(--van-padding-sm) | \n- | \n
--van-toast-default-padding | \nvar(--van-padding-md) | \n- | \n
--van-toast-default-width | \n88px | \n- | \n
--van-toast-default-min-height | \n88px | \n- | \n
--van-toast-position-top-distance | \n20% | \n- | \n
--van-toast-position-bottom-distance | \n20% | \n- | \n
Used for data entry and verification, and supports input boxes, radio buttons, check boxes, file uploads and other types. Should be used with Field component.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Form, Field, CellGroup } from 'vant';\n\nconst app = createApp();\napp.use(Form);\napp.use(Field);\napp.use(CellGroup);\n
\n<van-form @submit="onSubmit">\n <van-cell-group inset>\n <van-field\n v-model="username"\n name="Username"\n label="Username"\n placeholder="Username"\n :rules="[{ required: true, message: 'Username is required' }]"\n />\n <van-field\n v-model="password"\n type="password"\n name="Password"\n label="Password"\n placeholder="Password"\n :rules="[{ required: true, message: 'Password is required' }]"\n />\n </van-cell-group>\n <div style="margin: 16px;">\n <van-button round block type="primary" native-type="submit">\n Submit\n </van-button>\n </div>\n</van-form>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const username = ref('');\n const password = ref('');\n const onSubmit = (values) => {\n console.log('submit', values);\n };\n\n return {\n username,\n password,\n onSubmit,\n };\n },\n};\n
\n<van-form @failed="onFailed">\n <van-cell-group inset>\n <van-field\n v-model="value1"\n name="pattern"\n placeholder="Use pattern"\n :rules="[{ pattern, message: 'Error message' }]"\n />\n <van-field\n v-model="value2"\n name="validator"\n placeholder="Use validator"\n :rules="[{ validator, message: 'Error message' }]"\n />\n <van-field\n v-model="value3"\n name="validatorMessage"\n placeholder="Use validator to return message"\n :rules="[{ validator: validatorMessage }]"\n />\n <van-field\n v-model="value4"\n name="asyncValidator"\n placeholder="Use async validator"\n :rules="[{ validator: asyncValidator, message: 'Error message' }]"\n />\n </van-cell-group>\n <div style="margin: 16px;">\n <van-button round block type="primary" native-type="submit">\n Submit\n </van-button>\n </div>\n</van-form>\n
\nimport { ref } from 'vue';\nimport { closeToast, showLoadingToast } from 'vant';\n\nexport default {\n setup() {\n const value1 = ref('');\n const value2 = ref('');\n const value3 = ref('abc');\n const value4 = ref('');\n const pattern = /\\d{6}/;\n\n const validator = (val) => /1\\d{10}/.test(val);\n\n const validatorMessage = (val) => `${val} is invalid`;\n\n const asyncValidator = (val) =>\n new Promise((resolve) => {\n showLoadingToast('Validating...');\n\n setTimeout(() => {\n closeToast();\n resolve(val === '1234');\n }, 1000);\n });\n\n const onFailed = (errorInfo) => {\n console.log('failed', errorInfo);\n };\n\n return {\n value1,\n value2,\n value3,\n value4,\n pattern,\n onFailed,\n validator,\n asyncValidator,\n validatorMessage,\n };\n },\n};\n
\n<van-field name="switch" label="Switch">\n <template #input>\n <van-switch v-model="checked" />\n </template>\n</van-field>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(false);\n return { checked };\n },\n};\n
\n<van-field name="checkbox" label="Checkbox">\n <template #input>\n <van-checkbox v-model="checked" shape="square" />\n </template>\n</van-field>\n<van-field name="checkboxGroup" label="CheckboxGroup">\n <template #input>\n <van-checkbox-group v-model="groupChecked" direction="horizontal">\n <van-checkbox name="1" shape="square">Checkbox 1</van-checkbox>\n <van-checkbox name="2" shape="square">Checkbox 2</van-checkbox>\n </van-checkbox-group>\n </template>\n</van-field>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(false);\n const groupChecked = ref([]);\n return {\n checked,\n groupChecked,\n };\n },\n};\n
\n<van-field name="radio" label="Radio">\n <template #input>\n <van-radio-group v-model="checked" direction="horizontal">\n <van-radio name="1">Radio 1</van-radio>\n <van-radio name="2">Radio 2</van-radio>\n </van-radio-group>\n </template>\n</van-field>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref('1');\n return { checked };\n },\n};\n
\n<van-field name="stepper" label="Stepper">\n <template #input>\n <van-stepper v-model="value" />\n </template>\n</van-field>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(1);\n return { value };\n },\n};\n
\n<van-field name="rate" label="Rate">\n <template #input>\n <van-rate v-model="value" />\n </template>\n</van-field>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(3);\n return { value };\n },\n};\n
\n<van-field name="slider" label="Slider">\n <template #input>\n <van-slider v-model="value" />\n </template>\n</van-field>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(50);\n return { value };\n },\n};\n
\n<van-field name="uploader" label="Uploader">\n <template #input>\n <van-uploader v-model="value" />\n </template>\n</van-field>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref([\n { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },\n ]);\n return { value };\n },\n};\n
\n<van-field\n v-model="result"\n is-link\n readonly\n name="picker"\n label="Picker"\n placeholder="Select city"\n @click="showPicker = true"\n/>\n<van-popup v-model:show="showPicker" position="bottom">\n <van-picker\n :columns="columns"\n @confirm="onConfirm"\n @cancel="showPicker = false"\n />\n</van-popup>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const result = ref('');\n const showPicker = ref(false);\n const columns = [\n { text: 'Delaware', value: 'Delaware' },\n { text: 'Florida', value: 'Florida' },\n { text: 'Georgia', value: 'Georgia' },\n { text: 'Indiana', value: 'Indiana' },\n { text: 'Maine', value: 'Maine' },\n ];\n\n const onConfirm = ({ selectedOptions }) => {\n result.value = selectedOptions[0]?.text;\n showPicker.value = false;\n };\n\n return {\n result,\n columns,\n onConfirm,\n showPicker,\n };\n },\n};\n
\n<van-field\n v-model="result"\n is-link\n readonly\n name="datePicker"\n label="Date Picker"\n placeholder="Select date"\n @click="showPicker = true"\n/>\n<van-popup v-model:show="showPicker" position="bottom">\n <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" />\n</van-popup>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const result = ref('');\n const showPicker = ref(false);\n const onConfirm = ({ selectedValues }) => {\n result.value = selectedValues.join('/');\n showPicker.value = false;\n };\n\n return {\n result,\n onConfirm,\n showPicker,\n };\n },\n};\n
\n<van-field\n v-model="result"\n is-link\n readonly\n name="area"\n label="Area Picker"\n placeholder="Select area"\n @click="showArea = true"\n/>\n<van-popup v-model:show="showArea" position="bottom">\n <van-area\n :area-list="areaList"\n @confirm="onConfirm"\n @cancel="showArea = false"\n />\n</van-popup>\n
\nimport { ref } from 'vue';\nimport { areaList } from '@vant/area-data';\n\nexport default {\n setup() {\n const result = ref('');\n const showArea = ref(false);\n const onConfirm = ({ selectedOptions }) => {\n showArea.value = false;\n result.value = selectedOptions.map((item) => item.text).join('/');\n };\n\n return {\n result,\n areaList,\n showArea,\n onConfirm,\n };\n },\n};\n
\n<van-field\n v-model="result"\n is-link\n readonly\n name="calendar"\n label="Calendar"\n placeholder="Select date"\n @click="showCalendar = true"\n/>\n<van-calendar v-model:show="showCalendar" @confirm="onConfirm" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const result = ref('');\n const showCalendar = ref(false);\n const onConfirm = (date) => {\n result.value = `${date.getMonth() + 1}/${date.getDate()}`;\n showCalendar.value = false;\n };\n\n return {\n result,\n onConfirm,\n showCalendar,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
label-width | \nField label width | \nnumber | string | \n6.2em | \n
label-align | \nField label align, can be set to center right top | \nstring | \nleft | \n
input-align | \nField input align, can be set to center right | \nstring | \nleft | \n
error-message-align | \nError message align, can be set to center right | \nstring | \nleft | \n
validate-trigger | \nWhen to validate the form, can be set to onChange \u3001onSubmit , supports using array to set multiple values | \nstring | string[] | \nonBlur | \n
colon | \nWhether to display colon after label | \nboolean | \nfalse | \n
disabled | \nWhether to disable form | \nboolean | \nfalse | \n
readonly | \nWhether to be readonly | \nboolean | \nfalse | \n
required v4.7.3 | \nWhether to show required mark | \nboolean | \'auto\' | \nnull | \n
validate-first | \nWhether to stop the validation when a rule fails | \nboolean | \nfalse | \n
scroll-to-error | \nWhether to scroll to the error field when validation failed | \nboolean | \nfalse | \n
show-error | \nWhether to highlight input when validation failed | \nboolean | \nfalse | \n
show-error-message | \nWhether to show error message when validation failed | \nboolean | \ntrue | \n
submit-on-enter | \nWhether to submit form on enter | \nboolean | \ntrue | \n
Key | \nDescription | \nType | \n
---|---|---|
required | \nWhether to be a required field, the value is not allowed to be empty (empty string, empty array, false , undefined , null ) | \nboolean | \n
message | \nError message, can be a function to dynamically return message content | \nstring | (value, rule) => string | \n
validator | \nCustom validator, can return a Promise to validate dynamically | \n(value, rule) => boolean | string | Promise | \n
pattern | \nRegexp pattern, if the regexp cannot match, means that the validation fails | \nRegExp | \n
trigger | \nWhen to validate the form, priority is higher than the validate-trigger of the Form component, can be set to onChange , onBlur , onSubmit | \nstring | string[] | \n
formatter | \nFormat value before validate | \n(value, rule) => any | \n
validateEmpty | \nControls whether the validator and pattern options to verify empty values, the default value is true , you can set to false to disable this behavior | \nboolean | \n
Value | \nDescription | \n
---|---|
onSubmit | \nTrigger validation after submitting form | \n
onBlur | \nTrigger validation after submitting form or blurring input | \n
onChange | \nTrigger validation after submitting form or changing input value | \n
Event | \nDescription | \nArguments | \n
---|---|---|
submit | \nEmitted after submitting the form and validation passed | \nvalues: object | \n
failed | \nEmitted after submitting the form and validation failed | \nerrorInfo: { values: object, errors: object[] } | \n
Use ref to get Form instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
submit | \nSubmit form | \n- | \n- | \n
getValues | \nGet current form values | \n- | \nRecord<string, unknown> | \n
validate | \nValidate form | \nname?: string | string[] | \nPromise<void> | \n
resetValidation | \nReset validation | \nname?: string | string[] | \n- | \n
getValidationStatus | \nGet validation status of all fields\uFF0Cstatus can be passed \u3001failed \u3001unvalidated | \n- | \nRecord<string, FieldValidationStatus> | \n
scrollToField | \nScroll to field | \nname: string, alignToTop: boolean | \n- | \n
The component exports the following type definitions:
\nimport type { FormProps, FormInstance } from 'vant';\n
\nFormInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { FormInstance } from 'vant';\n\nconst formRef = ref<FormInstance>();\n\nformRef.value?.submit();\n
\nName | \nDescription | \n
---|---|
default | \nForm content | \n
Used for data entry and verification, and supports input boxes, radio buttons, check boxes, file uploads and other types. Should be used with Field component.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Form, Field, CellGroup } from 'vant';\n\nconst app = createApp();\napp.use(Form);\napp.use(Field);\napp.use(CellGroup);\n
\n<van-form @submit="onSubmit">\n <van-cell-group inset>\n <van-field\n v-model="username"\n name="Username"\n label="Username"\n placeholder="Username"\n :rules="[{ required: true, message: 'Username is required' }]"\n />\n <van-field\n v-model="password"\n type="password"\n name="Password"\n label="Password"\n placeholder="Password"\n :rules="[{ required: true, message: 'Password is required' }]"\n />\n </van-cell-group>\n <div style="margin: 16px;">\n <van-button round block type="primary" native-type="submit">\n Submit\n </van-button>\n </div>\n</van-form>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const username = ref('');\n const password = ref('');\n const onSubmit = (values) => {\n console.log('submit', values);\n };\n\n return {\n username,\n password,\n onSubmit,\n };\n },\n};\n
\n<van-form @failed="onFailed">\n <van-cell-group inset>\n <van-field\n v-model="value1"\n name="pattern"\n placeholder="Use pattern"\n :rules="[{ pattern, message: 'Error message' }]"\n />\n <van-field\n v-model="value2"\n name="validator"\n placeholder="Use validator"\n :rules="[{ validator, message: 'Error message' }]"\n />\n <van-field\n v-model="value3"\n name="validatorMessage"\n placeholder="Use validator to return message"\n :rules="[{ validator: validatorMessage }]"\n />\n <van-field\n v-model="value4"\n name="asyncValidator"\n placeholder="Use async validator"\n :rules="[{ validator: asyncValidator, message: 'Error message' }]"\n />\n </van-cell-group>\n <div style="margin: 16px;">\n <van-button round block type="primary" native-type="submit">\n Submit\n </van-button>\n </div>\n</van-form>\n
\nimport { ref } from 'vue';\nimport { closeToast, showLoadingToast } from 'vant';\n\nexport default {\n setup() {\n const value1 = ref('');\n const value2 = ref('');\n const value3 = ref('abc');\n const value4 = ref('');\n const pattern = /\\d{6}/;\n\n const validator = (val) => /1\\d{10}/.test(val);\n\n const validatorMessage = (val) => `${val} is invalid`;\n\n const asyncValidator = (val) =>\n new Promise((resolve) => {\n showLoadingToast('Validating...');\n\n setTimeout(() => {\n closeToast();\n resolve(val === '1234');\n }, 1000);\n });\n\n const onFailed = (errorInfo) => {\n console.log('failed', errorInfo);\n };\n\n return {\n value1,\n value2,\n value3,\n value4,\n pattern,\n onFailed,\n validator,\n asyncValidator,\n validatorMessage,\n };\n },\n};\n
\n<van-field name="switch" label="Switch">\n <template #input>\n <van-switch v-model="checked" />\n </template>\n</van-field>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(false);\n return { checked };\n },\n};\n
\n<van-field name="checkbox" label="Checkbox">\n <template #input>\n <van-checkbox v-model="checked" shape="square" />\n </template>\n</van-field>\n<van-field name="checkboxGroup" label="CheckboxGroup">\n <template #input>\n <van-checkbox-group v-model="groupChecked" direction="horizontal">\n <van-checkbox name="1" shape="square">Checkbox 1</van-checkbox>\n <van-checkbox name="2" shape="square">Checkbox 2</van-checkbox>\n </van-checkbox-group>\n </template>\n</van-field>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(false);\n const groupChecked = ref([]);\n return {\n checked,\n groupChecked,\n };\n },\n};\n
\n<van-field name="radio" label="Radio">\n <template #input>\n <van-radio-group v-model="checked" direction="horizontal">\n <van-radio name="1">Radio 1</van-radio>\n <van-radio name="2">Radio 2</van-radio>\n </van-radio-group>\n </template>\n</van-field>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref('1');\n return { checked };\n },\n};\n
\n<van-field name="stepper" label="Stepper">\n <template #input>\n <van-stepper v-model="value" />\n </template>\n</van-field>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(1);\n return { value };\n },\n};\n
\n<van-field name="rate" label="Rate">\n <template #input>\n <van-rate v-model="value" />\n </template>\n</van-field>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(3);\n return { value };\n },\n};\n
\n<van-field name="slider" label="Slider">\n <template #input>\n <van-slider v-model="value" />\n </template>\n</van-field>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(50);\n return { value };\n },\n};\n
\n<van-field name="uploader" label="Uploader">\n <template #input>\n <van-uploader v-model="value" />\n </template>\n</van-field>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref([\n { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },\n ]);\n return { value };\n },\n};\n
\n<van-field\n v-model="result"\n is-link\n readonly\n name="picker"\n label="Picker"\n placeholder="Select city"\n @click="showPicker = true"\n/>\n<van-popup v-model:show="showPicker" position="bottom">\n <van-picker\n :columns="columns"\n @confirm="onConfirm"\n @cancel="showPicker = false"\n />\n</van-popup>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const result = ref('');\n const showPicker = ref(false);\n const columns = [\n { text: 'Delaware', value: 'Delaware' },\n { text: 'Florida', value: 'Florida' },\n { text: 'Georgia', value: 'Georgia' },\n { text: 'Indiana', value: 'Indiana' },\n { text: 'Maine', value: 'Maine' },\n ];\n\n const onConfirm = ({ selectedOptions }) => {\n result.value = selectedOptions[0]?.text;\n showPicker.value = false;\n };\n\n return {\n result,\n columns,\n onConfirm,\n showPicker,\n };\n },\n};\n
\n<van-field\n v-model="result"\n is-link\n readonly\n name="datePicker"\n label="Date Picker"\n placeholder="Select date"\n @click="showPicker = true"\n/>\n<van-popup v-model:show="showPicker" position="bottom">\n <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" />\n</van-popup>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const result = ref('');\n const showPicker = ref(false);\n const onConfirm = ({ selectedValues }) => {\n result.value = selectedValues.join('/');\n showPicker.value = false;\n };\n\n return {\n result,\n onConfirm,\n showPicker,\n };\n },\n};\n
\n<van-field\n v-model="result"\n is-link\n readonly\n name="area"\n label="Area Picker"\n placeholder="Select area"\n @click="showArea = true"\n/>\n<van-popup v-model:show="showArea" position="bottom">\n <van-area\n :area-list="areaList"\n @confirm="onConfirm"\n @cancel="showArea = false"\n />\n</van-popup>\n
\nimport { ref } from 'vue';\nimport { areaList } from '@vant/area-data';\n\nexport default {\n setup() {\n const result = ref('');\n const showArea = ref(false);\n const onConfirm = ({ selectedOptions }) => {\n showArea.value = false;\n result.value = selectedOptions.map((item) => item.text).join('/');\n };\n\n return {\n result,\n areaList,\n showArea,\n onConfirm,\n };\n },\n};\n
\n<van-field\n v-model="result"\n is-link\n readonly\n name="calendar"\n label="Calendar"\n placeholder="Select date"\n @click="showCalendar = true"\n/>\n<van-calendar v-model:show="showCalendar" @confirm="onConfirm" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const result = ref('');\n const showCalendar = ref(false);\n const onConfirm = (date) => {\n result.value = `${date.getMonth() + 1}/${date.getDate()}`;\n showCalendar.value = false;\n };\n\n return {\n result,\n onConfirm,\n showCalendar,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
label-width | \nField label width | \nnumber | string | \n6.2em | \n
label-align | \nField label align, can be set to center right top | \nstring | \nleft | \n
input-align | \nField input align, can be set to center right | \nstring | \nleft | \n
error-message-align | \nError message align, can be set to center right | \nstring | \nleft | \n
validate-trigger | \nWhen to validate the form, can be set to onChange \u3001onSubmit , supports using array to set multiple values | \nstring | string[] | \nonBlur | \n
colon | \nWhether to display colon after label | \nboolean | \nfalse | \n
disabled | \nWhether to disable form | \nboolean | \nfalse | \n
readonly | \nWhether to be readonly | \nboolean | \nfalse | \n
required v4.7.3 | \nWhether to show required mark | \nboolean | \'auto\' | \nnull | \n
validate-first | \nWhether to stop the validation when a rule fails | \nboolean | \nfalse | \n
scroll-to-error | \nWhether to scroll to the error field when validation failed | \nboolean | \nfalse | \n
show-error | \nWhether to highlight input when validation failed | \nboolean | \nfalse | \n
show-error-message | \nWhether to show error message when validation failed | \nboolean | \ntrue | \n
submit-on-enter | \nWhether to submit form on enter | \nboolean | \ntrue | \n
Key | \nDescription | \nType | \n
---|---|---|
required | \nWhether to be a required field, the value is not allowed to be empty (empty string, empty array, false , undefined , null ) | \nboolean | \n
message | \nError message, can be a function to dynamically return message content | \nstring | (value, rule) => string | \n
validator | \nCustom validator, can return a Promise to validate dynamically | \n(value, rule) => boolean | string | Promise | \n
pattern | \nRegexp pattern, if the regexp cannot match, means that the validation fails | \nRegExp | \n
trigger | \nWhen to validate the form, priority is higher than the validate-trigger of the Form component, can be set to onChange , onBlur , onSubmit | \nstring | string[] | \n
formatter | \nFormat value before validate | \n(value, rule) => any | \n
validateEmpty | \nControls whether the validator and pattern options to verify empty values, the default value is true , you can set to false to disable this behavior | \nboolean | \n
Value | \nDescription | \n
---|---|
onSubmit | \nTrigger validation after submitting form | \n
onBlur | \nTrigger validation after submitting form or blurring input | \n
onChange | \nTrigger validation after submitting form or changing input value | \n
Event | \nDescription | \nArguments | \n
---|---|---|
submit | \nEmitted after submitting the form and validation passed | \nvalues: object | \n
failed | \nEmitted after submitting the form and validation failed | \nerrorInfo: { values: object, errors: object[] } | \n
Use ref to get Form instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
submit | \nSubmit form | \n- | \n- | \n
getValues | \nGet current form values | \n- | \nRecord<string, unknown> | \n
validate | \nValidate form | \nname?: string | string[] | \nPromise<void> | \n
resetValidation | \nReset validation | \nname?: string | string[] | \n- | \n
getValidationStatus | \nGet validation status of all fields\uFF0Cstatus can be passed \u3001failed \u3001unvalidated | \n- | \nRecord<string, FieldValidationStatus> | \n
scrollToField | \nScroll to field | \nname: string, alignToTop: boolean | \n- | \n
The component exports the following type definitions:
\nimport type { FormProps, FormInstance } from 'vant';\n
\nFormInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { FormInstance } from 'vant';\n\nconst formRef = ref<FormInstance>();\n\nformRef.value?.submit();\n
\nName | \nDescription | \n
---|---|
default | \nForm content | \n
Used to select date, usually used with the Popup component.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { DatePicker } from 'vant';\n\nconst app = createApp();\napp.use(DatePicker);\n
\n<van-date-picker\n v-model="currentDate"\n title="Choose Date"\n :min-date="minDate"\n :max-date="maxDate"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentDate = ref(['2021', '01', '01']);\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n currentDate,\n };\n },\n};\n
\nUsing columns-type
prop to control the type of columns.
For example:
\n[\'year\']
to select year.[\'month\']
to select month.[\'year\', \'month\']
to select year and month.[\'month\', \'day\']
to select month and day.<van-date-picker\n v-model="currentDate"\n title="Choose Year-Month"\n :min-date="minDate"\n :max-date="maxDate"\n :columns-type="columnsType"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentDate = ref(['2021', '01']);\n const columnsType = ['year', 'month'];\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n currentDate,\n columnsType,\n };\n },\n};\n
\n<van-date-picker\n v-model="currentDate"\n title="Choose Year-Month"\n :min-date="minDate"\n :max-date="maxDate"\n :formatter="formatter"\n :columns-type="columnsType"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentDate = ref(['2021', '01']);\n const columnsType = ['year', 'month'];\n\n const formatter = (type, option) => {\n if (type === 'year') {\n option.text += ' Year';\n }\n if (type === 'month') {\n option.text += '\u6708Month';\n }\n return option;\n };\n\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n formatter,\n currentDate,\n columnsType,\n };\n },\n};\n
\n<van-date-picker\n v-model="currentDate"\n title="Choose Year-Month"\n :filter="filter"\n :min-date="minDate"\n :max-date="maxDate"\n :columns-type="columnsType"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentDate = ref(['2021', '01']);\n const columnsType = ['year', 'month'];\n const filter = (type, options) => {\n if (type === 'month') {\n return options.filter((option) => Number(option.value) % 6 === 0);\n }\n return options;\n };\n\n return {\n filter,\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n currentTime,\n columnsType,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nCurrent date | \nstring[] | \n[] | \n
columns-type | \nColumns type | \nstring[] | \n[\'year\', \'month\', \'day\'] | \n
min-date | \nMin date | \nDate | \nTen years ago on January 1 | \n
max-date | \nMax date | \nDate | \nTen years later on December 31 | \n
title | \nToolbar title | \nstring | \n\'\' | \n
confirm-button-text | \nText of confirm button | \nstring | \nConfirm | \n
cancel-button-text | \nText of cancel button | \nstring | \nCancel | \n
show-toolbar | \nWhether to show toolbar | \nboolean | \ntrue | \n
loading | \nWhether to show loading prompt | \nboolean | \nfalse | \n
readonly | \nWhether to be readonly | \nboolean | \nfalse | \n
filter | \nOption filter | \n(type: string, options: PickerOption[]) => PickerOption[] | \n- | \n
formatter | \nOption formatter | \n(type: string, option: PickerOption) => PickerOption | \n- | \n
option-height | \nOption height, supports px vw vh rem unit, default px | \nnumber | string | \n44 | \n
visible-option-num | \nCount of visible columns | \nnumber | string | \n6 | \n
swipe-duration | \nDuration of the momentum animation, unit ms | \nnumber | string | \n1000 | \n
Event | \nDescription | \nArguments | \n
---|---|---|
confirm | \nEmitted when the confirm button is clicked | \n{ selectedValues, selectedOptions } | \n
cancel | \nEmitted when the cancel button is clicked | \n{ selectedValues, selectedOptions } | \n
change | \nEmitted when current option is changed | \n{ selectedValues, selectedOptions, columnIndex } | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
toolbar | \nCustom toolbar content | \n- | \n
title | \nCustom title | \n- | \n
confirm | \nCustom confirm button text | \n- | \n
cancel | \nCustom cancel button text | \n- | \n
option | \nCustom option content | \noption: PickerOption, index: number | \n
columns-top | \nCustom content above columns | \n- | \n
columns-bottom | \nCustom content below columns | \n- | \n
The component exports the following type definitions:
\nimport type { DatePickerProps, DatePickerColumnType } from 'vant';\n
\nUsed to select date, usually used with the Popup component.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { DatePicker } from 'vant';\n\nconst app = createApp();\napp.use(DatePicker);\n
\n<van-date-picker\n v-model="currentDate"\n title="Choose Date"\n :min-date="minDate"\n :max-date="maxDate"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentDate = ref(['2021', '01', '01']);\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n currentDate,\n };\n },\n};\n
\nUsing columns-type
prop to control the type of columns.
For example:
\n[\'year\']
to select year.[\'month\']
to select month.[\'year\', \'month\']
to select year and month.[\'month\', \'day\']
to select month and day.<van-date-picker\n v-model="currentDate"\n title="Choose Year-Month"\n :min-date="minDate"\n :max-date="maxDate"\n :columns-type="columnsType"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentDate = ref(['2021', '01']);\n const columnsType = ['year', 'month'];\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n currentDate,\n columnsType,\n };\n },\n};\n
\n<van-date-picker\n v-model="currentDate"\n title="Choose Year-Month"\n :min-date="minDate"\n :max-date="maxDate"\n :formatter="formatter"\n :columns-type="columnsType"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentDate = ref(['2021', '01']);\n const columnsType = ['year', 'month'];\n\n const formatter = (type, option) => {\n if (type === 'year') {\n option.text += ' Year';\n }\n if (type === 'month') {\n option.text += '\u6708Month';\n }\n return option;\n };\n\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n formatter,\n currentDate,\n columnsType,\n };\n },\n};\n
\n<van-date-picker\n v-model="currentDate"\n title="Choose Year-Month"\n :filter="filter"\n :min-date="minDate"\n :max-date="maxDate"\n :columns-type="columnsType"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentDate = ref(['2021', '01']);\n const columnsType = ['year', 'month'];\n const filter = (type, options) => {\n if (type === 'month') {\n return options.filter((option) => Number(option.value) % 6 === 0);\n }\n return options;\n };\n\n return {\n filter,\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n currentTime,\n columnsType,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nCurrent date | \nstring[] | \n[] | \n
columns-type | \nColumns type | \nstring[] | \n[\'year\', \'month\', \'day\'] | \n
min-date | \nMin date | \nDate | \nTen years ago on January 1 | \n
max-date | \nMax date | \nDate | \nTen years later on December 31 | \n
title | \nToolbar title | \nstring | \n\'\' | \n
confirm-button-text | \nText of confirm button | \nstring | \nConfirm | \n
cancel-button-text | \nText of cancel button | \nstring | \nCancel | \n
show-toolbar | \nWhether to show toolbar | \nboolean | \ntrue | \n
loading | \nWhether to show loading prompt | \nboolean | \nfalse | \n
readonly | \nWhether to be readonly | \nboolean | \nfalse | \n
filter | \nOption filter | \n(type: string, options: PickerOption[]) => PickerOption[] | \n- | \n
formatter | \nOption formatter | \n(type: string, option: PickerOption) => PickerOption | \n- | \n
option-height | \nOption height, supports px vw vh rem unit, default px | \nnumber | string | \n44 | \n
visible-option-num | \nCount of visible columns | \nnumber | string | \n6 | \n
swipe-duration | \nDuration of the momentum animation, unit ms | \nnumber | string | \n1000 | \n
Event | \nDescription | \nArguments | \n
---|---|---|
confirm | \nEmitted when the confirm button is clicked | \n{ selectedValues, selectedOptions } | \n
cancel | \nEmitted when the cancel button is clicked | \n{ selectedValues, selectedOptions } | \n
change | \nEmitted when current option is changed | \n{ selectedValues, selectedOptions, columnIndex } | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
toolbar | \nCustom toolbar content | \n- | \n
title | \nCustom title | \n- | \n
confirm | \nCustom confirm button text | \n- | \n
cancel | \nCustom cancel button text | \n- | \n
option | \nCustom option content | \noption: PickerOption, index: number | \n
columns-top | \nCustom content above columns | \n- | \n
columns-bottom | \nCustom content below columns | \n- | \n
The component exports the following type definitions:
\nimport type { DatePickerProps, DatePickerColumnType } from 'vant';\n
\n\u8FD4\u56DE\u9875\u9762\u9876\u90E8\u7684\u64CD\u4F5C\u6309\u94AE\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { BackTop } from 'vant';\n\nconst app = createApp();\napp.use(BackTop);\n
\n\u8BF7\u6EDA\u52A8\u53F3\u4FA7\u7684\u793A\u4F8B\u9875\u9762\uFF0C\u5F53\u9875\u9762\u6EDA\u52A8 200px
\u65F6\uFF0C\u53F3\u4E0B\u89D2\u4F1A\u51FA\u73B0\u8FD4\u56DE\u9876\u90E8\u6309\u94AE\u3002
<van-cell v-for="item in list" :key="item" :title="item" />\n\n<van-back-top />\n
\nexport default {\n setup() {\n const list = [...Array(50).keys()];\n return { list };\n },\n};\n
\n\u901A\u8FC7 right
\u548C bottom
\u5C5E\u6027\u6765\u8BBE\u7F6E\u7EC4\u4EF6\u8DDD\u79BB\u53F3\u4FA7\u548C\u5E95\u90E8\u7684\u4F4D\u7F6E\u3002
<van-cell v-for="item in list" :key="item" :title="item" />\n<van-back-top right="15vw" bottom="10vh" />\n
\nexport default {\n setup() {\n const list = [...Array(50).keys()];\n return { list };\n },\n};\n
\n\u4F7F\u7528\u9ED8\u8BA4\u63D2\u69FD\u6765\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u5C55\u793A\u7684\u5185\u5BB9\u3002
\n<van-cell v-for="item in list" :key="item" :title="item" />\n<van-back-top class="custom">\u8FD4\u56DE\u9876\u90E8</van-back-top>\n\n<style>\n .custom {\n width: 80px;\n font-size: 14px;\n text-align: center;\n }\n</style>\n
\nexport default {\n setup() {\n const list = [...Array(50).keys()];\n return { list };\n },\n};\n
\n\u53EF\u4EE5\u901A\u8FC7 target
\u5C5E\u6027\u6765\u8BBE\u7F6E\u89E6\u53D1\u6EDA\u52A8\u7684\u76EE\u6807\u5BF9\u8C61\uFF0C\u652F\u6301\u4F20\u5165\u9009\u62E9\u5668\u6216 HTMLElement
\u3002
<div class="container">\n <van-cell v-for="item in list" :key="item" :title="item" />\n <van-back-top target=".container" bottom="30vh" />\n</div>\n\n<style>\n .container {\n height: 60vh;\n overflow: auto;\n }\n</style>\n
\nexport default {\n setup() {\n const list = [...Array(50).keys()];\n return { list };\n },\n};\n
\n\u5F53\u8BBE\u7F6E immediate
\u5C5E\u6027\u540E\uFF0C\u9875\u9762\u6EDA\u52A8\u7684\u8FC7\u7A0B\u4E0D\u518D\u6709\u8FC7\u6E21\u6548\u679C\uFF0C\u800C\u662F\u77AC\u95F4\u6EDA\u52A8\u5230\u9876\u90E8\u3002
<van-back-top immediate />\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
target | \n\u89E6\u53D1\u6EDA\u52A8\u7684\u76EE\u6807\u5BF9\u8C61\uFF0C\u652F\u6301\u4F20\u5165\u9009\u62E9\u5668\u6216 DOM \u5143\u7D20\uFF0C\u9ED8\u8BA4\u6700\u8FD1\u7684\u7236\u7EA7\u6EDA\u52A8\u5BB9\u5668 | \nstring | HTMLElement | \n- | \n
right | \n\u8DDD\u79BB\u9875\u9762\u53F3\u4FA7\u7684\u8DDD\u79BB\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n30 | \n
bottom | \n\u8DDD\u79BB\u9875\u9762\u5E95\u90E8\u7684\u8DDD\u79BB\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n40 | \n
offset | \n\u6EDA\u52A8\u9AD8\u5EA6\u8FBE\u5230\u6B64\u53C2\u6570\u503C\u65F6\u624D\u663E\u793A\u7EC4\u4EF6 | \nnumber | \n200 | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \nbody | \n
immediate v4.0.9 | \n\u662F\u5426\u77AC\u95F4\u6EDA\u52A8\u5230\u9876\u90E8 | \nboolean | \nfalse | \n
z-index | \n\u8BBE\u7F6E\u7EC4\u4EF6\u7684 z-index \u5C42\u7EA7 | \nnumber | string | \n100 | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u7EC4\u4EF6\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u81EA\u5B9A\u4E49\u6309\u94AE\u663E\u793A\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { BackTopProps, BackTopThemeVars } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-back-top-size | \n40px | \n- | \n
--van-back-top-icon-size | \n20px | \n- | \n
--van-back-top-right | \n30px | \n- | \n
--van-back-top-bottom | \n40px | \n- | \n
--van-back-top-z-index | \n100 | \n- | \n
--van-back-top-text-color | \n#fff | \n- | \n
--van-back-top-background | \nvar(--van-blue) | \n- | \n
\u8FD4\u56DE\u9875\u9762\u9876\u90E8\u7684\u64CD\u4F5C\u6309\u94AE\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { BackTop } from 'vant';\n\nconst app = createApp();\napp.use(BackTop);\n
\n\u8BF7\u6EDA\u52A8\u53F3\u4FA7\u7684\u793A\u4F8B\u9875\u9762\uFF0C\u5F53\u9875\u9762\u6EDA\u52A8 200px
\u65F6\uFF0C\u53F3\u4E0B\u89D2\u4F1A\u51FA\u73B0\u8FD4\u56DE\u9876\u90E8\u6309\u94AE\u3002
<van-cell v-for="item in list" :key="item" :title="item" />\n\n<van-back-top />\n
\nexport default {\n setup() {\n const list = [...Array(50).keys()];\n return { list };\n },\n};\n
\n\u901A\u8FC7 right
\u548C bottom
\u5C5E\u6027\u6765\u8BBE\u7F6E\u7EC4\u4EF6\u8DDD\u79BB\u53F3\u4FA7\u548C\u5E95\u90E8\u7684\u4F4D\u7F6E\u3002
<van-cell v-for="item in list" :key="item" :title="item" />\n<van-back-top right="15vw" bottom="10vh" />\n
\nexport default {\n setup() {\n const list = [...Array(50).keys()];\n return { list };\n },\n};\n
\n\u4F7F\u7528\u9ED8\u8BA4\u63D2\u69FD\u6765\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u5C55\u793A\u7684\u5185\u5BB9\u3002
\n<van-cell v-for="item in list" :key="item" :title="item" />\n<van-back-top class="custom">\u8FD4\u56DE\u9876\u90E8</van-back-top>\n\n<style>\n .custom {\n width: 80px;\n font-size: 14px;\n text-align: center;\n }\n</style>\n
\nexport default {\n setup() {\n const list = [...Array(50).keys()];\n return { list };\n },\n};\n
\n\u53EF\u4EE5\u901A\u8FC7 target
\u5C5E\u6027\u6765\u8BBE\u7F6E\u89E6\u53D1\u6EDA\u52A8\u7684\u76EE\u6807\u5BF9\u8C61\uFF0C\u652F\u6301\u4F20\u5165\u9009\u62E9\u5668\u6216 HTMLElement
\u3002
<div class="container">\n <van-cell v-for="item in list" :key="item" :title="item" />\n <van-back-top target=".container" bottom="30vh" />\n</div>\n\n<style>\n .container {\n height: 60vh;\n overflow: auto;\n }\n</style>\n
\nexport default {\n setup() {\n const list = [...Array(50).keys()];\n return { list };\n },\n};\n
\n\u5F53\u8BBE\u7F6E immediate
\u5C5E\u6027\u540E\uFF0C\u9875\u9762\u6EDA\u52A8\u7684\u8FC7\u7A0B\u4E0D\u518D\u6709\u8FC7\u6E21\u6548\u679C\uFF0C\u800C\u662F\u77AC\u95F4\u6EDA\u52A8\u5230\u9876\u90E8\u3002
<van-back-top immediate />\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
target | \n\u89E6\u53D1\u6EDA\u52A8\u7684\u76EE\u6807\u5BF9\u8C61\uFF0C\u652F\u6301\u4F20\u5165\u9009\u62E9\u5668\u6216 DOM \u5143\u7D20\uFF0C\u9ED8\u8BA4\u6700\u8FD1\u7684\u7236\u7EA7\u6EDA\u52A8\u5BB9\u5668 | \nstring | HTMLElement | \n- | \n
right | \n\u8DDD\u79BB\u9875\u9762\u53F3\u4FA7\u7684\u8DDD\u79BB\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n30 | \n
bottom | \n\u8DDD\u79BB\u9875\u9762\u5E95\u90E8\u7684\u8DDD\u79BB\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n40 | \n
offset | \n\u6EDA\u52A8\u9AD8\u5EA6\u8FBE\u5230\u6B64\u53C2\u6570\u503C\u65F6\u624D\u663E\u793A\u7EC4\u4EF6 | \nnumber | \n200 | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \nbody | \n
immediate v4.0.9 | \n\u662F\u5426\u77AC\u95F4\u6EDA\u52A8\u5230\u9876\u90E8 | \nboolean | \nfalse | \n
z-index | \n\u8BBE\u7F6E\u7EC4\u4EF6\u7684 z-index \u5C42\u7EA7 | \nnumber | string | \n100 | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u7EC4\u4EF6\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u81EA\u5B9A\u4E49\u6309\u94AE\u663E\u793A\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { BackTopProps, BackTopThemeVars } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-back-top-size | \n40px | \n- | \n
--van-back-top-icon-size | \n20px | \n- | \n
--van-back-top-right | \n30px | \n- | \n
--van-back-top-bottom | \n40px | \n- | \n
--van-back-top-z-index | \n100 | \n- | \n
--van-back-top-text-color | \n#fff | \n- | \n
--van-back-top-background | \nvar(--van-blue) | \n- | \n
\u5E26\u7F51\u683C\u7684\u8F93\u5165\u6846\u7EC4\u4EF6\uFF0C\u53EF\u4EE5\u7528\u4E8E\u8F93\u5165\u5BC6\u7801\u3001\u77ED\u4FE1\u9A8C\u8BC1\u7801\u7B49\u573A\u666F\uFF0C\u901A\u5E38\u4E0E\u6570\u5B57\u952E\u76D8\u7EC4\u4EF6\u914D\u5408\u4F7F\u7528\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { PasswordInput, NumberKeyboard } from 'vant';\n\nconst app = createApp();\napp.use(PasswordInput);\napp.use(NumberKeyboard);\n
\n\u642D\u914D\u6570\u5B57\u952E\u76D8\u7EC4\u4EF6\u6765\u5B9E\u73B0\u5BC6\u7801\u8F93\u5165\u529F\u80FD\u3002
\n<!-- \u5BC6\u7801\u8F93\u5165\u6846 -->\n<van-password-input\n :value="value"\n :focused="showKeyboard"\n @focus="showKeyboard = true"\n/>\n<!-- \u6570\u5B57\u952E\u76D8 -->\n<van-number-keyboard\n v-model="value"\n :show="showKeyboard"\n @blur="showKeyboard = false"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref('123');\n const showKeyboard = ref(true);\n\n return {\n value,\n showKeyboard,\n };\n },\n};\n
\n\u901A\u8FC7 length
\u5C5E\u6027\u6765\u8BBE\u7F6E\u5BC6\u7801\u957F\u5EA6\u3002
<van-password-input\n :value="value"\n :length="4"\n :focused="showKeyboard"\n @focus="showKeyboard = true"\n/>\n
\n\u901A\u8FC7 gutter
\u5C5E\u6027\u6765\u8BBE\u7F6E\u683C\u5B50\u4E4B\u95F4\u7684\u95F4\u8DDD\u3002
<van-password-input\n :value="value"\n :gutter="10"\n :focused="showKeyboard"\n @focus="showKeyboard = true"\n/>\n
\n\u5C06 mask
\u8BBE\u7F6E\u4E3A false
\u53EF\u4EE5\u660E\u6587\u5C55\u793A\u8F93\u5165\u7684\u5185\u5BB9\uFF0C\u9002\u7528\u4E8E\u77ED\u4FE1\u9A8C\u8BC1\u7801\u7B49\u573A\u666F\u3002
<van-password-input\n :value="value"\n :mask="false"\n :focused="showKeyboard"\n @focus="showKeyboard = true"\n/>\n
\n\u901A\u8FC7 info
\u5C5E\u6027\u8BBE\u7F6E\u63D0\u793A\u4FE1\u606F\uFF0C\u901A\u8FC7 error-info
\u5C5E\u6027\u8BBE\u7F6E\u9519\u8BEF\u63D0\u793A\uFF0C\u4F8B\u5982\u5F53\u8F93\u5165\u516D\u4F4D\u65F6\u63D0\u793A\u5BC6\u7801\u9519\u8BEF\u3002
<van-password-input\n :value="value"\n info="\u5BC6\u7801\u4E3A 6 \u4F4D\u6570\u5B57"\n :error-info="errorInfo"\n :focused="showKeyboard"\n @focus="showKeyboard = true"\n/>\n<van-number-keyboard\n v-model="value"\n :show="showKeyboard"\n @blur="showKeyboard = false"\n/>\n
\nimport { ref, watch } from 'vue';\n\nexport default {\n setup() {\n const value = ref('123');\n const errorInfo = ref('');\n const showKeyboard = ref(true);\n\n watch(value, (newVal) => {\n if (newVal.length === 6 && newVal !== '123456') {\n errorInfo.value = '\u5BC6\u7801\u9519\u8BEF';\n } else {\n errorInfo.value = '';\n }\n });\n\n return {\n value,\n errorInfo,\n showKeyboard,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
value | \n\u5BC6\u7801\u503C | \nstring | \n\'\' | \n
info | \n\u8F93\u5165\u6846\u4E0B\u65B9\u6587\u5B57\u63D0\u793A | \nstring | \n- | \n
error-info | \n\u8F93\u5165\u6846\u4E0B\u65B9\u9519\u8BEF\u63D0\u793A | \nstring | \n- | \n
length | \n\u5BC6\u7801\u6700\u5927\u957F\u5EA6 | \nnumber | string | \n6 | \n
gutter | \n\u8F93\u5165\u6846\u683C\u5B50\u4E4B\u95F4\u7684\u95F4\u8DDD\uFF0C\u5982 20px 2em \uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx | \nnumber | string | \n0 | \n
mask | \n\u662F\u5426\u9690\u85CF\u5BC6\u7801\u5185\u5BB9 | \nboolean | \ntrue | \n
focused | \n\u662F\u5426\u5DF2\u805A\u7126\uFF0C\u805A\u7126\u65F6\u4F1A\u663E\u793A\u5149\u6807 | \nboolean | \nfalse | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
focus | \n\u8F93\u5165\u6846\u805A\u7126\u65F6\u89E6\u53D1 | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { PasswordInputProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-password-input-height | \n50px | \n- | \n
--van-password-input-margin | \n0 var(--van-padding-md) | \n- | \n
--van-password-input-font-size | \n20px | \n- | \n
--van-password-input-radius | \n6px | \n- | \n
--van-password-input-background | \nvar(--van-background-2) | \n- | \n
--van-password-input-info-color | \nvar(--van-text-color-2) | \n- | \n
--van-password-input-info-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-password-input-error-info-color | \nvar(--van-danger-color) | \n- | \n
--van-password-input-dot-size | \n10px | \n- | \n
--van-password-input-dot-color | \nvar(--van-text-color) | \n- | \n
--van-password-input-text-color | \nvar(--van-text-color) | \n- | \n
--van-password-input-cursor-color | \nvar(--van-text-color) | \n- | \n
--van-password-input-cursor-width | \n1px | \n- | \n
--van-password-input-cursor-height | \n40% | \n- | \n
--van-password-input-cursor-duration | \n1s | \n- | \n
\u5E26\u7F51\u683C\u7684\u8F93\u5165\u6846\u7EC4\u4EF6\uFF0C\u53EF\u4EE5\u7528\u4E8E\u8F93\u5165\u5BC6\u7801\u3001\u77ED\u4FE1\u9A8C\u8BC1\u7801\u7B49\u573A\u666F\uFF0C\u901A\u5E38\u4E0E\u6570\u5B57\u952E\u76D8\u7EC4\u4EF6\u914D\u5408\u4F7F\u7528\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { PasswordInput, NumberKeyboard } from 'vant';\n\nconst app = createApp();\napp.use(PasswordInput);\napp.use(NumberKeyboard);\n
\n\u642D\u914D\u6570\u5B57\u952E\u76D8\u7EC4\u4EF6\u6765\u5B9E\u73B0\u5BC6\u7801\u8F93\u5165\u529F\u80FD\u3002
\n<!-- \u5BC6\u7801\u8F93\u5165\u6846 -->\n<van-password-input\n :value="value"\n :focused="showKeyboard"\n @focus="showKeyboard = true"\n/>\n<!-- \u6570\u5B57\u952E\u76D8 -->\n<van-number-keyboard\n v-model="value"\n :show="showKeyboard"\n @blur="showKeyboard = false"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref('123');\n const showKeyboard = ref(true);\n\n return {\n value,\n showKeyboard,\n };\n },\n};\n
\n\u901A\u8FC7 length
\u5C5E\u6027\u6765\u8BBE\u7F6E\u5BC6\u7801\u957F\u5EA6\u3002
<van-password-input\n :value="value"\n :length="4"\n :focused="showKeyboard"\n @focus="showKeyboard = true"\n/>\n
\n\u901A\u8FC7 gutter
\u5C5E\u6027\u6765\u8BBE\u7F6E\u683C\u5B50\u4E4B\u95F4\u7684\u95F4\u8DDD\u3002
<van-password-input\n :value="value"\n :gutter="10"\n :focused="showKeyboard"\n @focus="showKeyboard = true"\n/>\n
\n\u5C06 mask
\u8BBE\u7F6E\u4E3A false
\u53EF\u4EE5\u660E\u6587\u5C55\u793A\u8F93\u5165\u7684\u5185\u5BB9\uFF0C\u9002\u7528\u4E8E\u77ED\u4FE1\u9A8C\u8BC1\u7801\u7B49\u573A\u666F\u3002
<van-password-input\n :value="value"\n :mask="false"\n :focused="showKeyboard"\n @focus="showKeyboard = true"\n/>\n
\n\u901A\u8FC7 info
\u5C5E\u6027\u8BBE\u7F6E\u63D0\u793A\u4FE1\u606F\uFF0C\u901A\u8FC7 error-info
\u5C5E\u6027\u8BBE\u7F6E\u9519\u8BEF\u63D0\u793A\uFF0C\u4F8B\u5982\u5F53\u8F93\u5165\u516D\u4F4D\u65F6\u63D0\u793A\u5BC6\u7801\u9519\u8BEF\u3002
<van-password-input\n :value="value"\n info="\u5BC6\u7801\u4E3A 6 \u4F4D\u6570\u5B57"\n :error-info="errorInfo"\n :focused="showKeyboard"\n @focus="showKeyboard = true"\n/>\n<van-number-keyboard\n v-model="value"\n :show="showKeyboard"\n @blur="showKeyboard = false"\n/>\n
\nimport { ref, watch } from 'vue';\n\nexport default {\n setup() {\n const value = ref('123');\n const errorInfo = ref('');\n const showKeyboard = ref(true);\n\n watch(value, (newVal) => {\n if (newVal.length === 6 && newVal !== '123456') {\n errorInfo.value = '\u5BC6\u7801\u9519\u8BEF';\n } else {\n errorInfo.value = '';\n }\n });\n\n return {\n value,\n errorInfo,\n showKeyboard,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
value | \n\u5BC6\u7801\u503C | \nstring | \n\'\' | \n
info | \n\u8F93\u5165\u6846\u4E0B\u65B9\u6587\u5B57\u63D0\u793A | \nstring | \n- | \n
error-info | \n\u8F93\u5165\u6846\u4E0B\u65B9\u9519\u8BEF\u63D0\u793A | \nstring | \n- | \n
length | \n\u5BC6\u7801\u6700\u5927\u957F\u5EA6 | \nnumber | string | \n6 | \n
gutter | \n\u8F93\u5165\u6846\u683C\u5B50\u4E4B\u95F4\u7684\u95F4\u8DDD\uFF0C\u5982 20px 2em \uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx | \nnumber | string | \n0 | \n
mask | \n\u662F\u5426\u9690\u85CF\u5BC6\u7801\u5185\u5BB9 | \nboolean | \ntrue | \n
focused | \n\u662F\u5426\u5DF2\u805A\u7126\uFF0C\u805A\u7126\u65F6\u4F1A\u663E\u793A\u5149\u6807 | \nboolean | \nfalse | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
focus | \n\u8F93\u5165\u6846\u805A\u7126\u65F6\u89E6\u53D1 | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { PasswordInputProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-password-input-height | \n50px | \n- | \n
--van-password-input-margin | \n0 var(--van-padding-md) | \n- | \n
--van-password-input-font-size | \n20px | \n- | \n
--van-password-input-radius | \n6px | \n- | \n
--van-password-input-background | \nvar(--van-background-2) | \n- | \n
--van-password-input-info-color | \nvar(--van-text-color-2) | \n- | \n
--van-password-input-info-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-password-input-error-info-color | \nvar(--van-danger-color) | \n- | \n
--van-password-input-dot-size | \n10px | \n- | \n
--van-password-input-dot-color | \nvar(--van-text-color) | \n- | \n
--van-password-input-text-color | \nvar(--van-text-color) | \n- | \n
--van-password-input-cursor-color | \nvar(--van-text-color) | \n- | \n
--van-password-input-cursor-width | \n1px | \n- | \n
--van-password-input-cursor-height | \n40% | \n- | \n
--van-password-input-cursor-duration | \n1s | \n- | \n
Rolling text animation, which can roll numbers and other types of text. Please upgrade vant
to >= v4.6.0 before using this component.
Register component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { RollingText } from 'vant';\n\nconst app = createApp();\napp.use(RollingText);\n
\nYou can set the starting value with start-num
and the target value with target-num
. The RollingText component will automatically start the animation, rolling from the starting value to the target value.
<van-rolling-text :start-num="0" :target-num="123" />\n
\nYou can set the rolling direction of the numbers using the direction
prop. By default, it rolls downwards, but you can set it to up
to roll upwards.
<van-rolling-text :start-num="0" :target-num="432" direction="up" />\n
\nYou can set the order of stopping the animation of each digit through the stop-order
prop. By default, it stops from the higher digits. Setting rtl
can stop from the ones digit.
<van-rolling-text :start-num="0" :target-num="54321" stop-order="rtl" />\n
\nYou can reverse non-numeric content by using the text-list
prop. The component will rolling from the first item to the last item in the array. Please make sure that the array length is greater than or equal to 2, and that each item has the same length.
<van-rolling-text :text-list="textList" :duration="1" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const textList = ref([\n 'aaaaa',\n 'bbbbb',\n 'ccccc',\n 'ddddd',\n 'eeeee',\n 'fffff',\n 'ggggg',\n ]);\n return { textList };\n },\n};\n
\nThe RollingText component provides some CSS variables that you can override to customize the style, or you can directly modify the component\'s style. Additionally, you can set the height of the numbers using the height
prop.
<van-rolling-text\n class="my-rolling-text"\n :height="54"\n :start-num="12345"\n :target-num="54321"\n/>\n
\n.my-rolling-text {\n --van-rolling-text-background: #1989fa;\n --van-rolling-text-color: white;\n --van-rolling-text-font-size: 24px;\n --van-rolling-text-gap: 6px;\n --van-rolling-text-item-border-radius: 5px;\n --van-rolling-text-item-width: 40px;\n}\n
\nAfter obtaining the component instance through ref
, you can call the start
and reset
methods. The start
method is used to start the animation, and the reset
method is used to reset the animation.
<van-rolling-text\n ref="rollingTextRef"\n :start-num="0"\n :target-num="54321"\n :auto-start="false"\n/>\n<van-grid clickable :column-num="3">\n <van-grid-item icon="play-circle-o" :text="start" @click="start" />\n <van-grid-item icon="replay" :text="reset" @click="reset" />\n</van-grid>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const rollingTextRef = ref(null);\n const start = () => {\n rollingTextRef.value.start();\n };\n const reset = () => {\n rollingTextRef.value.reset();\n };\n return { rollingTextRef, start, reset };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
start-num | \nStart number | \nnumber | \n0 | \n
target-num | \nTarget number | \nnumber | \n- | \n
text-list | \nText array | \nstring[] | \n[] | \n
duration | \nDuration of the animation, in seconds | \nnumber | \n2 | \n
direction | \nRolling direction of the text, with down and up as the values | \nstring | \ndown | \n
auto-start | \nWhether to start the animation | \nboolean | \ntrue | \n
stop-order | \nOrder of stopping the animation of each digit, with ltr and rtl as the values | \nstring | \nltr | \n
height | \nHeight of digit, px as unit | \nnumber | \n40 | \n
Use ref to get RollingText instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
start | \nStart the animation | \n- | \n- | \n
reset | \nReset the animation | \n- | \n- | \n
The component exports the following type definitions:
\nimport type {\n RollingTextProps,\n RollingTextInstance,\n RollingTextDirection,\n RollingTextStopOrder,\n} from 'vant';\n
\nRollingTextInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { RollingTextInstance } from 'vant';\n\nconst rollingTextRef = ref<RollingTextInstance>();\n\nrollingTextRef.value?.start();\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-rolling-text-background | \ninherit | \nBackground color of a single digit | \n
--van-rolling-text-color | \nvar(--van-text-color) | \nColor of the number | \n
--van-rolling-text-font-size | \nvar(--van-font-size-md) | \nFont size of the number | \n
--van-rolling-text-gap | \n0px | \nSpacing between digits | \n
--van-rolling-text-item-width | \n15px | \nWidth of a single digit | \n
--van-rolling-text-item-border-radius | \n0px | \nBorder radius of a single digit | \n
Rolling text animation, which can roll numbers and other types of text. Please upgrade vant
to >= v4.6.0 before using this component.
Register component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { RollingText } from 'vant';\n\nconst app = createApp();\napp.use(RollingText);\n
\nYou can set the starting value with start-num
and the target value with target-num
. The RollingText component will automatically start the animation, rolling from the starting value to the target value.
<van-rolling-text :start-num="0" :target-num="123" />\n
\nYou can set the rolling direction of the numbers using the direction
prop. By default, it rolls downwards, but you can set it to up
to roll upwards.
<van-rolling-text :start-num="0" :target-num="432" direction="up" />\n
\nYou can set the order of stopping the animation of each digit through the stop-order
prop. By default, it stops from the higher digits. Setting rtl
can stop from the ones digit.
<van-rolling-text :start-num="0" :target-num="54321" stop-order="rtl" />\n
\nYou can reverse non-numeric content by using the text-list
prop. The component will rolling from the first item to the last item in the array. Please make sure that the array length is greater than or equal to 2, and that each item has the same length.
<van-rolling-text :text-list="textList" :duration="1" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const textList = ref([\n 'aaaaa',\n 'bbbbb',\n 'ccccc',\n 'ddddd',\n 'eeeee',\n 'fffff',\n 'ggggg',\n ]);\n return { textList };\n },\n};\n
\nThe RollingText component provides some CSS variables that you can override to customize the style, or you can directly modify the component\'s style. Additionally, you can set the height of the numbers using the height
prop.
<van-rolling-text\n class="my-rolling-text"\n :height="54"\n :start-num="12345"\n :target-num="54321"\n/>\n
\n.my-rolling-text {\n --van-rolling-text-background: #1989fa;\n --van-rolling-text-color: white;\n --van-rolling-text-font-size: 24px;\n --van-rolling-text-gap: 6px;\n --van-rolling-text-item-border-radius: 5px;\n --van-rolling-text-item-width: 40px;\n}\n
\nAfter obtaining the component instance through ref
, you can call the start
and reset
methods. The start
method is used to start the animation, and the reset
method is used to reset the animation.
<van-rolling-text\n ref="rollingTextRef"\n :start-num="0"\n :target-num="54321"\n :auto-start="false"\n/>\n<van-grid clickable :column-num="3">\n <van-grid-item icon="play-circle-o" :text="start" @click="start" />\n <van-grid-item icon="replay" :text="reset" @click="reset" />\n</van-grid>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const rollingTextRef = ref(null);\n const start = () => {\n rollingTextRef.value.start();\n };\n const reset = () => {\n rollingTextRef.value.reset();\n };\n return { rollingTextRef, start, reset };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
start-num | \nStart number | \nnumber | \n0 | \n
target-num | \nTarget number | \nnumber | \n- | \n
text-list | \nText array | \nstring[] | \n[] | \n
duration | \nDuration of the animation, in seconds | \nnumber | \n2 | \n
direction | \nRolling direction of the text, with down and up as the values | \nstring | \ndown | \n
auto-start | \nWhether to start the animation | \nboolean | \ntrue | \n
stop-order | \nOrder of stopping the animation of each digit, with ltr and rtl as the values | \nstring | \nltr | \n
height | \nHeight of digit, px as unit | \nnumber | \n40 | \n
Use ref to get RollingText instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
start | \nStart the animation | \n- | \n- | \n
reset | \nReset the animation | \n- | \n- | \n
The component exports the following type definitions:
\nimport type {\n RollingTextProps,\n RollingTextInstance,\n RollingTextDirection,\n RollingTextStopOrder,\n} from 'vant';\n
\nRollingTextInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { RollingTextInstance } from 'vant';\n\nconst rollingTextRef = ref<RollingTextInstance>();\n\nrollingTextRef.value?.start();\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-rolling-text-background | \ninherit | \nBackground color of a single digit | \n
--van-rolling-text-color | \nvar(--van-text-color) | \nColor of the number | \n
--van-rolling-text-font-size | \nvar(--van-font-size-md) | \nFont size of the number | \n
--van-rolling-text-gap | \n0px | \nSpacing between digits | \n
--van-rolling-text-item-width | \n15px | \nWidth of a single digit | \n
--van-rolling-text-item-border-radius | \n0px | \nBorder radius of a single digit | \n
\u5F53\u524D\u6587\u6863\u4E3A Vant 4 \u7684\u66F4\u65B0\u65E5\u5FD7\uFF0C\u5176\u4ED6\u7248\u672C\u8BF7\u53C2\u8003\uFF1A
\n\nVant \u9075\u5FAA Semver \u8BED\u4E49\u5316\u7248\u672C\u89C4\u8303\u3002
\n\u53D1\u5E03\u8282\u594F
\n2024-01-03
2023-12-17
2023-11-19
2023-10-29
2023-10-15
2023-10-06
transition-property
\u6837\u5F0F\uFF0C\u7531 @chenjiahan \u5728 #12336 \u4E2D\u8D21\u732E2023-09-24
records
\u56FE\u6807contact
\u56FE\u6807discount
\u56FE\u6807completed
\u56FE\u6807description
\u56FE\u6807cash-back-record
\u56FE\u6807user
\u56FE\u6807notes
\u56FE\u6807newspaper
\u56FE\u6807list-switch
\u56FE\u6807list-switching
\u56FE\u6807records
\u56FE\u6807\u91CD\u547D\u540D\u4E3A records-o
contact
\u56FE\u6807\u91CD\u547D\u540D\u4E3A contact-o
discount
\u56FE\u6807\u91CD\u547D\u540D\u4E3A discount-o
completed
\u56FE\u6807\u91CD\u547D\u540D\u4E3A completed-o
description
\u56FE\u6807\u91CD\u547D\u540D\u4E3A description-o
cash-back-record
\u56FE\u6807\u91CD\u547D\u540D\u4E3A cash-back-record-o
click-disabled-date
\u4E8B\u4EF6--van-uploader-border-radius
CSS \u53D8\u91CFbeforeClose
\u65F6\u70B9\u51FB\u5916\u90E8\u89E6\u53D1\u5173\u95ED\u7684\u95EE\u9898change
\u4E8B\u4EF6showDialog
\u7684\u8FD4\u56DE\u7C7B\u578B2023-09-10
2023-09-04
2023-08-20
2023-08-16
ToastWrapperInstance
\u5BFC\u51FA by @long-woo in #121662023-08-06
2023-07-23
Feature
\nBug Fixes
\n\n2023-07-09
Feature
\nBug Fixes
\n\n2023-07-02
Feature
\nBug Fixes
\n\n2023-06-24
New Component
\nFeature
\nBug Fixes
\nfor
\u5C5E\u6027\u7684\u95EE\u9898 #119662023-06-11
New Component
\n\nFeature
\nBug Fixes
\n2023-05-28
Feature
\nBug Fixes
\n2023-05-21
New Component
\n\nFeature
\nBug Fixes
\n2023-05-14
Feature
\nBug Fixes
\n2023-05-04
Bug Fixes
\n2023-05-03
New Component
\nFeature
\nBug Fixes
\n\n2023-04-30
Feature
\nBug Fixes
\n2023-04-16
New Component
\nFeature
\nBug Fixes
\n2023-03-26
Feature
\nBug Fixes
\n2023-03-19
Feature
\nBug Fixes
\nFieldRuleFormatter
\u7C7B\u578B\u62FC\u5199\u9519\u8BEF #116742023-03-05
New Component
\nFeature
\nBug Fixes
\n2023-02-20
Feature
\nBug Fixes
\n*-start/end
\u65F6\u7BAD\u5934\u4F4D\u7F6E\u9519\u8BEF\u7684\u95EE\u9898 #115842023-01-26
Feature
\nBug Fixes
\n2023-01-15
Feature
\nBug Fixes
\n2023-01-02
Bug Fixes
\n2022-12-26
Bug Fixes
\n2022-12-25
Feature
\nBug Fixes
\n2022-12-03
Bug Fixes
\n2022-12-01
Feature
\nBug Fixes
\n2022-11-26
\n\n\u5B8C\u6574\u5185\u5BB9\u8BF7\u79FB\u6B65\uFF1A\u300C4.0 \u66F4\u65B0\u4ECB\u7ECD\u300D
\n
Feature
\nBug Fixes
\n2022-11-20
Feature
\nBug Fixes
\n2022-11-13
New Component
\nFeature
\nBug Fixes
\n2022-10-23
Feature
\nBug Fixes
\n2022-10-07
Feature
\nBug Fixes
\n2022-09-25
Feature
\nBug Fixes
\n\n2022-09-12
Feature
\n@popperjs/core
\u4F9D\u8D56\uFF0C\u51CF\u5C11\u5B89\u88C5\u4F53\u79EF 1.6MB #11030Types
\n2022-09-11
Breaking Changes
\nbody
\u8282\u70B9\u8C03\u6574\u56DE :root
\u8282\u70B9\uFF0C\u8C03\u6574\u540E\u4E0E Vant v3 \u7248\u672C\u4FDD\u6301\u4E00\u81F4\uFF0C\u4EE5\u4FBF\u4E8E v3 \u9879\u76EE\u66F4\u5E73\u6ED1\u5730\u5347\u7EA7\u5230 v4 \u7248\u672C\u3002 #11026Bug Fixes
\n\n2022-09-10
Feature
\nBug Fixes
\n\n2022-09-04
Feature
\nBug Fixes
\n\n2022-08-24
Breaking Changes
\nbox-sizing: border-box
\u6837\u5F0F\u3002position="center"
\u65F6\u7684\u6C34\u5E73\u5C45\u4E2D\u65B9\u5F0F\uFF0C\u4EE5\u89E3\u51B3\u5F39\u7A97\u5BBD\u5EA6\u65E0\u6CD5\u6B63\u786E\u81EA\u9002\u5E94\u7684\u95EE\u9898\u3002// Vant 3\n.van-popup--center {\n left: 50%;\n transform: translate3d(-50%, -50%, 0);\n}\n\n// Vant 4\n.van-popup--center {\n left: 0;\n right: 0;\n width: fit-content;\n max-width: calc(100vw - var(--van-padding-md) * 2);\n margin: 0 auto;\n transform: translateY(-50%);\n}\n
\nNew Component
\nFeature
\nFeature
\nBug Fixes
\n\'0\'
\u4E0D\u751F\u6548\u7684\u95EE\u9898 #109212022-07-16
Breaking Changes
\n\u5173\u4E8E\u4EE5\u4E0A\u6539\u52A8\u7684\u8BE6\u7EC6\u63CF\u8FF0\u548C\u8FC1\u79FB\u65B9\u6CD5\uFF0C\u8BF7\u53C2\u8003 \u4ECE v3 \u5347\u7EA7\u5230 v4 \u7684 \u300CAPI \u8C03\u6574\u300D\u90E8\u5206\u3002
\nFeature
\nBug Fixes
\n2022-05-31
Feature
\n.mjs
\u6587\u4EF6\u540E\u7F00 #106252022-05-02
Feature
\nBug Fixes
\n\n2022-04-16
Feature
\nBug Fixes
\n\n2022-03-19
Feature
\nBug Fixes
\n2022-02-21
\u4E0D\u517C\u5BB9\u66F4\u65B0
\n\u53C2\u89C1 \u4ECE v3 \u5347\u7EA7\u5230 v4\u3002
\nFeature
\ntheme
\u5C5E\u6027\uFF0C\u7528\u4E8E\u5F00\u542F\u6DF1\u8272\u6A21\u5F0FConfigProviderTheme
\u7C7B\u578BStyle
\n\u5728\u4E4B\u524D\u7684\u7248\u672C\u4E2D\uFF0CVant \u7EC4\u4EF6\u6709\u4E24\u79CD\u8272\u5F69\u98CE\u683C\uFF0C\u4E00\u90E8\u5206\u91C7\u7528\u7EA2\u8272\u4F5C\u4E3A\u4E3B\u8272\u8C03\uFF0C\u53E6\u4E00\u90E8\u5206\u91C7\u7528\u84DD\u8272\u3002\u4E3A\u4E86\u4FDD\u6301\u8272\u5F69\u89C4\u8303\u7684\u7EDF\u4E00\uFF0C\u6211\u4EEC\u5728 Vant 4 \u4E2D\u5BF9\u7EC4\u4EF6\u7684\u4E3B\u8272\u8C03\u8FDB\u884C\u4E86\u7EDF\u4E00\uFF0C\u6240\u6709\u7EC4\u4EF6\u5747\u91C7\u7528\u84DD\u8272\u4F5C\u4E3A\u4E3B\u8272\u8C03\u3002
\n\u4EE5\u4E0B\u7EC4\u4EF6\u7684\u9ED8\u8BA4\u8272\u503C\u98CE\u683C\u7531\u7EA2\u8272\u8C03\u6574\u4E3A\u84DD\u8272\uFF1A
\n\u5176\u4ED6\uFF1A
\n--van-font-bold
\u7684\u9ED8\u8BA4\u503C\u7531 500
\u8C03\u6574\u4E3A 600
--van-action-bar-icon-text-color
\u53D8\u91CF\u7684\u9ED8\u8BA4\u503C\u4E3A --van-text-color
--van-address-list-item-radio-icon-color
\u4E3A --van-address-list-radio-color
2px
\u8C03\u6574\u4E3A 4px
--van-gray-4
font-smoothing
\uFF0C\u9ED8\u8BA4\u4F7F\u7528\u7C97\u4F53\u6587\u5B57value
\u65F6\uFF0C\u5185\u5BB9\u4E0D\u518D\u4F1A\u9760\u5DE6\u5BF9\u9F50--van-card-background
\u53D8\u91CF\u7684\u9ED8\u8BA4\u503C\u4E3A --van-background
--van-card-price-color
\u53D8\u91CF\u7684\u9ED8\u8BA4\u503C\u4E3A --van-text-color
--van-card-desc-color
\u53D8\u91CF\u7684\u9ED8\u8BA4\u503C\u4E3A --van-text-color-2
--van-contact-list-item-radio-icon-color
\u4E3A --van-contact-list-radio-color
--van-coupon-corner-checkbox-icon-color
\u4E3A --van-coupon-checkbox-color
--van-field-label-color
\u53D8\u91CF\u7684\u9ED8\u8BA4\u503C\u4E3A --van-text-color
--van-switch-border
\u53D8\u91CF--van-switch-size
\u53D8\u91CF\u7684\u9ED8\u8BA4\u503C\u4E3A 26px
--van-switch-background
\u53D8\u91CF\u7684\u9ED8\u8BA4\u503C\u4E3A rgba(120, 120, 128, 0.16)
--van-tabbar-item-text-color
\u53D8\u91CF\u7684\u9ED8\u8BA4\u503C\u4E3A --van-text-color
--van-grid-item-text-color
\u53D8\u91CF\u7684\u9ED8\u8BA4\u503C\u4E3A --van-text-color
\u5F53\u524D\u6587\u6863\u4E3A Vant 4 \u7684\u66F4\u65B0\u65E5\u5FD7\uFF0C\u5176\u4ED6\u7248\u672C\u8BF7\u53C2\u8003\uFF1A
\n\nVant \u9075\u5FAA Semver \u8BED\u4E49\u5316\u7248\u672C\u89C4\u8303\u3002
\n\u53D1\u5E03\u8282\u594F
\n2024-01-03
2023-12-17
2023-11-19
2023-10-29
2023-10-15
2023-10-06
transition-property
\u6837\u5F0F\uFF0C\u7531 @chenjiahan \u5728 #12336 \u4E2D\u8D21\u732E2023-09-24
records
\u56FE\u6807contact
\u56FE\u6807discount
\u56FE\u6807completed
\u56FE\u6807description
\u56FE\u6807cash-back-record
\u56FE\u6807user
\u56FE\u6807notes
\u56FE\u6807newspaper
\u56FE\u6807list-switch
\u56FE\u6807list-switching
\u56FE\u6807records
\u56FE\u6807\u91CD\u547D\u540D\u4E3A records-o
contact
\u56FE\u6807\u91CD\u547D\u540D\u4E3A contact-o
discount
\u56FE\u6807\u91CD\u547D\u540D\u4E3A discount-o
completed
\u56FE\u6807\u91CD\u547D\u540D\u4E3A completed-o
description
\u56FE\u6807\u91CD\u547D\u540D\u4E3A description-o
cash-back-record
\u56FE\u6807\u91CD\u547D\u540D\u4E3A cash-back-record-o
click-disabled-date
\u4E8B\u4EF6--van-uploader-border-radius
CSS \u53D8\u91CFbeforeClose
\u65F6\u70B9\u51FB\u5916\u90E8\u89E6\u53D1\u5173\u95ED\u7684\u95EE\u9898change
\u4E8B\u4EF6showDialog
\u7684\u8FD4\u56DE\u7C7B\u578B2023-09-10
2023-09-04
2023-08-20
2023-08-16
ToastWrapperInstance
\u5BFC\u51FA by @long-woo in #121662023-08-06
2023-07-23
Feature
\nBug Fixes
\n\n2023-07-09
Feature
\nBug Fixes
\n\n2023-07-02
Feature
\nBug Fixes
\n\n2023-06-24
New Component
\nFeature
\nBug Fixes
\nfor
\u5C5E\u6027\u7684\u95EE\u9898 #119662023-06-11
New Component
\n\nFeature
\nBug Fixes
\n2023-05-28
Feature
\nBug Fixes
\n2023-05-21
New Component
\n\nFeature
\nBug Fixes
\n2023-05-14
Feature
\nBug Fixes
\n2023-05-04
Bug Fixes
\n2023-05-03
New Component
\nFeature
\nBug Fixes
\n\n2023-04-30
Feature
\nBug Fixes
\n2023-04-16
New Component
\nFeature
\nBug Fixes
\n2023-03-26
Feature
\nBug Fixes
\n2023-03-19
Feature
\nBug Fixes
\nFieldRuleFormatter
\u7C7B\u578B\u62FC\u5199\u9519\u8BEF #116742023-03-05
New Component
\nFeature
\nBug Fixes
\n2023-02-20
Feature
\nBug Fixes
\n*-start/end
\u65F6\u7BAD\u5934\u4F4D\u7F6E\u9519\u8BEF\u7684\u95EE\u9898 #115842023-01-26
Feature
\nBug Fixes
\n2023-01-15
Feature
\nBug Fixes
\n2023-01-02
Bug Fixes
\n2022-12-26
Bug Fixes
\n2022-12-25
Feature
\nBug Fixes
\n2022-12-03
Bug Fixes
\n2022-12-01
Feature
\nBug Fixes
\n2022-11-26
\n\n\u5B8C\u6574\u5185\u5BB9\u8BF7\u79FB\u6B65\uFF1A\u300C4.0 \u66F4\u65B0\u4ECB\u7ECD\u300D
\n
Feature
\nBug Fixes
\n2022-11-20
Feature
\nBug Fixes
\n2022-11-13
New Component
\nFeature
\nBug Fixes
\n2022-10-23
Feature
\nBug Fixes
\n2022-10-07
Feature
\nBug Fixes
\n2022-09-25
Feature
\nBug Fixes
\n\n2022-09-12
Feature
\n@popperjs/core
\u4F9D\u8D56\uFF0C\u51CF\u5C11\u5B89\u88C5\u4F53\u79EF 1.6MB #11030Types
\n2022-09-11
Breaking Changes
\nbody
\u8282\u70B9\u8C03\u6574\u56DE :root
\u8282\u70B9\uFF0C\u8C03\u6574\u540E\u4E0E Vant v3 \u7248\u672C\u4FDD\u6301\u4E00\u81F4\uFF0C\u4EE5\u4FBF\u4E8E v3 \u9879\u76EE\u66F4\u5E73\u6ED1\u5730\u5347\u7EA7\u5230 v4 \u7248\u672C\u3002 #11026Bug Fixes
\n\n2022-09-10
Feature
\nBug Fixes
\n\n2022-09-04
Feature
\nBug Fixes
\n\n2022-08-24
Breaking Changes
\nbox-sizing: border-box
\u6837\u5F0F\u3002position="center"
\u65F6\u7684\u6C34\u5E73\u5C45\u4E2D\u65B9\u5F0F\uFF0C\u4EE5\u89E3\u51B3\u5F39\u7A97\u5BBD\u5EA6\u65E0\u6CD5\u6B63\u786E\u81EA\u9002\u5E94\u7684\u95EE\u9898\u3002// Vant 3\n.van-popup--center {\n left: 50%;\n transform: translate3d(-50%, -50%, 0);\n}\n\n// Vant 4\n.van-popup--center {\n left: 0;\n right: 0;\n width: fit-content;\n max-width: calc(100vw - var(--van-padding-md) * 2);\n margin: 0 auto;\n transform: translateY(-50%);\n}\n
\nNew Component
\nFeature
\nFeature
\nBug Fixes
\n\'0\'
\u4E0D\u751F\u6548\u7684\u95EE\u9898 #109212022-07-16
Breaking Changes
\n\u5173\u4E8E\u4EE5\u4E0A\u6539\u52A8\u7684\u8BE6\u7EC6\u63CF\u8FF0\u548C\u8FC1\u79FB\u65B9\u6CD5\uFF0C\u8BF7\u53C2\u8003 \u4ECE v3 \u5347\u7EA7\u5230 v4 \u7684 \u300CAPI \u8C03\u6574\u300D\u90E8\u5206\u3002
\nFeature
\nBug Fixes
\n2022-05-31
Feature
\n.mjs
\u6587\u4EF6\u540E\u7F00 #106252022-05-02
Feature
\nBug Fixes
\n\n2022-04-16
Feature
\nBug Fixes
\n\n2022-03-19
Feature
\nBug Fixes
\n2022-02-21
\u4E0D\u517C\u5BB9\u66F4\u65B0
\n\u53C2\u89C1 \u4ECE v3 \u5347\u7EA7\u5230 v4\u3002
\nFeature
\ntheme
\u5C5E\u6027\uFF0C\u7528\u4E8E\u5F00\u542F\u6DF1\u8272\u6A21\u5F0FConfigProviderTheme
\u7C7B\u578BStyle
\n\u5728\u4E4B\u524D\u7684\u7248\u672C\u4E2D\uFF0CVant \u7EC4\u4EF6\u6709\u4E24\u79CD\u8272\u5F69\u98CE\u683C\uFF0C\u4E00\u90E8\u5206\u91C7\u7528\u7EA2\u8272\u4F5C\u4E3A\u4E3B\u8272\u8C03\uFF0C\u53E6\u4E00\u90E8\u5206\u91C7\u7528\u84DD\u8272\u3002\u4E3A\u4E86\u4FDD\u6301\u8272\u5F69\u89C4\u8303\u7684\u7EDF\u4E00\uFF0C\u6211\u4EEC\u5728 Vant 4 \u4E2D\u5BF9\u7EC4\u4EF6\u7684\u4E3B\u8272\u8C03\u8FDB\u884C\u4E86\u7EDF\u4E00\uFF0C\u6240\u6709\u7EC4\u4EF6\u5747\u91C7\u7528\u84DD\u8272\u4F5C\u4E3A\u4E3B\u8272\u8C03\u3002
\n\u4EE5\u4E0B\u7EC4\u4EF6\u7684\u9ED8\u8BA4\u8272\u503C\u98CE\u683C\u7531\u7EA2\u8272\u8C03\u6574\u4E3A\u84DD\u8272\uFF1A
\n\u5176\u4ED6\uFF1A
\n--van-font-bold
\u7684\u9ED8\u8BA4\u503C\u7531 500
\u8C03\u6574\u4E3A 600
--van-action-bar-icon-text-color
\u53D8\u91CF\u7684\u9ED8\u8BA4\u503C\u4E3A --van-text-color
--van-address-list-item-radio-icon-color
\u4E3A --van-address-list-radio-color
2px
\u8C03\u6574\u4E3A 4px
--van-gray-4
font-smoothing
\uFF0C\u9ED8\u8BA4\u4F7F\u7528\u7C97\u4F53\u6587\u5B57value
\u65F6\uFF0C\u5185\u5BB9\u4E0D\u518D\u4F1A\u9760\u5DE6\u5BF9\u9F50--van-card-background
\u53D8\u91CF\u7684\u9ED8\u8BA4\u503C\u4E3A --van-background
--van-card-price-color
\u53D8\u91CF\u7684\u9ED8\u8BA4\u503C\u4E3A --van-text-color
--van-card-desc-color
\u53D8\u91CF\u7684\u9ED8\u8BA4\u503C\u4E3A --van-text-color-2
--van-contact-list-item-radio-icon-color
\u4E3A --van-contact-list-radio-color
--van-coupon-corner-checkbox-icon-color
\u4E3A --van-coupon-checkbox-color
--van-field-label-color
\u53D8\u91CF\u7684\u9ED8\u8BA4\u503C\u4E3A --van-text-color
--van-switch-border
\u53D8\u91CF--van-switch-size
\u53D8\u91CF\u7684\u9ED8\u8BA4\u503C\u4E3A 26px
--van-switch-background
\u53D8\u91CF\u7684\u9ED8\u8BA4\u503C\u4E3A rgba(120, 120, 128, 0.16)
--van-tabbar-item-text-color
\u53D8\u91CF\u7684\u9ED8\u8BA4\u503C\u4E3A --van-text-color
--van-grid-item-text-color
\u53D8\u91CF\u7684\u9ED8\u8BA4\u503C\u4E3A --van-text-color
Used to custom Field value.
\nIf you want to custom Form items, you can insert your component into the input
slot of the Field component, and call the useCustomFieldValue
method inside your custom component.
// MyComponent.vue\nimport { ref } from 'vue';\nimport { useCustomFieldValue } from '@vant/use';\n\nexport default {\n setup() {\n const myValue = ref(0);\n\n useCustomFieldValue(() => myValue.value);\n\n return { myValue };\n },\n};\n
\n<van-form>\n <van-field name="my-field" label="Custom Field">\n <template #input>\n <my-component />\n </template>\n </van-field>\n</van-form>\n
\nfunction useCustomFieldValue(customValue: () => unknown): void;\n
\nName | \nDescription | \nType | \nDefault Value | \n
---|---|---|---|
customValue | \nFunction to get field value | \n() => unknown | \n- | \n
Used to custom Field value.
\nIf you want to custom Form items, you can insert your component into the input
slot of the Field component, and call the useCustomFieldValue
method inside your custom component.
// MyComponent.vue\nimport { ref } from 'vue';\nimport { useCustomFieldValue } from '@vant/use';\n\nexport default {\n setup() {\n const myValue = ref(0);\n\n useCustomFieldValue(() => myValue.value);\n\n return { myValue };\n },\n};\n
\n<van-form>\n <van-field name="my-field" label="Custom Field">\n <template #input>\n <my-component />\n </template>\n </van-field>\n</van-form>\n
\nfunction useCustomFieldValue(customValue: () => unknown): void;\n
\nName | \nDescription | \nType | \nDefault Value | \n
---|---|---|---|
customValue | \nFunction to get field value | \n() => unknown | \n- | \n
Used to show the current progress of the operation.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Progress } from 'vant';\n\nconst app = createApp();\napp.use(Progress);\n
\nUse percentage
prop to set current progress.
<van-progress :percentage="50" />\n
\n<van-progress :percentage="50" stroke-width="8" />\n
\n<van-progress inactive :percentage="50" />\n
\nUse pivot-text
to custom text, use color
to custom bar color.
<van-progress pivot-text="Orange" color="#f2826a" :percentage="25" />\n<van-progress pivot-text="Red" color="#ee0a24" :percentage="50" />\n<van-progress\n :percentage="75"\n pivot-text="Purple"\n pivot-color="#7232dd"\n color="linear-gradient(to right, #be99ff, #7232dd)"\n/>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
percentage | \nPercentage | \nnumber | string | \n0 | \n
stroke-width | \nStroke width | \nnumber | string | \n4px | \n
color | \nColor | \nstring | \n#1989fa | \n
track-color | \nTrack color | \nstring | \n#e5e5e5 | \n
pivot-text | \nPivot text | \nstring | \npercentage | \n
pivot-color | \nPivot text background color | \nstring | \ninherit progress color | \n
text-color | \nPivot text color | \nstring | \nwhite | \n
inactive | \nWhether to be gray | \nboolean | \nfalse | \n
show-pivot | \nWhether to show text | \nboolean | \ntrue | \n
The component exports the following type definitions:
\nimport type { ProgressProps, ProgressInstance } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-progress-height | \n4px | \n- | \n
--van-progress-color | \nvar(--van-primary-color) | \n- | \n
--van-progress-inactive-color | \nvar(--van-gray-5) | \n- | \n
--van-progress-background | \nvar(--van-gray-3) | \n- | \n
--van-progress-pivot-padding | \n0 5px | \n- | \n
--van-progress-pivot-text-color | \nvar(--van-white) | \n- | \n
--van-progress-pivot-font-size | \nvar(--van-font-size-xs) | \n- | \n
--van-progress-pivot-line-height | \n1.6 | \n- | \n
--van-progress-pivot-background | \nvar(--van-primary-color) | \n- | \n
Used to show the current progress of the operation.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Progress } from 'vant';\n\nconst app = createApp();\napp.use(Progress);\n
\nUse percentage
prop to set current progress.
<van-progress :percentage="50" />\n
\n<van-progress :percentage="50" stroke-width="8" />\n
\n<van-progress inactive :percentage="50" />\n
\nUse pivot-text
to custom text, use color
to custom bar color.
<van-progress pivot-text="Orange" color="#f2826a" :percentage="25" />\n<van-progress pivot-text="Red" color="#ee0a24" :percentage="50" />\n<van-progress\n :percentage="75"\n pivot-text="Purple"\n pivot-color="#7232dd"\n color="linear-gradient(to right, #be99ff, #7232dd)"\n/>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
percentage | \nPercentage | \nnumber | string | \n0 | \n
stroke-width | \nStroke width | \nnumber | string | \n4px | \n
color | \nColor | \nstring | \n#1989fa | \n
track-color | \nTrack color | \nstring | \n#e5e5e5 | \n
pivot-text | \nPivot text | \nstring | \npercentage | \n
pivot-color | \nPivot text background color | \nstring | \ninherit progress color | \n
text-color | \nPivot text color | \nstring | \nwhite | \n
inactive | \nWhether to be gray | \nboolean | \nfalse | \n
show-pivot | \nWhether to show text | \nboolean | \ntrue | \n
The component exports the following type definitions:
\nimport type { ProgressProps, ProgressInstance } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-progress-height | \n4px | \n- | \n
--van-progress-color | \nvar(--van-primary-color) | \n- | \n
--van-progress-inactive-color | \nvar(--van-gray-5) | \n- | \n
--van-progress-background | \nvar(--van-gray-3) | \n- | \n
--van-progress-pivot-padding | \n0 5px | \n- | \n
--van-progress-pivot-text-color | \nvar(--van-white) | \n- | \n
--van-progress-pivot-font-size | \nvar(--van-font-size-xs) | \n- | \n
--van-progress-pivot-line-height | \n1.6 | \n- | \n
--van-progress-pivot-background | \nvar(--van-primary-color) | \n- | \n
Used to switch between different pages.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Tabbar, TabbarItem } from 'vant';\n\nconst app = createApp();\napp.use(Tabbar);\napp.use(TabbarItem);\n
\n<van-tabbar v-model="active">\n <van-tabbar-item icon="home-o">Tab</van-tabbar-item>\n <van-tabbar-item icon="search">Tab</van-tabbar-item>\n <van-tabbar-item icon="friends-o">Tab</van-tabbar-item>\n <van-tabbar-item icon="setting-o">Tab</van-tabbar-item>\n</van-tabbar>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref(0);\n return { active };\n },\n};\n
\n<van-tabbar v-model="active">\n <van-tabbar-item name="home" icon="home-o">Tab</van-tabbar-item>\n <van-tabbar-item name="search" icon="search">Tab</van-tabbar-item>\n <van-tabbar-item name="friends" icon="friends-o">Tab</van-tabbar-item>\n <van-tabbar-item name="setting" icon="setting-o">Tab</van-tabbar-item>\n</van-tabbar>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref('home');\n return { active };\n },\n};\n
\n<van-tabbar v-model="active">\n <van-tabbar-item icon="home-o">Tab</van-tabbar-item>\n <van-tabbar-item icon="search" dot>Tab</van-tabbar-item>\n <van-tabbar-item icon="friends-o" badge="5">Tab</van-tabbar-item>\n <van-tabbar-item icon="setting-o" badge="20">Tab</van-tabbar-item>\n</van-tabbar>\n
\nUse icon
slot to custom icon.
<van-tabbar v-model="active">\n <van-tabbar-item badge="3">\n <span>Custom</span>\n <template #icon="props">\n <img :src="props.active ? icon.active : icon.inactive" />\n </template>\n </van-tabbar-item>\n <van-tabbar-item icon="search">Tab</van-tabbar-item>\n <van-tabbar-item icon="setting-o">Tab</van-tabbar-item>\n</van-tabbar>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref(0);\n const icon = {\n active: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',\n inactive:\n 'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',\n };\n return {\n icon,\n active,\n };\n },\n};\n
\n<van-tabbar v-model="active" active-color="#ee0a24">\n <van-tabbar-item icon="home-o">Tab</van-tabbar-item>\n <van-tabbar-item icon="search">Tab</van-tabbar-item>\n <van-tabbar-item icon="friends-o">Tab</van-tabbar-item>\n <van-tabbar-item icon="setting-o">Tab</van-tabbar-item>\n</van-tabbar>\n
\n<van-tabbar v-model="active" @change="onChange">\n <van-tabbar-item icon="home-o">Tab 1</van-tabbar-item>\n <van-tabbar-item icon="search">Tab 2</van-tabbar-item>\n <van-tabbar-item icon="friends-o">Tab 3</van-tabbar-item>\n <van-tabbar-item icon="setting-o">Tab 4</van-tabbar-item>\n</van-tabbar>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const active = ref(0);\n const onChange = (index) => showToast(`Tab ${index}`);\n return {\n icon,\n onChange,\n };\n },\n};\n
\n<router-view />\n\n<van-tabbar route>\n <van-tabbar-item replace to="/home" icon="home-o">Tab</van-tabbar-item>\n <van-tabbar-item replace to="/search" icon="search">Tab</van-tabbar-item>\n</van-tabbar>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nIdentifier of current tab | \nnumber | string | \n0 | \n
fixed | \nWhether to fixed bottom | \nboolean | \ntrue | \n
border | \nWhether to show border | \nboolean | \ntrue | \n
z-index | \nZ-index | \nnumber | string | \n1 | \n
active-color | \nColor of active tab item | \nstring | \n#1989fa | \n
inactive-color | \nColor of inactive tab item | \nstring | \n#7d7e80 | \n
route | \nWhether to enable route mode | \nboolean | \nfalse | \n
placeholder | \nWhether to generate a placeholder element when fixed | \nboolean | \nfalse | \n
safe-area-inset-bottom | \nWhether to enable bottom safe area adaptation | \nboolean | \nfalse | \n
before-change | \nCallback function before changing tab, return false to prevent change, support return Promise | \n(name: number | string) => boolean | Promise<boolean> | \n- | \n
Event | \nDescription | \nArguments | \n
---|---|---|
change | \nEmitted when changing active tab | \nactive: number | string | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
name | \nIdentifier | \nnumber | string | \nItem index | \n
icon | \nIcon name | \nstring | \n- | \n
icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
dot | \nWhether to show red dot | \nboolean | \n- | \n
badge | \nContent of the badge | \nnumber | string | \n\'\' | \n
badge-props | \nProps of Badge, see Badge - props | \nBadgeProps | \n- | \n
url | \nLink | \nstring | \n- | \n
to | \nThe target route should navigate to when clicked on, same as the to prop of Vue Router | \nstring | object | \n- | \n
replace | \nIf true, the navigation will not leave a history record | \nboolean | \nfalse | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
icon | \nCustom icon | \nactive: boolean | \n
The component exports the following type definitions:
\nimport type { TabbarProps, TabbarItemProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-tabbar-height | \n50px | \n- | \n
--van-tabbar-z-index | \n1 | \n- | \n
--van-tabbar-background | \nvar(--van-background-2) | \n- | \n
--van-tabbar-item-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-tabbar-item-text-color | \nvar(--van-text-color) | \n- | \n
--van-tabbar-item-active-color | \nvar(--van-primary-color) | \n- | \n
--van-tabbar-item-active-background | \nvar(--van-background-2) | \n- | \n
--van-tabbar-item-line-height | \n1 | \n- | \n
--van-tabbar-item-icon-size | \n22px | \n- | \n
--van-tabbar-item-icon-margin-bottom | \nvar(--van-padding-base) | \n- | \n
Used to switch between different pages.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Tabbar, TabbarItem } from 'vant';\n\nconst app = createApp();\napp.use(Tabbar);\napp.use(TabbarItem);\n
\n<van-tabbar v-model="active">\n <van-tabbar-item icon="home-o">Tab</van-tabbar-item>\n <van-tabbar-item icon="search">Tab</van-tabbar-item>\n <van-tabbar-item icon="friends-o">Tab</van-tabbar-item>\n <van-tabbar-item icon="setting-o">Tab</van-tabbar-item>\n</van-tabbar>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref(0);\n return { active };\n },\n};\n
\n<van-tabbar v-model="active">\n <van-tabbar-item name="home" icon="home-o">Tab</van-tabbar-item>\n <van-tabbar-item name="search" icon="search">Tab</van-tabbar-item>\n <van-tabbar-item name="friends" icon="friends-o">Tab</van-tabbar-item>\n <van-tabbar-item name="setting" icon="setting-o">Tab</van-tabbar-item>\n</van-tabbar>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref('home');\n return { active };\n },\n};\n
\n<van-tabbar v-model="active">\n <van-tabbar-item icon="home-o">Tab</van-tabbar-item>\n <van-tabbar-item icon="search" dot>Tab</van-tabbar-item>\n <van-tabbar-item icon="friends-o" badge="5">Tab</van-tabbar-item>\n <van-tabbar-item icon="setting-o" badge="20">Tab</van-tabbar-item>\n</van-tabbar>\n
\nUse icon
slot to custom icon.
<van-tabbar v-model="active">\n <van-tabbar-item badge="3">\n <span>Custom</span>\n <template #icon="props">\n <img :src="props.active ? icon.active : icon.inactive" />\n </template>\n </van-tabbar-item>\n <van-tabbar-item icon="search">Tab</van-tabbar-item>\n <van-tabbar-item icon="setting-o">Tab</van-tabbar-item>\n</van-tabbar>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref(0);\n const icon = {\n active: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',\n inactive:\n 'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',\n };\n return {\n icon,\n active,\n };\n },\n};\n
\n<van-tabbar v-model="active" active-color="#ee0a24">\n <van-tabbar-item icon="home-o">Tab</van-tabbar-item>\n <van-tabbar-item icon="search">Tab</van-tabbar-item>\n <van-tabbar-item icon="friends-o">Tab</van-tabbar-item>\n <van-tabbar-item icon="setting-o">Tab</van-tabbar-item>\n</van-tabbar>\n
\n<van-tabbar v-model="active" @change="onChange">\n <van-tabbar-item icon="home-o">Tab 1</van-tabbar-item>\n <van-tabbar-item icon="search">Tab 2</van-tabbar-item>\n <van-tabbar-item icon="friends-o">Tab 3</van-tabbar-item>\n <van-tabbar-item icon="setting-o">Tab 4</van-tabbar-item>\n</van-tabbar>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const active = ref(0);\n const onChange = (index) => showToast(`Tab ${index}`);\n return {\n icon,\n onChange,\n };\n },\n};\n
\n<router-view />\n\n<van-tabbar route>\n <van-tabbar-item replace to="/home" icon="home-o">Tab</van-tabbar-item>\n <van-tabbar-item replace to="/search" icon="search">Tab</van-tabbar-item>\n</van-tabbar>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nIdentifier of current tab | \nnumber | string | \n0 | \n
fixed | \nWhether to fixed bottom | \nboolean | \ntrue | \n
border | \nWhether to show border | \nboolean | \ntrue | \n
z-index | \nZ-index | \nnumber | string | \n1 | \n
active-color | \nColor of active tab item | \nstring | \n#1989fa | \n
inactive-color | \nColor of inactive tab item | \nstring | \n#7d7e80 | \n
route | \nWhether to enable route mode | \nboolean | \nfalse | \n
placeholder | \nWhether to generate a placeholder element when fixed | \nboolean | \nfalse | \n
safe-area-inset-bottom | \nWhether to enable bottom safe area adaptation | \nboolean | \nfalse | \n
before-change | \nCallback function before changing tab, return false to prevent change, support return Promise | \n(name: number | string) => boolean | Promise<boolean> | \n- | \n
Event | \nDescription | \nArguments | \n
---|---|---|
change | \nEmitted when changing active tab | \nactive: number | string | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
name | \nIdentifier | \nnumber | string | \nItem index | \n
icon | \nIcon name | \nstring | \n- | \n
icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
dot | \nWhether to show red dot | \nboolean | \n- | \n
badge | \nContent of the badge | \nnumber | string | \n\'\' | \n
badge-props | \nProps of Badge, see Badge - props | \nBadgeProps | \n- | \n
url | \nLink | \nstring | \n- | \n
to | \nThe target route should navigate to when clicked on, same as the to prop of Vue Router | \nstring | object | \n- | \n
replace | \nIf true, the navigation will not leave a history record | \nboolean | \nfalse | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
icon | \nCustom icon | \nactive: boolean | \n
The component exports the following type definitions:
\nimport type { TabbarProps, TabbarItemProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-tabbar-height | \n50px | \n- | \n
--van-tabbar-z-index | \n1 | \n- | \n
--van-tabbar-background | \nvar(--van-background-2) | \n- | \n
--van-tabbar-item-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-tabbar-item-text-color | \nvar(--van-text-color) | \n- | \n
--van-tabbar-item-active-color | \nvar(--van-primary-color) | \n- | \n
--van-tabbar-item-active-background | \nvar(--van-background-2) | \n- | \n
--van-tabbar-item-line-height | \n1 | \n- | \n
--van-tabbar-item-icon-size | \n22px | \n- | \n
--van-tabbar-item-icon-margin-bottom | \nvar(--van-padding-base) | \n- | \n
The cell is a single display item in the list.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Cell, CellGroup } from 'vant';\n\nconst app = createApp();\napp.use(Cell);\napp.use(CellGroup);\n
\n<van-cell-group>\n <van-cell title="Cell title" value="Content" />\n <van-cell title="Cell title" value="Content" label="Description" />\n</van-cell-group>\n
\n<van-cell-group inset>\n <van-cell title="Cell title" value="Content" />\n <van-cell title="Cell title" value="Content" label="Description" />\n</van-cell-group>\n
\n<van-cell-group>\n <van-cell title="Cell title" value="Content" size="large" />\n <van-cell\n title="Cell title"\n value="Content"\n size="large"\n label="Description"\n />\n</van-cell-group>\n
\n<van-cell-group>\n <van-cell title="Cell title" icon="location-o" />\n</van-cell-group>\n
\n<van-cell-group>\n <van-cell title="Cell title" is-link />\n <van-cell title="Cell title" is-link value="Content" />\n <van-cell title="Cell title" is-link arrow-direction="down" value="Content" />\n</van-cell-group>\n
\n<van-cell-group>\n <van-cell title="URL" is-link url="https://github.com" />\n <van-cell title="Vue Router" is-link to="index" />\n</van-cell-group>\n
\n<van-cell-group title="Group 1">\n <van-cell title="Cell title" value="Content" />\n</van-cell-group>\n<van-cell-group title="Group 2">\n <van-cell title="Cell title" value="Content" />\n</van-cell-group>\n
\n<van-cell value="Content" is-link>\n <!-- Use the title slot to customize the title -->\n <template #title>\n <span class="custom-title">Title</span>\n <van-tag type="primary">Tag</van-tag>\n </template>\n</van-cell>\n\n<van-cell title="Title" icon="shop-o">\n <!-- Use the right-icon slot to customize the right icon -->\n <template #right-icon>\n <van-icon name="search" class="search-icon" />\n </template>\n</van-cell>\n\n<style>\n .custom-title {\n margin-right: 4px;\n vertical-align: middle;\n }\n\n .search-icon {\n font-size: 16px;\n line-height: inherit;\n }\n</style>\n
\n<van-cell center title="Cell title" value="Content" label="Description" />\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
title | \nGroup title | \nstring | \n- | \n
inset | \nWhether to be inset grouped | \nboolean | \nfalse | \n
border | \nWhether to show outer border | \nboolean | \ntrue | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
title | \nTitle | \nnumber | string | \n- | \n
value | \nRight text | \nnumber | string | \n- | \n
label | \nDescription below the title | \nstring | \n- | \n
size | \nSize, can be set to large normal | \nstring | \n- | \n
icon | \nLeft Icon | \nstring | \n- | \n
icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
tag | \nCustom element tag | \nstring | \ndiv | \n
url | \nLink URL | \nstring | \n- | \n
to | \nThe target route should navigate to when clicked on, same as the to prop of Vue Router | \nstring | object | \n- | \n
replace | \nIf true, the navigation will not leave a history record | \nboolean | \nfalse | \n
border | \nWhether to show inner border | \nboolean | \ntrue | \n
center | \nWhether to center content vertically | \nboolean | \nfalse | \n
clickable | \nWhether to show click feedback when clicked | \nboolean | \nnull | \n
is-link | \nWhether to show link icon | \nboolean | \nfalse | \n
required | \nWhether to show required mark | \nboolean | \nfalse | \n
arrow-direction | \nCan be set to left up down | \nstring | \nright | \n
title-style | \nTitle style | \nstring | Array | object | \n- | \n
title-class | \nTitle className | \nstring | Array | object | \n- | \n
value-class | \nValue className | \nstring | Array | object | \n- | \n
label-class | \nLabel className | \nstring | Array | object | \n- | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when cell is clicked | \nevent: MouseEvent | \n
Name | \nDescription | \n
---|---|
default | \nDefault slot | \n
title | \nCustom title | \n
Name | \nDescription | \n
---|---|
title | \nCustom title | \n
value | \nCustom value | \n
label | \nCustom label | \n
icon | \nCustom left icon | \n
right-icon | \nCustom right icon | \n
extra | \nCustom extra content on the right | \n
The component exports the following type definitions:
\nimport type {\n CellSize,\n CellProps,\n CellGroupProps,\n CellArrowDirection,\n} from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-cell-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-cell-line-height | \n24px | \n- | \n
--van-cell-vertical-padding | \n10px | \n- | \n
--van-cell-horizontal-padding | \nvar(--van-padding-md) | \n- | \n
--van-cell-text-color | \nvar(--van-text-color) | \n- | \n
--van-cell-background | \nvar(--van-background-2) | \n- | \n
--van-cell-border-color | \nvar(--van-border-color) | \n- | \n
--van-cell-active-color | \nvar(--van-active-color) | \n- | \n
--van-cell-required-color | \nvar(--van-danger-color) | \n- | \n
--van-cell-label-color | \nvar(--van-text-color-2) | \n- | \n
--van-cell-label-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-cell-label-line-height | \nvar(--van-line-height-sm) | \n- | \n
--van-cell-label-margin-top | \nvar(--van-padding-base) | \n- | \n
--van-cell-value-color | \nvar(--van-text-color-2) | \n- | \n
--van-cell-value-font-size | \ninherit | \n- | \n
--van-cell-icon-size | \n16px | \n- | \n
--van-cell-right-icon-color | \nvar(--van-gray-6) | \n- | \n
--van-cell-large-vertical-padding | \nvar(--van-padding-sm) | \n- | \n
--van-cell-large-title-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-cell-large-label-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-cell-large-value-font-size | \ninherit | \n- | \n
--van-cell-group-background | \nvar(--van-background-2) | \n- | \n
--van-cell-group-title-color | \nvar(--van-text-color-2) | \n- | \n
--van-cell-group-title-padding | \nvar(--van-padding-md) var(--van-padding-md) var(--van-padding-xs) | \n- | \n
--van-cell-group-title-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-cell-group-title-line-height | \n16px | \n- | \n
--van-cell-group-inset-padding | \n0 var(--van-padding-md) | \n- | \n
--van-cell-group-inset-radius | \nvar(--van-radius-lg) | \n- | \n
--van-cell-group-inset-title-padding | \nvar(--van-padding-md) var(--van-padding-md) var(--van-padding-xs) var(--van-padding-xl) | \n- | \n
The cell is a single display item in the list.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Cell, CellGroup } from 'vant';\n\nconst app = createApp();\napp.use(Cell);\napp.use(CellGroup);\n
\n<van-cell-group>\n <van-cell title="Cell title" value="Content" />\n <van-cell title="Cell title" value="Content" label="Description" />\n</van-cell-group>\n
\n<van-cell-group inset>\n <van-cell title="Cell title" value="Content" />\n <van-cell title="Cell title" value="Content" label="Description" />\n</van-cell-group>\n
\n<van-cell-group>\n <van-cell title="Cell title" value="Content" size="large" />\n <van-cell\n title="Cell title"\n value="Content"\n size="large"\n label="Description"\n />\n</van-cell-group>\n
\n<van-cell-group>\n <van-cell title="Cell title" icon="location-o" />\n</van-cell-group>\n
\n<van-cell-group>\n <van-cell title="Cell title" is-link />\n <van-cell title="Cell title" is-link value="Content" />\n <van-cell title="Cell title" is-link arrow-direction="down" value="Content" />\n</van-cell-group>\n
\n<van-cell-group>\n <van-cell title="URL" is-link url="https://github.com" />\n <van-cell title="Vue Router" is-link to="index" />\n</van-cell-group>\n
\n<van-cell-group title="Group 1">\n <van-cell title="Cell title" value="Content" />\n</van-cell-group>\n<van-cell-group title="Group 2">\n <van-cell title="Cell title" value="Content" />\n</van-cell-group>\n
\n<van-cell value="Content" is-link>\n <!-- Use the title slot to customize the title -->\n <template #title>\n <span class="custom-title">Title</span>\n <van-tag type="primary">Tag</van-tag>\n </template>\n</van-cell>\n\n<van-cell title="Title" icon="shop-o">\n <!-- Use the right-icon slot to customize the right icon -->\n <template #right-icon>\n <van-icon name="search" class="search-icon" />\n </template>\n</van-cell>\n\n<style>\n .custom-title {\n margin-right: 4px;\n vertical-align: middle;\n }\n\n .search-icon {\n font-size: 16px;\n line-height: inherit;\n }\n</style>\n
\n<van-cell center title="Cell title" value="Content" label="Description" />\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
title | \nGroup title | \nstring | \n- | \n
inset | \nWhether to be inset grouped | \nboolean | \nfalse | \n
border | \nWhether to show outer border | \nboolean | \ntrue | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
title | \nTitle | \nnumber | string | \n- | \n
value | \nRight text | \nnumber | string | \n- | \n
label | \nDescription below the title | \nstring | \n- | \n
size | \nSize, can be set to large normal | \nstring | \n- | \n
icon | \nLeft Icon | \nstring | \n- | \n
icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
tag | \nCustom element tag | \nstring | \ndiv | \n
url | \nLink URL | \nstring | \n- | \n
to | \nThe target route should navigate to when clicked on, same as the to prop of Vue Router | \nstring | object | \n- | \n
replace | \nIf true, the navigation will not leave a history record | \nboolean | \nfalse | \n
border | \nWhether to show inner border | \nboolean | \ntrue | \n
center | \nWhether to center content vertically | \nboolean | \nfalse | \n
clickable | \nWhether to show click feedback when clicked | \nboolean | \nnull | \n
is-link | \nWhether to show link icon | \nboolean | \nfalse | \n
required | \nWhether to show required mark | \nboolean | \nfalse | \n
arrow-direction | \nCan be set to left up down | \nstring | \nright | \n
title-style | \nTitle style | \nstring | Array | object | \n- | \n
title-class | \nTitle className | \nstring | Array | object | \n- | \n
value-class | \nValue className | \nstring | Array | object | \n- | \n
label-class | \nLabel className | \nstring | Array | object | \n- | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when cell is clicked | \nevent: MouseEvent | \n
Name | \nDescription | \n
---|---|
default | \nDefault slot | \n
title | \nCustom title | \n
Name | \nDescription | \n
---|---|
title | \nCustom title | \n
value | \nCustom value | \n
label | \nCustom label | \n
icon | \nCustom left icon | \n
right-icon | \nCustom right icon | \n
extra | \nCustom extra content on the right | \n
The component exports the following type definitions:
\nimport type {\n CellSize,\n CellProps,\n CellGroupProps,\n CellArrowDirection,\n} from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-cell-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-cell-line-height | \n24px | \n- | \n
--van-cell-vertical-padding | \n10px | \n- | \n
--van-cell-horizontal-padding | \nvar(--van-padding-md) | \n- | \n
--van-cell-text-color | \nvar(--van-text-color) | \n- | \n
--van-cell-background | \nvar(--van-background-2) | \n- | \n
--van-cell-border-color | \nvar(--van-border-color) | \n- | \n
--van-cell-active-color | \nvar(--van-active-color) | \n- | \n
--van-cell-required-color | \nvar(--van-danger-color) | \n- | \n
--van-cell-label-color | \nvar(--van-text-color-2) | \n- | \n
--van-cell-label-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-cell-label-line-height | \nvar(--van-line-height-sm) | \n- | \n
--van-cell-label-margin-top | \nvar(--van-padding-base) | \n- | \n
--van-cell-value-color | \nvar(--van-text-color-2) | \n- | \n
--van-cell-value-font-size | \ninherit | \n- | \n
--van-cell-icon-size | \n16px | \n- | \n
--van-cell-right-icon-color | \nvar(--van-gray-6) | \n- | \n
--van-cell-large-vertical-padding | \nvar(--van-padding-sm) | \n- | \n
--van-cell-large-title-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-cell-large-label-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-cell-large-value-font-size | \ninherit | \n- | \n
--van-cell-group-background | \nvar(--van-background-2) | \n- | \n
--van-cell-group-title-color | \nvar(--van-text-color-2) | \n- | \n
--van-cell-group-title-padding | \nvar(--van-padding-md) var(--van-padding-md) var(--van-padding-xs) | \n- | \n
--van-cell-group-title-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-cell-group-title-line-height | \n16px | \n- | \n
--van-cell-group-inset-padding | \n0 var(--van-padding-md) | \n- | \n
--van-cell-group-inset-radius | \nvar(--van-radius-lg) | \n- | \n
--van-cell-group-inset-title-padding | \nvar(--van-padding-md) var(--van-padding-md) var(--van-padding-xs) var(--van-padding-xl) | \n- | \n
\u7528\u4E8E\u5168\u5C40\u914D\u7F6E Vant \u7EC4\u4EF6\uFF0C\u63D0\u4F9B\u6DF1\u8272\u6A21\u5F0F\u3001\u4E3B\u9898\u5B9A\u5236\u7B49\u80FD\u529B\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { ConfigProvider } from 'vant';\n\nconst app = createApp();\napp.use(ConfigProvider);\n
\n\u5C06 ConfigProvider \u7EC4\u4EF6\u7684 theme
\u5C5E\u6027\u8BBE\u7F6E\u4E3A dark
\uFF0C\u53EF\u4EE5\u5F00\u542F\u6DF1\u8272\u6A21\u5F0F\u3002
\u6DF1\u8272\u6A21\u5F0F\u4F1A\u5168\u5C40\u751F\u6548\uFF0C\u4F7F\u9875\u9762\u4E0A\u7684\u6240\u6709 Vant \u7EC4\u4EF6\u53D8\u4E3A\u6DF1\u8272\u98CE\u683C\u3002
\n<van-config-provider theme="dark">...</van-config-provider>\n
\n\u503C\u5F97\u6CE8\u610F\u7684\u662F\uFF0C\u5F00\u542F Vant \u7684\u6DF1\u8272\u6A21\u5F0F\u53EA\u4F1A\u5F71\u54CD Vant \u7EC4\u4EF6\u7684 UI\uFF0C\u5E76\u4E0D\u4F1A\u5F71\u54CD\u5168\u5C40\u7684\u6587\u5B57\u989C\u8272\u6216\u80CC\u666F\u989C\u8272\uFF0C\u4F60\u53EF\u4EE5\u53C2\u8003\u4EE5\u4E0B CSS \u6765\u8BBE\u7F6E\u4E00\u4E9B\u5168\u5C40\u6837\u5F0F\uFF1A
\n.van-theme-dark body {\n color: #f5f5f5;\n background-color: black;\n}\n
\n\u901A\u8FC7\u52A8\u6001\u8BBE\u7F6E theme
\u5C5E\u6027\uFF0C\u53EF\u4EE5\u5728\u6D45\u8272\u98CE\u683C\u548C\u6DF1\u8272\u98CE\u683C\u4E4B\u95F4\u8FDB\u884C\u5207\u6362\u3002
<van-config-provider :theme="theme">...</van-config-provider>\n
\nexport default {\n setup() {\n const theme = ref('light');\n\n setTimeout(() => {\n theme.value = 'dark';\n }, 1000);\n\n return { theme };\n },\n};\n
\nVant \u7EC4\u4EF6\u901A\u8FC7\u4E30\u5BCC\u7684 CSS \u53D8\u91CF \u6765\u7EC4\u7EC7\u6837\u5F0F\uFF0C\u901A\u8FC7\u8986\u76D6\u8FD9\u4E9B CSS \u53D8\u91CF\uFF0C\u53EF\u4EE5\u5B9E\u73B0\u5B9A\u5236\u4E3B\u9898\u3001\u52A8\u6001\u5207\u6362\u4E3B\u9898\u7B49\u6548\u679C\u3002
\n\u4EE5 Button \u7EC4\u4EF6\u4E3A\u4F8B\uFF0C\u67E5\u770B\u7EC4\u4EF6\u7684\u6837\u5F0F\uFF0C\u53EF\u4EE5\u770B\u5230 .van-button--primary
\u7C7B\u540D\u4E0A\u5B58\u5728\u4EE5\u4E0B\u53D8\u91CF\uFF1A
.van-button--primary {\n color: var(--van-button-primary-color);\n background-color: var(--van-button-primary-background);\n}\n
\n\u8FD9\u4E9B\u53D8\u91CF\u7684\u9ED8\u8BA4\u503C\u88AB\u5B9A\u4E49\u5728 :root
\u8282\u70B9\u4E0A\uFF0CHTML \u91CC\u7684\u6240\u6709\u5B50\u8282\u70B9\u90FD\u53EF\u4EE5\u8BBF\u95EE\u5230\u8FD9\u4E9B\u53D8\u91CF\uFF1A
:root {\n --van-white: #fff;\n --van-blue: #1989fa;\n --van-button-primary-color: var(--van-white);\n --van-button-primary-background: var(--van-primary-color);\n}\n
\n\u4F60\u53EF\u4EE5\u76F4\u63A5\u5728\u4EE3\u7801\u4E2D\u8986\u76D6\u8FD9\u4E9B CSS \u53D8\u91CF\uFF0CButton \u7EC4\u4EF6\u7684\u6837\u5F0F\u4F1A\u968F\u4E4B\u53D1\u751F\u6539\u53D8\uFF1A
\n/* \u6DFB\u52A0\u8FD9\u6BB5\u6837\u5F0F\u540E\uFF0CPrimary Button \u4F1A\u53D8\u6210\u7EA2\u8272 */\n:root:root {\n --van-button-primary-background: red;\n}\n
\n\n\n\u6CE8\u610F\uFF1A\u4E3A\u4EC0\u4E48\u8981\u5199\u4E24\u4E2A\u91CD\u590D\u7684
\n:root
\uFF1F\u7531\u4E8E vant \u4E2D\u7684\u4E3B\u9898\u53D8\u91CF\u4E5F\u662F\u5728
\n:root
\u4E0B\u58F0\u660E\u7684\uFF0C\u6240\u4EE5\u5728\u6709\u4E9B\u60C5\u51B5\u4E0B\u4F1A\u7531\u4E8E\u4F18\u5148\u7EA7\u7684\u95EE\u9898\u65E0\u6CD5\u6210\u529F\u8986\u76D6\u3002\u901A\u8FC7:root:root
\u53EF\u4EE5\u663E\u5F0F\u5730\u8BA9\u4F60\u6240\u5199\u5185\u5BB9\u7684\u4F18\u5148\u7EA7\u66F4\u9AD8\u4E00\u4E9B\uFF0C\u4ECE\u800C\u786E\u4FDD\u4E3B\u9898\u53D8\u91CF\u7684\u6210\u529F\u8986\u76D6\u3002
ConfigProvider
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u8986\u76D6 CSS \u53D8\u91CF\u7684\u80FD\u529B\uFF0C\u4F60\u9700\u8981\u5728\u6839\u8282\u70B9\u5305\u88F9\u4E00\u4E2A ConfigProvider
\u7EC4\u4EF6\uFF0C\u5E76\u901A\u8FC7 theme-vars
\u5C5E\u6027\u6765\u914D\u7F6E\u4E00\u4E9B\u4E3B\u9898\u53D8\u91CF\u3002
<van-config-provider :theme-vars="themeVars">\n <van-form>\n <van-field name="rate" label="\u8BC4\u5206">\n <template #input>\n <van-rate v-model="rate" />\n </template>\n </van-field>\n <van-field name="slider" label="\u6ED1\u5757">\n <template #input>\n <van-slider v-model="slider" />\n </template>\n </van-field>\n <div style="margin: 16px">\n <van-button round block type="primary" native-type="submit">\n \u63D0\u4EA4\n </van-button>\n </div>\n </van-form>\n</van-config-provider>\n
\nimport { ref, reactive } from 'vue';\n\nexport default {\n setup() {\n const rate = ref(4);\n const slider = ref(50);\n\n // themeVars \u5185\u7684\u503C\u4F1A\u88AB\u8F6C\u6362\u6210\u5BF9\u5E94 CSS \u53D8\u91CF\n // \u6BD4\u5982 sliderBarHeight \u4F1A\u8F6C\u6362\u6210 `--van-slider-bar-height`\n const themeVars = reactive({\n rateIconFullColor: '#07c160',\n sliderBarHeight: '4px',\n sliderButtonWidth: '20px',\n sliderButtonHeight: '20px',\n sliderActiveBackground: '#07c160',\n buttonPrimaryBackground: '#07c160',\n buttonPrimaryBorderColor: '#07c160',\n });\n\n return {\n rate,\n slider,\n themeVars,\n };\n },\n};\n
\n\u9ED8\u8BA4\u60C5\u51B5\u4E0B\uFF0CthemeVars \u4EA7\u751F\u7684 CSS \u53D8\u91CF\u662F\u8BBE\u7F6E\u5728\u7EC4\u4EF6\u6839\u8282\u70B9\u4E0A\u7684\uFF0C\u56E0\u6B64\u53EA\u4F1A\u5F71\u54CD\u5B83\u7684\u5B50\u7EC4\u4EF6\u7684\u6837\u5F0F\uFF0C\u4E0D\u4F1A\u5F71\u54CD\u6574\u4E2A\u9875\u9762\u3002
\n\u4F60\u53EF\u4EE5\u901A\u8FC7 theme-vars-scope
\u5C5E\u6027\u6765\u4FEE\u6539 CSS \u53D8\u91CF\u7684\u751F\u6548\u8303\u56F4\u3002\u6BD4\u5982\u5C06 theme-vars-scope
\u8BBE\u7F6E\u4E3A global
\uFF0C\u6B64\u65F6 themeVars \u4EA7\u751F\u7684 CSS \u53D8\u91CF\u4F1A\u8BBE\u7F6E\u5230 HTML \u7684\u6839\u8282\u70B9\uFF0C\u5E76\u5BF9\u6574\u4E2A\u9875\u9762\u5185\u7684\u6240\u6709\u7EC4\u4EF6\u751F\u6548\u3002
<van-config-provider :theme-vars="themeVars" theme-vars-scope="global">\n ...\n</van-config-provider>\n
\n\u5728 TypeScript \u4E2D\u5B9A\u4E49 themeVars \u65F6\uFF0C\u5EFA\u8BAE\u4F7F\u7528 Vant \u63D0\u4F9B\u7684 ConfigProviderThemeVars
\u7C7B\u578B\uFF0C\u53EF\u4EE5\u63D0\u4F9B\u5B8C\u5584\u7684\u7C7B\u578B\u63D0\u793A\uFF1A
import type { ConfigProviderThemeVars } from 'vant';\n\nconst themeVars: ConfigProviderThemeVars = {\n sliderBarHeight: '4px',\n};\n
\n\u5982\u679C\u9700\u8981\u5355\u72EC\u5B9A\u4E49\u6DF1\u8272\u6A21\u5F0F\u6216\u6D45\u8272\u6A21\u5F0F\u4E0B\u7684 CSS \u53D8\u91CF\uFF0C\u53EF\u4EE5\u4F7F\u7528 theme-vars-dark
\u548C theme-vars-light
\u5C5E\u6027\u3002
theme-vars-dark
: \u4EC5\u5728\u6DF1\u8272\u6A21\u5F0F\u4E0B\u751F\u6548\u7684 CSS \u53D8\u91CF\uFF0C\u4F18\u5148\u7EA7\u9AD8\u4E8E theme-vars
\u4E2D\u5B9A\u4E49\u7684\u53D8\u91CF\u3002theme-vars-light
: \u4EC5\u5728\u6D45\u8272\u6A21\u5F0F\u4E0B\u751F\u6548\u7684 CSS \u53D8\u91CF\uFF0C\u4F18\u5148\u7EA7\u9AD8\u4E8E theme-vars
\u4E2D\u5B9A\u4E49\u7684\u53D8\u91CF\u3002\u4EE5\u4E0B\u65B9\u7684 buttonPrimaryBackground
\u53D8\u91CF\u4E3A\u4F8B, \u5728\u6DF1\u8272\u6A21\u5F0F\u4E0B\u7684\u503C\u4E3A blue
\uFF0C\u5728\u6D45\u8272\u6A21\u5F0F\u4E0B\u7684\u503C\u4E3A green
\u3002
<van-config-provider\n :theme-vars="themeVars"\n :theme-vars-dark="themeVarsDark"\n :theme-vars-light="themeVarsLight"\n>\n ...\n</van-config-provider>\n
\nimport { ref, reactive } from 'vue';\n\nexport default {\n setup() {\n const themeVars = reactive({ buttonPrimaryBackground: 'red' });\n const themeVarsDark = reactive({ buttonPrimaryBackground: 'blue' });\n const themeVarsLight = reactive({ buttonPrimaryBackground: 'green' });\n\n return {\n themeVars,\n themeVarsDark,\n themeVarsLight,\n };\n },\n};\n
\n\u6B64\u5916\uFF0C\u4F60\u4E5F\u53EF\u4EE5\u4F7F\u7528 .van-theme-light
\u548C .van-theme-dark
\u8FD9\u4E24\u4E2A\u7C7B\u540D\u9009\u62E9\u5668\u6765\u5355\u72EC\u4FEE\u6539\u6D45\u8272\u6216\u6DF1\u8272\u6A21\u5F0F\u4E0B\u7684\u57FA\u7840\u53D8\u91CF\u548C\u7EC4\u4EF6\u53D8\u91CF\u3002
.van-theme-light {\n --van-white: white;\n}\n\n.van-theme-dark {\n --van-white: black;\n}\n
\nVant \u4E2D\u7684 CSS \u53D8\u91CF\u5206\u4E3A \u57FA\u7840\u53D8\u91CF \u548C \u7EC4\u4EF6\u53D8\u91CF\u3002\u7EC4\u4EF6\u53D8\u91CF\u4F1A\u7EE7\u627F\u57FA\u7840\u53D8\u91CF\uFF0C\u56E0\u6B64\u5728\u4FEE\u6539\u57FA\u7840\u53D8\u91CF\u540E\uFF0C\u4F1A\u5F71\u54CD\u6240\u6709\u76F8\u5173\u7684\u7EC4\u4EF6\u3002
\nCSS \u53D8\u91CF\u5B58\u5728\u7EE7\u627F\u5173\u7CFB\uFF0C\u7EC4\u4EF6\u53D8\u91CF\u4F1A\u5BFB\u627E\u6700\u8FD1\u7684\u7236\u7EA7\u57FA\u7840\u53D8\u91CF\u8FDB\u884C\u7EE7\u627F\u3002
\n\u56E0\u6B64\u4FEE\u6539\u57FA\u7840\u53D8\u91CF\u5B58\u5728\u4E00\u5B9A\u9650\u5236\uFF0C\u4F60\u9700\u8981\u4F7F\u7528 :root
\u9009\u62E9\u5668\u6216 ConfigProvider \u7EC4\u4EF6\u7684 global \u6A21\u5F0F\u6765\u4FEE\u6539\u57FA\u7840\u53D8\u91CF\u3002\u5426\u5219\uFF0C\u7EC4\u4EF6\u53D8\u91CF\u53EF\u80FD\u4F1A\u65E0\u6CD5\u6B63\u786E\u7EE7\u627F\u57FA\u7840\u53D8\u91CF\u3002
\u4EE5 --van-primary-color
\u8FD9\u4E2A\u57FA\u7840\u53D8\u91CF\u4E3A\u4F8B\uFF1A
:root
\u9009\u62E9\u5668\u4FEE\u6539\uFF1A:root {\n --van-primary-color: red;\n}\n
\n<van-config-provider\n :theme-vars="{ primaryColor: 'red' }"\n theme-vars-scope="global"\n>\n ...\n</van-config-provider>\n
\nlocal
\u6A21\u5F0F\u4FEE\u6539\uFF1A<van-config-provider :theme-vars="{ primaryColor: 'red' }">\n ...\n</van-config-provider>\n
\n\u5BF9\u4E8E\u7EC4\u4EF6\u53D8\u91CF\uFF0C\u5219\u6CA1\u6709\u4E0A\u8FF0\u9650\u5236\uFF0C\u53EF\u4EE5\u901A\u8FC7\u4EFB\u610F\u65B9\u5F0F\u4FEE\u6539\u3002
\n\u4E0B\u9762\u662F\u6240\u6709\u7684\u57FA\u7840\u53D8\u91CF\uFF1A
\n// Color Palette\n--van-black: #000;\n--van-white: #fff;\n--van-gray-1: #f7f8fa;\n--van-gray-2: #f2f3f5;\n--van-gray-3: #ebedf0;\n--van-gray-4: #dcdee0;\n--van-gray-5: #c8c9cc;\n--van-gray-6: #969799;\n--van-gray-7: #646566;\n--van-gray-8: #323233;\n--van-red: #ee0a24;\n--van-blue: #1989fa;\n--van-orange: #ff976a;\n--van-orange-dark: #ed6a0c;\n--van-orange-light: #fffbe8;\n--van-green: #07c160;\n\n// Gradient Colors\n--van-gradient-red: linear-gradient(to right, #ff6034, #ee0a24);\n--van-gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);\n\n// Component Colors\n--van-primary-color: var(--van-blue);\n--van-success-color: var(--van-green);\n--van-danger-color: var(--van-red);\n--van-warning-color: var(--van-orange);\n--van-text-color: var(--van-gray-8);\n--van-text-color-2: var(--van-gray-6);\n--van-text-color-3: var(--van-gray-5);\n--van-active-color: var(--van-gray-2);\n--van-active-opacity: 0.6;\n--van-disabled-opacity: 0.5;\n--van-background: var(--van-gray-1);\n--van-background-2: var(--van-white);\n\n// Padding\n--van-padding-base: 4px;\n--van-padding-xs: 8px;\n--van-padding-sm: 12px;\n--van-padding-md: 16px;\n--van-padding-lg: 24px;\n--van-padding-xl: 32px;\n\n// Font\n--van-font-size-xs: 10px;\n--van-font-size-sm: 12px;\n--van-font-size-md: 14px;\n--van-font-size-lg: 16px;\n--van-font-bold: 600;\n--van-line-height-xs: 14px;\n--van-line-height-sm: 18px;\n--van-line-height-md: 20px;\n--van-line-height-lg: 22px;\n--van-base-font: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,\n Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',\n sans-serif;\n--van-price-font: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif;\n\n// Animation\n--van-duration-base: 0.3s;\n--van-duration-fast: 0.2s;\n--van-ease-out: ease-out;\n--van-ease-in: ease-in;\n\n// Border\n--van-border-color: var(--van-gray-3);\n--van-border-width: 1px;\n--van-radius-sm: 2px;\n--van-radius-md: 4px;\n--van-radius-lg: 8px;\n--van-radius-max: 999px;\n
\n\u4F60\u53EF\u4EE5\u5728\u5404\u4E2A\u7EC4\u4EF6\u6587\u6863\u5E95\u90E8\u7684\u8868\u683C\u4E2D\u67E5\u770B\u7EC4\u4EF6\u53D8\u91CF\u3002
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
theme | \n\u4E3B\u9898\u98CE\u683C\uFF0C\u8BBE\u7F6E\u4E3A dark \u6765\u5F00\u542F\u6DF1\u8272\u6A21\u5F0F\uFF0C\u5168\u5C40\u751F\u6548 | \nConfigProviderTheme | \nlight | \n
theme-vars | \n\u81EA\u5B9A\u4E49\u4E3B\u9898\u53D8\u91CF\uFF0C\u5C40\u90E8\u751F\u6548 | \nobject | \n- | \n
theme-vars-dark | \n\u4EC5\u5728\u6DF1\u8272\u6A21\u5F0F\u4E0B\u751F\u6548\u7684\u4E3B\u9898\u53D8\u91CF\uFF0C\u4F18\u5148\u7EA7\u9AD8\u4E8E theme-vars | \nobject | \n- | \n
theme-vars-light | \n\u4EC5\u5728\u6D45\u8272\u6A21\u5F0F\u4E0B\u751F\u6548\u7684\u4E3B\u9898\u53D8\u91CF\uFF0C\u4F18\u5148\u7EA7\u9AD8\u4E8E theme-vars | \nobject | \n- | \n
theme-vars-scope | \n\u9ED8\u8BA4\u4EC5\u5F71\u54CD\u5B50\u7EC4\u4EF6\u7684\u6837\u5F0F\uFF0C\u8BBE\u7F6E\u4E3A global \u6574\u4E2A\u9875\u9762\u751F\u6548 | \nConfigProviderThemeVarsScope | \nlocal | \n
tag | \n\u6839\u8282\u70B9\u5BF9\u5E94\u7684 HTML \u6807\u7B7E\u540D | \nstring | \ndiv | \n
z-index | \n\u8BBE\u7F6E\u6240\u6709\u5F39\u7A97\u7C7B\u7EC4\u4EF6\u7684 z-index\uFF0C\u8BE5\u5C5E\u6027\u5BF9\u5168\u5C40\u751F\u6548 | \nnumber | \n2000 | \n
icon-prefix | \n\u6240\u6709\u56FE\u6807\u7684\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 | \nstring | \nvan-icon | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n ConfigProviderProps,\n ConfigProviderTheme,\n ConfigProviderThemeVars,\n ConfigProviderThemeVarsScope,\n} from 'vant';\n
\n\u7528\u4E8E\u5168\u5C40\u914D\u7F6E Vant \u7EC4\u4EF6\uFF0C\u63D0\u4F9B\u6DF1\u8272\u6A21\u5F0F\u3001\u4E3B\u9898\u5B9A\u5236\u7B49\u80FD\u529B\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { ConfigProvider } from 'vant';\n\nconst app = createApp();\napp.use(ConfigProvider);\n
\n\u5C06 ConfigProvider \u7EC4\u4EF6\u7684 theme
\u5C5E\u6027\u8BBE\u7F6E\u4E3A dark
\uFF0C\u53EF\u4EE5\u5F00\u542F\u6DF1\u8272\u6A21\u5F0F\u3002
\u6DF1\u8272\u6A21\u5F0F\u4F1A\u5168\u5C40\u751F\u6548\uFF0C\u4F7F\u9875\u9762\u4E0A\u7684\u6240\u6709 Vant \u7EC4\u4EF6\u53D8\u4E3A\u6DF1\u8272\u98CE\u683C\u3002
\n<van-config-provider theme="dark">...</van-config-provider>\n
\n\u503C\u5F97\u6CE8\u610F\u7684\u662F\uFF0C\u5F00\u542F Vant \u7684\u6DF1\u8272\u6A21\u5F0F\u53EA\u4F1A\u5F71\u54CD Vant \u7EC4\u4EF6\u7684 UI\uFF0C\u5E76\u4E0D\u4F1A\u5F71\u54CD\u5168\u5C40\u7684\u6587\u5B57\u989C\u8272\u6216\u80CC\u666F\u989C\u8272\uFF0C\u4F60\u53EF\u4EE5\u53C2\u8003\u4EE5\u4E0B CSS \u6765\u8BBE\u7F6E\u4E00\u4E9B\u5168\u5C40\u6837\u5F0F\uFF1A
\n.van-theme-dark body {\n color: #f5f5f5;\n background-color: black;\n}\n
\n\u901A\u8FC7\u52A8\u6001\u8BBE\u7F6E theme
\u5C5E\u6027\uFF0C\u53EF\u4EE5\u5728\u6D45\u8272\u98CE\u683C\u548C\u6DF1\u8272\u98CE\u683C\u4E4B\u95F4\u8FDB\u884C\u5207\u6362\u3002
<van-config-provider :theme="theme">...</van-config-provider>\n
\nexport default {\n setup() {\n const theme = ref('light');\n\n setTimeout(() => {\n theme.value = 'dark';\n }, 1000);\n\n return { theme };\n },\n};\n
\nVant \u7EC4\u4EF6\u901A\u8FC7\u4E30\u5BCC\u7684 CSS \u53D8\u91CF \u6765\u7EC4\u7EC7\u6837\u5F0F\uFF0C\u901A\u8FC7\u8986\u76D6\u8FD9\u4E9B CSS \u53D8\u91CF\uFF0C\u53EF\u4EE5\u5B9E\u73B0\u5B9A\u5236\u4E3B\u9898\u3001\u52A8\u6001\u5207\u6362\u4E3B\u9898\u7B49\u6548\u679C\u3002
\n\u4EE5 Button \u7EC4\u4EF6\u4E3A\u4F8B\uFF0C\u67E5\u770B\u7EC4\u4EF6\u7684\u6837\u5F0F\uFF0C\u53EF\u4EE5\u770B\u5230 .van-button--primary
\u7C7B\u540D\u4E0A\u5B58\u5728\u4EE5\u4E0B\u53D8\u91CF\uFF1A
.van-button--primary {\n color: var(--van-button-primary-color);\n background-color: var(--van-button-primary-background);\n}\n
\n\u8FD9\u4E9B\u53D8\u91CF\u7684\u9ED8\u8BA4\u503C\u88AB\u5B9A\u4E49\u5728 :root
\u8282\u70B9\u4E0A\uFF0CHTML \u91CC\u7684\u6240\u6709\u5B50\u8282\u70B9\u90FD\u53EF\u4EE5\u8BBF\u95EE\u5230\u8FD9\u4E9B\u53D8\u91CF\uFF1A
:root {\n --van-white: #fff;\n --van-blue: #1989fa;\n --van-button-primary-color: var(--van-white);\n --van-button-primary-background: var(--van-primary-color);\n}\n
\n\u4F60\u53EF\u4EE5\u76F4\u63A5\u5728\u4EE3\u7801\u4E2D\u8986\u76D6\u8FD9\u4E9B CSS \u53D8\u91CF\uFF0CButton \u7EC4\u4EF6\u7684\u6837\u5F0F\u4F1A\u968F\u4E4B\u53D1\u751F\u6539\u53D8\uFF1A
\n/* \u6DFB\u52A0\u8FD9\u6BB5\u6837\u5F0F\u540E\uFF0CPrimary Button \u4F1A\u53D8\u6210\u7EA2\u8272 */\n:root:root {\n --van-button-primary-background: red;\n}\n
\n\n\n\u6CE8\u610F\uFF1A\u4E3A\u4EC0\u4E48\u8981\u5199\u4E24\u4E2A\u91CD\u590D\u7684
\n:root
\uFF1F\u7531\u4E8E vant \u4E2D\u7684\u4E3B\u9898\u53D8\u91CF\u4E5F\u662F\u5728
\n:root
\u4E0B\u58F0\u660E\u7684\uFF0C\u6240\u4EE5\u5728\u6709\u4E9B\u60C5\u51B5\u4E0B\u4F1A\u7531\u4E8E\u4F18\u5148\u7EA7\u7684\u95EE\u9898\u65E0\u6CD5\u6210\u529F\u8986\u76D6\u3002\u901A\u8FC7:root:root
\u53EF\u4EE5\u663E\u5F0F\u5730\u8BA9\u4F60\u6240\u5199\u5185\u5BB9\u7684\u4F18\u5148\u7EA7\u66F4\u9AD8\u4E00\u4E9B\uFF0C\u4ECE\u800C\u786E\u4FDD\u4E3B\u9898\u53D8\u91CF\u7684\u6210\u529F\u8986\u76D6\u3002
ConfigProvider
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u8986\u76D6 CSS \u53D8\u91CF\u7684\u80FD\u529B\uFF0C\u4F60\u9700\u8981\u5728\u6839\u8282\u70B9\u5305\u88F9\u4E00\u4E2A ConfigProvider
\u7EC4\u4EF6\uFF0C\u5E76\u901A\u8FC7 theme-vars
\u5C5E\u6027\u6765\u914D\u7F6E\u4E00\u4E9B\u4E3B\u9898\u53D8\u91CF\u3002
<van-config-provider :theme-vars="themeVars">\n <van-form>\n <van-field name="rate" label="\u8BC4\u5206">\n <template #input>\n <van-rate v-model="rate" />\n </template>\n </van-field>\n <van-field name="slider" label="\u6ED1\u5757">\n <template #input>\n <van-slider v-model="slider" />\n </template>\n </van-field>\n <div style="margin: 16px">\n <van-button round block type="primary" native-type="submit">\n \u63D0\u4EA4\n </van-button>\n </div>\n </van-form>\n</van-config-provider>\n
\nimport { ref, reactive } from 'vue';\n\nexport default {\n setup() {\n const rate = ref(4);\n const slider = ref(50);\n\n // themeVars \u5185\u7684\u503C\u4F1A\u88AB\u8F6C\u6362\u6210\u5BF9\u5E94 CSS \u53D8\u91CF\n // \u6BD4\u5982 sliderBarHeight \u4F1A\u8F6C\u6362\u6210 `--van-slider-bar-height`\n const themeVars = reactive({\n rateIconFullColor: '#07c160',\n sliderBarHeight: '4px',\n sliderButtonWidth: '20px',\n sliderButtonHeight: '20px',\n sliderActiveBackground: '#07c160',\n buttonPrimaryBackground: '#07c160',\n buttonPrimaryBorderColor: '#07c160',\n });\n\n return {\n rate,\n slider,\n themeVars,\n };\n },\n};\n
\n\u9ED8\u8BA4\u60C5\u51B5\u4E0B\uFF0CthemeVars \u4EA7\u751F\u7684 CSS \u53D8\u91CF\u662F\u8BBE\u7F6E\u5728\u7EC4\u4EF6\u6839\u8282\u70B9\u4E0A\u7684\uFF0C\u56E0\u6B64\u53EA\u4F1A\u5F71\u54CD\u5B83\u7684\u5B50\u7EC4\u4EF6\u7684\u6837\u5F0F\uFF0C\u4E0D\u4F1A\u5F71\u54CD\u6574\u4E2A\u9875\u9762\u3002
\n\u4F60\u53EF\u4EE5\u901A\u8FC7 theme-vars-scope
\u5C5E\u6027\u6765\u4FEE\u6539 CSS \u53D8\u91CF\u7684\u751F\u6548\u8303\u56F4\u3002\u6BD4\u5982\u5C06 theme-vars-scope
\u8BBE\u7F6E\u4E3A global
\uFF0C\u6B64\u65F6 themeVars \u4EA7\u751F\u7684 CSS \u53D8\u91CF\u4F1A\u8BBE\u7F6E\u5230 HTML \u7684\u6839\u8282\u70B9\uFF0C\u5E76\u5BF9\u6574\u4E2A\u9875\u9762\u5185\u7684\u6240\u6709\u7EC4\u4EF6\u751F\u6548\u3002
<van-config-provider :theme-vars="themeVars" theme-vars-scope="global">\n ...\n</van-config-provider>\n
\n\u5728 TypeScript \u4E2D\u5B9A\u4E49 themeVars \u65F6\uFF0C\u5EFA\u8BAE\u4F7F\u7528 Vant \u63D0\u4F9B\u7684 ConfigProviderThemeVars
\u7C7B\u578B\uFF0C\u53EF\u4EE5\u63D0\u4F9B\u5B8C\u5584\u7684\u7C7B\u578B\u63D0\u793A\uFF1A
import type { ConfigProviderThemeVars } from 'vant';\n\nconst themeVars: ConfigProviderThemeVars = {\n sliderBarHeight: '4px',\n};\n
\n\u5982\u679C\u9700\u8981\u5355\u72EC\u5B9A\u4E49\u6DF1\u8272\u6A21\u5F0F\u6216\u6D45\u8272\u6A21\u5F0F\u4E0B\u7684 CSS \u53D8\u91CF\uFF0C\u53EF\u4EE5\u4F7F\u7528 theme-vars-dark
\u548C theme-vars-light
\u5C5E\u6027\u3002
theme-vars-dark
: \u4EC5\u5728\u6DF1\u8272\u6A21\u5F0F\u4E0B\u751F\u6548\u7684 CSS \u53D8\u91CF\uFF0C\u4F18\u5148\u7EA7\u9AD8\u4E8E theme-vars
\u4E2D\u5B9A\u4E49\u7684\u53D8\u91CF\u3002theme-vars-light
: \u4EC5\u5728\u6D45\u8272\u6A21\u5F0F\u4E0B\u751F\u6548\u7684 CSS \u53D8\u91CF\uFF0C\u4F18\u5148\u7EA7\u9AD8\u4E8E theme-vars
\u4E2D\u5B9A\u4E49\u7684\u53D8\u91CF\u3002\u4EE5\u4E0B\u65B9\u7684 buttonPrimaryBackground
\u53D8\u91CF\u4E3A\u4F8B, \u5728\u6DF1\u8272\u6A21\u5F0F\u4E0B\u7684\u503C\u4E3A blue
\uFF0C\u5728\u6D45\u8272\u6A21\u5F0F\u4E0B\u7684\u503C\u4E3A green
\u3002
<van-config-provider\n :theme-vars="themeVars"\n :theme-vars-dark="themeVarsDark"\n :theme-vars-light="themeVarsLight"\n>\n ...\n</van-config-provider>\n
\nimport { ref, reactive } from 'vue';\n\nexport default {\n setup() {\n const themeVars = reactive({ buttonPrimaryBackground: 'red' });\n const themeVarsDark = reactive({ buttonPrimaryBackground: 'blue' });\n const themeVarsLight = reactive({ buttonPrimaryBackground: 'green' });\n\n return {\n themeVars,\n themeVarsDark,\n themeVarsLight,\n };\n },\n};\n
\n\u6B64\u5916\uFF0C\u4F60\u4E5F\u53EF\u4EE5\u4F7F\u7528 .van-theme-light
\u548C .van-theme-dark
\u8FD9\u4E24\u4E2A\u7C7B\u540D\u9009\u62E9\u5668\u6765\u5355\u72EC\u4FEE\u6539\u6D45\u8272\u6216\u6DF1\u8272\u6A21\u5F0F\u4E0B\u7684\u57FA\u7840\u53D8\u91CF\u548C\u7EC4\u4EF6\u53D8\u91CF\u3002
.van-theme-light {\n --van-white: white;\n}\n\n.van-theme-dark {\n --van-white: black;\n}\n
\nVant \u4E2D\u7684 CSS \u53D8\u91CF\u5206\u4E3A \u57FA\u7840\u53D8\u91CF \u548C \u7EC4\u4EF6\u53D8\u91CF\u3002\u7EC4\u4EF6\u53D8\u91CF\u4F1A\u7EE7\u627F\u57FA\u7840\u53D8\u91CF\uFF0C\u56E0\u6B64\u5728\u4FEE\u6539\u57FA\u7840\u53D8\u91CF\u540E\uFF0C\u4F1A\u5F71\u54CD\u6240\u6709\u76F8\u5173\u7684\u7EC4\u4EF6\u3002
\nCSS \u53D8\u91CF\u5B58\u5728\u7EE7\u627F\u5173\u7CFB\uFF0C\u7EC4\u4EF6\u53D8\u91CF\u4F1A\u5BFB\u627E\u6700\u8FD1\u7684\u7236\u7EA7\u57FA\u7840\u53D8\u91CF\u8FDB\u884C\u7EE7\u627F\u3002
\n\u56E0\u6B64\u4FEE\u6539\u57FA\u7840\u53D8\u91CF\u5B58\u5728\u4E00\u5B9A\u9650\u5236\uFF0C\u4F60\u9700\u8981\u4F7F\u7528 :root
\u9009\u62E9\u5668\u6216 ConfigProvider \u7EC4\u4EF6\u7684 global \u6A21\u5F0F\u6765\u4FEE\u6539\u57FA\u7840\u53D8\u91CF\u3002\u5426\u5219\uFF0C\u7EC4\u4EF6\u53D8\u91CF\u53EF\u80FD\u4F1A\u65E0\u6CD5\u6B63\u786E\u7EE7\u627F\u57FA\u7840\u53D8\u91CF\u3002
\u4EE5 --van-primary-color
\u8FD9\u4E2A\u57FA\u7840\u53D8\u91CF\u4E3A\u4F8B\uFF1A
:root
\u9009\u62E9\u5668\u4FEE\u6539\uFF1A:root {\n --van-primary-color: red;\n}\n
\n<van-config-provider\n :theme-vars="{ primaryColor: 'red' }"\n theme-vars-scope="global"\n>\n ...\n</van-config-provider>\n
\nlocal
\u6A21\u5F0F\u4FEE\u6539\uFF1A<van-config-provider :theme-vars="{ primaryColor: 'red' }">\n ...\n</van-config-provider>\n
\n\u5BF9\u4E8E\u7EC4\u4EF6\u53D8\u91CF\uFF0C\u5219\u6CA1\u6709\u4E0A\u8FF0\u9650\u5236\uFF0C\u53EF\u4EE5\u901A\u8FC7\u4EFB\u610F\u65B9\u5F0F\u4FEE\u6539\u3002
\n\u4E0B\u9762\u662F\u6240\u6709\u7684\u57FA\u7840\u53D8\u91CF\uFF1A
\n// Color Palette\n--van-black: #000;\n--van-white: #fff;\n--van-gray-1: #f7f8fa;\n--van-gray-2: #f2f3f5;\n--van-gray-3: #ebedf0;\n--van-gray-4: #dcdee0;\n--van-gray-5: #c8c9cc;\n--van-gray-6: #969799;\n--van-gray-7: #646566;\n--van-gray-8: #323233;\n--van-red: #ee0a24;\n--van-blue: #1989fa;\n--van-orange: #ff976a;\n--van-orange-dark: #ed6a0c;\n--van-orange-light: #fffbe8;\n--van-green: #07c160;\n\n// Gradient Colors\n--van-gradient-red: linear-gradient(to right, #ff6034, #ee0a24);\n--van-gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);\n\n// Component Colors\n--van-primary-color: var(--van-blue);\n--van-success-color: var(--van-green);\n--van-danger-color: var(--van-red);\n--van-warning-color: var(--van-orange);\n--van-text-color: var(--van-gray-8);\n--van-text-color-2: var(--van-gray-6);\n--van-text-color-3: var(--van-gray-5);\n--van-active-color: var(--van-gray-2);\n--van-active-opacity: 0.6;\n--van-disabled-opacity: 0.5;\n--van-background: var(--van-gray-1);\n--van-background-2: var(--van-white);\n\n// Padding\n--van-padding-base: 4px;\n--van-padding-xs: 8px;\n--van-padding-sm: 12px;\n--van-padding-md: 16px;\n--van-padding-lg: 24px;\n--van-padding-xl: 32px;\n\n// Font\n--van-font-size-xs: 10px;\n--van-font-size-sm: 12px;\n--van-font-size-md: 14px;\n--van-font-size-lg: 16px;\n--van-font-bold: 600;\n--van-line-height-xs: 14px;\n--van-line-height-sm: 18px;\n--van-line-height-md: 20px;\n--van-line-height-lg: 22px;\n--van-base-font: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,\n Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',\n sans-serif;\n--van-price-font: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif;\n\n// Animation\n--van-duration-base: 0.3s;\n--van-duration-fast: 0.2s;\n--van-ease-out: ease-out;\n--van-ease-in: ease-in;\n\n// Border\n--van-border-color: var(--van-gray-3);\n--van-border-width: 1px;\n--van-radius-sm: 2px;\n--van-radius-md: 4px;\n--van-radius-lg: 8px;\n--van-radius-max: 999px;\n
\n\u4F60\u53EF\u4EE5\u5728\u5404\u4E2A\u7EC4\u4EF6\u6587\u6863\u5E95\u90E8\u7684\u8868\u683C\u4E2D\u67E5\u770B\u7EC4\u4EF6\u53D8\u91CF\u3002
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
theme | \n\u4E3B\u9898\u98CE\u683C\uFF0C\u8BBE\u7F6E\u4E3A dark \u6765\u5F00\u542F\u6DF1\u8272\u6A21\u5F0F\uFF0C\u5168\u5C40\u751F\u6548 | \nConfigProviderTheme | \nlight | \n
theme-vars | \n\u81EA\u5B9A\u4E49\u4E3B\u9898\u53D8\u91CF\uFF0C\u5C40\u90E8\u751F\u6548 | \nobject | \n- | \n
theme-vars-dark | \n\u4EC5\u5728\u6DF1\u8272\u6A21\u5F0F\u4E0B\u751F\u6548\u7684\u4E3B\u9898\u53D8\u91CF\uFF0C\u4F18\u5148\u7EA7\u9AD8\u4E8E theme-vars | \nobject | \n- | \n
theme-vars-light | \n\u4EC5\u5728\u6D45\u8272\u6A21\u5F0F\u4E0B\u751F\u6548\u7684\u4E3B\u9898\u53D8\u91CF\uFF0C\u4F18\u5148\u7EA7\u9AD8\u4E8E theme-vars | \nobject | \n- | \n
theme-vars-scope | \n\u9ED8\u8BA4\u4EC5\u5F71\u54CD\u5B50\u7EC4\u4EF6\u7684\u6837\u5F0F\uFF0C\u8BBE\u7F6E\u4E3A global \u6574\u4E2A\u9875\u9762\u751F\u6548 | \nConfigProviderThemeVarsScope | \nlocal | \n
tag | \n\u6839\u8282\u70B9\u5BF9\u5E94\u7684 HTML \u6807\u7B7E\u540D | \nstring | \ndiv | \n
z-index | \n\u8BBE\u7F6E\u6240\u6709\u5F39\u7A97\u7C7B\u7EC4\u4EF6\u7684 z-index\uFF0C\u8BE5\u5C5E\u6027\u5BF9\u5168\u5C40\u751F\u6548 | \nnumber | \n2000 | \n
icon-prefix | \n\u6240\u6709\u56FE\u6807\u7684\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 | \nstring | \nvan-icon | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n ConfigProviderProps,\n ConfigProviderTheme,\n ConfigProviderThemeVars,\n ConfigProviderThemeVarsScope,\n} from 'vant';\n
\n\u6ED1\u52A8\u8F93\u5165\u6761\uFF0C\u7528\u4E8E\u5728\u7ED9\u5B9A\u7684\u8303\u56F4\u5185\u9009\u62E9\u4E00\u4E2A\u503C\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Slider } from 'vant';\n\nconst app = createApp();\napp.use(Slider);\n
\n<van-slider v-model="value" @change="onChange" />\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const value = ref(50);\n const onChange = (value) => showToast('\u5F53\u524D\u503C\uFF1A' + value);\n return {\n value,\n onChange,\n };\n },\n};\n
\n\u6DFB\u52A0 range
\u5C5E\u6027\u5C31\u53EF\u4EE5\u5F00\u542F\u53CC\u6ED1\u5757\u6A21\u5F0F\uFF0C\u786E\u4FDD value
\u7684\u503C\u662F\u4E00\u4E2A\u6570\u7EC4\u3002
<van-slider v-model="value" range @change="onChange" />\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n // \u53CC\u6ED1\u5757\u6A21\u5F0F\u65F6\uFF0C\u503C\u5FC5\u987B\u662F\u6570\u7EC4\n const value = ref([10, 50]);\n const onChange = (value) => showToast('\u5F53\u524D\u503C\uFF1A' + value);\n return {\n value,\n onChange,\n };\n },\n};\n
\n<van-slider v-model="value" :min="-50" :max="50" />\n
\n<van-slider v-model="value" disabled />\n
\n<van-slider v-model="value" :step="10" />\n
\n<van-slider v-model="value" bar-height="4px" active-color="#ee0a24" />\n
\n<van-slider v-model="value">\n <template #button>\n <div class="custom-button">{{ value }}</div>\n </template>\n</van-slider>\n\n<style>\n .custom-button {\n width: 26px;\n color: #fff;\n font-size: 10px;\n line-height: 18px;\n text-align: center;\n background-color: var(--van-primary-color);\n border-radius: 100px;\n }\n</style>\n
\n\u8BBE\u7F6E vertical
\u5C5E\u6027\u540E\uFF0C\u6ED1\u5757\u4F1A\u5782\u76F4\u5C55\u793A\uFF0C\u4E14\u9AD8\u5EA6\u4E3A 100% \u7236\u5143\u7D20\u9AD8\u5EA6\u3002
<div :style="{ height: '150px' }">\n <van-slider v-model="value" vertical @change="onChange" />\n <van-slider\n v-model="value2"\n range\n vertical\n style="margin-left: 100px;"\n @change="onChange"\n />\n</div>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const value = ref(50);\n const value2 = ref([10, 50]);\n const onChange = (value) => showToast('\u5F53\u524D\u503C\uFF1A' + value);\n return {\n value,\n value2,\n onChange,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u8FDB\u5EA6\u767E\u5206\u6BD4\uFF0C\u5728\u53CC\u6ED1\u5757\u6A21\u5F0F\u4E0B\u4E3A\u6570\u7EC4\u683C\u5F0F | \nnumber | [number, number] | \n0 | \n
max | \n\u6700\u5927\u503C | \nnumber | string | \n100 | \n
min | \n\u6700\u5C0F\u503C | \nnumber | string | \n0 | \n
step | \n\u6B65\u957F | \nnumber | string | \n1 | \n
bar-height | \n\u8FDB\u5EA6\u6761\u9AD8\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n2px | \n
button-size | \n\u6ED1\u5757\u6309\u94AE\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n24px | \n
active-color | \n\u8FDB\u5EA6\u6761\u6FC0\u6D3B\u6001\u989C\u8272 | \nstring | \n#1989fa | \n
inactive-color | \n\u8FDB\u5EA6\u6761\u975E\u6FC0\u6D3B\u6001\u989C\u8272 | \nstring | \n#e5e5e5 | \n
range | \n\u662F\u5426\u5F00\u542F\u53CC\u6ED1\u5757\u6A21\u5F0F | \nboolean | \nfalse | \n
reverse | \n\u662F\u5426\u5C06\u8FDB\u5EA6\u6761\u53CD\u8F6C | \nboolean | \nfalse | \n
disabled | \n\u662F\u5426\u7981\u7528\u6ED1\u5757 | \nboolean | \nfalse | \n
readonly | \n\u662F\u5426\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u53EA\u8BFB\u72B6\u6001\u4E0B\u65E0\u6CD5\u4FEE\u6539\u6ED1\u5757\u7684\u503C | \nboolean | \nfalse | \n
vertical | \n\u662F\u5426\u5782\u76F4\u5C55\u793A | \nboolean | \nfalse | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
update:model-value | \n\u8FDB\u5EA6\u53D8\u5316\u65F6\u5B9E\u65F6\u89E6\u53D1 | \nvalue: number | \n
change | \n\u8FDB\u5EA6\u53D8\u5316\u4E14\u7ED3\u675F\u62D6\u52A8\u540E\u89E6\u53D1 | \nvalue: number | \n
drag-start | \n\u5F00\u59CB\u62D6\u52A8\u65F6\u89E6\u53D1 | \nevent: TouchEvent | \n
drag-end | \n\u7ED3\u675F\u62D6\u52A8\u65F6\u89E6\u53D1 | \nevent: TouchEvent | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
button | \n\u81EA\u5B9A\u4E49\u6ED1\u5757\u6309\u94AE | \n{ value: number, dragging: boolean } | \n
left-button | \n\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u6ED1\u5757\u6309\u94AE\uFF08\u53CC\u6ED1\u5757\u6A21\u5F0F\u4E0B\uFF09 | \n{ value: number, dragging: boolean, dragIndex?: number } | \n
right-button | \n\u81EA\u5B9A\u4E49\u53F3\u4FA7\u6ED1\u5757\u6309\u94AE\uFF08\u53CC\u6ED1\u5757\u6A21\u5F0F\u4E0B\uFF09 | \n{ value: number, dragging: boolean, dragIndex?: number } | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { SliderProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-slider-active-background | \nvar(--van-primary-color) | \n- | \n
--van-slider-inactive-background | \nvar(--van-gray-3) | \n- | \n
--van-slider-disabled-opacity | \nvar(--van-disabled-opacity) | \n- | \n
--van-slider-bar-height | \n2px | \n- | \n
--van-slider-button-width | \n24px | \n- | \n
--van-slider-button-height | \n24px | \n- | \n
--van-slider-button-radius | \n50% | \n- | \n
--van-slider-button-background | \nvar(--van-white) | \n- | \n
--van-slider-button-shadow | \n0 1px 2px rgba(0, 0, 0, 0.5) | \n- | \n
\u6ED1\u52A8\u8F93\u5165\u6761\uFF0C\u7528\u4E8E\u5728\u7ED9\u5B9A\u7684\u8303\u56F4\u5185\u9009\u62E9\u4E00\u4E2A\u503C\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Slider } from 'vant';\n\nconst app = createApp();\napp.use(Slider);\n
\n<van-slider v-model="value" @change="onChange" />\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const value = ref(50);\n const onChange = (value) => showToast('\u5F53\u524D\u503C\uFF1A' + value);\n return {\n value,\n onChange,\n };\n },\n};\n
\n\u6DFB\u52A0 range
\u5C5E\u6027\u5C31\u53EF\u4EE5\u5F00\u542F\u53CC\u6ED1\u5757\u6A21\u5F0F\uFF0C\u786E\u4FDD value
\u7684\u503C\u662F\u4E00\u4E2A\u6570\u7EC4\u3002
<van-slider v-model="value" range @change="onChange" />\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n // \u53CC\u6ED1\u5757\u6A21\u5F0F\u65F6\uFF0C\u503C\u5FC5\u987B\u662F\u6570\u7EC4\n const value = ref([10, 50]);\n const onChange = (value) => showToast('\u5F53\u524D\u503C\uFF1A' + value);\n return {\n value,\n onChange,\n };\n },\n};\n
\n<van-slider v-model="value" :min="-50" :max="50" />\n
\n<van-slider v-model="value" disabled />\n
\n<van-slider v-model="value" :step="10" />\n
\n<van-slider v-model="value" bar-height="4px" active-color="#ee0a24" />\n
\n<van-slider v-model="value">\n <template #button>\n <div class="custom-button">{{ value }}</div>\n </template>\n</van-slider>\n\n<style>\n .custom-button {\n width: 26px;\n color: #fff;\n font-size: 10px;\n line-height: 18px;\n text-align: center;\n background-color: var(--van-primary-color);\n border-radius: 100px;\n }\n</style>\n
\n\u8BBE\u7F6E vertical
\u5C5E\u6027\u540E\uFF0C\u6ED1\u5757\u4F1A\u5782\u76F4\u5C55\u793A\uFF0C\u4E14\u9AD8\u5EA6\u4E3A 100% \u7236\u5143\u7D20\u9AD8\u5EA6\u3002
<div :style="{ height: '150px' }">\n <van-slider v-model="value" vertical @change="onChange" />\n <van-slider\n v-model="value2"\n range\n vertical\n style="margin-left: 100px;"\n @change="onChange"\n />\n</div>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const value = ref(50);\n const value2 = ref([10, 50]);\n const onChange = (value) => showToast('\u5F53\u524D\u503C\uFF1A' + value);\n return {\n value,\n value2,\n onChange,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u8FDB\u5EA6\u767E\u5206\u6BD4\uFF0C\u5728\u53CC\u6ED1\u5757\u6A21\u5F0F\u4E0B\u4E3A\u6570\u7EC4\u683C\u5F0F | \nnumber | [number, number] | \n0 | \n
max | \n\u6700\u5927\u503C | \nnumber | string | \n100 | \n
min | \n\u6700\u5C0F\u503C | \nnumber | string | \n0 | \n
step | \n\u6B65\u957F | \nnumber | string | \n1 | \n
bar-height | \n\u8FDB\u5EA6\u6761\u9AD8\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n2px | \n
button-size | \n\u6ED1\u5757\u6309\u94AE\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n24px | \n
active-color | \n\u8FDB\u5EA6\u6761\u6FC0\u6D3B\u6001\u989C\u8272 | \nstring | \n#1989fa | \n
inactive-color | \n\u8FDB\u5EA6\u6761\u975E\u6FC0\u6D3B\u6001\u989C\u8272 | \nstring | \n#e5e5e5 | \n
range | \n\u662F\u5426\u5F00\u542F\u53CC\u6ED1\u5757\u6A21\u5F0F | \nboolean | \nfalse | \n
reverse | \n\u662F\u5426\u5C06\u8FDB\u5EA6\u6761\u53CD\u8F6C | \nboolean | \nfalse | \n
disabled | \n\u662F\u5426\u7981\u7528\u6ED1\u5757 | \nboolean | \nfalse | \n
readonly | \n\u662F\u5426\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u53EA\u8BFB\u72B6\u6001\u4E0B\u65E0\u6CD5\u4FEE\u6539\u6ED1\u5757\u7684\u503C | \nboolean | \nfalse | \n
vertical | \n\u662F\u5426\u5782\u76F4\u5C55\u793A | \nboolean | \nfalse | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
update:model-value | \n\u8FDB\u5EA6\u53D8\u5316\u65F6\u5B9E\u65F6\u89E6\u53D1 | \nvalue: number | \n
change | \n\u8FDB\u5EA6\u53D8\u5316\u4E14\u7ED3\u675F\u62D6\u52A8\u540E\u89E6\u53D1 | \nvalue: number | \n
drag-start | \n\u5F00\u59CB\u62D6\u52A8\u65F6\u89E6\u53D1 | \nevent: TouchEvent | \n
drag-end | \n\u7ED3\u675F\u62D6\u52A8\u65F6\u89E6\u53D1 | \nevent: TouchEvent | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
button | \n\u81EA\u5B9A\u4E49\u6ED1\u5757\u6309\u94AE | \n{ value: number, dragging: boolean } | \n
left-button | \n\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u6ED1\u5757\u6309\u94AE\uFF08\u53CC\u6ED1\u5757\u6A21\u5F0F\u4E0B\uFF09 | \n{ value: number, dragging: boolean, dragIndex?: number } | \n
right-button | \n\u81EA\u5B9A\u4E49\u53F3\u4FA7\u6ED1\u5757\u6309\u94AE\uFF08\u53CC\u6ED1\u5757\u6A21\u5F0F\u4E0B\uFF09 | \n{ value: number, dragging: boolean, dragIndex?: number } | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { SliderProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-slider-active-background | \nvar(--van-primary-color) | \n- | \n
--van-slider-inactive-background | \nvar(--van-gray-3) | \n- | \n
--van-slider-disabled-opacity | \nvar(--van-disabled-opacity) | \n- | \n
--van-slider-bar-height | \n2px | \n- | \n
--van-slider-button-width | \n24px | \n- | \n
--van-slider-button-height | \n24px | \n- | \n
--van-slider-button-radius | \n50% | \n- | \n
--van-slider-button-background | \nvar(--van-white) | \n- | \n
--van-slider-button-shadow | \n0 1px 2px rgba(0, 0, 0, 0.5) | \n- | \n
\u5F39\u51FA\u5F0F\u7684\u6C14\u6CE1\u83DC\u5355\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Popover } from 'vant';\n\nconst app = createApp();\napp.use(Popover);\n
\n\u5F53 Popover \u5F39\u51FA\u65F6\uFF0C\u4F1A\u57FA\u4E8E reference
\u63D2\u69FD\u7684\u5185\u5BB9\u8FDB\u884C\u5B9A\u4F4D\u3002
<van-popover v-model:show="showPopover" :actions="actions" @select="onSelect">\n <template #reference>\n <van-button type="primary">\u6D45\u8272\u98CE\u683C</van-button>\n </template>\n</van-popover>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const showPopover = ref(false);\n\n // \u901A\u8FC7 actions \u5C5E\u6027\u6765\u5B9A\u4E49\u83DC\u5355\u9009\u9879\n const actions = [\n { text: '\u9009\u9879\u4E00' },\n { text: '\u9009\u9879\u4E8C' },\n { text: '\u9009\u9879\u4E09' },\n ];\n const onSelect = (action) => showToast(action.text);\n\n return {\n actions,\n onSelect,\n showPopover,\n };\n },\n};\n
\nPopover \u652F\u6301\u6D45\u8272\u548C\u6DF1\u8272\u4E24\u79CD\u98CE\u683C\uFF0C\u9ED8\u8BA4\u4E3A\u6D45\u8272\u98CE\u683C\uFF0C\u5C06 theme
\u5C5E\u6027\u8BBE\u7F6E\u4E3A dark
\u53EF\u5207\u6362\u4E3A\u6DF1\u8272\u98CE\u683C\u3002
<van-popover v-model:show="showPopover" theme="dark" :actions="actions">\n <template #reference>\n <van-button type="primary">\u6DF1\u8272\u98CE\u683C</van-button>\n </template>\n</van-popover>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showPopover = ref(false);\n const actions = [\n { text: '\u9009\u9879\u4E00' },\n { text: '\u9009\u9879\u4E8C' },\n { text: '\u9009\u9879\u4E09' },\n ];\n\n return {\n actions,\n showPopover,\n };\n },\n};\n
\n\u5C06 actions-direction
\u5C5E\u6027\u8BBE\u7F6E\u4E3A horizontal
\u540E\uFF0C\u83DC\u5355\u9009\u9879\u4F1A\u53D8\u6210\u6C34\u5E73\u6392\u5217\u3002
<van-popover\n v-model:show="showPopover"\n :actions="actions"\n actions-direction="horizontal"\n>\n <template #reference>\n <van-button type="primary">\u6C34\u5E73\u6392\u5217</van-button>\n </template>\n</van-popover>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showPopover = ref(false);\n const actions = [\n { text: '\u9009\u9879\u4E00' },\n { text: '\u9009\u9879\u4E8C' },\n { text: '\u9009\u9879\u4E09' },\n ];\n\n return {\n actions,\n showPopover,\n };\n },\n};\n
\n\u901A\u8FC7 placement
\u5C5E\u6027\u6765\u63A7\u5236\u6C14\u6CE1\u7684\u5F39\u51FA\u4F4D\u7F6E\u3002
<van-popover placement="top" />\n
\nplacement
\u652F\u6301\u4EE5\u4E0B\u503C\uFF1A
top # \u9876\u90E8\u4E2D\u95F4\u4F4D\u7F6E\ntop-start # \u9876\u90E8\u5DE6\u4FA7\u4F4D\u7F6E\ntop-end # \u9876\u90E8\u53F3\u4FA7\u4F4D\u7F6E\nleft # \u5DE6\u4FA7\u4E2D\u95F4\u4F4D\u7F6E\nleft-start # \u5DE6\u4FA7\u4E0A\u65B9\u4F4D\u7F6E\nleft-end # \u5DE6\u4FA7\u4E0B\u65B9\u4F4D\u7F6E\nright # \u53F3\u4FA7\u4E2D\u95F4\u4F4D\u7F6E\nright-start # \u53F3\u4FA7\u4E0A\u65B9\u4F4D\u7F6E\nright-end # \u53F3\u4FA7\u4E0B\u65B9\u4F4D\u7F6E\nbottom # \u5E95\u90E8\u4E2D\u95F4\u4F4D\u7F6E\nbottom-start # \u5E95\u90E8\u5DE6\u4FA7\u4F4D\u7F6E\nbottom-end # \u5E95\u90E8\u53F3\u4FA7\u4F4D\u7F6E\n
\n\u5728 actions
\u6570\u7EC4\u4E2D\uFF0C\u53EF\u4EE5\u901A\u8FC7 icon
\u5B57\u6BB5\u6765\u5B9A\u4E49\u9009\u9879\u7684\u56FE\u6807\uFF0C\u652F\u6301\u4F20\u5165\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027\u3002
<van-popover v-model:show="showPopover" :actions="actions">\n <template #reference>\n <van-button type="primary">\u5C55\u793A\u56FE\u6807</van-button>\n </template>\n</van-popover>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showPopover = ref(false);\n const actions = [\n { text: '\u9009\u9879\u4E00', icon: 'add-o' },\n { text: '\u9009\u9879\u4E8C', icon: 'music-o' },\n { text: '\u9009\u9879\u4E09', icon: 'more-o' },\n ];\n\n return {\n actions,\n showPopover,\n };\n },\n};\n
\n\u5728 actions
\u6570\u7EC4\u4E2D\uFF0C\u53EF\u4EE5\u901A\u8FC7 disabled
\u5B57\u6BB5\u6765\u7981\u7528\u67D0\u4E2A\u9009\u9879\u3002
<van-popover v-model:show="showPopover" :actions="actions">\n <template #reference>\n <van-button type="primary">\u7981\u7528\u9009\u9879</van-button>\n </template>\n</van-popover>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showPopover = ref(false);\n const actions = [\n { text: '\u9009\u9879\u4E00', disabled: true },\n { text: '\u9009\u9879\u4E8C', disabled: true },\n { text: '\u9009\u9879\u4E09' },\n ];\n\n return {\n actions,\n showPopover,\n };\n },\n};\n
\n\u901A\u8FC7\u9ED8\u8BA4\u63D2\u69FD\uFF0C\u53EF\u4EE5\u5728 Popover \u5185\u90E8\u653E\u7F6E\u4EFB\u610F\u5185\u5BB9\u3002
\n<van-popover v-model:show="showPopover">\n <van-grid\n square\n clickable\n :border="false"\n column-num="3"\n style="width: 240px;"\n >\n <van-grid-item\n v-for="i in 6"\n :key="i"\n text="\u9009\u9879"\n icon="photo-o"\n @click="showPopover = false"\n />\n </van-grid>\n <template #reference>\n <van-button type="primary">\u81EA\u5B9A\u4E49\u5185\u5BB9</van-button>\n </template>\n</van-popover>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showPopover = ref(false);\n return { showPopover };\n },\n};\n
\n\u4F60\u53EF\u4EE5\u628A Popover \u5F53\u505A\u53D7\u63A7\u7EC4\u4EF6\u6216\u975E\u53D7\u63A7\u7EC4\u4EF6\u4F7F\u7528\uFF1A
\nv-model:show
\u65F6\uFF0CPopover \u4E3A\u53D7\u63A7\u7EC4\u4EF6\uFF0C\u6B64\u65F6\u7EC4\u4EF6\u7684\u663E\u793A\u5B8C\u5168\u7531 v-model:show
\u7684\u503C\u51B3\u5B9A\u3002v-model:show
\u65F6\uFF0CPopover \u4E3A\u975E\u53D7\u63A7\u7EC4\u4EF6\uFF0C\u6B64\u65F6\u4F60\u53EF\u4EE5\u901A\u8FC7 show
\u5C5E\u6027\u4F20\u5165\u4E00\u4E2A\u9ED8\u8BA4\u503C\uFF0C\u7EC4\u4EF6\u503C\u7684\u663E\u793A\u7531\u7EC4\u4EF6\u81EA\u8EAB\u63A7\u5236\u3002<van-popover :actions="actions" position="top-start" @select="onSelect">\n <template #reference>\n <van-button type="primary">\u975E\u53D7\u63A7\u6A21\u5F0F</van-button>\n </template>\n</van-popover>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const actions = [\n { text: '\u9009\u9879\u4E00' },\n { text: '\u9009\u9879\u4E8C' },\n { text: '\u9009\u9879\u4E09' },\n ];\n const onSelect = (action) => showToast(action.text);\n return {\n actions,\n onSelect,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:show | \n\u662F\u5426\u5C55\u793A\u6C14\u6CE1\u5F39\u51FA\u5C42 | \nboolean | \nfalse | \n
actions | \n\u9009\u9879\u5217\u8868 | \nPopoverAction[] | \n[] | \n
actions-direction v4.4.1 | \n\u9009\u9879\u5217\u8868\u7684\u6392\u5217\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A horizontal | \nPopoverActionsDirection | \nvertical | \n
placement | \n\u5F39\u51FA\u4F4D\u7F6E | \nPopoverPlacement | \nbottom | \n
theme | \n\u4E3B\u9898\u98CE\u683C\uFF0C\u53EF\u9009\u503C\u4E3A dark | \nPopoverTheme | \nlight | \n
trigger | \n\u89E6\u53D1\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A manual | \nPopoverTrigger | \nclick | \n
duration | \n\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u79D2\uFF0C\u8BBE\u7F6E\u4E3A 0 \u53EF\u4EE5\u7981\u7528\u52A8\u753B | \nnumber | string | \n0.3 | \n
offset | \n\u51FA\u73B0\u4F4D\u7F6E\u7684\u504F\u79FB\u91CF | \n[number, number] | \n[0, 8] | \n
overlay | \n\u662F\u5426\u663E\u793A\u906E\u7F69\u5C42 | \nboolean | \nfalse | \n
overlay-class | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u7C7B\u540D | \nstring | Array | object | \n- | \n
overlay-style | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0F | \nobject | \n- | \n
show-arrow | \n\u662F\u5426\u5C55\u793A\u5C0F\u7BAD\u5934 | \nboolean | \ntrue | \n
close-on-click-action | \n\u662F\u5426\u5728\u70B9\u51FB\u9009\u9879\u540E\u5173\u95ED | \nboolean | \ntrue | \n
close-on-click-outside | \n\u662F\u5426\u5728\u70B9\u51FB\u5916\u90E8\u5143\u7D20\u540E\u5173\u95ED\u83DC\u5355 | \nboolean | \ntrue | \n
close-on-click-overlay | \n\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED\u83DC\u5355 | \nboolean | \ntrue | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \nbody | \n
icon-prefix | \n\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 | \nstring | \nvan-icon | \n
actions
\u5C5E\u6027\u662F\u4E00\u4E2A\u7531\u5BF9\u8C61\u6784\u6210\u7684\u6570\u7EC4\uFF0C\u6570\u7EC4\u4E2D\u7684\u6BCF\u4E2A\u5BF9\u8C61\u914D\u7F6E\u4E00\u5217\uFF0C\u5BF9\u8C61\u53EF\u4EE5\u5305\u542B\u4EE5\u4E0B\u503C\uFF1A
\u952E\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
text | \n\u9009\u9879\u6587\u5B57 | \nstring | \n
icon | \n\u6587\u5B57\u5DE6\u4FA7\u7684\u56FE\u6807\uFF0C\u652F\u6301\u4F20\u5165\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n
color | \n\u9009\u9879\u6587\u5B57\u989C\u8272 | \nstring | \n
disabled | \n\u662F\u5426\u4E3A\u7981\u7528\u72B6\u6001 | \nboolean | \n
className | \n\u4E3A\u5BF9\u5E94\u9009\u9879\u6DFB\u52A0\u989D\u5916\u7684\u7C7B\u540D | \nstring | Array | object | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
select | \n\u70B9\u51FB\u9009\u9879\u65F6\u89E6\u53D1 | \naction: PopoverAction, index: number | \n
open | \n\u6253\u5F00\u83DC\u5355\u65F6\u89E6\u53D1 | \n- | \n
close | \n\u5173\u95ED\u83DC\u5355\u65F6\u89E6\u53D1 | \n- | \n
opened | \n\u6253\u5F00\u83DC\u5355\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
closed | \n\u5173\u95ED\u83DC\u5355\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
click-overlay | \n\u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
default | \n\u81EA\u5B9A\u4E49\u83DC\u5355\u5185\u5BB9 | \n- | \n
reference | \n\u89E6\u53D1 Popover \u663E\u793A\u7684\u5143\u7D20\u5185\u5BB9 | \n- | \n
action | \n\u81EA\u5B9A\u4E49\u9009\u9879\u5185\u5BB9 | \n{ action: PopoverAction, index: number } | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n PopoverProps,\n PopoverTheme,\n PopoverAction,\n PopoverActionsDirection,\n PopoverTrigger,\n PopoverPlacement,\n} from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-popover-arrow-size | \n6px | \n- | \n
--van-popover-radius | \nvar(--van-radius-lg) | \n- | \n
--van-popover-action-width | \n128px | \n- | \n
--van-popover-action-height | \n44px | \n- | \n
--van-popover-action-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-popover-action-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-popover-action-icon-size | \n20px | \n- | \n
--van-popover-horizontal-action-height | \n34px | \n- | \n
--van-popover-horizontal-action-icon-size | \n16px | \n- | \n
--van-popover-light-text-color | \nvar(--van-text-color) | \n- | \n
--van-popover-light-background | \nvar(--van-background-2) | \n- | \n
--van-popover-light-action-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-popover-dark-text-color | \nvar(--van-white) | \n- | \n
--van-popover-dark-background | \n#4a4a4a | \n- | \n
--van-popover-dark-action-disabled-text-color | \nvar(--van-text-color-2) | \n- | \n
\u8FD9\u79CD\u60C5\u51B5\u901A\u5E38\u662F\u7531\u4E8E\u9879\u76EE\u4E2D\u5F15\u5165\u4E86 fastclick
\u5E93\u5BFC\u81F4\u7684\u3002\u5EFA\u8BAE\u79FB\u9664 fastclick
\uFF0C\u6216\u8005\u914D\u7F6E fastclick
\u7684 ignore \u89C4\u5219\u3002
\u5F39\u51FA\u5F0F\u7684\u6C14\u6CE1\u83DC\u5355\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Popover } from 'vant';\n\nconst app = createApp();\napp.use(Popover);\n
\n\u5F53 Popover \u5F39\u51FA\u65F6\uFF0C\u4F1A\u57FA\u4E8E reference
\u63D2\u69FD\u7684\u5185\u5BB9\u8FDB\u884C\u5B9A\u4F4D\u3002
<van-popover v-model:show="showPopover" :actions="actions" @select="onSelect">\n <template #reference>\n <van-button type="primary">\u6D45\u8272\u98CE\u683C</van-button>\n </template>\n</van-popover>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const showPopover = ref(false);\n\n // \u901A\u8FC7 actions \u5C5E\u6027\u6765\u5B9A\u4E49\u83DC\u5355\u9009\u9879\n const actions = [\n { text: '\u9009\u9879\u4E00' },\n { text: '\u9009\u9879\u4E8C' },\n { text: '\u9009\u9879\u4E09' },\n ];\n const onSelect = (action) => showToast(action.text);\n\n return {\n actions,\n onSelect,\n showPopover,\n };\n },\n};\n
\nPopover \u652F\u6301\u6D45\u8272\u548C\u6DF1\u8272\u4E24\u79CD\u98CE\u683C\uFF0C\u9ED8\u8BA4\u4E3A\u6D45\u8272\u98CE\u683C\uFF0C\u5C06 theme
\u5C5E\u6027\u8BBE\u7F6E\u4E3A dark
\u53EF\u5207\u6362\u4E3A\u6DF1\u8272\u98CE\u683C\u3002
<van-popover v-model:show="showPopover" theme="dark" :actions="actions">\n <template #reference>\n <van-button type="primary">\u6DF1\u8272\u98CE\u683C</van-button>\n </template>\n</van-popover>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showPopover = ref(false);\n const actions = [\n { text: '\u9009\u9879\u4E00' },\n { text: '\u9009\u9879\u4E8C' },\n { text: '\u9009\u9879\u4E09' },\n ];\n\n return {\n actions,\n showPopover,\n };\n },\n};\n
\n\u5C06 actions-direction
\u5C5E\u6027\u8BBE\u7F6E\u4E3A horizontal
\u540E\uFF0C\u83DC\u5355\u9009\u9879\u4F1A\u53D8\u6210\u6C34\u5E73\u6392\u5217\u3002
<van-popover\n v-model:show="showPopover"\n :actions="actions"\n actions-direction="horizontal"\n>\n <template #reference>\n <van-button type="primary">\u6C34\u5E73\u6392\u5217</van-button>\n </template>\n</van-popover>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showPopover = ref(false);\n const actions = [\n { text: '\u9009\u9879\u4E00' },\n { text: '\u9009\u9879\u4E8C' },\n { text: '\u9009\u9879\u4E09' },\n ];\n\n return {\n actions,\n showPopover,\n };\n },\n};\n
\n\u901A\u8FC7 placement
\u5C5E\u6027\u6765\u63A7\u5236\u6C14\u6CE1\u7684\u5F39\u51FA\u4F4D\u7F6E\u3002
<van-popover placement="top" />\n
\nplacement
\u652F\u6301\u4EE5\u4E0B\u503C\uFF1A
top # \u9876\u90E8\u4E2D\u95F4\u4F4D\u7F6E\ntop-start # \u9876\u90E8\u5DE6\u4FA7\u4F4D\u7F6E\ntop-end # \u9876\u90E8\u53F3\u4FA7\u4F4D\u7F6E\nleft # \u5DE6\u4FA7\u4E2D\u95F4\u4F4D\u7F6E\nleft-start # \u5DE6\u4FA7\u4E0A\u65B9\u4F4D\u7F6E\nleft-end # \u5DE6\u4FA7\u4E0B\u65B9\u4F4D\u7F6E\nright # \u53F3\u4FA7\u4E2D\u95F4\u4F4D\u7F6E\nright-start # \u53F3\u4FA7\u4E0A\u65B9\u4F4D\u7F6E\nright-end # \u53F3\u4FA7\u4E0B\u65B9\u4F4D\u7F6E\nbottom # \u5E95\u90E8\u4E2D\u95F4\u4F4D\u7F6E\nbottom-start # \u5E95\u90E8\u5DE6\u4FA7\u4F4D\u7F6E\nbottom-end # \u5E95\u90E8\u53F3\u4FA7\u4F4D\u7F6E\n
\n\u5728 actions
\u6570\u7EC4\u4E2D\uFF0C\u53EF\u4EE5\u901A\u8FC7 icon
\u5B57\u6BB5\u6765\u5B9A\u4E49\u9009\u9879\u7684\u56FE\u6807\uFF0C\u652F\u6301\u4F20\u5165\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027\u3002
<van-popover v-model:show="showPopover" :actions="actions">\n <template #reference>\n <van-button type="primary">\u5C55\u793A\u56FE\u6807</van-button>\n </template>\n</van-popover>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showPopover = ref(false);\n const actions = [\n { text: '\u9009\u9879\u4E00', icon: 'add-o' },\n { text: '\u9009\u9879\u4E8C', icon: 'music-o' },\n { text: '\u9009\u9879\u4E09', icon: 'more-o' },\n ];\n\n return {\n actions,\n showPopover,\n };\n },\n};\n
\n\u5728 actions
\u6570\u7EC4\u4E2D\uFF0C\u53EF\u4EE5\u901A\u8FC7 disabled
\u5B57\u6BB5\u6765\u7981\u7528\u67D0\u4E2A\u9009\u9879\u3002
<van-popover v-model:show="showPopover" :actions="actions">\n <template #reference>\n <van-button type="primary">\u7981\u7528\u9009\u9879</van-button>\n </template>\n</van-popover>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showPopover = ref(false);\n const actions = [\n { text: '\u9009\u9879\u4E00', disabled: true },\n { text: '\u9009\u9879\u4E8C', disabled: true },\n { text: '\u9009\u9879\u4E09' },\n ];\n\n return {\n actions,\n showPopover,\n };\n },\n};\n
\n\u901A\u8FC7\u9ED8\u8BA4\u63D2\u69FD\uFF0C\u53EF\u4EE5\u5728 Popover \u5185\u90E8\u653E\u7F6E\u4EFB\u610F\u5185\u5BB9\u3002
\n<van-popover v-model:show="showPopover">\n <van-grid\n square\n clickable\n :border="false"\n column-num="3"\n style="width: 240px;"\n >\n <van-grid-item\n v-for="i in 6"\n :key="i"\n text="\u9009\u9879"\n icon="photo-o"\n @click="showPopover = false"\n />\n </van-grid>\n <template #reference>\n <van-button type="primary">\u81EA\u5B9A\u4E49\u5185\u5BB9</van-button>\n </template>\n</van-popover>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showPopover = ref(false);\n return { showPopover };\n },\n};\n
\n\u4F60\u53EF\u4EE5\u628A Popover \u5F53\u505A\u53D7\u63A7\u7EC4\u4EF6\u6216\u975E\u53D7\u63A7\u7EC4\u4EF6\u4F7F\u7528\uFF1A
\nv-model:show
\u65F6\uFF0CPopover \u4E3A\u53D7\u63A7\u7EC4\u4EF6\uFF0C\u6B64\u65F6\u7EC4\u4EF6\u7684\u663E\u793A\u5B8C\u5168\u7531 v-model:show
\u7684\u503C\u51B3\u5B9A\u3002v-model:show
\u65F6\uFF0CPopover \u4E3A\u975E\u53D7\u63A7\u7EC4\u4EF6\uFF0C\u6B64\u65F6\u4F60\u53EF\u4EE5\u901A\u8FC7 show
\u5C5E\u6027\u4F20\u5165\u4E00\u4E2A\u9ED8\u8BA4\u503C\uFF0C\u7EC4\u4EF6\u503C\u7684\u663E\u793A\u7531\u7EC4\u4EF6\u81EA\u8EAB\u63A7\u5236\u3002<van-popover :actions="actions" position="top-start" @select="onSelect">\n <template #reference>\n <van-button type="primary">\u975E\u53D7\u63A7\u6A21\u5F0F</van-button>\n </template>\n</van-popover>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const actions = [\n { text: '\u9009\u9879\u4E00' },\n { text: '\u9009\u9879\u4E8C' },\n { text: '\u9009\u9879\u4E09' },\n ];\n const onSelect = (action) => showToast(action.text);\n return {\n actions,\n onSelect,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:show | \n\u662F\u5426\u5C55\u793A\u6C14\u6CE1\u5F39\u51FA\u5C42 | \nboolean | \nfalse | \n
actions | \n\u9009\u9879\u5217\u8868 | \nPopoverAction[] | \n[] | \n
actions-direction v4.4.1 | \n\u9009\u9879\u5217\u8868\u7684\u6392\u5217\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A horizontal | \nPopoverActionsDirection | \nvertical | \n
placement | \n\u5F39\u51FA\u4F4D\u7F6E | \nPopoverPlacement | \nbottom | \n
theme | \n\u4E3B\u9898\u98CE\u683C\uFF0C\u53EF\u9009\u503C\u4E3A dark | \nPopoverTheme | \nlight | \n
trigger | \n\u89E6\u53D1\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A manual | \nPopoverTrigger | \nclick | \n
duration | \n\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u79D2\uFF0C\u8BBE\u7F6E\u4E3A 0 \u53EF\u4EE5\u7981\u7528\u52A8\u753B | \nnumber | string | \n0.3 | \n
offset | \n\u51FA\u73B0\u4F4D\u7F6E\u7684\u504F\u79FB\u91CF | \n[number, number] | \n[0, 8] | \n
overlay | \n\u662F\u5426\u663E\u793A\u906E\u7F69\u5C42 | \nboolean | \nfalse | \n
overlay-class | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u7C7B\u540D | \nstring | Array | object | \n- | \n
overlay-style | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0F | \nobject | \n- | \n
show-arrow | \n\u662F\u5426\u5C55\u793A\u5C0F\u7BAD\u5934 | \nboolean | \ntrue | \n
close-on-click-action | \n\u662F\u5426\u5728\u70B9\u51FB\u9009\u9879\u540E\u5173\u95ED | \nboolean | \ntrue | \n
close-on-click-outside | \n\u662F\u5426\u5728\u70B9\u51FB\u5916\u90E8\u5143\u7D20\u540E\u5173\u95ED\u83DC\u5355 | \nboolean | \ntrue | \n
close-on-click-overlay | \n\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED\u83DC\u5355 | \nboolean | \ntrue | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \nbody | \n
icon-prefix | \n\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 | \nstring | \nvan-icon | \n
actions
\u5C5E\u6027\u662F\u4E00\u4E2A\u7531\u5BF9\u8C61\u6784\u6210\u7684\u6570\u7EC4\uFF0C\u6570\u7EC4\u4E2D\u7684\u6BCF\u4E2A\u5BF9\u8C61\u914D\u7F6E\u4E00\u5217\uFF0C\u5BF9\u8C61\u53EF\u4EE5\u5305\u542B\u4EE5\u4E0B\u503C\uFF1A
\u952E\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
text | \n\u9009\u9879\u6587\u5B57 | \nstring | \n
icon | \n\u6587\u5B57\u5DE6\u4FA7\u7684\u56FE\u6807\uFF0C\u652F\u6301\u4F20\u5165\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n
color | \n\u9009\u9879\u6587\u5B57\u989C\u8272 | \nstring | \n
disabled | \n\u662F\u5426\u4E3A\u7981\u7528\u72B6\u6001 | \nboolean | \n
className | \n\u4E3A\u5BF9\u5E94\u9009\u9879\u6DFB\u52A0\u989D\u5916\u7684\u7C7B\u540D | \nstring | Array | object | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
select | \n\u70B9\u51FB\u9009\u9879\u65F6\u89E6\u53D1 | \naction: PopoverAction, index: number | \n
open | \n\u6253\u5F00\u83DC\u5355\u65F6\u89E6\u53D1 | \n- | \n
close | \n\u5173\u95ED\u83DC\u5355\u65F6\u89E6\u53D1 | \n- | \n
opened | \n\u6253\u5F00\u83DC\u5355\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
closed | \n\u5173\u95ED\u83DC\u5355\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
click-overlay | \n\u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
default | \n\u81EA\u5B9A\u4E49\u83DC\u5355\u5185\u5BB9 | \n- | \n
reference | \n\u89E6\u53D1 Popover \u663E\u793A\u7684\u5143\u7D20\u5185\u5BB9 | \n- | \n
action | \n\u81EA\u5B9A\u4E49\u9009\u9879\u5185\u5BB9 | \n{ action: PopoverAction, index: number } | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n PopoverProps,\n PopoverTheme,\n PopoverAction,\n PopoverActionsDirection,\n PopoverTrigger,\n PopoverPlacement,\n} from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-popover-arrow-size | \n6px | \n- | \n
--van-popover-radius | \nvar(--van-radius-lg) | \n- | \n
--van-popover-action-width | \n128px | \n- | \n
--van-popover-action-height | \n44px | \n- | \n
--van-popover-action-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-popover-action-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-popover-action-icon-size | \n20px | \n- | \n
--van-popover-horizontal-action-height | \n34px | \n- | \n
--van-popover-horizontal-action-icon-size | \n16px | \n- | \n
--van-popover-light-text-color | \nvar(--van-text-color) | \n- | \n
--van-popover-light-background | \nvar(--van-background-2) | \n- | \n
--van-popover-light-action-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-popover-dark-text-color | \nvar(--van-white) | \n- | \n
--van-popover-dark-background | \n#4a4a4a | \n- | \n
--van-popover-dark-action-disabled-text-color | \nvar(--van-text-color-2) | \n- | \n
\u8FD9\u79CD\u60C5\u51B5\u901A\u5E38\u662F\u7531\u4E8E\u9879\u76EE\u4E2D\u5F15\u5165\u4E86 fastclick
\u5E93\u5BFC\u81F4\u7684\u3002\u5EFA\u8BAE\u79FB\u9664 fastclick
\uFF0C\u6216\u8005\u914D\u7F6E fastclick
\u7684 ignore \u89C4\u5219\u3002
\u63D0\u4F9B\u591A\u4E2A\u9009\u9879\u96C6\u5408\u4F9B\u7528\u6237\u9009\u62E9\uFF0C\u652F\u6301\u5355\u5217\u9009\u62E9\u3001\u591A\u5217\u9009\u62E9\u548C\u7EA7\u8054\u9009\u62E9\uFF0C\u901A\u5E38\u4E0E\u5F39\u51FA\u5C42\u7EC4\u4EF6\u914D\u5408\u4F7F\u7528\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Picker } from 'vant';\n\nconst app = createApp();\napp.use(Picker);\n
\nPicker \u7EC4\u4EF6\u901A\u8FC7 columns
\u5C5E\u6027\u914D\u7F6E\u9009\u9879\u6570\u636E\uFF0Ccolumns
\u662F\u4E00\u4E2A\u5305\u542B\u5B57\u7B26\u4E32\u6216\u5BF9\u8C61\u7684\u6570\u7EC4\u3002
\u9876\u90E8\u680F\u5305\u542B\u6807\u9898\u3001\u786E\u8BA4\u6309\u94AE\u548C\u53D6\u6D88\u6309\u94AE\uFF0C\u70B9\u51FB\u786E\u8BA4\u6309\u94AE\u89E6\u53D1 confirm
\u4E8B\u4EF6\uFF0C\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u89E6\u53D1 cancel
\u4E8B\u4EF6\u3002
<van-picker\n title="\u6807\u9898"\n :columns="columns"\n @confirm="onConfirm"\n @cancel="onCancel"\n @change="onChange"\n/>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const columns = [\n { text: '\u676D\u5DDE', value: 'Hangzhou' },\n { text: '\u5B81\u6CE2', value: 'Ningbo' },\n { text: '\u6E29\u5DDE', value: 'Wenzhou' },\n { text: '\u7ECD\u5174', value: 'Shaoxing' },\n { text: '\u6E56\u5DDE', value: 'Huzhou' },\n ];\n const onConfirm = ({ selectedValues }) => {\n showToast(`\u5F53\u524D\u503C: ${selectedValues.join(',')}`);\n };\n const onChange = ({ selectedValues }) => {\n showToast(`\u5F53\u524D\u503C: ${selectedValues.join(',')}`);\n };\n const onCancel = () => showToast('\u53D6\u6D88');\n\n return {\n columns,\n onChange,\n onCancel,\n onConfirm,\n };\n },\n};\n
\n\u5728\u5B9E\u9645\u573A\u666F\u4E2D\uFF0CPicker \u901A\u5E38\u4F5C\u4E3A\u7528\u4E8E\u8F85\u52A9\u8868\u5355\u586B\u5199\uFF0C\u53EF\u4EE5\u642D\u914D Popup \u548C Field \u5B9E\u73B0\u8BE5\u6548\u679C\u3002
\n<van-field\n v-model="fieldValue"\n is-link\n readonly\n label="\u57CE\u5E02"\n placeholder="\u9009\u62E9\u57CE\u5E02"\n @click="showPicker = true"\n/>\n<van-popup v-model:show="showPicker" round position="bottom">\n <van-picker\n :columns="columns"\n @cancel="showPicker = false"\n @confirm="onConfirm"\n />\n</van-popup>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const columns = [\n { text: '\u676D\u5DDE', value: 'Hangzhou' },\n { text: '\u5B81\u6CE2', value: 'Ningbo' },\n { text: '\u6E29\u5DDE', value: 'Wenzhou' },\n { text: '\u7ECD\u5174', value: 'Shaoxing' },\n { text: '\u6E56\u5DDE', value: 'Huzhou' },\n ];\n const fieldValue = ref('');\n const showPicker = ref(false);\n\n const onConfirm = ({ selectedOptions }) => {\n showPicker.value = false;\n fieldValue.value = selectedOptions[0].text;\n };\n\n return {\n columns,\n onConfirm,\n fieldValue,\n showPicker,\n };\n },\n};\n
\n\u901A\u8FC7 v-model
\u53EF\u4EE5\u7ED1\u5B9A\u5F53\u524D\u9009\u4E2D\u9879\u7684 values
\uFF0C\u4FEE\u6539 v-model
\u7ED1\u5B9A\u7684\u503C\u65F6\uFF0CPicker \u7684\u9009\u4E2D\u72B6\u6001\u4E5F\u4F1A\u968F\u4E4B\u6539\u53D8\u3002
v-model
\u7684\u503C\u662F\u4E00\u4E2A\u6570\u7EC4\uFF0C\u6570\u7EC4\u7684\u7B2C\u4E00\u4F4D\u5BF9\u5E94\u7B2C\u4E00\u5217\u9009\u4E2D\u9879\u7684 value
\uFF0C\u7B2C\u4E8C\u4F4D\u5BF9\u5E94\u7B2C\u4E8C\u5217\u9009\u4E2D\u9879\u7684 value
\uFF0C\u4EE5\u6B64\u7C7B\u63A8\u3002
<van-picker v-model="selectedValues" title="\u6807\u9898" :columns="columns" />\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const columns = [\n { text: '\u676D\u5DDE', value: 'Hangzhou' },\n { text: '\u5B81\u6CE2', value: 'Ningbo' },\n { text: '\u6E29\u5DDE', value: 'Wenzhou' },\n { text: '\u7ECD\u5174', value: 'Shaoxing' },\n { text: '\u6E56\u5DDE', value: 'Huzhou' },\n ];\n const selectedValues = ref(['Wenzhou']);\n\n return {\n columns,\n selectedValues,\n };\n },\n};\n
\ncolumns
\u5C5E\u6027\u53EF\u4EE5\u901A\u8FC7\u4E8C\u7EF4\u6570\u7EC4\u7684\u5F62\u5F0F\u914D\u7F6E\u591A\u5217\u9009\u62E9\u3002
<van-picker title="\u6807\u9898" :columns="columns" />\n
\nexport default {\n setup() {\n const columns = [\n // \u7B2C\u4E00\u5217\n [\n { text: '\u5468\u4E00', value: 'Monday' },\n { text: '\u5468\u4E8C', value: 'Tuesday' },\n { text: '\u5468\u4E09', value: 'Wednesday' },\n { text: '\u5468\u56DB', value: 'Thursday' },\n { text: '\u5468\u4E94', value: 'Friday' },\n ],\n // \u7B2C\u4E8C\u5217\n [\n { text: '\u4E0A\u5348', value: 'Morning' },\n { text: '\u4E0B\u5348', value: 'Afternoon' },\n { text: '\u665A\u4E0A', value: 'Evening' },\n ],\n ];\n\n return { columns };\n },\n};\n
\n\u4F7F\u7528 columns
\u7684 children
\u5B57\u6BB5\u53EF\u4EE5\u5B9E\u73B0\u9009\u9879\u7EA7\u8054\u7684\u6548\u679C\u3002\u5982\u679C\u7EA7\u8054\u5C42\u7EA7\u8F83\u591A\uFF0C\u63A8\u8350\u4F7F\u7528 Cascader \u7EA7\u8054\u9009\u9879\u7EC4\u4EF6\u3002
<van-picker title="\u6807\u9898" :columns="columns" />\n
\nexport default {\n setup() {\n const columns = [\n {\n text: '\u6D59\u6C5F',\n value: 'Zhejiang',\n children: [\n {\n text: '\u676D\u5DDE',\n value: 'Hangzhou',\n children: [\n { text: '\u897F\u6E56\u533A', value: 'Xihu' },\n { text: '\u4F59\u676D\u533A', value: 'Yuhang' },\n ],\n },\n {\n text: '\u6E29\u5DDE',\n value: 'Wenzhou',\n children: [\n { text: '\u9E7F\u57CE\u533A', value: 'Lucheng' },\n { text: '\u74EF\u6D77\u533A', value: 'Ouhai' },\n ],\n },\n ],\n },\n {\n text: '\u798F\u5EFA',\n value: 'Fujian',\n children: [\n {\n text: '\u798F\u5DDE',\n value: 'Fuzhou',\n children: [\n { text: '\u9F13\u697C\u533A', value: 'Gulou' },\n { text: '\u53F0\u6C5F\u533A', value: 'Taijiang' },\n ],\n },\n {\n text: '\u53A6\u95E8',\n value: 'Xiamen',\n children: [\n { text: '\u601D\u660E\u533A', value: 'Siming' },\n { text: '\u6D77\u6CA7\u533A', value: 'Haicang' },\n ],\n },\n ],\n },\n ];\n\n return { columns };\n },\n};\n
\n\n\n\u7EA7\u8054\u9009\u62E9\u7684\u6570\u636E\u5D4C\u5957\u6DF1\u5EA6\u9700\u8981\u4FDD\u6301\u4E00\u81F4\uFF0C\u5982\u679C\u90E8\u5206\u9009\u9879\u6CA1\u6709\u5B50\u9009\u9879\uFF0C\u53EF\u4EE5\u4F7F\u7528\u7A7A\u5B57\u7B26\u4E32\u8FDB\u884C\u5360\u4F4D\u3002
\n
\u9009\u9879\u53EF\u4EE5\u4E3A\u5BF9\u8C61\u7ED3\u6784\uFF0C\u901A\u8FC7\u8BBE\u7F6E disabled
\u6765\u7981\u7528\u8BE5\u9009\u9879\u3002
<van-picker :columns="columns" />\n
\nexport default {\n setup() {\n const columns = [\n { text: '\u676D\u5DDE', value: 'Hangzhou', disabled: true },\n { text: '\u5B81\u6CE2', value: 'Ningbo' },\n { text: '\u6E29\u5DDE', value: 'Wenzhou' },\n ];\n return { columns };\n },\n};\n
\n\u82E5\u9009\u62E9\u5668\u6570\u636E\u662F\u5F02\u6B65\u83B7\u53D6\u7684\uFF0C\u53EF\u4EE5\u901A\u8FC7 loading
\u5C5E\u6027\u663E\u793A\u52A0\u8F7D\u63D0\u793A\u3002
<van-picker :columns="columns" :loading="loading" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const columns = ref([]);\n const loading = ref(true);\n\n setTimeout(() => {\n columns.value = [{ text: '\u9009\u9879', value: 'option' }];\n loading.value = false;\n }, 1000);\n\n return { columns, loading };\n },\n};\n
\n<van-picker\n :title="\u6807\u9898"\n :columns="columns"\n :columns-field-names="customFieldName"\n/>\n
\nexport default {\n setup() {\n const columns = [\n {\n cityName: '\u6D59\u6C5F',\n cities: [\n {\n cityName: '\u676D\u5DDE',\n cities: [{ cityName: '\u897F\u6E56\u533A' }, { cityName: '\u4F59\u676D\u533A' }],\n },\n {\n cityName: '\u6E29\u5DDE',\n cities: [{ cityName: '\u9E7F\u57CE\u533A' }, { cityName: '\u74EF\u6D77\u533A' }],\n },\n ],\n },\n {\n cityName: '\u798F\u5EFA',\n cities: [\n {\n cityName: '\u798F\u5DDE',\n cities: [{ cityName: '\u9F13\u697C\u533A' }, { cityName: '\u53F0\u6C5F\u533A' }],\n },\n {\n cityName: '\u53A6\u95E8',\n cities: [{ cityName: '\u601D\u660E\u533A' }, { cityName: '\u6D77\u6CA7\u533A' }],\n },\n ],\n },\n ];\n\n const customFieldName = {\n text: 'cityName',\n value: 'cityName',\n children: 'cities',\n };\n\n return {\n columns,\n customFieldName,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u9009\u4E2D\u9879\u5BF9\u5E94\u7684\u503C | \nnumber[] | string[] | \n- | \n
columns | \n\u5BF9\u8C61\u6570\u7EC4\uFF0C\u914D\u7F6E\u6BCF\u4E00\u5217\u663E\u793A\u7684\u6570\u636E | \nPickerOption[] | PickerOption[][] | \n[] | \n
columns-field-names | \n\u81EA\u5B9A\u4E49 columns \u7ED3\u6784\u4E2D\u7684\u5B57\u6BB5 | \nobject | \n{ text: \'text\', value: \'value\', children: \'children\' } | \n
title | \n\u9876\u90E8\u680F\u6807\u9898 | \nstring | \n- | \n
confirm-button-text | \n\u786E\u8BA4\u6309\u94AE\u6587\u5B57 | \nstring | \n\u786E\u8BA4 | \n
cancel-button-text | \n\u53D6\u6D88\u6309\u94AE\u6587\u5B57 | \nstring | \n\u53D6\u6D88 | \n
toolbar-position | \n\u9876\u90E8\u680F\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A bottom | \nstring | \ntop | \n
loading | \n\u662F\u5426\u663E\u793A\u52A0\u8F7D\u72B6\u6001 | \nboolean | \nfalse | \n
readonly | \n\u662F\u5426\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u53EA\u8BFB\u72B6\u6001\u4E0B\u65E0\u6CD5\u5207\u6362\u9009\u9879 | \nboolean | \nfalse | \n
show-toolbar | \n\u662F\u5426\u663E\u793A\u9876\u90E8\u680F | \nboolean | \ntrue | \n
allow-html | \n\u662F\u5426\u5141\u8BB8\u9009\u9879\u5185\u5BB9\u4E2D\u6E32\u67D3 HTML | \nboolean | \nfalse | \n
option-height | \n\u9009\u9879\u9AD8\u5EA6\uFF0C\u652F\u6301 px vw vh rem \u5355\u4F4D\uFF0C\u9ED8\u8BA4 px | \nnumber | string | \n44 | \n
visible-option-num | \n\u53EF\u89C1\u7684\u9009\u9879\u4E2A\u6570 | \nnumber | string | \n6 | \n
swipe-duration | \n\u5FEB\u901F\u6ED1\u52A8\u65F6\u60EF\u6027\u6EDA\u52A8\u7684\u65F6\u957F\uFF0C\u5355\u4F4D ms | \nnumber | string | \n1000 | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
confirm | \n\u70B9\u51FB\u5B8C\u6210\u6309\u94AE\u65F6\u89E6\u53D1 | \n{ selectedValues, selectedOptions, selectedIndexes } | \n
cancel | \n\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1 | \n{ selectedValues, selectedOptions, selectedIndexes } | \n
change | \n\u9009\u4E2D\u7684\u9009\u9879\u6539\u53D8\u65F6\u89E6\u53D1 | \n{ selectedValues, selectedOptions, selectedIndexes, columnIndex } | \n
click-option | \n\u70B9\u51FB\u9009\u9879\u65F6\u89E6\u53D1 | \n{ currentOption, selectedValues, selectedOptions, selectedIndexes, columnIndex } | \n
scroll-into v4.2.1 | \n\u5F53\u7528\u6237\u901A\u8FC7\u70B9\u51FB\u6216\u62D6\u62FD\u8BA9\u4E00\u4E2A\u9009\u9879\u6EDA\u52A8\u5230\u4E2D\u95F4\u7684\u9009\u62E9\u533A\u57DF\u65F6\u89E6\u53D1 | \n{ currentOption, columnIndex } | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
toolbar | \n\u81EA\u5B9A\u4E49\u6574\u4E2A\u9876\u90E8\u680F\u7684\u5185\u5BB9 | \n- | \n
title | \n\u81EA\u5B9A\u4E49\u6807\u9898\u5185\u5BB9 | \n- | \n
confirm | \n\u81EA\u5B9A\u4E49\u786E\u8BA4\u6309\u94AE\u5185\u5BB9 | \n- | \n
cancel | \n\u81EA\u5B9A\u4E49\u53D6\u6D88\u6309\u94AE\u5185\u5BB9 | \n- | \n
option | \n\u81EA\u5B9A\u4E49\u9009\u9879\u5185\u5BB9 | \noption: PickerOption, index: number | \n
columns-top | \n\u81EA\u5B9A\u4E49\u9009\u9879\u4E0A\u65B9\u5185\u5BB9 | \n- | \n
columns-bottom | \n\u81EA\u5B9A\u4E49\u9009\u9879\u4E0B\u65B9\u5185\u5BB9 | \n- | \n
\u952E\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
text | \n\u9009\u9879\u6587\u5B57\u5185\u5BB9 | \nstring | number | \n
value | \n\u9009\u9879\u5BF9\u5E94\u7684\u503C | \nstring | number | \n
disabled | \n\u662F\u5426\u7981\u7528\u9009\u9879 | \nboolean | \n
children | \n\u7EA7\u8054\u9009\u9879 | \nPickerOption[] | \n
className | \n\u9009\u9879\u989D\u5916\u7C7B\u540D | \nstring | Array | object | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Picker \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
confirm | \n\u505C\u6B62\u60EF\u6027\u6EDA\u52A8\u5E76\u89E6\u53D1 confirm \u4E8B\u4EF6 | \n- | \n- | \n
getSelectedOptions | \n\u83B7\u53D6\u5F53\u524D\u9009\u4E2D\u7684\u9009\u9879 | \n- | \n(PickerOption | undefined)[] | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n PickerProps,\n PickerColumn,\n PickerOption,\n PickerInstance,\n PickerFieldNames,\n PickerToolbarPosition,\n PickerCancelEventParams,\n PickerChangeEventParams,\n PickerConfirmEventParams,\n} from 'vant';\n
\nPickerInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { PickerInstance } from 'vant';\n\nconst pickerRef = ref<PickerInstance>();\n\npickerRef.value?.confirm();\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-picker-background | \nvar(--van-background-2) | \n- | \n
--van-picker-toolbar-height | \n44px | \n- | \n
--van-picker-title-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-picker-title-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-picker-action-padding | \n0 var(--van-padding-md) | \n- | \n
--van-picker-action-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-picker-confirm-action-color | \nvar(--van-primary-color) | \n- | \n
--van-picker-cancel-action-color | \nvar(--van-text-color-2) | \n- | \n
--van-picker-option-padding | \n0 var(--van-padding-base) | \n- | \n
--van-picker-option-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-picker-option-text-color | \nvar(--van-text-color) | \n- | \n
--van-picker-option-disabled-opacity | \n0.3 | \n- | \n
--van-picker-mask-color | \nlinear-gradient | \n- | \n
--van-picker-loading-icon-color | \nvar(--van-primary-color) | \n- | \n
--van-picker-loading-mask-color | \nrgba(255, 255, 255, 0.9) | \n- | \n
\u53C2\u89C1\u684C\u9762\u7AEF\u9002\u914D\u3002
\n\u63D0\u4F9B\u591A\u4E2A\u9009\u9879\u96C6\u5408\u4F9B\u7528\u6237\u9009\u62E9\uFF0C\u652F\u6301\u5355\u5217\u9009\u62E9\u3001\u591A\u5217\u9009\u62E9\u548C\u7EA7\u8054\u9009\u62E9\uFF0C\u901A\u5E38\u4E0E\u5F39\u51FA\u5C42\u7EC4\u4EF6\u914D\u5408\u4F7F\u7528\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Picker } from 'vant';\n\nconst app = createApp();\napp.use(Picker);\n
\nPicker \u7EC4\u4EF6\u901A\u8FC7 columns
\u5C5E\u6027\u914D\u7F6E\u9009\u9879\u6570\u636E\uFF0Ccolumns
\u662F\u4E00\u4E2A\u5305\u542B\u5B57\u7B26\u4E32\u6216\u5BF9\u8C61\u7684\u6570\u7EC4\u3002
\u9876\u90E8\u680F\u5305\u542B\u6807\u9898\u3001\u786E\u8BA4\u6309\u94AE\u548C\u53D6\u6D88\u6309\u94AE\uFF0C\u70B9\u51FB\u786E\u8BA4\u6309\u94AE\u89E6\u53D1 confirm
\u4E8B\u4EF6\uFF0C\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u89E6\u53D1 cancel
\u4E8B\u4EF6\u3002
<van-picker\n title="\u6807\u9898"\n :columns="columns"\n @confirm="onConfirm"\n @cancel="onCancel"\n @change="onChange"\n/>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const columns = [\n { text: '\u676D\u5DDE', value: 'Hangzhou' },\n { text: '\u5B81\u6CE2', value: 'Ningbo' },\n { text: '\u6E29\u5DDE', value: 'Wenzhou' },\n { text: '\u7ECD\u5174', value: 'Shaoxing' },\n { text: '\u6E56\u5DDE', value: 'Huzhou' },\n ];\n const onConfirm = ({ selectedValues }) => {\n showToast(`\u5F53\u524D\u503C: ${selectedValues.join(',')}`);\n };\n const onChange = ({ selectedValues }) => {\n showToast(`\u5F53\u524D\u503C: ${selectedValues.join(',')}`);\n };\n const onCancel = () => showToast('\u53D6\u6D88');\n\n return {\n columns,\n onChange,\n onCancel,\n onConfirm,\n };\n },\n};\n
\n\u5728\u5B9E\u9645\u573A\u666F\u4E2D\uFF0CPicker \u901A\u5E38\u4F5C\u4E3A\u7528\u4E8E\u8F85\u52A9\u8868\u5355\u586B\u5199\uFF0C\u53EF\u4EE5\u642D\u914D Popup \u548C Field \u5B9E\u73B0\u8BE5\u6548\u679C\u3002
\n<van-field\n v-model="fieldValue"\n is-link\n readonly\n label="\u57CE\u5E02"\n placeholder="\u9009\u62E9\u57CE\u5E02"\n @click="showPicker = true"\n/>\n<van-popup v-model:show="showPicker" round position="bottom">\n <van-picker\n :columns="columns"\n @cancel="showPicker = false"\n @confirm="onConfirm"\n />\n</van-popup>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const columns = [\n { text: '\u676D\u5DDE', value: 'Hangzhou' },\n { text: '\u5B81\u6CE2', value: 'Ningbo' },\n { text: '\u6E29\u5DDE', value: 'Wenzhou' },\n { text: '\u7ECD\u5174', value: 'Shaoxing' },\n { text: '\u6E56\u5DDE', value: 'Huzhou' },\n ];\n const fieldValue = ref('');\n const showPicker = ref(false);\n\n const onConfirm = ({ selectedOptions }) => {\n showPicker.value = false;\n fieldValue.value = selectedOptions[0].text;\n };\n\n return {\n columns,\n onConfirm,\n fieldValue,\n showPicker,\n };\n },\n};\n
\n\u901A\u8FC7 v-model
\u53EF\u4EE5\u7ED1\u5B9A\u5F53\u524D\u9009\u4E2D\u9879\u7684 values
\uFF0C\u4FEE\u6539 v-model
\u7ED1\u5B9A\u7684\u503C\u65F6\uFF0CPicker \u7684\u9009\u4E2D\u72B6\u6001\u4E5F\u4F1A\u968F\u4E4B\u6539\u53D8\u3002
v-model
\u7684\u503C\u662F\u4E00\u4E2A\u6570\u7EC4\uFF0C\u6570\u7EC4\u7684\u7B2C\u4E00\u4F4D\u5BF9\u5E94\u7B2C\u4E00\u5217\u9009\u4E2D\u9879\u7684 value
\uFF0C\u7B2C\u4E8C\u4F4D\u5BF9\u5E94\u7B2C\u4E8C\u5217\u9009\u4E2D\u9879\u7684 value
\uFF0C\u4EE5\u6B64\u7C7B\u63A8\u3002
<van-picker v-model="selectedValues" title="\u6807\u9898" :columns="columns" />\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const columns = [\n { text: '\u676D\u5DDE', value: 'Hangzhou' },\n { text: '\u5B81\u6CE2', value: 'Ningbo' },\n { text: '\u6E29\u5DDE', value: 'Wenzhou' },\n { text: '\u7ECD\u5174', value: 'Shaoxing' },\n { text: '\u6E56\u5DDE', value: 'Huzhou' },\n ];\n const selectedValues = ref(['Wenzhou']);\n\n return {\n columns,\n selectedValues,\n };\n },\n};\n
\ncolumns
\u5C5E\u6027\u53EF\u4EE5\u901A\u8FC7\u4E8C\u7EF4\u6570\u7EC4\u7684\u5F62\u5F0F\u914D\u7F6E\u591A\u5217\u9009\u62E9\u3002
<van-picker title="\u6807\u9898" :columns="columns" />\n
\nexport default {\n setup() {\n const columns = [\n // \u7B2C\u4E00\u5217\n [\n { text: '\u5468\u4E00', value: 'Monday' },\n { text: '\u5468\u4E8C', value: 'Tuesday' },\n { text: '\u5468\u4E09', value: 'Wednesday' },\n { text: '\u5468\u56DB', value: 'Thursday' },\n { text: '\u5468\u4E94', value: 'Friday' },\n ],\n // \u7B2C\u4E8C\u5217\n [\n { text: '\u4E0A\u5348', value: 'Morning' },\n { text: '\u4E0B\u5348', value: 'Afternoon' },\n { text: '\u665A\u4E0A', value: 'Evening' },\n ],\n ];\n\n return { columns };\n },\n};\n
\n\u4F7F\u7528 columns
\u7684 children
\u5B57\u6BB5\u53EF\u4EE5\u5B9E\u73B0\u9009\u9879\u7EA7\u8054\u7684\u6548\u679C\u3002\u5982\u679C\u7EA7\u8054\u5C42\u7EA7\u8F83\u591A\uFF0C\u63A8\u8350\u4F7F\u7528 Cascader \u7EA7\u8054\u9009\u9879\u7EC4\u4EF6\u3002
<van-picker title="\u6807\u9898" :columns="columns" />\n
\nexport default {\n setup() {\n const columns = [\n {\n text: '\u6D59\u6C5F',\n value: 'Zhejiang',\n children: [\n {\n text: '\u676D\u5DDE',\n value: 'Hangzhou',\n children: [\n { text: '\u897F\u6E56\u533A', value: 'Xihu' },\n { text: '\u4F59\u676D\u533A', value: 'Yuhang' },\n ],\n },\n {\n text: '\u6E29\u5DDE',\n value: 'Wenzhou',\n children: [\n { text: '\u9E7F\u57CE\u533A', value: 'Lucheng' },\n { text: '\u74EF\u6D77\u533A', value: 'Ouhai' },\n ],\n },\n ],\n },\n {\n text: '\u798F\u5EFA',\n value: 'Fujian',\n children: [\n {\n text: '\u798F\u5DDE',\n value: 'Fuzhou',\n children: [\n { text: '\u9F13\u697C\u533A', value: 'Gulou' },\n { text: '\u53F0\u6C5F\u533A', value: 'Taijiang' },\n ],\n },\n {\n text: '\u53A6\u95E8',\n value: 'Xiamen',\n children: [\n { text: '\u601D\u660E\u533A', value: 'Siming' },\n { text: '\u6D77\u6CA7\u533A', value: 'Haicang' },\n ],\n },\n ],\n },\n ];\n\n return { columns };\n },\n};\n
\n\n\n\u7EA7\u8054\u9009\u62E9\u7684\u6570\u636E\u5D4C\u5957\u6DF1\u5EA6\u9700\u8981\u4FDD\u6301\u4E00\u81F4\uFF0C\u5982\u679C\u90E8\u5206\u9009\u9879\u6CA1\u6709\u5B50\u9009\u9879\uFF0C\u53EF\u4EE5\u4F7F\u7528\u7A7A\u5B57\u7B26\u4E32\u8FDB\u884C\u5360\u4F4D\u3002
\n
\u9009\u9879\u53EF\u4EE5\u4E3A\u5BF9\u8C61\u7ED3\u6784\uFF0C\u901A\u8FC7\u8BBE\u7F6E disabled
\u6765\u7981\u7528\u8BE5\u9009\u9879\u3002
<van-picker :columns="columns" />\n
\nexport default {\n setup() {\n const columns = [\n { text: '\u676D\u5DDE', value: 'Hangzhou', disabled: true },\n { text: '\u5B81\u6CE2', value: 'Ningbo' },\n { text: '\u6E29\u5DDE', value: 'Wenzhou' },\n ];\n return { columns };\n },\n};\n
\n\u82E5\u9009\u62E9\u5668\u6570\u636E\u662F\u5F02\u6B65\u83B7\u53D6\u7684\uFF0C\u53EF\u4EE5\u901A\u8FC7 loading
\u5C5E\u6027\u663E\u793A\u52A0\u8F7D\u63D0\u793A\u3002
<van-picker :columns="columns" :loading="loading" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const columns = ref([]);\n const loading = ref(true);\n\n setTimeout(() => {\n columns.value = [{ text: '\u9009\u9879', value: 'option' }];\n loading.value = false;\n }, 1000);\n\n return { columns, loading };\n },\n};\n
\n<van-picker\n :title="\u6807\u9898"\n :columns="columns"\n :columns-field-names="customFieldName"\n/>\n
\nexport default {\n setup() {\n const columns = [\n {\n cityName: '\u6D59\u6C5F',\n cities: [\n {\n cityName: '\u676D\u5DDE',\n cities: [{ cityName: '\u897F\u6E56\u533A' }, { cityName: '\u4F59\u676D\u533A' }],\n },\n {\n cityName: '\u6E29\u5DDE',\n cities: [{ cityName: '\u9E7F\u57CE\u533A' }, { cityName: '\u74EF\u6D77\u533A' }],\n },\n ],\n },\n {\n cityName: '\u798F\u5EFA',\n cities: [\n {\n cityName: '\u798F\u5DDE',\n cities: [{ cityName: '\u9F13\u697C\u533A' }, { cityName: '\u53F0\u6C5F\u533A' }],\n },\n {\n cityName: '\u53A6\u95E8',\n cities: [{ cityName: '\u601D\u660E\u533A' }, { cityName: '\u6D77\u6CA7\u533A' }],\n },\n ],\n },\n ];\n\n const customFieldName = {\n text: 'cityName',\n value: 'cityName',\n children: 'cities',\n };\n\n return {\n columns,\n customFieldName,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u9009\u4E2D\u9879\u5BF9\u5E94\u7684\u503C | \nnumber[] | string[] | \n- | \n
columns | \n\u5BF9\u8C61\u6570\u7EC4\uFF0C\u914D\u7F6E\u6BCF\u4E00\u5217\u663E\u793A\u7684\u6570\u636E | \nPickerOption[] | PickerOption[][] | \n[] | \n
columns-field-names | \n\u81EA\u5B9A\u4E49 columns \u7ED3\u6784\u4E2D\u7684\u5B57\u6BB5 | \nobject | \n{ text: \'text\', value: \'value\', children: \'children\' } | \n
title | \n\u9876\u90E8\u680F\u6807\u9898 | \nstring | \n- | \n
confirm-button-text | \n\u786E\u8BA4\u6309\u94AE\u6587\u5B57 | \nstring | \n\u786E\u8BA4 | \n
cancel-button-text | \n\u53D6\u6D88\u6309\u94AE\u6587\u5B57 | \nstring | \n\u53D6\u6D88 | \n
toolbar-position | \n\u9876\u90E8\u680F\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A bottom | \nstring | \ntop | \n
loading | \n\u662F\u5426\u663E\u793A\u52A0\u8F7D\u72B6\u6001 | \nboolean | \nfalse | \n
readonly | \n\u662F\u5426\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u53EA\u8BFB\u72B6\u6001\u4E0B\u65E0\u6CD5\u5207\u6362\u9009\u9879 | \nboolean | \nfalse | \n
show-toolbar | \n\u662F\u5426\u663E\u793A\u9876\u90E8\u680F | \nboolean | \ntrue | \n
allow-html | \n\u662F\u5426\u5141\u8BB8\u9009\u9879\u5185\u5BB9\u4E2D\u6E32\u67D3 HTML | \nboolean | \nfalse | \n
option-height | \n\u9009\u9879\u9AD8\u5EA6\uFF0C\u652F\u6301 px vw vh rem \u5355\u4F4D\uFF0C\u9ED8\u8BA4 px | \nnumber | string | \n44 | \n
visible-option-num | \n\u53EF\u89C1\u7684\u9009\u9879\u4E2A\u6570 | \nnumber | string | \n6 | \n
swipe-duration | \n\u5FEB\u901F\u6ED1\u52A8\u65F6\u60EF\u6027\u6EDA\u52A8\u7684\u65F6\u957F\uFF0C\u5355\u4F4D ms | \nnumber | string | \n1000 | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
confirm | \n\u70B9\u51FB\u5B8C\u6210\u6309\u94AE\u65F6\u89E6\u53D1 | \n{ selectedValues, selectedOptions, selectedIndexes } | \n
cancel | \n\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1 | \n{ selectedValues, selectedOptions, selectedIndexes } | \n
change | \n\u9009\u4E2D\u7684\u9009\u9879\u6539\u53D8\u65F6\u89E6\u53D1 | \n{ selectedValues, selectedOptions, selectedIndexes, columnIndex } | \n
click-option | \n\u70B9\u51FB\u9009\u9879\u65F6\u89E6\u53D1 | \n{ currentOption, selectedValues, selectedOptions, selectedIndexes, columnIndex } | \n
scroll-into v4.2.1 | \n\u5F53\u7528\u6237\u901A\u8FC7\u70B9\u51FB\u6216\u62D6\u62FD\u8BA9\u4E00\u4E2A\u9009\u9879\u6EDA\u52A8\u5230\u4E2D\u95F4\u7684\u9009\u62E9\u533A\u57DF\u65F6\u89E6\u53D1 | \n{ currentOption, columnIndex } | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
toolbar | \n\u81EA\u5B9A\u4E49\u6574\u4E2A\u9876\u90E8\u680F\u7684\u5185\u5BB9 | \n- | \n
title | \n\u81EA\u5B9A\u4E49\u6807\u9898\u5185\u5BB9 | \n- | \n
confirm | \n\u81EA\u5B9A\u4E49\u786E\u8BA4\u6309\u94AE\u5185\u5BB9 | \n- | \n
cancel | \n\u81EA\u5B9A\u4E49\u53D6\u6D88\u6309\u94AE\u5185\u5BB9 | \n- | \n
option | \n\u81EA\u5B9A\u4E49\u9009\u9879\u5185\u5BB9 | \noption: PickerOption, index: number | \n
columns-top | \n\u81EA\u5B9A\u4E49\u9009\u9879\u4E0A\u65B9\u5185\u5BB9 | \n- | \n
columns-bottom | \n\u81EA\u5B9A\u4E49\u9009\u9879\u4E0B\u65B9\u5185\u5BB9 | \n- | \n
\u952E\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
text | \n\u9009\u9879\u6587\u5B57\u5185\u5BB9 | \nstring | number | \n
value | \n\u9009\u9879\u5BF9\u5E94\u7684\u503C | \nstring | number | \n
disabled | \n\u662F\u5426\u7981\u7528\u9009\u9879 | \nboolean | \n
children | \n\u7EA7\u8054\u9009\u9879 | \nPickerOption[] | \n
className | \n\u9009\u9879\u989D\u5916\u7C7B\u540D | \nstring | Array | object | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Picker \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
confirm | \n\u505C\u6B62\u60EF\u6027\u6EDA\u52A8\u5E76\u89E6\u53D1 confirm \u4E8B\u4EF6 | \n- | \n- | \n
getSelectedOptions | \n\u83B7\u53D6\u5F53\u524D\u9009\u4E2D\u7684\u9009\u9879 | \n- | \n(PickerOption | undefined)[] | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n PickerProps,\n PickerColumn,\n PickerOption,\n PickerInstance,\n PickerFieldNames,\n PickerToolbarPosition,\n PickerCancelEventParams,\n PickerChangeEventParams,\n PickerConfirmEventParams,\n} from 'vant';\n
\nPickerInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { PickerInstance } from 'vant';\n\nconst pickerRef = ref<PickerInstance>();\n\npickerRef.value?.confirm();\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-picker-background | \nvar(--van-background-2) | \n- | \n
--van-picker-toolbar-height | \n44px | \n- | \n
--van-picker-title-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-picker-title-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-picker-action-padding | \n0 var(--van-padding-md) | \n- | \n
--van-picker-action-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-picker-confirm-action-color | \nvar(--van-primary-color) | \n- | \n
--van-picker-cancel-action-color | \nvar(--van-text-color-2) | \n- | \n
--van-picker-option-padding | \n0 var(--van-padding-base) | \n- | \n
--van-picker-option-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-picker-option-text-color | \nvar(--van-text-color) | \n- | \n
--van-picker-option-disabled-opacity | \n0.3 | \n- | \n
--van-picker-mask-color | \nlinear-gradient | \n- | \n
--van-picker-loading-icon-color | \nvar(--van-primary-color) | \n- | \n
--van-picker-loading-mask-color | \nrgba(255, 255, 255, 0.9) | \n- | \n
\u53C2\u89C1\u684C\u9762\u7AEF\u9002\u914D\u3002
\n\u5730\u5740\u7F16\u8F91\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u65B0\u5EFA\u3001\u66F4\u65B0\u3001\u5220\u9664\u5730\u5740\u4FE1\u606F\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { AddressEdit } from 'vant';\n\nconst app = createApp();\napp.use(AddressEdit);\n
\n<van-address-edit\n :area-list="areaList"\n show-delete\n show-set-default\n show-search-result\n :search-result="searchResult"\n :area-columns-placeholder="['\u8BF7\u9009\u62E9', '\u8BF7\u9009\u62E9', '\u8BF7\u9009\u62E9']"\n @save="onSave"\n @delete="onDelete"\n @change-detail="onChangeDetail"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const searchResult = ref([]);\n\n const onSave = () => showToast('save');\n const onDelete = () => showToast('delete');\n const onChangeDetail = (val) => {\n if (val) {\n searchResult.value = [\n {\n name: '\u9EC4\u9F99\u4E07\u79D1\u4E2D\u5FC3',\n address: '\u676D\u5DDE\u5E02\u897F\u6E56\u533A',\n },\n ];\n } else {\n searchResult.value = [];\n }\n };\n\n return {\n onSave,\n onDelete,\n areaList,\n searchResult,\n onChangeDetail,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
area-list | \n\u5730\u533A\u5217\u8868 | \nobject | \n- | \n
area-columns-placeholder | \n\u5730\u533A\u9009\u62E9\u5217\u5360\u4F4D\u63D0\u793A\u6587\u5B57 | \nstring[] | \n[] | \n
area-placeholder | \n\u5730\u533A\u8F93\u5165\u6846\u5360\u4F4D\u63D0\u793A\u6587\u5B57 | \nstring | \n\u9009\u62E9\u7701 / \u5E02 / \u533A | \n
address-info | \n\u5730\u5740\u4FE1\u606F\u521D\u59CB\u503C | \nAddressEditInfo | \n{} | \n
search-result | \n\u8BE6\u7EC6\u5730\u5740\u641C\u7D22\u7ED3\u679C | \nAddressEditSearchItem[] | \n[] | \n
show-delete | \n\u662F\u5426\u663E\u793A\u5220\u9664\u6309\u94AE | \nboolean | \nfalse | \n
show-set-default | \n\u662F\u5426\u663E\u793A\u9ED8\u8BA4\u5730\u5740\u680F | \nboolean | \nfalse | \n
show-search-result | \n\u662F\u5426\u663E\u793A\u641C\u7D22\u7ED3\u679C | \nboolean | \nfalse | \n
show-area | \n\u662F\u5426\u663E\u793A\u5730\u533A | \nboolean | \ntrue | \n
show-detail | \n\u662F\u5426\u663E\u793A\u8BE6\u7EC6\u5730\u5740 | \nboolean | \ntrue | \n
disable-area | \n\u662F\u5426\u7981\u7528\u5730\u533A\u9009\u62E9 | \nboolean | \nfalse | \n
save-button-text | \n\u4FDD\u5B58\u6309\u94AE\u6587\u5B57 | \nstring | \n\u4FDD\u5B58 | \n
delete-button-text | \n\u5220\u9664\u6309\u94AE\u6587\u5B57 | \nstring | \n\u5220\u9664 | \n
detail-rows | \n\u8BE6\u7EC6\u5730\u5740\u8F93\u5165\u6846\u884C\u6570 | \nnumber | string | \n1 | \n
detail-maxlength | \n\u8BE6\u7EC6\u5730\u5740\u6700\u5927\u957F\u5EA6 | \nnumber | string | \n200 | \n
is-saving | \n\u662F\u5426\u663E\u793A\u4FDD\u5B58\u6309\u94AE\u52A0\u8F7D\u52A8\u753B | \nboolean | \nfalse | \n
is-deleting | \n\u662F\u5426\u663E\u793A\u5220\u9664\u6309\u94AE\u52A0\u8F7D\u52A8\u753B | \nboolean | \nfalse | \n
tel-validator | \n\u624B\u673A\u53F7\u683C\u5F0F\u6821\u9A8C\u51FD\u6570 | \n(val: string) => boolean | \n- | \n
tel-maxlength | \n\u624B\u673A\u53F7\u6700\u5927\u957F\u5EA6 | \nnumber | string | \n- | \n
validator | \n\u81EA\u5B9A\u4E49\u6821\u9A8C\u51FD\u6570 | \n(key: string, val: string) => string | \n- | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
save | \n\u70B9\u51FB\u4FDD\u5B58\u6309\u94AE\u65F6\u89E6\u53D1 | \ninfo: AddressEditInfo | \n
focus | \n\u8F93\u5165\u6846\u805A\u7126\u65F6\u89E6\u53D1 | \nkey: string | \n
change v4.7.0 | \n\u4EC5 name \u548C tel \u8F93\u5165\u6846\u503C\u6539\u53D8\u89E6\u53D1 | \n{key: string, value: string} | \n
delete | \n\u786E\u8BA4\u5220\u9664\u5730\u5740\u65F6\u89E6\u53D1 | \ninfo: AddressEditInfo | \n
select-search | \n\u9009\u4E2D\u641C\u7D22\u7ED3\u679C\u65F6\u89E6\u53D1 | \nvalue: string | \n
click-area | \n\u70B9\u51FB\u6536\u4EF6\u5730\u533A\u65F6\u89E6\u53D1 | \n- | \n
change-area | \n\u4FEE\u6539\u6536\u4EF6\u5730\u533A\u65F6\u89E6\u53D1 | \nselectedOptions: PickerOption[] | \n
change-detail | \n\u4FEE\u6539\u8BE6\u7EC6\u5730\u5740\u65F6\u89E6\u53D1 | \nvalue: string | \n
change-default | \n\u5207\u6362\u662F\u5426\u4F7F\u7528\u9ED8\u8BA4\u5730\u5740\u65F6\u89E6\u53D1 | \nchecked: boolean | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u5728\u90AE\u653F\u7F16\u7801\u4E0B\u65B9\u63D2\u5165\u5185\u5BB9 | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 AddressEdit \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
setAddressDetail | \n\u8BBE\u7F6E\u8BE6\u7EC6\u5730\u5740 | \naddressDetail: string | \n- | \n
setAreaCode | \n\u8BBE\u7F6E\u5730\u533A\u7F16\u53F7 | \ncode: string | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n AddressEditInfo,\n AddressEditProps,\n AddressEditInstance,\n AddressEditSearchItem,\n} from 'vant';\n
\nAddressEditInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { AddressEditInstance } from 'vant';\n\nconst addressEditRef = ref<AddressEditInstance>();\n\naddressEditRef.value?.setAddressDetail('');\n
\n\u6CE8\u610F\uFF1AAddressEditInfo
\u4EC5\u4F5C\u4E3A\u521D\u59CB\u503C\u4F20\u5165\uFF0C\u8868\u5355\u6700\u7EC8\u5185\u5BB9\u53EF\u4EE5\u5728 save \u4E8B\u4EF6\u4E2D\u83B7\u53D6\u3002
key | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
name | \n\u59D3\u540D | \nstring | \n
tel | \n\u624B\u673A\u53F7 | \nstring | \n
province | \n\u7701\u4EFD | \nstring | \n
city | \n\u57CE\u5E02 | \nstring | \n
county | \n\u533A\u53BF | \nstring | \n
addressDetail | \n\u8BE6\u7EC6\u5730\u5740 | \nstring | \n
areaCode | \n\u5730\u533A\u7F16\u7801\uFF0C\u901A\u8FC7 \u7701\u5E02\u533A\u9009\u62E9 \u83B7\u53D6\uFF08\u5FC5\u586B\uFF09 | \nstring | \n
isDefault | \n\u662F\u5426\u4E3A\u9ED8\u8BA4\u5730\u5740 | \nboolean | \n
key | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
name | \n\u5730\u540D | \nstring | \n
address | \n\u8BE6\u7EC6\u5730\u5740 | \nstring | \n
\u8BF7\u53C2\u8003 Area \u7701\u5E02\u533A\u9009\u62E9 \u7EC4\u4EF6\u3002
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-address-edit-padding | \nvar(--van-padding-sm) | \n- | \n
--van-address-edit-buttons-padding | \nvar(--van-padding-xl) var(--van-padding-base) | \n- | \n
--van-address-edit-button-margin-bottom | \nvar(--van-padding-sm) | \n- | \n
--van-address-edit-button-font-size | \nvar(--van-font-size-lg) | \n- | \n
\u5730\u5740\u7F16\u8F91\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u65B0\u5EFA\u3001\u66F4\u65B0\u3001\u5220\u9664\u5730\u5740\u4FE1\u606F\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { AddressEdit } from 'vant';\n\nconst app = createApp();\napp.use(AddressEdit);\n
\n<van-address-edit\n :area-list="areaList"\n show-delete\n show-set-default\n show-search-result\n :search-result="searchResult"\n :area-columns-placeholder="['\u8BF7\u9009\u62E9', '\u8BF7\u9009\u62E9', '\u8BF7\u9009\u62E9']"\n @save="onSave"\n @delete="onDelete"\n @change-detail="onChangeDetail"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const searchResult = ref([]);\n\n const onSave = () => showToast('save');\n const onDelete = () => showToast('delete');\n const onChangeDetail = (val) => {\n if (val) {\n searchResult.value = [\n {\n name: '\u9EC4\u9F99\u4E07\u79D1\u4E2D\u5FC3',\n address: '\u676D\u5DDE\u5E02\u897F\u6E56\u533A',\n },\n ];\n } else {\n searchResult.value = [];\n }\n };\n\n return {\n onSave,\n onDelete,\n areaList,\n searchResult,\n onChangeDetail,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
area-list | \n\u5730\u533A\u5217\u8868 | \nobject | \n- | \n
area-columns-placeholder | \n\u5730\u533A\u9009\u62E9\u5217\u5360\u4F4D\u63D0\u793A\u6587\u5B57 | \nstring[] | \n[] | \n
area-placeholder | \n\u5730\u533A\u8F93\u5165\u6846\u5360\u4F4D\u63D0\u793A\u6587\u5B57 | \nstring | \n\u9009\u62E9\u7701 / \u5E02 / \u533A | \n
address-info | \n\u5730\u5740\u4FE1\u606F\u521D\u59CB\u503C | \nAddressEditInfo | \n{} | \n
search-result | \n\u8BE6\u7EC6\u5730\u5740\u641C\u7D22\u7ED3\u679C | \nAddressEditSearchItem[] | \n[] | \n
show-delete | \n\u662F\u5426\u663E\u793A\u5220\u9664\u6309\u94AE | \nboolean | \nfalse | \n
show-set-default | \n\u662F\u5426\u663E\u793A\u9ED8\u8BA4\u5730\u5740\u680F | \nboolean | \nfalse | \n
show-search-result | \n\u662F\u5426\u663E\u793A\u641C\u7D22\u7ED3\u679C | \nboolean | \nfalse | \n
show-area | \n\u662F\u5426\u663E\u793A\u5730\u533A | \nboolean | \ntrue | \n
show-detail | \n\u662F\u5426\u663E\u793A\u8BE6\u7EC6\u5730\u5740 | \nboolean | \ntrue | \n
disable-area | \n\u662F\u5426\u7981\u7528\u5730\u533A\u9009\u62E9 | \nboolean | \nfalse | \n
save-button-text | \n\u4FDD\u5B58\u6309\u94AE\u6587\u5B57 | \nstring | \n\u4FDD\u5B58 | \n
delete-button-text | \n\u5220\u9664\u6309\u94AE\u6587\u5B57 | \nstring | \n\u5220\u9664 | \n
detail-rows | \n\u8BE6\u7EC6\u5730\u5740\u8F93\u5165\u6846\u884C\u6570 | \nnumber | string | \n1 | \n
detail-maxlength | \n\u8BE6\u7EC6\u5730\u5740\u6700\u5927\u957F\u5EA6 | \nnumber | string | \n200 | \n
is-saving | \n\u662F\u5426\u663E\u793A\u4FDD\u5B58\u6309\u94AE\u52A0\u8F7D\u52A8\u753B | \nboolean | \nfalse | \n
is-deleting | \n\u662F\u5426\u663E\u793A\u5220\u9664\u6309\u94AE\u52A0\u8F7D\u52A8\u753B | \nboolean | \nfalse | \n
tel-validator | \n\u624B\u673A\u53F7\u683C\u5F0F\u6821\u9A8C\u51FD\u6570 | \n(val: string) => boolean | \n- | \n
tel-maxlength | \n\u624B\u673A\u53F7\u6700\u5927\u957F\u5EA6 | \nnumber | string | \n- | \n
validator | \n\u81EA\u5B9A\u4E49\u6821\u9A8C\u51FD\u6570 | \n(key: string, val: string) => string | \n- | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
save | \n\u70B9\u51FB\u4FDD\u5B58\u6309\u94AE\u65F6\u89E6\u53D1 | \ninfo: AddressEditInfo | \n
focus | \n\u8F93\u5165\u6846\u805A\u7126\u65F6\u89E6\u53D1 | \nkey: string | \n
change v4.7.0 | \n\u4EC5 name \u548C tel \u8F93\u5165\u6846\u503C\u6539\u53D8\u89E6\u53D1 | \n{key: string, value: string} | \n
delete | \n\u786E\u8BA4\u5220\u9664\u5730\u5740\u65F6\u89E6\u53D1 | \ninfo: AddressEditInfo | \n
select-search | \n\u9009\u4E2D\u641C\u7D22\u7ED3\u679C\u65F6\u89E6\u53D1 | \nvalue: string | \n
click-area | \n\u70B9\u51FB\u6536\u4EF6\u5730\u533A\u65F6\u89E6\u53D1 | \n- | \n
change-area | \n\u4FEE\u6539\u6536\u4EF6\u5730\u533A\u65F6\u89E6\u53D1 | \nselectedOptions: PickerOption[] | \n
change-detail | \n\u4FEE\u6539\u8BE6\u7EC6\u5730\u5740\u65F6\u89E6\u53D1 | \nvalue: string | \n
change-default | \n\u5207\u6362\u662F\u5426\u4F7F\u7528\u9ED8\u8BA4\u5730\u5740\u65F6\u89E6\u53D1 | \nchecked: boolean | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u5728\u90AE\u653F\u7F16\u7801\u4E0B\u65B9\u63D2\u5165\u5185\u5BB9 | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 AddressEdit \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
setAddressDetail | \n\u8BBE\u7F6E\u8BE6\u7EC6\u5730\u5740 | \naddressDetail: string | \n- | \n
setAreaCode | \n\u8BBE\u7F6E\u5730\u533A\u7F16\u53F7 | \ncode: string | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n AddressEditInfo,\n AddressEditProps,\n AddressEditInstance,\n AddressEditSearchItem,\n} from 'vant';\n
\nAddressEditInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { AddressEditInstance } from 'vant';\n\nconst addressEditRef = ref<AddressEditInstance>();\n\naddressEditRef.value?.setAddressDetail('');\n
\n\u6CE8\u610F\uFF1AAddressEditInfo
\u4EC5\u4F5C\u4E3A\u521D\u59CB\u503C\u4F20\u5165\uFF0C\u8868\u5355\u6700\u7EC8\u5185\u5BB9\u53EF\u4EE5\u5728 save \u4E8B\u4EF6\u4E2D\u83B7\u53D6\u3002
key | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
name | \n\u59D3\u540D | \nstring | \n
tel | \n\u624B\u673A\u53F7 | \nstring | \n
province | \n\u7701\u4EFD | \nstring | \n
city | \n\u57CE\u5E02 | \nstring | \n
county | \n\u533A\u53BF | \nstring | \n
addressDetail | \n\u8BE6\u7EC6\u5730\u5740 | \nstring | \n
areaCode | \n\u5730\u533A\u7F16\u7801\uFF0C\u901A\u8FC7 \u7701\u5E02\u533A\u9009\u62E9 \u83B7\u53D6\uFF08\u5FC5\u586B\uFF09 | \nstring | \n
isDefault | \n\u662F\u5426\u4E3A\u9ED8\u8BA4\u5730\u5740 | \nboolean | \n
key | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
name | \n\u5730\u540D | \nstring | \n
address | \n\u8BE6\u7EC6\u5730\u5740 | \nstring | \n
\u8BF7\u53C2\u8003 Area \u7701\u5E02\u533A\u9009\u62E9 \u7EC4\u4EF6\u3002
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-address-edit-padding | \nvar(--van-padding-sm) | \n- | \n
--van-address-edit-buttons-padding | \nvar(--van-padding-xl) var(--van-padding-base) | \n- | \n
--van-address-edit-button-margin-bottom | \nvar(--van-padding-sm) | \n- | \n
--van-address-edit-button-font-size | \nvar(--van-font-size-lg) | \n- | \n
Vant \u91C7\u7528\u4E2D\u6587\u4F5C\u4E3A\u9ED8\u8BA4\u8BED\u8A00\uFF0C\u540C\u65F6\u652F\u6301\u591A\u8BED\u8A00\u5207\u6362\uFF0C\u8BF7\u6309\u7167\u4E0B\u65B9\u6559\u7A0B\u8FDB\u884C\u56FD\u9645\u5316\u8BBE\u7F6E\u3002
\nVant \u901A\u8FC7 Locale \u7EC4\u4EF6\u5B9E\u73B0\u591A\u8BED\u8A00\u652F\u6301\uFF0C\u4F7F\u7528 Locale.use
\u65B9\u6CD5\u53EF\u4EE5\u5207\u6362\u5F53\u524D\u4F7F\u7528\u7684\u8BED\u8A00\u3002
import { Locale } from 'vant';\n// \u5F15\u5165\u82F1\u6587\u8BED\u8A00\u5305\nimport enUS from 'vant/es/locale/lang/en-US';\n\nLocale.use('en-US', enUS);\n
\n\u901A\u8FC7 Locale.add
\u65B9\u6CD5\u53EF\u4EE5\u5B9E\u73B0\u6587\u6848\u7684\u4FEE\u6539\u548C\u6269\u5C55\uFF0C\u793A\u4F8B\u5982\u4E0B\uFF1A
import { Locale } from 'vant';\n\nconst messages = {\n 'zh-CN': {\n vanPicker: {\n confirm: '\u5173\u95ED', // \u5C06'\u786E\u8BA4'\u4FEE\u6539\u4E3A'\u5173\u95ED'\n },\n },\n};\n\nLocale.add(messages);\n
\n\u76EE\u524D\u652F\u6301\u7684\u8BED\u8A00:
\n\u8BED\u8A00 | \n\u6587\u4EF6\u540D | \n\u7248\u672C | \n
---|---|---|
\u963F\u62C9\u4F2F\u8BED | \nar-SA | \nv3.5.0 | \n
\u4FDD\u52A0\u5229\u4E9A\u8BED | \nbg-BG | \nv3.5.0 | \n
\u5B5F\u52A0\u62C9\u8BED\uFF08\u5B5F\u52A0\u62C9\u56FD\uFF09 | \nbn-BD | \nv3.4.5 | \n
\u4E39\u9EA6\u8BED | \nda-DK | \nv3.4.8 | \n
\u5FB7\u8BED | \nde-DE | \n- | \n
\u5FB7\u8BED\uFF08\u6B63\u5F0F\uFF09 | \nde-DE-formal | \n- | \n
\u5E0C\u814A\u8BED | \nel-GR | \nv3.5.0 | \n
\u82F1\u8BED | \nen-US | \n- | \n
\u4E16\u754C\u8BED | \neo-EO | \nv4.0.9 | \n
\u897F\u73ED\u7259\u8BED | \nes-ES | \n- | \n
\u6CE2\u65AF\u8BED | \nfa-IR | \nv3.5.0 | \n
\u6CD5\u8BED | \nfr-FR | \n- | \n
\u5E0C\u4F2F\u6765\u8BED | \nhe-IL | \nv3.5.0 | \n
\u5370\u5730\u8BED | \nhi-IN | \nv3.4.3 | \n
\u5370\u5EA6\u5C3C\u897F\u4E9A\u8BED | \nid-ID | \nv3.4.5 | \n
\u51B0\u5C9B\u8BED | \nis-IS | \nv3.4.7 | \n
\u610F\u5927\u5229\u8BED | \nit-IT | \nv3.4.5 | \n
\u65E5\u8BED | \nja-JP | \n- | \n
\u9AD8\u68C9\u8BED | \nkm-KH | \nv4.1.2 | \n
\u97E9\u8BED/\u671D\u9C9C\u8BED | \nko-KR | \nv3.4.3 | \n
\u8001\u631D\u8BED | \nla-LA | \nv3.4.7 | \n
\u8499\u53E4\u8BED | \nmm-MN | \nv4.0.5 | \n
\u632A\u5A01\u8BED | \nnb-NO | \n- | \n
\u8377\u5170\u8BED | \nnl-NL | \nv4.0.5 | \n
\u8461\u8404\u7259\u8BED\uFF08\u5DF4\u897F\uFF09 | \npt-BR | \nv3.3.3 | \n
\u7F57\u9A6C\u5C3C\u4E9A\u8BED | \nro-RO | \n- | \n
\u4FC4\u7F57\u65AF\u8BED | \nru-RU | \nv3.1.5 | \n
\u585E\u5C14\u7EF4\u4E9A\u8BED | \nsr-RS | \nv4.6.4 | \n
\u745E\u5178\u8BED | \nsv-SE | \nv3.4.7 | \n
\u6CF0\u8BED | \nth-TH | \n- | \n
\u571F\u8033\u5176\u8BED | \ntr-TR | \n- | \n
\u4E4C\u514B\u5170\u8BED | \nuk-UA | \nv3.4.5 | \n
\u8D8A\u5357\u8BED | \nvi-VN | \nv3.4.5 | \n
\u7B80\u4F53\u4E2D\u6587 | \nzh-CN | \n- | \n
\u7E41\u9AD4\u4E2D\u6587\uFF08\u6E2F\uFF09 | \nzh-HK | \n- | \n
\u7E41\u9AD4\u4E2D\u6587\uFF08\u53F0\uFF09 | \nzh-TW | \n- | \n
\n\n\u5728 \u8FD9\u91CC \u67E5\u770B\u6240\u6709\u7684\u8BED\u8A00\u5305\u6E90\u6587\u4EF6\u3002
\n
\u4F60\u53EF\u4EE5\u901A\u8FC7 useCurrentLang
\u65B9\u6CD5\u6765\u83B7\u53D6\u5F53\u524D\u4F7F\u7528\u7684\u8BED\u8A00\u3002
function useCurrentLang(): Ref<string>;\n
\nimport { useCurrentLang } from 'vant';\n\nconst currentLang = useCurrentLang();\n\nconsole.log(currentLang.value); // --> 'zh-CN'\n
\n\u5982\u679C\u4E0A\u65B9\u5217\u8868\u4E2D\u6CA1\u6709\u4F60\u9700\u8981\u7684\u8BED\u8A00\uFF0C\u6B22\u8FCE\u7ED9\u6211\u4EEC\u63D0 Pull Request \u6765\u589E\u52A0\u65B0\u7684\u8BED\u8A00\u5305\uFF0C\u6539\u52A8\u5185\u5BB9\u53EF\u4EE5\u53C2\u8003\u589E\u52A0\u5FB7\u8BED\u8BED\u8A00\u5305 \u7684 PR\u3002
\n\u53EF\u4EE5\u4F7F\u7528 vue-i18n \u6765\u5B9E\u73B0\u3002
\n\u76EE\u524D\u6CA1\u6709\u63D0\u4F9B CDN \u5F62\u5F0F\u7684\u8BED\u8A00\u5305\uFF0C\u53EF\u4EE5\u624B\u52A8\u62F7\u8D1D\u8BED\u8A00\u5305\u7684\u5185\u5BB9\u6765\u4F7F\u7528\u3002
\n\u8BED\u8A00\u5305\u4E2D\u9ED8\u8BA4\u4E0D\u5305\u542B Sku \u4E1A\u52A1\u7EC4\u4EF6\u7684\u8BED\u8A00\u914D\u7F6E\uFF0C\u56E0\u6B64\u5982\u679C\u6709 Sku \u7EC4\u4EF6\u7684\u56FD\u9645\u5316\u9700\u6C42\uFF0C\u8BF7\u81EA\u884C\u914D\u7F6E\u56FD\u9645\u5316\u6587\u6848\u3002
\nVant \u91C7\u7528\u4E2D\u6587\u4F5C\u4E3A\u9ED8\u8BA4\u8BED\u8A00\uFF0C\u540C\u65F6\u652F\u6301\u591A\u8BED\u8A00\u5207\u6362\uFF0C\u8BF7\u6309\u7167\u4E0B\u65B9\u6559\u7A0B\u8FDB\u884C\u56FD\u9645\u5316\u8BBE\u7F6E\u3002
\nVant \u901A\u8FC7 Locale \u7EC4\u4EF6\u5B9E\u73B0\u591A\u8BED\u8A00\u652F\u6301\uFF0C\u4F7F\u7528 Locale.use
\u65B9\u6CD5\u53EF\u4EE5\u5207\u6362\u5F53\u524D\u4F7F\u7528\u7684\u8BED\u8A00\u3002
import { Locale } from 'vant';\n// \u5F15\u5165\u82F1\u6587\u8BED\u8A00\u5305\nimport enUS from 'vant/es/locale/lang/en-US';\n\nLocale.use('en-US', enUS);\n
\n\u901A\u8FC7 Locale.add
\u65B9\u6CD5\u53EF\u4EE5\u5B9E\u73B0\u6587\u6848\u7684\u4FEE\u6539\u548C\u6269\u5C55\uFF0C\u793A\u4F8B\u5982\u4E0B\uFF1A
import { Locale } from 'vant';\n\nconst messages = {\n 'zh-CN': {\n vanPicker: {\n confirm: '\u5173\u95ED', // \u5C06'\u786E\u8BA4'\u4FEE\u6539\u4E3A'\u5173\u95ED'\n },\n },\n};\n\nLocale.add(messages);\n
\n\u76EE\u524D\u652F\u6301\u7684\u8BED\u8A00:
\n\u8BED\u8A00 | \n\u6587\u4EF6\u540D | \n\u7248\u672C | \n
---|---|---|
\u963F\u62C9\u4F2F\u8BED | \nar-SA | \nv3.5.0 | \n
\u4FDD\u52A0\u5229\u4E9A\u8BED | \nbg-BG | \nv3.5.0 | \n
\u5B5F\u52A0\u62C9\u8BED\uFF08\u5B5F\u52A0\u62C9\u56FD\uFF09 | \nbn-BD | \nv3.4.5 | \n
\u4E39\u9EA6\u8BED | \nda-DK | \nv3.4.8 | \n
\u5FB7\u8BED | \nde-DE | \n- | \n
\u5FB7\u8BED\uFF08\u6B63\u5F0F\uFF09 | \nde-DE-formal | \n- | \n
\u5E0C\u814A\u8BED | \nel-GR | \nv3.5.0 | \n
\u82F1\u8BED | \nen-US | \n- | \n
\u4E16\u754C\u8BED | \neo-EO | \nv4.0.9 | \n
\u897F\u73ED\u7259\u8BED | \nes-ES | \n- | \n
\u6CE2\u65AF\u8BED | \nfa-IR | \nv3.5.0 | \n
\u6CD5\u8BED | \nfr-FR | \n- | \n
\u5E0C\u4F2F\u6765\u8BED | \nhe-IL | \nv3.5.0 | \n
\u5370\u5730\u8BED | \nhi-IN | \nv3.4.3 | \n
\u5370\u5EA6\u5C3C\u897F\u4E9A\u8BED | \nid-ID | \nv3.4.5 | \n
\u51B0\u5C9B\u8BED | \nis-IS | \nv3.4.7 | \n
\u610F\u5927\u5229\u8BED | \nit-IT | \nv3.4.5 | \n
\u65E5\u8BED | \nja-JP | \n- | \n
\u9AD8\u68C9\u8BED | \nkm-KH | \nv4.1.2 | \n
\u97E9\u8BED/\u671D\u9C9C\u8BED | \nko-KR | \nv3.4.3 | \n
\u8001\u631D\u8BED | \nla-LA | \nv3.4.7 | \n
\u8499\u53E4\u8BED | \nmm-MN | \nv4.0.5 | \n
\u632A\u5A01\u8BED | \nnb-NO | \n- | \n
\u8377\u5170\u8BED | \nnl-NL | \nv4.0.5 | \n
\u8461\u8404\u7259\u8BED\uFF08\u5DF4\u897F\uFF09 | \npt-BR | \nv3.3.3 | \n
\u7F57\u9A6C\u5C3C\u4E9A\u8BED | \nro-RO | \n- | \n
\u4FC4\u7F57\u65AF\u8BED | \nru-RU | \nv3.1.5 | \n
\u585E\u5C14\u7EF4\u4E9A\u8BED | \nsr-RS | \nv4.6.4 | \n
\u745E\u5178\u8BED | \nsv-SE | \nv3.4.7 | \n
\u6CF0\u8BED | \nth-TH | \n- | \n
\u571F\u8033\u5176\u8BED | \ntr-TR | \n- | \n
\u4E4C\u514B\u5170\u8BED | \nuk-UA | \nv3.4.5 | \n
\u8D8A\u5357\u8BED | \nvi-VN | \nv3.4.5 | \n
\u7B80\u4F53\u4E2D\u6587 | \nzh-CN | \n- | \n
\u7E41\u9AD4\u4E2D\u6587\uFF08\u6E2F\uFF09 | \nzh-HK | \n- | \n
\u7E41\u9AD4\u4E2D\u6587\uFF08\u53F0\uFF09 | \nzh-TW | \n- | \n
\n\n\u5728 \u8FD9\u91CC \u67E5\u770B\u6240\u6709\u7684\u8BED\u8A00\u5305\u6E90\u6587\u4EF6\u3002
\n
\u4F60\u53EF\u4EE5\u901A\u8FC7 useCurrentLang
\u65B9\u6CD5\u6765\u83B7\u53D6\u5F53\u524D\u4F7F\u7528\u7684\u8BED\u8A00\u3002
function useCurrentLang(): Ref<string>;\n
\nimport { useCurrentLang } from 'vant';\n\nconst currentLang = useCurrentLang();\n\nconsole.log(currentLang.value); // --> 'zh-CN'\n
\n\u5982\u679C\u4E0A\u65B9\u5217\u8868\u4E2D\u6CA1\u6709\u4F60\u9700\u8981\u7684\u8BED\u8A00\uFF0C\u6B22\u8FCE\u7ED9\u6211\u4EEC\u63D0 Pull Request \u6765\u589E\u52A0\u65B0\u7684\u8BED\u8A00\u5305\uFF0C\u6539\u52A8\u5185\u5BB9\u53EF\u4EE5\u53C2\u8003\u589E\u52A0\u5FB7\u8BED\u8BED\u8A00\u5305 \u7684 PR\u3002
\n\u53EF\u4EE5\u4F7F\u7528 vue-i18n \u6765\u5B9E\u73B0\u3002
\n\u76EE\u524D\u6CA1\u6709\u63D0\u4F9B CDN \u5F62\u5F0F\u7684\u8BED\u8A00\u5305\uFF0C\u53EF\u4EE5\u624B\u52A8\u62F7\u8D1D\u8BED\u8A00\u5305\u7684\u5185\u5BB9\u6765\u4F7F\u7528\u3002
\n\u8BED\u8A00\u5305\u4E2D\u9ED8\u8BA4\u4E0D\u5305\u542B Sku \u4E1A\u52A1\u7EC4\u4EF6\u7684\u8BED\u8A00\u914D\u7F6E\uFF0C\u56E0\u6B64\u5982\u679C\u6709 Sku \u7EC4\u4EF6\u7684\u56FD\u9645\u5316\u9700\u6C42\uFF0C\u8BF7\u81EA\u884C\u914D\u7F6E\u56FD\u9645\u5316\u6587\u6848\u3002
\nUsed to upload a local image or file to the server and display a preview image and upload progress during the upload process. The Uploader component does not currently contain the interface logic for uploading files to the server, this step needs to be implemented by the user.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Uploader } from 'vant';\n\nconst app = createApp();\napp.use(Uploader);\n
\n<van-uploader :after-read="afterRead" />\n
\nexport default {\n setup() {\n const afterRead = (file) => {\n console.log(file);\n };\n\n return {\n afterRead,\n };\n },\n};\n
\n<van-uploader v-model="fileList" multiple />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const fileList = ref([\n { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },\n { url: 'https://cloud-image', isImage: true },\n ]);\n\n return {\n fileList,\n };\n },\n};\n
\n<van-uploader v-model="fileList" :after-read="afterRead" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const fileList = ref([\n {\n url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg',\n status: 'uploading',\n message: 'Uploading...',\n },\n {\n url: 'https://fastly.jsdelivr.net/npm/@vant/assets/tree.jpeg',\n status: 'failed',\n message: 'Failed',\n },\n ]);\n\n const afterRead = (file) => {\n file.status = 'uploading';\n file.message = 'Uploading...';\n\n setTimeout(() => {\n file.status = 'failed';\n file.message = 'Failed';\n }, 1000);\n };\n\n return {\n fileList,\n afterRead,\n };\n },\n};\n
\n<van-uploader v-model="fileList" multiple :max-count="2" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const fileList = ref([]);\n\n return {\n fileList,\n };\n },\n};\n
\n<van-uploader multiple :max-size="500 * 1024" @oversize="onOversize" />\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onOversize = (file) => {\n console.log(file);\n showToast('File size cannot exceed 500kb');\n };\n\n return {\n onOversize,\n };\n },\n};\n
\nIf you need to make different size limits for different types of files, you can pass a function to the max-size
props.
<van-uploader multiple :max-size="isOverSize" />\n
\nexport default {\n setup() {\n const isOverSize = (file) => {\n const maxSize = file.type === 'image/jpeg' ? 500 * 1024 : 1000 * 1024;\n return file.size >= maxSize;\n };\n return {\n isOverSize,\n };\n },\n};\n
\n<van-uploader>\n <van-button icon="plus" type="primary">Upload Image</van-button>\n</van-uploader>\n
\n<van-uploader v-model="fileList">\n <template #preview-cover="{ file }">\n <div class="preview-cover van-ellipsis">{{ file.name }}</div>\n </template>\n</van-uploader>\n\n<style>\n .preview-cover {\n position: absolute;\n bottom: 0;\n box-sizing: border-box;\n width: 100%;\n padding: 4px;\n color: #fff;\n font-size: 12px;\n text-align: center;\n background: rgba(0, 0, 0, 0.3);\n }\n</style>\n
\nUsing preview-size
prop to custom the size of preview image.
<!-- The default unit is px -->\n<van-uploader v-model="fileList" preview-size="60" />\n<!-- Support other units, such as rem, vh, vw -->\n<van-uploader v-model="fileList" preview-size="5rem" />\n
\nYou can set the width and height separately.
\n<van-uploader v-model="fileList" :preview-size="[60, 40]" />\n
\n<van-uploader :before-read="beforeRead" />\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n // \u8FD4\u56DE\u5E03\u5C14\u503C\n const beforeRead = (file) => {\n if (file.type !== 'image/jpeg') {\n showToast('Please upload an image in jpg format');\n return false;\n }\n return true;\n };\n\n // \u8FD4\u56DE Promise\n const asyncBeforeRead = (file) =>\n new Promise((resolve, reject) => {\n if (file.type !== 'image/jpeg') {\n showToast('Please upload an image in jpg format');\n reject();\n } else {\n const img = new File(['foo'], 'bar.jpg', {\n type: 'image/jpeg',\n });\n resolve(img);\n }\n });\n\n return {\n beforeRead,\n asyncBeforeRead,\n };\n },\n};\n
\nUse disabled
prop to disable uploader.
<van-uploader disabled />\n
\n<van-uploader v-model="fileList" :deletable="false" />\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const fileList = ref([\n {\n url: 'https://fastly.jsdelivr.net/npm/@vant/assets/sand.jpeg',\n deletable: true,\n beforeDelete: () => {\n showToast(\n 'Customize the events and styles of a single preview image',\n );\n },\n },\n {\n url: 'https://fastly.jsdelivr.net/npm/@vant/assets/tree.jpeg',\n imageFit: 'contain',\n },\n ]);\n\n return { fileList };\n },\n};\n
\n<van-uploader v-model="fileList" reupload max-count="2" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const fileList = ref([\n { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },\n ]);\n\n return { fileList };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nList of uploaded files | \nFileListItem[] | \n- | \n
accept | \nAccepted file type | \nstring | \nimage/* | \n
name | \nInput name, usually a unique string or number | \nnumber | string | \n- | \n
preview-size | \nSize of preview image | \nnumber | string | Array | \n80px | \n
preview-image | \nWhether to show image preview | \nboolean | \ntrue | \n
preview-full-image | \nWhether to show full screen image preview when image is clicked | \nboolean | \ntrue | \n
preview-options | \nOptions of full screen image preview, see ImagePreview | \nobject | \n- | \n
multiple | \nWhether to enable multiple selection pictures | \nboolean | \nfalse | \n
disabled | \nWhether to disabled the upload | \nboolean | \nfalse | \n
readonly | \nWhether to make upload area readonly | \nboolean | \nfalse | \n
deletable | \nWhether to show delete icon | \nboolean | \ntrue | \n
reupload v4.4.0 | \nWhether to enable reupload, if enabled, the image preview will be disabled | \nboolean | \nfalse | \n
show-upload | \nWhether to show upload area | \nboolean | \ntrue | \n
lazy-load | \nWhether to enable lazy load, should register Lazyload component | \nboolean | \nfalse | \n
capture | \nCapture, can be set to camera | \nstring | \n- | \n
after-read | \nHook after reading the file | \nFunction | \n- | \n
before-read | \nHook before reading the file, return false to stop reading the file, can return Promise | \nFunction | \n- | \n
before-delete | \nHook before delete the file, return false to stop reading the file, can return Promise | \nFunction | \n- | \n
max-size | \nMax size of file | \nnumber | string | (file: File) => boolean | \nInfinity | \n
max-count | \nMax count of image | \nnumber | string | \nInfinity | \n
result-type | \nType of file read result, can be set to file text | \nstring | \ndataUrl | \n
upload-text | \nUpload text | \nstring | \n- | \n
image-fit | \nPreview image fit mode | \nstring | \ncover | \n
upload-icon | \nUpload icon | \nstring | \nphotograph | \n
\n\nTips: accept, capture and multiple are the attributes of the native input tag, there may be some compatibility issues under different systems and WebView.
\n
Event | \nDescription | \nArguments | \n
---|---|---|
oversize | \nEmitted when file size over limit | \nSame as after-read | \n
click-upload | \nEmitted when click upload area | \nevent: MouseEvent | \n
click-preview | \nEmitted when preview image is clicked | \nSame as after-read | \n
click-reupload | \nEmitted when reupload image is clicked | \nSame as after-read | \n
close-preview | \nEmitted when the full screen image preview is closed | \n- | \n
delete | \nEmitted when preview file is deleted | \nSame as after-read | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
default | \nCustom upload area | \n- | \n
preview-delete | \nCustom delete icon | \n- | \n
preview-cover | \nCustom content that covers the image preview | \nitem: FileListItem | \n
Attribute | \nDescription | \nType | \n
---|---|---|
file | \nFile object | \nobject | \n
detail | \nDetail info, contains name and index | \nobject | \n
Value | \nDescription | \n
---|---|
file | \nResult contains File object | \n
text | \nResult contains File object and text content | \n
dataUrl | \nResult contains File object and base64 content | \n
Use ref to get Uploader instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
closeImagePreview | \nClose full screen image preview | \n- | \n- | \n
chooseFile | \nTrigger choosing files, works with the user action context only because of browser security | \n- | \n- | \n
The component exports the following type definitions:
\nimport type {\n UploaderProps,\n UploaderInstance,\n UploaderResultType,\n UploaderFileListItem,\n} from 'vant';\n
\nUploaderInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { UploaderInstance } from 'vant';\n\nconst uploaderRef = ref<UploaderInstance>();\n\nuploaderRef.value?.chooseFile();\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-uploader-size | \n80px | \n- | \n
--van-uploader-icon-size | \n24px | \n- | \n
--van-uploader-icon-color | \nvar(--van-gray-4) | \n- | \n
--van-uploader-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-uploader-text-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-uploader-upload-background | \nvar(--van-gray-1) | \n- | \n
--van-uploader-upload-active-color | \nvar(--van-active-color) | \n- | \n
--van-uploader-delete-color | \nvar(--van-white) | \n- | \n
--van-uploader-delete-icon-size | \n14px | \n- | \n
--van-uploader-delete-background | \nrgba(0, 0, 0, 0.7) | \n- | \n
--van-uploader-file-background | \nvar(--van-background) | \n- | \n
--van-uploader-file-icon-size | \n20px | \n- | \n
--van-uploader-file-icon-color | \nvar(--van-gray-7) | \n- | \n
--van-uploader-file-name-padding | \n0 var(--van-padding-base) | \n- | \n
--van-uploader-file-name-margin-top | \nvar(--van-padding-xs) | \n- | \n
--van-uploader-file-name-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-uploader-file-name-text-color | \nvar(--van-gray-7) | \n- | \n
--van-uploader-mask-text-color | \nvar(--van-white) | \n- | \n
--van-uploader-mask-background | \nfade(var(--van-gray-8), 88%) | \n- | \n
--van-uploader-mask-icon-size | \n22px | \n- | \n
--van-uploader-mask-message-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-uploader-mask-message-line-height | \nvar(--van-line-height-xs) | \n- | \n
--van-uploader-loading-icon-size | \n22px | \n- | \n
--van-uploader-loading-icon-color | \nvar(--van-white) | \n- | \n
--van-uploader-disabled-opacity | \nvar(--van-disabled-opacity) | \n- | \n
--van-uploader-border-radius | \n0px | \n- | \n
When uploading an image, if the user has not granted camera permission to the current app, the Uploader component will not work.
\nYou can determine if camera permission has been granted by using the getUserMedia method provided by the browser (please note that the getUserMedia
method cannot be used in iOS 10).
Here is a simplified example:
\nnavigator.mediaDevices\n .getUserMedia({ video: true })\n .then((stream) => {\n console.log(stream);\n })\n .catch((err) => {\n console.log(err);\n });\n
\nUsed to upload a local image or file to the server and display a preview image and upload progress during the upload process. The Uploader component does not currently contain the interface logic for uploading files to the server, this step needs to be implemented by the user.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Uploader } from 'vant';\n\nconst app = createApp();\napp.use(Uploader);\n
\n<van-uploader :after-read="afterRead" />\n
\nexport default {\n setup() {\n const afterRead = (file) => {\n console.log(file);\n };\n\n return {\n afterRead,\n };\n },\n};\n
\n<van-uploader v-model="fileList" multiple />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const fileList = ref([\n { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },\n { url: 'https://cloud-image', isImage: true },\n ]);\n\n return {\n fileList,\n };\n },\n};\n
\n<van-uploader v-model="fileList" :after-read="afterRead" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const fileList = ref([\n {\n url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg',\n status: 'uploading',\n message: 'Uploading...',\n },\n {\n url: 'https://fastly.jsdelivr.net/npm/@vant/assets/tree.jpeg',\n status: 'failed',\n message: 'Failed',\n },\n ]);\n\n const afterRead = (file) => {\n file.status = 'uploading';\n file.message = 'Uploading...';\n\n setTimeout(() => {\n file.status = 'failed';\n file.message = 'Failed';\n }, 1000);\n };\n\n return {\n fileList,\n afterRead,\n };\n },\n};\n
\n<van-uploader v-model="fileList" multiple :max-count="2" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const fileList = ref([]);\n\n return {\n fileList,\n };\n },\n};\n
\n<van-uploader multiple :max-size="500 * 1024" @oversize="onOversize" />\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onOversize = (file) => {\n console.log(file);\n showToast('File size cannot exceed 500kb');\n };\n\n return {\n onOversize,\n };\n },\n};\n
\nIf you need to make different size limits for different types of files, you can pass a function to the max-size
props.
<van-uploader multiple :max-size="isOverSize" />\n
\nexport default {\n setup() {\n const isOverSize = (file) => {\n const maxSize = file.type === 'image/jpeg' ? 500 * 1024 : 1000 * 1024;\n return file.size >= maxSize;\n };\n return {\n isOverSize,\n };\n },\n};\n
\n<van-uploader>\n <van-button icon="plus" type="primary">Upload Image</van-button>\n</van-uploader>\n
\n<van-uploader v-model="fileList">\n <template #preview-cover="{ file }">\n <div class="preview-cover van-ellipsis">{{ file.name }}</div>\n </template>\n</van-uploader>\n\n<style>\n .preview-cover {\n position: absolute;\n bottom: 0;\n box-sizing: border-box;\n width: 100%;\n padding: 4px;\n color: #fff;\n font-size: 12px;\n text-align: center;\n background: rgba(0, 0, 0, 0.3);\n }\n</style>\n
\nUsing preview-size
prop to custom the size of preview image.
<!-- The default unit is px -->\n<van-uploader v-model="fileList" preview-size="60" />\n<!-- Support other units, such as rem, vh, vw -->\n<van-uploader v-model="fileList" preview-size="5rem" />\n
\nYou can set the width and height separately.
\n<van-uploader v-model="fileList" :preview-size="[60, 40]" />\n
\n<van-uploader :before-read="beforeRead" />\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n // \u8FD4\u56DE\u5E03\u5C14\u503C\n const beforeRead = (file) => {\n if (file.type !== 'image/jpeg') {\n showToast('Please upload an image in jpg format');\n return false;\n }\n return true;\n };\n\n // \u8FD4\u56DE Promise\n const asyncBeforeRead = (file) =>\n new Promise((resolve, reject) => {\n if (file.type !== 'image/jpeg') {\n showToast('Please upload an image in jpg format');\n reject();\n } else {\n const img = new File(['foo'], 'bar.jpg', {\n type: 'image/jpeg',\n });\n resolve(img);\n }\n });\n\n return {\n beforeRead,\n asyncBeforeRead,\n };\n },\n};\n
\nUse disabled
prop to disable uploader.
<van-uploader disabled />\n
\n<van-uploader v-model="fileList" :deletable="false" />\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const fileList = ref([\n {\n url: 'https://fastly.jsdelivr.net/npm/@vant/assets/sand.jpeg',\n deletable: true,\n beforeDelete: () => {\n showToast(\n 'Customize the events and styles of a single preview image',\n );\n },\n },\n {\n url: 'https://fastly.jsdelivr.net/npm/@vant/assets/tree.jpeg',\n imageFit: 'contain',\n },\n ]);\n\n return { fileList };\n },\n};\n
\n<van-uploader v-model="fileList" reupload max-count="2" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const fileList = ref([\n { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },\n ]);\n\n return { fileList };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nList of uploaded files | \nFileListItem[] | \n- | \n
accept | \nAccepted file type | \nstring | \nimage/* | \n
name | \nInput name, usually a unique string or number | \nnumber | string | \n- | \n
preview-size | \nSize of preview image | \nnumber | string | Array | \n80px | \n
preview-image | \nWhether to show image preview | \nboolean | \ntrue | \n
preview-full-image | \nWhether to show full screen image preview when image is clicked | \nboolean | \ntrue | \n
preview-options | \nOptions of full screen image preview, see ImagePreview | \nobject | \n- | \n
multiple | \nWhether to enable multiple selection pictures | \nboolean | \nfalse | \n
disabled | \nWhether to disabled the upload | \nboolean | \nfalse | \n
readonly | \nWhether to make upload area readonly | \nboolean | \nfalse | \n
deletable | \nWhether to show delete icon | \nboolean | \ntrue | \n
reupload v4.4.0 | \nWhether to enable reupload, if enabled, the image preview will be disabled | \nboolean | \nfalse | \n
show-upload | \nWhether to show upload area | \nboolean | \ntrue | \n
lazy-load | \nWhether to enable lazy load, should register Lazyload component | \nboolean | \nfalse | \n
capture | \nCapture, can be set to camera | \nstring | \n- | \n
after-read | \nHook after reading the file | \nFunction | \n- | \n
before-read | \nHook before reading the file, return false to stop reading the file, can return Promise | \nFunction | \n- | \n
before-delete | \nHook before delete the file, return false to stop reading the file, can return Promise | \nFunction | \n- | \n
max-size | \nMax size of file | \nnumber | string | (file: File) => boolean | \nInfinity | \n
max-count | \nMax count of image | \nnumber | string | \nInfinity | \n
result-type | \nType of file read result, can be set to file text | \nstring | \ndataUrl | \n
upload-text | \nUpload text | \nstring | \n- | \n
image-fit | \nPreview image fit mode | \nstring | \ncover | \n
upload-icon | \nUpload icon | \nstring | \nphotograph | \n
\n\nTips: accept, capture and multiple are the attributes of the native input tag, there may be some compatibility issues under different systems and WebView.
\n
Event | \nDescription | \nArguments | \n
---|---|---|
oversize | \nEmitted when file size over limit | \nSame as after-read | \n
click-upload | \nEmitted when click upload area | \nevent: MouseEvent | \n
click-preview | \nEmitted when preview image is clicked | \nSame as after-read | \n
click-reupload | \nEmitted when reupload image is clicked | \nSame as after-read | \n
close-preview | \nEmitted when the full screen image preview is closed | \n- | \n
delete | \nEmitted when preview file is deleted | \nSame as after-read | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
default | \nCustom upload area | \n- | \n
preview-delete | \nCustom delete icon | \n- | \n
preview-cover | \nCustom content that covers the image preview | \nitem: FileListItem | \n
Attribute | \nDescription | \nType | \n
---|---|---|
file | \nFile object | \nobject | \n
detail | \nDetail info, contains name and index | \nobject | \n
Value | \nDescription | \n
---|---|
file | \nResult contains File object | \n
text | \nResult contains File object and text content | \n
dataUrl | \nResult contains File object and base64 content | \n
Use ref to get Uploader instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
closeImagePreview | \nClose full screen image preview | \n- | \n- | \n
chooseFile | \nTrigger choosing files, works with the user action context only because of browser security | \n- | \n- | \n
The component exports the following type definitions:
\nimport type {\n UploaderProps,\n UploaderInstance,\n UploaderResultType,\n UploaderFileListItem,\n} from 'vant';\n
\nUploaderInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { UploaderInstance } from 'vant';\n\nconst uploaderRef = ref<UploaderInstance>();\n\nuploaderRef.value?.chooseFile();\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-uploader-size | \n80px | \n- | \n
--van-uploader-icon-size | \n24px | \n- | \n
--van-uploader-icon-color | \nvar(--van-gray-4) | \n- | \n
--van-uploader-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-uploader-text-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-uploader-upload-background | \nvar(--van-gray-1) | \n- | \n
--van-uploader-upload-active-color | \nvar(--van-active-color) | \n- | \n
--van-uploader-delete-color | \nvar(--van-white) | \n- | \n
--van-uploader-delete-icon-size | \n14px | \n- | \n
--van-uploader-delete-background | \nrgba(0, 0, 0, 0.7) | \n- | \n
--van-uploader-file-background | \nvar(--van-background) | \n- | \n
--van-uploader-file-icon-size | \n20px | \n- | \n
--van-uploader-file-icon-color | \nvar(--van-gray-7) | \n- | \n
--van-uploader-file-name-padding | \n0 var(--van-padding-base) | \n- | \n
--van-uploader-file-name-margin-top | \nvar(--van-padding-xs) | \n- | \n
--van-uploader-file-name-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-uploader-file-name-text-color | \nvar(--van-gray-7) | \n- | \n
--van-uploader-mask-text-color | \nvar(--van-white) | \n- | \n
--van-uploader-mask-background | \nfade(var(--van-gray-8), 88%) | \n- | \n
--van-uploader-mask-icon-size | \n22px | \n- | \n
--van-uploader-mask-message-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-uploader-mask-message-line-height | \nvar(--van-line-height-xs) | \n- | \n
--van-uploader-loading-icon-size | \n22px | \n- | \n
--van-uploader-loading-icon-color | \nvar(--van-white) | \n- | \n
--van-uploader-disabled-opacity | \nvar(--van-disabled-opacity) | \n- | \n
--van-uploader-border-radius | \n0px | \n- | \n
When uploading an image, if the user has not granted camera permission to the current app, the Uploader component will not work.
\nYou can determine if camera permission has been granted by using the getUserMedia method provided by the browser (please note that the getUserMedia
method cannot be used in iOS 10).
Here is a simplified example:
\nnavigator.mediaDevices\n .getUserMedia({ video: true })\n .then((stream) => {\n console.log(stream);\n })\n .catch((err) => {\n console.log(err);\n });\n
\n\u5546\u54C1\u5361\u7247\uFF0C\u7528\u4E8E\u5C55\u793A\u5546\u54C1\u7684\u56FE\u7247\u3001\u4EF7\u683C\u7B49\u4FE1\u606F\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Card } from 'vant';\n\nconst app = createApp();\napp.use(Card);\n
\n<van-card\n num="2"\n price="2.00"\n desc="\u63CF\u8FF0\u4FE1\u606F"\n title="\u5546\u54C1\u6807\u9898"\n thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"\n/>\n
\n\u901A\u8FC7 origin-price
\u8BBE\u7F6E\u5546\u54C1\u539F\u4EF7\uFF0C\u901A\u8FC7 tag
\u8BBE\u7F6E\u5546\u54C1\u5DE6\u4E0A\u89D2\u6807\u7B7E\u3002
<van-card\n num="2"\n tag="\u6807\u7B7E"\n price="2.00"\n desc="\u63CF\u8FF0\u4FE1\u606F"\n title="\u5546\u54C1\u6807\u9898"\n thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"\n origin-price="10.00"\n/>\n
\nCard
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u591A\u4E2A\u63D2\u69FD\uFF0C\u53EF\u4EE5\u7075\u6D3B\u5730\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002
<van-card\n num="2"\n price="2.00"\n desc="\u63CF\u8FF0\u4FE1\u606F"\n title="\u5546\u54C1\u6807\u9898"\n thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"\n>\n <template #tags>\n <van-tag plain type="primary">\u6807\u7B7E</van-tag>\n <van-tag plain type="primary">\u6807\u7B7E</van-tag>\n </template>\n <template #footer>\n <van-button size="mini">\u6309\u94AE</van-button>\n <van-button size="mini">\u6309\u94AE</van-button>\n </template>\n</van-card>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
thumb | \n\u5DE6\u4FA7\u56FE\u7247 URL | \nstring | \n- | \n
title | \n\u6807\u9898 | \nstring | \n- | \n
desc | \n\u63CF\u8FF0 | \nstring | \n- | \n
tag | \n\u56FE\u7247\u89D2\u6807 | \nstring | \n- | \n
num | \n\u5546\u54C1\u6570\u91CF | \nnumber | string | \n- | \n
price | \n\u5546\u54C1\u4EF7\u683C | \nnumber | string | \n- | \n
origin-price | \n\u5546\u54C1\u5212\u7EBF\u539F\u4EF7 | \nnumber | string | \n- | \n
centered | \n\u5185\u5BB9\u662F\u5426\u5782\u76F4\u5C45\u4E2D | \nboolean | \nfalse | \n
currency | \n\u8D27\u5E01\u7B26\u53F7 | \nstring | \n\xa5 | \n
thumb-link | \n\u70B9\u51FB\u5DE6\u4FA7\u56FE\u7247\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740 | \nstring | \n- | \n
lazy-load | \n\u662F\u5426\u5F00\u542F\u56FE\u7247\u61D2\u52A0\u8F7D\uFF0C\u987B\u914D\u5408 Lazyload \u7EC4\u4EF6\u4F7F\u7528 | \nboolean | \nfalse | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
click-thumb | \n\u70B9\u51FB\u81EA\u5B9A\u4E49\u56FE\u7247\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
title | \n\u81EA\u5B9A\u4E49\u6807\u9898 | \n
desc | \n\u81EA\u5B9A\u4E49\u63CF\u8FF0 | \n
num | \n\u81EA\u5B9A\u4E49\u6570\u91CF | \n
price | \n\u81EA\u5B9A\u4E49\u4EF7\u683C | \n
origin-price | \n\u81EA\u5B9A\u4E49\u5546\u54C1\u539F\u4EF7 | \n
price-top | \n\u81EA\u5B9A\u4E49\u4EF7\u683C\u4E0A\u65B9\u533A\u57DF | \n
bottom | \n\u81EA\u5B9A\u4E49\u4EF7\u683C\u4E0B\u65B9\u533A\u57DF | \n
thumb | \n\u81EA\u5B9A\u4E49\u56FE\u7247 | \n
tag | \n\u81EA\u5B9A\u4E49\u56FE\u7247\u89D2\u6807 | \n
tags | \n\u81EA\u5B9A\u4E49\u63CF\u8FF0\u4E0B\u65B9\u6807\u7B7E\u533A\u57DF | \n
footer | \n\u81EA\u5B9A\u4E49\u53F3\u4E0B\u89D2\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { CardProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-card-padding | \nvar(--van-padding-xs) var(--van-padding-md) | \n- | \n
--van-card-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-card-text-color | \nvar(--van-text-color) | \n- | \n
--van-card-background | \nvar(--van-background) | \n- | \n
--van-card-thumb-size | \n88px | \n- | \n
--van-card-thumb-radius | \nvar(--van-radius-lg) | \n- | \n
--van-card-title-line-height | \n16px | \n- | \n
--van-card-desc-color | \nvar(--van-text-color-2) | \n- | \n
--van-card-desc-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-card-price-color | \nvar(--van-text-color) | \n- | \n
--van-card-origin-price-color | \nvar(--van-text-color-2) | \n- | \n
--van-card-num-color | \nvar(--van-text-color-2) | \n- | \n
--van-card-origin-price-font-size | \nvar(--van-font-size-xs) | \n- | \n
--van-card-price-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-card-price-integer-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-card-price-font | \nvar(--van-price-font) | \n- | \n
\u5546\u54C1\u5361\u7247\uFF0C\u7528\u4E8E\u5C55\u793A\u5546\u54C1\u7684\u56FE\u7247\u3001\u4EF7\u683C\u7B49\u4FE1\u606F\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Card } from 'vant';\n\nconst app = createApp();\napp.use(Card);\n
\n<van-card\n num="2"\n price="2.00"\n desc="\u63CF\u8FF0\u4FE1\u606F"\n title="\u5546\u54C1\u6807\u9898"\n thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"\n/>\n
\n\u901A\u8FC7 origin-price
\u8BBE\u7F6E\u5546\u54C1\u539F\u4EF7\uFF0C\u901A\u8FC7 tag
\u8BBE\u7F6E\u5546\u54C1\u5DE6\u4E0A\u89D2\u6807\u7B7E\u3002
<van-card\n num="2"\n tag="\u6807\u7B7E"\n price="2.00"\n desc="\u63CF\u8FF0\u4FE1\u606F"\n title="\u5546\u54C1\u6807\u9898"\n thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"\n origin-price="10.00"\n/>\n
\nCard
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u591A\u4E2A\u63D2\u69FD\uFF0C\u53EF\u4EE5\u7075\u6D3B\u5730\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002
<van-card\n num="2"\n price="2.00"\n desc="\u63CF\u8FF0\u4FE1\u606F"\n title="\u5546\u54C1\u6807\u9898"\n thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"\n>\n <template #tags>\n <van-tag plain type="primary">\u6807\u7B7E</van-tag>\n <van-tag plain type="primary">\u6807\u7B7E</van-tag>\n </template>\n <template #footer>\n <van-button size="mini">\u6309\u94AE</van-button>\n <van-button size="mini">\u6309\u94AE</van-button>\n </template>\n</van-card>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
thumb | \n\u5DE6\u4FA7\u56FE\u7247 URL | \nstring | \n- | \n
title | \n\u6807\u9898 | \nstring | \n- | \n
desc | \n\u63CF\u8FF0 | \nstring | \n- | \n
tag | \n\u56FE\u7247\u89D2\u6807 | \nstring | \n- | \n
num | \n\u5546\u54C1\u6570\u91CF | \nnumber | string | \n- | \n
price | \n\u5546\u54C1\u4EF7\u683C | \nnumber | string | \n- | \n
origin-price | \n\u5546\u54C1\u5212\u7EBF\u539F\u4EF7 | \nnumber | string | \n- | \n
centered | \n\u5185\u5BB9\u662F\u5426\u5782\u76F4\u5C45\u4E2D | \nboolean | \nfalse | \n
currency | \n\u8D27\u5E01\u7B26\u53F7 | \nstring | \n\xa5 | \n
thumb-link | \n\u70B9\u51FB\u5DE6\u4FA7\u56FE\u7247\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740 | \nstring | \n- | \n
lazy-load | \n\u662F\u5426\u5F00\u542F\u56FE\u7247\u61D2\u52A0\u8F7D\uFF0C\u987B\u914D\u5408 Lazyload \u7EC4\u4EF6\u4F7F\u7528 | \nboolean | \nfalse | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
click-thumb | \n\u70B9\u51FB\u81EA\u5B9A\u4E49\u56FE\u7247\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
title | \n\u81EA\u5B9A\u4E49\u6807\u9898 | \n
desc | \n\u81EA\u5B9A\u4E49\u63CF\u8FF0 | \n
num | \n\u81EA\u5B9A\u4E49\u6570\u91CF | \n
price | \n\u81EA\u5B9A\u4E49\u4EF7\u683C | \n
origin-price | \n\u81EA\u5B9A\u4E49\u5546\u54C1\u539F\u4EF7 | \n
price-top | \n\u81EA\u5B9A\u4E49\u4EF7\u683C\u4E0A\u65B9\u533A\u57DF | \n
bottom | \n\u81EA\u5B9A\u4E49\u4EF7\u683C\u4E0B\u65B9\u533A\u57DF | \n
thumb | \n\u81EA\u5B9A\u4E49\u56FE\u7247 | \n
tag | \n\u81EA\u5B9A\u4E49\u56FE\u7247\u89D2\u6807 | \n
tags | \n\u81EA\u5B9A\u4E49\u63CF\u8FF0\u4E0B\u65B9\u6807\u7B7E\u533A\u57DF | \n
footer | \n\u81EA\u5B9A\u4E49\u53F3\u4E0B\u89D2\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { CardProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-card-padding | \nvar(--van-padding-xs) var(--van-padding-md) | \n- | \n
--van-card-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-card-text-color | \nvar(--van-text-color) | \n- | \n
--van-card-background | \nvar(--van-background) | \n- | \n
--van-card-thumb-size | \n88px | \n- | \n
--van-card-thumb-radius | \nvar(--van-radius-lg) | \n- | \n
--van-card-title-line-height | \n16px | \n- | \n
--van-card-desc-color | \nvar(--van-text-color-2) | \n- | \n
--van-card-desc-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-card-price-color | \nvar(--van-text-color) | \n- | \n
--van-card-origin-price-color | \nvar(--van-text-color-2) | \n- | \n
--van-card-num-color | \nvar(--van-text-color-2) | \n- | \n
--van-card-origin-price-font-size | \nvar(--van-font-size-xs) | \n- | \n
--van-card-price-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-card-price-integer-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-card-price-font | \nvar(--van-price-font) | \n- | \n
Used to display a set of placeholder graphics during the content loading process.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport {\n Skeleton,\n SkeletonTitle,\n SkeletonImage,\n SkeletonAvatar,\n SkeletonParagraph,\n} from 'vant';\n\nconst app = createApp();\napp.use(Skeleton);\napp.use(SkeletonTitle);\napp.use(SkeletonImage);\napp.use(SkeletonAvatar);\napp.use(SkeletonParagraph);\n
\n<van-skeleton title :row="3" />\n
\n<van-skeleton title avatar :row="3" />\n
\n<van-skeleton title avatar :row="3" :loading="loading">\n <div>Content</div>\n</van-skeleton>\n
\nimport { ref, onMounted } from 'vue';\n\nexport default {\n setup() {\n const loading = ref(true);\n\n onMounted(() => {\n loading.value = false;\n });\n\n return {\n loading,\n };\n },\n};\n
\nUsing template
slots to custom skeleton content.
<van-skeleton>\n <template #template>\n <div :style="{ display: 'flex', width: '100%' }">\n <van-skeleton-image />\n <div :style="{ flex: 1, marginLeft: '16px' }">\n <van-skeleton-paragraph row-width="60%" />\n <van-skeleton-paragraph />\n <van-skeleton-paragraph />\n <van-skeleton-paragraph />\n </div>\n </div>\n </template>\n</van-skeleton>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
row | \nRow count | \nnumber | string | \n0 | \n
row-width | \nRow width, can be array | \nnumber | string | (number | string)[] | \n100% | \n
title | \nWhether to show title placeholder | \nboolean | \nfalse | \n
avatar | \nWhether to show avatar placeholder | \nboolean | \nfalse | \n
loading | \nWhether to show skeleton, pass false to show child component | \nboolean | \ntrue | \n
animate | \nWhether to enable animation | \nboolean | \ntrue | \n
round | \nWhether to show round title and paragraph | \nboolean | \nfalse | \n
title-width | \nTitle width | \nnumber | string | \n40% | \n
avatar-size | \nSize of avatar placeholder | \nnumber | string | \n32px | \n
avatar-shape | \nShape of avatar placeholder, can be set to square | \nstring | \nround | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
round | \nWhether to show round paragraph | \nboolean | \nfalse | \n
row-width | \nParagraph width | \nstring | \n100% | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
round | \nWhether to show round title | \nboolean | \nfalse | \n
title-width | \nTitle width | \nnumber | string | \n40% | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
avatar-size | \nSize of avatar placeholder | \nnumber | string | \n32px | \n
avatar-shape | \nShape of avatar placeholder, can be set to square | \nstring | \nround | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
image-size | \nSize of image placeholder | \nnumber | string | \n32px | \n
image-shape | \nShape of image placeholder, can be set to square | \nstring | \nround | \n
Name | \nDescription | \n
---|---|
default | \nDefault slot | \n
template | \nCustom content | \n
The component exports the following type definitions:
\nimport type {\n SkeletonProps,\n SkeletonImageProps,\n SkeletonTitleProps,\n SkeletonAvatarShape,\n SkeletonImageShape,\n SkeletonParagraphProps,\n} from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-skeleton-row-height | \n16px | \n- | \n
--van-skeleton-row-background | \nvar(--van-active-color) | \n- | \n
--van-skeleton-row-margin-top | \nvar(--van-padding-sm) | \n- | \n
--van-skeleton-title-width | \n40% | \n- | \n
--van-skeleton-avatar-size | \n32px | \n- | \n
--van-skeleton-avatar-background | \nvar(--van-active-color) | \n- | \n
--van-skeleton-duration | \n1.2s | \n- | \n
--van-skeleton-image-size | \n96px | \n\n |
--van-skeleton-image-radius | \n24px | \n- | \n
Used to display a set of placeholder graphics during the content loading process.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport {\n Skeleton,\n SkeletonTitle,\n SkeletonImage,\n SkeletonAvatar,\n SkeletonParagraph,\n} from 'vant';\n\nconst app = createApp();\napp.use(Skeleton);\napp.use(SkeletonTitle);\napp.use(SkeletonImage);\napp.use(SkeletonAvatar);\napp.use(SkeletonParagraph);\n
\n<van-skeleton title :row="3" />\n
\n<van-skeleton title avatar :row="3" />\n
\n<van-skeleton title avatar :row="3" :loading="loading">\n <div>Content</div>\n</van-skeleton>\n
\nimport { ref, onMounted } from 'vue';\n\nexport default {\n setup() {\n const loading = ref(true);\n\n onMounted(() => {\n loading.value = false;\n });\n\n return {\n loading,\n };\n },\n};\n
\nUsing template
slots to custom skeleton content.
<van-skeleton>\n <template #template>\n <div :style="{ display: 'flex', width: '100%' }">\n <van-skeleton-image />\n <div :style="{ flex: 1, marginLeft: '16px' }">\n <van-skeleton-paragraph row-width="60%" />\n <van-skeleton-paragraph />\n <van-skeleton-paragraph />\n <van-skeleton-paragraph />\n </div>\n </div>\n </template>\n</van-skeleton>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
row | \nRow count | \nnumber | string | \n0 | \n
row-width | \nRow width, can be array | \nnumber | string | (number | string)[] | \n100% | \n
title | \nWhether to show title placeholder | \nboolean | \nfalse | \n
avatar | \nWhether to show avatar placeholder | \nboolean | \nfalse | \n
loading | \nWhether to show skeleton, pass false to show child component | \nboolean | \ntrue | \n
animate | \nWhether to enable animation | \nboolean | \ntrue | \n
round | \nWhether to show round title and paragraph | \nboolean | \nfalse | \n
title-width | \nTitle width | \nnumber | string | \n40% | \n
avatar-size | \nSize of avatar placeholder | \nnumber | string | \n32px | \n
avatar-shape | \nShape of avatar placeholder, can be set to square | \nstring | \nround | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
round | \nWhether to show round paragraph | \nboolean | \nfalse | \n
row-width | \nParagraph width | \nstring | \n100% | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
round | \nWhether to show round title | \nboolean | \nfalse | \n
title-width | \nTitle width | \nnumber | string | \n40% | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
avatar-size | \nSize of avatar placeholder | \nnumber | string | \n32px | \n
avatar-shape | \nShape of avatar placeholder, can be set to square | \nstring | \nround | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
image-size | \nSize of image placeholder | \nnumber | string | \n32px | \n
image-shape | \nShape of image placeholder, can be set to square | \nstring | \nround | \n
Name | \nDescription | \n
---|---|
default | \nDefault slot | \n
template | \nCustom content | \n
The component exports the following type definitions:
\nimport type {\n SkeletonProps,\n SkeletonImageProps,\n SkeletonTitleProps,\n SkeletonAvatarShape,\n SkeletonImageShape,\n SkeletonParagraphProps,\n} from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-skeleton-row-height | \n16px | \n- | \n
--van-skeleton-row-background | \nvar(--van-active-color) | \n- | \n
--van-skeleton-row-margin-top | \nvar(--van-padding-sm) | \n- | \n
--van-skeleton-title-width | \n40% | \n- | \n
--van-skeleton-avatar-size | \n32px | \n- | \n
--van-skeleton-avatar-background | \nvar(--van-active-color) | \n- | \n
--van-skeleton-duration | \n1.2s | \n- | \n
--van-skeleton-image-size | \n96px | \n\n |
--van-skeleton-image-radius | \n24px | \n- | \n
The pop-up modal panel at the bottom contains multiple options related to the current situation.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { ActionSheet } from 'vant';\n\nconst app = createApp();\napp.use(ActionSheet);\n
\nUse actions
prop to set options of action-sheet.
<van-cell is-link title="Basic Usage" @click="show = true" />\n<van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const show = ref(false);\n const actions = [\n { name: 'Option 1' },\n { name: 'Option 2' },\n { name: 'Option 3' },\n ];\n const onSelect = (item) => {\n show.value = false;\n showToast(item.name);\n };\n\n return {\n show,\n actions,\n onSelect,\n };\n },\n};\n
\n<van-action-sheet\n v-model:show="show"\n :actions="actions"\n cancel-text="Cancel"\n close-on-click-action\n @cancel="onCancel"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const show = ref(false);\n const actions = [\n { name: 'Option 1' },\n { name: 'Option 2' },\n { name: 'Option 3' },\n ];\n const onCancel = () => showToast('cancel');\n\n return {\n show,\n actions,\n onCancel,\n };\n },\n};\n
\n<van-action-sheet\n v-model:show="show"\n :actions="actions"\n cancel-text="Cancel"\n description="Description"\n close-on-click-action\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n const actions = [\n { name: 'Option 1' },\n { name: 'Option 2' },\n { name: 'Option 3', subname: 'Description' },\n ];\n\n return {\n show,\n actions,\n };\n },\n};\n
\n<van-action-sheet\n v-model:show="show"\n :actions="actions"\n cancel-text="Cancel"\n close-on-click-action\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n const actions = [\n { name: 'Colored Option', color: '#ee0a24' },\n { name: 'Disabled Option', disabled: true },\n { name: 'Loading Option', loading: true },\n ];\n\n return {\n show,\n actions,\n };\n },\n};\n
\n<van-action-sheet v-model:show="show" title="Title">\n <div class="content">Content</div>\n</van-action-sheet>\n\n<style>\n .content {\n padding: 16px 16px 160px;\n }\n</style>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:show | \nWhether to show ActionSheet | \nboolean | \nfalse | \n
actions | \nOptions | \nActionSheetAction[] | \n[] | \n
title | \nTitle | \nstring | \n- | \n
cancel-text | \nText of cancel button | \nstring | \n- | \n
description | \nDescription above the options | \nstring | \n- | \n
closeable | \nWhether to show close icon | \nboolean | \ntrue | \n
close-icon | \nClose icon name | \nstring | \ncross | \n
duration | \nTransition duration, unit second | \nnumber | string | \n0.3 | \n
z-index | \nSet the z-index to a fixed value | \nnumber | string | \n2000+ | \n
round | \nWhether to show round corner | \nboolean | \ntrue | \n
overlay | \nWhether to show overlay | \nboolean | \ntrue | \n
overlay-class | \nCustom overlay class | \nstring | Array | object | \n- | \n
overlay-style | \nCustom overlay style | \nobject | \n- | \n
lock-scroll | \nWhether to lock background scroll | \nboolean | \ntrue | \n
lazy-render | \nWhether to lazy render util appeared | \nboolean | \ntrue | \n
close-on-popstate | \nWhether to close when popstate | \nboolean | \ntrue | \n
close-on-click-action | \nWhether to close when an action is clicked | \nboolean | \nfalse | \n
close-on-click-overlay | \nWhether to close when overlay is clicked | \nboolean | \ntrue | \n
safe-area-inset-bottom | \nWhether to enable bottom safe area adaptation | \nboolean | \ntrue | \n
teleport | \nSpecifies a target element where ActionSheet will be mounted | \nstring | Element | \n- | \n
before-close | \nCallback function before close | \n(action: string) => boolean | Promise<boolean> | \n- | \n
Key | \nDescription | \nType | \n
---|---|---|
name | \nTitle | \nstring | \n
subname | \nSubtitle | \nstring | \n
color | \nText color | \nstring | \n
className | \nclassName for the option | \nstring | Array | object | \n
loading | \nWhether to be loading status | \nboolean | \n
disabled | \nWhether to be disabled | \nboolean | \n
callback | \nCallback function after clicked | \naction: ActionSheetAction | \n
Event | \nDescription | \nArguments | \n
---|---|---|
select | \nEmitted when an option is clicked | \naction: ActionSheetAction, index: number | \n
cancel | \nEmitted when the cancel button is clicked | \n- | \n
open | \nEmitted when opening ActionSheet | \n- | \n
close | \nEmitted when closing ActionSheet | \n- | \n
opened | \nEmitted when ActionSheet is opened | \n- | \n
closed | \nEmitted when ActionSheet is closed | \n- | \n
click-overlay | \nEmitted when overlay is clicked | \nevent: MouseEvent | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
default | \nCustom content | \n\n |
description | \nCustom description above the options | \n\n |
cancel | \nCustom the content of cancel button | \n\n |
action | \nCustom the content of action | \n{ action: ActionSheetAction, index: number } | \n
The component exports the following type definitions:
\nimport type { ActionSheetProps, ActionSheetAction } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-action-sheet-max-height | \n80% | \n- | \n
--van-action-sheet-header-height | \n48px | \n- | \n
--van-action-sheet-header-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-action-sheet-description-color | \nvar(--van-text-color-2) | \n- | \n
--van-action-sheet-description-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-action-sheet-description-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-action-sheet-item-background | \nvar(--van-background-2) | \n- | \n
--van-action-sheet-item-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-action-sheet-item-line-height | \nvar(--van-line-height-lg) | \n- | \n
--van-action-sheet-item-text-color | \nvar(--van-text-color) | \n- | \n
--van-action-sheet-item-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-action-sheet-subname-color | \nvar(--van-text-color-2) | \n- | \n
--van-action-sheet-subname-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-action-sheet-subname-line-height | \nvar(--van-line-height-sm) | \n- | \n
--van-action-sheet-close-icon-size | \n22px | \n- | \n
--van-action-sheet-close-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-action-sheet-close-icon-padding | \n0 var(--van-padding-md) | \n- | \n
--van-action-sheet-cancel-text-color | \nvar(--van-gray-7) | \n- | \n
--van-action-sheet-cancel-padding-top | \nvar(--van-padding-xs) | \n- | \n
--van-action-sheet-cancel-padding-color | \nvar(--van-background) | \n- | \n
--van-action-sheet-loading-icon-size | \n22px | \n- | \n
The pop-up modal panel at the bottom contains multiple options related to the current situation.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { ActionSheet } from 'vant';\n\nconst app = createApp();\napp.use(ActionSheet);\n
\nUse actions
prop to set options of action-sheet.
<van-cell is-link title="Basic Usage" @click="show = true" />\n<van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const show = ref(false);\n const actions = [\n { name: 'Option 1' },\n { name: 'Option 2' },\n { name: 'Option 3' },\n ];\n const onSelect = (item) => {\n show.value = false;\n showToast(item.name);\n };\n\n return {\n show,\n actions,\n onSelect,\n };\n },\n};\n
\n<van-action-sheet\n v-model:show="show"\n :actions="actions"\n cancel-text="Cancel"\n close-on-click-action\n @cancel="onCancel"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const show = ref(false);\n const actions = [\n { name: 'Option 1' },\n { name: 'Option 2' },\n { name: 'Option 3' },\n ];\n const onCancel = () => showToast('cancel');\n\n return {\n show,\n actions,\n onCancel,\n };\n },\n};\n
\n<van-action-sheet\n v-model:show="show"\n :actions="actions"\n cancel-text="Cancel"\n description="Description"\n close-on-click-action\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n const actions = [\n { name: 'Option 1' },\n { name: 'Option 2' },\n { name: 'Option 3', subname: 'Description' },\n ];\n\n return {\n show,\n actions,\n };\n },\n};\n
\n<van-action-sheet\n v-model:show="show"\n :actions="actions"\n cancel-text="Cancel"\n close-on-click-action\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n const actions = [\n { name: 'Colored Option', color: '#ee0a24' },\n { name: 'Disabled Option', disabled: true },\n { name: 'Loading Option', loading: true },\n ];\n\n return {\n show,\n actions,\n };\n },\n};\n
\n<van-action-sheet v-model:show="show" title="Title">\n <div class="content">Content</div>\n</van-action-sheet>\n\n<style>\n .content {\n padding: 16px 16px 160px;\n }\n</style>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:show | \nWhether to show ActionSheet | \nboolean | \nfalse | \n
actions | \nOptions | \nActionSheetAction[] | \n[] | \n
title | \nTitle | \nstring | \n- | \n
cancel-text | \nText of cancel button | \nstring | \n- | \n
description | \nDescription above the options | \nstring | \n- | \n
closeable | \nWhether to show close icon | \nboolean | \ntrue | \n
close-icon | \nClose icon name | \nstring | \ncross | \n
duration | \nTransition duration, unit second | \nnumber | string | \n0.3 | \n
z-index | \nSet the z-index to a fixed value | \nnumber | string | \n2000+ | \n
round | \nWhether to show round corner | \nboolean | \ntrue | \n
overlay | \nWhether to show overlay | \nboolean | \ntrue | \n
overlay-class | \nCustom overlay class | \nstring | Array | object | \n- | \n
overlay-style | \nCustom overlay style | \nobject | \n- | \n
lock-scroll | \nWhether to lock background scroll | \nboolean | \ntrue | \n
lazy-render | \nWhether to lazy render util appeared | \nboolean | \ntrue | \n
close-on-popstate | \nWhether to close when popstate | \nboolean | \ntrue | \n
close-on-click-action | \nWhether to close when an action is clicked | \nboolean | \nfalse | \n
close-on-click-overlay | \nWhether to close when overlay is clicked | \nboolean | \ntrue | \n
safe-area-inset-bottom | \nWhether to enable bottom safe area adaptation | \nboolean | \ntrue | \n
teleport | \nSpecifies a target element where ActionSheet will be mounted | \nstring | Element | \n- | \n
before-close | \nCallback function before close | \n(action: string) => boolean | Promise<boolean> | \n- | \n
Key | \nDescription | \nType | \n
---|---|---|
name | \nTitle | \nstring | \n
subname | \nSubtitle | \nstring | \n
color | \nText color | \nstring | \n
className | \nclassName for the option | \nstring | Array | object | \n
loading | \nWhether to be loading status | \nboolean | \n
disabled | \nWhether to be disabled | \nboolean | \n
callback | \nCallback function after clicked | \naction: ActionSheetAction | \n
Event | \nDescription | \nArguments | \n
---|---|---|
select | \nEmitted when an option is clicked | \naction: ActionSheetAction, index: number | \n
cancel | \nEmitted when the cancel button is clicked | \n- | \n
open | \nEmitted when opening ActionSheet | \n- | \n
close | \nEmitted when closing ActionSheet | \n- | \n
opened | \nEmitted when ActionSheet is opened | \n- | \n
closed | \nEmitted when ActionSheet is closed | \n- | \n
click-overlay | \nEmitted when overlay is clicked | \nevent: MouseEvent | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
default | \nCustom content | \n\n |
description | \nCustom description above the options | \n\n |
cancel | \nCustom the content of cancel button | \n\n |
action | \nCustom the content of action | \n{ action: ActionSheetAction, index: number } | \n
The component exports the following type definitions:
\nimport type { ActionSheetProps, ActionSheetAction } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-action-sheet-max-height | \n80% | \n- | \n
--van-action-sheet-header-height | \n48px | \n- | \n
--van-action-sheet-header-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-action-sheet-description-color | \nvar(--van-text-color-2) | \n- | \n
--van-action-sheet-description-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-action-sheet-description-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-action-sheet-item-background | \nvar(--van-background-2) | \n- | \n
--van-action-sheet-item-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-action-sheet-item-line-height | \nvar(--van-line-height-lg) | \n- | \n
--van-action-sheet-item-text-color | \nvar(--van-text-color) | \n- | \n
--van-action-sheet-item-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-action-sheet-subname-color | \nvar(--van-text-color-2) | \n- | \n
--van-action-sheet-subname-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-action-sheet-subname-line-height | \nvar(--van-line-height-sm) | \n- | \n
--van-action-sheet-close-icon-size | \n22px | \n- | \n
--van-action-sheet-close-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-action-sheet-close-icon-padding | \n0 var(--van-padding-md) | \n- | \n
--van-action-sheet-cancel-text-color | \nvar(--van-gray-7) | \n- | \n
--van-action-sheet-cancel-padding-top | \nvar(--van-padding-xs) | \n- | \n
--van-action-sheet-cancel-padding-color | \nvar(--van-background) | \n- | \n
--van-action-sheet-loading-icon-size | \n22px | \n- | \n
Please refer to Skeleton docs
\n'},null,8,t))}}}]); \ No newline at end of file diff --git a/vant/static/js/async/4914.b3deb621.js b/vant/static/js/async/4914.b3deb621.js new file mode 100644 index 00000000..02366c40 --- /dev/null +++ b/vant/static/js/async/4914.b3deb621.js @@ -0,0 +1,2 @@ +/*! For license information please see 4914.b3deb621.js.LICENSE.txt */ +(self.webpackChunk=self.webpackChunk||[]).push([["4914"],{28868:function(e,n,r){"use strict";r.r(n),r.d(n,{default:function(){return l}});var a=r("69298");let t=["innerHTML"];var l={setup:()=>({html:""}),render:()=>((0,a.openBlock)(),(0,a.createElementBlock)("div",{class:"van-doc-markdown-body",innerHTML:'Please refer to Skeleton docs
\n'},null,8,t))}}}]); \ No newline at end of file diff --git a/vant/static/js/async/4914.9bca57c8.js.LICENSE.txt b/vant/static/js/async/4914.b3deb621.js.LICENSE.txt similarity index 100% rename from vant/static/js/async/4914.9bca57c8.js.LICENSE.txt rename to vant/static/js/async/4914.b3deb621.js.LICENSE.txt diff --git a/vant/static/js/async/4921.7b528efd.js b/vant/static/js/async/4921.7b528efd.js new file mode 100644 index 00000000..d270199f --- /dev/null +++ b/vant/static/js/async/4921.7b528efd.js @@ -0,0 +1,2 @@ +/*! For license information please see 4921.7b528efd.js.LICENSE.txt */ +(self.webpackChunk=self.webpackChunk||[]).push([["4921"],{82100:function(e,t,o){"use strict";o.r(t),o.d(t,{default:function(){return r}});var n=o("58057");o.es(n,t),o("82403");var r=n.default},58057:function(e,t,o){"use strict";o.r(t),o.d(t,{default:function(){return n.default}});var n=o("70259");o.es(n,t)},70259:function(e,t,o){"use strict";o.r(t),o.d(t,{default:function(){return i}});var n=o("69298"),r=o("41405"),a=o("70656"),l=o("82626"),i=(0,n.defineComponent)({__name:"index",setup(e){var t=(0,a.useTranslate)({"zh-CN":{add:"\u65B0\u589E",edit:"\u7F16\u8F91",list:[{id:"1",name:"\u5F20\u4E09",tel:"13000000000",isDefault:!0},{id:"2",name:"\u674E\u56DB",tel:"1310000000"}],select:"\u9009\u62E9",defaultTagText:"\u9ED8\u8BA4"},"en-US":{add:"Add",edit:"Edit",list:[{id:"1",name:"John Snow",tel:"13000000000",isDefault:!0},{id:"2",name:"Ned Stark",tel:"1310000000"}],select:"Select",defaultTagText:"default"}}),o=(0,n.ref)("1"),i=()=>{(0,l.showToast)(t("add"))},u=e=>{(0,l.showToast)(t("edit")+e.id)},c=e=>{(0,l.showToast)(t("select")+e.id)};return(e,a)=>{var l=(0,n.resolveComponent)("demo-block");return(0,n.openBlock)(),(0,n.createBlock)(l,{title:(0,n.unref)(t)("basicUsage")},{default:(0,n.withCtx)(()=>[(0,n.createVNode)((0,n.unref)(r.default),{modelValue:o.value,"onUpdate:modelValue":a[0]||(a[0]=e=>o.value=e),list:(0,n.unref)(t)("list"),"default-tag-text":(0,n.unref)(t)("defaultTagText"),onAdd:i,onEdit:u,onSelect:c},null,8,["modelValue","list","default-tag-text"])]),_:1},8,["title"])}}})},54991:function(e,t,o){"use strict";o.r(t),o.d(t,{Button:function(){return a},default:function(){return l}});var n=o("59633"),r=o("34396"),a=(0,n.withInstall)(r.default),l=a},58716:function(e,t,o){"use strict";o.r(t),o.d(t,{Cell:function(){return a},default:function(){return l}});var n=o("59633"),r=o("73880"),a=(0,n.withInstall)(r.default),l=a},3578:function(e,t,o){"use strict";o.r(t),o.d(t,{route:function(){return a},routeProps:function(){return r},useRoute:function(){return l}}),o("56821"),o("5780");var n=o("69298"),r={to:[String,Object],url:String,replace:Boolean};function a(e){var{to:t,url:o,replace:n,$router:r}=e;t&&r?r[n?"replace":"push"](t):o&&(n?location.replace(o):location.href=o)}function l(){var e=(0,n.getCurrentInstance)().proxy;return()=>a(e)}},41405:function(e,t,o){"use strict";o.r(t),o.d(t,{default:function(){return a}});var n=o("59633"),r=o("81434"),a=(0,n.withInstall)(r.default)},4341:function(e,t,o){"use strict";o.r(t),o.d(t,{Loading:function(){return a},default:function(){return l}});var n=o("59633"),r=o("86512"),a=(0,n.withInstall)(r.default),l=a},354:function(e,t,o){"use strict";o.r(t),o.d(t,{RadioGroup:function(){return a},default:function(){return l}});var n=o("59633"),r=o("2539"),a=(0,n.withInstall)(r.default),l=a},15163:function(e,t,o){"use strict";o.r(t),o.d(t,{Radio:function(){return a},default:function(){return l}});var n=o("59633"),r=o("19955"),a=(0,n.withInstall)(r.default),l=a},30115:function(e,t,o){"use strict";o.r(t),o.d(t,{Tag:function(){return a},default:function(){return l}});var n=o("59633"),r=o("44348"),a=(0,n.withInstall)(r.default),l=a},82626:function(e,t,o){"use strict";o.r(t),o.d(t,{closeToast:function(){return a.closeToast},default:function(){return l},showFailToast:function(){return a.showFailToast},showLoadingToast:function(){return a.showLoadingToast},showSuccessToast:function(){return a.showSuccessToast},showToast:function(){return a.showToast}});var n=o("59633"),r=o("52592"),a=o("38178"),l=(0,n.withInstall)(r.default)},35050:function(e,t,o){"use strict";o.r(t),o.d(t,{lockClick:function(){return r}});var n=0;function r(e){e?(!n&&document.body.classList.add("van-toast--unclickable"),n++):n&&!--n&&document.body.classList.remove("van-toast--unclickable")}},7133:function(e,t,o){"use strict";o.r(t),o.d(t,{mountComponent:function(){return i},usePopupState:function(){return l}});var n=o("69298"),r=o("8933"),a=o("29067");function l(){var e=(0,n.reactive)({show:!1}),t=t=>{e.show=t},o=o=>{(0,r.extend)(e,o,{transitionAppear:!0}),t(!0)},l=()=>t(!1);return(0,a.useExpose)({open:o,close:l,toggle:t}),{open:o,close:l,state:e,toggle:t}}function i(e){var t=(0,n.createApp)(e),o=document.createElement("div");return document.body.appendChild(o),{instance:t.mount(o),unmount(){t.unmount(),document.body.removeChild(o)}}}},34396:function(e,t,o){"use strict";o.r(t),o.d(t,{default:function(){return s}}),o("74366"),o("52400"),o("20964");var n=o("69298"),r=o("59633"),a=o("3578"),l=o("57739"),i=o("4341"),[u,c]=(0,r.createNamespace)("button"),d=(0,r.extend)({},a.routeProps,{tag:(0,r.makeStringProp)("button"),text:String,icon:String,type:(0,r.makeStringProp)("default"),size:(0,r.makeStringProp)("normal"),color:String,block:Boolean,plain:Boolean,round:Boolean,square:Boolean,loading:Boolean,hairline:Boolean,disabled:Boolean,iconPrefix:String,nativeType:(0,r.makeStringProp)("button"),loadingSize:r.numericProp,loadingText:String,loadingType:String,iconPosition:(0,r.makeStringProp)("left")}),s=(0,n.defineComponent)({name:u,props:d,emits:["click"],setup(e,t){var{emit:o,slots:u}=t,d=(0,a.useRoute)(),s=()=>u.loading?u.loading():(0,n.createVNode)(i.Loading,{size:e.loadingSize,type:e.loadingType,class:c("loading")},null),f=()=>e.loading?s():u.icon?(0,n.createVNode)("div",{class:c("icon")},[u.icon()]):e.icon?(0,n.createVNode)(l.Icon,{name:e.icon,class:c("icon"),classPrefix:e.iconPrefix},null):void 0,p=()=>{var t;if(t=e.loading?e.loadingText:u.default?u.default():e.text)return(0,n.createVNode)("span",{class:c("text")},[t])},v=()=>{var{color:t,plain:o}=e;if(t){var n={color:o?t:"white"};return!o&&(n.background=t),t.includes("gradient")?n.border=0:n.borderColor=t,n}},m=t=>{e.loading?(0,r.preventDefault)(t):!e.disabled&&(o("click",t),d())};return()=>{var{tag:t,type:o,size:a,block:l,round:i,plain:u,square:d,loading:s,disabled:g,hairline:h,nativeType:b,iconPosition:k}=e,S=[c([o,a,{plain:u,block:l,round:i,square:d,loading:s,disabled:g,hairline:h}]),{[r.BORDER_SURROUND]:h}];return(0,n.createVNode)(t,{type:b,class:S,style:v(),disabled:g,onClick:m},{default:()=>[(0,n.createVNode)("div",{class:c("content")},["left"===k&&f(),p(),"right"===k&&f()])]})}}})},73880:function(e,t,o){"use strict";o.r(t),o.d(t,{cellSharedProps:function(){return c},default:function(){return s}}),o("74366"),o("52400");var n=o("69298"),r=o("59633"),a=o("3578"),l=o("57739"),[i,u]=(0,r.createNamespace)("cell"),c={tag:(0,r.makeStringProp)("div"),icon:String,size:String,title:r.numericProp,value:r.numericProp,label:r.numericProp,center:Boolean,isLink:Boolean,border:r.truthProp,iconPrefix:String,valueClass:r.unknownProp,labelClass:r.unknownProp,titleClass:r.unknownProp,titleStyle:null,arrowDirection:String,required:{type:[Boolean,String],default:null},clickable:{type:Boolean,default:null}},d=(0,r.extend)({},c,a.routeProps),s=(0,n.defineComponent)({name:i,props:d,setup(e,t){var{slots:o}=t,i=(0,a.useRoute)(),c=()=>{if(o.label||(0,r.isDef)(e.label))return(0,n.createVNode)("div",{class:[u("label"),e.labelClass]},[o.label?o.label():e.label])},d=()=>{if(o.title||(0,r.isDef)(e.title)){var t,a=null===(t=o.title)||void 0===t?void 0:t.call(o);if(!Array.isArray(a)||0!==a.length)return(0,n.createVNode)("div",{class:[u("title"),e.titleClass],style:e.titleStyle},[a||(0,n.createVNode)("span",null,[e.title]),c()])}},s=()=>{var t=o.value||o.default;if(t||(0,r.isDef)(e.value))return(0,n.createVNode)("div",{class:[u("value"),e.valueClass]},[t?t():(0,n.createVNode)("span",null,[e.value])])},f=()=>o.icon?o.icon():e.icon?(0,n.createVNode)(l.Icon,{name:e.icon,class:u("left-icon"),classPrefix:e.iconPrefix},null):void 0,p=()=>{if(o["right-icon"])return o["right-icon"]();if(e.isLink){var t=e.arrowDirection&&"right"!==e.arrowDirection?"arrow-".concat(e.arrowDirection):"arrow";return(0,n.createVNode)(l.Icon,{name:t,class:u("right-icon")},null)}};return()=>{var t,{tag:r,size:a,center:l,border:c,isLink:v,required:m}=e,g=null!==(t=e.clickable)&&void 0!==t?t:v,h={center:l,required:!!m,clickable:g,borderless:!c};return a&&(h[a]=!!a),(0,n.createVNode)(r,{class:u(h),role:g?"button":void 0,tabindex:g?0:void 0,onClick:i},{default:()=>{var e;return[f(),d(),s(),p(),null===(e=o.extra)||void 0===e?void 0:e.call(o)]}})}}})},71115:function(e,t,o){"use strict";o.r(t),o.d(t,{checkerProps:function(){return l},default:function(){return i}});var n=o("69298"),r=o("59633"),a=o("57739"),l={name:r.unknownProp,disabled:Boolean,iconSize:r.numericProp,modelValue:r.unknownProp,checkedColor:String,labelPosition:String,labelDisabled:Boolean},i=(0,n.defineComponent)({props:(0,r.extend)({},l,{bem:(0,r.makeRequiredProp)(Function),role:String,shape:String,parent:Object,checked:Boolean,bindGroup:r.truthProp,indeterminate:{type:Boolean,default:null}}),emits:["click","toggle"],setup(e,t){var{emit:o,slots:l}=t,i=(0,n.ref)(),u=t=>{if(e.parent&&e.bindGroup)return e.parent.props[t]},c=(0,n.computed)(()=>{if(e.parent&&e.bindGroup){var t=u("disabled")||e.disabled;if("checkbox"===e.role){var o=u("modelValue").length,n=u("max");return t||n&&o>=+n&&!e.checked}return t}return e.disabled}),d=(0,n.computed)(()=>u("direction")),s=(0,n.computed)(()=>{var t=e.checkedColor||u("checkedColor");if(t&&e.checked&&!c.value)return{borderColor:t,backgroundColor:t}}),f=(0,n.computed)(()=>e.shape||u("shape")||"round"),p=t=>{var{target:n}=t,r=i.value,a=r===n||(null==r?void 0:r.contains(n));!c.value&&(a||!e.labelDisabled)&&o("toggle"),o("click",t)},v=()=>{var t,o,{bem:d,checked:p,indeterminate:v}=e,m=e.iconSize||u("iconSize");return(0,n.createVNode)("div",{ref:i,class:d("icon",[f.value,{disabled:c.value,checked:p,indeterminate:v}]),style:"dot"!==f.value?{fontSize:(0,r.addUnit)(m)}:{width:(0,r.addUnit)(m),height:(0,r.addUnit)(m),borderColor:null===(t=s.value)||void 0===t?void 0:t.borderColor}},[l.icon?l.icon({checked:p,disabled:c.value}):"dot"!==f.value?(0,n.createVNode)(a.Icon,{name:v?"minus":"success",style:s.value},null):(0,n.createVNode)("div",{class:d("icon--dot__icon"),style:{backgroundColor:null===(o=s.value)||void 0===o?void 0:o.backgroundColor}},null)])},m=()=>{var{checked:t}=e;if(l.default)return(0,n.createVNode)("span",{class:e.bem("label",[e.labelPosition,{disabled:c.value}])},[l.default({checked:t,disabled:c.value})])};return()=>{var t="left"===e.labelPosition?[m(),v()]:[v(),m()];return(0,n.createVNode)("div",{role:e.role,class:e.bem([{disabled:c.value,"label-disabled":e.labelDisabled},d.value]),tabindex:c.value?void 0:0,"aria-checked":e.checked,onClick:p},[t])}}})},81434:function(e,t,o){"use strict";o.r(t),o.d(t,{default:function(){return m}}),o("74366"),o("52400"),o("14078"),o("6868"),o("4331");var n=o("69298"),r=o("59633"),a=o("30115"),l=o("57739"),i=o("58716"),u=o("15163"),c=o("54991"),d=o("354"),[s,f,p]=(0,r.createNamespace)("contact-list"),v={list:Array,addText:String,modelValue:r.unknownProp,defaultTagText:String},m=(0,n.defineComponent)({name:s,props:v,emits:["add","edit","select","update:modelValue"],setup(e,t){var{emit:o}=t,r=(t,r)=>(0,n.createVNode)(i.Cell,{key:t.id,isLink:!0,center:!0,class:f("item"),titleClass:f("item-title"),onClick:()=>{o("update:modelValue",t.id),o("select",t,r)}},{icon:()=>(0,n.createVNode)(l.Icon,{name:"edit",class:f("edit"),onClick:e=>{e.stopPropagation(),o("edit",t,r)}},null),title:()=>{var o=["".concat(t.name,"\uFF0C").concat(t.tel)];return t.isDefault&&e.defaultTagText&&o.push((0,n.createVNode)(a.Tag,{type:"primary",round:!0,class:f("item-tag")},{default:()=>[e.defaultTagText]})),o},"right-icon":()=>(0,n.createVNode)(u.Radio,{class:f("radio"),name:t.id,iconSize:18},null)});return()=>(0,n.createVNode)("div",{class:f()},[(0,n.createVNode)(d.RadioGroup,{modelValue:e.modelValue,class:f("group")},{default:()=>[e.list&&e.list.map(r)]}),(0,n.createVNode)("div",{class:[f("bottom"),"van-safe-area-bottom"]},[(0,n.createVNode)(c.Button,{round:!0,block:!0,type:"primary",class:f("add"),text:e.addText||p("addContact"),onClick:()=>o("add")},null)])])}})},86512:function(e,t,o){"use strict";o.r(t),o.d(t,{default:function(){return d}}),o("74366"),o("52400"),o("6868"),o("4331");var n=o("69298"),r=o("59633"),[a,l]=(0,r.createNamespace)("loading"),i=Array(12).fill(null).map((e,t)=>(0,n.createVNode)("i",{class:l("line",String(t+1))},null)),u=(0,n.createVNode)("svg",{class:l("circular"),viewBox:"25 25 50 50"},[(0,n.createVNode)("circle",{cx:"50",cy:"50",r:"20",fill:"none"},null)]),c={size:r.numericProp,type:(0,r.makeStringProp)("circular"),color:String,vertical:Boolean,textSize:r.numericProp,textColor:String},d=(0,n.defineComponent)({name:a,props:c,setup(e,t){var{slots:o}=t,a=(0,n.computed)(()=>(0,r.extend)({color:e.color},(0,r.getSizeStyle)(e.size))),c=()=>{var t="spinner"===e.type?i:u;return(0,n.createVNode)("span",{class:l("spinner",e.type),style:a.value},[o.icon?o.icon():t])},d=()=>{if(o.default){var t;return(0,n.createVNode)("span",{class:l("text"),style:{fontSize:(0,r.addUnit)(e.textSize),color:null!==(t=e.textColor)&&void 0!==t?t:e.color}},[o.default()])}};return()=>{var{type:t,vertical:o}=e;return(0,n.createVNode)("div",{class:l([t,{vertical:o}]),"aria-live":"polite","aria-busy":!0},[c(),d()])}}})},2539:function(e,t,o){"use strict";o.r(t),o.d(t,{RADIO_KEY:function(){return c},default:function(){return d}}),o("74366"),o("52400"),o("95818");var n=o("69298"),r=o("59633"),a=o("22300"),[l,i]=(0,r.createNamespace)("radio-group"),u={shape:String,disabled:Boolean,iconSize:r.numericProp,direction:String,modelValue:r.unknownProp,checkedColor:String},c=Symbol(l),d=(0,n.defineComponent)({name:l,props:u,emits:["change","update:modelValue"],setup(e,t){var{emit:o,slots:r}=t,{linkChildren:l}=(0,a.useChildren)(c);return(0,n.watch)(()=>e.modelValue,e=>o("change",e)),l({props:e,updateValue:e=>o("update:modelValue",e)}),(0,a.useCustomFieldValue)(()=>e.modelValue),()=>{var t;return(0,n.createVNode)("div",{class:i([e.direction]),role:"radiogroup"},[null===(t=r.default)||void 0===t?void 0:t.call(r)])}}})},19955:function(e,t,o){"use strict";o.r(t),o.d(t,{default:function(){return s}}),o("74366"),o("52400");var n=o("69298"),r=o("59633"),a=o("2539"),l=o("22300"),i=o("71115"),u=(0,r.extend)({},i.checkerProps,{shape:String}),[c,d]=(0,r.createNamespace)("radio"),s=(0,n.defineComponent)({name:c,props:u,emits:["update:modelValue"],setup(e,t){var{emit:o,slots:u}=t,{parent:c}=(0,l.useParent)(a.RADIO_KEY),s=()=>(c?c.props.modelValue:e.modelValue)===e.name,f=()=>{c?c.updateValue(e.name):o("update:modelValue",e.name)};return()=>(0,n.createVNode)(i.default,(0,n.mergeProps)({bem:d,role:"radio",parent:c,checked:s(),onToggle:f},e),(0,r.pick)(u,["default","icon"]))}})},44348:function(e,t,o){"use strict";o.r(t),o.d(t,{default:function(){return c}}),o("74366"),o("52400");var n=o("69298"),r=o("59633"),a=o("57739"),[l,i]=(0,r.createNamespace)("tag"),u={size:String,mark:Boolean,show:r.truthProp,type:(0,r.makeStringProp)("default"),color:String,plain:Boolean,round:Boolean,textColor:String,closeable:Boolean},c=(0,n.defineComponent)({name:l,props:u,emits:["close"],setup(e,t){var{slots:o,emit:l}=t,u=e=>{e.stopPropagation(),l("close",e)},c=()=>e.plain?{color:e.textColor||e.color,borderColor:e.color}:{color:e.textColor,background:e.color},d=()=>{var t,{type:l,mark:d,plain:s,round:f,size:p,closeable:v}=e,m={mark:d,plain:s,round:f};p&&(m[p]=p);var g=v&&(0,n.createVNode)(a.Icon,{name:"cross",class:[i("close"),r.HAPTICS_FEEDBACK],onClick:u},null);return(0,n.createVNode)("span",{style:c(),class:i([m,l])},[null===(t=o.default)||void 0===t?void 0:t.call(o),g])};return()=>(0,n.createVNode)(n.Transition,{name:e.closeable?"van-fade":void 0},{default:()=>[e.show?d():null]})}})},52592:function(e,t,o){"use strict";o.r(t),o.d(t,{default:function(){return p}}),o("74366"),o("52400");var n=o("69298"),r=o("59633"),a=o("35050"),l=o("57739"),i=o("96446"),u=o("4341"),[c,d]=(0,r.createNamespace)("toast"),s=["show","overlay","teleport","transition","overlayClass","overlayStyle","closeOnClickOverlay"],f={icon:String,show:Boolean,type:(0,r.makeStringProp)("text"),overlay:Boolean,message:r.numericProp,iconSize:r.numericProp,duration:(0,r.makeNumberProp)(2e3),position:(0,r.makeStringProp)("middle"),teleport:[String,Object],wordBreak:String,className:r.unknownProp,iconPrefix:String,transition:(0,r.makeStringProp)("van-fade"),loadingType:String,forbidClick:Boolean,overlayClass:r.unknownProp,overlayStyle:Object,closeOnClick:Boolean,closeOnClickOverlay:Boolean},p=(0,n.defineComponent)({name:c,props:f,emits:["update:show"],setup(e,t){var o,{emit:c,slots:f}=t,p=!1,v=()=>{var t=e.show&&e.forbidClick;p!==t&&(p=t,(0,a.lockClick)(p))},m=e=>c("update:show",e),g=()=>{e.closeOnClick&&m(!1)},h=()=>clearTimeout(o),b=()=>{var{icon:t,type:o,iconSize:r,iconPrefix:a,loadingType:i}=e;return t||"success"===o||"fail"===o?(0,n.createVNode)(l.Icon,{name:t||o,size:r,class:d("icon"),classPrefix:a},null):"loading"===o?(0,n.createVNode)(u.Loading,{class:d("loading"),size:r,type:i},null):void 0},k=()=>{var{type:t,message:o}=e;return f.message?(0,n.createVNode)("div",{class:d("text")},[f.message()]):(0,r.isDef)(o)&&""!==o?"html"===t?(0,n.createVNode)("div",{key:0,class:d("text"),innerHTML:String(o)},null):(0,n.createVNode)("div",{class:d("text")},[o]):void 0};return(0,n.watch)(()=>[e.show,e.forbidClick],v),(0,n.watch)(()=>[e.show,e.type,e.message,e.duration],()=>{h(),e.show&&e.duration>0&&(o=setTimeout(()=>{m(!1)},e.duration))}),(0,n.onMounted)(v),(0,n.onUnmounted)(v),()=>(0,n.createVNode)(i.Popup,(0,n.mergeProps)({class:[d([e.position,"normal"===e.wordBreak?"break-normal":e.wordBreak,{[e.type]:!e.icon}]),e.className],lockScroll:!1,onClick:g,onClosed:h,"onUpdate:show":m},(0,r.pick)(e,s)),{default:()=>[b(),k()]})}})},38178:function(e,t,o){"use strict";o.r(t),o.d(t,{closeToast:function(){return g},showFailToast:function(){return m},showLoadingToast:function(){return p},showSuccessToast:function(){return v},showToast:function(){return s}}),o("88849"),o("99885"),o("83323"),o("57101"),o("68883"),o("51104"),o("53116"),o("68961"),o("45259"),o("2531"),o("74814"),o("58627"),o("92798"),o("97748"),o("74366"),o("52400"),o("59186"),o("78394"),o("64667"),o("14078"),o("76959"),o("11057");var n=o("69298"),r=o("59633"),a=o("7133"),l=o("52592"),i=[],u=(0,r.extend)({},{icon:"",type:"text",message:"",className:"",overlay:!1,onClose:void 0,onOpened:void 0,duration:2e3,teleport:"body",iconSize:void 0,iconPrefix:void 0,position:"middle",transition:"van-fade",forbidClick:!1,loadingType:void 0,overlayClass:"",overlayStyle:void 0,closeOnClick:!1,closeOnClickOverlay:!1}),c=new Map;function d(e){return(0,r.isObject)(e)?e:{message:e}}function s(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(!r.inBrowser)return{};var t=function(){if(!i.length){var e=function(){var{instance:e,unmount:t}=(0,a.mountComponent)({setup(){var e=(0,n.ref)(""),{open:t,state:o,close:r,toggle:i}=(0,a.usePopupState)(),u=()=>{};return(0,n.watch)(e,e=>{o.message=e}),(0,n.getCurrentInstance)().render=()=>(0,n.createVNode)(l.default,(0,n.mergeProps)(o,{onClosed:u,"onUpdate:show":i}),null),{open:t,close:r,message:e}}});return e}();i.push(e)}return i[i.length-1]}(),o=d(e);return t.open((0,r.extend)({},u,c.get(o.type||u.type),o)),t}var f=e=>t=>s((0,r.extend)({type:e},d(t))),p=f("loading"),v=f("success"),m=f("fail"),g=e=>{if(i.length){if(e)i.forEach(e=>{e.close()}),i=[];else{var t;i[0].close()}}}},82403:function(e){},33741:function(e){}}]); \ No newline at end of file diff --git a/vant/static/js/async/4921.7b528efd.js.LICENSE.txt b/vant/static/js/async/4921.7b528efd.js.LICENSE.txt new file mode 100644 index 00000000..fc6e3482 --- /dev/null +++ b/vant/static/js/async/4921.7b528efd.js.LICENSE.txt @@ -0,0 +1,235 @@ +/*! ../icon */ + +/*! core-js/modules/esnext.iterator.filter.js */ + +/*! core-js/modules/es.array.push.js */ + +/*! core-js/modules/esnext.map.reduce.js */ + +/*! ../utils */ + +/*! ../icon */ + +/*! ../icon */ + +/*! ../cell */ + +/*! core-js/modules/esnext.iterator.map.js */ + +/*! ./Tag */ + +/*! ./Cell */ + +/*! core-js/modules/esnext.async-iterator.map.js */ + +/*! core-js/modules/es.array.iterator.js */ + +/*! ../utils */ + +/*! core-js/modules/es.symbol.description.js */ + +/*! vue */ + +/*! core-js/modules/es.array.push.js */ + +/*! ../composables/use-expose */ + +/*! core-js/modules/esnext.map.find.js */ + +/*! ../popup */ + +/*! ../composables/use-route */ + +/*! core-js/modules/esnext.map.map-keys.js */ + +/*! ../utils */ + +/*! ./index.vue.less?vue&type=style&index=0&id=f265c814&lang=less!=!../../../../../node_modules/.pnpm/vue-loader@17.4.2_vue@3.4.13_webpack@5.89.0/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./index.vue?vue&type=style&index=0&id=f265c814&lang=less */ + +/*! core-js/modules/esnext.map.filter.js */ + +/*! core-js/modules/es.array.includes.js */ + +/*! core-js/modules/es.array.iterator.js */ + +/*! core-js/modules/esnext.map.find-key.js */ + +/*! ../utils */ + +/*! core-js/modules/web.dom-collections.iterator.js */ + +/*! core-js/modules/web.dom-collections.iterator.js */ + +/*! core-js/modules/web.dom-collections.iterator.js */ + +/*! ../loading */ + +/*! ./Toast */ + +/*! ../checkbox/Checker */ + +/*! core-js/modules/web.dom-collections.iterator.js */ + +/*! ../utils */ + +/*! vue */ + +/*! ./index.vue.ts?vue&type=script&setup=true&lang=ts!=!-!builtin:swc-loader??clonedRuleSet-28.use[0]!../../../../../node_modules/.pnpm/vue-loader@17.4.2_vue@3.4.13_webpack@5.89.0/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./index.vue?vue&type=script&setup=true&lang=ts */ + +/*! core-js/modules/es.array.iterator.js */ + +/*! vue */ + +/*! .. */ + +/*! core-js/modules/esnext.async-iterator.for-each.js */ + +/*! ../utils */ + +/*! ../radio-group */ + +/*! vue */ + +/*! ./basic */ + +/*! core-js/modules/esnext.async-iterator.map.js */ + +/*! ../utils */ + +/*! ../icon */ + +/*! core-js/modules/es.array.iterator.js */ + +/*! ../utils */ + +/*! ../radio */ + +/*! ../loading */ + +/*! ./lock-click */ + +/*! ../button */ + +/*! vue */ + +/*! ../utils */ + +/*! ../icon */ + +/*! ./Button */ + +/*! ./Radio */ + +/*! core-js/modules/es.string.replace.js */ + +/*! ../../../docs/site */ + +/*! vue */ + +/*! vue */ + +/*! ../../toast */ + +/*! ../icon */ + +/*! vue */ + +/*! vue */ + +/*! core-js/modules/web.dom-collections.iterator.js */ + +/*! core-js/modules/es.array.iterator.js */ + +/*! ./RadioGroup */ + +/*! ../utils */ + +/*! core-js/modules/esnext.map.update.js */ + +/*! core-js/modules/esnext.map.merge.js */ + +/*! core-js/modules/esnext.map.delete-all.js */ + +/*! core-js/modules/esnext.map.emplace.js */ + +/*! ./ContactList */ + +/*! core-js/modules/esnext.map.includes.js */ + +/*! ../utils */ + +/*! core-js/modules/esnext.iterator.constructor.js */ + +/*! ../utils */ + +/*! ../utils */ + +/*! core-js/modules/esnext.iterator.map.js */ + +/*! ../composables/use-route */ + +/*! core-js/modules/esnext.map.every.js */ + +/*! ../utils */ + +/*! core-js/modules/esnext.async-iterator.filter.js */ + +/*! vue */ + +/*! ../radio-group/RadioGroup */ + +/*! core-js/modules/web.dom-collections.iterator.js */ + +/*! @vant/use */ + +/*! @vant/use */ + +/*! ../utils */ + +/*! ./Loading */ + +/*! core-js/modules/es.array.iterator.js */ + +/*! core-js/modules/es.array.iterator.js */ + +/*! core-js/modules/esnext.map.map-values.js */ + +/*! core-js/modules/es.array.iterator.js */ + +/*! ./function-call */ + +/*! ./index.vue.ts?vue&type=script&setup=true&lang=ts!=!../../../../../node_modules/.pnpm/vue-loader@17.4.2_vue@3.4.13_webpack@5.89.0/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./index.vue?vue&type=script&setup=true&lang=ts */ + +/*! core-js/modules/es.array.iterator.js */ + +/*! vue */ + +/*! core-js/modules/esnext.map.some.js */ + +/*! vue */ + +/*! ./Toast */ + +/*! ../utils */ + +/*! core-js/modules/web.dom-collections.iterator.js */ + +/*! ../utils */ + +/*! vue */ + +/*! core-js/modules/es.regexp.exec.js */ + +/*! ../tag */ + +/*! core-js/modules/esnext.map.key-of.js */ + +/*! core-js/modules/web.dom-collections.iterator.js */ + +/*! ../utils */ + +/*! core-js/modules/web.dom-collections.iterator.js */ + +/*! core-js/modules/esnext.iterator.for-each.js */ + +/*! ../utils/mount-component */ \ No newline at end of file diff --git a/vant/static/js/async/4943.8e7bdae4.js b/vant/static/js/async/4943.8e7bdae4.js deleted file mode 100644 index 9864b4f9..00000000 --- a/vant/static/js/async/4943.8e7bdae4.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 4943.8e7bdae4.js.LICENSE.txt */ -(self.webpackChunk=self.webpackChunk||[]).push([["4943"],{94161:function(s,n,a){"use strict";a.r(n),a.d(n,{default:function(){return p}});var t=a("36840");let l=["innerHTML"];var p={setup:()=>({html:""}),render:()=>((0,t.openBlock)(),(0,t.createElementBlock)("div",{class:"van-doc-markdown-body",innerHTML:'\u7528\u4E8E\u5C55\u793A\u64CD\u4F5C\u6D41\u7A0B\u7684\u5404\u4E2A\u73AF\u8282\uFF0C\u8BA9\u7528\u6237\u4E86\u89E3\u5F53\u524D\u7684\u64CD\u4F5C\u5728\u6574\u4F53\u6D41\u7A0B\u4E2D\u7684\u4F4D\u7F6E\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Step, Steps } from 'vant';\n\nconst app = createApp();\napp.use(Step);\napp.use(Steps);\n
\nactive
\u5C5E\u6027\u8868\u793A\u5F53\u524D\u6B65\u9AA4\u7684\u7D22\u5F15\uFF0C\u4ECE 0 \u8D77\u8BA1\u3002
<van-steps :active="active">\n <van-step>\u4E70\u5BB6\u4E0B\u5355</van-step>\n <van-step>\u5546\u5BB6\u63A5\u5355</van-step>\n <van-step>\u4E70\u5BB6\u63D0\u8D27</van-step>\n <van-step>\u4EA4\u6613\u5B8C\u6210</van-step>\n</van-steps>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref(1);\n return { active };\n },\n};\n
\n\u53EF\u4EE5\u901A\u8FC7 active-icon
\u548C active-color
\u5C5E\u6027\u8BBE\u7F6E\u6FC0\u6D3B\u72B6\u6001\u4E0B\u7684\u56FE\u6807\u548C\u989C\u8272\u3002
<van-steps :active="active" active-icon="success" active-color="#07c160">\n <van-step>\u4E70\u5BB6\u4E0B\u5355</van-step>\n <van-step>\u5546\u5BB6\u63A5\u5355</van-step>\n <van-step>\u4E70\u5BB6\u63D0\u8D27</van-step>\n <van-step>\u4EA4\u6613\u5B8C\u6210</van-step>\n</van-steps>\n
\n\u53EF\u4EE5\u901A\u8FC7\u8BBE\u7F6E direction
\u5C5E\u6027\u6765\u6539\u53D8\u6B65\u9AA4\u6761\u7684\u663E\u793A\u65B9\u5411\u3002
<van-steps direction="vertical" :active="0">\n <van-step>\n <h3>\u3010\u57CE\u5E02\u3011\u7269\u6D41\u72B6\u60011</h3>\n <p>2016-07-12 12:40</p>\n </van-step>\n <van-step>\n <h3>\u3010\u57CE\u5E02\u3011\u7269\u6D41\u72B6\u60012</h3>\n <p>2016-07-11 10:00</p>\n </van-step>\n <van-step>\n <h3>\u5FEB\u4EF6\u5DF2\u53D1\u8D27</h3>\n <p>2016-07-10 09:30</p>\n </van-step>\n</van-steps>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
active | \n\u5F53\u524D\u6B65\u9AA4\u5BF9\u5E94\u7684\u7D22\u5F15\u503C | \nnumber | string | \n0 | \n
direction | \n\u6B65\u9AA4\u6761\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A vertical | \nstring | \nhorizontal | \n
active-icon | \n\u5F53\u524D\u6B65\u9AA4\u5BF9\u5E94\u7684\u5E95\u90E8\u56FE\u6807\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6 | \nstring | \nchecked | \n
inactive-icon | \n\u975E\u5F53\u524D\u6B65\u9AA4\u5BF9\u5E94\u7684\u5E95\u90E8\u56FE\u6807\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6 | \nstring | \n- | \n
finish-icon | \n\u5DF2\u5B8C\u6210\u6B65\u9AA4\u5BF9\u5E94\u7684\u5E95\u90E8\u56FE\u6807\uFF0C\u4F18\u5148\u7EA7\u9AD8\u4E8E inactive-icon \uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6 | \nstring | \n- | \n
active-color | \n\u5F53\u524D\u6B65\u9AA4\u548C\u5DF2\u5B8C\u6210\u6B65\u9AA4\u7684\u989C\u8272 | \nstring | \n#07c160 | \n
inactive-color | \n\u672A\u6FC0\u6D3B\u6B65\u9AA4\u7684\u989C\u8272 | \nstring | \n#969799 | \n
icon-prefix | \n\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 | \nstring | \nvan-icon | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u6B65\u9AA4\u5185\u5BB9 | \n
active-icon | \n\u81EA\u5B9A\u4E49\u6FC0\u6D3B\u72B6\u6001\u56FE\u6807 | \n
inactive-icon | \n\u81EA\u5B9A\u4E49\u672A\u6FC0\u6D3B\u72B6\u6001\u56FE\u6807 | \n
finish-icon | \n\u81EA\u5B9A\u4E49\u5DF2\u5B8C\u6210\u6B65\u9AA4\u5BF9\u5E94\u7684\u5E95\u90E8\u56FE\u6807\uFF0C\u4F18\u5148\u7EA7\u9AD8\u4E8E inactive-icon | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click-step | \n\u70B9\u51FB\u6B65\u9AA4\u7684\u6807\u9898\u6216\u56FE\u6807\u65F6\u89E6\u53D1 | \nindex: number | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { StepsProps, StepsDirection } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-step-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-step-active-color | \nvar(--van-primary-color) | \n- | \n
--van-step-process-text-color | \nvar(--van-text-color) | \n- | \n
--van-step-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-step-line-color | \nvar(--van-border-color) | \n- | \n
--van-step-finish-line-color | \nvar(--van-primary-color) | \n- | \n
--van-step-finish-text-color | \nvar(--van-text-color) | \n- | \n
--van-step-icon-size | \n12px | \n- | \n
--van-step-circle-size | \n5px | \n- | \n
--van-step-circle-color | \nvar(--van-gray-6) | \n- | \n
--van-step-horizontal-title-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-steps-background | \nvar(--van-background-2) | \n- | \n
\u7528\u4E8E\u5C55\u793A\u64CD\u4F5C\u6D41\u7A0B\u7684\u5404\u4E2A\u73AF\u8282\uFF0C\u8BA9\u7528\u6237\u4E86\u89E3\u5F53\u524D\u7684\u64CD\u4F5C\u5728\u6574\u4F53\u6D41\u7A0B\u4E2D\u7684\u4F4D\u7F6E\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Step, Steps } from 'vant';\n\nconst app = createApp();\napp.use(Step);\napp.use(Steps);\n
\nactive
\u5C5E\u6027\u8868\u793A\u5F53\u524D\u6B65\u9AA4\u7684\u7D22\u5F15\uFF0C\u4ECE 0 \u8D77\u8BA1\u3002
<van-steps :active="active">\n <van-step>\u4E70\u5BB6\u4E0B\u5355</van-step>\n <van-step>\u5546\u5BB6\u63A5\u5355</van-step>\n <van-step>\u4E70\u5BB6\u63D0\u8D27</van-step>\n <van-step>\u4EA4\u6613\u5B8C\u6210</van-step>\n</van-steps>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref(1);\n return { active };\n },\n};\n
\n\u53EF\u4EE5\u901A\u8FC7 active-icon
\u548C active-color
\u5C5E\u6027\u8BBE\u7F6E\u6FC0\u6D3B\u72B6\u6001\u4E0B\u7684\u56FE\u6807\u548C\u989C\u8272\u3002
<van-steps :active="active" active-icon="success" active-color="#07c160">\n <van-step>\u4E70\u5BB6\u4E0B\u5355</van-step>\n <van-step>\u5546\u5BB6\u63A5\u5355</van-step>\n <van-step>\u4E70\u5BB6\u63D0\u8D27</van-step>\n <van-step>\u4EA4\u6613\u5B8C\u6210</van-step>\n</van-steps>\n
\n\u53EF\u4EE5\u901A\u8FC7\u8BBE\u7F6E direction
\u5C5E\u6027\u6765\u6539\u53D8\u6B65\u9AA4\u6761\u7684\u663E\u793A\u65B9\u5411\u3002
<van-steps direction="vertical" :active="0">\n <van-step>\n <h3>\u3010\u57CE\u5E02\u3011\u7269\u6D41\u72B6\u60011</h3>\n <p>2016-07-12 12:40</p>\n </van-step>\n <van-step>\n <h3>\u3010\u57CE\u5E02\u3011\u7269\u6D41\u72B6\u60012</h3>\n <p>2016-07-11 10:00</p>\n </van-step>\n <van-step>\n <h3>\u5FEB\u4EF6\u5DF2\u53D1\u8D27</h3>\n <p>2016-07-10 09:30</p>\n </van-step>\n</van-steps>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
active | \n\u5F53\u524D\u6B65\u9AA4\u5BF9\u5E94\u7684\u7D22\u5F15\u503C | \nnumber | string | \n0 | \n
direction | \n\u6B65\u9AA4\u6761\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A vertical | \nstring | \nhorizontal | \n
active-icon | \n\u5F53\u524D\u6B65\u9AA4\u5BF9\u5E94\u7684\u5E95\u90E8\u56FE\u6807\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6 | \nstring | \nchecked | \n
inactive-icon | \n\u975E\u5F53\u524D\u6B65\u9AA4\u5BF9\u5E94\u7684\u5E95\u90E8\u56FE\u6807\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6 | \nstring | \n- | \n
finish-icon | \n\u5DF2\u5B8C\u6210\u6B65\u9AA4\u5BF9\u5E94\u7684\u5E95\u90E8\u56FE\u6807\uFF0C\u4F18\u5148\u7EA7\u9AD8\u4E8E inactive-icon \uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6 | \nstring | \n- | \n
active-color | \n\u5F53\u524D\u6B65\u9AA4\u548C\u5DF2\u5B8C\u6210\u6B65\u9AA4\u7684\u989C\u8272 | \nstring | \n#07c160 | \n
inactive-color | \n\u672A\u6FC0\u6D3B\u6B65\u9AA4\u7684\u989C\u8272 | \nstring | \n#969799 | \n
icon-prefix | \n\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 | \nstring | \nvan-icon | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u6B65\u9AA4\u5185\u5BB9 | \n
active-icon | \n\u81EA\u5B9A\u4E49\u6FC0\u6D3B\u72B6\u6001\u56FE\u6807 | \n
inactive-icon | \n\u81EA\u5B9A\u4E49\u672A\u6FC0\u6D3B\u72B6\u6001\u56FE\u6807 | \n
finish-icon | \n\u81EA\u5B9A\u4E49\u5DF2\u5B8C\u6210\u6B65\u9AA4\u5BF9\u5E94\u7684\u5E95\u90E8\u56FE\u6807\uFF0C\u4F18\u5148\u7EA7\u9AD8\u4E8E inactive-icon | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click-step | \n\u70B9\u51FB\u6B65\u9AA4\u7684\u6807\u9898\u6216\u56FE\u6807\u65F6\u89E6\u53D1 | \nindex: number | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { StepsProps, StepsDirection } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-step-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-step-active-color | \nvar(--van-primary-color) | \n- | \n
--van-step-process-text-color | \nvar(--van-text-color) | \n- | \n
--van-step-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-step-line-color | \nvar(--van-border-color) | \n- | \n
--van-step-finish-line-color | \nvar(--van-primary-color) | \n- | \n
--van-step-finish-text-color | \nvar(--van-text-color) | \n- | \n
--van-step-icon-size | \n12px | \n- | \n
--van-step-circle-size | \n5px | \n- | \n
--van-step-circle-color | \nvar(--van-gray-6) | \n- | \n
--van-step-horizontal-title-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-steps-background | \nvar(--van-background-2) | \n- | \n
Triggers a callback when user clicks outside of the target element.
\n<div ref="root" />\n
\nimport { ref } from 'vue';\nimport { useClickAway } from '@vant/use';\n\nexport default {\n setup() {\n const root = ref();\n useClickAway(root, () => {\n console.log('click outside!');\n });\n\n return { root };\n },\n};\n
\n<div ref="root" />\n
\nimport { ref } from 'vue';\nimport { useClickAway } from '@vant/use';\n\nexport default {\n setup() {\n const root = ref();\n useClickAway(\n root,\n () => {\n console.log('touch outside!');\n },\n { eventName: 'touchstart' },\n );\n\n return { root };\n },\n};\n
\ntype Options = {\n eventName?: string;\n};\n\nfunction useClickAway(\n target:\n | Element\n | Ref<Element | undefined>\n | Array<Element | Ref<Element | undefined>>,\n listener: EventListener,\n options?: Options,\n): void;\n
\nName | \nDescription | \nType | \nDefault Value | \n
---|---|---|---|
target | \nTarget element, support multiple elements | \nElement | Ref<Element> | Array<Element | Ref<Element>> | \n- | \n
listener | \nCallback function when the outside is clicked | \nEventListener | \n- | \n
options | \nOptions | \nOptions | \n{ eventName: \'click\' } | \n
Name | \nDescription | \nType | \nDefault Value | \n
---|---|---|---|
eventName | \nEvent name | \nstring | \nclick | \n
Triggers a callback when user clicks outside of the target element.
\n<div ref="root" />\n
\nimport { ref } from 'vue';\nimport { useClickAway } from '@vant/use';\n\nexport default {\n setup() {\n const root = ref();\n useClickAway(root, () => {\n console.log('click outside!');\n });\n\n return { root };\n },\n};\n
\n<div ref="root" />\n
\nimport { ref } from 'vue';\nimport { useClickAway } from '@vant/use';\n\nexport default {\n setup() {\n const root = ref();\n useClickAway(\n root,\n () => {\n console.log('touch outside!');\n },\n { eventName: 'touchstart' },\n );\n\n return { root };\n },\n};\n
\ntype Options = {\n eventName?: string;\n};\n\nfunction useClickAway(\n target:\n | Element\n | Ref<Element | undefined>\n | Array<Element | Ref<Element | undefined>>,\n listener: EventListener,\n options?: Options,\n): void;\n
\nName | \nDescription | \nType | \nDefault Value | \n
---|---|---|---|
target | \nTarget element, support multiple elements | \nElement | Ref<Element> | Array<Element | Ref<Element>> | \n- | \n
listener | \nCallback function when the outside is clicked | \nEventListener | \n- | \n
options | \nOptions | \nOptions | \n{ eventName: \'click\' } | \n
Name | \nDescription | \nType | \nDefault Value | \n
---|---|---|---|
eventName | \nEvent name | \nstring | \nclick | \n
\u7528\u4E8E\u5728\u5185\u5BB9\u52A0\u8F7D\u8FC7\u7A0B\u4E2D\u5C55\u793A\u4E00\u7EC4\u5360\u4F4D\u56FE\u5F62\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport {\n Skeleton,\n SkeletonTitle,\n SkeletonImage,\n SkeletonAvatar,\n SkeletonParagraph,\n} from 'vant';\n\nconst app = createApp();\napp.use(Skeleton);\napp.use(SkeletonTitle);\napp.use(SkeletonImage);\napp.use(SkeletonAvatar);\napp.use(SkeletonParagraph);\n
\n\u901A\u8FC7 title
\u5C5E\u6027\u663E\u793A\u6807\u9898\u5360\u4F4D\u56FE\uFF0C\u901A\u8FC7 row
\u5C5E\u6027\u914D\u7F6E\u5360\u4F4D\u6BB5\u843D\u884C\u6570\u3002
<van-skeleton title :row="3" />\n
\n\u901A\u8FC7 avatar
\u5C5E\u6027\u663E\u793A\u5934\u50CF\u5360\u4F4D\u56FE\u3002
<van-skeleton title avatar :row="3" />\n
\n\u5C06 loading
\u5C5E\u6027\u8BBE\u7F6E\u6210 false
\u8868\u793A\u5185\u5BB9\u52A0\u8F7D\u5B8C\u6210\uFF0C\u6B64\u65F6\u4F1A\u9690\u85CF\u5360\u4F4D\u56FE\uFF0C\u5E76\u663E\u793A Skeleton
\u7684\u5B50\u7EC4\u4EF6\u3002
<van-skeleton title avatar :row="3" :loading="loading">\n <div>\u5B9E\u9645\u5185\u5BB9</div>\n</van-skeleton>\n
\nimport { ref, onMounted } from 'vue';\n\nexport default {\n setup() {\n const loading = ref(true);\n\n onMounted(() => {\n loading.value = false;\n });\n\n return {\n loading,\n };\n },\n};\n
\n\u901A\u8FC7 template
\u63D2\u69FD\u5B8C\u6210\u81EA\u5B9A\u4E49\u5185\u5BB9\u7684\u5C55\u793A\u3002
<van-skeleton>\n <template #template>\n <div :style="{ display: 'flex', width: '100%' }">\n <van-skeleton-image />\n <div :style="{ flex: 1, marginLeft: '16px' }">\n <van-skeleton-paragraph row-width="60%" />\n <van-skeleton-paragraph />\n <van-skeleton-paragraph />\n <van-skeleton-paragraph />\n </div>\n </div>\n </template>\n</van-skeleton>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
row | \n\u6BB5\u843D\u5360\u4F4D\u56FE\u884C\u6570 | \nnumber | string | \n0 | \n
row-width | \n\u6BB5\u843D\u5360\u4F4D\u56FE\u5BBD\u5EA6\uFF0C\u53EF\u4F20\u6570\u7EC4\u6765\u8BBE\u7F6E\u6BCF\u4E00\u884C\u7684\u5BBD\u5EA6 | \nnumber | string | (number | string)[] | \n100% | \n
title | \n\u662F\u5426\u663E\u793A\u6807\u9898\u5360\u4F4D\u56FE | \nboolean | \nfalse | \n
avatar | \n\u662F\u5426\u663E\u793A\u5934\u50CF\u5360\u4F4D\u56FE | \nboolean | \nfalse | \n
loading | \n\u662F\u5426\u663E\u793A\u9AA8\u67B6\u5C4F\uFF0C\u4F20 false \u65F6\u4F1A\u5C55\u793A\u5B50\u7EC4\u4EF6\u5185\u5BB9 | \nboolean | \ntrue | \n
animate | \n\u662F\u5426\u5F00\u542F\u52A8\u753B | \nboolean | \ntrue | \n
round | \n\u662F\u5426\u5C06\u6807\u9898\u548C\u6BB5\u843D\u663E\u793A\u4E3A\u5706\u89D2\u98CE\u683C | \nboolean | \nfalse | \n
title-width | \n\u6807\u9898\u5360\u4F4D\u56FE\u5BBD\u5EA6 | \nnumber | string | \n40% | \n
avatar-size | \n\u5934\u50CF\u5360\u4F4D\u56FE\u5927\u5C0F | \nnumber | string | \n32px | \n
avatar-shape | \n\u5934\u50CF\u5360\u4F4D\u56FE\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A square | \nstring | \nround | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
round | \n\u662F\u5426\u5C06\u6BB5\u843D\u663E\u793A\u4E3A\u5706\u89D2\u98CE\u683C | \nboolean | \nfalse | \n
row-width | \n\u6BB5\u843D\u5360\u4F4D\u56FE\u5BBD\u5EA6 | \nstring | \n100% | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
round | \n\u662F\u5426\u5C06\u6807\u9898\u663E\u793A\u4E3A\u5706\u89D2\u98CE\u683C | \nboolean | \nfalse | \n
title-width | \n\u6807\u9898\u5360\u4F4D\u56FE\u5BBD\u5EA6 | \nnumber | string | \n40% | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
avatar-size | \n\u5934\u50CF\u5360\u4F4D\u56FE\u5927\u5C0F | \nnumber | string | \n32px | \n
avatar-shape | \n\u5934\u50CF\u5360\u4F4D\u56FE\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A square | \nstring | \nround | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
image-size | \n\u56FE\u7247\u5360\u4F4D\u56FE\u5927\u5C0F | \nnumber | string | \n32px | \n
image-shape | \n\u56FE\u7247\u5360\u4F4D\u56FE\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A square | \nstring | \nround | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u9AA8\u67B6\u5C4F\u5185\u5BB9 | \n
template | \n\u81EA\u5B9A\u4E49\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n SkeletonProps,\n SkeletonImageProps,\n SkeletonTitleProps,\n SkeletonImageShape,\n SkeletonAvatarShape,\n SkeletonParagraphProps,\n} from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-skeleton-paragraph-height | \n16px | \n- | \n
--van-skeleton-paragraph-background | \nvar(--van-active-color) | \n- | \n
--van-skeleton-paragraph-margin-top | \nvar(--van-padding-sm) | \n- | \n
--van-skeleton-title-width | \n40% | \n- | \n
--van-skeleton-avatar-size | \n32px | \n- | \n
--van-skeleton-avatar-background | \nvar(--van-active-color) | \n- | \n
--van-skeleton-duration | \n1.2s | \n- | \n
--van-skeleton-image-size | \n96px | \n\n |
--van-skeleton-image-radius | \n24px | \n- | \n
\u7528\u4E8E\u5728\u5185\u5BB9\u52A0\u8F7D\u8FC7\u7A0B\u4E2D\u5C55\u793A\u4E00\u7EC4\u5360\u4F4D\u56FE\u5F62\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport {\n Skeleton,\n SkeletonTitle,\n SkeletonImage,\n SkeletonAvatar,\n SkeletonParagraph,\n} from 'vant';\n\nconst app = createApp();\napp.use(Skeleton);\napp.use(SkeletonTitle);\napp.use(SkeletonImage);\napp.use(SkeletonAvatar);\napp.use(SkeletonParagraph);\n
\n\u901A\u8FC7 title
\u5C5E\u6027\u663E\u793A\u6807\u9898\u5360\u4F4D\u56FE\uFF0C\u901A\u8FC7 row
\u5C5E\u6027\u914D\u7F6E\u5360\u4F4D\u6BB5\u843D\u884C\u6570\u3002
<van-skeleton title :row="3" />\n
\n\u901A\u8FC7 avatar
\u5C5E\u6027\u663E\u793A\u5934\u50CF\u5360\u4F4D\u56FE\u3002
<van-skeleton title avatar :row="3" />\n
\n\u5C06 loading
\u5C5E\u6027\u8BBE\u7F6E\u6210 false
\u8868\u793A\u5185\u5BB9\u52A0\u8F7D\u5B8C\u6210\uFF0C\u6B64\u65F6\u4F1A\u9690\u85CF\u5360\u4F4D\u56FE\uFF0C\u5E76\u663E\u793A Skeleton
\u7684\u5B50\u7EC4\u4EF6\u3002
<van-skeleton title avatar :row="3" :loading="loading">\n <div>\u5B9E\u9645\u5185\u5BB9</div>\n</van-skeleton>\n
\nimport { ref, onMounted } from 'vue';\n\nexport default {\n setup() {\n const loading = ref(true);\n\n onMounted(() => {\n loading.value = false;\n });\n\n return {\n loading,\n };\n },\n};\n
\n\u901A\u8FC7 template
\u63D2\u69FD\u5B8C\u6210\u81EA\u5B9A\u4E49\u5185\u5BB9\u7684\u5C55\u793A\u3002
<van-skeleton>\n <template #template>\n <div :style="{ display: 'flex', width: '100%' }">\n <van-skeleton-image />\n <div :style="{ flex: 1, marginLeft: '16px' }">\n <van-skeleton-paragraph row-width="60%" />\n <van-skeleton-paragraph />\n <van-skeleton-paragraph />\n <van-skeleton-paragraph />\n </div>\n </div>\n </template>\n</van-skeleton>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
row | \n\u6BB5\u843D\u5360\u4F4D\u56FE\u884C\u6570 | \nnumber | string | \n0 | \n
row-width | \n\u6BB5\u843D\u5360\u4F4D\u56FE\u5BBD\u5EA6\uFF0C\u53EF\u4F20\u6570\u7EC4\u6765\u8BBE\u7F6E\u6BCF\u4E00\u884C\u7684\u5BBD\u5EA6 | \nnumber | string | (number | string)[] | \n100% | \n
title | \n\u662F\u5426\u663E\u793A\u6807\u9898\u5360\u4F4D\u56FE | \nboolean | \nfalse | \n
avatar | \n\u662F\u5426\u663E\u793A\u5934\u50CF\u5360\u4F4D\u56FE | \nboolean | \nfalse | \n
loading | \n\u662F\u5426\u663E\u793A\u9AA8\u67B6\u5C4F\uFF0C\u4F20 false \u65F6\u4F1A\u5C55\u793A\u5B50\u7EC4\u4EF6\u5185\u5BB9 | \nboolean | \ntrue | \n
animate | \n\u662F\u5426\u5F00\u542F\u52A8\u753B | \nboolean | \ntrue | \n
round | \n\u662F\u5426\u5C06\u6807\u9898\u548C\u6BB5\u843D\u663E\u793A\u4E3A\u5706\u89D2\u98CE\u683C | \nboolean | \nfalse | \n
title-width | \n\u6807\u9898\u5360\u4F4D\u56FE\u5BBD\u5EA6 | \nnumber | string | \n40% | \n
avatar-size | \n\u5934\u50CF\u5360\u4F4D\u56FE\u5927\u5C0F | \nnumber | string | \n32px | \n
avatar-shape | \n\u5934\u50CF\u5360\u4F4D\u56FE\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A square | \nstring | \nround | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
round | \n\u662F\u5426\u5C06\u6BB5\u843D\u663E\u793A\u4E3A\u5706\u89D2\u98CE\u683C | \nboolean | \nfalse | \n
row-width | \n\u6BB5\u843D\u5360\u4F4D\u56FE\u5BBD\u5EA6 | \nstring | \n100% | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
round | \n\u662F\u5426\u5C06\u6807\u9898\u663E\u793A\u4E3A\u5706\u89D2\u98CE\u683C | \nboolean | \nfalse | \n
title-width | \n\u6807\u9898\u5360\u4F4D\u56FE\u5BBD\u5EA6 | \nnumber | string | \n40% | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
avatar-size | \n\u5934\u50CF\u5360\u4F4D\u56FE\u5927\u5C0F | \nnumber | string | \n32px | \n
avatar-shape | \n\u5934\u50CF\u5360\u4F4D\u56FE\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A square | \nstring | \nround | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
image-size | \n\u56FE\u7247\u5360\u4F4D\u56FE\u5927\u5C0F | \nnumber | string | \n32px | \n
image-shape | \n\u56FE\u7247\u5360\u4F4D\u56FE\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A square | \nstring | \nround | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u9AA8\u67B6\u5C4F\u5185\u5BB9 | \n
template | \n\u81EA\u5B9A\u4E49\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n SkeletonProps,\n SkeletonImageProps,\n SkeletonTitleProps,\n SkeletonImageShape,\n SkeletonAvatarShape,\n SkeletonParagraphProps,\n} from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-skeleton-paragraph-height | \n16px | \n- | \n
--van-skeleton-paragraph-background | \nvar(--van-active-color) | \n- | \n
--van-skeleton-paragraph-margin-top | \nvar(--van-padding-sm) | \n- | \n
--van-skeleton-title-width | \n40% | \n- | \n
--van-skeleton-avatar-size | \n32px | \n- | \n
--van-skeleton-avatar-background | \nvar(--van-active-color) | \n- | \n
--van-skeleton-duration | \n1.2s | \n- | \n
--van-skeleton-image-size | \n96px | \n\n |
--van-skeleton-image-radius | \n24px | \n- | \n
A pop-up sharing panel at the bottom for displaying the action buttons corresponding to each sharing channel, without specific sharing logic.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { ShareSheet } from 'vant';\n\nconst app = createApp();\napp.use(ShareSheet);\n
\n<van-cell title="Show ShareSheet" @click="showShare = true" />\n<van-share-sheet\n v-model:show="showShare"\n title="Share"\n :options="options"\n @select="onSelect"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const showShare = ref(false);\n const options = [\n { name: 'WeChat', icon: 'wechat' },\n { name: 'Weibo', icon: 'weibo' },\n { name: 'Link', icon: 'link' },\n { name: 'Poster', icon: 'poster' },\n { name: 'Qrcode', icon: 'qrcode' },\n ];\n\n const onSelect = (option) => {\n showToast(option.name);\n showShare.value = false;\n };\n\n return {\n options,\n onSelect,\n showShare,\n };\n },\n};\n
\n<van-share-sheet v-model:show="showShare" title="Share" :options="options" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showShare = ref(false);\n const options = [\n [\n { name: 'WeChat', icon: 'wechat' },\n { name: 'WeChat Moments', icon: 'wechat-moments' },\n { name: 'Weibo', icon: 'weibo' },\n { name: 'QQ', icon: 'qq' },\n ],\n [\n { name: 'Link', icon: 'link' },\n { name: 'Poster', icon: 'poster' },\n { name: 'Qrcode', icon: 'qrcode' },\n { name: 'Weapp Qrcode', icon: 'weapp-qrcode' },\n ],\n ];\n\n return {\n options,\n showShare,\n };\n },\n};\n
\n<van-share-sheet v-model:show="showShare" :options="options" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showShare = ref(false);\n const options = [\n {\n name: 'Name',\n icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-fire.png',\n },\n {\n name: 'Name',\n icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-light.png',\n },\n {\n name: 'Name',\n icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-water.png',\n },\n ];\n\n return {\n options,\n showShare,\n };\n },\n};\n
\n<van-share-sheet\n v-model:show="showShare"\n :options="options"\n title="Share"\n description="Description"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showShare = ref(false);\n const options = [\n { name: 'WeChat', icon: 'wechat' },\n { name: 'Weibo', icon: 'weibo' },\n { name: 'Link', icon: 'link', description: 'Description' },\n { name: 'Poster', icon: 'poster' },\n { name: 'Qrcode', icon: 'qrcode' },\n ];\n\n return {\n options,\n showShare,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:show | \nWhether to show ShareSheet | \nboolean | \nfalse | \n
options | \nShare options | \nOption[] | \n[] | \n
title | \nTitle | \nstring | \n- | \n
cancel-text | \nCancel button text | \nstring | \n\'Cancel\' | \n
description | \nDescription | \nstring | \n- | \n
duration | \nTransition duration, unit second | \nnumber | string | \n0.3 | \n
z-index | \nSet the z-index to a fixed value | \nnumber | string | \n2000+ | \n
round | \nWhether to show round corner | \nboolean | \ntrue | \n
overlay | \nWhether to show overlay | \nboolean | \ntrue | \n
overlay-class | \nCustom overlay class | \nstring | Array | object | \n- | \n
overlay-style | \nCustom overlay style | \nobject | \n- | \n
lock-scroll | \nWhether to lock background scroll | \nboolean | \ntrue | \n
lazy-render | \nWhether to lazy render util appeared | \nboolean | \ntrue | \n
close-on-popstate | \nWhether to close when popstate | \nboolean | \ntrue | \n
close-on-click-overlay | \nWhether to close when overlay is clicked | \nboolean | \ntrue | \n
safe-area-inset-bottom | \nWhether to enable bottom safe area adaptation | \nboolean | \ntrue | \n
teleport | \nSpecifies a target element where ShareSheet will be mounted | \nstring | Element | \n- | \n
before-close | \nCallback function before close | \n(action: string) => boolean | Promise<boolean> | \n- | \n
Key | \nDescription | \nType | \n
---|---|---|
name | \nOption name | \nstring | \n
description | \nOption description | \nstring | \n
icon | \nOption icon, can be set to wechat weibo qq link qrcode poster weapp-qrcode wechat-moments or image URL | \nstring | \n
className | \nOption className is used to set the class props to the share item | \nstring | \n
Event | \nDescription | \nArguments | \n
---|---|---|
select | \nEmitted when an option is clicked | \noption: Option, index: number | \n
cancel | \nEmitted when the cancel button is clicked | \n- | \n
open | \nEmitted when opening ShareSheet | \n- | \n
close | \nEmitted when closing ShareSheet | \n- | \n
opened | \nEmitted when ShareSheet is opened | \n- | \n
closed | \nEmitted when ShareSheet is closed | \n- | \n
click-overlay | \nEmitted when overlay is clicked | \nevent: MouseEvent | \n
Name | \nDescription | \n
---|---|
title | \nCustom title | \n
description | \nCustom description | \n
cancel | \nCustom the content of cancel button | \n
The component exports the following type definitions:
\nimport type {\n ShareSheetProps,\n ShareSheetOption,\n ShareSheetOptions,\n} from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-share-sheet-header-padding | \nvar(--van-padding-sm) var(--van-padding-md) var(--van-padding-base) | \n- | \n
--van-share-sheet-title-color | \nvar(--van-text-color) | \n- | \n
--van-share-sheet-title-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-share-sheet-title-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-share-sheet-description-color | \nvar(--van-text-color-2) | \n- | \n
--van-share-sheet-description-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-share-sheet-description-line-height | \n16px | \n- | \n
--van-share-sheet-icon-size | \n48px | \n- | \n
--van-share-sheet-option-name-color | \nvar(--van-gray-7) | \n- | \n
--van-share-sheet-option-name-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-share-sheet-option-description-color | \nvar(--van-text-color-3) | \n- | \n
--van-share-sheet-option-description-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-share-sheet-cancel-button-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-share-sheet-cancel-button-height | \n48px | \n- | \n
--van-share-sheet-cancel-button-background | \nvar(--van-background-2) | \n- | \n
A pop-up sharing panel at the bottom for displaying the action buttons corresponding to each sharing channel, without specific sharing logic.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { ShareSheet } from 'vant';\n\nconst app = createApp();\napp.use(ShareSheet);\n
\n<van-cell title="Show ShareSheet" @click="showShare = true" />\n<van-share-sheet\n v-model:show="showShare"\n title="Share"\n :options="options"\n @select="onSelect"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const showShare = ref(false);\n const options = [\n { name: 'WeChat', icon: 'wechat' },\n { name: 'Weibo', icon: 'weibo' },\n { name: 'Link', icon: 'link' },\n { name: 'Poster', icon: 'poster' },\n { name: 'Qrcode', icon: 'qrcode' },\n ];\n\n const onSelect = (option) => {\n showToast(option.name);\n showShare.value = false;\n };\n\n return {\n options,\n onSelect,\n showShare,\n };\n },\n};\n
\n<van-share-sheet v-model:show="showShare" title="Share" :options="options" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showShare = ref(false);\n const options = [\n [\n { name: 'WeChat', icon: 'wechat' },\n { name: 'WeChat Moments', icon: 'wechat-moments' },\n { name: 'Weibo', icon: 'weibo' },\n { name: 'QQ', icon: 'qq' },\n ],\n [\n { name: 'Link', icon: 'link' },\n { name: 'Poster', icon: 'poster' },\n { name: 'Qrcode', icon: 'qrcode' },\n { name: 'Weapp Qrcode', icon: 'weapp-qrcode' },\n ],\n ];\n\n return {\n options,\n showShare,\n };\n },\n};\n
\n<van-share-sheet v-model:show="showShare" :options="options" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showShare = ref(false);\n const options = [\n {\n name: 'Name',\n icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-fire.png',\n },\n {\n name: 'Name',\n icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-light.png',\n },\n {\n name: 'Name',\n icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-water.png',\n },\n ];\n\n return {\n options,\n showShare,\n };\n },\n};\n
\n<van-share-sheet\n v-model:show="showShare"\n :options="options"\n title="Share"\n description="Description"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showShare = ref(false);\n const options = [\n { name: 'WeChat', icon: 'wechat' },\n { name: 'Weibo', icon: 'weibo' },\n { name: 'Link', icon: 'link', description: 'Description' },\n { name: 'Poster', icon: 'poster' },\n { name: 'Qrcode', icon: 'qrcode' },\n ];\n\n return {\n options,\n showShare,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:show | \nWhether to show ShareSheet | \nboolean | \nfalse | \n
options | \nShare options | \nOption[] | \n[] | \n
title | \nTitle | \nstring | \n- | \n
cancel-text | \nCancel button text | \nstring | \n\'Cancel\' | \n
description | \nDescription | \nstring | \n- | \n
duration | \nTransition duration, unit second | \nnumber | string | \n0.3 | \n
z-index | \nSet the z-index to a fixed value | \nnumber | string | \n2000+ | \n
round | \nWhether to show round corner | \nboolean | \ntrue | \n
overlay | \nWhether to show overlay | \nboolean | \ntrue | \n
overlay-class | \nCustom overlay class | \nstring | Array | object | \n- | \n
overlay-style | \nCustom overlay style | \nobject | \n- | \n
lock-scroll | \nWhether to lock background scroll | \nboolean | \ntrue | \n
lazy-render | \nWhether to lazy render util appeared | \nboolean | \ntrue | \n
close-on-popstate | \nWhether to close when popstate | \nboolean | \ntrue | \n
close-on-click-overlay | \nWhether to close when overlay is clicked | \nboolean | \ntrue | \n
safe-area-inset-bottom | \nWhether to enable bottom safe area adaptation | \nboolean | \ntrue | \n
teleport | \nSpecifies a target element where ShareSheet will be mounted | \nstring | Element | \n- | \n
before-close | \nCallback function before close | \n(action: string) => boolean | Promise<boolean> | \n- | \n
Key | \nDescription | \nType | \n
---|---|---|
name | \nOption name | \nstring | \n
description | \nOption description | \nstring | \n
icon | \nOption icon, can be set to wechat weibo qq link qrcode poster weapp-qrcode wechat-moments or image URL | \nstring | \n
className | \nOption className is used to set the class props to the share item | \nstring | \n
Event | \nDescription | \nArguments | \n
---|---|---|
select | \nEmitted when an option is clicked | \noption: Option, index: number | \n
cancel | \nEmitted when the cancel button is clicked | \n- | \n
open | \nEmitted when opening ShareSheet | \n- | \n
close | \nEmitted when closing ShareSheet | \n- | \n
opened | \nEmitted when ShareSheet is opened | \n- | \n
closed | \nEmitted when ShareSheet is closed | \n- | \n
click-overlay | \nEmitted when overlay is clicked | \nevent: MouseEvent | \n
Name | \nDescription | \n
---|---|
title | \nCustom title | \n
description | \nCustom description | \n
cancel | \nCustom the content of cancel button | \n
The component exports the following type definitions:
\nimport type {\n ShareSheetProps,\n ShareSheetOption,\n ShareSheetOptions,\n} from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-share-sheet-header-padding | \nvar(--van-padding-sm) var(--van-padding-md) var(--van-padding-base) | \n- | \n
--van-share-sheet-title-color | \nvar(--van-text-color) | \n- | \n
--van-share-sheet-title-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-share-sheet-title-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-share-sheet-description-color | \nvar(--van-text-color-2) | \n- | \n
--van-share-sheet-description-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-share-sheet-description-line-height | \n16px | \n- | \n
--van-share-sheet-icon-size | \n48px | \n- | \n
--van-share-sheet-option-name-color | \nvar(--van-gray-7) | \n- | \n
--van-share-sheet-option-name-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-share-sheet-option-description-color | \nvar(--van-text-color-3) | \n- | \n
--van-share-sheet-option-description-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-share-sheet-cancel-button-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-share-sheet-cancel-button-height | \n48px | \n- | \n
--van-share-sheet-cancel-button-background | \nvar(--van-background-2) | \n- | \n
Used to display pop-up windows, information prompts, etc., and supports multiple pop-up layers to display.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Popup } from 'vant';\n\nconst app = createApp();\napp.use(Popup);\n
\n<van-cell title="Show Popup" is-link @click="showPopup" />\n<van-popup v-model:show="show" :style="{ padding: '64px' }">Content</van-popup>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n const showPopup = () => {\n show.value = true;\n };\n return {\n show,\n showPopup,\n };\n },\n};\n
\nUse position
prop to set Popup display position.
The default position is center
, it can be set to top
, bottom
, left
, right
.
top
or bottom
, the default width is consistent with the screen width, and the height of the Popup depends on the height of the content.left
or right
side, the width and height are not set by default, and the width and height of the popup depend on the width and height of the content.<!-- top popup -->\n<van-popup v-model:show="showTop" position="top" :style="{ height: '30%' }" />\n\n<!-- bottom popup -->\n<van-popup\n v-model:show="showBottom"\n position="bottom"\n :style="{ height: '30%' }"\n/>\n\n<!-- left popup -->\n<van-popup\n v-model:show="showLeft"\n position="left"\n :style="{ width: '30%', height: '100%' }"\n/>\n\n<!-- Popup on the right -->\n<van-popup\n v-model:show="showRight"\n position="right"\n :style="{ width: '30%', height: '100%' }"\n/>\n
\n<van-popup\n v-model:show="show"\n closeable\n position="bottom"\n :style="{ height: '30%' }"\n/>\n<!-- Custom Icon -->\n<van-popup\n v-model:show="show"\n closeable\n close-icon="close"\n position="bottom"\n :style="{ height: '30%' }"\n/>\n<!-- Icon Position -->\n<van-popup\n v-model:show="show"\n closeable\n close-icon-position="top-left"\n position="bottom"\n :style="{ height: '30%' }"\n/>\n
\nAfter setting the round
prop, the Popup will add different rounded corner styles according to the position.
<!-- Round Popup (center) -->\n<van-popup v-model:show="showCenter" round :style="{ padding: '64px' }" />\n\n<!-- Round Popup (bottom) -->\n<van-popup\n v-model:show="showBottom"\n round\n position="bottom"\n :style="{ height: '30%' }"\n/>\n
\nPopup supports following events:
\nclick
: Emitted when Popup is clicked.click-overlay
: Emitted when overlay is clicked.click-close-icon
: Emitted when close icon is clicked.<van-cell title="Listen Click Events" is-link @click="show = true" />\n<van-popup\n v-model:show="show"\n position="bottom"\n :style="{ height: '30%' }"\n closeable\n @click-overlay="onClickOverlay"\n @click-close-icon="onClickCloseIcon"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const show = ref(false);\n const onClickOverlay = () => {\n showToast('click-overlay');\n };\n const onClickCloseIcon = () => {\n showToast('click-close-icon');\n };\n return {\n show,\n onClickOverlay,\n onClickCloseIcon,\n };\n },\n};\n
\nWhen the Popup is opened or closed, the following events will be emitted:
\nopen
: Emitted immediately when the Popup is opened.opened
: Emitted when the Popup is opened and the animation ends.close
: Emitted immediately when the Popup is closed.closed
: Emitted when the Popup is closed and the animation ends.<van-cell title="Listen to display events" is-link @click="show = true" />\n<van-popup\n v-model:show="show"\n position="bottom"\n :style="{ height: '30%' }"\n @open="showToast('open')"\n @opened="showToast('opened')"\n @close="showToast('close')"\n @closed="showToast('closed')"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const show = ref(false);\n return {\n show,\n showToast,\n };\n },\n};\n
\nUse teleport
prop to specify mount location.
<!-- teleport to body -->\n<van-popup v-model:show="show" teleport="body" />\n\n<!-- teleport to #app -->\n<van-popup v-model:show="show" teleport="#app" />\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:show | \nWhether to show popup | \nboolean | \nfalse | \n
overlay | \nWhether to show overlay | \nboolean | \ntrue | \n
position | \nCan be set to top bottom right left | \nstring | \ncenter | \n
overlay-class | \nCustom overlay class | \nstring | Array | object | \n- | \n
overlay-style | \nCustom overlay style | \nobject | \n- | \n
duration | \nTransition duration, unit second | \nnumber | string | \n0.3 | \n
z-index | \nSet the z-index to a fixed value | \nnumber | string | \n2000+ | \n
round | \nWhether to show round corner | \nboolean | \nfalse | \n
lock-scroll | \nWhether to lock background scroll | \nboolean | \ntrue | \n
lazy-render | \nWhether to lazy render util appeared | \nboolean | \ntrue | \n
close-on-popstate | \nWhether to close when popstate | \nboolean | \nfalse | \n
close-on-click-overlay | \nWhether to close when overlay is clicked | \nboolean | \ntrue | \n
closeable | \nWhether to show close icon | \nboolean | \nfalse | \n
close-icon | \nClose icon name | \nstring | \ncross | \n
close-icon-position | \nClose Icon Position, can be set to top-left bottom-left bottom-right | \nstring | \ntop-right | \n
before-close | \nCallback function before close | \n(action: string) => boolean | Promise<boolean> | \n- | \n
icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
transition | \nTransition, equivalent to name prop of transition | \nstring | \n- | \n
transition-appear | \nWhether to apply transition on initial render | \nboolean | \nfalse | \n
teleport | \nSpecifies a target element where Popup will be mounted | \nstring | Element | \n- | \n
safe-area-inset-top | \nWhether to enable top safe area adaptation | \nboolean | \nfalse | \n
safe-area-inset-bottom | \nWhether to enable bottom safe area adaptation | \nboolean | \nfalse | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when Popup is clicked | \nevent: MouseEvent | \n
click-overlay | \nEmitted when overlay is clicked | \nevent: MouseEvent | \n
click-close-icon | \nEmitted when close icon is clicked | \nevent: MouseEvent | \n
open | \nEmitted immediately when Popup is opened | \n- | \n
close | \nEmitted immediately when Popup is closed | \n- | \n
opened | \nEmitted when Popup is opened and the animation ends | \n- | \n
closed | \nEmitted when Popup is closed and the animation ends | \n- | \n
Name | \nDescription | \n
---|---|
default | \nContent of Popup | \n
overlay-content | \nContent of Popup overlay | \n
The component exports the following type definitions:
\nimport type {\n PopupProps,\n PopupPosition,\n PopupInstance,\n PopupCloseIconPosition,\n} from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-popup-background | \nvar(--van-background-2) | \n- | \n
--van-popup-transition | \ntransform var(--van-duration-base) | \n- | \n
--van-popup-round-radius | \n16px | \n- | \n
--van-popup-close-icon-size | \n22px | \n- | \n
--van-popup-close-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-popup-close-icon-margin | \n16px | \n- | \n
--van-popup-close-icon-z-index | \n1 | \n- | \n
Used to display pop-up windows, information prompts, etc., and supports multiple pop-up layers to display.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Popup } from 'vant';\n\nconst app = createApp();\napp.use(Popup);\n
\n<van-cell title="Show Popup" is-link @click="showPopup" />\n<van-popup v-model:show="show" :style="{ padding: '64px' }">Content</van-popup>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n const showPopup = () => {\n show.value = true;\n };\n return {\n show,\n showPopup,\n };\n },\n};\n
\nUse position
prop to set Popup display position.
The default position is center
, it can be set to top
, bottom
, left
, right
.
top
or bottom
, the default width is consistent with the screen width, and the height of the Popup depends on the height of the content.left
or right
side, the width and height are not set by default, and the width and height of the popup depend on the width and height of the content.<!-- top popup -->\n<van-popup v-model:show="showTop" position="top" :style="{ height: '30%' }" />\n\n<!-- bottom popup -->\n<van-popup\n v-model:show="showBottom"\n position="bottom"\n :style="{ height: '30%' }"\n/>\n\n<!-- left popup -->\n<van-popup\n v-model:show="showLeft"\n position="left"\n :style="{ width: '30%', height: '100%' }"\n/>\n\n<!-- Popup on the right -->\n<van-popup\n v-model:show="showRight"\n position="right"\n :style="{ width: '30%', height: '100%' }"\n/>\n
\n<van-popup\n v-model:show="show"\n closeable\n position="bottom"\n :style="{ height: '30%' }"\n/>\n<!-- Custom Icon -->\n<van-popup\n v-model:show="show"\n closeable\n close-icon="close"\n position="bottom"\n :style="{ height: '30%' }"\n/>\n<!-- Icon Position -->\n<van-popup\n v-model:show="show"\n closeable\n close-icon-position="top-left"\n position="bottom"\n :style="{ height: '30%' }"\n/>\n
\nAfter setting the round
prop, the Popup will add different rounded corner styles according to the position.
<!-- Round Popup (center) -->\n<van-popup v-model:show="showCenter" round :style="{ padding: '64px' }" />\n\n<!-- Round Popup (bottom) -->\n<van-popup\n v-model:show="showBottom"\n round\n position="bottom"\n :style="{ height: '30%' }"\n/>\n
\nPopup supports following events:
\nclick
: Emitted when Popup is clicked.click-overlay
: Emitted when overlay is clicked.click-close-icon
: Emitted when close icon is clicked.<van-cell title="Listen Click Events" is-link @click="show = true" />\n<van-popup\n v-model:show="show"\n position="bottom"\n :style="{ height: '30%' }"\n closeable\n @click-overlay="onClickOverlay"\n @click-close-icon="onClickCloseIcon"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const show = ref(false);\n const onClickOverlay = () => {\n showToast('click-overlay');\n };\n const onClickCloseIcon = () => {\n showToast('click-close-icon');\n };\n return {\n show,\n onClickOverlay,\n onClickCloseIcon,\n };\n },\n};\n
\nWhen the Popup is opened or closed, the following events will be emitted:
\nopen
: Emitted immediately when the Popup is opened.opened
: Emitted when the Popup is opened and the animation ends.close
: Emitted immediately when the Popup is closed.closed
: Emitted when the Popup is closed and the animation ends.<van-cell title="Listen to display events" is-link @click="show = true" />\n<van-popup\n v-model:show="show"\n position="bottom"\n :style="{ height: '30%' }"\n @open="showToast('open')"\n @opened="showToast('opened')"\n @close="showToast('close')"\n @closed="showToast('closed')"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const show = ref(false);\n return {\n show,\n showToast,\n };\n },\n};\n
\nUse teleport
prop to specify mount location.
<!-- teleport to body -->\n<van-popup v-model:show="show" teleport="body" />\n\n<!-- teleport to #app -->\n<van-popup v-model:show="show" teleport="#app" />\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:show | \nWhether to show popup | \nboolean | \nfalse | \n
overlay | \nWhether to show overlay | \nboolean | \ntrue | \n
position | \nCan be set to top bottom right left | \nstring | \ncenter | \n
overlay-class | \nCustom overlay class | \nstring | Array | object | \n- | \n
overlay-style | \nCustom overlay style | \nobject | \n- | \n
duration | \nTransition duration, unit second | \nnumber | string | \n0.3 | \n
z-index | \nSet the z-index to a fixed value | \nnumber | string | \n2000+ | \n
round | \nWhether to show round corner | \nboolean | \nfalse | \n
lock-scroll | \nWhether to lock background scroll | \nboolean | \ntrue | \n
lazy-render | \nWhether to lazy render util appeared | \nboolean | \ntrue | \n
close-on-popstate | \nWhether to close when popstate | \nboolean | \nfalse | \n
close-on-click-overlay | \nWhether to close when overlay is clicked | \nboolean | \ntrue | \n
closeable | \nWhether to show close icon | \nboolean | \nfalse | \n
close-icon | \nClose icon name | \nstring | \ncross | \n
close-icon-position | \nClose Icon Position, can be set to top-left bottom-left bottom-right | \nstring | \ntop-right | \n
before-close | \nCallback function before close | \n(action: string) => boolean | Promise<boolean> | \n- | \n
icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
transition | \nTransition, equivalent to name prop of transition | \nstring | \n- | \n
transition-appear | \nWhether to apply transition on initial render | \nboolean | \nfalse | \n
teleport | \nSpecifies a target element where Popup will be mounted | \nstring | Element | \n- | \n
safe-area-inset-top | \nWhether to enable top safe area adaptation | \nboolean | \nfalse | \n
safe-area-inset-bottom | \nWhether to enable bottom safe area adaptation | \nboolean | \nfalse | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when Popup is clicked | \nevent: MouseEvent | \n
click-overlay | \nEmitted when overlay is clicked | \nevent: MouseEvent | \n
click-close-icon | \nEmitted when close icon is clicked | \nevent: MouseEvent | \n
open | \nEmitted immediately when Popup is opened | \n- | \n
close | \nEmitted immediately when Popup is closed | \n- | \n
opened | \nEmitted when Popup is opened and the animation ends | \n- | \n
closed | \nEmitted when Popup is closed and the animation ends | \n- | \n
Name | \nDescription | \n
---|---|
default | \nContent of Popup | \n
overlay-content | \nContent of Popup overlay | \n
The component exports the following type definitions:
\nimport type {\n PopupProps,\n PopupPosition,\n PopupInstance,\n PopupCloseIconPosition,\n} from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-popup-background | \nvar(--van-background-2) | \n- | \n
--van-popup-transition | \ntransform var(--van-duration-base) | \n- | \n
--van-popup-round-radius | \n16px | \n- | \n
--van-popup-close-icon-size | \n22px | \n- | \n
--van-popup-close-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-popup-close-icon-margin | \n16px | \n- | \n
--van-popup-close-icon-z-index | \n1 | \n- | \n
Vant provides the ability to customize the theme based on CSS variables, and can uniformly modify the component style. For details, see ConfigProvider Global Configuration component.
\nIf the theme customization does not meet your needs, you can also override the default style using a custom style class, see the following example:
\n<template>\n <van-button class="my-button">Button</van-button>\n</template>\n\n<style>\n /** Override the style of Button's root element */\n .my-button {\n width: 200px;\n }\n\n /** Override the style of Button's child elements */\n .my-button.van-button__text {\n color: red;\n }\n</style>\n
\nWhen using Vant components in HTML, you may encounter situations where some sample code may not render correctly, such as the following usage:
\n<van-cell-group>\n <van-cell title="cell" value="content" />\n <van-cell title="cell" value="content" />\n</van-cell-group>\n
\nThis is because HTML does not support self-closing custom elements, so syntax like <van-cell />
is not recognized. Using a closing tag can work around this problem:
<van-cell-group>\n <van-cell title="cell" value="content"></van-cell>\n <van-cell title="cell" value="content"></van-cell>\n</van-cell-group>\n
\nSelf-closing custom elements are available in single-file components, string templates, and JSX, so this problem doesn\'t arise.
\nThis is because iOS Safari does not trigger the :active
pseudo-class by default. The solution is to add an empty ontouchstart
attribute to the body
tag:
<body ontouchstart="">\n ...\n</body>\n
\nReference link: stackoverflow - :active pseudo-class doesn\'t work in mobile safari
\nSelect is a widely used component on the desktop, but its interactive form is not suitable for the mobile device.
\nOn the mobile side, we recommend using the Picker selector component instead.
\nAll components of Vant are implemented based on the Vue framework and are not adapted to uni-app, so the availability of each component under uni-app is not guaranteed.
\nIf you encounter problems using Vant in uni-app, it is recommended to provide feedback to uni-app.
\nSee Adapt to PC Browsers.
\nSee Browser Adaptation.
\nVant provides the ability to customize the theme based on CSS variables, and can uniformly modify the component style. For details, see ConfigProvider Global Configuration component.
\nIf the theme customization does not meet your needs, you can also override the default style using a custom style class, see the following example:
\n<template>\n <van-button class="my-button">Button</van-button>\n</template>\n\n<style>\n /** Override the style of Button's root element */\n .my-button {\n width: 200px;\n }\n\n /** Override the style of Button's child elements */\n .my-button.van-button__text {\n color: red;\n }\n</style>\n
\nWhen using Vant components in HTML, you may encounter situations where some sample code may not render correctly, such as the following usage:
\n<van-cell-group>\n <van-cell title="cell" value="content" />\n <van-cell title="cell" value="content" />\n</van-cell-group>\n
\nThis is because HTML does not support self-closing custom elements, so syntax like <van-cell />
is not recognized. Using a closing tag can work around this problem:
<van-cell-group>\n <van-cell title="cell" value="content"></van-cell>\n <van-cell title="cell" value="content"></van-cell>\n</van-cell-group>\n
\nSelf-closing custom elements are available in single-file components, string templates, and JSX, so this problem doesn\'t arise.
\nThis is because iOS Safari does not trigger the :active
pseudo-class by default. The solution is to add an empty ontouchstart
attribute to the body
tag:
<body ontouchstart="">\n ...\n</body>\n
\nReference link: stackoverflow - :active pseudo-class doesn\'t work in mobile safari
\nSelect is a widely used component on the desktop, but its interactive form is not suitable for the mobile device.
\nOn the mobile side, we recommend using the Picker selector component instead.
\nAll components of Vant are implemented based on the Vue framework and are not adapted to uni-app, so the availability of each component under uni-app is not guaranteed.
\nIf you encounter problems using Vant in uni-app, it is recommended to provide feedback to uni-app.
\nSee Adapt to PC Browsers.
\nSee Browser Adaptation.
\nUsed to mark keywords and summarize the main content.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Tag } from 'vant';\n\nconst app = createApp();\napp.use(Tag);\n
\n<van-tag type="primary">Tag</van-tag>\n<van-tag type="success">Tag</van-tag>\n<van-tag type="danger">Tag</van-tag>\n<van-tag type="warning">Tag</van-tag>\n
\n<van-tag plain type="primary">Tag</van-tag>\n
\n<van-tag round type="primary">Tag</van-tag>\n
\n<van-tag mark type="primary">Tag</van-tag>\n
\n<van-tag :show="show" closeable size="medium" type="primary" @close="close">\n Tag\n</van-tag>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(true);\n const close = () => {\n show.value = false;\n };\n\n return {\n show,\n close,\n };\n },\n};\n
\n<van-tag type="primary">Tag</van-tag>\n<van-tag type="primary" size="medium">Tag</van-tag>\n<van-tag type="primary" size="large">Tag</van-tag>\n
\n<van-tag color="#7232dd">Tag</van-tag>\n<van-tag color="#ffe1e1" text-color="#ad0000">Tag</van-tag>\n<van-tag color="#7232dd" plain>Tag</van-tag>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
type | \nType, can be set to primary success danger warning | \nstring | \ndefault | \n
size | \nSize, can be set to large medium | \nstring | \n- | \n
color | \nCustom color | \nstring | \n- | \n
show | \nWhether to show tag | \nboolean | \ntrue | \n
plain | \nWhether to be plain style | \nboolean | \nfalse | \n
round | \nWhether to be round style | \nboolean | \nfalse | \n
mark | \nWhether to be mark style | \nboolean | \nfalse | \n
text-color | \nText color | \nstring | \nwhite | \n
closeable | \nWhether to be closeable | \nboolean | \nfalse | \n
Name | \nDescription | \n
---|---|
default | \nDefault slot | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when component is clicked | \nevent: MouseEvent | \n
close | \nEmitted when close icon is clicked | \nevent: MouseEvent | \n
The component exports the following type definitions:
\nimport type { TagSize, TagType, TagProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-tag-padding | \n0 var(--van-padding-base) | \n- | \n
--van-tag-text-color | \nvar(--van-white) | \n- | \n
--van-tag-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-tag-radius | \n2px | \n- | \n
--van-tag-line-height | \n16px | \n- | \n
--van-tag-medium-padding | \n2px 6px | \n- | \n
--van-tag-large-padding | \nvar(--van-padding-base) var(--van-padding-xs) | \n- | \n
--van-tag-large-radius | \nvar(--van-radius-md) | \n- | \n
--van-tag-large-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-tag-round-radius | \nvar(--van-radius-max) | \n- | \n
--van-tag-danger-color | \nvar(--van-danger-color) | \n- | \n
--van-tag-primary-color | \nvar(--van-primary-color) | \n- | \n
--van-tag-success-color | \nvar(--van-success-color) | \n- | \n
--van-tag-warning-color | \nvar(--van-warning-color) | \n- | \n
--van-tag-default-color | \nvar(--van-gray-6) | \n- | \n
--van-tag-plain-background | \nvar(--van-background-2) | \n- | \n
Used to mark keywords and summarize the main content.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Tag } from 'vant';\n\nconst app = createApp();\napp.use(Tag);\n
\n<van-tag type="primary">Tag</van-tag>\n<van-tag type="success">Tag</van-tag>\n<van-tag type="danger">Tag</van-tag>\n<van-tag type="warning">Tag</van-tag>\n
\n<van-tag plain type="primary">Tag</van-tag>\n
\n<van-tag round type="primary">Tag</van-tag>\n
\n<van-tag mark type="primary">Tag</van-tag>\n
\n<van-tag :show="show" closeable size="medium" type="primary" @close="close">\n Tag\n</van-tag>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(true);\n const close = () => {\n show.value = false;\n };\n\n return {\n show,\n close,\n };\n },\n};\n
\n<van-tag type="primary">Tag</van-tag>\n<van-tag type="primary" size="medium">Tag</van-tag>\n<van-tag type="primary" size="large">Tag</van-tag>\n
\n<van-tag color="#7232dd">Tag</van-tag>\n<van-tag color="#ffe1e1" text-color="#ad0000">Tag</van-tag>\n<van-tag color="#7232dd" plain>Tag</van-tag>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
type | \nType, can be set to primary success danger warning | \nstring | \ndefault | \n
size | \nSize, can be set to large medium | \nstring | \n- | \n
color | \nCustom color | \nstring | \n- | \n
show | \nWhether to show tag | \nboolean | \ntrue | \n
plain | \nWhether to be plain style | \nboolean | \nfalse | \n
round | \nWhether to be round style | \nboolean | \nfalse | \n
mark | \nWhether to be mark style | \nboolean | \nfalse | \n
text-color | \nText color | \nstring | \nwhite | \n
closeable | \nWhether to be closeable | \nboolean | \nfalse | \n
Name | \nDescription | \n
---|---|
default | \nDefault slot | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when component is clicked | \nevent: MouseEvent | \n
close | \nEmitted when close icon is clicked | \nevent: MouseEvent | \n
The component exports the following type definitions:
\nimport type { TagSize, TagType, TagProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-tag-padding | \n0 var(--van-padding-base) | \n- | \n
--van-tag-text-color | \nvar(--van-white) | \n- | \n
--van-tag-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-tag-radius | \n2px | \n- | \n
--van-tag-line-height | \n16px | \n- | \n
--van-tag-medium-padding | \n2px 6px | \n- | \n
--van-tag-large-padding | \nvar(--van-padding-base) var(--van-padding-xs) | \n- | \n
--van-tag-large-radius | \nvar(--van-radius-md) | \n- | \n
--van-tag-large-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-tag-round-radius | \nvar(--van-radius-max) | \n- | \n
--van-tag-danger-color | \nvar(--van-danger-color) | \n- | \n
--van-tag-primary-color | \nvar(--van-primary-color) | \n- | \n
--van-tag-success-color | \nvar(--van-success-color) | \n- | \n
--van-tag-warning-color | \nvar(--van-warning-color) | \n- | \n
--van-tag-default-color | \nvar(--van-gray-6) | \n- | \n
--van-tag-plain-background | \nvar(--van-background-2) | \n- | \n
\u83B7\u53D6\u9875\u9762\u7684\u53EF\u89C1\u72B6\u6001\u3002
\nimport { watch } from 'vue';\nimport { usePageVisibility } from '@vant/use';\n\nexport default {\n setup() {\n const pageVisibility = usePageVisibility();\n\n watch(pageVisibility, (value) => {\n console.log('visibility: ', value);\n });\n },\n};\n
\ntype VisibilityState = 'visible' | 'hidden';\n\nfunction usePageVisibility(): Ref<VisibilityState>;\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
visibilityState | \n\u9875\u9762\u5F53\u524D\u7684\u53EF\u89C1\u72B6\u6001\uFF0Cvisible \u4E3A\u53EF\u89C1\uFF0Chidden \u4E3A\u9690\u85CF | \nRef<VisibilityState> | \n
\u83B7\u53D6\u9875\u9762\u7684\u53EF\u89C1\u72B6\u6001\u3002
\nimport { watch } from 'vue';\nimport { usePageVisibility } from '@vant/use';\n\nexport default {\n setup() {\n const pageVisibility = usePageVisibility();\n\n watch(pageVisibility, (value) => {\n console.log('visibility: ', value);\n });\n },\n};\n
\ntype VisibilityState = 'visible' | 'hidden';\n\nfunction usePageVisibility(): Ref<VisibilityState>;\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
visibilityState | \n\u9875\u9762\u5F53\u524D\u7684\u53EF\u89C1\u72B6\u6001\uFF0Cvisible \u4E3A\u53EF\u89C1\uFF0Chidden \u4E3A\u9690\u85CF | \nRef<VisibilityState> | \n
Input box component for search scenarios.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Search } from 'vant';\n\nconst app = createApp();\napp.use(Search);\n
\n<van-search v-model="value" placeholder="Placeholder" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref('');\n return { value };\n },\n};\n
\nsearch
event will be Emitted when click the search button on the keyboard, cancel
event will be Emitted when click the cancel button.
<form action="/">\n <van-search\n v-model="value"\n show-action\n placeholder="Placeholder"\n @search="onSearch"\n @cancel="onCancel"\n />\n</form>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const value = ref('');\n const onSearch = (val) => showToast(val);\n const onCancel = () => showToast('Cancel');\n return {\n value,\n onSearch,\n onCancel,\n };\n },\n};\n
\n\n\nTips: There will be a search button on the keyboard when Search is inside a form in iOS.
\n
<van-search v-model="value" input-align="center" placeholder="Placeholder" />\n
\n<van-search v-model="value" disabled placeholder="Placeholder" />\n
\n<van-search\n v-model="value"\n shape="round"\n background="#4fc08d"\n placeholder="Placeholder"\n/>\n
\nUse action
slot to custom right button, cancel
event will no longer be Emitted when use this slot.
<van-search\n v-model="value"\n show-action\n label="Address"\n placeholder="Placeholder"\n @search="onSearch"\n>\n <template #action>\n <div @click="onClickButton">Search</div>\n </template>\n</van-search>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const value = ref('');\n const onSearch = (val) => showToast(val);\n const onClickButton = () => showToast(value.value);\n return {\n value,\n onSearch,\n onClickButton,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nInput value | \nnumber | string | \n- | \n
label | \nLeft side label | \nstring | \n- | \n
name | \nAs the identifier when submitting the form | \nstring | \n- | \n
shape | \nShape of field, can be set to round | \nstring | \nsquare | \n
id | \nInput id, the for attribute of the label also will be set | \nstring | \nvan-search-n-input | \n
background | \nBackground color of field | \nstring | \n#f2f2f2 | \n
maxlength | \nMax length of value | \nnumber | string | \n- | \n
placeholder | \nPlaceholder | \nstring | \n- | \n
clearable | \nWhether to be clearable | \nboolean | \ntrue | \n
clear-icon | \nClear icon name | \nstring | \nclear | \n
clear-trigger | \nWhen to display the clear icon, always means to display the icon when value is not empty, focus means to display the icon when input is focused | \nstring | \nfocus | \n
autofocus | \nWhether to auto focus, unsupported in iOS | \nboolean | \nfalse | \n
show-action | \nWhether to show right action button | \nboolean | \nfalse | \n
action-text | \nText of action button | \nstring | \nCancel | \n
disabled | \nWhether to disable field | \nboolean | \nfalse | \n
readonly | \nWhether to be readonly | \nboolean | \nfalse | \n
error | \nWhether to mark the input content in red | \nboolean | \nfalse | \n
error-message | \nError message | \nstring | \n- | \n
formatter | \nInput value formatter | \n(val: string) => string | \n- | \n
format-trigger | \nWhen to format value, can be set to onBlur | \nstring | \nonChange | \n
input-align | \nText align of field, can be set to center right | \nstring | \nleft | \n
left-icon | \nLeft icon name | \nstring | \nsearch | \n
right-icon | \nRight icon name | \nstring | \n- | \n
autocomplete | \nautocomplete attribute of native input element | \nstring | \n- | \n
Event | \nDescription | \nArguments | \n
---|---|---|
search | \nEmitted when confirming search | \nvalue: string | \n
update:model-value | \nEmitted when input value changed | \nvalue: string | \n
focus | \nEmitted when input is focused | \nevent: Event | \n
blur | \nEmitted when input is blurred | \nevent: Event | \n
click-input | \nEmitted when the input is clicked | \nevent: MouseEvent | \n
click-left-icon | \nEmitted when the left icon is clicked | \nevent: MouseEvent | \n
click-right-icon | \nEmitted when the right icon is clicked | \nevent: MouseEvent | \n
clear | \nEmitted when the clear icon is clicked | \nevent: MouseEvent | \n
cancel | \nEmitted when the cancel button is clicked | \n- | \n
Use ref to get Search instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
focus | \nTrigger input focus | \n- | \n- | \n
blur | \nTrigger input blur | \n- | \n- | \n
The component exports the following type definitions:
\nimport type { SearchProps, SearchShape, SearchInstance } from 'vant';\n
\nSearchInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { SearchInstance } from 'vant';\n\nconst searchRef = ref<SearchInstance>();\n\nsearchRef.value?.focus();\n
\nName | \nDescription | \n
---|---|
left | \nCustom left side content | \n
action | \nCustom right button, displayed when show-action is true | \n
label | \nCustom Search label | \n
left-icon | \nCustom left icon | \n
right-icon | \nCustom right icon | \n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-search-padding | \n10px var(--van-padding-sm) | \n- | \n
--van-search-background | \nvar(--van-background-2) | \n- | \n
--van-search-content-background | \nvar(--van-gray-1) | \n- | \n
--van-search-input-height | \n34px | \n- | \n
--van-search-label-padding | \n0 5px | \n- | \n
--van-search-label-color | \nvar(--van-text-color) | \n- | \n
--van-search-label-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-search-left-icon-color | \nvar(--van-gray-6) | \n- | \n
--van-search-action-padding | \n0 var(--van-padding-xs) | \n- | \n
--van-search-action-text-color | \nvar(--van-text-color) | \n- | \n
--van-search-action-font-size | \nvar(--van-font-size-md) | \n- | \n
Input box component for search scenarios.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Search } from 'vant';\n\nconst app = createApp();\napp.use(Search);\n
\n<van-search v-model="value" placeholder="Placeholder" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref('');\n return { value };\n },\n};\n
\nsearch
event will be Emitted when click the search button on the keyboard, cancel
event will be Emitted when click the cancel button.
<form action="/">\n <van-search\n v-model="value"\n show-action\n placeholder="Placeholder"\n @search="onSearch"\n @cancel="onCancel"\n />\n</form>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const value = ref('');\n const onSearch = (val) => showToast(val);\n const onCancel = () => showToast('Cancel');\n return {\n value,\n onSearch,\n onCancel,\n };\n },\n};\n
\n\n\nTips: There will be a search button on the keyboard when Search is inside a form in iOS.
\n
<van-search v-model="value" input-align="center" placeholder="Placeholder" />\n
\n<van-search v-model="value" disabled placeholder="Placeholder" />\n
\n<van-search\n v-model="value"\n shape="round"\n background="#4fc08d"\n placeholder="Placeholder"\n/>\n
\nUse action
slot to custom right button, cancel
event will no longer be Emitted when use this slot.
<van-search\n v-model="value"\n show-action\n label="Address"\n placeholder="Placeholder"\n @search="onSearch"\n>\n <template #action>\n <div @click="onClickButton">Search</div>\n </template>\n</van-search>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const value = ref('');\n const onSearch = (val) => showToast(val);\n const onClickButton = () => showToast(value.value);\n return {\n value,\n onSearch,\n onClickButton,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nInput value | \nnumber | string | \n- | \n
label | \nLeft side label | \nstring | \n- | \n
name | \nAs the identifier when submitting the form | \nstring | \n- | \n
shape | \nShape of field, can be set to round | \nstring | \nsquare | \n
id | \nInput id, the for attribute of the label also will be set | \nstring | \nvan-search-n-input | \n
background | \nBackground color of field | \nstring | \n#f2f2f2 | \n
maxlength | \nMax length of value | \nnumber | string | \n- | \n
placeholder | \nPlaceholder | \nstring | \n- | \n
clearable | \nWhether to be clearable | \nboolean | \ntrue | \n
clear-icon | \nClear icon name | \nstring | \nclear | \n
clear-trigger | \nWhen to display the clear icon, always means to display the icon when value is not empty, focus means to display the icon when input is focused | \nstring | \nfocus | \n
autofocus | \nWhether to auto focus, unsupported in iOS | \nboolean | \nfalse | \n
show-action | \nWhether to show right action button | \nboolean | \nfalse | \n
action-text | \nText of action button | \nstring | \nCancel | \n
disabled | \nWhether to disable field | \nboolean | \nfalse | \n
readonly | \nWhether to be readonly | \nboolean | \nfalse | \n
error | \nWhether to mark the input content in red | \nboolean | \nfalse | \n
error-message | \nError message | \nstring | \n- | \n
formatter | \nInput value formatter | \n(val: string) => string | \n- | \n
format-trigger | \nWhen to format value, can be set to onBlur | \nstring | \nonChange | \n
input-align | \nText align of field, can be set to center right | \nstring | \nleft | \n
left-icon | \nLeft icon name | \nstring | \nsearch | \n
right-icon | \nRight icon name | \nstring | \n- | \n
autocomplete | \nautocomplete attribute of native input element | \nstring | \n- | \n
Event | \nDescription | \nArguments | \n
---|---|---|
search | \nEmitted when confirming search | \nvalue: string | \n
update:model-value | \nEmitted when input value changed | \nvalue: string | \n
focus | \nEmitted when input is focused | \nevent: Event | \n
blur | \nEmitted when input is blurred | \nevent: Event | \n
click-input | \nEmitted when the input is clicked | \nevent: MouseEvent | \n
click-left-icon | \nEmitted when the left icon is clicked | \nevent: MouseEvent | \n
click-right-icon | \nEmitted when the right icon is clicked | \nevent: MouseEvent | \n
clear | \nEmitted when the clear icon is clicked | \nevent: MouseEvent | \n
cancel | \nEmitted when the cancel button is clicked | \n- | \n
Use ref to get Search instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
focus | \nTrigger input focus | \n- | \n- | \n
blur | \nTrigger input blur | \n- | \n- | \n
The component exports the following type definitions:
\nimport type { SearchProps, SearchShape, SearchInstance } from 'vant';\n
\nSearchInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { SearchInstance } from 'vant';\n\nconst searchRef = ref<SearchInstance>();\n\nsearchRef.value?.focus();\n
\nName | \nDescription | \n
---|---|
left | \nCustom left side content | \n
action | \nCustom right button, displayed when show-action is true | \n
label | \nCustom Search label | \n
left-icon | \nCustom left icon | \n
right-icon | \nCustom right icon | \n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-search-padding | \n10px var(--van-padding-sm) | \n- | \n
--van-search-background | \nvar(--van-background-2) | \n- | \n
--van-search-content-background | \nvar(--van-gray-1) | \n- | \n
--van-search-input-height | \n34px | \n- | \n
--van-search-label-padding | \n0 5px | \n- | \n
--van-search-label-color | \nvar(--van-text-color) | \n- | \n
--van-search-label-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-search-left-icon-color | \nvar(--van-gray-6) | \n- | \n
--van-search-action-padding | \n0 var(--van-padding-xs) | \n- | \n
--van-search-action-text-color | \nvar(--van-text-color) | \n- | \n
--van-search-action-font-size | \nvar(--van-font-size-md) | \n- | \n
\u5E95\u90E8\u5F39\u8D77\u7684\u6A21\u6001\u9762\u677F\uFF0C\u5305\u542B\u4E0E\u5F53\u524D\u60C5\u5883\u76F8\u5173\u7684\u591A\u4E2A\u9009\u9879\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { ActionSheet } from 'vant';\n\nconst app = createApp();\napp.use(ActionSheet);\n
\n\u52A8\u4F5C\u9762\u677F\u901A\u8FC7 actions
\u5C5E\u6027\u6765\u5B9A\u4E49\u9009\u9879\uFF0Cactions
\u5C5E\u6027\u662F\u4E00\u4E2A\u7531\u5BF9\u8C61\u6784\u6210\u7684\u6570\u7EC4\uFF0C\u6570\u7EC4\u4E2D\u7684\u6BCF\u4E2A\u5BF9\u8C61\u914D\u7F6E\u4E00\u5217\uFF0C\u5BF9\u8C61\u683C\u5F0F\u89C1\u6587\u6863\u4E0B\u65B9\u8868\u683C\u3002
<van-cell is-link title="\u57FA\u7840\u7528\u6CD5" @click="show = true" />\n<van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const show = ref(false);\n const actions = [\n { name: '\u9009\u9879\u4E00' },\n { name: '\u9009\u9879\u4E8C' },\n { name: '\u9009\u9879\u4E09' },\n ];\n const onSelect = (item) => {\n // \u9ED8\u8BA4\u60C5\u51B5\u4E0B\u70B9\u51FB\u9009\u9879\u65F6\u4E0D\u4F1A\u81EA\u52A8\u6536\u8D77\n // \u53EF\u4EE5\u901A\u8FC7 close-on-click-action \u5C5E\u6027\u5F00\u542F\u81EA\u52A8\u6536\u8D77\n show.value = false;\n showToast(item.name);\n };\n\n return {\n show,\n actions,\n onSelect,\n };\n },\n};\n
\n\u8BBE\u7F6E cancel-text
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u5E95\u90E8\u5C55\u793A\u53D6\u6D88\u6309\u94AE\uFF0C\u70B9\u51FB\u540E\u5173\u95ED\u5F53\u524D\u9762\u677F\u5E76\u89E6\u53D1 cancel
\u4E8B\u4EF6\u3002
<van-action-sheet\n v-model:show="show"\n :actions="actions"\n cancel-text="\u53D6\u6D88"\n close-on-click-action\n @cancel="onCancel"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const show = ref(false);\n const actions = [\n { name: '\u9009\u9879\u4E00' },\n { name: '\u9009\u9879\u4E8C' },\n { name: '\u9009\u9879\u4E09' },\n ];\n const onCancel = () => showToast('\u53D6\u6D88');\n\n return {\n show,\n actions,\n onCancel,\n };\n },\n};\n
\n\u901A\u8FC7 description
\u53EF\u4EE5\u5728\u83DC\u5355\u9876\u90E8\u663E\u793A\u63CF\u8FF0\u4FE1\u606F\uFF0C\u901A\u8FC7\u9009\u9879\u7684 subname
\u5C5E\u6027\u53EF\u4EE5\u5728\u9009\u9879\u6587\u5B57\u7684\u53F3\u4FA7\u5C55\u793A\u63CF\u8FF0\u4FE1\u606F\u3002
<van-action-sheet\n v-model:show="show"\n :actions="actions"\n cancel-text="\u53D6\u6D88"\n description="\u8FD9\u662F\u4E00\u6BB5\u63CF\u8FF0\u4FE1\u606F"\n close-on-click-action\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n const actions = [\n { name: '\u9009\u9879\u4E00' },\n { name: '\u9009\u9879\u4E8C' },\n { name: '\u9009\u9879\u4E09', subname: '\u63CF\u8FF0\u4FE1\u606F' },\n ];\n\n return {\n show,\n actions,\n };\n },\n};\n
\n\u53EF\u4EE5\u901A\u8FC7 loading
\u548C disabled
\u5C06\u9009\u9879\u8BBE\u7F6E\u4E3A\u52A0\u8F7D\u72B6\u6001\u6216\u7981\u7528\u72B6\u6001\uFF0C\u6216\u8005\u901A\u8FC7color
\u8BBE\u7F6E\u9009\u9879\u7684\u989C\u8272
<van-action-sheet\n v-model:show="show"\n :actions="actions"\n cancel-text="\u53D6\u6D88"\n close-on-click-action\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n const actions = [\n { name: '\u7740\u8272\u9009\u9879', color: '#ee0a24' },\n { name: '\u7981\u7528\u9009\u9879', disabled: true },\n { name: '\u52A0\u8F7D\u9009\u9879', loading: true },\n ];\n\n return {\n show,\n actions,\n };\n },\n};\n
\n\u901A\u8FC7\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u9762\u677F\u7684\u5C55\u793A\u5185\u5BB9\uFF0C\u540C\u65F6\u53EF\u4EE5\u4F7F\u7528title
\u5C5E\u6027\u5C55\u793A\u6807\u9898\u680F
<van-action-sheet v-model:show="show" title="\u6807\u9898">\n <div class="content">\u5185\u5BB9</div>\n</van-action-sheet>\n\n<style>\n .content {\n padding: 16px 16px 160px;\n }\n</style>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:show | \n\u662F\u5426\u663E\u793A\u52A8\u4F5C\u9762\u677F | \nboolean | \nfalse | \n
actions | \n\u9762\u677F\u9009\u9879\u5217\u8868 | \nActionSheetAction[] | \n[] | \n
title | \n\u9876\u90E8\u6807\u9898 | \nstring | \n- | \n
cancel-text | \n\u53D6\u6D88\u6309\u94AE\u6587\u5B57 | \nstring | \n- | \n
description | \n\u9009\u9879\u4E0A\u65B9\u7684\u63CF\u8FF0\u4FE1\u606F | \nstring | \n- | \n
closeable | \n\u662F\u5426\u663E\u793A\u5173\u95ED\u56FE\u6807 | \nboolean | \ntrue | \n
close-icon | \n\u5173\u95ED\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \ncross | \n
duration | \n\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u79D2\uFF0C\u8BBE\u7F6E\u4E3A 0 \u53EF\u4EE5\u7981\u7528\u52A8\u753B | \nnumber | string | \n0.3 | \n
z-index | \n\u5C06\u9762\u677F\u7684 z-index \u5C42\u7EA7\u8BBE\u7F6E\u4E3A\u4E00\u4E2A\u56FA\u5B9A\u503C | \nnumber | string | \n2000+ | \n
round | \n\u662F\u5426\u663E\u793A\u5706\u89D2 | \nboolean | \ntrue | \n
overlay | \n\u662F\u5426\u663E\u793A\u906E\u7F69\u5C42 | \nboolean | \ntrue | \n
overlay-class | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u7C7B\u540D | \nstring | Array | object | \n- | \n
overlay-style | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0F | \nobject | \n- | \n
lock-scroll | \n\u662F\u5426\u9501\u5B9A\u80CC\u666F\u6EDA\u52A8 | \nboolean | \ntrue | \n
lazy-render | \n\u662F\u5426\u5728\u663E\u793A\u5F39\u5C42\u65F6\u624D\u6E32\u67D3\u8282\u70B9 | \nboolean | \ntrue | \n
close-on-popstate | \n\u662F\u5426\u5728\u9875\u9762\u56DE\u9000\u65F6\u81EA\u52A8\u5173\u95ED | \nboolean | \ntrue | \n
close-on-click-action | \n\u662F\u5426\u5728\u70B9\u51FB\u9009\u9879\u540E\u5173\u95ED | \nboolean | \nfalse | \n
close-on-click-overlay | \n\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED | \nboolean | \ntrue | \n
safe-area-inset-bottom | \n\u662F\u5426\u5F00\u542F\u5E95\u90E8\u5B89\u5168\u533A\u9002\u914D | \nboolean | \ntrue | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \n- | \n
before-close | \n\u5173\u95ED\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u963B\u6B62\u5173\u95ED\uFF0C\u652F\u6301\u8FD4\u56DE Promise | \n(action: string) => boolean | Promise<boolean> | \n- | \n
actions
\u5C5E\u6027\u662F\u4E00\u4E2A\u7531\u5BF9\u8C61\u6784\u6210\u7684\u6570\u7EC4\uFF0C\u6570\u7EC4\u4E2D\u7684\u6BCF\u4E2A\u5BF9\u8C61\u914D\u7F6E\u4E00\u5217\uFF0C\u5BF9\u8C61\u53EF\u4EE5\u5305\u542B\u4EE5\u4E0B\u503C\uFF1A
\u952E\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
name | \n\u6807\u9898 | \nstring | \n
subname | \n\u4E8C\u7EA7\u6807\u9898 | \nstring | \n
color | \n\u9009\u9879\u6587\u5B57\u989C\u8272 | \nstring | \n
className | \n\u4E3A\u5BF9\u5E94\u5217\u6DFB\u52A0\u989D\u5916\u7684 class | \nstring | Array | object | \n
loading | \n\u662F\u5426\u4E3A\u52A0\u8F7D\u72B6\u6001 | \nboolean | \n
disabled | \n\u662F\u5426\u4E3A\u7981\u7528\u72B6\u6001 | \nboolean | \n
callback | \n\u70B9\u51FB\u65F6\u89E6\u53D1\u7684\u56DE\u8C03\u51FD\u6570 | \naction: ActionSheetAction | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
select | \n\u70B9\u51FB\u9009\u9879\u65F6\u89E6\u53D1\uFF0C\u7981\u7528\u6216\u52A0\u8F7D\u72B6\u6001\u4E0B\u4E0D\u4F1A\u89E6\u53D1 | \naction: ActionSheetAction, index: number | \n
cancel | \n\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1 | \n- | \n
open | \n\u6253\u5F00\u9762\u677F\u65F6\u89E6\u53D1 | \n- | \n
close | \n\u5173\u95ED\u9762\u677F\u65F6\u89E6\u53D1 | \n- | \n
opened | \n\u6253\u5F00\u9762\u677F\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
closed | \n\u5173\u95ED\u9762\u677F\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
click-overlay | \n\u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
default | \n\u81EA\u5B9A\u4E49\u9762\u677F\u7684\u5C55\u793A\u5185\u5BB9 | \n- | \n
description | \n\u81EA\u5B9A\u4E49\u63CF\u8FF0\u6587\u6848 | \n- | \n
cancel | \n\u81EA\u5B9A\u4E49\u53D6\u6D88\u6309\u94AE\u5185\u5BB9 | \n- | \n
action | \n\u81EA\u5B9A\u4E49\u9009\u9879\u5185\u5BB9 | \n{ action: ActionSheetAction, index: number } | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { ActionSheetProps, ActionSheetAction } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-action-sheet-max-height | \n80% | \n- | \n
--van-action-sheet-header-height | \n48px | \n- | \n
--van-action-sheet-header-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-action-sheet-description-color | \nvar(--van-text-color-2) | \n- | \n
--van-action-sheet-description-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-action-sheet-description-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-action-sheet-item-background | \nvar(--van-background-2) | \n- | \n
--van-action-sheet-item-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-action-sheet-item-line-height | \nvar(--van-line-height-lg) | \n- | \n
--van-action-sheet-item-text-color | \nvar(--van-text-color) | \n- | \n
--van-action-sheet-item-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-action-sheet-subname-color | \nvar(--van-text-color-2) | \n- | \n
--van-action-sheet-subname-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-action-sheet-subname-line-height | \nvar(--van-line-height-sm) | \n- | \n
--van-action-sheet-close-icon-size | \n22px | \n- | \n
--van-action-sheet-close-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-action-sheet-close-icon-padding | \n0 var(--van-padding-md) | \n- | \n
--van-action-sheet-cancel-text-color | \nvar(--van-gray-7) | \n- | \n
--van-action-sheet-cancel-padding-top | \nvar(--van-padding-xs) | \n- | \n
--van-action-sheet-cancel-padding-color | \nvar(--van-background) | \n- | \n
--van-action-sheet-loading-icon-size | \n22px | \n- | \n
\u5E95\u90E8\u5F39\u8D77\u7684\u6A21\u6001\u9762\u677F\uFF0C\u5305\u542B\u4E0E\u5F53\u524D\u60C5\u5883\u76F8\u5173\u7684\u591A\u4E2A\u9009\u9879\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { ActionSheet } from 'vant';\n\nconst app = createApp();\napp.use(ActionSheet);\n
\n\u52A8\u4F5C\u9762\u677F\u901A\u8FC7 actions
\u5C5E\u6027\u6765\u5B9A\u4E49\u9009\u9879\uFF0Cactions
\u5C5E\u6027\u662F\u4E00\u4E2A\u7531\u5BF9\u8C61\u6784\u6210\u7684\u6570\u7EC4\uFF0C\u6570\u7EC4\u4E2D\u7684\u6BCF\u4E2A\u5BF9\u8C61\u914D\u7F6E\u4E00\u5217\uFF0C\u5BF9\u8C61\u683C\u5F0F\u89C1\u6587\u6863\u4E0B\u65B9\u8868\u683C\u3002
<van-cell is-link title="\u57FA\u7840\u7528\u6CD5" @click="show = true" />\n<van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const show = ref(false);\n const actions = [\n { name: '\u9009\u9879\u4E00' },\n { name: '\u9009\u9879\u4E8C' },\n { name: '\u9009\u9879\u4E09' },\n ];\n const onSelect = (item) => {\n // \u9ED8\u8BA4\u60C5\u51B5\u4E0B\u70B9\u51FB\u9009\u9879\u65F6\u4E0D\u4F1A\u81EA\u52A8\u6536\u8D77\n // \u53EF\u4EE5\u901A\u8FC7 close-on-click-action \u5C5E\u6027\u5F00\u542F\u81EA\u52A8\u6536\u8D77\n show.value = false;\n showToast(item.name);\n };\n\n return {\n show,\n actions,\n onSelect,\n };\n },\n};\n
\n\u8BBE\u7F6E cancel-text
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u5E95\u90E8\u5C55\u793A\u53D6\u6D88\u6309\u94AE\uFF0C\u70B9\u51FB\u540E\u5173\u95ED\u5F53\u524D\u9762\u677F\u5E76\u89E6\u53D1 cancel
\u4E8B\u4EF6\u3002
<van-action-sheet\n v-model:show="show"\n :actions="actions"\n cancel-text="\u53D6\u6D88"\n close-on-click-action\n @cancel="onCancel"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const show = ref(false);\n const actions = [\n { name: '\u9009\u9879\u4E00' },\n { name: '\u9009\u9879\u4E8C' },\n { name: '\u9009\u9879\u4E09' },\n ];\n const onCancel = () => showToast('\u53D6\u6D88');\n\n return {\n show,\n actions,\n onCancel,\n };\n },\n};\n
\n\u901A\u8FC7 description
\u53EF\u4EE5\u5728\u83DC\u5355\u9876\u90E8\u663E\u793A\u63CF\u8FF0\u4FE1\u606F\uFF0C\u901A\u8FC7\u9009\u9879\u7684 subname
\u5C5E\u6027\u53EF\u4EE5\u5728\u9009\u9879\u6587\u5B57\u7684\u53F3\u4FA7\u5C55\u793A\u63CF\u8FF0\u4FE1\u606F\u3002
<van-action-sheet\n v-model:show="show"\n :actions="actions"\n cancel-text="\u53D6\u6D88"\n description="\u8FD9\u662F\u4E00\u6BB5\u63CF\u8FF0\u4FE1\u606F"\n close-on-click-action\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n const actions = [\n { name: '\u9009\u9879\u4E00' },\n { name: '\u9009\u9879\u4E8C' },\n { name: '\u9009\u9879\u4E09', subname: '\u63CF\u8FF0\u4FE1\u606F' },\n ];\n\n return {\n show,\n actions,\n };\n },\n};\n
\n\u53EF\u4EE5\u901A\u8FC7 loading
\u548C disabled
\u5C06\u9009\u9879\u8BBE\u7F6E\u4E3A\u52A0\u8F7D\u72B6\u6001\u6216\u7981\u7528\u72B6\u6001\uFF0C\u6216\u8005\u901A\u8FC7color
\u8BBE\u7F6E\u9009\u9879\u7684\u989C\u8272
<van-action-sheet\n v-model:show="show"\n :actions="actions"\n cancel-text="\u53D6\u6D88"\n close-on-click-action\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n const actions = [\n { name: '\u7740\u8272\u9009\u9879', color: '#ee0a24' },\n { name: '\u7981\u7528\u9009\u9879', disabled: true },\n { name: '\u52A0\u8F7D\u9009\u9879', loading: true },\n ];\n\n return {\n show,\n actions,\n };\n },\n};\n
\n\u901A\u8FC7\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u9762\u677F\u7684\u5C55\u793A\u5185\u5BB9\uFF0C\u540C\u65F6\u53EF\u4EE5\u4F7F\u7528title
\u5C5E\u6027\u5C55\u793A\u6807\u9898\u680F
<van-action-sheet v-model:show="show" title="\u6807\u9898">\n <div class="content">\u5185\u5BB9</div>\n</van-action-sheet>\n\n<style>\n .content {\n padding: 16px 16px 160px;\n }\n</style>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:show | \n\u662F\u5426\u663E\u793A\u52A8\u4F5C\u9762\u677F | \nboolean | \nfalse | \n
actions | \n\u9762\u677F\u9009\u9879\u5217\u8868 | \nActionSheetAction[] | \n[] | \n
title | \n\u9876\u90E8\u6807\u9898 | \nstring | \n- | \n
cancel-text | \n\u53D6\u6D88\u6309\u94AE\u6587\u5B57 | \nstring | \n- | \n
description | \n\u9009\u9879\u4E0A\u65B9\u7684\u63CF\u8FF0\u4FE1\u606F | \nstring | \n- | \n
closeable | \n\u662F\u5426\u663E\u793A\u5173\u95ED\u56FE\u6807 | \nboolean | \ntrue | \n
close-icon | \n\u5173\u95ED\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \ncross | \n
duration | \n\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u79D2\uFF0C\u8BBE\u7F6E\u4E3A 0 \u53EF\u4EE5\u7981\u7528\u52A8\u753B | \nnumber | string | \n0.3 | \n
z-index | \n\u5C06\u9762\u677F\u7684 z-index \u5C42\u7EA7\u8BBE\u7F6E\u4E3A\u4E00\u4E2A\u56FA\u5B9A\u503C | \nnumber | string | \n2000+ | \n
round | \n\u662F\u5426\u663E\u793A\u5706\u89D2 | \nboolean | \ntrue | \n
overlay | \n\u662F\u5426\u663E\u793A\u906E\u7F69\u5C42 | \nboolean | \ntrue | \n
overlay-class | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u7C7B\u540D | \nstring | Array | object | \n- | \n
overlay-style | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0F | \nobject | \n- | \n
lock-scroll | \n\u662F\u5426\u9501\u5B9A\u80CC\u666F\u6EDA\u52A8 | \nboolean | \ntrue | \n
lazy-render | \n\u662F\u5426\u5728\u663E\u793A\u5F39\u5C42\u65F6\u624D\u6E32\u67D3\u8282\u70B9 | \nboolean | \ntrue | \n
close-on-popstate | \n\u662F\u5426\u5728\u9875\u9762\u56DE\u9000\u65F6\u81EA\u52A8\u5173\u95ED | \nboolean | \ntrue | \n
close-on-click-action | \n\u662F\u5426\u5728\u70B9\u51FB\u9009\u9879\u540E\u5173\u95ED | \nboolean | \nfalse | \n
close-on-click-overlay | \n\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED | \nboolean | \ntrue | \n
safe-area-inset-bottom | \n\u662F\u5426\u5F00\u542F\u5E95\u90E8\u5B89\u5168\u533A\u9002\u914D | \nboolean | \ntrue | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \n- | \n
before-close | \n\u5173\u95ED\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u963B\u6B62\u5173\u95ED\uFF0C\u652F\u6301\u8FD4\u56DE Promise | \n(action: string) => boolean | Promise<boolean> | \n- | \n
actions
\u5C5E\u6027\u662F\u4E00\u4E2A\u7531\u5BF9\u8C61\u6784\u6210\u7684\u6570\u7EC4\uFF0C\u6570\u7EC4\u4E2D\u7684\u6BCF\u4E2A\u5BF9\u8C61\u914D\u7F6E\u4E00\u5217\uFF0C\u5BF9\u8C61\u53EF\u4EE5\u5305\u542B\u4EE5\u4E0B\u503C\uFF1A
\u952E\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
name | \n\u6807\u9898 | \nstring | \n
subname | \n\u4E8C\u7EA7\u6807\u9898 | \nstring | \n
color | \n\u9009\u9879\u6587\u5B57\u989C\u8272 | \nstring | \n
className | \n\u4E3A\u5BF9\u5E94\u5217\u6DFB\u52A0\u989D\u5916\u7684 class | \nstring | Array | object | \n
loading | \n\u662F\u5426\u4E3A\u52A0\u8F7D\u72B6\u6001 | \nboolean | \n
disabled | \n\u662F\u5426\u4E3A\u7981\u7528\u72B6\u6001 | \nboolean | \n
callback | \n\u70B9\u51FB\u65F6\u89E6\u53D1\u7684\u56DE\u8C03\u51FD\u6570 | \naction: ActionSheetAction | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
select | \n\u70B9\u51FB\u9009\u9879\u65F6\u89E6\u53D1\uFF0C\u7981\u7528\u6216\u52A0\u8F7D\u72B6\u6001\u4E0B\u4E0D\u4F1A\u89E6\u53D1 | \naction: ActionSheetAction, index: number | \n
cancel | \n\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1 | \n- | \n
open | \n\u6253\u5F00\u9762\u677F\u65F6\u89E6\u53D1 | \n- | \n
close | \n\u5173\u95ED\u9762\u677F\u65F6\u89E6\u53D1 | \n- | \n
opened | \n\u6253\u5F00\u9762\u677F\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
closed | \n\u5173\u95ED\u9762\u677F\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
click-overlay | \n\u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
default | \n\u81EA\u5B9A\u4E49\u9762\u677F\u7684\u5C55\u793A\u5185\u5BB9 | \n- | \n
description | \n\u81EA\u5B9A\u4E49\u63CF\u8FF0\u6587\u6848 | \n- | \n
cancel | \n\u81EA\u5B9A\u4E49\u53D6\u6D88\u6309\u94AE\u5185\u5BB9 | \n- | \n
action | \n\u81EA\u5B9A\u4E49\u9009\u9879\u5185\u5BB9 | \n{ action: ActionSheetAction, index: number } | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { ActionSheetProps, ActionSheetAction } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-action-sheet-max-height | \n80% | \n- | \n
--van-action-sheet-header-height | \n48px | \n- | \n
--van-action-sheet-header-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-action-sheet-description-color | \nvar(--van-text-color-2) | \n- | \n
--van-action-sheet-description-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-action-sheet-description-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-action-sheet-item-background | \nvar(--van-background-2) | \n- | \n
--van-action-sheet-item-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-action-sheet-item-line-height | \nvar(--van-line-height-lg) | \n- | \n
--van-action-sheet-item-text-color | \nvar(--van-text-color) | \n- | \n
--van-action-sheet-item-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-action-sheet-subname-color | \nvar(--van-text-color-2) | \n- | \n
--van-action-sheet-subname-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-action-sheet-subname-line-height | \nvar(--van-line-height-sm) | \n- | \n
--van-action-sheet-close-icon-size | \n22px | \n- | \n
--van-action-sheet-close-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-action-sheet-close-icon-padding | \n0 var(--van-padding-md) | \n- | \n
--van-action-sheet-cancel-text-color | \nvar(--van-gray-7) | \n- | \n
--van-action-sheet-cancel-padding-top | \nvar(--van-padding-xs) | \n- | \n
--van-action-sheet-cancel-padding-color | \nvar(--van-background) | \n- | \n
--van-action-sheet-loading-icon-size | \n22px | \n- | \n
Used to switch between open and closed states.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Switch } from 'vant';\n\nconst app = createApp();\napp.use(Switch);\n
\n<van-switch v-model="checked" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(true);\n return { checked };\n },\n};\n
\n<van-switch v-model="checked" disabled />\n
\n<van-switch v-model="checked" loading />\n
\n<van-switch v-model="checked" size="22px" />\n
\n<van-switch v-model="checked" active-color="#ee0a24" inactive-color="#dcdee0" />\n
\nUsing node
slot to custom the content of the node.
<van-switch v-model="checked">\n <template #node>\n <div class="icon-wrapper">\n <van-icon :name="checked ? 'success' : 'cross'" />\n </div>\n </template>\n</van-switch>\n\n<style>\n .icon-wrapper {\n display: flex;\n width: 100%;\n justify-content: center;\n font-size: 18px;\n }\n\n .icon-wrapper .van-icon-success {\n line-height: 32px;\n color: var(--van-blue);\n }\n\n .icon-wrapper .van-icon-cross {\n line-height: 32px;\n color: var(--van-gray-5);\n }\n</style>\n
\n<van-switch :model-value="checked" @update:model-value="onUpdateValue" />\n
\nimport { ref } from 'vue';\nimport { showConfirmDialog } from 'vant';\n\nexport default {\n setup() {\n const checked = ref(true);\n const onUpdateValue = (newValue) => {\n showConfirmDialog({\n title: 'Confirm',\n message: 'Are you sure to toggle switch?',\n }).then(() => {\n checked.value = newValue;\n });\n };\n\n return {\n checked,\n onUpdateValue,\n };\n },\n};\n
\n<van-cell center title="Title">\n <template #right-icon>\n <van-switch v-model="checked" />\n </template>\n</van-cell>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nCheck status of Switch | \nActiveValue | InactiveValue | \nfalse | \n
loading | \nWhether to show loading icon | \nboolean | \nfalse | \n
disabled | \nWhether to disable switch | \nboolean | \nfalse | \n
size | \nSize of switch button | \nnumber | string | \n26px | \n
active-color | \nBackground color when active | \nstring | \n#1989fa | \n
inactive-color | \nBackground color when inactive | \nstring | \nrgba(120, 120, 128, 0.16) | \n
active-value | \nValue when active | \nany | \ntrue | \n
inactive-value | \nValue when inactive | \nany | \nfalse | \n
Event | \nDescription | \nParameters | \n
---|---|---|
change | \nEmitted when check status changed | \nvalue: any | \n
click | \nEmitted when component is clicked | \nevent: MouseEvent | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
node | \nCustom the content of node | \n- | \n
background | \nCustom the background of switch | \n- | \n
The component exports the following type definitions:
\nimport type { SwitchProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-switch-size | \n26px | \n- | \n
--van-switch-width | \ncalc(1.8em + 4px) | \n- | \n
--van-switch-height | \ncalc(1em + 4px) | \n- | \n
--van-switch-node-size | \n1em | \n- | \n
--van-switch-node-background | \nvar(--van-white) | \n- | \n
--van-switch-node-shadow | \n0 3px 1px 0 rgba(0, 0, 0, 0.05) | \n- | \n
--van-switch-background | \nrgba(120, 120, 128, 0.16) | \n- | \n
--van-switch-on-background | \nvar(--van-primary-color) | \n- | \n
--van-switch-duration | \nvar(--van-duration-base) | \n- | \n
--van-switch-disabled-opacity | \nvar(--van-disabled-opacity) | \n- | \n
Used to switch between open and closed states.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Switch } from 'vant';\n\nconst app = createApp();\napp.use(Switch);\n
\n<van-switch v-model="checked" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(true);\n return { checked };\n },\n};\n
\n<van-switch v-model="checked" disabled />\n
\n<van-switch v-model="checked" loading />\n
\n<van-switch v-model="checked" size="22px" />\n
\n<van-switch v-model="checked" active-color="#ee0a24" inactive-color="#dcdee0" />\n
\nUsing node
slot to custom the content of the node.
<van-switch v-model="checked">\n <template #node>\n <div class="icon-wrapper">\n <van-icon :name="checked ? 'success' : 'cross'" />\n </div>\n </template>\n</van-switch>\n\n<style>\n .icon-wrapper {\n display: flex;\n width: 100%;\n justify-content: center;\n font-size: 18px;\n }\n\n .icon-wrapper .van-icon-success {\n line-height: 32px;\n color: var(--van-blue);\n }\n\n .icon-wrapper .van-icon-cross {\n line-height: 32px;\n color: var(--van-gray-5);\n }\n</style>\n
\n<van-switch :model-value="checked" @update:model-value="onUpdateValue" />\n
\nimport { ref } from 'vue';\nimport { showConfirmDialog } from 'vant';\n\nexport default {\n setup() {\n const checked = ref(true);\n const onUpdateValue = (newValue) => {\n showConfirmDialog({\n title: 'Confirm',\n message: 'Are you sure to toggle switch?',\n }).then(() => {\n checked.value = newValue;\n });\n };\n\n return {\n checked,\n onUpdateValue,\n };\n },\n};\n
\n<van-cell center title="Title">\n <template #right-icon>\n <van-switch v-model="checked" />\n </template>\n</van-cell>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nCheck status of Switch | \nActiveValue | InactiveValue | \nfalse | \n
loading | \nWhether to show loading icon | \nboolean | \nfalse | \n
disabled | \nWhether to disable switch | \nboolean | \nfalse | \n
size | \nSize of switch button | \nnumber | string | \n26px | \n
active-color | \nBackground color when active | \nstring | \n#1989fa | \n
inactive-color | \nBackground color when inactive | \nstring | \nrgba(120, 120, 128, 0.16) | \n
active-value | \nValue when active | \nany | \ntrue | \n
inactive-value | \nValue when inactive | \nany | \nfalse | \n
Event | \nDescription | \nParameters | \n
---|---|---|
change | \nEmitted when check status changed | \nvalue: any | \n
click | \nEmitted when component is clicked | \nevent: MouseEvent | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
node | \nCustom the content of node | \n- | \n
background | \nCustom the background of switch | \n- | \n
The component exports the following type definitions:
\nimport type { SwitchProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-switch-size | \n26px | \n- | \n
--van-switch-width | \ncalc(1.8em + 4px) | \n- | \n
--van-switch-height | \ncalc(1em + 4px) | \n- | \n
--van-switch-node-size | \n1em | \n- | \n
--van-switch-node-background | \nvar(--van-white) | \n- | \n
--van-switch-node-shadow | \n0 3px 1px 0 rgba(0, 0, 0, 0.05) | \n- | \n
--van-switch-background | \nrgba(120, 120, 128, 0.16) | \n- | \n
--van-switch-on-background | \nvar(--van-primary-color) | \n- | \n
--van-switch-duration | \nvar(--van-duration-base) | \n- | \n
--van-switch-disabled-opacity | \nvar(--van-disabled-opacity) | \n- | \n
\u7528\u4E8E\u4F18\u60E0\u5238\u7684\u5151\u6362\u548C\u9009\u62E9\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { CouponCell, CouponList } from 'vant';\n\nconst app = createApp();\napp.use(CouponCell);\napp.use(CouponList);\n
\n<!-- \u4F18\u60E0\u5238\u5355\u5143\u683C -->\n<van-coupon-cell\n :coupons="coupons"\n :chosen-coupon="chosenCoupon"\n @click="showList = true"\n/>\n<!-- \u4F18\u60E0\u5238\u5217\u8868 -->\n<van-popup\n v-model:show="showList"\n round\n position="bottom"\n style="height: 90%; padding-top: 4px;"\n>\n <van-coupon-list\n :coupons="coupons"\n :chosen-coupon="chosenCoupon"\n :disabled-coupons="disabledCoupons"\n @change="onChange"\n @exchange="onExchange"\n />\n</van-popup>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const coupon = {\n available: 1,\n condition: '\u65E0\u95E8\u69DB\\n\u6700\u591A\u4F18\u60E012\u5143',\n reason: '',\n value: 150,\n name: '\u4F18\u60E0\u5238\u540D\u79F0',\n startAt: 1489104000,\n endAt: 1514592000,\n valueDesc: '1.5',\n unitDesc: '\u5143',\n };\n\n const coupons = ref([coupon]);\n const showList = ref(false);\n const chosenCoupon = ref(-1);\n\n const onChange = (index) => {\n showList.value = false;\n chosenCoupon.value = index;\n };\n const onExchange = (code) => {\n coupons.value.push(coupon);\n };\n\n return {\n coupons,\n showList,\n onChange,\n onExchange,\n chosenCoupon,\n disabledCoupons: [coupon],\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
title | \n\u5355\u5143\u683C\u6807\u9898 | \nstring | \n\u4F18\u60E0\u5238 | \n
chosen-coupon | \n\u5F53\u524D\u9009\u4E2D\u4F18\u60E0\u5238\u7684\u7D22\u5F15 | \nnumber | string | \n-1 | \n
coupons | \n\u53EF\u7528\u4F18\u60E0\u5238\u5217\u8868 | \nCoupon[] | \n[] | \n
editable | \n\u80FD\u5426\u5207\u6362\u4F18\u60E0\u5238 | \nboolean | \ntrue | \n
border | \n\u662F\u5426\u663E\u793A\u5185\u8FB9\u6846 | \nboolean | \ntrue | \n
currency | \n\u8D27\u5E01\u7B26\u53F7 | \nstring | \n\xa5 | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:code | \n\u5F53\u524D\u8F93\u5165\u7684\u5151\u6362\u7801 | \nstring | \n- | \n
chosen-coupon | \n\u5F53\u524D\u9009\u4E2D\u4F18\u60E0\u5238\u7684\u7D22\u5F15 | \nnumber | \n-1 | \n
coupons | \n\u53EF\u7528\u4F18\u60E0\u5238\u5217\u8868 | \nCouponInfo[] | \n[] | \n
disabled-coupons | \n\u4E0D\u53EF\u7528\u4F18\u60E0\u5238\u5217\u8868 | \nCouponInfo[] | \n[] | \n
enabled-title | \n\u53EF\u7528\u4F18\u60E0\u5238\u5217\u8868\u6807\u9898 | \nstring | \n\u53EF\u4F7F\u7528\u4F18\u60E0\u5238 | \n
disabled-title | \n\u4E0D\u53EF\u7528\u4F18\u60E0\u5238\u5217\u8868\u6807\u9898 | \nstring | \n\u4E0D\u53EF\u4F7F\u7528\u4F18\u60E0\u5238 | \n
exchange-button-text | \n\u5151\u6362\u6309\u94AE\u6587\u5B57 | \nstring | \n\u5151\u6362 | \n
exchange-button-loading | \n\u662F\u5426\u663E\u793A\u5151\u6362\u6309\u94AE\u52A0\u8F7D\u52A8\u753B | \nboolean | \nfalse | \n
exchange-button-disabled | \n\u662F\u5426\u7981\u7528\u5151\u6362\u6309\u94AE | \nboolean | \nfalse | \n
exchange-min-length | \n\u5151\u6362\u7801\u6700\u5C0F\u957F\u5EA6 | \nnumber | \n1 | \n
displayed-coupon-index | \n\u6EDA\u52A8\u81F3\u7279\u5B9A\u4F18\u60E0\u5238\u4F4D\u7F6E | \nnumber | \n- | \n
show-close-button | \n\u662F\u5426\u663E\u793A\u5217\u8868\u5E95\u90E8\u6309\u94AE | \nboolean | \ntrue | \n
close-button-text | \n\u5217\u8868\u5E95\u90E8\u6309\u94AE\u6587\u5B57 | \nstring | \n\u4E0D\u4F7F\u7528\u4F18\u60E0 | \n
input-placeholder | \n\u8F93\u5165\u6846\u6587\u5B57\u63D0\u793A | \nstring | \n\u8BF7\u8F93\u5165\u4F18\u60E0\u7801 | \n
show-exchange-bar | \n\u662F\u5426\u5C55\u793A\u5151\u6362\u680F | \nboolean | \ntrue | \n
currency | \n\u8D27\u5E01\u7B26\u53F7 | \nstring | \n\xa5 | \n
empty-image | \n\u5217\u8868\u4E3A\u7A7A\u65F6\u7684\u5360\u4F4D\u56FE | \nstring | \n- | \n
show-count | \n\u662F\u5426\u5C55\u793A\u53EF\u7528 / \u4E0D\u53EF\u7528\u6570\u91CF | \nboolean | \ntrue | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u4F18\u60E0\u5238\u5207\u6362\u56DE\u8C03 | \nindex, \u9009\u4E2D\u4F18\u60E0\u5238\u7684\u7D22\u5F15 | \n
exchange | \n\u5151\u6362\u4F18\u60E0\u5238\u56DE\u8C03 | \ncode, \u5151\u6362\u7801 | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
list-footer | \n\u4F18\u60E0\u5238\u5217\u8868\u5E95\u90E8 | \n
disabled-list-footer | \n\u4E0D\u53EF\u7528\u4F18\u60E0\u5238\u5217\u8868\u5E95\u90E8 | \n
\u952E\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
id | \n\u4F18\u60E0\u5238 id | \nstring | \n
name | \n\u4F18\u60E0\u5238\u540D\u79F0 | \nstring | \n
condition | \n\u6EE1\u51CF\u6761\u4EF6 | \nstring | \n
startAt | \n\u5361\u6709\u6548\u5F00\u59CB\u65F6\u95F4 (\u65F6\u95F4\u6233, \u5355\u4F4D\u79D2) | \nnumber | \n
endAt | \n\u5361\u5931\u6548\u65E5\u671F (\u65F6\u95F4\u6233, \u5355\u4F4D\u79D2) | \nnumber | \n
description | \n\u63CF\u8FF0\u4FE1\u606F\uFF0C\u4F18\u60E0\u5238\u53EF\u7528\u65F6\u5C55\u793A | \nstring | \n
reason | \n\u4E0D\u53EF\u7528\u539F\u56E0\uFF0C\u4F18\u60E0\u5238\u4E0D\u53EF\u7528\u65F6\u5C55\u793A | \nstring | \n
value | \n\u6298\u6263\u5238\u4F18\u60E0\u91D1\u989D\uFF0C\u5355\u4F4D\u5206 | \nnumber | \n
valueDesc | \n\u6298\u6263\u5238\u4F18\u60E0\u91D1\u989D\u6587\u6848 | \nstring | \n
unitDesc | \n\u5355\u4F4D\u6587\u6848 | \nstring | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { CouponCellProps, CouponListProps, CouponInfo } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-coupon-margin | \n0 var(--van-padding-sm) var(--van-padding-sm) | \n- | \n
--van-coupon-content-height | \n84px | \n- | \n
--van-coupon-content-padding | \n14px 0 | \n- | \n
--van-coupon-content-text-color | \nvar(--van-text-color) | \n- | \n
--van-coupon-background | \nvar(--van-background-2) | \n- | \n
--van-coupon-active-background | \nvar(--van-active-color) | \n- | \n
--van-coupon-radius | \nvar(--van-radius-lg) | \n- | \n
--van-coupon-shadow | \n0 0 4px rgba(0, 0, 0, 0.1) | \n- | \n
--van-coupon-head-width | \n96px | \n- | \n
--van-coupon-amount-color | \nvar(--van-danger-color) | \n- | \n
--van-coupon-amount-font-size | \n30px | \n- | \n
--van-coupon-currency-font-size | \n40% | \n- | \n
--van-coupon-name-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-coupon-disabled-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-coupon-description-padding | \nvar(--van-padding-xs) var(--van-padding-md) | \n- | \n
--van-coupon-description-border-color | \nvar(--van-border-color) | \n- | \n
--van-coupon-checkbox-color | \nvar(--van-danger-color) | \n- | \n
--van-coupon-list-background | \nvar(--van-background) | \n- | \n
--van-coupon-list-field-padding | \n5px 0 5px var(--van-padding-md) | \n- | \n
--van-coupon-list-exchange-button-height | \n32px | \n- | \n
--van-coupon-list-close-button-height | \n40px | \n- | \n
--van-coupon-list-empty-tip-color | \nvar(--van-text-color-2) | \n- | \n
--van-coupon-list-empty-tip-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-coupon-list-empty-tip-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-coupon-cell-selected-text-color | \nvar(--van-text-color) | \n- | \n
\u7528\u4E8E\u4F18\u60E0\u5238\u7684\u5151\u6362\u548C\u9009\u62E9\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { CouponCell, CouponList } from 'vant';\n\nconst app = createApp();\napp.use(CouponCell);\napp.use(CouponList);\n
\n<!-- \u4F18\u60E0\u5238\u5355\u5143\u683C -->\n<van-coupon-cell\n :coupons="coupons"\n :chosen-coupon="chosenCoupon"\n @click="showList = true"\n/>\n<!-- \u4F18\u60E0\u5238\u5217\u8868 -->\n<van-popup\n v-model:show="showList"\n round\n position="bottom"\n style="height: 90%; padding-top: 4px;"\n>\n <van-coupon-list\n :coupons="coupons"\n :chosen-coupon="chosenCoupon"\n :disabled-coupons="disabledCoupons"\n @change="onChange"\n @exchange="onExchange"\n />\n</van-popup>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const coupon = {\n available: 1,\n condition: '\u65E0\u95E8\u69DB\\n\u6700\u591A\u4F18\u60E012\u5143',\n reason: '',\n value: 150,\n name: '\u4F18\u60E0\u5238\u540D\u79F0',\n startAt: 1489104000,\n endAt: 1514592000,\n valueDesc: '1.5',\n unitDesc: '\u5143',\n };\n\n const coupons = ref([coupon]);\n const showList = ref(false);\n const chosenCoupon = ref(-1);\n\n const onChange = (index) => {\n showList.value = false;\n chosenCoupon.value = index;\n };\n const onExchange = (code) => {\n coupons.value.push(coupon);\n };\n\n return {\n coupons,\n showList,\n onChange,\n onExchange,\n chosenCoupon,\n disabledCoupons: [coupon],\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
title | \n\u5355\u5143\u683C\u6807\u9898 | \nstring | \n\u4F18\u60E0\u5238 | \n
chosen-coupon | \n\u5F53\u524D\u9009\u4E2D\u4F18\u60E0\u5238\u7684\u7D22\u5F15 | \nnumber | string | \n-1 | \n
coupons | \n\u53EF\u7528\u4F18\u60E0\u5238\u5217\u8868 | \nCoupon[] | \n[] | \n
editable | \n\u80FD\u5426\u5207\u6362\u4F18\u60E0\u5238 | \nboolean | \ntrue | \n
border | \n\u662F\u5426\u663E\u793A\u5185\u8FB9\u6846 | \nboolean | \ntrue | \n
currency | \n\u8D27\u5E01\u7B26\u53F7 | \nstring | \n\xa5 | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:code | \n\u5F53\u524D\u8F93\u5165\u7684\u5151\u6362\u7801 | \nstring | \n- | \n
chosen-coupon | \n\u5F53\u524D\u9009\u4E2D\u4F18\u60E0\u5238\u7684\u7D22\u5F15 | \nnumber | \n-1 | \n
coupons | \n\u53EF\u7528\u4F18\u60E0\u5238\u5217\u8868 | \nCouponInfo[] | \n[] | \n
disabled-coupons | \n\u4E0D\u53EF\u7528\u4F18\u60E0\u5238\u5217\u8868 | \nCouponInfo[] | \n[] | \n
enabled-title | \n\u53EF\u7528\u4F18\u60E0\u5238\u5217\u8868\u6807\u9898 | \nstring | \n\u53EF\u4F7F\u7528\u4F18\u60E0\u5238 | \n
disabled-title | \n\u4E0D\u53EF\u7528\u4F18\u60E0\u5238\u5217\u8868\u6807\u9898 | \nstring | \n\u4E0D\u53EF\u4F7F\u7528\u4F18\u60E0\u5238 | \n
exchange-button-text | \n\u5151\u6362\u6309\u94AE\u6587\u5B57 | \nstring | \n\u5151\u6362 | \n
exchange-button-loading | \n\u662F\u5426\u663E\u793A\u5151\u6362\u6309\u94AE\u52A0\u8F7D\u52A8\u753B | \nboolean | \nfalse | \n
exchange-button-disabled | \n\u662F\u5426\u7981\u7528\u5151\u6362\u6309\u94AE | \nboolean | \nfalse | \n
exchange-min-length | \n\u5151\u6362\u7801\u6700\u5C0F\u957F\u5EA6 | \nnumber | \n1 | \n
displayed-coupon-index | \n\u6EDA\u52A8\u81F3\u7279\u5B9A\u4F18\u60E0\u5238\u4F4D\u7F6E | \nnumber | \n- | \n
show-close-button | \n\u662F\u5426\u663E\u793A\u5217\u8868\u5E95\u90E8\u6309\u94AE | \nboolean | \ntrue | \n
close-button-text | \n\u5217\u8868\u5E95\u90E8\u6309\u94AE\u6587\u5B57 | \nstring | \n\u4E0D\u4F7F\u7528\u4F18\u60E0 | \n
input-placeholder | \n\u8F93\u5165\u6846\u6587\u5B57\u63D0\u793A | \nstring | \n\u8BF7\u8F93\u5165\u4F18\u60E0\u7801 | \n
show-exchange-bar | \n\u662F\u5426\u5C55\u793A\u5151\u6362\u680F | \nboolean | \ntrue | \n
currency | \n\u8D27\u5E01\u7B26\u53F7 | \nstring | \n\xa5 | \n
empty-image | \n\u5217\u8868\u4E3A\u7A7A\u65F6\u7684\u5360\u4F4D\u56FE | \nstring | \n- | \n
show-count | \n\u662F\u5426\u5C55\u793A\u53EF\u7528 / \u4E0D\u53EF\u7528\u6570\u91CF | \nboolean | \ntrue | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u4F18\u60E0\u5238\u5207\u6362\u56DE\u8C03 | \nindex, \u9009\u4E2D\u4F18\u60E0\u5238\u7684\u7D22\u5F15 | \n
exchange | \n\u5151\u6362\u4F18\u60E0\u5238\u56DE\u8C03 | \ncode, \u5151\u6362\u7801 | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
list-footer | \n\u4F18\u60E0\u5238\u5217\u8868\u5E95\u90E8 | \n
disabled-list-footer | \n\u4E0D\u53EF\u7528\u4F18\u60E0\u5238\u5217\u8868\u5E95\u90E8 | \n
\u952E\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
id | \n\u4F18\u60E0\u5238 id | \nstring | \n
name | \n\u4F18\u60E0\u5238\u540D\u79F0 | \nstring | \n
condition | \n\u6EE1\u51CF\u6761\u4EF6 | \nstring | \n
startAt | \n\u5361\u6709\u6548\u5F00\u59CB\u65F6\u95F4 (\u65F6\u95F4\u6233, \u5355\u4F4D\u79D2) | \nnumber | \n
endAt | \n\u5361\u5931\u6548\u65E5\u671F (\u65F6\u95F4\u6233, \u5355\u4F4D\u79D2) | \nnumber | \n
description | \n\u63CF\u8FF0\u4FE1\u606F\uFF0C\u4F18\u60E0\u5238\u53EF\u7528\u65F6\u5C55\u793A | \nstring | \n
reason | \n\u4E0D\u53EF\u7528\u539F\u56E0\uFF0C\u4F18\u60E0\u5238\u4E0D\u53EF\u7528\u65F6\u5C55\u793A | \nstring | \n
value | \n\u6298\u6263\u5238\u4F18\u60E0\u91D1\u989D\uFF0C\u5355\u4F4D\u5206 | \nnumber | \n
valueDesc | \n\u6298\u6263\u5238\u4F18\u60E0\u91D1\u989D\u6587\u6848 | \nstring | \n
unitDesc | \n\u5355\u4F4D\u6587\u6848 | \nstring | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { CouponCellProps, CouponListProps, CouponInfo } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-coupon-margin | \n0 var(--van-padding-sm) var(--van-padding-sm) | \n- | \n
--van-coupon-content-height | \n84px | \n- | \n
--van-coupon-content-padding | \n14px 0 | \n- | \n
--van-coupon-content-text-color | \nvar(--van-text-color) | \n- | \n
--van-coupon-background | \nvar(--van-background-2) | \n- | \n
--van-coupon-active-background | \nvar(--van-active-color) | \n- | \n
--van-coupon-radius | \nvar(--van-radius-lg) | \n- | \n
--van-coupon-shadow | \n0 0 4px rgba(0, 0, 0, 0.1) | \n- | \n
--van-coupon-head-width | \n96px | \n- | \n
--van-coupon-amount-color | \nvar(--van-danger-color) | \n- | \n
--van-coupon-amount-font-size | \n30px | \n- | \n
--van-coupon-currency-font-size | \n40% | \n- | \n
--van-coupon-name-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-coupon-disabled-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-coupon-description-padding | \nvar(--van-padding-xs) var(--van-padding-md) | \n- | \n
--van-coupon-description-border-color | \nvar(--van-border-color) | \n- | \n
--van-coupon-checkbox-color | \nvar(--van-danger-color) | \n- | \n
--van-coupon-list-background | \nvar(--van-background) | \n- | \n
--van-coupon-list-field-padding | \n5px 0 5px var(--van-padding-md) | \n- | \n
--van-coupon-list-exchange-button-height | \n32px | \n- | \n
--van-coupon-list-close-button-height | \n40px | \n- | \n
--van-coupon-list-empty-tip-color | \nvar(--van-text-color-2) | \n- | \n
--van-coupon-list-empty-tip-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-coupon-list-empty-tip-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-coupon-cell-selected-text-color | \nvar(--van-text-color) | \n- | \n
\u7528\u4E8E\u5C55\u793A\u64CD\u4F5C\u7684\u5F53\u524D\u8FDB\u5EA6\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Progress } from 'vant';\n\nconst app = createApp();\napp.use(Progress);\n
\n\u8FDB\u5EA6\u6761\u9ED8\u8BA4\u4E3A\u84DD\u8272\uFF0C\u4F7F\u7528 percentage
\u5C5E\u6027\u6765\u8BBE\u7F6E\u5F53\u524D\u8FDB\u5EA6\u3002
<van-progress :percentage="50" />\n
\n\u901A\u8FC7 stroke-width
\u53EF\u4EE5\u8BBE\u7F6E\u8FDB\u5EA6\u6761\u7684\u7C97\u7EC6\u3002
<van-progress :percentage="50" stroke-width="8" />\n
\n\u8BBE\u7F6E inactive
\u5C5E\u6027\u540E\u8FDB\u5EA6\u6761\u5C06\u7F6E\u7070\u3002
<van-progress inactive :percentage="50" />\n
\n\u53EF\u4EE5\u4F7F\u7528 pivot-text
\u5C5E\u6027\u81EA\u5B9A\u4E49\u6587\u5B57\uFF0Ccolor
\u5C5E\u6027\u81EA\u5B9A\u4E49\u8FDB\u5EA6\u6761\u989C\u8272\u3002
<van-progress pivot-text="\u6A59\u8272" color="#f2826a" :percentage="25" />\n<van-progress pivot-text="\u7EA2\u8272" color="#ee0a24" :percentage="50" />\n<van-progress\n :percentage="75"\n pivot-text="\u7D2B\u8272"\n pivot-color="#7232dd"\n color="linear-gradient(to right, #be99ff, #7232dd)"\n/>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
percentage | \n\u8FDB\u5EA6\u767E\u5206\u6BD4 | \nnumber | string | \n0 | \n
stroke-width | \n\u8FDB\u5EA6\u6761\u7C97\u7EC6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx | \nnumber | string | \n4px | \n
color | \n\u8FDB\u5EA6\u6761\u989C\u8272 | \nstring | \n#1989fa | \n
track-color | \n\u8F68\u9053\u989C\u8272 | \nstring | \n#e5e5e5 | \n
pivot-text | \n\u8FDB\u5EA6\u6587\u5B57\u5185\u5BB9 | \nstring | \n\u767E\u5206\u6BD4 | \n
pivot-color | \n\u8FDB\u5EA6\u6587\u5B57\u80CC\u666F\u8272 | \nstring | \n\u540C\u8FDB\u5EA6\u6761\u989C\u8272 | \n
text-color | \n\u8FDB\u5EA6\u6587\u5B57\u989C\u8272 | \nstring | \nwhite | \n
inactive | \n\u662F\u5426\u7F6E\u7070 | \nboolean | \nfalse | \n
show-pivot | \n\u662F\u5426\u663E\u793A\u8FDB\u5EA6\u6587\u5B57 | \nboolean | \ntrue | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { ProgressProps, ProgressInstance } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-progress-height | \n4px | \n- | \n
--van-progress-color | \nvar(--van-primary-color) | \n- | \n
--van-progress-inactive-color | \nvar(--van-gray-5) | \n- | \n
--van-progress-background | \nvar(--van-gray-3) | \n- | \n
--van-progress-pivot-padding | \n0 5px | \n- | \n
--van-progress-pivot-text-color | \nvar(--van-white) | \n- | \n
--van-progress-pivot-font-size | \nvar(--van-font-size-xs) | \n- | \n
--van-progress-pivot-line-height | \n1.6 | \n- | \n
--van-progress-pivot-background | \nvar(--van-primary-color) | \n- | \n
\u7528\u4E8E\u5C55\u793A\u64CD\u4F5C\u7684\u5F53\u524D\u8FDB\u5EA6\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Progress } from 'vant';\n\nconst app = createApp();\napp.use(Progress);\n
\n\u8FDB\u5EA6\u6761\u9ED8\u8BA4\u4E3A\u84DD\u8272\uFF0C\u4F7F\u7528 percentage
\u5C5E\u6027\u6765\u8BBE\u7F6E\u5F53\u524D\u8FDB\u5EA6\u3002
<van-progress :percentage="50" />\n
\n\u901A\u8FC7 stroke-width
\u53EF\u4EE5\u8BBE\u7F6E\u8FDB\u5EA6\u6761\u7684\u7C97\u7EC6\u3002
<van-progress :percentage="50" stroke-width="8" />\n
\n\u8BBE\u7F6E inactive
\u5C5E\u6027\u540E\u8FDB\u5EA6\u6761\u5C06\u7F6E\u7070\u3002
<van-progress inactive :percentage="50" />\n
\n\u53EF\u4EE5\u4F7F\u7528 pivot-text
\u5C5E\u6027\u81EA\u5B9A\u4E49\u6587\u5B57\uFF0Ccolor
\u5C5E\u6027\u81EA\u5B9A\u4E49\u8FDB\u5EA6\u6761\u989C\u8272\u3002
<van-progress pivot-text="\u6A59\u8272" color="#f2826a" :percentage="25" />\n<van-progress pivot-text="\u7EA2\u8272" color="#ee0a24" :percentage="50" />\n<van-progress\n :percentage="75"\n pivot-text="\u7D2B\u8272"\n pivot-color="#7232dd"\n color="linear-gradient(to right, #be99ff, #7232dd)"\n/>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
percentage | \n\u8FDB\u5EA6\u767E\u5206\u6BD4 | \nnumber | string | \n0 | \n
stroke-width | \n\u8FDB\u5EA6\u6761\u7C97\u7EC6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx | \nnumber | string | \n4px | \n
color | \n\u8FDB\u5EA6\u6761\u989C\u8272 | \nstring | \n#1989fa | \n
track-color | \n\u8F68\u9053\u989C\u8272 | \nstring | \n#e5e5e5 | \n
pivot-text | \n\u8FDB\u5EA6\u6587\u5B57\u5185\u5BB9 | \nstring | \n\u767E\u5206\u6BD4 | \n
pivot-color | \n\u8FDB\u5EA6\u6587\u5B57\u80CC\u666F\u8272 | \nstring | \n\u540C\u8FDB\u5EA6\u6761\u989C\u8272 | \n
text-color | \n\u8FDB\u5EA6\u6587\u5B57\u989C\u8272 | \nstring | \nwhite | \n
inactive | \n\u662F\u5426\u7F6E\u7070 | \nboolean | \nfalse | \n
show-pivot | \n\u662F\u5426\u663E\u793A\u8FDB\u5EA6\u6587\u5B57 | \nboolean | \ntrue | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { ProgressProps, ProgressInstance } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-progress-height | \n4px | \n- | \n
--van-progress-color | \nvar(--van-primary-color) | \n- | \n
--van-progress-inactive-color | \nvar(--van-gray-5) | \n- | \n
--van-progress-background | \nvar(--van-gray-3) | \n- | \n
--van-progress-pivot-padding | \n0 5px | \n- | \n
--van-progress-pivot-text-color | \nvar(--van-white) | \n- | \n
--van-progress-pivot-font-size | \nvar(--van-font-size-xs) | \n- | \n
--van-progress-pivot-line-height | \n1.6 | \n- | \n
--van-progress-pivot-background | \nvar(--van-primary-color) | \n- | \n
\u7528\u4E8E\u5B9E\u65F6\u5C55\u793A\u5012\u8BA1\u65F6\u6570\u503C\uFF0C\u652F\u6301\u6BEB\u79D2\u7CBE\u5EA6\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { CountDown } from 'vant';\n\nconst app = createApp();\napp.use(CountDown);\n
\ntime
\u5C5E\u6027\u8868\u793A\u5012\u8BA1\u65F6\u603B\u65F6\u957F\uFF0C\u5355\u4F4D\u4E3A\u6BEB\u79D2\u3002
<van-count-down :time="time" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const time = ref(30 * 60 * 60 * 1000);\n return { time };\n },\n};\n
\n\u901A\u8FC7 format
\u5C5E\u6027\u8BBE\u7F6E\u5012\u8BA1\u65F6\u6587\u672C\u7684\u5185\u5BB9\u3002
<van-count-down :time="time" format="DD \u5929 HH \u65F6 mm \u5206 ss \u79D2" />\n
\n\u5012\u8BA1\u65F6\u9ED8\u8BA4\u6BCF\u79D2\u6E32\u67D3\u4E00\u6B21\uFF0C\u8BBE\u7F6E millisecond
\u5C5E\u6027\u53EF\u4EE5\u5F00\u542F\u6BEB\u79D2\u7EA7\u6E32\u67D3\u3002
<van-count-down millisecond :time="time" format="HH:mm:ss:SS" />\n
\n\u901A\u8FC7\u63D2\u69FD\u81EA\u5B9A\u4E49\u5012\u8BA1\u65F6\u7684\u6837\u5F0F\uFF0CtimeData
\u5BF9\u8C61\u683C\u5F0F\u89C1\u4E0B\u65B9\u8868\u683C\u3002
<van-count-down :time="time">\n <template #default="timeData">\n <span class="block">{{ timeData.hours }}</span>\n <span class="colon">:</span>\n <span class="block">{{ timeData.minutes }}</span>\n <span class="colon">:</span>\n <span class="block">{{ timeData.seconds }}</span>\n </template>\n</van-count-down>\n\n<style>\n .colon {\n display: inline-block;\n margin: 0 4px;\n color: #1989fa;\n }\n .block {\n display: inline-block;\n width: 22px;\n color: #fff;\n font-size: 12px;\n text-align: center;\n background-color: #1989fa;\n }\n</style>\n
\n\u901A\u8FC7 ref \u83B7\u53D6\u5230\u7EC4\u4EF6\u5B9E\u4F8B\u540E\uFF0C\u53EF\u4EE5\u8C03\u7528 start
\u3001pause
\u3001reset
\u65B9\u6CD5\u3002
<van-count-down\n ref="countDown"\n millisecond\n :time="3000"\n :auto-start="false"\n format="ss:SSS"\n @finish="onFinish"\n/>\n<van-grid clickable>\n <van-grid-item text="\u5F00\u59CB" icon="play-circle-o" @click="start" />\n <van-grid-item text="\u6682\u505C" icon="pause-circle-o" @click="pause" />\n <van-grid-item text="\u91CD\u7F6E" icon="replay" @click="reset" />\n</van-grid>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const countDown = ref(null);\n\n const start = () => {\n countDown.value.start();\n };\n const pause = () => {\n countDown.value.pause();\n };\n const reset = () => {\n countDown.value.reset();\n };\n const onFinish = () => showToast('\u5012\u8BA1\u65F6\u7ED3\u675F');\n\n return {\n start,\n pause,\n reset,\n onFinish,\n countDown,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
time | \n\u5012\u8BA1\u65F6\u65F6\u957F\uFF0C\u5355\u4F4D\u6BEB\u79D2 | \nnumber | string | \n0 | \n
format | \n\u65F6\u95F4\u683C\u5F0F | \nstring | \nHH:mm:ss | \n
auto-start | \n\u662F\u5426\u81EA\u52A8\u5F00\u59CB\u5012\u8BA1\u65F6 | \nboolean | \ntrue | \n
millisecond | \n\u662F\u5426\u5F00\u542F\u6BEB\u79D2\u7EA7\u6E32\u67D3 | \nboolean | \nfalse | \n
\u683C\u5F0F | \n\u8BF4\u660E | \n
---|---|
DD | \n\u5929\u6570 | \n
HH | \n\u5C0F\u65F6 | \n
mm | \n\u5206\u949F | \n
ss | \n\u79D2\u6570 | \n
S | \n\u6BEB\u79D2\uFF081 \u4F4D\uFF09 | \n
SS | \n\u6BEB\u79D2\uFF082 \u4F4D\uFF09 | \n
SSS | \n\u6BEB\u79D2\uFF083 \u4F4D\uFF09 | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
finish | \n\u5012\u8BA1\u65F6\u7ED3\u675F\u65F6\u89E6\u53D1 | \n- | \n
change | \n\u5012\u8BA1\u65F6\u53D8\u5316\u65F6\u89E6\u53D1 | \ncurrentTime: CurrentTime | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
default | \n\u81EA\u5B9A\u4E49\u5185\u5BB9 | \ncurrentTime: CurrentTime | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
total | \n\u5269\u4F59\u603B\u65F6\u95F4\uFF08\u5355\u4F4D\u6BEB\u79D2\uFF09 | \nnumber | \n
days | \n\u5269\u4F59\u5929\u6570 | \nnumber | \n
hours | \n\u5269\u4F59\u5C0F\u65F6 | \nnumber | \n
minutes | \n\u5269\u4F59\u5206\u949F | \nnumber | \n
seconds | \n\u5269\u4F59\u79D2\u6570 | \nnumber | \n
milliseconds | \n\u5269\u4F59\u6BEB\u79D2 | \nnumber | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 CountDown \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
start | \n\u5F00\u59CB\u5012\u8BA1\u65F6 | \n- | \n- | \n
pause | \n\u6682\u505C\u5012\u8BA1\u65F6 | \n- | \n- | \n
reset | \n\u91CD\u8BBE\u5012\u8BA1\u65F6\uFF0C\u82E5 auto-start \u4E3A true \uFF0C\u91CD\u8BBE\u540E\u4F1A\u81EA\u52A8\u5F00\u59CB\u5012\u8BA1\u65F6 | \n- | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n CountDownProps,\n CountDownInstance,\n CountDownCurrentTime,\n} from 'vant';\n
\nCountDownInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { CountDownInstance } from 'vant';\n\nconst countDownRef = ref<CountDownInstance>();\n\ncountDownRef.value?.start();\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-count-down-text-color | \nvar(--van-text-color) | \n- | \n
--van-count-down-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-count-down-line-height | \nvar(--van-line-height-md) | \n- | \n
\u5982\u679C\u4F60\u9047\u5230\u4E86\u5728 iOS \u4E0A\u5012\u8BA1\u65F6\u4E0D\u751F\u6548\u7684\u95EE\u9898\uFF0C\u8BF7\u786E\u8BA4\u5728\u521B\u5EFA Date \u5BF9\u8C61\u65F6\u6CA1\u6709\u4F7F\u7528new Date(\'2020-01-01\')
\u8FD9\u6837\u7684\u5199\u6CD5\uFF0CiOS \u4E0D\u652F\u6301\u4EE5\u4E2D\u5212\u7EBF\u5206\u9694\u7684\u65E5\u671F\u683C\u5F0F\uFF0C\u6B63\u786E\u5199\u6CD5\u662Fnew Date(\'2020/01/01\')
\u3002
\u5BF9\u6B64\u95EE\u9898\u7684\u8BE6\u7EC6\u89E3\u91CA\uFF1Astackoverflow\u3002
\n\u7528\u4E8E\u5B9E\u65F6\u5C55\u793A\u5012\u8BA1\u65F6\u6570\u503C\uFF0C\u652F\u6301\u6BEB\u79D2\u7CBE\u5EA6\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { CountDown } from 'vant';\n\nconst app = createApp();\napp.use(CountDown);\n
\ntime
\u5C5E\u6027\u8868\u793A\u5012\u8BA1\u65F6\u603B\u65F6\u957F\uFF0C\u5355\u4F4D\u4E3A\u6BEB\u79D2\u3002
<van-count-down :time="time" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const time = ref(30 * 60 * 60 * 1000);\n return { time };\n },\n};\n
\n\u901A\u8FC7 format
\u5C5E\u6027\u8BBE\u7F6E\u5012\u8BA1\u65F6\u6587\u672C\u7684\u5185\u5BB9\u3002
<van-count-down :time="time" format="DD \u5929 HH \u65F6 mm \u5206 ss \u79D2" />\n
\n\u5012\u8BA1\u65F6\u9ED8\u8BA4\u6BCF\u79D2\u6E32\u67D3\u4E00\u6B21\uFF0C\u8BBE\u7F6E millisecond
\u5C5E\u6027\u53EF\u4EE5\u5F00\u542F\u6BEB\u79D2\u7EA7\u6E32\u67D3\u3002
<van-count-down millisecond :time="time" format="HH:mm:ss:SS" />\n
\n\u901A\u8FC7\u63D2\u69FD\u81EA\u5B9A\u4E49\u5012\u8BA1\u65F6\u7684\u6837\u5F0F\uFF0CtimeData
\u5BF9\u8C61\u683C\u5F0F\u89C1\u4E0B\u65B9\u8868\u683C\u3002
<van-count-down :time="time">\n <template #default="timeData">\n <span class="block">{{ timeData.hours }}</span>\n <span class="colon">:</span>\n <span class="block">{{ timeData.minutes }}</span>\n <span class="colon">:</span>\n <span class="block">{{ timeData.seconds }}</span>\n </template>\n</van-count-down>\n\n<style>\n .colon {\n display: inline-block;\n margin: 0 4px;\n color: #1989fa;\n }\n .block {\n display: inline-block;\n width: 22px;\n color: #fff;\n font-size: 12px;\n text-align: center;\n background-color: #1989fa;\n }\n</style>\n
\n\u901A\u8FC7 ref \u83B7\u53D6\u5230\u7EC4\u4EF6\u5B9E\u4F8B\u540E\uFF0C\u53EF\u4EE5\u8C03\u7528 start
\u3001pause
\u3001reset
\u65B9\u6CD5\u3002
<van-count-down\n ref="countDown"\n millisecond\n :time="3000"\n :auto-start="false"\n format="ss:SSS"\n @finish="onFinish"\n/>\n<van-grid clickable>\n <van-grid-item text="\u5F00\u59CB" icon="play-circle-o" @click="start" />\n <van-grid-item text="\u6682\u505C" icon="pause-circle-o" @click="pause" />\n <van-grid-item text="\u91CD\u7F6E" icon="replay" @click="reset" />\n</van-grid>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const countDown = ref(null);\n\n const start = () => {\n countDown.value.start();\n };\n const pause = () => {\n countDown.value.pause();\n };\n const reset = () => {\n countDown.value.reset();\n };\n const onFinish = () => showToast('\u5012\u8BA1\u65F6\u7ED3\u675F');\n\n return {\n start,\n pause,\n reset,\n onFinish,\n countDown,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
time | \n\u5012\u8BA1\u65F6\u65F6\u957F\uFF0C\u5355\u4F4D\u6BEB\u79D2 | \nnumber | string | \n0 | \n
format | \n\u65F6\u95F4\u683C\u5F0F | \nstring | \nHH:mm:ss | \n
auto-start | \n\u662F\u5426\u81EA\u52A8\u5F00\u59CB\u5012\u8BA1\u65F6 | \nboolean | \ntrue | \n
millisecond | \n\u662F\u5426\u5F00\u542F\u6BEB\u79D2\u7EA7\u6E32\u67D3 | \nboolean | \nfalse | \n
\u683C\u5F0F | \n\u8BF4\u660E | \n
---|---|
DD | \n\u5929\u6570 | \n
HH | \n\u5C0F\u65F6 | \n
mm | \n\u5206\u949F | \n
ss | \n\u79D2\u6570 | \n
S | \n\u6BEB\u79D2\uFF081 \u4F4D\uFF09 | \n
SS | \n\u6BEB\u79D2\uFF082 \u4F4D\uFF09 | \n
SSS | \n\u6BEB\u79D2\uFF083 \u4F4D\uFF09 | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
finish | \n\u5012\u8BA1\u65F6\u7ED3\u675F\u65F6\u89E6\u53D1 | \n- | \n
change | \n\u5012\u8BA1\u65F6\u53D8\u5316\u65F6\u89E6\u53D1 | \ncurrentTime: CurrentTime | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
default | \n\u81EA\u5B9A\u4E49\u5185\u5BB9 | \ncurrentTime: CurrentTime | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
total | \n\u5269\u4F59\u603B\u65F6\u95F4\uFF08\u5355\u4F4D\u6BEB\u79D2\uFF09 | \nnumber | \n
days | \n\u5269\u4F59\u5929\u6570 | \nnumber | \n
hours | \n\u5269\u4F59\u5C0F\u65F6 | \nnumber | \n
minutes | \n\u5269\u4F59\u5206\u949F | \nnumber | \n
seconds | \n\u5269\u4F59\u79D2\u6570 | \nnumber | \n
milliseconds | \n\u5269\u4F59\u6BEB\u79D2 | \nnumber | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 CountDown \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
start | \n\u5F00\u59CB\u5012\u8BA1\u65F6 | \n- | \n- | \n
pause | \n\u6682\u505C\u5012\u8BA1\u65F6 | \n- | \n- | \n
reset | \n\u91CD\u8BBE\u5012\u8BA1\u65F6\uFF0C\u82E5 auto-start \u4E3A true \uFF0C\u91CD\u8BBE\u540E\u4F1A\u81EA\u52A8\u5F00\u59CB\u5012\u8BA1\u65F6 | \n- | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n CountDownProps,\n CountDownInstance,\n CountDownCurrentTime,\n} from 'vant';\n
\nCountDownInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { CountDownInstance } from 'vant';\n\nconst countDownRef = ref<CountDownInstance>();\n\ncountDownRef.value?.start();\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-count-down-text-color | \nvar(--van-text-color) | \n- | \n
--van-count-down-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-count-down-line-height | \nvar(--van-line-height-md) | \n- | \n
\u5982\u679C\u4F60\u9047\u5230\u4E86\u5728 iOS \u4E0A\u5012\u8BA1\u65F6\u4E0D\u751F\u6548\u7684\u95EE\u9898\uFF0C\u8BF7\u786E\u8BA4\u5728\u521B\u5EFA Date \u5BF9\u8C61\u65F6\u6CA1\u6709\u4F7F\u7528new Date(\'2020-01-01\')
\u8FD9\u6837\u7684\u5199\u6CD5\uFF0CiOS \u4E0D\u652F\u6301\u4EE5\u4E2D\u5212\u7EBF\u5206\u9694\u7684\u65E5\u671F\u683C\u5F0F\uFF0C\u6B63\u786E\u5199\u6CD5\u662Fnew Date(\'2020/01/01\')
\u3002
\u5BF9\u6B64\u95EE\u9898\u7684\u8BE6\u7EC6\u89E3\u91CA\uFF1Astackoverflow\u3002
\nUsed to display some content on top of another.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Popover } from 'vant';\n\nconst app = createApp();\napp.use(Popover);\n
\n<van-popover v-model:show="showPopover" :actions="actions" @select="onSelect">\n <template #reference>\n <van-button type="primary">Light Theme</van-button>\n </template>\n</van-popover>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const showPopover = ref(false);\n const actions = [\n { text: 'Option 1' },\n { text: 'Option 2' },\n { text: 'Option 3' },\n ];\n const onSelect = (action) => showToast(action.text);\n\n return {\n actions,\n onSelect,\n showPopover,\n };\n },\n};\n
\nUsing the theme
prop to change the style of Popover.
<van-popover v-model:show="showPopover" theme="dark" :actions="actions">\n <template #reference>\n <van-button type="primary">Dark Theme</van-button>\n </template>\n</van-popover>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showPopover = ref(false);\n const actions = [\n { text: 'Option 1' },\n { text: 'Option 2' },\n { text: 'Option 3' },\n ];\n\n return {\n actions,\n showPopover,\n };\n },\n};\n
\nAfter setting the actions-direction
prop to horizontal
, the actions will be arranged horizontally.
<van-popover\n v-model:show="showPopover"\n :actions="actions"\n actions-direction="horizontal"\n>\n <template #reference>\n <van-button type="primary">Horizontal</van-button>\n </template>\n</van-popover>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showPopover = ref(false);\n const actions = [\n { text: 'Option 1' },\n { text: 'Option 2' },\n { text: 'Option 3' },\n ];\n\n return {\n actions,\n showPopover,\n };\n },\n};\n
\n<van-popover placement="top" />\n
\nplacement
supports the following values:
top # Top middle\ntop-start # Top left\ntop-end # Top right\nleft # Left middle\nleft-start # Left top\nleft-end # Left bottom\nright # Right middle\nright-start # Right top\nright-end # Right bottom\nbottom # Bottom middle\nbottom-start # Bottom left\nbottom-end # Bottom right\n
\n<van-popover v-model:show="showPopover" :actions="actions">\n <template #reference>\n <van-button type="primary">Show Icon</van-button>\n </template>\n</van-popover>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showPopover = ref(false);\n const actions = [\n { text: 'Option 1', icon: 'add-o' },\n { text: 'Option 2', icon: 'music-o' },\n { text: 'Option 3', icon: 'more-o' },\n ];\n\n return {\n actions,\n showPopover,\n };\n },\n};\n
\nUsing the disabled
option to disable an action.
<van-popover v-model:show="showPopover" :actions="actions">\n <template #reference>\n <van-button type="primary">Disable Action</van-button>\n </template>\n</van-popover>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showPopover = ref(false);\n const actions = [\n { text: 'Option 1', disabled: true },\n { text: 'Option 2', disabled: true },\n { text: 'Option 3' },\n ];\n\n return {\n actions,\n showPopover,\n };\n },\n};\n
\n<van-popover v-model:show="showPopover">\n <van-grid\n square\n clickable\n :border="false"\n column-num="3"\n style="width: 240px;"\n >\n <van-grid-item\n v-for="i in 6"\n :key="i"\n text="Option"\n icon="photo-o"\n @click="showPopover = false"\n />\n </van-grid>\n <template #reference>\n <van-button type="primary">Custom Content</van-button>\n </template>\n</van-popover>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showPopover = ref(false);\n return { showPopover };\n },\n};\n
\nYou can use Popover as a controlled or uncontrolled component:
\nv-model:show
, Popover is a controlled component, and the display of the component is completely controlled by the value of v-model:show
.v-model:show
is not used, Popover is an uncontrolled component. You can pass in a default value through the show
prop, and the display is controlled by the component itself.<van-popover :actions="actions" position="top-start" @select="onSelect">\n <template #reference>\n <van-button type="primary">Uncontrolled</van-button>\n </template>\n</van-popover>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const actions = [\n { text: 'Option 1' },\n { text: 'Option 2' },\n { text: 'Option 3' },\n ];\n const onSelect = (action) => showToast(action.text);\n return {\n actions,\n onSelect,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:show | \nWhether to show Popover | \nboolean | \nfalse | \n
actions | \nActions | \nPopoverAction[] | \n[] | \n
actions-direction v4.4.1 | \nDirection of actions, can be set to horizontal | \nPopoverActionsDirection | \nvertical | \n
placement | \nPlacement | \nPopoverPlacement | \nbottom | \n
theme | \nTheme, can be set to dark | \nPopoverTheme | \nlight | \n
trigger | \nTrigger mode, can be set to manual | \nPopoverTrigger | \nclick | \n
duration | \nTransition duration, unit second | \nnumber | string | \n0.3 | \n
offset | \nDistance to reference | \n[number, number] | \n[0, 8] | \n
overlay | \nWhether to show overlay | \nboolean | \nfalse | \n
overlay-class | \nCustom overlay class | \nstring | Array | object | \n- | \n
overlay-style | \nCustom overlay style | \nobject | \n- | \n
show-arrow | \nWhether to show arrow | \nboolean | \ntrue | \n
close-on-click-action | \nWhether to close when clicking action | \nboolean | \ntrue | \n
close-on-click-outside | \nWhether to close when clicking outside | \nboolean | \ntrue | \n
close-on-click-overlay | \nWhether to close when clicking overlay | \nboolean | \ntrue | \n
teleport | \nSpecifies a target element where Popover will be mounted | \nstring | Element | \nbody | \n
icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
Key | \nDescription | \nType | \n
---|---|---|
text | \nAction Text | \nstring | \n
icon | \nIcon | \nstring | \n
color | \nAction Color | \nstring | \n
disabled | \nWhether to be disabled | \nboolean | \n
className | \nclassName of the option | \nstring | Array | object | \n
Event | \nDescription | \nArguments | \n
---|---|---|
select | \nEmitted when an action is clicked | \naction: PopoverAction, index: number | \n
open | \nEmitted when opening Popover | \n- | \n
close | \nEmitted when closing Popover | \n- | \n
opened | \nEmitted when Popover is opened | \n- | \n
closed | \nEmitted when Popover is closed | \n- | \n
click-overlay | \nEmitted when overlay is clicked | \nevent: MouseEvent | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
default | \nCustom content | \n- | \n
reference | \nReference Element | \n- | \n
action | \nCustom the content of option | \n{ action: PopoverAction, index: number } | \n
The component exports the following type definitions:
\nimport type {\n PopoverProps,\n PopoverTheme,\n PopoverAction,\n PopoverActionsDirection,\n PopoverTrigger,\n PopoverPlacement,\n} from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-popover-arrow-size | \n6px | \n- | \n
--van-popover-radius | \nvar(--van-radius-lg) | \n- | \n
--van-popover-action-width | \n128px | \n- | \n
--van-popover-action-height | \n44px | \n- | \n
--van-popover-action-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-popover-action-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-popover-action-icon-size | \n20px | \n- | \n
--van-popover-horizontal-action-height | \n34px | \n- | \n
--van-popover-horizontal-action-icon-size | \n16px | \n- | \n
--van-popover-light-text-color | \nvar(--van-text-color) | \n- | \n
--van-popover-light-background | \nvar(--van-background-2) | \n- | \n
--van-popover-light-action-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-popover-dark-text-color | \nvar(--van-white) | \n- | \n
--van-popover-dark-background | \n#4a4a4a | \n- | \n
--van-popover-dark-action-disabled-text-color | \nvar(--van-text-color-2) | \n- | \n
Used to display some content on top of another.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Popover } from 'vant';\n\nconst app = createApp();\napp.use(Popover);\n
\n<van-popover v-model:show="showPopover" :actions="actions" @select="onSelect">\n <template #reference>\n <van-button type="primary">Light Theme</van-button>\n </template>\n</van-popover>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const showPopover = ref(false);\n const actions = [\n { text: 'Option 1' },\n { text: 'Option 2' },\n { text: 'Option 3' },\n ];\n const onSelect = (action) => showToast(action.text);\n\n return {\n actions,\n onSelect,\n showPopover,\n };\n },\n};\n
\nUsing the theme
prop to change the style of Popover.
<van-popover v-model:show="showPopover" theme="dark" :actions="actions">\n <template #reference>\n <van-button type="primary">Dark Theme</van-button>\n </template>\n</van-popover>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showPopover = ref(false);\n const actions = [\n { text: 'Option 1' },\n { text: 'Option 2' },\n { text: 'Option 3' },\n ];\n\n return {\n actions,\n showPopover,\n };\n },\n};\n
\nAfter setting the actions-direction
prop to horizontal
, the actions will be arranged horizontally.
<van-popover\n v-model:show="showPopover"\n :actions="actions"\n actions-direction="horizontal"\n>\n <template #reference>\n <van-button type="primary">Horizontal</van-button>\n </template>\n</van-popover>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showPopover = ref(false);\n const actions = [\n { text: 'Option 1' },\n { text: 'Option 2' },\n { text: 'Option 3' },\n ];\n\n return {\n actions,\n showPopover,\n };\n },\n};\n
\n<van-popover placement="top" />\n
\nplacement
supports the following values:
top # Top middle\ntop-start # Top left\ntop-end # Top right\nleft # Left middle\nleft-start # Left top\nleft-end # Left bottom\nright # Right middle\nright-start # Right top\nright-end # Right bottom\nbottom # Bottom middle\nbottom-start # Bottom left\nbottom-end # Bottom right\n
\n<van-popover v-model:show="showPopover" :actions="actions">\n <template #reference>\n <van-button type="primary">Show Icon</van-button>\n </template>\n</van-popover>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showPopover = ref(false);\n const actions = [\n { text: 'Option 1', icon: 'add-o' },\n { text: 'Option 2', icon: 'music-o' },\n { text: 'Option 3', icon: 'more-o' },\n ];\n\n return {\n actions,\n showPopover,\n };\n },\n};\n
\nUsing the disabled
option to disable an action.
<van-popover v-model:show="showPopover" :actions="actions">\n <template #reference>\n <van-button type="primary">Disable Action</van-button>\n </template>\n</van-popover>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showPopover = ref(false);\n const actions = [\n { text: 'Option 1', disabled: true },\n { text: 'Option 2', disabled: true },\n { text: 'Option 3' },\n ];\n\n return {\n actions,\n showPopover,\n };\n },\n};\n
\n<van-popover v-model:show="showPopover">\n <van-grid\n square\n clickable\n :border="false"\n column-num="3"\n style="width: 240px;"\n >\n <van-grid-item\n v-for="i in 6"\n :key="i"\n text="Option"\n icon="photo-o"\n @click="showPopover = false"\n />\n </van-grid>\n <template #reference>\n <van-button type="primary">Custom Content</van-button>\n </template>\n</van-popover>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showPopover = ref(false);\n return { showPopover };\n },\n};\n
\nYou can use Popover as a controlled or uncontrolled component:
\nv-model:show
, Popover is a controlled component, and the display of the component is completely controlled by the value of v-model:show
.v-model:show
is not used, Popover is an uncontrolled component. You can pass in a default value through the show
prop, and the display is controlled by the component itself.<van-popover :actions="actions" position="top-start" @select="onSelect">\n <template #reference>\n <van-button type="primary">Uncontrolled</van-button>\n </template>\n</van-popover>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const actions = [\n { text: 'Option 1' },\n { text: 'Option 2' },\n { text: 'Option 3' },\n ];\n const onSelect = (action) => showToast(action.text);\n return {\n actions,\n onSelect,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:show | \nWhether to show Popover | \nboolean | \nfalse | \n
actions | \nActions | \nPopoverAction[] | \n[] | \n
actions-direction v4.4.1 | \nDirection of actions, can be set to horizontal | \nPopoverActionsDirection | \nvertical | \n
placement | \nPlacement | \nPopoverPlacement | \nbottom | \n
theme | \nTheme, can be set to dark | \nPopoverTheme | \nlight | \n
trigger | \nTrigger mode, can be set to manual | \nPopoverTrigger | \nclick | \n
duration | \nTransition duration, unit second | \nnumber | string | \n0.3 | \n
offset | \nDistance to reference | \n[number, number] | \n[0, 8] | \n
overlay | \nWhether to show overlay | \nboolean | \nfalse | \n
overlay-class | \nCustom overlay class | \nstring | Array | object | \n- | \n
overlay-style | \nCustom overlay style | \nobject | \n- | \n
show-arrow | \nWhether to show arrow | \nboolean | \ntrue | \n
close-on-click-action | \nWhether to close when clicking action | \nboolean | \ntrue | \n
close-on-click-outside | \nWhether to close when clicking outside | \nboolean | \ntrue | \n
close-on-click-overlay | \nWhether to close when clicking overlay | \nboolean | \ntrue | \n
teleport | \nSpecifies a target element where Popover will be mounted | \nstring | Element | \nbody | \n
icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
Key | \nDescription | \nType | \n
---|---|---|
text | \nAction Text | \nstring | \n
icon | \nIcon | \nstring | \n
color | \nAction Color | \nstring | \n
disabled | \nWhether to be disabled | \nboolean | \n
className | \nclassName of the option | \nstring | Array | object | \n
Event | \nDescription | \nArguments | \n
---|---|---|
select | \nEmitted when an action is clicked | \naction: PopoverAction, index: number | \n
open | \nEmitted when opening Popover | \n- | \n
close | \nEmitted when closing Popover | \n- | \n
opened | \nEmitted when Popover is opened | \n- | \n
closed | \nEmitted when Popover is closed | \n- | \n
click-overlay | \nEmitted when overlay is clicked | \nevent: MouseEvent | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
default | \nCustom content | \n- | \n
reference | \nReference Element | \n- | \n
action | \nCustom the content of option | \n{ action: PopoverAction, index: number } | \n
The component exports the following type definitions:
\nimport type {\n PopoverProps,\n PopoverTheme,\n PopoverAction,\n PopoverActionsDirection,\n PopoverTrigger,\n PopoverPlacement,\n} from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-popover-arrow-size | \n6px | \n- | \n
--van-popover-radius | \nvar(--van-radius-lg) | \n- | \n
--van-popover-action-width | \n128px | \n- | \n
--van-popover-action-height | \n44px | \n- | \n
--van-popover-action-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-popover-action-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-popover-action-icon-size | \n20px | \n- | \n
--van-popover-horizontal-action-height | \n34px | \n- | \n
--van-popover-horizontal-action-icon-size | \n16px | \n- | \n
--van-popover-light-text-color | \nvar(--van-text-color) | \n- | \n
--van-popover-light-background | \nvar(--van-background-2) | \n- | \n
--van-popover-light-action-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-popover-dark-text-color | \nvar(--van-white) | \n- | \n
--van-popover-dark-background | \n#4a4a4a | \n- | \n
--van-popover-dark-action-disabled-text-color | \nvar(--van-text-color-2) | \n- | \n
\u5728\u9875\u9762\u4E0A\u6DFB\u52A0\u7279\u5B9A\u7684\u6587\u5B57\u6216\u56FE\u6848\u4F5C\u4E3A\u6C34\u5370\uFF0C\u53EF\u7528\u4E8E\u9632\u6B62\u4FE1\u606F\u76D7\u7528\u3002\u8BF7\u5347\u7EA7 vant
\u5230 >= 4.2.0 \u7248\u672C\u6765\u4F7F\u7528\u8BE5\u7EC4\u4EF6\u3002
\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Watermark } from 'vant';\n\nconst app = createApp();\napp.use(Watermark);\n
\n\u901A\u8FC7 content
\u5C5E\u6027\u6765\u8BBE\u7F6E\u6C34\u5370\u7684\u6587\u5B57\u3002
<van-watermark content="Vant" />\n
\n\u901A\u8FC7 image
\u5C5E\u6027\u6765\u8BBE\u7F6E\u6C34\u5370\u56FE\u7247\uFF0C\u5E76\u4F7F\u7528 opacity
\u6765\u8C03\u6574\u6C34\u5370\u7684\u6574\u4F53\u900F\u660E\u5EA6\u3002
<van-watermark\n image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"\n opacity="0.2"\n/>\n
\n\u901A\u8FC7 gap-x
\u548C gap-y
\u5C5E\u6027\u6765\u63A7\u5236\u591A\u4E2A\u91CD\u590D\u6C34\u5370\u4E4B\u95F4\u7684\u95F4\u9694\u3002
<van-watermark\n image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"\n :gap-x="30"\n :gap-y="10"\n opacity="0.2"\n/>\n
\n\u901A\u8FC7 rotate
\u5C5E\u6027\u6765\u63A7\u5236\u6C34\u5370\u7684\u503E\u659C\u89D2\u5EA6\uFF0C\u9ED8\u8BA4\u503C\u4E3A-22
\u3002
<van-watermark\n image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"\n rotate="22"\n opacity="0.2"\n/>\n
\n\u901A\u8FC7 full-page
\u5C5E\u6027\u6765\u63A7\u5236\u6C34\u5370\u7684\u663E\u793A\u8303\u56F4\u3002
<van-watermark\n image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"\n opacity="0.2"\n :full-page="true"\n/>\n
\n\u901A\u8FC7 content
\u63D2\u69FD\u53EF\u4EE5\u76F4\u63A5\u4F20\u5165 HTML \u4F5C\u4E3A\u6C34\u5370\u3002HTML \u4E2D\u7684\u6837\u5F0F\u4EC5\u652F\u6301\u884C\u5185\u6837\u5F0F\uFF0C\u540C\u65F6\u4E0D\u652F\u6301\u4F20\u5165\u81EA\u95ED\u5408\u6807\u7B7E\u3002
<van-watermark :width="150">\n <template #content>\n <div style="background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%)">\n <p style="mix-blend-mode: difference; color: #fff">Vant watermark</p>\n </div>\n </template>\n</van-watermark>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
width | \n\u6C34\u5370\u5BBD\u5EA6 | \nnumber | \n100 | \n
height | \n\u6C34\u5370\u9AD8\u5EA6 | \nnumber | \n100 | \n
z-index | \n\u6C34\u5370\u7684 z-index | \nnumber | string | \n100 | \n
content | \n\u6587\u5B57\u6C34\u5370\u7684\u5185\u5BB9 | \nstring | \n- | \n
image | \n\u56FE\u7247\u6C34\u5370\u7684\u5185\u5BB9\uFF0C\u5982\u679C\u4E0E content \u540C\u65F6\u4F20\u5165\uFF0C\u4F18\u5148\u4F7F\u7528\u56FE\u7247\u6C34\u5370 | \nstring | \n- | \n
rotate | \n\u6C34\u5370\u7684\u65CB\u8F6C\u89D2\u5EA6 | \nnumber | string | \n-22 | \n
full-page | \n\u6C34\u5370\u662F\u5426\u5168\u5C4F\u663E\u793A | \nboolean | \nfalse | \n
gap-x | \n\u6C34\u5370\u4E4B\u95F4\u7684\u6C34\u5E73\u95F4\u9694 | \nnumber | \n0 | \n
gap-y | \n\u6C34\u5370\u4E4B\u95F4\u7684\u5782\u76F4\u95F4\u9694 | \nnumber | \n0 | \n
text-color | \n\u6587\u5B57\u6C34\u5370\u7684\u989C\u8272 | \nstring | \n#dcdee0 | \n
opacity | \n\u6C34\u5370\u7684\u900F\u660E\u5EA6 | \nnumber | string | \n- | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
content | \nHTML \u6C34\u5370\u7684\u5185\u5BB9\uFF0C\u4EC5\u652F\u6301\u884C\u5185\u6837\u5F0F\uFF0C\u540C\u65F6\u4E0D\u652F\u6301\u4F20\u5165\u81EA\u95ED\u5408\u6807\u7B7E\uFF0C\u4F18\u5148\u7EA7\u9AD8\u4E8E content \u6216 image \u5C5E\u6027 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { WaterProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-watermark-z-index | \n100 | \n\u6839\u8282\u70B9\u7684 z-index \u5C42\u7EA7 | \n
\u5728\u9875\u9762\u4E0A\u6DFB\u52A0\u7279\u5B9A\u7684\u6587\u5B57\u6216\u56FE\u6848\u4F5C\u4E3A\u6C34\u5370\uFF0C\u53EF\u7528\u4E8E\u9632\u6B62\u4FE1\u606F\u76D7\u7528\u3002\u8BF7\u5347\u7EA7 vant
\u5230 >= 4.2.0 \u7248\u672C\u6765\u4F7F\u7528\u8BE5\u7EC4\u4EF6\u3002
\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Watermark } from 'vant';\n\nconst app = createApp();\napp.use(Watermark);\n
\n\u901A\u8FC7 content
\u5C5E\u6027\u6765\u8BBE\u7F6E\u6C34\u5370\u7684\u6587\u5B57\u3002
<van-watermark content="Vant" />\n
\n\u901A\u8FC7 image
\u5C5E\u6027\u6765\u8BBE\u7F6E\u6C34\u5370\u56FE\u7247\uFF0C\u5E76\u4F7F\u7528 opacity
\u6765\u8C03\u6574\u6C34\u5370\u7684\u6574\u4F53\u900F\u660E\u5EA6\u3002
<van-watermark\n image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"\n opacity="0.2"\n/>\n
\n\u901A\u8FC7 gap-x
\u548C gap-y
\u5C5E\u6027\u6765\u63A7\u5236\u591A\u4E2A\u91CD\u590D\u6C34\u5370\u4E4B\u95F4\u7684\u95F4\u9694\u3002
<van-watermark\n image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"\n :gap-x="30"\n :gap-y="10"\n opacity="0.2"\n/>\n
\n\u901A\u8FC7 rotate
\u5C5E\u6027\u6765\u63A7\u5236\u6C34\u5370\u7684\u503E\u659C\u89D2\u5EA6\uFF0C\u9ED8\u8BA4\u503C\u4E3A-22
\u3002
<van-watermark\n image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"\n rotate="22"\n opacity="0.2"\n/>\n
\n\u901A\u8FC7 full-page
\u5C5E\u6027\u6765\u63A7\u5236\u6C34\u5370\u7684\u663E\u793A\u8303\u56F4\u3002
<van-watermark\n image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"\n opacity="0.2"\n :full-page="true"\n/>\n
\n\u901A\u8FC7 content
\u63D2\u69FD\u53EF\u4EE5\u76F4\u63A5\u4F20\u5165 HTML \u4F5C\u4E3A\u6C34\u5370\u3002HTML \u4E2D\u7684\u6837\u5F0F\u4EC5\u652F\u6301\u884C\u5185\u6837\u5F0F\uFF0C\u540C\u65F6\u4E0D\u652F\u6301\u4F20\u5165\u81EA\u95ED\u5408\u6807\u7B7E\u3002
<van-watermark :width="150">\n <template #content>\n <div style="background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%)">\n <p style="mix-blend-mode: difference; color: #fff">Vant watermark</p>\n </div>\n </template>\n</van-watermark>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
width | \n\u6C34\u5370\u5BBD\u5EA6 | \nnumber | \n100 | \n
height | \n\u6C34\u5370\u9AD8\u5EA6 | \nnumber | \n100 | \n
z-index | \n\u6C34\u5370\u7684 z-index | \nnumber | string | \n100 | \n
content | \n\u6587\u5B57\u6C34\u5370\u7684\u5185\u5BB9 | \nstring | \n- | \n
image | \n\u56FE\u7247\u6C34\u5370\u7684\u5185\u5BB9\uFF0C\u5982\u679C\u4E0E content \u540C\u65F6\u4F20\u5165\uFF0C\u4F18\u5148\u4F7F\u7528\u56FE\u7247\u6C34\u5370 | \nstring | \n- | \n
rotate | \n\u6C34\u5370\u7684\u65CB\u8F6C\u89D2\u5EA6 | \nnumber | string | \n-22 | \n
full-page | \n\u6C34\u5370\u662F\u5426\u5168\u5C4F\u663E\u793A | \nboolean | \nfalse | \n
gap-x | \n\u6C34\u5370\u4E4B\u95F4\u7684\u6C34\u5E73\u95F4\u9694 | \nnumber | \n0 | \n
gap-y | \n\u6C34\u5370\u4E4B\u95F4\u7684\u5782\u76F4\u95F4\u9694 | \nnumber | \n0 | \n
text-color | \n\u6587\u5B57\u6C34\u5370\u7684\u989C\u8272 | \nstring | \n#dcdee0 | \n
opacity | \n\u6C34\u5370\u7684\u900F\u660E\u5EA6 | \nnumber | string | \n- | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
content | \nHTML \u6C34\u5370\u7684\u5185\u5BB9\uFF0C\u4EC5\u652F\u6301\u884C\u5185\u6837\u5F0F\uFF0C\u540C\u65F6\u4E0D\u652F\u6301\u4F20\u5165\u81EA\u95ED\u5408\u6807\u7B7E\uFF0C\u4F18\u5148\u7EA7\u9AD8\u4E8E content \u6216 image \u5C5E\u6027 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { WaterProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-watermark-z-index | \n100 | \n\u6839\u8282\u70B9\u7684 z-index \u5C42\u7EA7 | \n
\u7528\u4E8E\u4E3A\u9875\u9762\u76F8\u5173\u64CD\u4F5C\u63D0\u4F9B\u4FBF\u6377\u4EA4\u4E92\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { ActionBar, ActionBarIcon, ActionBarButton } from 'vant';\n\nconst app = createApp();\napp.use(ActionBar);\napp.use(ActionBarIcon);\napp.use(ActionBarButton);\n
\n<van-action-bar>\n <van-action-bar-icon icon="chat-o" text="\u5BA2\u670D" @click="onClickIcon" />\n <van-action-bar-icon icon="cart-o" text="\u8D2D\u7269\u8F66" @click="onClickIcon" />\n <van-action-bar-icon icon="shop-o" text="\u5E97\u94FA" @click="onClickIcon" />\n <van-action-bar-button type="danger" text="\u7ACB\u5373\u8D2D\u4E70" @click="onClickButton" />\n</van-action-bar>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onClickIcon = () => showToast('\u70B9\u51FB\u56FE\u6807');\n const onClickButton = () => showToast('\u70B9\u51FB\u6309\u94AE');\n return {\n onClickIcon,\n onClickButton,\n };\n },\n};\n
\n\u5728 ActionBarIcon \u7EC4\u4EF6\u4E0A\u8BBE\u7F6E dot
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\uFF1B\u8BBE\u7F6E badge
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002
<van-action-bar>\n <van-action-bar-icon icon="chat-o" text="\u5BA2\u670D" dot />\n <van-action-bar-icon icon="cart-o" text="\u8D2D\u7269\u8F66" badge="5" />\n <van-action-bar-icon icon="shop-o" text="\u5E97\u94FA" badge="12" />\n <van-action-bar-button type="warning" text="\u52A0\u5165\u8D2D\u7269\u8F66" />\n <van-action-bar-button type="danger" text="\u7ACB\u5373\u8D2D\u4E70" />\n</van-action-bar>\n
\n\u901A\u8FC7 ActionBarIcon \u7684 color
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u56FE\u6807\u7684\u989C\u8272\u3002
<van-action-bar>\n <van-action-bar-icon icon="chat-o" text="\u5BA2\u670D" color="#ee0a24" />\n <van-action-bar-icon icon="cart-o" text="\u8D2D\u7269\u8F66" />\n <van-action-bar-icon icon="star" text="\u5DF2\u6536\u85CF" color="#ff5000" />\n <van-action-bar-button type="warning" text="\u52A0\u5165\u8D2D\u7269\u8F66" />\n <van-action-bar-button type="danger" text="\u7ACB\u5373\u8D2D\u4E70" />\n</van-action-bar>\n
\n\u901A\u8FC7 ActionBarButton \u7684 color
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u6309\u94AE\u7684\u989C\u8272\uFF0C\u652F\u6301\u4F20\u5165 linear-gradient
\u6E10\u53D8\u8272\u3002
<van-action-bar>\n <van-action-bar-icon icon="chat-o" text="\u5BA2\u670D" />\n <van-action-bar-icon icon="shop-o" text="\u5E97\u94FA" />\n <van-action-bar-button color="#be99ff" type="warning" text="\u52A0\u5165\u8D2D\u7269\u8F66" />\n <van-action-bar-button color="#7232dd" type="danger" text="\u7ACB\u5373\u8D2D\u4E70" />\n</van-action-bar>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
safe-area-inset-bottom | \n\u662F\u5426\u5F00\u542F\u5E95\u90E8\u5B89\u5168\u533A\u9002\u914D | \nboolean | \ntrue | \n
placeholder | \n\u662F\u5426\u5728\u6807\u7B7E\u4F4D\u7F6E\u751F\u6210\u4E00\u4E2A\u7B49\u9AD8\u7684\u5360\u4F4D\u5143\u7D20 | \nboolean | \nfalse | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
text | \n\u6309\u94AE\u6587\u5B57 | \nstring | \n- | \n
icon | \n\u56FE\u6807 | \nstring | \n- | \n
color | \n\u56FE\u6807\u989C\u8272 | \nstring | \n#323233 | \n
icon-class | \n\u56FE\u6807\u989D\u5916\u7C7B\u540D | \nstring | Array | object | \n- | \n
icon-prefix | \n\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 | \nstring | \nvan-icon | \n
dot | \n\u662F\u5426\u663E\u793A\u56FE\u6807\u53F3\u4E0A\u89D2\u5C0F\u7EA2\u70B9 | \nboolean | \nfalse | \n
badge | \n\u56FE\u6807\u53F3\u4E0A\u89D2\u5FBD\u6807\u7684\u5185\u5BB9 | \nnumber | string | \n- | \n
badge-props | \n\u81EA\u5B9A\u4E49\u5FBD\u6807\u7684\u5C5E\u6027\uFF0C\u4F20\u5165\u7684\u5BF9\u8C61\u4F1A\u88AB\u900F\u4F20\u7ED9 Badge \u7EC4\u4EF6\u7684 props | \nBadgeProps | \n- | \n
url | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740 | \nstring | \n- | \n
to | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u76EE\u6807\u8DEF\u7531\u5BF9\u8C61\uFF0C\u7B49\u540C\u4E8E Vue Router \u7684 to \u5C5E\u6027 | \nstring | object | \n- | \n
replace | \n\u662F\u5426\u5728\u8DF3\u8F6C\u65F6\u66FF\u6362\u5F53\u524D\u9875\u9762\u5386\u53F2 | \nboolean | \nfalse | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
text | \n\u6309\u94AE\u6587\u5B57 | \nstring | \n- | \n
type | \n\u6309\u94AE\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A default primary success warning danger | \nstring | \ndefault | \n
color | \n\u6309\u94AE\u989C\u8272\uFF0C\u652F\u6301\u4F20\u5165 linear-gradient \u6E10\u53D8\u8272 | \nstring | \n- | \n
icon | \n\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n- | \n
disabled | \n\u662F\u5426\u7981\u7528\u6309\u94AE | \nboolean | \nfalse | \n
loading | \n\u662F\u5426\u663E\u793A\u4E3A\u52A0\u8F7D\u72B6\u6001 | \nboolean | \nfalse | \n
url | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740 | \nstring | \n- | \n
to | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u76EE\u6807\u8DEF\u7531\u5BF9\u8C61\uFF0C\u7B49\u540C\u4E8E Vue Router \u7684 to \u5C5E\u6027 | \nstring | object | \n- | \n
replace | \n\u662F\u5426\u5728\u8DF3\u8F6C\u65F6\u66FF\u6362\u5F53\u524D\u9875\u9762\u5386\u53F2 | \nboolean | \nfalse | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u6587\u672C\u5185\u5BB9 | \n
icon | \n\u81EA\u5B9A\u4E49\u56FE\u6807 | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u6309\u94AE\u663E\u793A\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n ActionBarProps,\n ActionBarIconProps,\n ActionBarButtonProps,\n} from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-action-bar-background | \nvar(--van-background-2) | \n- | \n
--van-action-bar-height | \n50px | \n- | \n
--van-action-bar-icon-width | \n48px | \n- | \n
--van-action-bar-icon-height | \n100% | \n- | \n
--van-action-bar-icon-color | \nvar(--van-text-color) | \n- | \n
--van-action-bar-icon-size | \n18px | \n- | \n
--van-action-bar-icon-font-size | \nvar(--van-font-size-xs) | \n- | \n
--van-action-bar-icon-active-color | \nvar(--van-active-color) | \n- | \n
--van-action-bar-icon-text-color | \nvar(--van-text-color) | \n- | \n
--van-action-bar-icon-background | \nvar(--van-background-2) | \n- | \n
--van-action-bar-button-height | \n40px | \n- | \n
--van-action-bar-button-warning-color | \nvar(--van-gradient-orange) | \n- | \n
--van-action-bar-button-danger-color | \nvar(--van-gradient-red) | \n- | \n
\u7528\u4E8E\u4E3A\u9875\u9762\u76F8\u5173\u64CD\u4F5C\u63D0\u4F9B\u4FBF\u6377\u4EA4\u4E92\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { ActionBar, ActionBarIcon, ActionBarButton } from 'vant';\n\nconst app = createApp();\napp.use(ActionBar);\napp.use(ActionBarIcon);\napp.use(ActionBarButton);\n
\n<van-action-bar>\n <van-action-bar-icon icon="chat-o" text="\u5BA2\u670D" @click="onClickIcon" />\n <van-action-bar-icon icon="cart-o" text="\u8D2D\u7269\u8F66" @click="onClickIcon" />\n <van-action-bar-icon icon="shop-o" text="\u5E97\u94FA" @click="onClickIcon" />\n <van-action-bar-button type="danger" text="\u7ACB\u5373\u8D2D\u4E70" @click="onClickButton" />\n</van-action-bar>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onClickIcon = () => showToast('\u70B9\u51FB\u56FE\u6807');\n const onClickButton = () => showToast('\u70B9\u51FB\u6309\u94AE');\n return {\n onClickIcon,\n onClickButton,\n };\n },\n};\n
\n\u5728 ActionBarIcon \u7EC4\u4EF6\u4E0A\u8BBE\u7F6E dot
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\uFF1B\u8BBE\u7F6E badge
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002
<van-action-bar>\n <van-action-bar-icon icon="chat-o" text="\u5BA2\u670D" dot />\n <van-action-bar-icon icon="cart-o" text="\u8D2D\u7269\u8F66" badge="5" />\n <van-action-bar-icon icon="shop-o" text="\u5E97\u94FA" badge="12" />\n <van-action-bar-button type="warning" text="\u52A0\u5165\u8D2D\u7269\u8F66" />\n <van-action-bar-button type="danger" text="\u7ACB\u5373\u8D2D\u4E70" />\n</van-action-bar>\n
\n\u901A\u8FC7 ActionBarIcon \u7684 color
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u56FE\u6807\u7684\u989C\u8272\u3002
<van-action-bar>\n <van-action-bar-icon icon="chat-o" text="\u5BA2\u670D" color="#ee0a24" />\n <van-action-bar-icon icon="cart-o" text="\u8D2D\u7269\u8F66" />\n <van-action-bar-icon icon="star" text="\u5DF2\u6536\u85CF" color="#ff5000" />\n <van-action-bar-button type="warning" text="\u52A0\u5165\u8D2D\u7269\u8F66" />\n <van-action-bar-button type="danger" text="\u7ACB\u5373\u8D2D\u4E70" />\n</van-action-bar>\n
\n\u901A\u8FC7 ActionBarButton \u7684 color
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u6309\u94AE\u7684\u989C\u8272\uFF0C\u652F\u6301\u4F20\u5165 linear-gradient
\u6E10\u53D8\u8272\u3002
<van-action-bar>\n <van-action-bar-icon icon="chat-o" text="\u5BA2\u670D" />\n <van-action-bar-icon icon="shop-o" text="\u5E97\u94FA" />\n <van-action-bar-button color="#be99ff" type="warning" text="\u52A0\u5165\u8D2D\u7269\u8F66" />\n <van-action-bar-button color="#7232dd" type="danger" text="\u7ACB\u5373\u8D2D\u4E70" />\n</van-action-bar>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
safe-area-inset-bottom | \n\u662F\u5426\u5F00\u542F\u5E95\u90E8\u5B89\u5168\u533A\u9002\u914D | \nboolean | \ntrue | \n
placeholder | \n\u662F\u5426\u5728\u6807\u7B7E\u4F4D\u7F6E\u751F\u6210\u4E00\u4E2A\u7B49\u9AD8\u7684\u5360\u4F4D\u5143\u7D20 | \nboolean | \nfalse | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
text | \n\u6309\u94AE\u6587\u5B57 | \nstring | \n- | \n
icon | \n\u56FE\u6807 | \nstring | \n- | \n
color | \n\u56FE\u6807\u989C\u8272 | \nstring | \n#323233 | \n
icon-class | \n\u56FE\u6807\u989D\u5916\u7C7B\u540D | \nstring | Array | object | \n- | \n
icon-prefix | \n\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 | \nstring | \nvan-icon | \n
dot | \n\u662F\u5426\u663E\u793A\u56FE\u6807\u53F3\u4E0A\u89D2\u5C0F\u7EA2\u70B9 | \nboolean | \nfalse | \n
badge | \n\u56FE\u6807\u53F3\u4E0A\u89D2\u5FBD\u6807\u7684\u5185\u5BB9 | \nnumber | string | \n- | \n
badge-props | \n\u81EA\u5B9A\u4E49\u5FBD\u6807\u7684\u5C5E\u6027\uFF0C\u4F20\u5165\u7684\u5BF9\u8C61\u4F1A\u88AB\u900F\u4F20\u7ED9 Badge \u7EC4\u4EF6\u7684 props | \nBadgeProps | \n- | \n
url | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740 | \nstring | \n- | \n
to | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u76EE\u6807\u8DEF\u7531\u5BF9\u8C61\uFF0C\u7B49\u540C\u4E8E Vue Router \u7684 to \u5C5E\u6027 | \nstring | object | \n- | \n
replace | \n\u662F\u5426\u5728\u8DF3\u8F6C\u65F6\u66FF\u6362\u5F53\u524D\u9875\u9762\u5386\u53F2 | \nboolean | \nfalse | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
text | \n\u6309\u94AE\u6587\u5B57 | \nstring | \n- | \n
type | \n\u6309\u94AE\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A default primary success warning danger | \nstring | \ndefault | \n
color | \n\u6309\u94AE\u989C\u8272\uFF0C\u652F\u6301\u4F20\u5165 linear-gradient \u6E10\u53D8\u8272 | \nstring | \n- | \n
icon | \n\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n- | \n
disabled | \n\u662F\u5426\u7981\u7528\u6309\u94AE | \nboolean | \nfalse | \n
loading | \n\u662F\u5426\u663E\u793A\u4E3A\u52A0\u8F7D\u72B6\u6001 | \nboolean | \nfalse | \n
url | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740 | \nstring | \n- | \n
to | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u76EE\u6807\u8DEF\u7531\u5BF9\u8C61\uFF0C\u7B49\u540C\u4E8E Vue Router \u7684 to \u5C5E\u6027 | \nstring | object | \n- | \n
replace | \n\u662F\u5426\u5728\u8DF3\u8F6C\u65F6\u66FF\u6362\u5F53\u524D\u9875\u9762\u5386\u53F2 | \nboolean | \nfalse | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u6587\u672C\u5185\u5BB9 | \n
icon | \n\u81EA\u5B9A\u4E49\u56FE\u6807 | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u6309\u94AE\u663E\u793A\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n ActionBarProps,\n ActionBarIconProps,\n ActionBarButtonProps,\n} from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-action-bar-background | \nvar(--van-background-2) | \n- | \n
--van-action-bar-height | \n50px | \n- | \n
--van-action-bar-icon-width | \n48px | \n- | \n
--van-action-bar-icon-height | \n100% | \n- | \n
--van-action-bar-icon-color | \nvar(--van-text-color) | \n- | \n
--van-action-bar-icon-size | \n18px | \n- | \n
--van-action-bar-icon-font-size | \nvar(--van-font-size-xs) | \n- | \n
--van-action-bar-icon-active-color | \nvar(--van-active-color) | \n- | \n
--van-action-bar-icon-text-color | \nvar(--van-text-color) | \n- | \n
--van-action-bar-icon-background | \nvar(--van-background-2) | \n- | \n
--van-action-bar-button-height | \n40px | \n- | \n
--van-action-bar-button-warning-color | \nvar(--van-gradient-orange) | \n- | \n
--van-action-bar-button-danger-color | \nvar(--van-gradient-red) | \n- | \n
Used to select time, usually used with the Popup component.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { TimePicker } from 'vant';\n\nconst app = createApp();\napp.use(TimePicker);\n
\n<van-time-picker v-model="currentTime" title="Choose Time" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '00']);\n return { currentTime };\n },\n};\n
\nUsing columns-type
prop to control the type of columns.
For example:
\n[\'hour\']
to select hour.[\'minute\']
to select minute.[\'minute\', \'second\']
to select minute and second.[\'hour\', \'minute\', \'second\']
to select hour, minute and second.<van-time-picker\n v-model="currentTime"\n title="Choose Time"\n :columns-type="columnsType"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '00', '00']);\n const columnsType = ['hour', 'minute', 'second'];\n return {\n currentTime,\n columnsType,\n };\n },\n};\n
\nYou can use props like min-hour
and max-hour
to limit the range of hours, min-minute
and max-minute
to limit the range of minutes, and min-second
and max-second
to limit the range of seconds.
For example, in the following example, users can only select hours between 10
and 20
, and minutes between 30
and 40
.
<van-time-picker\n v-model="currentTime"\n title="Choose Time"\n :min-hour="10"\n :max-hour="20"\n :min-minute="30"\n :max-minute="40"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '35']);\n return { currentTime };\n },\n};\n
\nYou can use min-time
and max-time
attributes to limit the overall time range, with the format 10:00:00
.
min-time
is set, attributes like min-hour
, min-minute
, and min-second
will not take effect.max-time
is set, attributes like max-hour
, max-minute
, and max-second
will not take effect.For example, in the following example, users can select any time between 09:40:10
and 20:20:50
.
<van-time-picker\n v-model="currentTime"\n title="Choose Time"\n :columns-type="['hour', 'minute', 'second']"\n min-time="09:40:10"\n max-time="20:20:50"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '00', '00']);\n return { currentTime };\n },\n};\n
\nUsing formatter
prop to format option text.
<van-time-picker\n v-model="currentTime"\n title="Choose Time"\n :formatter="formatter"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '00']);\n const formatter = (type, option) => {\n if (type === 'hour') {\n option.text += 'h';\n }\n if (type === 'minute') {\n option.text += 'm';\n }\n return option;\n };\n\n return {\n formatter,\n currentTime,\n };\n },\n};\n
\nUsing filter
prop to filter options.
<van-time-picker v-model="currentTime" title="Choose Time" :filter="filter" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '00']);\n\n const filter = (type, options) => {\n if (type === 'minute') {\n return options.filter((option) => Number(option.value) % 10 === 0);\n }\n return options;\n };\n\n return {\n filter,\n currentTime,\n };\n },\n};\n
\nThe third parameter of the filter
function can get the currently selected time, which can be used to filter unwanted times more flexibly when using the uncontrolled mode.
<van-time-picker title="Choose Time" :filter="filter" />\n
\nexport default {\n setup() {\n const filter = (type, options, values) => {\n const hour = +values[0];\n\n if (type === 'hour') {\n return options.filter(\n (option) => Number(option.value) >= 8 && Number(option.value) <= 18,\n );\n }\n\n if (type === 'minute') {\n options = options.filter((option) => Number(option.value) % 10 === 0);\n\n if (hour === 8) {\n return options.filter((option) => Number(option.value) >= 40);\n }\n\n if (hour === 18) {\n return options.filter((option) => Number(option.value) <= 20);\n }\n }\n\n return options;\n };\n\n return {\n filter,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nCurrent time | \nstring[] | \n- | \n
columns-type | \nColumns type | \nstring[] | \n[\'hour\', \'minute\'] | \n
min-hour | \nMin hour | \nnumber | string | \n0 | \n
max-hour | \nMax hour | \nnumber | string | \n23 | \n
min-minute | \nMin minute | \nnumber | string | \n0 | \n
max-minute | \nMax minute | \nnumber | string | \n59 | \n
min-second | \nMin second | \nnumber | string | \n0 | \n
max-second | \nMax second | \nnumber | string | \n59 | \n
min-time v4.5.0 | \nMin time, format reference 07:40:00 , min-hour min-minute min-second is invalid when used | \nstring | \n- | \n
max-time v4.5.0 | \nMax time, format reference 10:20:00 , min-hour min-minute max-second is invalid when used | \nstring | \n- | \n
title | \nToolbar title | \nstring | \n\'\' | \n
confirm-button-text | \nText of confirm button | \nstring | \nConfirm | \n
cancel-button-text | \nText of cancel button | \nstring | \nCancel | \n
show-toolbar | \nWhether to show toolbar | \nboolean | \ntrue | \n
loading | \nWhether to show loading prompt | \nboolean | \nfalse | \n
readonly | \nWhether to be readonly | \nboolean | \nfalse | \n
filter | \nOption filter | \n(type: string, options: PickerOption[], values: string[]) => PickerOption[] | \n- | \n
formatter | \nOption text formatter | \n(type: string, option: PickerOption) => PickerOption | \n- | \n
option-height | \nOption height, supports px vw vh rem unit, default px | \nnumber | string | \n44 | \n
visible-option-num | \nCount of visible columns | \nnumber | string | \n6 | \n
swipe-duration | \nDuration of the momentum animation, unit ms | \nnumber | string | \n1000 | \n
Event | \nDescription | \nArguments | \n
---|---|---|
confirm | \nEmitted when the confirm button is clicked | \n{ selectedValues, selectedOptions } | \n
cancel | \nEmitted when the cancel button is clicked | \n{ selectedValues, selectedOptions } | \n
change | \nEmitted when current option is changed | \n{ selectedValues, selectedOptions, columnIndex } | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
toolbar | \nCustom toolbar content | \n- | \n
title | \nCustom title | \n- | \n
confirm | \nCustom confirm button text | \n- | \n
cancel | \nCustom cancel button text | \n- | \n
option | \nCustom option content | \noption: PickerOption, index: number | \n
columns-top | \nCustom content above columns | \n- | \n
columns-bottom | \nCustom content below columns | \n- | \n
The component exports the following type definitions:
\nimport type { TimePickerProps, TimePickerColumnType } from 'vant';\n
\nUsed to select time, usually used with the Popup component.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { TimePicker } from 'vant';\n\nconst app = createApp();\napp.use(TimePicker);\n
\n<van-time-picker v-model="currentTime" title="Choose Time" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '00']);\n return { currentTime };\n },\n};\n
\nUsing columns-type
prop to control the type of columns.
For example:
\n[\'hour\']
to select hour.[\'minute\']
to select minute.[\'minute\', \'second\']
to select minute and second.[\'hour\', \'minute\', \'second\']
to select hour, minute and second.<van-time-picker\n v-model="currentTime"\n title="Choose Time"\n :columns-type="columnsType"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '00', '00']);\n const columnsType = ['hour', 'minute', 'second'];\n return {\n currentTime,\n columnsType,\n };\n },\n};\n
\nYou can use props like min-hour
and max-hour
to limit the range of hours, min-minute
and max-minute
to limit the range of minutes, and min-second
and max-second
to limit the range of seconds.
For example, in the following example, users can only select hours between 10
and 20
, and minutes between 30
and 40
.
<van-time-picker\n v-model="currentTime"\n title="Choose Time"\n :min-hour="10"\n :max-hour="20"\n :min-minute="30"\n :max-minute="40"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '35']);\n return { currentTime };\n },\n};\n
\nYou can use min-time
and max-time
attributes to limit the overall time range, with the format 10:00:00
.
min-time
is set, attributes like min-hour
, min-minute
, and min-second
will not take effect.max-time
is set, attributes like max-hour
, max-minute
, and max-second
will not take effect.For example, in the following example, users can select any time between 09:40:10
and 20:20:50
.
<van-time-picker\n v-model="currentTime"\n title="Choose Time"\n :columns-type="['hour', 'minute', 'second']"\n min-time="09:40:10"\n max-time="20:20:50"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '00', '00']);\n return { currentTime };\n },\n};\n
\nUsing formatter
prop to format option text.
<van-time-picker\n v-model="currentTime"\n title="Choose Time"\n :formatter="formatter"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '00']);\n const formatter = (type, option) => {\n if (type === 'hour') {\n option.text += 'h';\n }\n if (type === 'minute') {\n option.text += 'm';\n }\n return option;\n };\n\n return {\n formatter,\n currentTime,\n };\n },\n};\n
\nUsing filter
prop to filter options.
<van-time-picker v-model="currentTime" title="Choose Time" :filter="filter" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '00']);\n\n const filter = (type, options) => {\n if (type === 'minute') {\n return options.filter((option) => Number(option.value) % 10 === 0);\n }\n return options;\n };\n\n return {\n filter,\n currentTime,\n };\n },\n};\n
\nThe third parameter of the filter
function can get the currently selected time, which can be used to filter unwanted times more flexibly when using the uncontrolled mode.
<van-time-picker title="Choose Time" :filter="filter" />\n
\nexport default {\n setup() {\n const filter = (type, options, values) => {\n const hour = +values[0];\n\n if (type === 'hour') {\n return options.filter(\n (option) => Number(option.value) >= 8 && Number(option.value) <= 18,\n );\n }\n\n if (type === 'minute') {\n options = options.filter((option) => Number(option.value) % 10 === 0);\n\n if (hour === 8) {\n return options.filter((option) => Number(option.value) >= 40);\n }\n\n if (hour === 18) {\n return options.filter((option) => Number(option.value) <= 20);\n }\n }\n\n return options;\n };\n\n return {\n filter,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nCurrent time | \nstring[] | \n- | \n
columns-type | \nColumns type | \nstring[] | \n[\'hour\', \'minute\'] | \n
min-hour | \nMin hour | \nnumber | string | \n0 | \n
max-hour | \nMax hour | \nnumber | string | \n23 | \n
min-minute | \nMin minute | \nnumber | string | \n0 | \n
max-minute | \nMax minute | \nnumber | string | \n59 | \n
min-second | \nMin second | \nnumber | string | \n0 | \n
max-second | \nMax second | \nnumber | string | \n59 | \n
min-time v4.5.0 | \nMin time, format reference 07:40:00 , min-hour min-minute min-second is invalid when used | \nstring | \n- | \n
max-time v4.5.0 | \nMax time, format reference 10:20:00 , min-hour min-minute max-second is invalid when used | \nstring | \n- | \n
title | \nToolbar title | \nstring | \n\'\' | \n
confirm-button-text | \nText of confirm button | \nstring | \nConfirm | \n
cancel-button-text | \nText of cancel button | \nstring | \nCancel | \n
show-toolbar | \nWhether to show toolbar | \nboolean | \ntrue | \n
loading | \nWhether to show loading prompt | \nboolean | \nfalse | \n
readonly | \nWhether to be readonly | \nboolean | \nfalse | \n
filter | \nOption filter | \n(type: string, options: PickerOption[], values: string[]) => PickerOption[] | \n- | \n
formatter | \nOption text formatter | \n(type: string, option: PickerOption) => PickerOption | \n- | \n
option-height | \nOption height, supports px vw vh rem unit, default px | \nnumber | string | \n44 | \n
visible-option-num | \nCount of visible columns | \nnumber | string | \n6 | \n
swipe-duration | \nDuration of the momentum animation, unit ms | \nnumber | string | \n1000 | \n
Event | \nDescription | \nArguments | \n
---|---|---|
confirm | \nEmitted when the confirm button is clicked | \n{ selectedValues, selectedOptions } | \n
cancel | \nEmitted when the cancel button is clicked | \n{ selectedValues, selectedOptions } | \n
change | \nEmitted when current option is changed | \n{ selectedValues, selectedOptions, columnIndex } | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
toolbar | \nCustom toolbar content | \n- | \n
title | \nCustom title | \n- | \n
confirm | \nCustom confirm button text | \n- | \n
cancel | \nCustom cancel button text | \n- | \n
option | \nCustom option content | \noption: PickerOption, index: number | \n
columns-top | \nCustom content above columns | \n- | \n
columns-bottom | \nCustom content below columns | \n- | \n
The component exports the following type definitions:
\nimport type { TimePickerProps, TimePickerColumnType } from 'vant';\n
\n\u5728\u4E00\u7EC4\u5907\u9009\u9879\u4E2D\u8FDB\u884C\u591A\u9009\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Checkbox, CheckboxGroup } from 'vant';\n\nconst app = createApp();\napp.use(Checkbox);\napp.use(CheckboxGroup);\n
\n\u901A\u8FC7 v-model
\u7ED1\u5B9A\u590D\u9009\u6846\u7684\u52FE\u9009\u72B6\u6001\u3002
<van-checkbox v-model="checked">\u590D\u9009\u6846</van-checkbox>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(true);\n return { checked };\n },\n};\n
\n\u901A\u8FC7\u8BBE\u7F6E disabled
\u5C5E\u6027\u53EF\u4EE5\u7981\u7528\u590D\u9009\u6846\u3002
<van-checkbox v-model="checked" disabled>\u590D\u9009\u6846</van-checkbox>\n
\n\u5C06 shape
\u5C5E\u6027\u8BBE\u7F6E\u4E3A square
\uFF0C\u590D\u9009\u6846\u7684\u5F62\u72B6\u4F1A\u53D8\u6210\u65B9\u5F62\u3002
<van-checkbox-group v-model="checked" shape="square">\n <van-checkbox name="a">\u590D\u9009\u6846 a</van-checkbox>\n <van-checkbox name="b">\u590D\u9009\u6846 b</van-checkbox>\n</van-checkbox-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(['a', 'b']);\n return { checked };\n },\n};\n
\n\u901A\u8FC7 checked-color
\u5C5E\u6027\u8BBE\u7F6E\u9009\u4E2D\u72B6\u6001\u7684\u56FE\u6807\u989C\u8272\u3002
<van-checkbox v-model="checked" checked-color="#ee0a24">\u590D\u9009\u6846</van-checkbox>\n
\n\u901A\u8FC7 icon-size
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u56FE\u6807\u7684\u5927\u5C0F\u3002
<van-checkbox v-model="checked" icon-size="24px">\u590D\u9009\u6846</van-checkbox>\n
\n\u901A\u8FC7 icon
\u63D2\u69FD\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u53EF\u4EE5\u901A\u8FC7 slotProps
\u5224\u65AD\u662F\u5426\u4E3A\u9009\u4E2D\u72B6\u6001.
<van-checkbox v-model="checked">\n \u81EA\u5B9A\u4E49\u56FE\u6807\n <template #icon="props">\n <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />\n </template>\n</van-checkbox>\n\n<style>\n .img-icon {\n height: 20px;\n }\n</style>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(true);\n return {\n checked,\n activeIcon:\n 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',\n inactiveIcon:\n 'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',\n };\n },\n};\n
\n\u5C06 label-position
\u5C5E\u6027\u8BBE\u7F6E\u4E3A \'left\'
\uFF0C\u53EF\u4EE5\u5C06\u6587\u672C\u4F4D\u7F6E\u8C03\u6574\u5230\u590D\u9009\u6846\u5DE6\u4FA7\u3002
<van-checkbox v-model="checked" label-position="left">\u590D\u9009\u6846</van-checkbox>\n
\n\u8BBE\u7F6E label-disabled
\u5C5E\u6027\u540E\uFF0C\u70B9\u51FB\u56FE\u6807\u4EE5\u5916\u7684\u5185\u5BB9\u4E0D\u4F1A\u89E6\u53D1\u590D\u9009\u6846\u5207\u6362\u3002
<van-checkbox v-model="checked" label-disabled>\u590D\u9009\u6846</van-checkbox>\n
\n\u590D\u9009\u6846\u53EF\u4EE5\u4E0E\u590D\u9009\u6846\u7EC4\u4E00\u8D77\u4F7F\u7528\uFF0C\u590D\u9009\u6846\u7EC4\u901A\u8FC7 v-model
\u6570\u7EC4\u7ED1\u5B9A\u590D\u9009\u6846\u7684\u52FE\u9009\u72B6\u6001\u3002
<van-checkbox-group v-model="checked">\n <van-checkbox name="a">\u590D\u9009\u6846 a</van-checkbox>\n <van-checkbox name="b">\u590D\u9009\u6846 b</van-checkbox>\n</van-checkbox-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(['a', 'b']);\n return { checked };\n },\n};\n
\n\u5C06 direction
\u5C5E\u6027\u8BBE\u7F6E\u4E3A horizontal
\u540E\uFF0C\u590D\u9009\u6846\u7EC4\u4F1A\u53D8\u6210\u6C34\u5E73\u6392\u5217\u3002
<van-checkbox-group v-model="checked" direction="horizontal">\n <van-checkbox name="a">\u590D\u9009\u6846 a</van-checkbox>\n <van-checkbox name="b">\u590D\u9009\u6846 b</van-checkbox>\n</van-checkbox-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref([]);\n return { checked };\n },\n};\n
\n\u901A\u8FC7 max
\u5C5E\u6027\u53EF\u4EE5\u9650\u5236\u590D\u9009\u6846\u7EC4\u7684\u6700\u5927\u53EF\u9009\u6570\u3002
<van-checkbox-group v-model="checked" :max="2">\n <van-checkbox name="a">\u590D\u9009\u6846 a</van-checkbox>\n <van-checkbox name="b">\u590D\u9009\u6846 b</van-checkbox>\n <van-checkbox name="c">\u590D\u9009\u6846 c</van-checkbox>\n</van-checkbox-group>\n
\n\u901A\u8FC7 CheckboxGroup
\u5B9E\u4F8B\u4E0A\u7684 toggleAll
\u65B9\u6CD5\u53EF\u4EE5\u5B9E\u73B0\u5168\u9009\u4E0E\u53CD\u9009\u3002
<van-checkbox-group v-model="checked" ref="checkboxGroup">\n <van-checkbox name="a">\u590D\u9009\u6846 a</van-checkbox>\n <van-checkbox name="b">\u590D\u9009\u6846 b</van-checkbox>\n <van-checkbox name="c">\u590D\u9009\u6846 c</van-checkbox>\n</van-checkbox-group>\n\n<van-button type="primary" @click="checkAll">\u5168\u9009</van-button>\n<van-button type="primary" @click="toggleAll">\u53CD\u9009</van-button>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref([]);\n const checkboxGroup = ref(null);\n const checkAll = () => {\n checkboxGroup.value.toggleAll(true);\n }\n const toggleAll = () => {\n checkboxGroup.value.toggleAll();\n },\n\n return {\n checked,\n checkAll,\n toggleAll,\n checkboxGroup,\n };\n },\n};\n
\n\u642D\u914D\u5355\u5143\u683C\u7EC4\u4EF6\u4F7F\u7528\u65F6\uFF0C\u9700\u8981\u518D\u5F15\u5165 Cell
\u548C CellGroup
\u7EC4\u4EF6\uFF0C\u5E76\u901A\u8FC7 Checkbox
\u5B9E\u4F8B\u4E0A\u7684 toggle \u65B9\u6CD5\u89E6\u53D1\u5207\u6362\u3002
<van-checkbox-group v-model="checked">\n <van-cell-group inset>\n <van-cell\n v-for="(item, index) in list"\n clickable\n :key="item"\n :title="`\u590D\u9009\u6846 ${item}`"\n @click="toggle(index)"\n >\n <template #right-icon>\n <van-checkbox\n :name="item"\n :ref="el => checkboxRefs[index] = el"\n @click.stop\n />\n </template>\n </van-cell>\n </van-cell-group>\n</van-checkbox-group>\n
\nimport { ref, onBeforeUpdate } from 'vue';\n\nexport default {\n setup() {\n const checked = ref([]);\n const checkboxRefs = ref([]);\n const toggle = (index) => {\n checkboxRefs.value[index].toggle();\n };\n\n onBeforeUpdate(() => {\n checkboxRefs.value = [];\n });\n\n return {\n list: ['a', 'b'],\n toggle,\n checked,\n checkboxRefs,\n };\n },\n};\n
\n\u901A\u8FC7 indeterminate
\u8BBE\u7F6E\u590D\u9009\u6846\u662F\u5426\u4E3A\u4E0D\u786E\u5B9A\u72B6\u6001\u3002
<van-checkbox\n v-model="isCheckAll"\n :indeterminate="isIndeterminate"\n @change="checkAllChange"\n>\n \u5168\u9009\n</van-checkbox>\n\n<van-checkbox-group v-model="checkedResult" @change="checkedResultChange">\n <van-checkbox v-for="item in list" :key="item" :name="item">\n \u590D\u9009\u6846 {{ item }}\n </van-checkbox>\n</van-checkbox-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const list = ['a', 'b', 'c', 'd']\n\n const isCheckAll = ref(false);\n const checkedResult = ref(['a', 'b', 'd']);\n const isIndeterminate = ref(true);\n\n const checkAllChange = (val: boolean) => {\n checkedResult.value = val ? list : []\n isIndeterminate.value = false\n }\n\n const checkedResultChange = (value: string[]) => {\n const checkedCount = value.length\n isCheckAll.value = checkedCount === list.length\n isIndeterminate.value = checkedCount > 0 && checkedCount < list.length\n }\n\n return {\n list,\n isCheckAll,\n checkedResult,\n checkAllChange,\n isIndeterminate,\n checkedResultChange\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u662F\u5426\u4E3A\u9009\u4E2D\u72B6\u6001 | \nboolean | \nfalse | \n
name | \n\u6807\u8BC6\u7B26\uFF0C\u901A\u5E38\u4E3A\u4E00\u4E2A\u552F\u4E00\u7684\u5B57\u7B26\u4E32\u6216\u6570\u5B57 | \nany | \n- | \n
shape | \n\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A square | \nstring | \nround | \n
disabled | \n\u662F\u5426\u7981\u7528\u590D\u9009\u6846 | \nboolean | \nfalse | \n
label-disabled | \n\u662F\u5426\u7981\u7528\u590D\u9009\u6846\u6587\u672C\u70B9\u51FB | \nboolean | \nfalse | \n
label-position | \n\u6587\u672C\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A left | \nstring | \nright | \n
icon-size | \n\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n20px | \n
checked-color | \n\u9009\u4E2D\u72B6\u6001\u989C\u8272 | \nstring | \n#1989fa | \n
bind-group | \n\u662F\u5426\u4E0E\u590D\u9009\u6846\u7EC4\u7ED1\u5B9A | \nboolean | \ntrue | \n
indeterminate | \n\u662F\u5426\u4E3A\u4E0D\u786E\u5B9A\u72B6\u6001 | \nboolean | \nfalse | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u6240\u6709\u9009\u4E2D\u9879\u7684\u6807\u8BC6\u7B26 | \nany[] | \n- | \n
disabled | \n\u662F\u5426\u7981\u7528\u6240\u6709\u590D\u9009\u6846 | \nboolean | \nfalse | \n
max | \n\u6700\u5927\u53EF\u9009\u6570\uFF0C0 \u4E3A\u65E0\u9650\u5236 | \nnumber | string | \n0 | \n
direction | \n\u6392\u5217\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A horizontal | \nstring | \nvertical | \n
icon-size | \n\u6240\u6709\u590D\u9009\u6846\u7684\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n20px | \n
checked-color | \n\u6240\u6709\u590D\u9009\u6846\u7684\u9009\u4E2D\u72B6\u6001\u989C\u8272 | \nstring | \n#1989fa | \n
shape v4.6.3 | \n\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A square | \nstring | \nround | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6 | \nchecked: boolean | \n
click | \n\u70B9\u51FB\u590D\u9009\u6846\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6 | \nnames: any[] | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
default | \n\u81EA\u5B9A\u4E49\u6587\u672C | \n{ checked: boolean, disabled: boolean } | \n
icon | \n\u81EA\u5B9A\u4E49\u56FE\u6807 | \n{ checked: boolean, disabled: boolean } | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 CheckboxGroup \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
toggleAll | \n\u5207\u6362\u6240\u6709\u590D\u9009\u6846\uFF0C\u4F20 true \u4E3A\u9009\u4E2D\uFF0Cfalse \u4E3A\u53D6\u6D88\u9009\u4E2D\uFF0C\u4E0D\u4F20\u53C2\u4E3A\u53D6\u53CD | \noptions?: boolean | object | \n- | \n
import { ref } from 'vue';\nimport type { CheckboxGroupInstance } from 'vant';\n\nconst checkboxGroupRef = ref<CheckboxGroupInstance>();\n\n// \u5168\u90E8\u53CD\u9009\ncheckboxGroupRef?.value.toggleAll();\n// \u5168\u90E8\u9009\u4E2D\ncheckboxGroupRef?.value.toggleAll(true);\n// \u5168\u90E8\u53D6\u6D88\ncheckboxGroupRef?.value.toggleAll(false);\n\n// \u5168\u90E8\u53CD\u9009\uFF0C\u5E76\u8DF3\u8FC7\u7981\u7528\u7684\u590D\u9009\u6846\ncheckboxGroupRef?.value.toggleAll({\n skipDisabled: true,\n});\n// \u5168\u90E8\u9009\u4E2D\uFF0C\u5E76\u8DF3\u8FC7\u7981\u7528\u7684\u590D\u9009\u6846\ncheckboxGroupRef?.value.toggleAll({\n checked: true,\n skipDisabled: true,\n});\n
\n\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Checkbox \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
toggle | \n\u5207\u6362\u9009\u4E2D\u72B6\u6001\uFF0C\u4F20 true \u4E3A\u9009\u4E2D\uFF0Cfalse \u4E3A\u53D6\u6D88\u9009\u4E2D\uFF0C\u4E0D\u4F20\u53C2\u4E3A\u53D6\u53CD | \nchecked?: boolean | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n CheckboxProps,\n CheckboxShape,\n CheckboxInstance,\n CheckboxLabelPosition,\n CheckboxGroupProps,\n CheckboxGroupInstance,\n CheckboxGroupDirection,\n CheckboxGroupToggleAllOptions,\n} from 'vant';\n
\nCheckboxInstance
\u548C CheckboxGroupInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { CheckboxInstance, CheckboxGroupInstance } from 'vant';\n\nconst checkboxRef = ref<CheckboxInstance>();\nconst checkboxGroupRef = ref<CheckboxGroupInstance>();\n\ncheckboxRef.value?.toggle();\ncheckboxGroupRef.value?.toggleAll();\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-checkbox-size | \n20px | \n- | \n
--van-checkbox-border-color | \nvar(--van-gray-5) | \n- | \n
--van-checkbox-duration | \nvar(--van-duration-fast) | \n- | \n
--van-checkbox-label-margin | \nvar(--van-padding-xs) | \n- | \n
--van-checkbox-label-color | \nvar(--van-text-color) | \n- | \n
--van-checkbox-checked-icon-color | \nvar(--van-primary-color) | \n- | \n
--van-checkbox-disabled-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-checkbox-disabled-label-color | \nvar(--van-text-color-3) | \n- | \n
--van-checkbox-disabled-background | \nvar(--van-border-color) | \n- | \n
\u5728\u4E00\u7EC4\u5907\u9009\u9879\u4E2D\u8FDB\u884C\u591A\u9009\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Checkbox, CheckboxGroup } from 'vant';\n\nconst app = createApp();\napp.use(Checkbox);\napp.use(CheckboxGroup);\n
\n\u901A\u8FC7 v-model
\u7ED1\u5B9A\u590D\u9009\u6846\u7684\u52FE\u9009\u72B6\u6001\u3002
<van-checkbox v-model="checked">\u590D\u9009\u6846</van-checkbox>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(true);\n return { checked };\n },\n};\n
\n\u901A\u8FC7\u8BBE\u7F6E disabled
\u5C5E\u6027\u53EF\u4EE5\u7981\u7528\u590D\u9009\u6846\u3002
<van-checkbox v-model="checked" disabled>\u590D\u9009\u6846</van-checkbox>\n
\n\u5C06 shape
\u5C5E\u6027\u8BBE\u7F6E\u4E3A square
\uFF0C\u590D\u9009\u6846\u7684\u5F62\u72B6\u4F1A\u53D8\u6210\u65B9\u5F62\u3002
<van-checkbox-group v-model="checked" shape="square">\n <van-checkbox name="a">\u590D\u9009\u6846 a</van-checkbox>\n <van-checkbox name="b">\u590D\u9009\u6846 b</van-checkbox>\n</van-checkbox-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(['a', 'b']);\n return { checked };\n },\n};\n
\n\u901A\u8FC7 checked-color
\u5C5E\u6027\u8BBE\u7F6E\u9009\u4E2D\u72B6\u6001\u7684\u56FE\u6807\u989C\u8272\u3002
<van-checkbox v-model="checked" checked-color="#ee0a24">\u590D\u9009\u6846</van-checkbox>\n
\n\u901A\u8FC7 icon-size
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u56FE\u6807\u7684\u5927\u5C0F\u3002
<van-checkbox v-model="checked" icon-size="24px">\u590D\u9009\u6846</van-checkbox>\n
\n\u901A\u8FC7 icon
\u63D2\u69FD\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u53EF\u4EE5\u901A\u8FC7 slotProps
\u5224\u65AD\u662F\u5426\u4E3A\u9009\u4E2D\u72B6\u6001.
<van-checkbox v-model="checked">\n \u81EA\u5B9A\u4E49\u56FE\u6807\n <template #icon="props">\n <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />\n </template>\n</van-checkbox>\n\n<style>\n .img-icon {\n height: 20px;\n }\n</style>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(true);\n return {\n checked,\n activeIcon:\n 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',\n inactiveIcon:\n 'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',\n };\n },\n};\n
\n\u5C06 label-position
\u5C5E\u6027\u8BBE\u7F6E\u4E3A \'left\'
\uFF0C\u53EF\u4EE5\u5C06\u6587\u672C\u4F4D\u7F6E\u8C03\u6574\u5230\u590D\u9009\u6846\u5DE6\u4FA7\u3002
<van-checkbox v-model="checked" label-position="left">\u590D\u9009\u6846</van-checkbox>\n
\n\u8BBE\u7F6E label-disabled
\u5C5E\u6027\u540E\uFF0C\u70B9\u51FB\u56FE\u6807\u4EE5\u5916\u7684\u5185\u5BB9\u4E0D\u4F1A\u89E6\u53D1\u590D\u9009\u6846\u5207\u6362\u3002
<van-checkbox v-model="checked" label-disabled>\u590D\u9009\u6846</van-checkbox>\n
\n\u590D\u9009\u6846\u53EF\u4EE5\u4E0E\u590D\u9009\u6846\u7EC4\u4E00\u8D77\u4F7F\u7528\uFF0C\u590D\u9009\u6846\u7EC4\u901A\u8FC7 v-model
\u6570\u7EC4\u7ED1\u5B9A\u590D\u9009\u6846\u7684\u52FE\u9009\u72B6\u6001\u3002
<van-checkbox-group v-model="checked">\n <van-checkbox name="a">\u590D\u9009\u6846 a</van-checkbox>\n <van-checkbox name="b">\u590D\u9009\u6846 b</van-checkbox>\n</van-checkbox-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(['a', 'b']);\n return { checked };\n },\n};\n
\n\u5C06 direction
\u5C5E\u6027\u8BBE\u7F6E\u4E3A horizontal
\u540E\uFF0C\u590D\u9009\u6846\u7EC4\u4F1A\u53D8\u6210\u6C34\u5E73\u6392\u5217\u3002
<van-checkbox-group v-model="checked" direction="horizontal">\n <van-checkbox name="a">\u590D\u9009\u6846 a</van-checkbox>\n <van-checkbox name="b">\u590D\u9009\u6846 b</van-checkbox>\n</van-checkbox-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref([]);\n return { checked };\n },\n};\n
\n\u901A\u8FC7 max
\u5C5E\u6027\u53EF\u4EE5\u9650\u5236\u590D\u9009\u6846\u7EC4\u7684\u6700\u5927\u53EF\u9009\u6570\u3002
<van-checkbox-group v-model="checked" :max="2">\n <van-checkbox name="a">\u590D\u9009\u6846 a</van-checkbox>\n <van-checkbox name="b">\u590D\u9009\u6846 b</van-checkbox>\n <van-checkbox name="c">\u590D\u9009\u6846 c</van-checkbox>\n</van-checkbox-group>\n
\n\u901A\u8FC7 CheckboxGroup
\u5B9E\u4F8B\u4E0A\u7684 toggleAll
\u65B9\u6CD5\u53EF\u4EE5\u5B9E\u73B0\u5168\u9009\u4E0E\u53CD\u9009\u3002
<van-checkbox-group v-model="checked" ref="checkboxGroup">\n <van-checkbox name="a">\u590D\u9009\u6846 a</van-checkbox>\n <van-checkbox name="b">\u590D\u9009\u6846 b</van-checkbox>\n <van-checkbox name="c">\u590D\u9009\u6846 c</van-checkbox>\n</van-checkbox-group>\n\n<van-button type="primary" @click="checkAll">\u5168\u9009</van-button>\n<van-button type="primary" @click="toggleAll">\u53CD\u9009</van-button>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref([]);\n const checkboxGroup = ref(null);\n const checkAll = () => {\n checkboxGroup.value.toggleAll(true);\n }\n const toggleAll = () => {\n checkboxGroup.value.toggleAll();\n },\n\n return {\n checked,\n checkAll,\n toggleAll,\n checkboxGroup,\n };\n },\n};\n
\n\u642D\u914D\u5355\u5143\u683C\u7EC4\u4EF6\u4F7F\u7528\u65F6\uFF0C\u9700\u8981\u518D\u5F15\u5165 Cell
\u548C CellGroup
\u7EC4\u4EF6\uFF0C\u5E76\u901A\u8FC7 Checkbox
\u5B9E\u4F8B\u4E0A\u7684 toggle \u65B9\u6CD5\u89E6\u53D1\u5207\u6362\u3002
<van-checkbox-group v-model="checked">\n <van-cell-group inset>\n <van-cell\n v-for="(item, index) in list"\n clickable\n :key="item"\n :title="`\u590D\u9009\u6846 ${item}`"\n @click="toggle(index)"\n >\n <template #right-icon>\n <van-checkbox\n :name="item"\n :ref="el => checkboxRefs[index] = el"\n @click.stop\n />\n </template>\n </van-cell>\n </van-cell-group>\n</van-checkbox-group>\n
\nimport { ref, onBeforeUpdate } from 'vue';\n\nexport default {\n setup() {\n const checked = ref([]);\n const checkboxRefs = ref([]);\n const toggle = (index) => {\n checkboxRefs.value[index].toggle();\n };\n\n onBeforeUpdate(() => {\n checkboxRefs.value = [];\n });\n\n return {\n list: ['a', 'b'],\n toggle,\n checked,\n checkboxRefs,\n };\n },\n};\n
\n\u901A\u8FC7 indeterminate
\u8BBE\u7F6E\u590D\u9009\u6846\u662F\u5426\u4E3A\u4E0D\u786E\u5B9A\u72B6\u6001\u3002
<van-checkbox\n v-model="isCheckAll"\n :indeterminate="isIndeterminate"\n @change="checkAllChange"\n>\n \u5168\u9009\n</van-checkbox>\n\n<van-checkbox-group v-model="checkedResult" @change="checkedResultChange">\n <van-checkbox v-for="item in list" :key="item" :name="item">\n \u590D\u9009\u6846 {{ item }}\n </van-checkbox>\n</van-checkbox-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const list = ['a', 'b', 'c', 'd']\n\n const isCheckAll = ref(false);\n const checkedResult = ref(['a', 'b', 'd']);\n const isIndeterminate = ref(true);\n\n const checkAllChange = (val: boolean) => {\n checkedResult.value = val ? list : []\n isIndeterminate.value = false\n }\n\n const checkedResultChange = (value: string[]) => {\n const checkedCount = value.length\n isCheckAll.value = checkedCount === list.length\n isIndeterminate.value = checkedCount > 0 && checkedCount < list.length\n }\n\n return {\n list,\n isCheckAll,\n checkedResult,\n checkAllChange,\n isIndeterminate,\n checkedResultChange\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u662F\u5426\u4E3A\u9009\u4E2D\u72B6\u6001 | \nboolean | \nfalse | \n
name | \n\u6807\u8BC6\u7B26\uFF0C\u901A\u5E38\u4E3A\u4E00\u4E2A\u552F\u4E00\u7684\u5B57\u7B26\u4E32\u6216\u6570\u5B57 | \nany | \n- | \n
shape | \n\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A square | \nstring | \nround | \n
disabled | \n\u662F\u5426\u7981\u7528\u590D\u9009\u6846 | \nboolean | \nfalse | \n
label-disabled | \n\u662F\u5426\u7981\u7528\u590D\u9009\u6846\u6587\u672C\u70B9\u51FB | \nboolean | \nfalse | \n
label-position | \n\u6587\u672C\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A left | \nstring | \nright | \n
icon-size | \n\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n20px | \n
checked-color | \n\u9009\u4E2D\u72B6\u6001\u989C\u8272 | \nstring | \n#1989fa | \n
bind-group | \n\u662F\u5426\u4E0E\u590D\u9009\u6846\u7EC4\u7ED1\u5B9A | \nboolean | \ntrue | \n
indeterminate | \n\u662F\u5426\u4E3A\u4E0D\u786E\u5B9A\u72B6\u6001 | \nboolean | \nfalse | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u6240\u6709\u9009\u4E2D\u9879\u7684\u6807\u8BC6\u7B26 | \nany[] | \n- | \n
disabled | \n\u662F\u5426\u7981\u7528\u6240\u6709\u590D\u9009\u6846 | \nboolean | \nfalse | \n
max | \n\u6700\u5927\u53EF\u9009\u6570\uFF0C0 \u4E3A\u65E0\u9650\u5236 | \nnumber | string | \n0 | \n
direction | \n\u6392\u5217\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A horizontal | \nstring | \nvertical | \n
icon-size | \n\u6240\u6709\u590D\u9009\u6846\u7684\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n20px | \n
checked-color | \n\u6240\u6709\u590D\u9009\u6846\u7684\u9009\u4E2D\u72B6\u6001\u989C\u8272 | \nstring | \n#1989fa | \n
shape v4.6.3 | \n\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A square | \nstring | \nround | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6 | \nchecked: boolean | \n
click | \n\u70B9\u51FB\u590D\u9009\u6846\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6 | \nnames: any[] | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
default | \n\u81EA\u5B9A\u4E49\u6587\u672C | \n{ checked: boolean, disabled: boolean } | \n
icon | \n\u81EA\u5B9A\u4E49\u56FE\u6807 | \n{ checked: boolean, disabled: boolean } | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 CheckboxGroup \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
toggleAll | \n\u5207\u6362\u6240\u6709\u590D\u9009\u6846\uFF0C\u4F20 true \u4E3A\u9009\u4E2D\uFF0Cfalse \u4E3A\u53D6\u6D88\u9009\u4E2D\uFF0C\u4E0D\u4F20\u53C2\u4E3A\u53D6\u53CD | \noptions?: boolean | object | \n- | \n
import { ref } from 'vue';\nimport type { CheckboxGroupInstance } from 'vant';\n\nconst checkboxGroupRef = ref<CheckboxGroupInstance>();\n\n// \u5168\u90E8\u53CD\u9009\ncheckboxGroupRef?.value.toggleAll();\n// \u5168\u90E8\u9009\u4E2D\ncheckboxGroupRef?.value.toggleAll(true);\n// \u5168\u90E8\u53D6\u6D88\ncheckboxGroupRef?.value.toggleAll(false);\n\n// \u5168\u90E8\u53CD\u9009\uFF0C\u5E76\u8DF3\u8FC7\u7981\u7528\u7684\u590D\u9009\u6846\ncheckboxGroupRef?.value.toggleAll({\n skipDisabled: true,\n});\n// \u5168\u90E8\u9009\u4E2D\uFF0C\u5E76\u8DF3\u8FC7\u7981\u7528\u7684\u590D\u9009\u6846\ncheckboxGroupRef?.value.toggleAll({\n checked: true,\n skipDisabled: true,\n});\n
\n\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Checkbox \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
toggle | \n\u5207\u6362\u9009\u4E2D\u72B6\u6001\uFF0C\u4F20 true \u4E3A\u9009\u4E2D\uFF0Cfalse \u4E3A\u53D6\u6D88\u9009\u4E2D\uFF0C\u4E0D\u4F20\u53C2\u4E3A\u53D6\u53CD | \nchecked?: boolean | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n CheckboxProps,\n CheckboxShape,\n CheckboxInstance,\n CheckboxLabelPosition,\n CheckboxGroupProps,\n CheckboxGroupInstance,\n CheckboxGroupDirection,\n CheckboxGroupToggleAllOptions,\n} from 'vant';\n
\nCheckboxInstance
\u548C CheckboxGroupInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { CheckboxInstance, CheckboxGroupInstance } from 'vant';\n\nconst checkboxRef = ref<CheckboxInstance>();\nconst checkboxGroupRef = ref<CheckboxGroupInstance>();\n\ncheckboxRef.value?.toggle();\ncheckboxGroupRef.value?.toggleAll();\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-checkbox-size | \n20px | \n- | \n
--van-checkbox-border-color | \nvar(--van-gray-5) | \n- | \n
--van-checkbox-duration | \nvar(--van-duration-fast) | \n- | \n
--van-checkbox-label-margin | \nvar(--van-padding-xs) | \n- | \n
--van-checkbox-label-color | \nvar(--van-text-color) | \n- | \n
--van-checkbox-checked-icon-color | \nvar(--van-primary-color) | \n- | \n
--van-checkbox-disabled-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-checkbox-disabled-label-color | \nvar(--van-text-color-3) | \n- | \n
--van-checkbox-disabled-background | \nvar(--van-border-color) | \n- | \n
\u57FA\u4E8E\u5B57\u4F53\u7684\u56FE\u6807\u96C6\uFF0C\u53EF\u4EE5\u901A\u8FC7 Icon \u7EC4\u4EF6\u4F7F\u7528\uFF0C\u4E5F\u53EF\u4EE5\u5728\u5176\u4ED6\u7EC4\u4EF6\u4E2D\u901A\u8FC7 icon
\u5C5E\u6027\u5F15\u7528\u3002
\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Icon } from 'vant';\n\nconst app = createApp();\napp.use(Icon);\n
\n\u901A\u8FC7 name
\u5C5E\u6027\u6765\u6307\u5B9A\u9700\u8981\u4F7F\u7528\u7684\u56FE\u6807\uFF0CVant \u5185\u7F6E\u4E86\u4E00\u5957\u56FE\u6807\u5E93\uFF08\u89C1\u53F3\u4FA7\u793A\u4F8B\uFF09\uFF0C\u53EF\u4EE5\u76F4\u63A5\u4F20\u5165\u5BF9\u5E94\u7684\u540D\u79F0\u6765\u4F7F\u7528\u3002
<van-icon name="chat-o" />\n
\n\u4F60\u4E5F\u53EF\u4EE5\u76F4\u63A5\u5728 name
\u5C5E\u6027\u4E2D\u4F20\u5165\u4E00\u4E2A\u56FE\u7247 URL \u6765\u4F5C\u4E3A\u56FE\u6807\u3002
<van-icon name="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" />\n
\n\u8BBE\u7F6E dot
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\uFF1B\u8BBE\u7F6E badge
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002
<van-icon name="chat-o" dot />\n<van-icon name="chat-o" badge="9" />\n<van-icon name="chat-o" badge="99+" />\n
\n\u901A\u8FC7 color
\u5C5E\u6027\u6765\u8BBE\u7F6E\u56FE\u6807\u7684\u989C\u8272\u3002
<van-icon name="cart-o" color="#1989fa" />\n<van-icon name="fire-o" color="#ee0a24" />\n
\n\u901A\u8FC7 size
\u5C5E\u6027\u6765\u8BBE\u7F6E\u56FE\u6807\u7684\u5C3A\u5BF8\u5927\u5C0F\uFF0C\u53EF\u4EE5\u6307\u5B9A\u4EFB\u610F CSS \u5355\u4F4D\u3002
<!-- \u4E0D\u6307\u5B9A\u5355\u4F4D\uFF0C\u9ED8\u8BA4\u4F7F\u7528 px -->\n<van-icon name="chat-o" size="40" />\n<!-- \u6307\u5B9A\u4F7F\u7528 rem \u5355\u4F4D -->\n<van-icon name="chat-o" size="3rem" />\n
\n\u5982\u679C\u9700\u8981\u5728\u73B0\u6709 Icon \u7684\u57FA\u7840\u4E0A\u4F7F\u7528\u66F4\u591A\u56FE\u6807\uFF0C\u53EF\u4EE5\u5F15\u5165\u7B2C\u4E09\u65B9 iconfont \u5BF9\u5E94\u7684\u5B57\u4F53\u6587\u4EF6\u548C CSS \u6587\u4EF6\uFF0C\u4E4B\u540E\u5C31\u53EF\u4EE5\u5728 Icon \u7EC4\u4EF6\u4E2D\u76F4\u63A5\u4F7F\u7528\u3002
\n/* \u5F15\u5165\u7B2C\u4E09\u65B9\u6216\u81EA\u5B9A\u4E49\u7684\u5B57\u4F53\u56FE\u6807\u6837\u5F0F */\n@font-face {\n font-family: 'my-icon';\n src: url('./my-icon.ttf') format('truetype');\n}\n\n.my-icon {\n font-family: 'my-icon';\n}\n\n.my-icon-extra::before {\n content: '\\e626';\n}\n
\n<!-- \u901A\u8FC7 class-prefix \u6307\u5B9A\u7C7B\u540D\u4E3A my-icon -->\n<van-icon class-prefix="my-icon" name="extra" />\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
name | \n\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5 | \nstring | \n- | \n
dot | \n\u662F\u5426\u663E\u793A\u56FE\u6807\u53F3\u4E0A\u89D2\u5C0F\u7EA2\u70B9 | \nboolean | \nfalse | \n
badge | \n\u56FE\u6807\u53F3\u4E0A\u89D2\u5FBD\u6807\u7684\u5185\u5BB9 | \nnumber | string | \n- | \n
badge-props | \n\u81EA\u5B9A\u4E49\u5FBD\u6807\u7684\u5C5E\u6027\uFF0C\u4F20\u5165\u7684\u5BF9\u8C61\u4F1A\u88AB\u900F\u4F20\u7ED9 Badge \u7EC4\u4EF6\u7684 props | \nBadgeProps | \n- | \n
color | \n\u56FE\u6807\u989C\u8272 | \nstring | \ninherit | \n
size | \n\u56FE\u6807\u5927\u5C0F\uFF0C\u5982 20px 2em \uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \ninherit | \n
class-prefix | \n\u7C7B\u540D\u524D\u7F00\uFF0C\u7528\u4E8E\u4F7F\u7528\u81EA\u5B9A\u4E49\u56FE\u6807 | \nstring | \nvan-icon | \n
tag | \n\u6839\u8282\u70B9\u5BF9\u5E94\u7684 HTML \u6807\u7B7E\u540D | \nstring | \ni | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u56FE\u6807\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { IconProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-icon-font-family | \n\'van-icon\' | \n- | \n
\u57FA\u4E8E\u5B57\u4F53\u7684\u56FE\u6807\u96C6\uFF0C\u53EF\u4EE5\u901A\u8FC7 Icon \u7EC4\u4EF6\u4F7F\u7528\uFF0C\u4E5F\u53EF\u4EE5\u5728\u5176\u4ED6\u7EC4\u4EF6\u4E2D\u901A\u8FC7 icon
\u5C5E\u6027\u5F15\u7528\u3002
\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Icon } from 'vant';\n\nconst app = createApp();\napp.use(Icon);\n
\n\u901A\u8FC7 name
\u5C5E\u6027\u6765\u6307\u5B9A\u9700\u8981\u4F7F\u7528\u7684\u56FE\u6807\uFF0CVant \u5185\u7F6E\u4E86\u4E00\u5957\u56FE\u6807\u5E93\uFF08\u89C1\u53F3\u4FA7\u793A\u4F8B\uFF09\uFF0C\u53EF\u4EE5\u76F4\u63A5\u4F20\u5165\u5BF9\u5E94\u7684\u540D\u79F0\u6765\u4F7F\u7528\u3002
<van-icon name="chat-o" />\n
\n\u4F60\u4E5F\u53EF\u4EE5\u76F4\u63A5\u5728 name
\u5C5E\u6027\u4E2D\u4F20\u5165\u4E00\u4E2A\u56FE\u7247 URL \u6765\u4F5C\u4E3A\u56FE\u6807\u3002
<van-icon name="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" />\n
\n\u8BBE\u7F6E dot
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\uFF1B\u8BBE\u7F6E badge
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002
<van-icon name="chat-o" dot />\n<van-icon name="chat-o" badge="9" />\n<van-icon name="chat-o" badge="99+" />\n
\n\u901A\u8FC7 color
\u5C5E\u6027\u6765\u8BBE\u7F6E\u56FE\u6807\u7684\u989C\u8272\u3002
<van-icon name="cart-o" color="#1989fa" />\n<van-icon name="fire-o" color="#ee0a24" />\n
\n\u901A\u8FC7 size
\u5C5E\u6027\u6765\u8BBE\u7F6E\u56FE\u6807\u7684\u5C3A\u5BF8\u5927\u5C0F\uFF0C\u53EF\u4EE5\u6307\u5B9A\u4EFB\u610F CSS \u5355\u4F4D\u3002
<!-- \u4E0D\u6307\u5B9A\u5355\u4F4D\uFF0C\u9ED8\u8BA4\u4F7F\u7528 px -->\n<van-icon name="chat-o" size="40" />\n<!-- \u6307\u5B9A\u4F7F\u7528 rem \u5355\u4F4D -->\n<van-icon name="chat-o" size="3rem" />\n
\n\u5982\u679C\u9700\u8981\u5728\u73B0\u6709 Icon \u7684\u57FA\u7840\u4E0A\u4F7F\u7528\u66F4\u591A\u56FE\u6807\uFF0C\u53EF\u4EE5\u5F15\u5165\u7B2C\u4E09\u65B9 iconfont \u5BF9\u5E94\u7684\u5B57\u4F53\u6587\u4EF6\u548C CSS \u6587\u4EF6\uFF0C\u4E4B\u540E\u5C31\u53EF\u4EE5\u5728 Icon \u7EC4\u4EF6\u4E2D\u76F4\u63A5\u4F7F\u7528\u3002
\n/* \u5F15\u5165\u7B2C\u4E09\u65B9\u6216\u81EA\u5B9A\u4E49\u7684\u5B57\u4F53\u56FE\u6807\u6837\u5F0F */\n@font-face {\n font-family: 'my-icon';\n src: url('./my-icon.ttf') format('truetype');\n}\n\n.my-icon {\n font-family: 'my-icon';\n}\n\n.my-icon-extra::before {\n content: '\\e626';\n}\n
\n<!-- \u901A\u8FC7 class-prefix \u6307\u5B9A\u7C7B\u540D\u4E3A my-icon -->\n<van-icon class-prefix="my-icon" name="extra" />\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
name | \n\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5 | \nstring | \n- | \n
dot | \n\u662F\u5426\u663E\u793A\u56FE\u6807\u53F3\u4E0A\u89D2\u5C0F\u7EA2\u70B9 | \nboolean | \nfalse | \n
badge | \n\u56FE\u6807\u53F3\u4E0A\u89D2\u5FBD\u6807\u7684\u5185\u5BB9 | \nnumber | string | \n- | \n
badge-props | \n\u81EA\u5B9A\u4E49\u5FBD\u6807\u7684\u5C5E\u6027\uFF0C\u4F20\u5165\u7684\u5BF9\u8C61\u4F1A\u88AB\u900F\u4F20\u7ED9 Badge \u7EC4\u4EF6\u7684 props | \nBadgeProps | \n- | \n
color | \n\u56FE\u6807\u989C\u8272 | \nstring | \ninherit | \n
size | \n\u56FE\u6807\u5927\u5C0F\uFF0C\u5982 20px 2em \uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \ninherit | \n
class-prefix | \n\u7C7B\u540D\u524D\u7F00\uFF0C\u7528\u4E8E\u4F7F\u7528\u81EA\u5B9A\u4E49\u56FE\u6807 | \nstring | \nvan-icon | \n
tag | \n\u6839\u8282\u70B9\u5BF9\u5E94\u7684 HTML \u6807\u7B7E\u540D | \nstring | \ni | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u56FE\u6807\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { IconProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-icon-font-family | \n\'van-icon\' | \n- | \n
Please refer to Skeleton docs
\n'},null,8,r))}}}]); \ No newline at end of file diff --git a/vant/static/js/async/5711.b0f5e29d.js b/vant/static/js/async/5711.b0f5e29d.js new file mode 100644 index 00000000..64086d73 --- /dev/null +++ b/vant/static/js/async/5711.b0f5e29d.js @@ -0,0 +1,2 @@ +/*! For license information please see 5711.b0f5e29d.js.LICENSE.txt */ +(self.webpackChunk=self.webpackChunk||[]).push([["5711"],{686:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return a}});var l=t("69298");let r=["innerHTML"];var a={setup:()=>({html:""}),render:()=>((0,l.openBlock)(),(0,l.createElementBlock)("div",{class:"van-doc-markdown-body",innerHTML:'Please refer to Skeleton docs
\n'},null,8,r))}}}]); \ No newline at end of file diff --git a/vant/static/js/async/5711.3744cb46.js.LICENSE.txt b/vant/static/js/async/5711.b0f5e29d.js.LICENSE.txt similarity index 100% rename from vant/static/js/async/5711.3744cb46.js.LICENSE.txt rename to vant/static/js/async/5711.b0f5e29d.js.LICENSE.txt diff --git a/vant/static/js/async/5724.d069ac63.js b/vant/static/js/async/5724.d069ac63.js deleted file mode 100644 index a46ddc9b..00000000 --- a/vant/static/js/async/5724.d069ac63.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 5724.d069ac63.js.LICENSE.txt */ -(self.webpackChunk=self.webpackChunk||[]).push([["5724"],{49214:function(e,t,a){"use strict";a.r(t),a.d(t,{default:function(){return l}});var o=a("78126");a.es(o,t),a("23525");var l=o.default},78126:function(e,t,a){"use strict";a.r(t),a.d(t,{default:function(){return o.default}});var o=a("39866");a.es(o,t)},39866:function(e,t,a){"use strict";a.r(t),a.d(t,{default:function(){return u}});var o=a("36840"),l=a("96399"),n=a("70656"),r=a("82626"),u=(0,o.defineComponent)({__name:"index",setup(e){var t=(0,n.useTranslate)({"zh-CN":{halfStar:"\u534A\u661F",disabled:"\u7981\u7528\u72B6\u6001",customIcon:"\u81EA\u5B9A\u4E49\u56FE\u6807",customStyle:"\u81EA\u5B9A\u4E49\u6837\u5F0F",customCount:"\u81EA\u5B9A\u4E49\u6570\u91CF",clearable:"\u53EF\u6E05\u7A7A",readonly:"\u53EA\u8BFB\u72B6\u6001",readonlyHalfStar:"\u53EA\u8BFB\u72B6\u6001\u5C0F\u6570\u663E\u793A",changeEvent:"\u76D1\u542C change \u4E8B\u4EF6",toastContent:e=>"\u5F53\u524D\u503C\uFF1A".concat(e)},"en-US":{halfStar:"Half Star",disabled:"Disabled",customIcon:"Custom Icon",customStyle:"Custom Style",customCount:"Custom Count",clearable:"Clearable",readonly:"Readonly",readonlyHalfStar:"Readonly Half Star",changeEvent:"Change Event",toastContent:e=>"current value\uFF1A".concat(e)}}),a=(0,o.ref)(3),u=(0,o.ref)(3),i=(0,o.ref)(3),s=(0,o.ref)(2.5),c=(0,o.ref)(4),d=(0,o.ref)(3),f=(0,o.ref)(3.3),v=(0,o.ref)(2),m=(0,o.ref)(3),p=e=>(0,r.showToast)(t("toastContent",e));return(e,n)=>{var r=(0,o.resolveComponent)("demo-block");return(0,o.openBlock)(),(0,o.createElementBlock)(o.Fragment,null,[(0,o.createVNode)(r,{title:(0,o.unref)(t)("basicUsage")},{default:(0,o.withCtx)(()=>[(0,o.createVNode)((0,o.unref)(l.default),{modelValue:a.value,"onUpdate:modelValue":n[0]||(n[0]=e=>a.value=e)},null,8,["modelValue"])]),_:1},8,["title"]),(0,o.createVNode)(r,{title:(0,o.unref)(t)("customIcon")},{default:(0,o.withCtx)(()=>[(0,o.createVNode)((0,o.unref)(l.default),{modelValue:u.value,"onUpdate:modelValue":n[1]||(n[1]=e=>u.value=e),icon:"like","void-icon":"like-o"},null,8,["modelValue"])]),_:1},8,["title"]),(0,o.createVNode)(r,{title:(0,o.unref)(t)("customStyle")},{default:(0,o.withCtx)(()=>[(0,o.createVNode)((0,o.unref)(l.default),{modelValue:i.value,"onUpdate:modelValue":n[2]||(n[2]=e=>i.value=e),size:25,color:"#ffd21e","void-icon":"star","void-color":"#eee"},null,8,["modelValue"])]),_:1},8,["title"]),(0,o.createVNode)(r,{title:(0,o.unref)(t)("halfStar")},{default:(0,o.withCtx)(()=>[(0,o.createVNode)((0,o.unref)(l.default),{modelValue:s.value,"onUpdate:modelValue":n[3]||(n[3]=e=>s.value=e),"allow-half":""},null,8,["modelValue"])]),_:1},8,["title"]),(0,o.createVNode)(r,{title:(0,o.unref)(t)("customCount")},{default:(0,o.withCtx)(()=>[(0,o.createVNode)((0,o.unref)(l.default),{modelValue:c.value,"onUpdate:modelValue":n[4]||(n[4]=e=>c.value=e),count:6},null,8,["modelValue"])]),_:1},8,["title"]),(0,o.createVNode)(r,{title:(0,o.unref)(t)("clearable")},{default:(0,o.withCtx)(()=>[(0,o.createVNode)((0,o.unref)(l.default),{modelValue:m.value,"onUpdate:modelValue":n[5]||(n[5]=e=>m.value=e),clearable:""},null,8,["modelValue"])]),_:1},8,["title"]),(0,o.createVNode)(r,{title:(0,o.unref)(t)("disabled")},{default:(0,o.withCtx)(()=>[(0,o.createVNode)((0,o.unref)(l.default),{modelValue:d.value,"onUpdate:modelValue":n[6]||(n[6]=e=>d.value=e),disabled:""},null,8,["modelValue"])]),_:1},8,["title"]),(0,o.createVNode)(r,{title:(0,o.unref)(t)("readonly")},{default:(0,o.withCtx)(()=>[(0,o.createVNode)((0,o.unref)(l.default),{modelValue:d.value,"onUpdate:modelValue":n[7]||(n[7]=e=>d.value=e),readonly:""},null,8,["modelValue"])]),_:1},8,["title"]),(0,o.createVNode)(r,{title:(0,o.unref)(t)("readonlyHalfStar")},{default:(0,o.withCtx)(()=>[(0,o.createVNode)((0,o.unref)(l.default),{modelValue:f.value,"onUpdate:modelValue":n[8]||(n[8]=e=>f.value=e),readonly:"","allow-half":""},null,8,["modelValue"])]),_:1},8,["title"]),(0,o.createVNode)(r,{title:(0,o.unref)(t)("changeEvent")},{default:(0,o.withCtx)(()=>[(0,o.createVNode)((0,o.unref)(l.default),{modelValue:v.value,"onUpdate:modelValue":n[9]||(n[9]=e=>v.value=e),onChange:p},null,8,["modelValue"])]),_:1},8,["title"])],64)}}})},14677:function(e,t,a){"use strict";a.r(t),a.d(t,{useRefs:function(){return l}});var o=a("36840");function l(){var e=(0,o.ref)([]),t=[];return(0,o.onBeforeUpdate)(()=>{e.value=[]}),[e,a=>(!t[a]&&(t[a]=t=>{e.value[a]=t}),t[a])]}},4341:function(e,t,a){"use strict";a.r(t),a.d(t,{Loading:function(){return n},default:function(){return r}});var o=a("59633"),l=a("96134"),n=(0,o.withInstall)(l.default),r=n},96399:function(e,t,a){"use strict";a.r(t),a.d(t,{default:function(){return n}});var o=a("59633"),l=a("14511"),n=(0,o.withInstall)(l.default)},82626:function(e,t,a){"use strict";a.r(t),a.d(t,{showToast:function(){return n.showToast},closeToast:function(){return n.closeToast},showFailToast:function(){return n.showFailToast},showLoadingToast:function(){return n.showLoadingToast},showSuccessToast:function(){return n.showSuccessToast},default:function(){return r}});var o=a("59633"),l=a("6773"),n=a("19049"),r=(0,o.withInstall)(l.default)},35050:function(e,t,a){"use strict";a.r(t),a.d(t,{lockClick:function(){return l}});var o=0;function l(e){e?(!o&&document.body.classList.add("van-toast--unclickable"),o++):o&&!--o&&document.body.classList.remove("van-toast--unclickable")}},7133:function(e,t,a){"use strict";a.r(t),a.d(t,{usePopupState:function(){return r},mountComponent:function(){return u}});var o=a("36840"),l=a("8933"),n=a("29067");function r(){var e=(0,o.reactive)({show:!1}),t=t=>{e.show=t},a=a=>{(0,l.extend)(e,a,{transitionAppear:!0}),t(!0)},r=()=>t(!1);return(0,n.useExpose)({open:a,close:r,toggle:t}),{open:a,close:r,state:e,toggle:t}}function u(e){var t=(0,o.createApp)(e),a=document.createElement("div");return document.body.appendChild(a),{instance:t.mount(a),unmount(){t.unmount(),document.body.removeChild(a)}}}},96134:function(e,t,a){"use strict";a.r(t),a.d(t,{default:function(){return c}}),a("74366"),a("52400"),a("6868"),a("4331");var o=a("36840"),l=a("59633"),[n,r]=(0,l.createNamespace)("loading"),u=Array(12).fill(null).map((e,t)=>(0,o.createVNode)("i",{class:r("line",String(t+1))},null)),i=(0,o.createVNode)("svg",{class:r("circular"),viewBox:"25 25 50 50"},[(0,o.createVNode)("circle",{cx:"50",cy:"50",r:"20",fill:"none"},null)]),s={size:l.numericProp,type:(0,l.makeStringProp)("circular"),color:String,vertical:Boolean,textSize:l.numericProp,textColor:String},c=(0,o.defineComponent)({name:n,props:s,setup(e,t){var{slots:a}=t,n=(0,o.computed)(()=>(0,l.extend)({color:e.color},(0,l.getSizeStyle)(e.size))),s=()=>{var t="spinner"===e.type?u:i;return(0,o.createVNode)("span",{class:r("spinner",e.type),style:n.value},[a.icon?a.icon():t])},c=()=>{if(a.default){var t;return(0,o.createVNode)("span",{class:r("text"),style:{fontSize:(0,l.addUnit)(e.textSize),color:null!==(t=e.textColor)&&void 0!==t?t:e.color}},[a.default()])}};return()=>{var{type:t,vertical:a}=e;return(0,o.createVNode)("div",{class:r([t,{vertical:a}]),"aria-live":"polite","aria-busy":!0},[s(),c()])}}})},14511:function(e,t,a){"use strict";a.r(t),a.d(t,{default:function(){return f}}),a("74366"),a("52400"),a("6868"),a("4331"),a("76959"),a("11057"),a("64667"),a("14078");var o=a("36840"),l=a("59633"),n=a("22300"),r=a("14677"),u=a("10976"),i=a("57739"),[s,c]=(0,l.createNamespace)("rate"),d={size:l.numericProp,icon:(0,l.makeStringProp)("star"),color:String,count:(0,l.makeNumericProp)(5),gutter:l.numericProp,clearable:Boolean,readonly:Boolean,disabled:Boolean,voidIcon:(0,l.makeStringProp)("star-o"),allowHalf:Boolean,voidColor:String,touchable:l.truthProp,iconPrefix:String,modelValue:(0,l.makeNumberProp)(0),disabledColor:String},f=(0,o.defineComponent)({name:s,props:d,emits:["change","update:modelValue"],setup(e,t){var a,s,{emit:d}=t,f=(0,u.useTouch)(),[v,m]=(0,r.useRefs)(),p=(0,o.ref)(),h=(0,o.computed)(()=>e.readonly||e.disabled),V=(0,o.computed)(()=>h.value||!e.touchable),g=(0,o.computed)(()=>Array(+e.count).fill("").map((t,a)=>{var o,l,n,r;return o=e.modelValue,l=a+1,n=e.allowHalf,r=e.readonly,o>=l?{status:"full",value:1}:o+.5>=l&&n&&!r?{status:"half",value:.5}:o+1>=l&&n&&r?{status:"half",value:Math.round((o-l+1)*1e10)/1e10}:{status:"void",value:0}})),y=Number.MAX_SAFE_INTEGER,C=Number.MIN_SAFE_INTEGER,w=()=>{s=(0,n.useRect)(p);var t=v.value.map(n.useRect);a=[],t.forEach((t,o)=>{y=Math.min(t.top,y),C=Math.max(t.top,C),e.allowHalf?a.push({score:o+.5,left:t.left,top:t.top,height:t.height},{score:o+1,left:t.left+t.width/2,top:t.top,height:t.height}):a.push({score:o+1,left:t.left,top:t.top,height:t.height})})},N=(t,o)=>{for(var l=a.length-1;l>0;l--)if(o>=s.top&&o<=s.bottom){if(t>a[l].left&&o>=a[l].top&&o<=a[l].top+a[l].height)return a[l].score}else{var n=oPlease refer to Skeleton docs
\n'},null,8,l))}}}]); \ No newline at end of file diff --git a/vant/static/js/async/5725.818b9489.js b/vant/static/js/async/5725.818b9489.js new file mode 100644 index 00000000..a0142a83 --- /dev/null +++ b/vant/static/js/async/5725.818b9489.js @@ -0,0 +1,2 @@ +/*! For license information please see 5725.818b9489.js.LICENSE.txt */ +(self.webpackChunk=self.webpackChunk||[]).push([["5725"],{4089:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return a}});var r=t("69298");let l=["innerHTML"];var a={setup:()=>({html:""}),render:()=>((0,r.openBlock)(),(0,r.createElementBlock)("div",{class:"van-doc-markdown-body",innerHTML:'Please refer to Skeleton docs
\n'},null,8,l))}}}]); \ No newline at end of file diff --git a/vant/static/js/async/5725.03ddf59a.js.LICENSE.txt b/vant/static/js/async/5725.818b9489.js.LICENSE.txt similarity index 100% rename from vant/static/js/async/5725.03ddf59a.js.LICENSE.txt rename to vant/static/js/async/5725.818b9489.js.LICENSE.txt diff --git a/vant/static/js/async/5734.1feb0525.js b/vant/static/js/async/5734.1feb0525.js new file mode 100644 index 00000000..c4c6cf4e --- /dev/null +++ b/vant/static/js/async/5734.1feb0525.js @@ -0,0 +1,2 @@ +/*! For license information please see 5734.1feb0525.js.LICENSE.txt */ +(self.webpackChunk=self.webpackChunk||[]).push([["5734"],{45382:function(t,a,n){"use strict";n.r(a),n.d(a,{default:function(){return l}});var e=n("69298");let i=["innerHTML"];var l={setup:()=>({html:""}),render:()=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"van-doc-markdown-body",innerHTML:'The current document is the changelog of Vant 4, other versions:
\n\nVant follows Semantic Versioning 2.0.0.
\nRelease Schedule
\n2024-01-03
2023-12-17
2023-11-19
2023-10-29
2023-10-15
2023-10-06
2023-09-24
user
iconnotes
iconnewspaper
iconlist-switch
iconlist-switching
iconrecords
iconcontact
icondiscount
iconcompleted
icondescription
iconcash-back-record
iconrecords
icon to records-o
contact
icon to contact-o
discount
icon to discount-o
completed
icon to completed-o
description
icon to description-o
cash-back-record
icon to cash-back-record-o
2023-09-10
2023-09-04
2023-08-20
2023-08-16
ToastWrapperInstance
export by @long-woo in #121662023-08-06
2023-07-23
Feature
\nBug Fixes
\n\n2023-07-09
Feature
\nBug Fixes
\n\n2023-07-02
Feature
\nBug Fixes
\n\n2023-06-24
New Component
\nFeature
\nBug Fixes
\nfor
attr to label when using input slot #119662023-06-11
New Component
\n\nFeature
\nBug Fixes
\n2023-05-21
New Component
\n\nFeature
\nBug Fixes
\n2023-05-14
Feature
\nBug Fixes
\n\n2023-05-03
New Component
\nFeature
\nBug Fixes
\n\n2023-04-30
Feature
\nBug Fixes
\n2023-04-16
New Component
\nFeature
\n\nBug Fixes
\n2023-03-05
New Component
\nFeature
\nBug Fixes
\n\n2023-02-20
Feature
\nBug Fixes
\n*-start/end
placements #115842023-01-26
Feature
\nBug Fixes
\n\n2023-01-15
Feature
\nBug Fixes
\n2022-12-26
Bug Fixes
\n2022-12-01
Feature
\nBug Fixes
\n2022-11-26
Feature
\nBug Fixes
\n2022-11-20
Feature
\nBug Fixes
\n\n2022-11-13
New Component
\nFeature
\n\nBug Fixes
\n2022-10-23
Feature
\nBug Fixes
\n\n2022-10-07
Feature
\nBug Fixes
\n\n2022-09-25
Feature
\nBug Fixes
\n\n2022-09-12
Feature
\nTypes
\n2022-09-11
Breaking Changes
\nBug Fixes
\n\n2022-09-10
Feature
\nBug Fixes
\n\n2022-08-24
Breaking Changes
\n// Vant 3\n.van-popup--center {\n left: 50%;\n transform: translate3d(-50%, -50%, 0);\n}\n\n// Vant 4\n.van-popup--center {\n left: 0;\n right: 0;\n width: fit-content;\n max-width: calc(100vw - var(--van-padding-md) * 2);\n margin: 0 auto;\n transform: translateY(-50%);\n}\n
\nNew Component
\nFeature
\nFeature
\nBug Fixes
\n2022-07-16
Breaking Changes
\nFeature
\nBug Fixes
\n2022-05-02
Feature
\nBug Fixes
\n\n2022-04-16
Bug Fixes
\n\n2022-03-19
Feature
\n\nBug Fixes
\nThe current document is the changelog of Vant 4, other versions:
\n\nVant follows Semantic Versioning 2.0.0.
\nRelease Schedule
\n2024-01-03
2023-12-17
2023-11-19
2023-10-29
2023-10-15
2023-10-06
2023-09-24
user
iconnotes
iconnewspaper
iconlist-switch
iconlist-switching
iconrecords
iconcontact
icondiscount
iconcompleted
icondescription
iconcash-back-record
iconrecords
icon to records-o
contact
icon to contact-o
discount
icon to discount-o
completed
icon to completed-o
description
icon to description-o
cash-back-record
icon to cash-back-record-o
2023-09-10
2023-09-04
2023-08-20
2023-08-16
ToastWrapperInstance
export by @long-woo in #121662023-08-06
2023-07-23
Feature
\nBug Fixes
\n\n2023-07-09
Feature
\nBug Fixes
\n\n2023-07-02
Feature
\nBug Fixes
\n\n2023-06-24
New Component
\nFeature
\nBug Fixes
\nfor
attr to label when using input slot #119662023-06-11
New Component
\n\nFeature
\nBug Fixes
\n2023-05-21
New Component
\n\nFeature
\nBug Fixes
\n2023-05-14
Feature
\nBug Fixes
\n\n2023-05-03
New Component
\nFeature
\nBug Fixes
\n\n2023-04-30
Feature
\nBug Fixes
\n2023-04-16
New Component
\nFeature
\n\nBug Fixes
\n2023-03-05
New Component
\nFeature
\nBug Fixes
\n\n2023-02-20
Feature
\nBug Fixes
\n*-start/end
placements #115842023-01-26
Feature
\nBug Fixes
\n\n2023-01-15
Feature
\nBug Fixes
\n2022-12-26
Bug Fixes
\n2022-12-01
Feature
\nBug Fixes
\n2022-11-26
Feature
\nBug Fixes
\n2022-11-20
Feature
\nBug Fixes
\n\n2022-11-13
New Component
\nFeature
\n\nBug Fixes
\n2022-10-23
Feature
\nBug Fixes
\n\n2022-10-07
Feature
\nBug Fixes
\n\n2022-09-25
Feature
\nBug Fixes
\n\n2022-09-12
Feature
\nTypes
\n2022-09-11
Breaking Changes
\nBug Fixes
\n\n2022-09-10
Feature
\nBug Fixes
\n\n2022-08-24
Breaking Changes
\n// Vant 3\n.van-popup--center {\n left: 50%;\n transform: translate3d(-50%, -50%, 0);\n}\n\n// Vant 4\n.van-popup--center {\n left: 0;\n right: 0;\n width: fit-content;\n max-width: calc(100vw - var(--van-padding-md) * 2);\n margin: 0 auto;\n transform: translateY(-50%);\n}\n
\nNew Component
\nFeature
\nFeature
\nBug Fixes
\n2022-07-16
Breaking Changes
\nFeature
\nBug Fixes
\n2022-05-02
Feature
\nBug Fixes
\n\n2022-04-16
Bug Fixes
\n\n2022-03-19
Feature
\n\nBug Fixes
\n\u5782\u76F4\u5C55\u793A\u7684\u5BFC\u822A\u680F\uFF0C\u7528\u4E8E\u5728\u4E0D\u540C\u7684\u5185\u5BB9\u533A\u57DF\u4E4B\u95F4\u8FDB\u884C\u5207\u6362\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Sidebar, SidebarItem } from 'vant';\n\nconst app = createApp();\napp.use(Sidebar);\napp.use(SidebarItem);\n
\n\u901A\u8FC7 v-model
\u7ED1\u5B9A\u5F53\u524D\u9009\u4E2D\u9879\u7684\u7D22\u5F15\u3002
<van-sidebar v-model="active">\n <van-sidebar-item title="\u6807\u7B7E\u540D\u79F0" />\n <van-sidebar-item title="\u6807\u7B7E\u540D\u79F0" />\n <van-sidebar-item title="\u6807\u7B7E\u540D\u79F0" />\n</van-sidebar>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref(0);\n return { active };\n },\n};\n
\n\u8BBE\u7F6E dot
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\uFF1B\u8BBE\u7F6E badge
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002
<van-sidebar v-model="active">\n <van-sidebar-item title="\u6807\u7B7E\u540D\u79F0" dot />\n <van-sidebar-item title="\u6807\u7B7E\u540D\u79F0" badge="5" />\n <van-sidebar-item title="\u6807\u7B7E\u540D\u79F0" />\n</van-sidebar>\n
\n\u901A\u8FC7 disabled
\u5C5E\u6027\u7981\u7528\u9009\u9879\u3002
<van-sidebar v-model="active">\n <van-sidebar-item title="\u6807\u7B7E\u540D\u79F0" />\n <van-sidebar-item title="\u6807\u7B7E\u540D\u79F0" disabled />\n <van-sidebar-item title="\u6807\u7B7E\u540D\u79F0" />\n</van-sidebar>\n
\n\u8BBE\u7F6E change
\u65B9\u6CD5\u6765\u76D1\u542C\u5207\u6362\u5BFC\u822A\u9879\u65F6\u7684\u4E8B\u4EF6\u3002
<van-sidebar v-model="active" @change="onChange">\n <van-sidebar-item title="\u6807\u7B7E\u540D 1" />\n <van-sidebar-item title="\u6807\u7B7E\u540D 2" />\n <van-sidebar-item title="\u6807\u7B7E\u540D 3" />\n</van-sidebar>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const active = ref(0);\n const onChange = (index) => showToast(`\u6807\u7B7E\u540D ${index + 1}`);\n return {\n active,\n onChange,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u5BFC\u822A\u9879\u7684\u7D22\u5F15 | \nnumber | string | \n0 | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u5207\u6362\u5BFC\u822A\u9879\u65F6\u89E6\u53D1 | \nindex: number | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
title | \n\u5185\u5BB9 | \nstring | \n\'\' | \n
dot | \n\u662F\u5426\u663E\u793A\u53F3\u4E0A\u89D2\u5C0F\u7EA2\u70B9 | \nboolean | \nfalse | \n
badge | \n\u56FE\u6807\u53F3\u4E0A\u89D2\u5FBD\u6807\u7684\u5185\u5BB9 | \nnumber | string | \n- | \n
badge-props | \n\u81EA\u5B9A\u4E49\u5FBD\u6807\u7684\u5C5E\u6027\uFF0C\u4F20\u5165\u7684\u5BF9\u8C61\u4F1A\u88AB\u900F\u4F20\u7ED9 Badge \u7EC4\u4EF6\u7684 props | \nBadgeProps | \n- | \n
disabled | \n\u662F\u5426\u7981\u7528\u8BE5\u9879 | \nboolean | \nfalse | \n
url | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740 | \nstring | \n- | \n
to | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u76EE\u6807\u8DEF\u7531\u5BF9\u8C61\uFF0C\u7B49\u540C\u4E8E Vue Router \u7684 to \u5C5E\u6027 | \nstring | object | \n- | \n
replace | \n\u662F\u5426\u5728\u8DF3\u8F6C\u65F6\u66FF\u6362\u5F53\u524D\u9875\u9762\u5386\u53F2 | \nboolean | \nfalse | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u65F6\u89E6\u53D1 | \nindex: number | \n
Name | \nDescription | \n
---|---|
title | \n\u81EA\u5B9A\u4E49\u6807\u9898 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { SidebarProps, SidebarItemProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-sidebar-width | \n80px | \n- | \n
--van-sidebar-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-sidebar-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-sidebar-text-color | \nvar(--van-text-color) | \n- | \n
--van-sidebar-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-sidebar-padding | \n20px var(--van-padding-sm) | \n- | \n
--van-sidebar-active-color | \nvar(--van-active-color) | \n- | \n
--van-sidebar-background | \nvar(--van-background) | \n- | \n
--van-sidebar-selected-font-weight | \nvar(--van-font-bold) | \n- | \n
--van-sidebar-selected-text-color | \nvar(--van-text-color) | \n- | \n
--van-sidebar-selected-border-width | \n4px | \n- | \n
--van-sidebar-selected-border-height | \n16px | \n- | \n
--van-sidebar-selected-border-color | \nvar(--van-primary-color) | \n- | \n
--van-sidebar-selected-background | \nvar(--van-background-2) | \n- | \n
\u5782\u76F4\u5C55\u793A\u7684\u5BFC\u822A\u680F\uFF0C\u7528\u4E8E\u5728\u4E0D\u540C\u7684\u5185\u5BB9\u533A\u57DF\u4E4B\u95F4\u8FDB\u884C\u5207\u6362\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Sidebar, SidebarItem } from 'vant';\n\nconst app = createApp();\napp.use(Sidebar);\napp.use(SidebarItem);\n
\n\u901A\u8FC7 v-model
\u7ED1\u5B9A\u5F53\u524D\u9009\u4E2D\u9879\u7684\u7D22\u5F15\u3002
<van-sidebar v-model="active">\n <van-sidebar-item title="\u6807\u7B7E\u540D\u79F0" />\n <van-sidebar-item title="\u6807\u7B7E\u540D\u79F0" />\n <van-sidebar-item title="\u6807\u7B7E\u540D\u79F0" />\n</van-sidebar>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref(0);\n return { active };\n },\n};\n
\n\u8BBE\u7F6E dot
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\uFF1B\u8BBE\u7F6E badge
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002
<van-sidebar v-model="active">\n <van-sidebar-item title="\u6807\u7B7E\u540D\u79F0" dot />\n <van-sidebar-item title="\u6807\u7B7E\u540D\u79F0" badge="5" />\n <van-sidebar-item title="\u6807\u7B7E\u540D\u79F0" />\n</van-sidebar>\n
\n\u901A\u8FC7 disabled
\u5C5E\u6027\u7981\u7528\u9009\u9879\u3002
<van-sidebar v-model="active">\n <van-sidebar-item title="\u6807\u7B7E\u540D\u79F0" />\n <van-sidebar-item title="\u6807\u7B7E\u540D\u79F0" disabled />\n <van-sidebar-item title="\u6807\u7B7E\u540D\u79F0" />\n</van-sidebar>\n
\n\u8BBE\u7F6E change
\u65B9\u6CD5\u6765\u76D1\u542C\u5207\u6362\u5BFC\u822A\u9879\u65F6\u7684\u4E8B\u4EF6\u3002
<van-sidebar v-model="active" @change="onChange">\n <van-sidebar-item title="\u6807\u7B7E\u540D 1" />\n <van-sidebar-item title="\u6807\u7B7E\u540D 2" />\n <van-sidebar-item title="\u6807\u7B7E\u540D 3" />\n</van-sidebar>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const active = ref(0);\n const onChange = (index) => showToast(`\u6807\u7B7E\u540D ${index + 1}`);\n return {\n active,\n onChange,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u5BFC\u822A\u9879\u7684\u7D22\u5F15 | \nnumber | string | \n0 | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u5207\u6362\u5BFC\u822A\u9879\u65F6\u89E6\u53D1 | \nindex: number | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
title | \n\u5185\u5BB9 | \nstring | \n\'\' | \n
dot | \n\u662F\u5426\u663E\u793A\u53F3\u4E0A\u89D2\u5C0F\u7EA2\u70B9 | \nboolean | \nfalse | \n
badge | \n\u56FE\u6807\u53F3\u4E0A\u89D2\u5FBD\u6807\u7684\u5185\u5BB9 | \nnumber | string | \n- | \n
badge-props | \n\u81EA\u5B9A\u4E49\u5FBD\u6807\u7684\u5C5E\u6027\uFF0C\u4F20\u5165\u7684\u5BF9\u8C61\u4F1A\u88AB\u900F\u4F20\u7ED9 Badge \u7EC4\u4EF6\u7684 props | \nBadgeProps | \n- | \n
disabled | \n\u662F\u5426\u7981\u7528\u8BE5\u9879 | \nboolean | \nfalse | \n
url | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740 | \nstring | \n- | \n
to | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u76EE\u6807\u8DEF\u7531\u5BF9\u8C61\uFF0C\u7B49\u540C\u4E8E Vue Router \u7684 to \u5C5E\u6027 | \nstring | object | \n- | \n
replace | \n\u662F\u5426\u5728\u8DF3\u8F6C\u65F6\u66FF\u6362\u5F53\u524D\u9875\u9762\u5386\u53F2 | \nboolean | \nfalse | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u65F6\u89E6\u53D1 | \nindex: number | \n
Name | \nDescription | \n
---|---|
title | \n\u81EA\u5B9A\u4E49\u6807\u9898 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { SidebarProps, SidebarItemProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-sidebar-width | \n80px | \n- | \n
--van-sidebar-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-sidebar-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-sidebar-text-color | \nvar(--van-text-color) | \n- | \n
--van-sidebar-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-sidebar-padding | \n20px var(--van-padding-sm) | \n- | \n
--van-sidebar-active-color | \nvar(--van-active-color) | \n- | \n
--van-sidebar-background | \nvar(--van-background) | \n- | \n
--van-sidebar-selected-font-weight | \nvar(--van-font-bold) | \n- | \n
--van-sidebar-selected-text-color | \nvar(--van-text-color) | \n- | \n
--van-sidebar-selected-border-width | \n4px | \n- | \n
--van-sidebar-selected-border-height | \n16px | \n- | \n
--van-sidebar-selected-border-color | \nvar(--van-primary-color) | \n- | \n
--van-sidebar-selected-background | \nvar(--van-background-2) | \n- | \n
Used to display a group of message notifications in a continuons loop.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { NoticeBar } from 'vant';\n\nconst app = createApp();\napp.use(NoticeBar);\n
\n<van-notice-bar\n text="Technology is the common soul of the people who developed it."\n left-icon="volume-o"\n/>\n
\n<!-- Enable scroll when text is short -->\n<van-notice-bar scrollable text="Short Content" />\n\n<!-- Disable scroll when text is long -->\n<van-notice-bar\n :scrollable="false"\n text="Technology is the common soul of the people who developed it."\n/>\n
\n<van-notice-bar wrapable :scrollable="false">\n Technology is the common soul of the people who developed it.\n</van-notice-bar>\n
\n<van-notice-bar mode="closeable">Short Content</van-notice-bar>\n\n<van-notice-bar mode="link">Short Content</van-notice-bar>\n
\n<van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">\n Short Content\n</van-notice-bar>\n
\n<van-notice-bar left-icon="volume-o" :scrollable="false">\n <van-swipe\n vertical\n class="notice-swipe"\n :autoplay="3000"\n :touchable="false"\n :show-indicators="false"\n >\n <van-swipe-item>Content 1</van-swipe-item>\n <van-swipe-item>Content 2</van-swipe-item>\n <van-swipe-item>Content 3</van-swipe-item>\n </van-swipe>\n</van-notice-bar>\n\n<style>\n .notice-swipe {\n height: 40px;\n line-height: 40px;\n }\n</style>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
mode | \nMode, can be set to closeable link | \nstring | \n\'\' | \n
text | \nNotice text content | \nstring | \n\'\' | \n
color | \nText color | \nstring | \n#ed6a0c | \n
background | \nBackground color | \nstring | \n#fffbe8 | \n
left-icon | \nLeft Icon | \nstring | \n- | \n
delay | \nAnimation delay (s) | \nnumber | string | \n1 | \n
speed | \nScroll speed (px/s) | \nnumber | string | \n60 | \n
scrollable | \nWhether to scroll content | \nboolean | \n- | \n
wrapable | \nWhether to enable text wrap | \nboolean | \nfalse | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when NoticeBar is clicked | \nevent: MouseEvent | \n
close | \nEmitted when NoticeBar is closed | \nevent: MouseEvent | \n
replay | \nEmitted when NoticeBar is replayed | \n- | \n
Use ref to get NoticeBar instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
reset | \nReset NoticeBar | \n- | \n- | \n
The component exports the following type definitions:
\nimport type { NoticeBarMode, NoticeBarProps, NoticeBarInstance } from 'vant';\n
\nNoticeBarInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { NoticeBarInstance } from 'vant';\n\nconst noticeBarRef = ref<NoticeBarInstance>();\n\nnoticeBarRef.value?.reset();\n
\nName | \nDescription | \n
---|---|
default | \nNotice text content | \n
left-icon | \nCustom left icon | \n
right-icon | \nCustom right icon | \n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-notice-bar-height | \n40px | \n- | \n
--van-notice-bar-padding | \n0 var(--van-padding-md) | \n- | \n
--van-notice-bar-wrapable-padding | \nvar(--van-padding-xs) var(--van-padding-md) | \n- | \n
--van-notice-bar-text-color | \nvar(--van-orange-dark) | \n- | \n
--van-notice-bar-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-notice-bar-line-height | \n24px | \n- | \n
--van-notice-bar-background | \nvar(--van-orange-light) | \n- | \n
--van-notice-bar-icon-size | \n16px | \n- | \n
--van-notice-bar-icon-min-width | \n24px | \n- | \n
Used to display a group of message notifications in a continuons loop.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { NoticeBar } from 'vant';\n\nconst app = createApp();\napp.use(NoticeBar);\n
\n<van-notice-bar\n text="Technology is the common soul of the people who developed it."\n left-icon="volume-o"\n/>\n
\n<!-- Enable scroll when text is short -->\n<van-notice-bar scrollable text="Short Content" />\n\n<!-- Disable scroll when text is long -->\n<van-notice-bar\n :scrollable="false"\n text="Technology is the common soul of the people who developed it."\n/>\n
\n<van-notice-bar wrapable :scrollable="false">\n Technology is the common soul of the people who developed it.\n</van-notice-bar>\n
\n<van-notice-bar mode="closeable">Short Content</van-notice-bar>\n\n<van-notice-bar mode="link">Short Content</van-notice-bar>\n
\n<van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">\n Short Content\n</van-notice-bar>\n
\n<van-notice-bar left-icon="volume-o" :scrollable="false">\n <van-swipe\n vertical\n class="notice-swipe"\n :autoplay="3000"\n :touchable="false"\n :show-indicators="false"\n >\n <van-swipe-item>Content 1</van-swipe-item>\n <van-swipe-item>Content 2</van-swipe-item>\n <van-swipe-item>Content 3</van-swipe-item>\n </van-swipe>\n</van-notice-bar>\n\n<style>\n .notice-swipe {\n height: 40px;\n line-height: 40px;\n }\n</style>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
mode | \nMode, can be set to closeable link | \nstring | \n\'\' | \n
text | \nNotice text content | \nstring | \n\'\' | \n
color | \nText color | \nstring | \n#ed6a0c | \n
background | \nBackground color | \nstring | \n#fffbe8 | \n
left-icon | \nLeft Icon | \nstring | \n- | \n
delay | \nAnimation delay (s) | \nnumber | string | \n1 | \n
speed | \nScroll speed (px/s) | \nnumber | string | \n60 | \n
scrollable | \nWhether to scroll content | \nboolean | \n- | \n
wrapable | \nWhether to enable text wrap | \nboolean | \nfalse | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when NoticeBar is clicked | \nevent: MouseEvent | \n
close | \nEmitted when NoticeBar is closed | \nevent: MouseEvent | \n
replay | \nEmitted when NoticeBar is replayed | \n- | \n
Use ref to get NoticeBar instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
reset | \nReset NoticeBar | \n- | \n- | \n
The component exports the following type definitions:
\nimport type { NoticeBarMode, NoticeBarProps, NoticeBarInstance } from 'vant';\n
\nNoticeBarInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { NoticeBarInstance } from 'vant';\n\nconst noticeBarRef = ref<NoticeBarInstance>();\n\nnoticeBarRef.value?.reset();\n
\nName | \nDescription | \n
---|---|
default | \nNotice text content | \n
left-icon | \nCustom left icon | \n
right-icon | \nCustom right icon | \n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-notice-bar-height | \n40px | \n- | \n
--van-notice-bar-padding | \n0 var(--van-padding-md) | \n- | \n
--van-notice-bar-wrapable-padding | \nvar(--van-padding-xs) var(--van-padding-md) | \n- | \n
--van-notice-bar-text-color | \nvar(--van-orange-dark) | \n- | \n
--van-notice-bar-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-notice-bar-line-height | \n24px | \n- | \n
--van-notice-bar-background | \nvar(--van-orange-light) | \n- | \n
--van-notice-bar-icon-size | \n16px | \n- | \n
--van-notice-bar-icon-min-width | \n24px | \n- | \n
\u7528\u4E8E\u5728 true
\u548C false
\u4E4B\u95F4\u8FDB\u884C\u5207\u6362\u3002
import { useToggle } from '@vant/use';\n\nexport default {\n setup() {\n const [state, toggle] = useToggle();\n\n toggle(true);\n console.log(state.value); // -> true\n\n toggle(false);\n console.log(state.value); // -> false\n\n toggle();\n console.log(state.value); // -> true\n },\n};\n
\nimport { useToggle } from '@vant/use';\n\nexport default {\n setup() {\n const [state, toggle] = useToggle(true);\n console.log(state.value); // -> true\n },\n};\n
\nfunction useToggle(\n defaultValue: boolean,\n): [Ref<boolean>, (newValue: boolean) => void];\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
defaultValue | \n\u9ED8\u8BA4\u503C | \nboolean | \nfalse | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
state | \n\u72B6\u6001\u503C | \nRef<boolean> | \n
toggle | \n\u5207\u6362\u72B6\u6001\u503C\u7684\u51FD\u6570 | \n(newValue?: boolean) => void | \n
\u7528\u4E8E\u5728 true
\u548C false
\u4E4B\u95F4\u8FDB\u884C\u5207\u6362\u3002
import { useToggle } from '@vant/use';\n\nexport default {\n setup() {\n const [state, toggle] = useToggle();\n\n toggle(true);\n console.log(state.value); // -> true\n\n toggle(false);\n console.log(state.value); // -> false\n\n toggle();\n console.log(state.value); // -> true\n },\n};\n
\nimport { useToggle } from '@vant/use';\n\nexport default {\n setup() {\n const [state, toggle] = useToggle(true);\n console.log(state.value); // -> true\n },\n};\n
\nfunction useToggle(\n defaultValue: boolean,\n): [Ref<boolean>, (newValue: boolean) => void];\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
defaultValue | \n\u9ED8\u8BA4\u503C | \nboolean | \nfalse | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
state | \n\u72B6\u6001\u503C | \nRef<boolean> | \n
toggle | \n\u5207\u6362\u72B6\u6001\u503C\u7684\u51FD\u6570 | \n(newValue?: boolean) => void | \n
A modal box pops up on the page, which is often used for message prompts, message confirmation, or to complete specific interactive operations in the current page. It supports two methods: component call and function call.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Dialog } from 'vant';\n\nconst app = createApp();\napp.use(Dialog);\n
\nVant provides some utility functions that can quickly evoke global Dialog
components.
For example, calling the showDialog
function will render a Dialog directly in the page.
import { showDialog } from 'vant';\n\nshowDialog({ message: 'Alert' });\n
\nUsed to prompt for some messages, only including one confirm button by default.
\nimport { showDialog } from 'vant';\n\nshowDialog({\n title: 'Title',\n message: 'The code is written for people to see and can be run on a machine.',\n}).then(() => {\n // on close\n});\n\nshowDialog({\n message:\n 'Life is far more than just spinning and being busy to the limit, and human experiences are much broader and richer than this.',\n}).then(() => {\n // on close\n});\n
\nUsed to confirm some messages, including a confirm button and a cancel button by default.
\nimport { showConfirmDialog } from 'vant';\n\nshowConfirmDialog({\n title: 'Title',\n message:\n 'If the solution is ugly, then there must be a better solution, but it has not been discovered yet.',\n})\n .then(() => {\n // on confirm\n })\n .catch(() => {\n // on cancel\n });\n
\nSetting the theme
option to round-button
will display the Dialog with a rounded button style.
import { showDialog } from 'vant';\n\nshowDialog({\n title: 'Title',\n message: 'The code is written for people to see and can be run on a machine.',\n theme: 'round-button',\n}).then(() => {\n // on close\n});\n\nshowDialog({\n message:\n 'Life is far more than just spinning and being busy to the limit, and human experiences are much broader and richer than this.',\n theme: 'round-button',\n}).then(() => {\n // on close\n});\n
\nYou can pass a callback function through the beforeClose
option to perform specific operations before closing the Dialog.
import { showConfirmDialog } from 'vant';\n\nconst beforeClose = (action) =>\n new Promise((resolve) => {\n setTimeout(() => {\n // action !== 'confirm' Interception cancellation operation\n resolve(action === 'confirm');\n }, 1000);\n });\n\nshowConfirmDialog({\n title: 'Title',\n message:\n 'If the solution is ugly, then there must be a better solution, but it has not been discovered yet.',\n beforeClose,\n});\n
\nIf you need to embed components or other custom content within a Dialog, you can directly use the Dialog component and customize it using the default slot. Before using it, you need to register the component using app.use
or other methods.
<van-dialog v-model:show="show" title="Title" show-cancel-button>\n <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" />\n</van-dialog>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n return { show };\n },\n};\n
\nVant exports following Dialog utility functions:
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
showDialog | \nDisplay a message prompt dialog with a default confirm button | \noptions: DialogOptions | \nPromise<void> | \n
showConfirmDialog | \nDisplay a message confirmation dialog with default confirm and cancel buttons | \noptions: DialogOptions | \nPromise<void> | \n
closeDialog | \nClose the currently displayed dialog | \n- | \nvoid | \n
setDialogDefaultOptions | \nModify the default configuration that affects all showDialog calls | \noptions: DialogOptions | \nvoid | \n
resetDialogDefaultOptions | \nReset the default configuration that affects all showDialog calls | \n- | \nvoid | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
title | \nTitle | \nstring | \n- | \n
width | \nDialog width | \nnumber | string | \n320px | \n
message | \nMessage | \nstring | () => JSX.ELement | \n- | \n
messageAlign | \nMessage text align, can be set to left right | \nstring | \ncenter | \n
theme | \nTheme style, can be set to round-button | \nstring | \ndefault | \n
className | \nCustom className | \nstring | Array | object | \n- | \n
showConfirmButton | \nWhether to show confirm button | \nboolean | \ntrue | \n
showCancelButton | \nWhether to show cancel button | \nboolean | \nfalse | \n
cancelButtonText | \nCancel button text | \nstring | \nCancel | \n
cancelButtonColor | \nCancel button color | \nstring | \nblack | \n
cancelButtonDisabled | \nWhether to disable cancel button | \nboolean | \nfalse | \n
confirmButtonText | \nConfirm button text | \nstring | \nConfirm | \n
confirmButtonColor | \nConfirm button color | \nstring | \n#ee0a24 | \n
confirmButtonDisabled | \nWhether to disable confirm button | \nboolean | \nfalse | \n
overlay | \nWhether to show overlay | \nboolean | \ntrue | \n
overlayClass | \nCustom overlay class | \nstring | Array | object | \n- | \n
overlayStyle | \nCustom overlay style | \nobject | \n- | \n
closeOnPopstate | \nWhether to close when popstate | \nboolean | \ntrue | \n
closeOnClickOverlay | \nWhether to close when overlay is clicked | \nboolean | \nfalse | \n
lockScroll | \nWhether to lock body scroll | \nboolean | \ntrue | \n
allowHtml | \nWhether to allow HTML rendering in message | \nboolean | \nfalse | \n
beforeClose | \nCallback function before close | \n(action: string) => boolean | Promise<boolean> | \n- | \n
transition | \nTransition, equivalent to name prop of transition | \nstring | \n- | \n
teleport | \nSpecifies a target element where Dialog will be mounted | \nstring | Element | \nbody | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:show | \nWhether to show dialog | \nboolean | \n- | \n
title | \nTitle | \nstring | \n- | \n
width | \nWidth | \nnumber | string | \n320px | \n
message | \nMessage | \nstring | () => JSX.ELement | \n- | \n
message-align | \nMessage align, can be set to left right justify | \nstring | \ncenter | \n
theme | \nTheme style, can be set to round-button | \nstring | \ndefault | \n
show-confirm-button | \nWhether to show confirm button | \nboolean | \ntrue | \n
show-cancel-button | \nWhether to show cancel button | \nboolean | \nfalse | \n
cancel-button-text | \nCancel button text | \nstring | \nCancel | \n
cancel-button-color | \nCancel button color | \nstring | \nblack | \n
cancel-button-disabled | \nWhether to disable cancel button | \nboolean | \nfalse | \n
confirm-button-text | \nConfirm button text | \nstring | \nConfirm | \n
confirm-button-color | \nConfirm button color | \nstring | \n#ee0a24 | \n
confirm-button-disabled | \nWhether to disable confirm button | \nboolean | \nfalse | \n
z-index | \nSet the z-index to a fixed value | \nnumber | string | \n2000+ | \n
overlay | \nWhether to show overlay | \nboolean | \ntrue | \n
overlay-class | \nCustom overlay class | \nstring | \n- | \n
overlay-style | \nCustom overlay style | \nobject | \n- | \n
close-on-popstate | \nWhether to close when popstate | \nboolean | \ntrue | \n
close-on-click-overlay | \nWhether to close when overlay is clicked | \nboolean | \nfalse | \n
lazy-render | \nWhether to lazy render util appeared | \nboolean | \ntrue | \n
lock-scroll | \nWhether to lock background scroll | \nboolean | \ntrue | \n
allow-html | \nWhether to allow HTML rendering in message | \nboolean | \nfalse | \n
before-close | \nCallback function before close | \n(action: string) => boolean | Promise<boolean> | \n- | \n
transition | \nTransition, equivalent to name prop of transition | \nstring | \n- | \n
teleport | \nSpecifies a target element where Dialog will be mounted | \nstring | Element | \n- | \n
Event | \nDescription | \nParameters | \n
---|---|---|
confirm | \nEmitted when the confirm button is clicked | \n- | \n
cancel | \nEmitted when the cancel button is clicked | \n- | \n
open | \nEmitted when opening Dialog | \n- | \n
close | \nEmitted when closing Dialog | \n- | \n
opened | \nEmitted when Dialog is opened | \n- | \n
closed | \nEmitted when Dialog is closed | \n- | \n
Name | \nDescription | \n
---|---|
default | \nCustom message | \n
title | \nCustom title | \n
footer | \nCustom footer | \n
The component exports the following type definitions:
\nimport type {\n DialogProps,\n DialogTheme,\n DialogMessage,\n DialogOptions,\n DialogMessageAlign,\n} from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-dialog-width | \n320px | \n- | \n
--van-dialog-small-screen-width | \n90% | \n- | \n
--van-dialog-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-dialog-transition | \nvar(--van-duration-base) | \n- | \n
--van-dialog-radius | \n16px | \n- | \n
--van-dialog-background | \nvar(--van-background-2) | \n- | \n
--van-dialog-header-font-weight | \nvar(--van-font-bold) | \n- | \n
--van-dialog-header-line-height | \n24px | \n- | \n
--van-dialog-header-padding-top | \n26px | \n- | \n
--van-dialog-header-isolated-padding | \nvar(--van-padding-lg) 0 | \n- | \n
--van-dialog-message-padding | \nvar(--van-padding-lg) | \n- | \n
--van-dialog-message-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-dialog-message-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-dialog-message-max-height | \n60vh | \n- | \n
--van-dialog-has-title-message-text-color | \nvar(--van-gray-7) | \n- | \n
--van-dialog-has-title-message-padding-top | \nvar(--van-padding-xs) | \n- | \n
--van-dialog-button-height | \n48px | \n- | \n
--van-dialog-round-button-height | \n36px | \n- | \n
--van-dialog-confirm-button-text-color | \nvar(--van-primary-color) | \n- | \n
A modal box pops up on the page, which is often used for message prompts, message confirmation, or to complete specific interactive operations in the current page. It supports two methods: component call and function call.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Dialog } from 'vant';\n\nconst app = createApp();\napp.use(Dialog);\n
\nVant provides some utility functions that can quickly evoke global Dialog
components.
For example, calling the showDialog
function will render a Dialog directly in the page.
import { showDialog } from 'vant';\n\nshowDialog({ message: 'Alert' });\n
\nUsed to prompt for some messages, only including one confirm button by default.
\nimport { showDialog } from 'vant';\n\nshowDialog({\n title: 'Title',\n message: 'The code is written for people to see and can be run on a machine.',\n}).then(() => {\n // on close\n});\n\nshowDialog({\n message:\n 'Life is far more than just spinning and being busy to the limit, and human experiences are much broader and richer than this.',\n}).then(() => {\n // on close\n});\n
\nUsed to confirm some messages, including a confirm button and a cancel button by default.
\nimport { showConfirmDialog } from 'vant';\n\nshowConfirmDialog({\n title: 'Title',\n message:\n 'If the solution is ugly, then there must be a better solution, but it has not been discovered yet.',\n})\n .then(() => {\n // on confirm\n })\n .catch(() => {\n // on cancel\n });\n
\nSetting the theme
option to round-button
will display the Dialog with a rounded button style.
import { showDialog } from 'vant';\n\nshowDialog({\n title: 'Title',\n message: 'The code is written for people to see and can be run on a machine.',\n theme: 'round-button',\n}).then(() => {\n // on close\n});\n\nshowDialog({\n message:\n 'Life is far more than just spinning and being busy to the limit, and human experiences are much broader and richer than this.',\n theme: 'round-button',\n}).then(() => {\n // on close\n});\n
\nYou can pass a callback function through the beforeClose
option to perform specific operations before closing the Dialog.
import { showConfirmDialog } from 'vant';\n\nconst beforeClose = (action) =>\n new Promise((resolve) => {\n setTimeout(() => {\n // action !== 'confirm' Interception cancellation operation\n resolve(action === 'confirm');\n }, 1000);\n });\n\nshowConfirmDialog({\n title: 'Title',\n message:\n 'If the solution is ugly, then there must be a better solution, but it has not been discovered yet.',\n beforeClose,\n});\n
\nIf you need to embed components or other custom content within a Dialog, you can directly use the Dialog component and customize it using the default slot. Before using it, you need to register the component using app.use
or other methods.
<van-dialog v-model:show="show" title="Title" show-cancel-button>\n <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" />\n</van-dialog>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n return { show };\n },\n};\n
\nVant exports following Dialog utility functions:
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
showDialog | \nDisplay a message prompt dialog with a default confirm button | \noptions: DialogOptions | \nPromise<void> | \n
showConfirmDialog | \nDisplay a message confirmation dialog with default confirm and cancel buttons | \noptions: DialogOptions | \nPromise<void> | \n
closeDialog | \nClose the currently displayed dialog | \n- | \nvoid | \n
setDialogDefaultOptions | \nModify the default configuration that affects all showDialog calls | \noptions: DialogOptions | \nvoid | \n
resetDialogDefaultOptions | \nReset the default configuration that affects all showDialog calls | \n- | \nvoid | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
title | \nTitle | \nstring | \n- | \n
width | \nDialog width | \nnumber | string | \n320px | \n
message | \nMessage | \nstring | () => JSX.ELement | \n- | \n
messageAlign | \nMessage text align, can be set to left right | \nstring | \ncenter | \n
theme | \nTheme style, can be set to round-button | \nstring | \ndefault | \n
className | \nCustom className | \nstring | Array | object | \n- | \n
showConfirmButton | \nWhether to show confirm button | \nboolean | \ntrue | \n
showCancelButton | \nWhether to show cancel button | \nboolean | \nfalse | \n
cancelButtonText | \nCancel button text | \nstring | \nCancel | \n
cancelButtonColor | \nCancel button color | \nstring | \nblack | \n
cancelButtonDisabled | \nWhether to disable cancel button | \nboolean | \nfalse | \n
confirmButtonText | \nConfirm button text | \nstring | \nConfirm | \n
confirmButtonColor | \nConfirm button color | \nstring | \n#ee0a24 | \n
confirmButtonDisabled | \nWhether to disable confirm button | \nboolean | \nfalse | \n
overlay | \nWhether to show overlay | \nboolean | \ntrue | \n
overlayClass | \nCustom overlay class | \nstring | Array | object | \n- | \n
overlayStyle | \nCustom overlay style | \nobject | \n- | \n
closeOnPopstate | \nWhether to close when popstate | \nboolean | \ntrue | \n
closeOnClickOverlay | \nWhether to close when overlay is clicked | \nboolean | \nfalse | \n
lockScroll | \nWhether to lock body scroll | \nboolean | \ntrue | \n
allowHtml | \nWhether to allow HTML rendering in message | \nboolean | \nfalse | \n
beforeClose | \nCallback function before close | \n(action: string) => boolean | Promise<boolean> | \n- | \n
transition | \nTransition, equivalent to name prop of transition | \nstring | \n- | \n
teleport | \nSpecifies a target element where Dialog will be mounted | \nstring | Element | \nbody | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:show | \nWhether to show dialog | \nboolean | \n- | \n
title | \nTitle | \nstring | \n- | \n
width | \nWidth | \nnumber | string | \n320px | \n
message | \nMessage | \nstring | () => JSX.ELement | \n- | \n
message-align | \nMessage align, can be set to left right justify | \nstring | \ncenter | \n
theme | \nTheme style, can be set to round-button | \nstring | \ndefault | \n
show-confirm-button | \nWhether to show confirm button | \nboolean | \ntrue | \n
show-cancel-button | \nWhether to show cancel button | \nboolean | \nfalse | \n
cancel-button-text | \nCancel button text | \nstring | \nCancel | \n
cancel-button-color | \nCancel button color | \nstring | \nblack | \n
cancel-button-disabled | \nWhether to disable cancel button | \nboolean | \nfalse | \n
confirm-button-text | \nConfirm button text | \nstring | \nConfirm | \n
confirm-button-color | \nConfirm button color | \nstring | \n#ee0a24 | \n
confirm-button-disabled | \nWhether to disable confirm button | \nboolean | \nfalse | \n
z-index | \nSet the z-index to a fixed value | \nnumber | string | \n2000+ | \n
overlay | \nWhether to show overlay | \nboolean | \ntrue | \n
overlay-class | \nCustom overlay class | \nstring | \n- | \n
overlay-style | \nCustom overlay style | \nobject | \n- | \n
close-on-popstate | \nWhether to close when popstate | \nboolean | \ntrue | \n
close-on-click-overlay | \nWhether to close when overlay is clicked | \nboolean | \nfalse | \n
lazy-render | \nWhether to lazy render util appeared | \nboolean | \ntrue | \n
lock-scroll | \nWhether to lock background scroll | \nboolean | \ntrue | \n
allow-html | \nWhether to allow HTML rendering in message | \nboolean | \nfalse | \n
before-close | \nCallback function before close | \n(action: string) => boolean | Promise<boolean> | \n- | \n
transition | \nTransition, equivalent to name prop of transition | \nstring | \n- | \n
teleport | \nSpecifies a target element where Dialog will be mounted | \nstring | Element | \n- | \n
Event | \nDescription | \nParameters | \n
---|---|---|
confirm | \nEmitted when the confirm button is clicked | \n- | \n
cancel | \nEmitted when the cancel button is clicked | \n- | \n
open | \nEmitted when opening Dialog | \n- | \n
close | \nEmitted when closing Dialog | \n- | \n
opened | \nEmitted when Dialog is opened | \n- | \n
closed | \nEmitted when Dialog is closed | \n- | \n
Name | \nDescription | \n
---|---|
default | \nCustom message | \n
title | \nCustom title | \n
footer | \nCustom footer | \n
The component exports the following type definitions:
\nimport type {\n DialogProps,\n DialogTheme,\n DialogMessage,\n DialogOptions,\n DialogMessageAlign,\n} from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-dialog-width | \n320px | \n- | \n
--van-dialog-small-screen-width | \n90% | \n- | \n
--van-dialog-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-dialog-transition | \nvar(--van-duration-base) | \n- | \n
--van-dialog-radius | \n16px | \n- | \n
--van-dialog-background | \nvar(--van-background-2) | \n- | \n
--van-dialog-header-font-weight | \nvar(--van-font-bold) | \n- | \n
--van-dialog-header-line-height | \n24px | \n- | \n
--van-dialog-header-padding-top | \n26px | \n- | \n
--van-dialog-header-isolated-padding | \nvar(--van-padding-lg) 0 | \n- | \n
--van-dialog-message-padding | \nvar(--van-padding-lg) | \n- | \n
--van-dialog-message-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-dialog-message-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-dialog-message-max-height | \n60vh | \n- | \n
--van-dialog-has-title-message-text-color | \nvar(--van-gray-7) | \n- | \n
--van-dialog-has-title-message-padding-top | \nvar(--van-padding-xs) | \n- | \n
--van-dialog-button-height | \n48px | \n- | \n
--van-dialog-round-button-height | \n36px | \n- | \n
--van-dialog-confirm-button-text-color | \nvar(--van-primary-color) | \n- | \n
\u901A\u8FC7\u672C\u7AE0\u8282\u4F60\u53EF\u4EE5\u4E86\u89E3\u5230 Vant \u7684\u5B89\u88C5\u65B9\u6CD5\u548C\u57FA\u672C\u4F7F\u7528\u59FF\u52BF\u3002
\n\u5728\u73B0\u6709\u9879\u76EE\u4E2D\u4F7F\u7528 Vant \u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7 npm
\u8FDB\u884C\u5B89\u88C5\uFF1A
# Vue 3 \u9879\u76EE\uFF0C\u5B89\u88C5\u6700\u65B0\u7248 Vant\nnpm i vant\n\n# Vue 2 \u9879\u76EE\uFF0C\u5B89\u88C5 Vant 2\nnpm i vant@latest-v2\n
\n\u5F53\u7136\uFF0C\u4F60\u4E5F\u53EF\u4EE5\u901A\u8FC7 yarn
\u3001pnpm
\u6216 bun
\u8FDB\u884C\u5B89\u88C5\uFF1A
# \u901A\u8FC7 yarn \u5B89\u88C5\nyarn add vant\n\n# \u901A\u8FC7 pnpm \u5B89\u88C5\npnpm add vant\n\n# \u901A\u8FC7 Bun \u5B89\u88C5\nbun add vant\n
\n\u5982\u679C\u4F60\u9700\u8981\u65B0\u5EFA\u4E00\u4E2A\u9879\u76EE\uFF0C\u6211\u4EEC\u63A8\u8350\u4F7F\u7528 Rsbuild\uFF0CVite \u6216 Nuxt \u6846\u67B6\u3002
\nRsbuild \u662F\u57FA\u4E8E Rspack \u7684\u6784\u5EFA\u5DE5\u5177\uFF0C\u7531 Vant \u4F5C\u8005\u5F00\u53D1\uFF0C\u5177\u5907\u4E00\u6D41\u7684\u6784\u5EFA\u901F\u5EA6\u548C\u5F00\u53D1\u4F53\u9A8C\uFF0C\u5BF9 Vant \u63D0\u4F9B\u7B2C\u4E00\u4F18\u5148\u7EA7\u652F\u6301\u3002
\n\u4F60\u53EF\u4EE5\u901A\u8FC7\u4EE5\u4E0B\u547D\u4EE4\u521B\u5EFA\u4E00\u4E2A Rsbuild \u9879\u76EE\uFF1A
\nnpm create rsbuild@latest\n
\n\u8BF7\u8BBF\u95EE Rsbuild \u4ED3\u5E93 \u4E86\u89E3\u66F4\u591A\u4FE1\u606F\u3002
\n\u4EE5\u4E0B\u662F Vant \u5B98\u65B9\u63D0\u4F9B\u7684\u4E00\u4E9B\u793A\u4F8B\u9879\u76EE\uFF0C\u4F60\u53EF\u4EE5\u514B\u9686\u8BE5\u9879\u76EE\uFF0C\u5E76\u76F4\u63A5\u62F7\u8D1D\u4EE3\u7801\u6765\u4F7F\u7528\u3002
\n\u5982\u679C\u4F60\u53EA\u9700\u8981\u5F00\u53D1\u4E00\u4E2A\u7B80\u5355\u7684 HTML \u9875\u9762\uFF0C\u90A3\u4E48\u53EF\u4EE5\u76F4\u63A5\u5728 HTML \u6587\u4EF6\u4E2D\u5F15\u5165 CDN \u94FE\u63A5\uFF0C\u4E4B\u540E\u4F60\u53EF\u4EE5\u901A\u8FC7\u5168\u5C40\u53D8\u91CF vant
\u8BBF\u95EE\u5230\u6240\u6709\u7EC4\u4EF6\u3002
<!-- \u5F15\u5165\u6837\u5F0F\u6587\u4EF6 -->\n<link\n rel="stylesheet"\n href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"\n/>\n\n<!-- \u5F15\u5165 Vue \u548C Vant \u7684 JS \u6587\u4EF6 -->\n<script src="https://fastly.jsdelivr.net/npm/vue@3"></script>\n<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>\n\n<script>\n // \u5728 #app \u6807\u7B7E\u4E0B\u6E32\u67D3\u4E00\u4E2A\u6309\u94AE\u7EC4\u4EF6\n const app = Vue.createApp({\n template: `<van-button>\u6309\u94AE</van-button>`,\n });\n app.use(vant);\n\n // \u901A\u8FC7 CDN \u5F15\u5165\u65F6\u4E0D\u4F1A\u81EA\u52A8\u6CE8\u518C Lazyload \u7EC4\u4EF6\n // \u53EF\u4EE5\u901A\u8FC7\u4E0B\u9762\u7684\u65B9\u5F0F\u624B\u52A8\u6CE8\u518C\n app.use(vant.Lazyload);\n\n // \u8C03\u7528\u5DE5\u5177\u51FD\u6570\uFF0C\u5F39\u51FA\u4E00\u4E2A Toast\n vant.showToast('\u63D0\u793A');\n\n app.mount('#app');\n</script>\n
\n\u4F60\u53EF\u4EE5\u901A\u8FC7\u4EE5\u4E0B\u514D\u8D39 CDN \u670D\u52A1\u6765\u4F7F\u7528 Vant:
\n\n\u6CE8\u610F\uFF1A\u514D\u8D39 CDN \u4E00\u822C\u7528\u4E8E\u5236\u4F5C\u539F\u578B\u6216\u4E2A\u4EBA\u5C0F\u578B\u9879\u76EE\uFF0C\u4E0D\u63A8\u8350\u5728\u4F01\u4E1A\u751F\u4EA7\u73AF\u5883\u4E2D\u4F7F\u7528\u514D\u8D39 CDN\u3002
\n\u5BF9\u4E8E\u4F01\u4E1A\u5F00\u53D1\u8005\uFF0C\u5EFA\u8BAE\u4F7F\u7528\u4EE5\u4E0B\u65B9\u5F0F\uFF1A
\n\u6211\u4EEC\u63D0\u4F9B\u4E86\u4E30\u5BCC\u7684\u793A\u4F8B\u5DE5\u7A0B\uFF0C\u901A\u8FC7\u793A\u4F8B\u5DE5\u7A0B\u4F60\u53EF\u4EE5\u4E86\u89E3\u5982\u4E0B\u5185\u5BB9\uFF1A
\n\u4E0B\u9762\u662F\u4F7F\u7528 Vant \u7EC4\u4EF6\u7684\u7528\u6CD5\u793A\u4F8B\uFF1A
\nimport { createApp } from 'vue';\n// 1. \u5F15\u5165\u4F60\u9700\u8981\u7684\u7EC4\u4EF6\nimport { Button } from 'vant';\n// 2. \u5F15\u5165\u7EC4\u4EF6\u6837\u5F0F\nimport 'vant/lib/index.css';\n\nconst app = createApp();\n\n// 3. \u6CE8\u518C\u4F60\u9700\u8981\u7684\u7EC4\u4EF6\napp.use(Button);\n
\nVant \u652F\u6301\u591A\u79CD\u7EC4\u4EF6\u6CE8\u518C\u65B9\u5F0F\uFF0C\u9664\u4E86\u5728 app \u4E0A\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u4F60\u4E5F\u53EF\u4EE5\u9009\u62E9\u5176\u4ED6\u7684\u65B9\u5F0F\uFF0C\u6BD4\u5982\u5C40\u90E8\u6CE8\u518C\uFF0C\u8BE6\u89C1 \u7EC4\u4EF6\u6CE8\u518C \u7AE0\u8282\u3002
\n\n\n\u63D0\u793A\uFF1AVant \u9ED8\u8BA4\u652F\u6301 Tree Shaking\uFF0C\u56E0\u6B64\u4F60\u4E0D\u9700\u8981\u914D\u7F6E\u4EFB\u4F55\u63D2\u4EF6\uFF0C\u901A\u8FC7 Tree Shaking \u5373\u53EF\u79FB\u9664\u4E0D\u9700\u8981\u7684 JS \u4EE3\u7801\uFF0C\u4F46 CSS \u6837\u5F0F\u65E0\u6CD5\u901A\u8FC7\u8FD9\u79CD\u65B9\u5F0F\u4F18\u5316\uFF0C\u5982\u679C\u9700\u8981\u6309\u9700\u5F15\u5165 CSS \u6837\u5F0F\uFF0C\u8BF7\u53C2\u8003\u4E0B\u9762\u7684\u65B9\u6CD5\u4E8C\u3002
\n
\u5728\u57FA\u4E8E vite
\u3001webpack
\u6216 vue-cli
\u7684\u9879\u76EE\u4E2D\u4F7F\u7528 Vant \u65F6\uFF0C\u53EF\u4EE5\u4F7F\u7528 unplugin-vue-components \u63D2\u4EF6\uFF0C\u5B83\u53EF\u4EE5\u81EA\u52A8\u5F15\u5165\u7EC4\u4EF6\u3002
Vant \u5B98\u65B9\u57FA\u4E8E unplugin-vue-components
\u63D0\u4F9B\u4E86\u81EA\u52A8\u5BFC\u5165\u6837\u5F0F\u7684\u89E3\u6790\u5668 @vant/auto-import-resolver\uFF0C\u4E24\u8005\u53EF\u4EE5\u914D\u5408\u4F7F\u7528\u3002
\u76F8\u6BD4\u4E8E\u5E38\u89C4\u7528\u6CD5\uFF0C\u8FD9\u79CD\u65B9\u5F0F\u53EF\u4EE5\u6309\u9700\u5F15\u5165\u7EC4\u4EF6\u7684 CSS \u6837\u5F0F\uFF0C\u4ECE\u800C\u51CF\u5C11\u4E00\u90E8\u5206\u4EE3\u7801\u4F53\u79EF\uFF0C\u4F46\u4F7F\u7528\u8D77\u6765\u4F1A\u53D8\u5F97\u7E41\u7410\u4E00\u4E9B\u3002\u5982\u679C\u4E1A\u52A1\u5BF9 CSS \u7684\u4F53\u79EF\u8981\u6C42\u4E0D\u662F\u7279\u522B\u6781\u81F4\uFF0C\u6211\u4EEC\u63A8\u8350\u4F7F\u7528\u66F4\u7B80\u4FBF\u7684\u5E38\u89C4\u7528\u6CD5\u3002
\n# \u901A\u8FC7 npm \u5B89\u88C5\nnpm i @vant/auto-import-resolver unplugin-vue-components -D\n\n# \u901A\u8FC7 yarn \u5B89\u88C5\nyarn add @vant/auto-import-resolver unplugin-vue-components -D\n\n# \u901A\u8FC7 pnpm \u5B89\u88C5\npnpm add @vant/auto-import-resolver unplugin-vue-components -D\n\n# \u901A\u8FC7 bun \u5B89\u88C5\nbun add @vant/auto-import-resolver unplugin-vue-components -D\n
\n\u5982\u679C\u662F\u57FA\u4E8E vite
\u7684\u9879\u76EE\uFF0C\u5728 vite.config.js
\u6587\u4EF6\u4E2D\u914D\u7F6E\u63D2\u4EF6\uFF1A
import vue from '@vitejs/plugin-vue';\nimport Components from 'unplugin-vue-components/vite';\nimport { VantResolver } from '@vant/auto-import-resolver';\n\nexport default {\n plugins: [\n vue(),\n Components({\n resolvers: [VantResolver()],\n }),\n ],\n};\n
\n\u5982\u679C\u662F\u57FA\u4E8E vue-cli
\u7684\u9879\u76EE\uFF0C\u5728 vue.config.js
\u6587\u4EF6\u4E2D\u914D\u7F6E\u63D2\u4EF6\uFF1A
const { VantResolver } = require('@vant/auto-import-resolver');\nconst ComponentsPlugin = require('unplugin-vue-components/webpack');\n\nmodule.exports = {\n configureWebpack: {\n plugins: [\n ComponentsPlugin({ resolvers: [VantResolver()] }), // \u5F53 unplugin-vue-components \u7248\u672C\u5C0F\u4E8E 0.26.0\n ComponentsPlugin.default({ resolvers: [VantResolver()] }), //\u5F53 unplugin-vue-components \u7248\u672C\u5927\u4E8E\u7B49\u4E8E 0.26.0\n ],\n },\n};\n
\n\u5982\u679C\u662F\u57FA\u4E8E webpack
\u7684\u9879\u76EE\uFF0C\u5728 webpack.config.js
\u6587\u4EF6\u4E2D\u914D\u7F6E\u63D2\u4EF6\uFF1A
const { VantResolver } = require('@vant/auto-import-resolver');\nconst ComponentsPlugin = require('unplugin-vue-components/webpack');\n\nmodule.exports = {\n plugins: [\n ComponentsPlugin({ resolvers: [VantResolver()] }), // \u5F53 unplugin-vue-components \u7248\u672C\u5C0F\u4E8E 0.26.0\n ComponentsPlugin.default({ resolvers: [VantResolver()] }), //\u5F53 unplugin-vue-components \u7248\u672C\u5927\u4E8E\u7B49\u4E8E 0.26.0\n ],\n};\n
\n\u5B8C\u6210\u4EE5\u4E0A\u4E24\u6B65\uFF0C\u5C31\u53EF\u4EE5\u76F4\u63A5\u5728\u6A21\u677F\u4E2D\u4F7F\u7528 Vant \u7EC4\u4EF6\u4E86\uFF0Cunplugin-vue-components
\u4F1A\u89E3\u6790\u6A21\u677F\u5E76\u81EA\u52A8\u6CE8\u518C\u5BF9\u5E94\u7684\u7EC4\u4EF6, @vant/auto-import-resolver
\u4F1A\u81EA\u52A8\u5F15\u5165\u5BF9\u5E94\u7684\u7EC4\u4EF6\u6837\u5F0F\u3002
<template>\n <van-button type="primary" />\n</template>\n
\nVant \u4E2D\u6709\u4E2A\u522B\u7EC4\u4EF6\u662F\u4EE5\u51FD\u6570\u7684\u5F62\u5F0F\u63D0\u4F9B\u7684\uFF0C\u5305\u62EC Toast
\uFF0CDialog
\uFF0CNotify
\u548C ImagePreview
\u7EC4\u4EF6\u3002\u5728\u4F7F\u7528\u51FD\u6570\u7EC4\u4EF6\u65F6\uFF0Cunplugin-vue-components
\u65E0\u6CD5\u89E3\u6790\u81EA\u52A8\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u5BFC\u81F4 @vant/auto-import-resolver
\u65E0\u6CD5\u89E3\u6790\u6837\u5F0F\uFF0C\u56E0\u6B64\u9700\u8981\u624B\u52A8\u5F15\u5165\u6837\u5F0F\u3002
// Toast\nimport { showToast } from 'vant';\nimport 'vant/es/toast/style';\n\n// Dialog\nimport { showDialog } from 'vant';\nimport 'vant/es/dialog/style';\n\n// Notify\nimport { showNotify } from 'vant';\nimport 'vant/es/notify/style';\n\n// ImagePreview\nimport { showImagePreview } from 'vant';\nimport 'vant/es/image-preview/style';\n
\n\u4F60\u53EF\u4EE5\u5728\u9879\u76EE\u7684\u5165\u53E3\u6587\u4EF6\u6216\u516C\u5171\u6A21\u5757\u4E2D\u5F15\u5165\u4EE5\u4E0A\u7EC4\u4EF6\u7684\u6837\u5F0F\uFF0C\u8FD9\u6837\u5728\u4E1A\u52A1\u4EE3\u7801\u4E2D\u4F7F\u7528\u7EC4\u4EF6\u65F6\uFF0C\u4FBF\u4E0D\u518D\u9700\u8981\u91CD\u590D\u5F15\u5165\u6837\u5F0F\u4E86\u3002
\n\u8BF7\u907F\u514D\u540C\u65F6\u4F7F\u7528\u300C\u5168\u91CF\u5F15\u5165\u300D\u548C\u300C\u6309\u9700\u5F15\u5165\u300D\u8FD9\u4E24\u79CD\u5F15\u5165\u65B9\u5F0F\uFF0C\u5426\u5219\u4F1A\u5BFC\u81F4\u4EE3\u7801\u91CD\u590D\u3001\u6837\u5F0F\u9519\u4E71\u7B49\u95EE\u9898\u3002
\n\u5728\u4F7F\u7528\u8FC7\u7A0B\u4E2D\uFF0C\u5982\u679C\u4F60\u9047\u5230\u7EC4\u4EF6\u4E0D\u80FD\u5BFC\u5165\u7684\u95EE\u9898\uFF0C\u56E0\u4E3A unplugin-vue-components \u5E76\u4E0D\u662F Vant \u5B98\u65B9\u7EF4\u62A4\u7684\u63D2\u4EF6\uFF0C\u6240\u4EE5\u5EFA\u8BAE\u5230 unplugin/unplugin-vue-components \u4ED3\u5E93\u4E0B\u53CD\u9988\u3002
\n\n\n\u63D0\u793A\uFF1A
\nunplugin-vue-components
\u5728\u7248\u672C\u53F7 >= 0.26.0 \u4EE5\u4E0A\u65F6\uFF0C\u5BF9\u4E8Ewebpack
\u3001vuecli
\u3001rspack
\u7684\uFF0C\u9700\u8981\u4F7F\u7528ComponentsPlugin.default
\u8FDB\u884C\u6CE8\u518C\u3002
@vant/auto-import-resolver
\u63D0\u4F9B\u4E86\u4E00\u4E9B\u914D\u7F6E\u9879\uFF0C\u8BF7\u53C2\u8003 README \u6587\u6863 \u6765\u4E86\u89E3\u66F4\u591A\u3002
\u5982\u679C\u662F\u6837\u5F0F\u4E0D\u751F\u6548\u7684\u76F8\u5173\u95EE\u9898\uFF0C\u4F60\u53EF\u4EE5\u5728 Vant \u4ED3\u5E93\u4E0B\u53CD\u9988\u3002
\n\u5728 Nuxt 3 \u4E2D\u4F7F\u7528 Vant \u65F6\uFF0C\u53EF\u4EE5\u4F7F\u7528 vant-nuxt \u6A21\u5757\uFF0C\u5B83\u53EF\u4EE5\u81EA\u52A8\u5F15\u5165\u7EC4\u4EF6\uFF0C\u5E76\u6309\u9700\u5F15\u5165\u7684\u6837\u5F0F\uFF08\u5305\u62EC\u51FD\u6570\u7EC4\u4EF6\uFF09\u3002
\n# \u901A\u8FC7 npm \u5B89\u88C5\nnpm i @vant/nuxt -D\n\n# \u901A\u8FC7 yarn \u5B89\u88C5\nyarn add @vant/nuxt -D\n\n# \u901A\u8FC7 pnpm \u5B89\u88C5\npnpm add @vant/nuxt -D\n\n# \u901A\u8FC7 Bun \u5B89\u88C5\nbun add @vant/nuxt -D\n
\n\u5728 nuxt.config.js
\u6587\u4EF6\u4E2D\u589E\u52A0\u6A21\u5757\uFF1A
export default defineNuxtConfig({\n modules: ['@vant/nuxt'],\n});\n
\n\u5B8C\u6210\u4EE5\u4E0A\u4E24\u6B65\uFF0C\u5C31\u53EF\u4EE5\u76F4\u63A5\u5728\u6A21\u677F\u4E2D\u4F7F\u7528 Vant \u7EC4\u4EF6\u4E86\u3002\u524D\u5F80 Nuxt \u6587\u6863 \u4E86\u89E3\u66F4\u591A\u3002
\n<template>\n <van-button type="primary" @click="showToast('toast')">button</van-button>\n <VanButton type="success" @click="showNotify('notify')">button</VanButton>\n <LazyVanButton type="default">lazy button</LazyVanButton>\n</template>\n
\n\u4ECE Vant 4.0 \u7248\u672C\u5F00\u59CB\uFF0C\u5C06\u4E0D\u518D\u652F\u6301 babel-plugin-import
\uFF0C\u8BF7\u79FB\u9664\u9879\u76EE\u4E2D\u4F9D\u8D56\u7684 babel-plugin-import
\u63D2\u4EF6\u3002
\u53EA\u9700\u8981\u5220\u9664 babel.config.js
\u4E2D\u7684\u4EE5\u4E0B\u4EE3\u7801\u5373\u53EF\uFF1A
module.exports = {\n plugins: [\n- ['import', {\n- libraryName: 'vant',\n- libraryDirectory: 'es',\n- style: true\n- }, 'vant']\n ]\n};\n
\n\u79FB\u9664 babel-plugin-import
\u6709\u4EE5\u4E0B\u6536\u76CA\uFF1A
babel-plugin-import
\u7684 import \u5199\u6CD5\u9650\u5236\uFF0C\u53EF\u4EE5\u4ECE vant \u4E2D\u5BFC\u5165\u9664\u4E86\u7EC4\u4EF6\u4EE5\u5916\u7684\u5176\u4ED6\u5185\u5BB9\uFF0C\u6BD4\u5982 Vant 4 \u4E2D\u65B0\u589E\u7684 showToast
\u7B49\u65B9\u6CD5\u3002import { showToast, showDialog } from 'vant';\n
\n\u901A\u8FC7\u672C\u7AE0\u8282\u4F60\u53EF\u4EE5\u4E86\u89E3\u5230 Vant \u7684\u5B89\u88C5\u65B9\u6CD5\u548C\u57FA\u672C\u4F7F\u7528\u59FF\u52BF\u3002
\n\u5728\u73B0\u6709\u9879\u76EE\u4E2D\u4F7F\u7528 Vant \u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7 npm
\u8FDB\u884C\u5B89\u88C5\uFF1A
# Vue 3 \u9879\u76EE\uFF0C\u5B89\u88C5\u6700\u65B0\u7248 Vant\nnpm i vant\n\n# Vue 2 \u9879\u76EE\uFF0C\u5B89\u88C5 Vant 2\nnpm i vant@latest-v2\n
\n\u5F53\u7136\uFF0C\u4F60\u4E5F\u53EF\u4EE5\u901A\u8FC7 yarn
\u3001pnpm
\u6216 bun
\u8FDB\u884C\u5B89\u88C5\uFF1A
# \u901A\u8FC7 yarn \u5B89\u88C5\nyarn add vant\n\n# \u901A\u8FC7 pnpm \u5B89\u88C5\npnpm add vant\n\n# \u901A\u8FC7 Bun \u5B89\u88C5\nbun add vant\n
\n\u5982\u679C\u4F60\u9700\u8981\u65B0\u5EFA\u4E00\u4E2A\u9879\u76EE\uFF0C\u6211\u4EEC\u63A8\u8350\u4F7F\u7528 Rsbuild\uFF0CVite \u6216 Nuxt \u6846\u67B6\u3002
\nRsbuild \u662F\u57FA\u4E8E Rspack \u7684\u6784\u5EFA\u5DE5\u5177\uFF0C\u7531 Vant \u4F5C\u8005\u5F00\u53D1\uFF0C\u5177\u5907\u4E00\u6D41\u7684\u6784\u5EFA\u901F\u5EA6\u548C\u5F00\u53D1\u4F53\u9A8C\uFF0C\u5BF9 Vant \u63D0\u4F9B\u7B2C\u4E00\u4F18\u5148\u7EA7\u652F\u6301\u3002
\n\u4F60\u53EF\u4EE5\u901A\u8FC7\u4EE5\u4E0B\u547D\u4EE4\u521B\u5EFA\u4E00\u4E2A Rsbuild \u9879\u76EE\uFF1A
\nnpm create rsbuild@latest\n
\n\u8BF7\u8BBF\u95EE Rsbuild \u4ED3\u5E93 \u4E86\u89E3\u66F4\u591A\u4FE1\u606F\u3002
\n\u4EE5\u4E0B\u662F Vant \u5B98\u65B9\u63D0\u4F9B\u7684\u4E00\u4E9B\u793A\u4F8B\u9879\u76EE\uFF0C\u4F60\u53EF\u4EE5\u514B\u9686\u8BE5\u9879\u76EE\uFF0C\u5E76\u76F4\u63A5\u62F7\u8D1D\u4EE3\u7801\u6765\u4F7F\u7528\u3002
\n\u5982\u679C\u4F60\u53EA\u9700\u8981\u5F00\u53D1\u4E00\u4E2A\u7B80\u5355\u7684 HTML \u9875\u9762\uFF0C\u90A3\u4E48\u53EF\u4EE5\u76F4\u63A5\u5728 HTML \u6587\u4EF6\u4E2D\u5F15\u5165 CDN \u94FE\u63A5\uFF0C\u4E4B\u540E\u4F60\u53EF\u4EE5\u901A\u8FC7\u5168\u5C40\u53D8\u91CF vant
\u8BBF\u95EE\u5230\u6240\u6709\u7EC4\u4EF6\u3002
<!-- \u5F15\u5165\u6837\u5F0F\u6587\u4EF6 -->\n<link\n rel="stylesheet"\n href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"\n/>\n\n<!-- \u5F15\u5165 Vue \u548C Vant \u7684 JS \u6587\u4EF6 -->\n<script src="https://fastly.jsdelivr.net/npm/vue@3"></script>\n<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>\n\n<script>\n // \u5728 #app \u6807\u7B7E\u4E0B\u6E32\u67D3\u4E00\u4E2A\u6309\u94AE\u7EC4\u4EF6\n const app = Vue.createApp({\n template: `<van-button>\u6309\u94AE</van-button>`,\n });\n app.use(vant);\n\n // \u901A\u8FC7 CDN \u5F15\u5165\u65F6\u4E0D\u4F1A\u81EA\u52A8\u6CE8\u518C Lazyload \u7EC4\u4EF6\n // \u53EF\u4EE5\u901A\u8FC7\u4E0B\u9762\u7684\u65B9\u5F0F\u624B\u52A8\u6CE8\u518C\n app.use(vant.Lazyload);\n\n // \u8C03\u7528\u5DE5\u5177\u51FD\u6570\uFF0C\u5F39\u51FA\u4E00\u4E2A Toast\n vant.showToast('\u63D0\u793A');\n\n app.mount('#app');\n</script>\n
\n\u4F60\u53EF\u4EE5\u901A\u8FC7\u4EE5\u4E0B\u514D\u8D39 CDN \u670D\u52A1\u6765\u4F7F\u7528 Vant:
\n\n\u6CE8\u610F\uFF1A\u514D\u8D39 CDN \u4E00\u822C\u7528\u4E8E\u5236\u4F5C\u539F\u578B\u6216\u4E2A\u4EBA\u5C0F\u578B\u9879\u76EE\uFF0C\u4E0D\u63A8\u8350\u5728\u4F01\u4E1A\u751F\u4EA7\u73AF\u5883\u4E2D\u4F7F\u7528\u514D\u8D39 CDN\u3002
\n\u5BF9\u4E8E\u4F01\u4E1A\u5F00\u53D1\u8005\uFF0C\u5EFA\u8BAE\u4F7F\u7528\u4EE5\u4E0B\u65B9\u5F0F\uFF1A
\n\u6211\u4EEC\u63D0\u4F9B\u4E86\u4E30\u5BCC\u7684\u793A\u4F8B\u5DE5\u7A0B\uFF0C\u901A\u8FC7\u793A\u4F8B\u5DE5\u7A0B\u4F60\u53EF\u4EE5\u4E86\u89E3\u5982\u4E0B\u5185\u5BB9\uFF1A
\n\u4E0B\u9762\u662F\u4F7F\u7528 Vant \u7EC4\u4EF6\u7684\u7528\u6CD5\u793A\u4F8B\uFF1A
\nimport { createApp } from 'vue';\n// 1. \u5F15\u5165\u4F60\u9700\u8981\u7684\u7EC4\u4EF6\nimport { Button } from 'vant';\n// 2. \u5F15\u5165\u7EC4\u4EF6\u6837\u5F0F\nimport 'vant/lib/index.css';\n\nconst app = createApp();\n\n// 3. \u6CE8\u518C\u4F60\u9700\u8981\u7684\u7EC4\u4EF6\napp.use(Button);\n
\nVant \u652F\u6301\u591A\u79CD\u7EC4\u4EF6\u6CE8\u518C\u65B9\u5F0F\uFF0C\u9664\u4E86\u5728 app \u4E0A\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u4F60\u4E5F\u53EF\u4EE5\u9009\u62E9\u5176\u4ED6\u7684\u65B9\u5F0F\uFF0C\u6BD4\u5982\u5C40\u90E8\u6CE8\u518C\uFF0C\u8BE6\u89C1 \u7EC4\u4EF6\u6CE8\u518C \u7AE0\u8282\u3002
\n\n\n\u63D0\u793A\uFF1AVant \u9ED8\u8BA4\u652F\u6301 Tree Shaking\uFF0C\u56E0\u6B64\u4F60\u4E0D\u9700\u8981\u914D\u7F6E\u4EFB\u4F55\u63D2\u4EF6\uFF0C\u901A\u8FC7 Tree Shaking \u5373\u53EF\u79FB\u9664\u4E0D\u9700\u8981\u7684 JS \u4EE3\u7801\uFF0C\u4F46 CSS \u6837\u5F0F\u65E0\u6CD5\u901A\u8FC7\u8FD9\u79CD\u65B9\u5F0F\u4F18\u5316\uFF0C\u5982\u679C\u9700\u8981\u6309\u9700\u5F15\u5165 CSS \u6837\u5F0F\uFF0C\u8BF7\u53C2\u8003\u4E0B\u9762\u7684\u65B9\u6CD5\u4E8C\u3002
\n
\u5728\u57FA\u4E8E vite
\u3001webpack
\u6216 vue-cli
\u7684\u9879\u76EE\u4E2D\u4F7F\u7528 Vant \u65F6\uFF0C\u53EF\u4EE5\u4F7F\u7528 unplugin-vue-components \u63D2\u4EF6\uFF0C\u5B83\u53EF\u4EE5\u81EA\u52A8\u5F15\u5165\u7EC4\u4EF6\u3002
Vant \u5B98\u65B9\u57FA\u4E8E unplugin-vue-components
\u63D0\u4F9B\u4E86\u81EA\u52A8\u5BFC\u5165\u6837\u5F0F\u7684\u89E3\u6790\u5668 @vant/auto-import-resolver\uFF0C\u4E24\u8005\u53EF\u4EE5\u914D\u5408\u4F7F\u7528\u3002
\u76F8\u6BD4\u4E8E\u5E38\u89C4\u7528\u6CD5\uFF0C\u8FD9\u79CD\u65B9\u5F0F\u53EF\u4EE5\u6309\u9700\u5F15\u5165\u7EC4\u4EF6\u7684 CSS \u6837\u5F0F\uFF0C\u4ECE\u800C\u51CF\u5C11\u4E00\u90E8\u5206\u4EE3\u7801\u4F53\u79EF\uFF0C\u4F46\u4F7F\u7528\u8D77\u6765\u4F1A\u53D8\u5F97\u7E41\u7410\u4E00\u4E9B\u3002\u5982\u679C\u4E1A\u52A1\u5BF9 CSS \u7684\u4F53\u79EF\u8981\u6C42\u4E0D\u662F\u7279\u522B\u6781\u81F4\uFF0C\u6211\u4EEC\u63A8\u8350\u4F7F\u7528\u66F4\u7B80\u4FBF\u7684\u5E38\u89C4\u7528\u6CD5\u3002
\n# \u901A\u8FC7 npm \u5B89\u88C5\nnpm i @vant/auto-import-resolver unplugin-vue-components -D\n\n# \u901A\u8FC7 yarn \u5B89\u88C5\nyarn add @vant/auto-import-resolver unplugin-vue-components -D\n\n# \u901A\u8FC7 pnpm \u5B89\u88C5\npnpm add @vant/auto-import-resolver unplugin-vue-components -D\n\n# \u901A\u8FC7 bun \u5B89\u88C5\nbun add @vant/auto-import-resolver unplugin-vue-components -D\n
\n\u5982\u679C\u662F\u57FA\u4E8E vite
\u7684\u9879\u76EE\uFF0C\u5728 vite.config.js
\u6587\u4EF6\u4E2D\u914D\u7F6E\u63D2\u4EF6\uFF1A
import vue from '@vitejs/plugin-vue';\nimport Components from 'unplugin-vue-components/vite';\nimport { VantResolver } from '@vant/auto-import-resolver';\n\nexport default {\n plugins: [\n vue(),\n Components({\n resolvers: [VantResolver()],\n }),\n ],\n};\n
\n\u5982\u679C\u662F\u57FA\u4E8E vue-cli
\u7684\u9879\u76EE\uFF0C\u5728 vue.config.js
\u6587\u4EF6\u4E2D\u914D\u7F6E\u63D2\u4EF6\uFF1A
const { VantResolver } = require('@vant/auto-import-resolver');\nconst ComponentsPlugin = require('unplugin-vue-components/webpack');\n\nmodule.exports = {\n configureWebpack: {\n plugins: [\n ComponentsPlugin({ resolvers: [VantResolver()] }), // \u5F53 unplugin-vue-components \u7248\u672C\u5C0F\u4E8E 0.26.0\n ComponentsPlugin.default({ resolvers: [VantResolver()] }), //\u5F53 unplugin-vue-components \u7248\u672C\u5927\u4E8E\u7B49\u4E8E 0.26.0\n ],\n },\n};\n
\n\u5982\u679C\u662F\u57FA\u4E8E webpack
\u7684\u9879\u76EE\uFF0C\u5728 webpack.config.js
\u6587\u4EF6\u4E2D\u914D\u7F6E\u63D2\u4EF6\uFF1A
const { VantResolver } = require('@vant/auto-import-resolver');\nconst ComponentsPlugin = require('unplugin-vue-components/webpack');\n\nmodule.exports = {\n plugins: [\n ComponentsPlugin({ resolvers: [VantResolver()] }), // \u5F53 unplugin-vue-components \u7248\u672C\u5C0F\u4E8E 0.26.0\n ComponentsPlugin.default({ resolvers: [VantResolver()] }), //\u5F53 unplugin-vue-components \u7248\u672C\u5927\u4E8E\u7B49\u4E8E 0.26.0\n ],\n};\n
\n\u5B8C\u6210\u4EE5\u4E0A\u4E24\u6B65\uFF0C\u5C31\u53EF\u4EE5\u76F4\u63A5\u5728\u6A21\u677F\u4E2D\u4F7F\u7528 Vant \u7EC4\u4EF6\u4E86\uFF0Cunplugin-vue-components
\u4F1A\u89E3\u6790\u6A21\u677F\u5E76\u81EA\u52A8\u6CE8\u518C\u5BF9\u5E94\u7684\u7EC4\u4EF6, @vant/auto-import-resolver
\u4F1A\u81EA\u52A8\u5F15\u5165\u5BF9\u5E94\u7684\u7EC4\u4EF6\u6837\u5F0F\u3002
<template>\n <van-button type="primary" />\n</template>\n
\nVant \u4E2D\u6709\u4E2A\u522B\u7EC4\u4EF6\u662F\u4EE5\u51FD\u6570\u7684\u5F62\u5F0F\u63D0\u4F9B\u7684\uFF0C\u5305\u62EC Toast
\uFF0CDialog
\uFF0CNotify
\u548C ImagePreview
\u7EC4\u4EF6\u3002\u5728\u4F7F\u7528\u51FD\u6570\u7EC4\u4EF6\u65F6\uFF0Cunplugin-vue-components
\u65E0\u6CD5\u89E3\u6790\u81EA\u52A8\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u5BFC\u81F4 @vant/auto-import-resolver
\u65E0\u6CD5\u89E3\u6790\u6837\u5F0F\uFF0C\u56E0\u6B64\u9700\u8981\u624B\u52A8\u5F15\u5165\u6837\u5F0F\u3002
// Toast\nimport { showToast } from 'vant';\nimport 'vant/es/toast/style';\n\n// Dialog\nimport { showDialog } from 'vant';\nimport 'vant/es/dialog/style';\n\n// Notify\nimport { showNotify } from 'vant';\nimport 'vant/es/notify/style';\n\n// ImagePreview\nimport { showImagePreview } from 'vant';\nimport 'vant/es/image-preview/style';\n
\n\u4F60\u53EF\u4EE5\u5728\u9879\u76EE\u7684\u5165\u53E3\u6587\u4EF6\u6216\u516C\u5171\u6A21\u5757\u4E2D\u5F15\u5165\u4EE5\u4E0A\u7EC4\u4EF6\u7684\u6837\u5F0F\uFF0C\u8FD9\u6837\u5728\u4E1A\u52A1\u4EE3\u7801\u4E2D\u4F7F\u7528\u7EC4\u4EF6\u65F6\uFF0C\u4FBF\u4E0D\u518D\u9700\u8981\u91CD\u590D\u5F15\u5165\u6837\u5F0F\u4E86\u3002
\n\u8BF7\u907F\u514D\u540C\u65F6\u4F7F\u7528\u300C\u5168\u91CF\u5F15\u5165\u300D\u548C\u300C\u6309\u9700\u5F15\u5165\u300D\u8FD9\u4E24\u79CD\u5F15\u5165\u65B9\u5F0F\uFF0C\u5426\u5219\u4F1A\u5BFC\u81F4\u4EE3\u7801\u91CD\u590D\u3001\u6837\u5F0F\u9519\u4E71\u7B49\u95EE\u9898\u3002
\n\u5728\u4F7F\u7528\u8FC7\u7A0B\u4E2D\uFF0C\u5982\u679C\u4F60\u9047\u5230\u7EC4\u4EF6\u4E0D\u80FD\u5BFC\u5165\u7684\u95EE\u9898\uFF0C\u56E0\u4E3A unplugin-vue-components \u5E76\u4E0D\u662F Vant \u5B98\u65B9\u7EF4\u62A4\u7684\u63D2\u4EF6\uFF0C\u6240\u4EE5\u5EFA\u8BAE\u5230 unplugin/unplugin-vue-components \u4ED3\u5E93\u4E0B\u53CD\u9988\u3002
\n\n\n\u63D0\u793A\uFF1A
\nunplugin-vue-components
\u5728\u7248\u672C\u53F7 >= 0.26.0 \u4EE5\u4E0A\u65F6\uFF0C\u5BF9\u4E8Ewebpack
\u3001vuecli
\u3001rspack
\u7684\uFF0C\u9700\u8981\u4F7F\u7528ComponentsPlugin.default
\u8FDB\u884C\u6CE8\u518C\u3002
@vant/auto-import-resolver
\u63D0\u4F9B\u4E86\u4E00\u4E9B\u914D\u7F6E\u9879\uFF0C\u8BF7\u53C2\u8003 README \u6587\u6863 \u6765\u4E86\u89E3\u66F4\u591A\u3002
\u5982\u679C\u662F\u6837\u5F0F\u4E0D\u751F\u6548\u7684\u76F8\u5173\u95EE\u9898\uFF0C\u4F60\u53EF\u4EE5\u5728 Vant \u4ED3\u5E93\u4E0B\u53CD\u9988\u3002
\n\u5728 Nuxt 3 \u4E2D\u4F7F\u7528 Vant \u65F6\uFF0C\u53EF\u4EE5\u4F7F\u7528 vant-nuxt \u6A21\u5757\uFF0C\u5B83\u53EF\u4EE5\u81EA\u52A8\u5F15\u5165\u7EC4\u4EF6\uFF0C\u5E76\u6309\u9700\u5F15\u5165\u7684\u6837\u5F0F\uFF08\u5305\u62EC\u51FD\u6570\u7EC4\u4EF6\uFF09\u3002
\n# \u901A\u8FC7 npm \u5B89\u88C5\nnpm i @vant/nuxt -D\n\n# \u901A\u8FC7 yarn \u5B89\u88C5\nyarn add @vant/nuxt -D\n\n# \u901A\u8FC7 pnpm \u5B89\u88C5\npnpm add @vant/nuxt -D\n\n# \u901A\u8FC7 Bun \u5B89\u88C5\nbun add @vant/nuxt -D\n
\n\u5728 nuxt.config.js
\u6587\u4EF6\u4E2D\u589E\u52A0\u6A21\u5757\uFF1A
export default defineNuxtConfig({\n modules: ['@vant/nuxt'],\n});\n
\n\u5B8C\u6210\u4EE5\u4E0A\u4E24\u6B65\uFF0C\u5C31\u53EF\u4EE5\u76F4\u63A5\u5728\u6A21\u677F\u4E2D\u4F7F\u7528 Vant \u7EC4\u4EF6\u4E86\u3002\u524D\u5F80 Nuxt \u6587\u6863 \u4E86\u89E3\u66F4\u591A\u3002
\n<template>\n <van-button type="primary" @click="showToast('toast')">button</van-button>\n <VanButton type="success" @click="showNotify('notify')">button</VanButton>\n <LazyVanButton type="default">lazy button</LazyVanButton>\n</template>\n
\n\u4ECE Vant 4.0 \u7248\u672C\u5F00\u59CB\uFF0C\u5C06\u4E0D\u518D\u652F\u6301 babel-plugin-import
\uFF0C\u8BF7\u79FB\u9664\u9879\u76EE\u4E2D\u4F9D\u8D56\u7684 babel-plugin-import
\u63D2\u4EF6\u3002
\u53EA\u9700\u8981\u5220\u9664 babel.config.js
\u4E2D\u7684\u4EE5\u4E0B\u4EE3\u7801\u5373\u53EF\uFF1A
module.exports = {\n plugins: [\n- ['import', {\n- libraryName: 'vant',\n- libraryDirectory: 'es',\n- style: true\n- }, 'vant']\n ]\n};\n
\n\u79FB\u9664 babel-plugin-import
\u6709\u4EE5\u4E0B\u6536\u76CA\uFF1A
babel-plugin-import
\u7684 import \u5199\u6CD5\u9650\u5236\uFF0C\u53EF\u4EE5\u4ECE vant \u4E2D\u5BFC\u5165\u9664\u4E86\u7EC4\u4EF6\u4EE5\u5916\u7684\u5176\u4ED6\u5185\u5BB9\uFF0C\u6BD4\u5982 Vant 4 \u4E2D\u65B0\u589E\u7684 showToast
\u7B49\u65B9\u6CD5\u3002import { showToast, showDialog } from 'vant';\n
\n\u7528\u4E8E\u63D0\u4F9B\u4E0B\u62C9\u5237\u65B0\u7684\u4EA4\u4E92\u64CD\u4F5C\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { PullRefresh } from 'vant';\n\nconst app = createApp();\napp.use(PullRefresh);\n
\n\u4E0B\u62C9\u5237\u65B0\u65F6\u4F1A\u89E6\u53D1 refresh
\u4E8B\u4EF6\uFF0C\u5728\u4E8B\u4EF6\u7684\u56DE\u8C03\u51FD\u6570\u4E2D\u53EF\u4EE5\u8FDB\u884C\u540C\u6B65\u6216\u5F02\u6B65\u64CD\u4F5C\uFF0C\u64CD\u4F5C\u5B8C\u6210\u540E\u5C06 v-model
\u8BBE\u7F6E\u4E3A false
\uFF0C\u8868\u793A\u52A0\u8F7D\u5B8C\u6210\u3002
<van-pull-refresh v-model="loading" @refresh="onRefresh">\n <p>\u5237\u65B0\u6B21\u6570: {{ count }}</p>\n</van-pull-refresh>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const count = ref(0);\n const loading = ref(false);\n const onRefresh = () => {\n setTimeout(() => {\n showToast('\u5237\u65B0\u6210\u529F');\n loading.value = false;\n count.value++;\n }, 1000);\n };\n\n return {\n count,\n loading,\n onRefresh,\n };\n },\n};\n
\n\u901A\u8FC7 success-text
\u53EF\u4EE5\u8BBE\u7F6E\u5237\u65B0\u6210\u529F\u540E\u7684\u9876\u90E8\u63D0\u793A\u6587\u6848\u3002
<van-pull-refresh\n v-model="isLoading"\n success-text="\u5237\u65B0\u6210\u529F"\n @refresh="onRefresh"\n>\n <p>\u5237\u65B0\u6B21\u6570: {{ count }}</p>\n</van-pull-refresh>\n
\n\u901A\u8FC7\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u4E0B\u62C9\u5237\u65B0\u8FC7\u7A0B\u4E2D\u7684\u63D0\u793A\u5185\u5BB9\u3002
\n<van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">\n <!-- \u4E0B\u62C9\u63D0\u793A\uFF0C\u901A\u8FC7 scale \u5B9E\u73B0\u4E00\u4E2A\u7F29\u653E\u6548\u679C -->\n <template #pulling="props">\n <img\n class="doge"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"\n :style="{ transform: `scale(${props.distance / 80})` }"\n />\n </template>\n\n <!-- \u91CA\u653E\u63D0\u793A -->\n <template #loosing>\n <img\n class="doge"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"\n />\n </template>\n\n <!-- \u52A0\u8F7D\u63D0\u793A -->\n <template #loading>\n <img\n class="doge"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/doge-fire.jpeg"\n />\n </template>\n <p>\u5237\u65B0\u6B21\u6570: {{ count }}</p>\n</van-pull-refresh>\n\n<style>\n .doge {\n width: 140px;\n height: 72px;\n margin-top: 8px;\n border-radius: 4px;\n }\n</style>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u662F\u5426\u5904\u4E8E\u52A0\u8F7D\u4E2D\u72B6\u6001 | \nboolean | \n- | \n
pulling-text | \n\u4E0B\u62C9\u8FC7\u7A0B\u63D0\u793A\u6587\u6848 | \nstring | \n\u4E0B\u62C9\u5373\u53EF\u5237\u65B0... | \n
loosing-text | \n\u91CA\u653E\u8FC7\u7A0B\u63D0\u793A\u6587\u6848 | \nstring | \n\u91CA\u653E\u5373\u53EF\u5237\u65B0... | \n
loading-text | \n\u52A0\u8F7D\u8FC7\u7A0B\u63D0\u793A\u6587\u6848 | \nstring | \n\u52A0\u8F7D\u4E2D... | \n
success-text | \n\u5237\u65B0\u6210\u529F\u63D0\u793A\u6587\u6848 | \nstring | \n- | \n
success-duration | \n\u5237\u65B0\u6210\u529F\u63D0\u793A\u5C55\u793A\u65F6\u957F(ms) | \nnumber | string | \n500 | \n
animation-duration | \n\u52A8\u753B\u65F6\u957F | \nnumber | string | \n300 | \n
head-height | \n\u9876\u90E8\u5185\u5BB9\u9AD8\u5EA6 | \nnumber | string | \n50 | \n
pull-distance | \n\u89E6\u53D1\u4E0B\u62C9\u5237\u65B0\u7684\u8DDD\u79BB | \nnumber | string | \n\u4E0E head-height \u4E00\u81F4 | \n
disabled | \n\u662F\u5426\u7981\u7528\u4E0B\u62C9\u5237\u65B0 | \nboolean | \nfalse | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
refresh | \n\u4E0B\u62C9\u5237\u65B0\u65F6\u89E6\u53D1 | \n- | \n
change | \n\u62D6\u52A8\u65F6\u6216\u72B6\u6001\u6539\u53D8\u65F6\u89E6\u53D1 | \n{ status: string, distance: number } | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
default | \n\u81EA\u5B9A\u4E49\u5185\u5BB9 | \n- | \n
normal | \n\u975E\u4E0B\u62C9\u72B6\u6001\u65F6\u9876\u90E8\u5185\u5BB9 | \n- | \n
pulling | \n\u4E0B\u62C9\u8FC7\u7A0B\u4E2D\u9876\u90E8\u5185\u5BB9 | \n{ distance: number } | \n
loosing | \n\u91CA\u653E\u8FC7\u7A0B\u4E2D\u9876\u90E8\u5185\u5BB9 | \n{ distance: number } | \n
loading | \n\u52A0\u8F7D\u8FC7\u7A0B\u4E2D\u9876\u90E8\u5185\u5BB9 | \n{ distance: number } | \n
success | \n\u5237\u65B0\u6210\u529F\u63D0\u793A\u5185\u5BB9 | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { PullRefreshProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-pull-refresh-head-height | \n50px | \n- | \n
--van-pull-refresh-head-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-pull-refresh-head-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-pull-refresh-loading-icon-size | \n16px | \n- | \n
\u9ED8\u8BA4\u60C5\u51B5\u4E0B\uFF0C\u4E0B\u62C9\u533A\u57DF\u7684\u9AD8\u5EA6\u662F\u548C\u5185\u5BB9\u9AD8\u5EA6\u4FDD\u6301\u4E00\u81F4\u7684\uFF0C\u5982\u679C\u9700\u8981\u8BA9\u4E0B\u62C9\u533A\u57DF\u59CB\u7EC8\u4E3A\u5168\u5C4F\uFF0C\u53EF\u4EE5\u7ED9 PullRefresh \u8BBE\u7F6E\u4E00\u4E2A\u4E0E\u5C4F\u5E55\u5927\u5C0F\u76F8\u7B49\u7684\u6700\u5C0F\u9AD8\u5EA6\uFF1A
\n<van-pull-refresh style="min-height: 100vh;" />\n
\nPullRefresh \u7684\u89E6\u53D1\u6761\u4EF6\u662F\u300C\u7236\u7EA7\u6EDA\u52A8\u5143\u7D20\u7684\u6EDA\u52A8\u6761\u5728\u9876\u90E8\u4F4D\u7F6E\u300D\u3002
\nwindow
\uFF0C\u5219\u8981\u6C42 window.pageYOffset === 0
\u3002Element
\uFF0C\u5219\u8981\u6C42 Element.scrollTop === 0
\u3002\u53C2\u89C1\u684C\u9762\u7AEF\u9002\u914D\u3002
\n\u7528\u4E8E\u63D0\u4F9B\u4E0B\u62C9\u5237\u65B0\u7684\u4EA4\u4E92\u64CD\u4F5C\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { PullRefresh } from 'vant';\n\nconst app = createApp();\napp.use(PullRefresh);\n
\n\u4E0B\u62C9\u5237\u65B0\u65F6\u4F1A\u89E6\u53D1 refresh
\u4E8B\u4EF6\uFF0C\u5728\u4E8B\u4EF6\u7684\u56DE\u8C03\u51FD\u6570\u4E2D\u53EF\u4EE5\u8FDB\u884C\u540C\u6B65\u6216\u5F02\u6B65\u64CD\u4F5C\uFF0C\u64CD\u4F5C\u5B8C\u6210\u540E\u5C06 v-model
\u8BBE\u7F6E\u4E3A false
\uFF0C\u8868\u793A\u52A0\u8F7D\u5B8C\u6210\u3002
<van-pull-refresh v-model="loading" @refresh="onRefresh">\n <p>\u5237\u65B0\u6B21\u6570: {{ count }}</p>\n</van-pull-refresh>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const count = ref(0);\n const loading = ref(false);\n const onRefresh = () => {\n setTimeout(() => {\n showToast('\u5237\u65B0\u6210\u529F');\n loading.value = false;\n count.value++;\n }, 1000);\n };\n\n return {\n count,\n loading,\n onRefresh,\n };\n },\n};\n
\n\u901A\u8FC7 success-text
\u53EF\u4EE5\u8BBE\u7F6E\u5237\u65B0\u6210\u529F\u540E\u7684\u9876\u90E8\u63D0\u793A\u6587\u6848\u3002
<van-pull-refresh\n v-model="isLoading"\n success-text="\u5237\u65B0\u6210\u529F"\n @refresh="onRefresh"\n>\n <p>\u5237\u65B0\u6B21\u6570: {{ count }}</p>\n</van-pull-refresh>\n
\n\u901A\u8FC7\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u4E0B\u62C9\u5237\u65B0\u8FC7\u7A0B\u4E2D\u7684\u63D0\u793A\u5185\u5BB9\u3002
\n<van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">\n <!-- \u4E0B\u62C9\u63D0\u793A\uFF0C\u901A\u8FC7 scale \u5B9E\u73B0\u4E00\u4E2A\u7F29\u653E\u6548\u679C -->\n <template #pulling="props">\n <img\n class="doge"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"\n :style="{ transform: `scale(${props.distance / 80})` }"\n />\n </template>\n\n <!-- \u91CA\u653E\u63D0\u793A -->\n <template #loosing>\n <img\n class="doge"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"\n />\n </template>\n\n <!-- \u52A0\u8F7D\u63D0\u793A -->\n <template #loading>\n <img\n class="doge"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/doge-fire.jpeg"\n />\n </template>\n <p>\u5237\u65B0\u6B21\u6570: {{ count }}</p>\n</van-pull-refresh>\n\n<style>\n .doge {\n width: 140px;\n height: 72px;\n margin-top: 8px;\n border-radius: 4px;\n }\n</style>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u662F\u5426\u5904\u4E8E\u52A0\u8F7D\u4E2D\u72B6\u6001 | \nboolean | \n- | \n
pulling-text | \n\u4E0B\u62C9\u8FC7\u7A0B\u63D0\u793A\u6587\u6848 | \nstring | \n\u4E0B\u62C9\u5373\u53EF\u5237\u65B0... | \n
loosing-text | \n\u91CA\u653E\u8FC7\u7A0B\u63D0\u793A\u6587\u6848 | \nstring | \n\u91CA\u653E\u5373\u53EF\u5237\u65B0... | \n
loading-text | \n\u52A0\u8F7D\u8FC7\u7A0B\u63D0\u793A\u6587\u6848 | \nstring | \n\u52A0\u8F7D\u4E2D... | \n
success-text | \n\u5237\u65B0\u6210\u529F\u63D0\u793A\u6587\u6848 | \nstring | \n- | \n
success-duration | \n\u5237\u65B0\u6210\u529F\u63D0\u793A\u5C55\u793A\u65F6\u957F(ms) | \nnumber | string | \n500 | \n
animation-duration | \n\u52A8\u753B\u65F6\u957F | \nnumber | string | \n300 | \n
head-height | \n\u9876\u90E8\u5185\u5BB9\u9AD8\u5EA6 | \nnumber | string | \n50 | \n
pull-distance | \n\u89E6\u53D1\u4E0B\u62C9\u5237\u65B0\u7684\u8DDD\u79BB | \nnumber | string | \n\u4E0E head-height \u4E00\u81F4 | \n
disabled | \n\u662F\u5426\u7981\u7528\u4E0B\u62C9\u5237\u65B0 | \nboolean | \nfalse | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
refresh | \n\u4E0B\u62C9\u5237\u65B0\u65F6\u89E6\u53D1 | \n- | \n
change | \n\u62D6\u52A8\u65F6\u6216\u72B6\u6001\u6539\u53D8\u65F6\u89E6\u53D1 | \n{ status: string, distance: number } | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
default | \n\u81EA\u5B9A\u4E49\u5185\u5BB9 | \n- | \n
normal | \n\u975E\u4E0B\u62C9\u72B6\u6001\u65F6\u9876\u90E8\u5185\u5BB9 | \n- | \n
pulling | \n\u4E0B\u62C9\u8FC7\u7A0B\u4E2D\u9876\u90E8\u5185\u5BB9 | \n{ distance: number } | \n
loosing | \n\u91CA\u653E\u8FC7\u7A0B\u4E2D\u9876\u90E8\u5185\u5BB9 | \n{ distance: number } | \n
loading | \n\u52A0\u8F7D\u8FC7\u7A0B\u4E2D\u9876\u90E8\u5185\u5BB9 | \n{ distance: number } | \n
success | \n\u5237\u65B0\u6210\u529F\u63D0\u793A\u5185\u5BB9 | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { PullRefreshProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-pull-refresh-head-height | \n50px | \n- | \n
--van-pull-refresh-head-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-pull-refresh-head-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-pull-refresh-loading-icon-size | \n16px | \n- | \n
\u9ED8\u8BA4\u60C5\u51B5\u4E0B\uFF0C\u4E0B\u62C9\u533A\u57DF\u7684\u9AD8\u5EA6\u662F\u548C\u5185\u5BB9\u9AD8\u5EA6\u4FDD\u6301\u4E00\u81F4\u7684\uFF0C\u5982\u679C\u9700\u8981\u8BA9\u4E0B\u62C9\u533A\u57DF\u59CB\u7EC8\u4E3A\u5168\u5C4F\uFF0C\u53EF\u4EE5\u7ED9 PullRefresh \u8BBE\u7F6E\u4E00\u4E2A\u4E0E\u5C4F\u5E55\u5927\u5C0F\u76F8\u7B49\u7684\u6700\u5C0F\u9AD8\u5EA6\uFF1A
\n<van-pull-refresh style="min-height: 100vh;" />\n
\nPullRefresh \u7684\u89E6\u53D1\u6761\u4EF6\u662F\u300C\u7236\u7EA7\u6EDA\u52A8\u5143\u7D20\u7684\u6EDA\u52A8\u6761\u5728\u9876\u90E8\u4F4D\u7F6E\u300D\u3002
\nwindow
\uFF0C\u5219\u8981\u6C42 window.pageYOffset === 0
\u3002Element
\uFF0C\u5219\u8981\u6C42 Element.scrollTop === 0
\u3002\u53C2\u89C1\u684C\u9762\u7AEF\u9002\u914D\u3002
\nUsed to show the various parts of the action flow and let the user know where the current action fits into the overall flow.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Step, Steps } from 'vant';\n\nconst app = createApp();\napp.use(Step);\napp.use(Steps);\n
\n<van-steps :active="active">\n <van-step>Step1</van-step>\n <van-step>Step2</van-step>\n <van-step>Step3</van-step>\n <van-step>Step4</van-step>\n</van-steps>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref(1);\n return { active };\n },\n};\n
\n<van-steps :active="active" active-icon="success" active-color="#07c160">\n <van-step>Step1</van-step>\n <van-step>Step2</van-step>\n <van-step>Step3</van-step>\n <van-step>Step4</van-step>\n</van-steps>\n
\n<van-steps direction="vertical" :active="0">\n <van-step>\n <h3>\u3010City\u3011Status1</h3>\n <p>2016-07-12 12:40</p>\n </van-step>\n <van-step>\n <h3>\u3010City\u3011Status2</h3>\n <p>2016-07-11 10:00</p>\n </van-step>\n <van-step>\n <h3>\u3010City\u3011Status3</h3>\n <p>2016-07-10 09:30</p>\n </van-step>\n</van-steps>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
active | \nActive step | \nnumber | string | \n0 | \n
direction | \nCan be set to vertical | \nstring | \nhorizontal | \n
active-color | \nActive step color | \nstring | \n#07c160 | \n
inactive-color | \nInactive step color | \nstring | \n#969799 | \n
active-icon | \nActive icon name | \nstring | \nchecked | \n
inactive-icon | \nInactive icon name | \nstring | \n- | \n
finish-icon | \nFinish icon name | \nstring | \n- | \n
icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
Name | \nDescription | \n
---|---|
default | \nStep content | \n
active-icon | \nCustom active icon | \n
inactive-icon | \nCustom inactive icon | \n
finish-icon | \nCustom finish icon | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click-step | \nEmitted when a step\'s title or icon is clicked | \nindex: number | \n
The component exports the following type definitions:
\nimport type { StepsProps, StepsDirection } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-step-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-step-active-color | \nvar(--van-primary-color) | \n- | \n
--van-step-process-text-color | \nvar(--van-text-color) | \n- | \n
--van-step-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-step-line-color | \nvar(--van-border-color) | \n- | \n
--van-step-finish-line-color | \nvar(--van-primary-color) | \n- | \n
--van-step-finish-text-color | \nvar(--van-text-color) | \n- | \n
--van-step-icon-size | \n12px | \n- | \n
--van-step-circle-size | \n5px | \n- | \n
--van-step-circle-color | \nvar(--van-gray-6) | \n- | \n
--van-step-horizontal-title-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-steps-background | \nvar(--van-background-2) | \n- | \n
Used to show the various parts of the action flow and let the user know where the current action fits into the overall flow.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Step, Steps } from 'vant';\n\nconst app = createApp();\napp.use(Step);\napp.use(Steps);\n
\n<van-steps :active="active">\n <van-step>Step1</van-step>\n <van-step>Step2</van-step>\n <van-step>Step3</van-step>\n <van-step>Step4</van-step>\n</van-steps>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref(1);\n return { active };\n },\n};\n
\n<van-steps :active="active" active-icon="success" active-color="#07c160">\n <van-step>Step1</van-step>\n <van-step>Step2</van-step>\n <van-step>Step3</van-step>\n <van-step>Step4</van-step>\n</van-steps>\n
\n<van-steps direction="vertical" :active="0">\n <van-step>\n <h3>\u3010City\u3011Status1</h3>\n <p>2016-07-12 12:40</p>\n </van-step>\n <van-step>\n <h3>\u3010City\u3011Status2</h3>\n <p>2016-07-11 10:00</p>\n </van-step>\n <van-step>\n <h3>\u3010City\u3011Status3</h3>\n <p>2016-07-10 09:30</p>\n </van-step>\n</van-steps>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
active | \nActive step | \nnumber | string | \n0 | \n
direction | \nCan be set to vertical | \nstring | \nhorizontal | \n
active-color | \nActive step color | \nstring | \n#07c160 | \n
inactive-color | \nInactive step color | \nstring | \n#969799 | \n
active-icon | \nActive icon name | \nstring | \nchecked | \n
inactive-icon | \nInactive icon name | \nstring | \n- | \n
finish-icon | \nFinish icon name | \nstring | \n- | \n
icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
Name | \nDescription | \n
---|---|
default | \nStep content | \n
active-icon | \nCustom active icon | \n
inactive-icon | \nCustom inactive icon | \n
finish-icon | \nCustom finish icon | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click-step | \nEmitted when a step\'s title or icon is clicked | \nindex: number | \n
The component exports the following type definitions:
\nimport type { StepsProps, StepsDirection } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-step-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-step-active-color | \nvar(--van-primary-color) | \n- | \n
--van-step-process-text-color | \nvar(--van-text-color) | \n- | \n
--van-step-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-step-line-color | \nvar(--van-border-color) | \n- | \n
--van-step-finish-line-color | \nvar(--van-primary-color) | \n- | \n
--van-step-finish-text-color | \nvar(--van-text-color) | \n- | \n
--van-step-icon-size | \n12px | \n- | \n
--van-step-circle-size | \n5px | \n- | \n
--van-step-circle-color | \nvar(--van-gray-6) | \n- | \n
--van-step-horizontal-title-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-steps-background | \nvar(--van-background-2) | \n- | \n
Occupation reminder when empty.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Empty } from 'vant';\n\nconst app = createApp();\napp.use(Empty);\n
\n<van-empty description="Description" />\n
\nUse the image prop to display different placeholder images.
\n<!-- Error -->\n<van-empty image="error" description="Description" />\n<!-- Network -->\n<van-empty image="network" description="Description" />\n<!-- Search -->\n<van-empty image="search" description="Description" />\n
\nUsing image-size
prop to custom the size of image.
<!-- The default unit is px -->\n<van-empty image-size="100" description="Description" />\n<!-- Support other units, such as rem, vh, vw -->\n<van-empty image-size="10rem" description="Description" />\n
\nYou can set the width and height separately.
\n<van-empty :image-size="[60, 40]" description="Description" />\n
\n<van-empty\n image="https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg"\n image-size="80"\n description="Description"\n/>\n
\n<van-empty description="Description">\n <van-button round type="primary" class="bottom-button">Button</van-button>\n</van-empty>\n\n<style>\n .bottom-button {\n width: 160px;\n height: 40px;\n }\n</style>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
image | \nImage type, can be set to error network search or image URL | \nstring | \ndefault | \n
image-size | \nImage size | \nnumber | string | Array | \n- | \n
description | \nDescription | \nstring | \n- | \n
Name | \nDescription | \n
---|---|
default | \nCustom bottom content | \n
image | \nCustom image | \n
description | \nCustom description | \n
The component exports the following type definitions:
\nimport type { EmptyProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-empty-padding | \nvar(--van-padding-xl) 0 | \n- | \n
--van-empty-image-size | \n160px | \n- | \n
--van-empty-description-margin-top | \nvar(--van-padding-md) | \n- | \n
--van-empty-description-padding | \n0 60px | \n- | \n
--van-empty-description-color | \nvar(--van-text-color-2) | \n- | \n
--van-empty-description-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-empty-description-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-empty-bottom-margin-top | \n24px | \n- | \n
Occupation reminder when empty.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Empty } from 'vant';\n\nconst app = createApp();\napp.use(Empty);\n
\n<van-empty description="Description" />\n
\nUse the image prop to display different placeholder images.
\n<!-- Error -->\n<van-empty image="error" description="Description" />\n<!-- Network -->\n<van-empty image="network" description="Description" />\n<!-- Search -->\n<van-empty image="search" description="Description" />\n
\nUsing image-size
prop to custom the size of image.
<!-- The default unit is px -->\n<van-empty image-size="100" description="Description" />\n<!-- Support other units, such as rem, vh, vw -->\n<van-empty image-size="10rem" description="Description" />\n
\nYou can set the width and height separately.
\n<van-empty :image-size="[60, 40]" description="Description" />\n
\n<van-empty\n image="https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg"\n image-size="80"\n description="Description"\n/>\n
\n<van-empty description="Description">\n <van-button round type="primary" class="bottom-button">Button</van-button>\n</van-empty>\n\n<style>\n .bottom-button {\n width: 160px;\n height: 40px;\n }\n</style>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
image | \nImage type, can be set to error network search or image URL | \nstring | \ndefault | \n
image-size | \nImage size | \nnumber | string | Array | \n- | \n
description | \nDescription | \nstring | \n- | \n
Name | \nDescription | \n
---|---|
default | \nCustom bottom content | \n
image | \nCustom image | \n
description | \nCustom description | \n
The component exports the following type definitions:
\nimport type { EmptyProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-empty-padding | \nvar(--van-padding-xl) 0 | \n- | \n
--van-empty-image-size | \n160px | \n- | \n
--van-empty-description-margin-top | \nvar(--van-padding-md) | \n- | \n
--van-empty-description-padding | \n0 60px | \n- | \n
--van-empty-description-color | \nvar(--van-text-color-2) | \n- | \n
--van-empty-description-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-empty-description-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-empty-bottom-margin-top | \n24px | \n- | \n
Used to switch between true
and false
.
import { useToggle } from '@vant/use';\n\nexport default {\n setup() {\n const [state, toggle] = useToggle();\n\n toggle(true);\n console.log(state.value); // -> true\n\n toggle(false);\n console.log(state.value); // -> false\n\n toggle();\n console.log(state.value); // -> true\n },\n};\n
\nimport { useToggle } from '@vant/use';\n\nexport default {\n setup() {\n const [state, toggle] = useToggle(true);\n console.log(state.value); // -> true\n },\n};\n
\nfunction useToggle(\n defaultValue: boolean,\n): [Ref<boolean>, (newValue: boolean) => void];\n
\nName | \nDescription | \nType | \nDefault Value | \n
---|---|---|---|
defaultValue | \nDefault value | \nboolean | \nfalse | \n
Name | \nDescription | \nType | \n
---|---|---|
state | \nState | \nRef<boolean> | \n
toggle | \nFunction to switch state | \n(newValue?: boolean) => void | \n
Used to switch between true
and false
.
import { useToggle } from '@vant/use';\n\nexport default {\n setup() {\n const [state, toggle] = useToggle();\n\n toggle(true);\n console.log(state.value); // -> true\n\n toggle(false);\n console.log(state.value); // -> false\n\n toggle();\n console.log(state.value); // -> true\n },\n};\n
\nimport { useToggle } from '@vant/use';\n\nexport default {\n setup() {\n const [state, toggle] = useToggle(true);\n console.log(state.value); // -> true\n },\n};\n
\nfunction useToggle(\n defaultValue: boolean,\n): [Ref<boolean>, (newValue: boolean) => void];\n
\nName | \nDescription | \nType | \nDefault Value | \n
---|---|---|---|
defaultValue | \nDefault value | \nboolean | \nfalse | \n
Name | \nDescription | \nType | \n
---|---|---|
state | \nState | \nRef<boolean> | \n
toggle | \nFunction to switch state | \n(newValue?: boolean) => void | \n
\u7701\u5E02\u533A\u4E09\u7EA7\u8054\u52A8\u9009\u62E9\uFF0C\u901A\u5E38\u4E0E\u5F39\u51FA\u5C42\u7EC4\u4EF6\u914D\u5408\u4F7F\u7528\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Area } from 'vant';\n\nconst app = createApp();\napp.use(Area);\n
\n\u521D\u59CB\u5316\u7701\u5E02\u533A\u7EC4\u4EF6\u65F6\uFF0C\u9700\u8981\u901A\u8FC7 area-list
\u5C5E\u6027\u4F20\u5165\u7701\u5E02\u533A\u6570\u636E\u3002
<van-area title="\u6807\u9898" :area-list="areaList" />\n
\nareaList \u4E3A\u5BF9\u8C61\u7ED3\u6784\uFF0C\u5305\u542B province_list
\u3001city_list
\u3001county_list
\u4E09\u4E2A key\u3002
\u6BCF\u9879\u4EE5\u5730\u533A\u7801\u4F5C\u4E3A key\uFF0C\u7701\u5E02\u533A\u540D\u5B57\u4F5C\u4E3A value\u3002\u5730\u533A\u7801\u4E3A 6 \u4F4D\u6570\u5B57\uFF0C\u524D\u4E24\u4F4D\u4EE3\u8868\u7701\u4EFD\uFF0C\u4E2D\u95F4\u4E24\u4F4D\u4EE3\u8868\u57CE\u5E02\uFF0C\u540E\u4E24\u4F4D\u4EE3\u8868\u533A\u53BF\uFF0C\u4EE5 0 \u8865\u8DB3 6 \u4F4D\u3002\u6BD4\u5982\u5317\u4EAC\u7684\u5730\u533A\u7801\u4E3A 11
\uFF0C\u4EE5 0 \u8865\u8DB3 6 \u4F4D\uFF0C\u4E3A 110000
\u3002
\u793A\u4F8B\u6570\u636E\u5982\u4E0B\uFF1A
\nconst areaList = {\n province_list: {\n 110000: '\u5317\u4EAC\u5E02',\n 120000: '\u5929\u6D25\u5E02',\n },\n city_list: {\n 110100: '\u5317\u4EAC\u5E02',\n 120100: '\u5929\u6D25\u5E02',\n },\n county_list: {\n 110101: '\u4E1C\u57CE\u533A',\n 110102: '\u897F\u57CE\u533A',\n // ....\n },\n};\n
\nVant \u63D0\u4F9B\u4E86\u4E00\u4EFD\u4E2D\u56FD\u7701\u5E02\u533A\u6570\u636E\uFF0C\u4F60\u53EF\u4EE5\u5B89\u88C5 @vant/area-data npm \u5305\u6765\u5F15\u5165\uFF1A
\n# \u901A\u8FC7 npm\nnpm i @vant/area-data\n\n# \u901A\u8FC7 yarn\nyarn add @vant/area-data\n\n# \u901A\u8FC7 pnpm\npnpm add @vant/area-data\n\n# \u901A\u8FC7 Bun\nbun add @vant/area-data\n
\nimport { areaList } from '@vant/area-data';\n\nexport default {\n setup() {\n return { areaList };\n },\n};\n
\n\n\nTips: \u4E2D\u56FD\u7684\u884C\u653F\u533A\u5212\u6BCF\u5E74\u90FD\u4F1A\u6709\u53D8\u52A8\uFF0C\u5982\u679C\u53D1\u73B0\u7701\u5E02\u533A\u6570\u636E\u672A\u53CA\u65F6\u66F4\u65B0\uFF0C\u6B22\u8FCE\u63D0 Pull Request \u5E2E\u52A9\u6211\u4EEC\u66F4\u65B0\u3002\u4F60\u53EF\u4EE5\u5728\u300C\u56FD\u5BB6\u7EDF\u8BA1\u5C40 - \u5168\u56FD\u533A\u5212\u4EE3\u7801\u300D \u548C\u300C\u6C11\u653F\u90E8 - \u884C\u653F\u533A\u5212\u4EE3\u7801\u300D\u4E0A\u67E5\u8BE2\u5230\u6700\u65B0\u6570\u636E\uFF0C\u8BF7\u6839\u636E\u5B98\u65B9\u6570\u636E\u8FDB\u884C\u6838\u5B9E\u3002
\n
\u901A\u8FC7 v-model
\u7ED1\u5B9A\u5F53\u524D\u9009\u4E2D\u7684\u5730\u533A\u7801\u3002
<van-area v-model="value" title="\u6807\u9898" :area-list="areaList" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref('330302');\n return { value };\n },\n};\n
\n\u53EF\u4EE5\u901A\u8FC7 columns-num
\u5C5E\u6027\u914D\u7F6E\u7701\u5E02\u533A\u663E\u793A\u7684\u5217\u6570\uFF0C\u9ED8\u8BA4\u60C5\u51B5\u4E0B\u4F1A\u663E\u793A\u7701\u5E02\u533A\uFF0C\u5F53\u4F60\u8BBE\u7F6E\u4E3A 2
\uFF0C\u5219\u53EA\u4F1A\u663E\u793A\u7701\u5E02\u9009\u62E9\u3002
<van-area title="\u6807\u9898" :area-list="areaList" :columns-num="2" />\n
\n\u53EF\u4EE5\u901A\u8FC7 columns-placeholder
\u5C5E\u6027\u914D\u7F6E\u6BCF\u4E00\u5217\u7684\u5360\u4F4D\u63D0\u793A\u6587\u5B57\u3002
<van-area\n title="\u6807\u9898"\n :area-list="areaList"\n :columns-placeholder="['\u8BF7\u9009\u62E9', '\u8BF7\u9009\u62E9', '\u8BF7\u9009\u62E9']"\n/>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u9009\u4E2D\u9879\u5BF9\u5E94\u7684\u5730\u533A\u7801 | \nstring | \n- | \n
title | \n\u9876\u90E8\u680F\u6807\u9898 | \nstring | \n- | \n
confirm-button-text | \n\u786E\u8BA4\u6309\u94AE\u6587\u5B57 | \nstring | \n\u786E\u8BA4 | \n
cancel-button-text | \n\u53D6\u6D88\u6309\u94AE\u6587\u5B57 | \nstring | \n\u53D6\u6D88 | \n
area-list | \n\u7701\u5E02\u533A\u6570\u636E\uFF0C\u683C\u5F0F\u89C1\u4E0B\u65B9 | \nobject | \n- | \n
columns-placeholder | \n\u5217\u5360\u4F4D\u63D0\u793A\u6587\u5B57 | \nstring[] | \n[] | \n
loading | \n\u662F\u5426\u663E\u793A\u52A0\u8F7D\u72B6\u6001 | \nboolean | \nfalse | \n
readonly | \n\u662F\u5426\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u53EA\u8BFB\u72B6\u6001\u4E0B\u65E0\u6CD5\u5207\u6362\u9009\u9879 | \nboolean | \nfalse | \n
option-height | \n\u9009\u9879\u9AD8\u5EA6\uFF0C\u652F\u6301 px vw vh rem \u5355\u4F4D\uFF0C\u9ED8\u8BA4 px | \nnumber | string | \n44 | \n
columns-num | \n\u663E\u793A\u5217\u6570\uFF0C3-\u7701\u5E02\u533A\uFF0C2-\u7701\u5E02\uFF0C1-\u7701 | \nnumber | string | \n3 | \n
visible-option-num | \n\u53EF\u89C1\u7684\u9009\u9879\u4E2A\u6570 | \nnumber | string | \n6 | \n
swipe-duration | \n\u5FEB\u901F\u6ED1\u52A8\u65F6\u60EF\u6027\u6EDA\u52A8\u7684\u65F6\u957F\uFF0C\u5355\u4F4D ms | \nnumber | string | \n1000 | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
confirm | \n\u70B9\u51FB\u5B8C\u6210\u6309\u94AE\u65F6\u89E6\u53D1 | \n{ selectedValues, selectedOptions, selectedIndexes } | \n
cancel | \n\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1 | \n{ selectedValues, selectedOptions, selectedIndexes } | \n
change | \n\u9009\u9879\u6539\u53D8\u65F6\u89E6\u53D1 | \n{ selectedValues, selectedOptions, selectedIndexes, columnIndex } | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
toolbar | \n\u81EA\u5B9A\u4E49\u6574\u4E2A\u9876\u90E8\u680F\u7684\u5185\u5BB9 | \n- | \n
title | \n\u81EA\u5B9A\u4E49\u6807\u9898\u5185\u5BB9 | \n- | \n
confirm | \n\u81EA\u5B9A\u4E49\u786E\u8BA4\u6309\u94AE\u5185\u5BB9 | \n- | \n
cancel | \n\u81EA\u5B9A\u4E49\u53D6\u6D88\u6309\u94AE\u5185\u5BB9 | \n- | \n
columns-top | \n\u81EA\u5B9A\u4E49\u9009\u9879\u4E0A\u65B9\u5185\u5BB9 | \n- | \n
columns-bottom | \n\u81EA\u5B9A\u4E49\u9009\u9879\u4E0B\u65B9\u5185\u5BB9 | \n- | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Area \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
confirm | \n\u505C\u6B62\u60EF\u6027\u6EDA\u52A8\u5E76\u89E6\u53D1 confirm \u4E8B\u4EF6 | \n- | \n- | \n
getSelectedOptions | \n\u83B7\u53D6\u5F53\u524D\u9009\u4E2D\u7684\u9009\u9879 | \n- | \nPickerOption[] | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { AreaProps, AreaList, AreaInstance } from 'vant';\n
\nAreaInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { AreaInstance } from 'vant';\n\nconst areaRef = ref<AreaInstance>();\n\nareaRef.value?.confirm();\n
\n\u53C2\u89C1\u684C\u9762\u7AEF\u9002\u914D\u3002
\n\u7701\u5E02\u533A\u4E09\u7EA7\u8054\u52A8\u9009\u62E9\uFF0C\u901A\u5E38\u4E0E\u5F39\u51FA\u5C42\u7EC4\u4EF6\u914D\u5408\u4F7F\u7528\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Area } from 'vant';\n\nconst app = createApp();\napp.use(Area);\n
\n\u521D\u59CB\u5316\u7701\u5E02\u533A\u7EC4\u4EF6\u65F6\uFF0C\u9700\u8981\u901A\u8FC7 area-list
\u5C5E\u6027\u4F20\u5165\u7701\u5E02\u533A\u6570\u636E\u3002
<van-area title="\u6807\u9898" :area-list="areaList" />\n
\nareaList \u4E3A\u5BF9\u8C61\u7ED3\u6784\uFF0C\u5305\u542B province_list
\u3001city_list
\u3001county_list
\u4E09\u4E2A key\u3002
\u6BCF\u9879\u4EE5\u5730\u533A\u7801\u4F5C\u4E3A key\uFF0C\u7701\u5E02\u533A\u540D\u5B57\u4F5C\u4E3A value\u3002\u5730\u533A\u7801\u4E3A 6 \u4F4D\u6570\u5B57\uFF0C\u524D\u4E24\u4F4D\u4EE3\u8868\u7701\u4EFD\uFF0C\u4E2D\u95F4\u4E24\u4F4D\u4EE3\u8868\u57CE\u5E02\uFF0C\u540E\u4E24\u4F4D\u4EE3\u8868\u533A\u53BF\uFF0C\u4EE5 0 \u8865\u8DB3 6 \u4F4D\u3002\u6BD4\u5982\u5317\u4EAC\u7684\u5730\u533A\u7801\u4E3A 11
\uFF0C\u4EE5 0 \u8865\u8DB3 6 \u4F4D\uFF0C\u4E3A 110000
\u3002
\u793A\u4F8B\u6570\u636E\u5982\u4E0B\uFF1A
\nconst areaList = {\n province_list: {\n 110000: '\u5317\u4EAC\u5E02',\n 120000: '\u5929\u6D25\u5E02',\n },\n city_list: {\n 110100: '\u5317\u4EAC\u5E02',\n 120100: '\u5929\u6D25\u5E02',\n },\n county_list: {\n 110101: '\u4E1C\u57CE\u533A',\n 110102: '\u897F\u57CE\u533A',\n // ....\n },\n};\n
\nVant \u63D0\u4F9B\u4E86\u4E00\u4EFD\u4E2D\u56FD\u7701\u5E02\u533A\u6570\u636E\uFF0C\u4F60\u53EF\u4EE5\u5B89\u88C5 @vant/area-data npm \u5305\u6765\u5F15\u5165\uFF1A
\n# \u901A\u8FC7 npm\nnpm i @vant/area-data\n\n# \u901A\u8FC7 yarn\nyarn add @vant/area-data\n\n# \u901A\u8FC7 pnpm\npnpm add @vant/area-data\n\n# \u901A\u8FC7 Bun\nbun add @vant/area-data\n
\nimport { areaList } from '@vant/area-data';\n\nexport default {\n setup() {\n return { areaList };\n },\n};\n
\n\n\nTips: \u4E2D\u56FD\u7684\u884C\u653F\u533A\u5212\u6BCF\u5E74\u90FD\u4F1A\u6709\u53D8\u52A8\uFF0C\u5982\u679C\u53D1\u73B0\u7701\u5E02\u533A\u6570\u636E\u672A\u53CA\u65F6\u66F4\u65B0\uFF0C\u6B22\u8FCE\u63D0 Pull Request \u5E2E\u52A9\u6211\u4EEC\u66F4\u65B0\u3002\u4F60\u53EF\u4EE5\u5728\u300C\u56FD\u5BB6\u7EDF\u8BA1\u5C40 - \u5168\u56FD\u533A\u5212\u4EE3\u7801\u300D \u548C\u300C\u6C11\u653F\u90E8 - \u884C\u653F\u533A\u5212\u4EE3\u7801\u300D\u4E0A\u67E5\u8BE2\u5230\u6700\u65B0\u6570\u636E\uFF0C\u8BF7\u6839\u636E\u5B98\u65B9\u6570\u636E\u8FDB\u884C\u6838\u5B9E\u3002
\n
\u901A\u8FC7 v-model
\u7ED1\u5B9A\u5F53\u524D\u9009\u4E2D\u7684\u5730\u533A\u7801\u3002
<van-area v-model="value" title="\u6807\u9898" :area-list="areaList" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref('330302');\n return { value };\n },\n};\n
\n\u53EF\u4EE5\u901A\u8FC7 columns-num
\u5C5E\u6027\u914D\u7F6E\u7701\u5E02\u533A\u663E\u793A\u7684\u5217\u6570\uFF0C\u9ED8\u8BA4\u60C5\u51B5\u4E0B\u4F1A\u663E\u793A\u7701\u5E02\u533A\uFF0C\u5F53\u4F60\u8BBE\u7F6E\u4E3A 2
\uFF0C\u5219\u53EA\u4F1A\u663E\u793A\u7701\u5E02\u9009\u62E9\u3002
<van-area title="\u6807\u9898" :area-list="areaList" :columns-num="2" />\n
\n\u53EF\u4EE5\u901A\u8FC7 columns-placeholder
\u5C5E\u6027\u914D\u7F6E\u6BCF\u4E00\u5217\u7684\u5360\u4F4D\u63D0\u793A\u6587\u5B57\u3002
<van-area\n title="\u6807\u9898"\n :area-list="areaList"\n :columns-placeholder="['\u8BF7\u9009\u62E9', '\u8BF7\u9009\u62E9', '\u8BF7\u9009\u62E9']"\n/>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u9009\u4E2D\u9879\u5BF9\u5E94\u7684\u5730\u533A\u7801 | \nstring | \n- | \n
title | \n\u9876\u90E8\u680F\u6807\u9898 | \nstring | \n- | \n
confirm-button-text | \n\u786E\u8BA4\u6309\u94AE\u6587\u5B57 | \nstring | \n\u786E\u8BA4 | \n
cancel-button-text | \n\u53D6\u6D88\u6309\u94AE\u6587\u5B57 | \nstring | \n\u53D6\u6D88 | \n
area-list | \n\u7701\u5E02\u533A\u6570\u636E\uFF0C\u683C\u5F0F\u89C1\u4E0B\u65B9 | \nobject | \n- | \n
columns-placeholder | \n\u5217\u5360\u4F4D\u63D0\u793A\u6587\u5B57 | \nstring[] | \n[] | \n
loading | \n\u662F\u5426\u663E\u793A\u52A0\u8F7D\u72B6\u6001 | \nboolean | \nfalse | \n
readonly | \n\u662F\u5426\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u53EA\u8BFB\u72B6\u6001\u4E0B\u65E0\u6CD5\u5207\u6362\u9009\u9879 | \nboolean | \nfalse | \n
option-height | \n\u9009\u9879\u9AD8\u5EA6\uFF0C\u652F\u6301 px vw vh rem \u5355\u4F4D\uFF0C\u9ED8\u8BA4 px | \nnumber | string | \n44 | \n
columns-num | \n\u663E\u793A\u5217\u6570\uFF0C3-\u7701\u5E02\u533A\uFF0C2-\u7701\u5E02\uFF0C1-\u7701 | \nnumber | string | \n3 | \n
visible-option-num | \n\u53EF\u89C1\u7684\u9009\u9879\u4E2A\u6570 | \nnumber | string | \n6 | \n
swipe-duration | \n\u5FEB\u901F\u6ED1\u52A8\u65F6\u60EF\u6027\u6EDA\u52A8\u7684\u65F6\u957F\uFF0C\u5355\u4F4D ms | \nnumber | string | \n1000 | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
confirm | \n\u70B9\u51FB\u5B8C\u6210\u6309\u94AE\u65F6\u89E6\u53D1 | \n{ selectedValues, selectedOptions, selectedIndexes } | \n
cancel | \n\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1 | \n{ selectedValues, selectedOptions, selectedIndexes } | \n
change | \n\u9009\u9879\u6539\u53D8\u65F6\u89E6\u53D1 | \n{ selectedValues, selectedOptions, selectedIndexes, columnIndex } | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
toolbar | \n\u81EA\u5B9A\u4E49\u6574\u4E2A\u9876\u90E8\u680F\u7684\u5185\u5BB9 | \n- | \n
title | \n\u81EA\u5B9A\u4E49\u6807\u9898\u5185\u5BB9 | \n- | \n
confirm | \n\u81EA\u5B9A\u4E49\u786E\u8BA4\u6309\u94AE\u5185\u5BB9 | \n- | \n
cancel | \n\u81EA\u5B9A\u4E49\u53D6\u6D88\u6309\u94AE\u5185\u5BB9 | \n- | \n
columns-top | \n\u81EA\u5B9A\u4E49\u9009\u9879\u4E0A\u65B9\u5185\u5BB9 | \n- | \n
columns-bottom | \n\u81EA\u5B9A\u4E49\u9009\u9879\u4E0B\u65B9\u5185\u5BB9 | \n- | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Area \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
confirm | \n\u505C\u6B62\u60EF\u6027\u6EDA\u52A8\u5E76\u89E6\u53D1 confirm \u4E8B\u4EF6 | \n- | \n- | \n
getSelectedOptions | \n\u83B7\u53D6\u5F53\u524D\u9009\u4E2D\u7684\u9009\u9879 | \n- | \nPickerOption[] | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { AreaProps, AreaList, AreaInstance } from 'vant';\n
\nAreaInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { AreaInstance } from 'vant';\n\nconst areaRef = ref<AreaInstance>();\n\nareaRef.value?.confirm();\n
\n\u53C2\u89C1\u684C\u9762\u7AEF\u9002\u914D\u3002
\nEstablish the association relationship between parent and child components, perform data communication and method invocation, based on provide
and inject
implementation.
Use useChildren
in parent to associate child components:
import { ref } from 'vue';\nimport { useChildren } from '@vant/use';\n\nconst RELATION_KEY = Symbol('my-relation');\n\nexport default {\n setup() {\n const { linkChildren } = useChildren(RELATION_KEY);\n\n const count = ref(0);\n const add = () => {\n count.value++;\n };\n\n // provide data and methods to children\n linkChildren({ add, count });\n },\n};\n
\nUse useParent
in child component to get the data and methods provided by parent.
import { useParent } from '@vant/use';\n\nexport default {\n setup() {\n const { parent } = useParent(RELATION_KEY);\n\n // use data and methods provided by parent\n if (parent) {\n parent.add();\n console.log(parent.count.value); // -> 1\n }\n },\n};\n
\nfunction useParent<T>(key: string | symbol): {\n parent?: T;\n index?: Ref<number>;\n};\n\nfunction useChildren(key: string | symbol): {\n children: ComponentPublicInstance[];\n linkChildren: (value: any) => void;\n};\n
\nName | \nDescription | \nType | \n
---|---|---|
parent | \nData and methods provided by parent | \nany | \n
index | \nIndex position of the current component in all child of the parent component | \nRef<number> | \n
Name | \nDescription | \nType | \n
---|---|---|
children | \nComponent list of children | \nComponentPublicInstance[] | \n
linkChildren | \nFunction to provide values to child | \n(value: any) => void | \n
Establish the association relationship between parent and child components, perform data communication and method invocation, based on provide
and inject
implementation.
Use useChildren
in parent to associate child components:
import { ref } from 'vue';\nimport { useChildren } from '@vant/use';\n\nconst RELATION_KEY = Symbol('my-relation');\n\nexport default {\n setup() {\n const { linkChildren } = useChildren(RELATION_KEY);\n\n const count = ref(0);\n const add = () => {\n count.value++;\n };\n\n // provide data and methods to children\n linkChildren({ add, count });\n },\n};\n
\nUse useParent
in child component to get the data and methods provided by parent.
import { useParent } from '@vant/use';\n\nexport default {\n setup() {\n const { parent } = useParent(RELATION_KEY);\n\n // use data and methods provided by parent\n if (parent) {\n parent.add();\n console.log(parent.count.value); // -> 1\n }\n },\n};\n
\nfunction useParent<T>(key: string | symbol): {\n parent?: T;\n index?: Ref<number>;\n};\n\nfunction useChildren(key: string | symbol): {\n children: ComponentPublicInstance[];\n linkChildren: (value: any) => void;\n};\n
\nName | \nDescription | \nType | \n
---|---|---|
parent | \nData and methods provided by parent | \nany | \n
index | \nIndex position of the current component in all child of the parent component | \nRef<number> | \n
Name | \nDescription | \nType | \n
---|---|---|
children | \nComponent list of children | \nComponentPublicInstance[] | \n
linkChildren | \nFunction to provide values to child | \n(value: any) => void | \n
\u65E5\u671F\u9009\u62E9\u5668\uFF0C\u7528\u4E8E\u9009\u62E9\u5E74\u3001\u6708\u3001\u65E5\uFF0C\u901A\u5E38\u4E0E\u5F39\u51FA\u5C42\u7EC4\u4EF6\u914D\u5408\u4F7F\u7528\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { DatePicker } from 'vant';\n\nconst app = createApp();\napp.use(DatePicker);\n
\n\u901A\u8FC7 v-model
\u7ED1\u5B9A\u5F53\u524D\u9009\u4E2D\u7684\u65E5\u671F\uFF0C\u901A\u8FC7 min-date
\u548C max-date
\u5C5E\u6027\u6765\u8BBE\u5B9A\u53EF\u9009\u7684\u65F6\u95F4\u8303\u56F4\u3002
<van-date-picker\n v-model="currentDate"\n title="\u9009\u62E9\u65E5\u671F"\n :min-date="minDate"\n :max-date="maxDate"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentDate = ref(['2021', '01', '01']);\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n currentDate,\n };\n },\n};\n
\n\u901A\u8FC7 columns-type
\u5C5E\u6027\u53EF\u4EE5\u63A7\u5236\u9009\u9879\u7684\u7C7B\u578B\uFF0C\u652F\u6301\u4EE5\u4EFB\u610F\u987A\u5E8F\u5BF9 year
\u3001month
\u548C day
\u8FDB\u884C\u6392\u5217\u7EC4\u5408\u3002
\u6BD4\u5982\uFF1A
\n[\'year\']
\u6765\u5355\u72EC\u9009\u62E9\u5E74\u4EFD\u3002[\'month\']
\u6765\u5355\u72EC\u9009\u62E9\u6708\u4EFD\u3002[\'year\', \'month\']
\u6765\u9009\u62E9\u5E74\u4EFD\u548C\u6708\u4EFD\u3002[\'month\', \'day\']
\u6765\u9009\u62E9\u6708\u4EFD\u548C\u65E5\u671F\u3002<van-date-picker\n v-model="currentDate"\n title="\u9009\u62E9\u5E74\u6708"\n :min-date="minDate"\n :max-date="maxDate"\n :columns-type="columnsType"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentDate = ref(['2021', '01']);\n const columnsType = ['year', 'month'];\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n currentDate,\n columnsType,\n };\n },\n};\n
\n\u901A\u8FC7\u4F20\u5165 formatter
\u51FD\u6570\uFF0C\u53EF\u4EE5\u5BF9\u9009\u9879\u6587\u5B57\u8FDB\u884C\u683C\u5F0F\u5316\u5904\u7406\u3002
<van-date-picker\n v-model="currentDate"\n title="\u9009\u62E9\u5E74\u6708"\n :min-date="minDate"\n :max-date="maxDate"\n :formatter="formatter"\n :columns-type="columnsType"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentDate = ref(['2021', '01']);\n const columnsType = ['year', 'month'];\n\n const formatter = (type, option) => {\n if (type === 'year') {\n option.text += '\u5E74';\n }\n if (type === 'month') {\n option.text += '\u6708';\n }\n return option;\n };\n\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n formatter,\n currentDate,\n columnsType,\n };\n },\n};\n
\n\u901A\u8FC7\u4F20\u5165 filter
\u51FD\u6570\uFF0C\u53EF\u4EE5\u5BF9\u9009\u9879\u6570\u7EC4\u8FDB\u884C\u8FC7\u6EE4\uFF0C\u5B9E\u73B0\u81EA\u5B9A\u4E49\u9009\u9879\u95F4\u9694\u3002
<van-date-picker\n v-model="currentDate"\n title="\u9009\u62E9\u5E74\u6708"\n :filter="filter"\n :min-date="minDate"\n :max-date="maxDate"\n :columns-type="columnsType"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentDate = ref(['2021', '01']);\n const columnsType = ['year', 'month'];\n const filter = (type, options) => {\n if (type === 'month') {\n return options.filter((option) => Number(option.value) % 6 === 0);\n }\n return options;\n };\n\n return {\n filter,\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n currentTime,\n columnsType,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u9009\u4E2D\u7684\u65E5\u671F | \nstring[] | \n[] | \n
columns-type | \n\u9009\u9879\u7C7B\u578B\uFF0C\u7531 year \u3001month \u548C day \u7EC4\u6210\u7684\u6570\u7EC4 | \nstring[] | \n[\'year\', \'month\', \'day\'] | \n
min-date | \n\u53EF\u9009\u7684\u6700\u5C0F\u65F6\u95F4\uFF0C\u7CBE\u786E\u5230\u65E5 | \nDate | \n\u5341\u5E74\u524D | \n
max-date | \n\u53EF\u9009\u7684\u6700\u5927\u65F6\u95F4\uFF0C\u7CBE\u786E\u5230\u65E5 | \nDate | \n\u5341\u5E74\u540E | \n
title | \n\u9876\u90E8\u680F\u6807\u9898 | \nstring | \n\'\' | \n
confirm-button-text | \n\u786E\u8BA4\u6309\u94AE\u6587\u5B57 | \nstring | \n\u786E\u8BA4 | \n
cancel-button-text | \n\u53D6\u6D88\u6309\u94AE\u6587\u5B57 | \nstring | \n\u53D6\u6D88 | \n
show-toolbar | \n\u662F\u5426\u663E\u793A\u9876\u90E8\u680F | \nboolean | \ntrue | \n
loading | \n\u662F\u5426\u663E\u793A\u52A0\u8F7D\u72B6\u6001 | \nboolean | \nfalse | \n
readonly | \n\u662F\u5426\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u53EA\u8BFB\u72B6\u6001\u4E0B\u65E0\u6CD5\u5207\u6362\u9009\u9879 | \nboolean | \nfalse | \n
filter | \n\u9009\u9879\u8FC7\u6EE4\u51FD\u6570 | \n(type: string, options: PickerOption[]) => PickerOption[] | \n- | \n
formatter | \n\u9009\u9879\u683C\u5F0F\u5316\u51FD\u6570 | \n(type: string, option: PickerOption) => PickerOption | \n- | \n
option-height | \n\u9009\u9879\u9AD8\u5EA6\uFF0C\u652F\u6301 px vw vh rem \u5355\u4F4D\uFF0C\u9ED8\u8BA4 px | \nnumber | string | \n44 | \n
visible-option-num | \n\u53EF\u89C1\u7684\u9009\u9879\u4E2A\u6570 | \nnumber | string | \n6 | \n
swipe-duration | \n\u5FEB\u901F\u6ED1\u52A8\u65F6\u60EF\u6027\u6EDA\u52A8\u7684\u65F6\u957F\uFF0C\u5355\u4F4D ms | \nnumber | string | \n1000 | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
confirm | \n\u70B9\u51FB\u5B8C\u6210\u6309\u94AE\u65F6\u89E6\u53D1 | \n{ selectedValues, selectedOptions } | \n
cancel | \n\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1 | \n{ selectedValues, selectedOptions } | \n
change | \n\u9009\u9879\u6539\u53D8\u65F6\u89E6\u53D1 | \n{ selectedValues, selectedOptions, columnIndex } | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
toolbar | \n\u81EA\u5B9A\u4E49\u6574\u4E2A\u9876\u90E8\u680F\u7684\u5185\u5BB9 | \n- | \n
title | \n\u81EA\u5B9A\u4E49\u6807\u9898\u5185\u5BB9 | \n- | \n
confirm | \n\u81EA\u5B9A\u4E49\u786E\u8BA4\u6309\u94AE\u5185\u5BB9 | \n- | \n
cancel | \n\u81EA\u5B9A\u4E49\u53D6\u6D88\u6309\u94AE\u5185\u5BB9 | \n- | \n
option | \n\u81EA\u5B9A\u4E49\u9009\u9879\u5185\u5BB9 | \noption: PickerOption, index: number | \n
columns-top | \n\u81EA\u5B9A\u4E49\u9009\u9879\u4E0A\u65B9\u5185\u5BB9 | \n- | \n
columns-bottom | \n\u81EA\u5B9A\u4E49\u9009\u9879\u4E0B\u65B9\u5185\u5BB9 | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { DatePickerProps, DatePickerColumnType } from 'vant';\n
\n\u8BF7\u6CE8\u610F\u4E0D\u8981\u5728\u6A21\u677F\u4E2D\u76F4\u63A5\u4F7F\u7528\u7C7B\u4F3C min-date="new Date()"
\u7684\u5199\u6CD5\uFF0C\u8FD9\u6837\u4F1A\u5BFC\u81F4\u6BCF\u6B21\u6E32\u67D3\u7EC4\u4EF6\u65F6\u4F20\u5165\u4E00\u4E2A\u65B0\u7684 Date \u5BF9\u8C61\uFF0C\u800C\u4F20\u5165\u65B0\u7684\u6570\u636E\u4F1A\u89E6\u53D1\u4E0B\u4E00\u6B21\u6E32\u67D3\uFF0C\u4ECE\u800C\u9677\u5165\u6B7B\u5FAA\u73AF\u3002
\u6B63\u786E\u7684\u505A\u6CD5\u662F\u5C06 min-date
\u4F5C\u4E3A\u4E00\u4E2A\u6570\u636E\u5B9A\u4E49\u5728 data
\u51FD\u6570\u6216 setup
\u4E2D\u3002
\u5982\u679C\u4F60\u9047\u5230\u4E86\u5728 iOS \u4E0A\u65E0\u6CD5\u6E32\u67D3\u7EC4\u4EF6\u7684\u95EE\u9898\uFF0C\u8BF7\u786E\u8BA4\u5728\u521B\u5EFA Date \u5BF9\u8C61\u65F6\u6CA1\u6709\u4F7F\u7528 new Date(\'2020-01-01\')
\u8FD9\u6837\u7684\u5199\u6CD5\uFF0CiOS \u4E0D\u652F\u6301\u4EE5\u4E2D\u5212\u7EBF\u5206\u9694\u7684\u65E5\u671F\u683C\u5F0F\uFF0C\u6B63\u786E\u5199\u6CD5\u662F new Date(\'2020/01/01\')
\u3002
\u5BF9\u6B64\u95EE\u9898\u7684\u8BE6\u7EC6\u89E3\u91CA\uFF1Astackoverflow\u3002
\n\u53C2\u89C1\u684C\u9762\u7AEF\u9002\u914D\u3002
\n\u65E5\u671F\u9009\u62E9\u5668\uFF0C\u7528\u4E8E\u9009\u62E9\u5E74\u3001\u6708\u3001\u65E5\uFF0C\u901A\u5E38\u4E0E\u5F39\u51FA\u5C42\u7EC4\u4EF6\u914D\u5408\u4F7F\u7528\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { DatePicker } from 'vant';\n\nconst app = createApp();\napp.use(DatePicker);\n
\n\u901A\u8FC7 v-model
\u7ED1\u5B9A\u5F53\u524D\u9009\u4E2D\u7684\u65E5\u671F\uFF0C\u901A\u8FC7 min-date
\u548C max-date
\u5C5E\u6027\u6765\u8BBE\u5B9A\u53EF\u9009\u7684\u65F6\u95F4\u8303\u56F4\u3002
<van-date-picker\n v-model="currentDate"\n title="\u9009\u62E9\u65E5\u671F"\n :min-date="minDate"\n :max-date="maxDate"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentDate = ref(['2021', '01', '01']);\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n currentDate,\n };\n },\n};\n
\n\u901A\u8FC7 columns-type
\u5C5E\u6027\u53EF\u4EE5\u63A7\u5236\u9009\u9879\u7684\u7C7B\u578B\uFF0C\u652F\u6301\u4EE5\u4EFB\u610F\u987A\u5E8F\u5BF9 year
\u3001month
\u548C day
\u8FDB\u884C\u6392\u5217\u7EC4\u5408\u3002
\u6BD4\u5982\uFF1A
\n[\'year\']
\u6765\u5355\u72EC\u9009\u62E9\u5E74\u4EFD\u3002[\'month\']
\u6765\u5355\u72EC\u9009\u62E9\u6708\u4EFD\u3002[\'year\', \'month\']
\u6765\u9009\u62E9\u5E74\u4EFD\u548C\u6708\u4EFD\u3002[\'month\', \'day\']
\u6765\u9009\u62E9\u6708\u4EFD\u548C\u65E5\u671F\u3002<van-date-picker\n v-model="currentDate"\n title="\u9009\u62E9\u5E74\u6708"\n :min-date="minDate"\n :max-date="maxDate"\n :columns-type="columnsType"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentDate = ref(['2021', '01']);\n const columnsType = ['year', 'month'];\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n currentDate,\n columnsType,\n };\n },\n};\n
\n\u901A\u8FC7\u4F20\u5165 formatter
\u51FD\u6570\uFF0C\u53EF\u4EE5\u5BF9\u9009\u9879\u6587\u5B57\u8FDB\u884C\u683C\u5F0F\u5316\u5904\u7406\u3002
<van-date-picker\n v-model="currentDate"\n title="\u9009\u62E9\u5E74\u6708"\n :min-date="minDate"\n :max-date="maxDate"\n :formatter="formatter"\n :columns-type="columnsType"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentDate = ref(['2021', '01']);\n const columnsType = ['year', 'month'];\n\n const formatter = (type, option) => {\n if (type === 'year') {\n option.text += '\u5E74';\n }\n if (type === 'month') {\n option.text += '\u6708';\n }\n return option;\n };\n\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n formatter,\n currentDate,\n columnsType,\n };\n },\n};\n
\n\u901A\u8FC7\u4F20\u5165 filter
\u51FD\u6570\uFF0C\u53EF\u4EE5\u5BF9\u9009\u9879\u6570\u7EC4\u8FDB\u884C\u8FC7\u6EE4\uFF0C\u5B9E\u73B0\u81EA\u5B9A\u4E49\u9009\u9879\u95F4\u9694\u3002
<van-date-picker\n v-model="currentDate"\n title="\u9009\u62E9\u5E74\u6708"\n :filter="filter"\n :min-date="minDate"\n :max-date="maxDate"\n :columns-type="columnsType"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentDate = ref(['2021', '01']);\n const columnsType = ['year', 'month'];\n const filter = (type, options) => {\n if (type === 'month') {\n return options.filter((option) => Number(option.value) % 6 === 0);\n }\n return options;\n };\n\n return {\n filter,\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n currentTime,\n columnsType,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u9009\u4E2D\u7684\u65E5\u671F | \nstring[] | \n[] | \n
columns-type | \n\u9009\u9879\u7C7B\u578B\uFF0C\u7531 year \u3001month \u548C day \u7EC4\u6210\u7684\u6570\u7EC4 | \nstring[] | \n[\'year\', \'month\', \'day\'] | \n
min-date | \n\u53EF\u9009\u7684\u6700\u5C0F\u65F6\u95F4\uFF0C\u7CBE\u786E\u5230\u65E5 | \nDate | \n\u5341\u5E74\u524D | \n
max-date | \n\u53EF\u9009\u7684\u6700\u5927\u65F6\u95F4\uFF0C\u7CBE\u786E\u5230\u65E5 | \nDate | \n\u5341\u5E74\u540E | \n
title | \n\u9876\u90E8\u680F\u6807\u9898 | \nstring | \n\'\' | \n
confirm-button-text | \n\u786E\u8BA4\u6309\u94AE\u6587\u5B57 | \nstring | \n\u786E\u8BA4 | \n
cancel-button-text | \n\u53D6\u6D88\u6309\u94AE\u6587\u5B57 | \nstring | \n\u53D6\u6D88 | \n
show-toolbar | \n\u662F\u5426\u663E\u793A\u9876\u90E8\u680F | \nboolean | \ntrue | \n
loading | \n\u662F\u5426\u663E\u793A\u52A0\u8F7D\u72B6\u6001 | \nboolean | \nfalse | \n
readonly | \n\u662F\u5426\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u53EA\u8BFB\u72B6\u6001\u4E0B\u65E0\u6CD5\u5207\u6362\u9009\u9879 | \nboolean | \nfalse | \n
filter | \n\u9009\u9879\u8FC7\u6EE4\u51FD\u6570 | \n(type: string, options: PickerOption[]) => PickerOption[] | \n- | \n
formatter | \n\u9009\u9879\u683C\u5F0F\u5316\u51FD\u6570 | \n(type: string, option: PickerOption) => PickerOption | \n- | \n
option-height | \n\u9009\u9879\u9AD8\u5EA6\uFF0C\u652F\u6301 px vw vh rem \u5355\u4F4D\uFF0C\u9ED8\u8BA4 px | \nnumber | string | \n44 | \n
visible-option-num | \n\u53EF\u89C1\u7684\u9009\u9879\u4E2A\u6570 | \nnumber | string | \n6 | \n
swipe-duration | \n\u5FEB\u901F\u6ED1\u52A8\u65F6\u60EF\u6027\u6EDA\u52A8\u7684\u65F6\u957F\uFF0C\u5355\u4F4D ms | \nnumber | string | \n1000 | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
confirm | \n\u70B9\u51FB\u5B8C\u6210\u6309\u94AE\u65F6\u89E6\u53D1 | \n{ selectedValues, selectedOptions } | \n
cancel | \n\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1 | \n{ selectedValues, selectedOptions } | \n
change | \n\u9009\u9879\u6539\u53D8\u65F6\u89E6\u53D1 | \n{ selectedValues, selectedOptions, columnIndex } | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
toolbar | \n\u81EA\u5B9A\u4E49\u6574\u4E2A\u9876\u90E8\u680F\u7684\u5185\u5BB9 | \n- | \n
title | \n\u81EA\u5B9A\u4E49\u6807\u9898\u5185\u5BB9 | \n- | \n
confirm | \n\u81EA\u5B9A\u4E49\u786E\u8BA4\u6309\u94AE\u5185\u5BB9 | \n- | \n
cancel | \n\u81EA\u5B9A\u4E49\u53D6\u6D88\u6309\u94AE\u5185\u5BB9 | \n- | \n
option | \n\u81EA\u5B9A\u4E49\u9009\u9879\u5185\u5BB9 | \noption: PickerOption, index: number | \n
columns-top | \n\u81EA\u5B9A\u4E49\u9009\u9879\u4E0A\u65B9\u5185\u5BB9 | \n- | \n
columns-bottom | \n\u81EA\u5B9A\u4E49\u9009\u9879\u4E0B\u65B9\u5185\u5BB9 | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { DatePickerProps, DatePickerColumnType } from 'vant';\n
\n\u8BF7\u6CE8\u610F\u4E0D\u8981\u5728\u6A21\u677F\u4E2D\u76F4\u63A5\u4F7F\u7528\u7C7B\u4F3C min-date="new Date()"
\u7684\u5199\u6CD5\uFF0C\u8FD9\u6837\u4F1A\u5BFC\u81F4\u6BCF\u6B21\u6E32\u67D3\u7EC4\u4EF6\u65F6\u4F20\u5165\u4E00\u4E2A\u65B0\u7684 Date \u5BF9\u8C61\uFF0C\u800C\u4F20\u5165\u65B0\u7684\u6570\u636E\u4F1A\u89E6\u53D1\u4E0B\u4E00\u6B21\u6E32\u67D3\uFF0C\u4ECE\u800C\u9677\u5165\u6B7B\u5FAA\u73AF\u3002
\u6B63\u786E\u7684\u505A\u6CD5\u662F\u5C06 min-date
\u4F5C\u4E3A\u4E00\u4E2A\u6570\u636E\u5B9A\u4E49\u5728 data
\u51FD\u6570\u6216 setup
\u4E2D\u3002
\u5982\u679C\u4F60\u9047\u5230\u4E86\u5728 iOS \u4E0A\u65E0\u6CD5\u6E32\u67D3\u7EC4\u4EF6\u7684\u95EE\u9898\uFF0C\u8BF7\u786E\u8BA4\u5728\u521B\u5EFA Date \u5BF9\u8C61\u65F6\u6CA1\u6709\u4F7F\u7528 new Date(\'2020-01-01\')
\u8FD9\u6837\u7684\u5199\u6CD5\uFF0CiOS \u4E0D\u652F\u6301\u4EE5\u4E2D\u5212\u7EBF\u5206\u9694\u7684\u65E5\u671F\u683C\u5F0F\uFF0C\u6B63\u786E\u5199\u6CD5\u662F new Date(\'2020/01/01\')
\u3002
\u5BF9\u6B64\u95EE\u9898\u7684\u8BE6\u7EC6\u89E3\u91CA\uFF1Astackoverflow\u3002
\n\u53C2\u89C1\u684C\u9762\u7AEF\u9002\u914D\u3002
\nUsed to loop a group of pictures or content.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Swipe, SwipeItem } from 'vant';\n\nconst app = createApp();\napp.use(Swipe);\napp.use(SwipeItem);\n
\nUse autoplay
prop to set autoplay interval.
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">\n <van-swipe-item>1</van-swipe-item>\n <van-swipe-item>2</van-swipe-item>\n <van-swipe-item>3</van-swipe-item>\n <van-swipe-item>4</van-swipe-item>\n</van-swipe>\n\n<style>\n .my-swipe .van-swipe-item {\n color: #fff;\n font-size: 20px;\n line-height: 150px;\n text-align: center;\n background-color: #39a9ed;\n }\n</style>\n
\nUse lazy-render
prop to enable lazy rendering.
<van-swipe :autoplay="3000" lazy-render>\n <van-swipe-item v-for="image in images" :key="image">\n <img :src="image" />\n </van-swipe-item>\n</van-swipe>\n
\nexport default {\n setup() {\n const images = [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n ];\n return { images };\n },\n};\n
\n<van-swipe @change="onChange">\n <van-swipe-item>1</van-swipe-item>\n <van-swipe-item>2</van-swipe-item>\n <van-swipe-item>3</van-swipe-item>\n <van-swipe-item>4</van-swipe-item>\n</van-swipe>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onChange = (index) => showToast('Current Swipe index:' + index);\n return { onChange };\n },\n};\n
\n<van-swipe :autoplay="3000" vertical>\n <van-swipe-item>1</van-swipe-item>\n <van-swipe-item>2</van-swipe-item>\n <van-swipe-item>3</van-swipe-item>\n <van-swipe-item>4</van-swipe-item>\n</van-swipe>\n
\n<van-swipe :loop="false" :width="300">\n <van-swipe-item>1</van-swipe-item>\n <van-swipe-item>2</van-swipe-item>\n <van-swipe-item>3</van-swipe-item>\n <van-swipe-item>4</van-swipe-item>\n</van-swipe>\n
\n\n\nIt\'s not supported to set SwipeItem size in the loop mode.
\n
<van-swipe>\n <van-swipe-item>1</van-swipe-item>\n <van-swipe-item>2</van-swipe-item>\n <van-swipe-item>3</van-swipe-item>\n <van-swipe-item>4</van-swipe-item>\n <template #indicator="{ active, total }">\n <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>\n </template>\n</van-swipe>\n\n<style>\n .custom-indicator {\n position: absolute;\n right: 5px;\n bottom: 5px;\n padding: 2px 5px;\n font-size: 12px;\n background: rgba(0, 0, 0, 0.1);\n }\n</style>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
autoplay | \nAutoplay interval (ms) | \nnumber | string | \n- | \n
duration | \nAnimation duration (ms) | \nnumber | string | \n500 | \n
initial-swipe | \nIndex of initial swipe, start from 0 | \nnumber | string | \n0 | \n
width | \nWidth of swipe item | \nnumber | string | \n0 | \n
height | \nHeight of swipe item | \nnumber | string | \n0 | \n
loop | \nWhether to enable loop | \nboolean | \ntrue | \n
show-indicators | \nWhether to show indicators | \nboolean | \ntrue | \n
vertical | \nWhether to be vertical Scrolling | \nboolean | \nfalse | \n
touchable | \nWhether to allow swipe by touch gesture | \nboolean | \ntrue | \n
stop-propagation | \nWhether to stop touchmove event propagation | \nboolean | \nfalse | \n
lazy-render | \nWhether to enable lazy render | \nboolean | \nfalse | \n
indicator-color | \nIndicator color | \nstring | \n#1989fa | \n
Event | \nDescription | \nArguments | \n
---|---|---|
change | \nEmitted when current swipe changed | \nindex: number | \n
drag-start v4.0.9 | \nEmitted when user starts dragging the swipe | \n{ index: number } | \n
drag-end v4.0.9 | \nEmitted when user ends dragging the swipe | \n{ index: number } | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when component is clicked | \nevent: MouseEvent | \n
Use ref to get Swipe instance and call instance methods..
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
prev | \nSwipe to prev item | \n- | \n- | \n
next | \nSwipe to next item | \n- | \n- | \n
swipeTo | \nSwipe to target index | \nindex: number, options: SwipeToOptions | \n- | \n
resize | \nResize Swipe when container element resized or visibility changed | \n- | \n- | \n
The component exports the following type definitions:
\nimport type { SwipeProps, SwipeInstance, SwipeToOptions } from 'vant';\n
\nSwipeInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { SwipeInstance } from 'vant';\n\nconst swipeRef = ref<SwipeInstance>();\n\nswipeRef.value?.next();\n
\nName | \nDescription | \nType | \n
---|---|---|
immediate | \nWhether to skip animation | \nboolean | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
default | \nContent | \n- | \n
indicator | \nCustom indicator | \n{ active: number, total: number } | \n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-swipe-indicator-size | \n6px | \n- | \n
--van-swipe-indicator-margin | \nvar(--van-padding-sm) | \n- | \n
--van-swipe-indicator-active-opacity | \n1 | \n- | \n
--van-swipe-indicator-inactive-opacity | \n0.3 | \n- | \n
--van-swipe-indicator-active-background | \nvar(--van-primary-color) | \n- | \n
--van-swipe-indicator-inactive-background | \nvar(--van-border-color) | \n- | \n
Used to loop a group of pictures or content.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Swipe, SwipeItem } from 'vant';\n\nconst app = createApp();\napp.use(Swipe);\napp.use(SwipeItem);\n
\nUse autoplay
prop to set autoplay interval.
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">\n <van-swipe-item>1</van-swipe-item>\n <van-swipe-item>2</van-swipe-item>\n <van-swipe-item>3</van-swipe-item>\n <van-swipe-item>4</van-swipe-item>\n</van-swipe>\n\n<style>\n .my-swipe .van-swipe-item {\n color: #fff;\n font-size: 20px;\n line-height: 150px;\n text-align: center;\n background-color: #39a9ed;\n }\n</style>\n
\nUse lazy-render
prop to enable lazy rendering.
<van-swipe :autoplay="3000" lazy-render>\n <van-swipe-item v-for="image in images" :key="image">\n <img :src="image" />\n </van-swipe-item>\n</van-swipe>\n
\nexport default {\n setup() {\n const images = [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n ];\n return { images };\n },\n};\n
\n<van-swipe @change="onChange">\n <van-swipe-item>1</van-swipe-item>\n <van-swipe-item>2</van-swipe-item>\n <van-swipe-item>3</van-swipe-item>\n <van-swipe-item>4</van-swipe-item>\n</van-swipe>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onChange = (index) => showToast('Current Swipe index:' + index);\n return { onChange };\n },\n};\n
\n<van-swipe :autoplay="3000" vertical>\n <van-swipe-item>1</van-swipe-item>\n <van-swipe-item>2</van-swipe-item>\n <van-swipe-item>3</van-swipe-item>\n <van-swipe-item>4</van-swipe-item>\n</van-swipe>\n
\n<van-swipe :loop="false" :width="300">\n <van-swipe-item>1</van-swipe-item>\n <van-swipe-item>2</van-swipe-item>\n <van-swipe-item>3</van-swipe-item>\n <van-swipe-item>4</van-swipe-item>\n</van-swipe>\n
\n\n\nIt\'s not supported to set SwipeItem size in the loop mode.
\n
<van-swipe>\n <van-swipe-item>1</van-swipe-item>\n <van-swipe-item>2</van-swipe-item>\n <van-swipe-item>3</van-swipe-item>\n <van-swipe-item>4</van-swipe-item>\n <template #indicator="{ active, total }">\n <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>\n </template>\n</van-swipe>\n\n<style>\n .custom-indicator {\n position: absolute;\n right: 5px;\n bottom: 5px;\n padding: 2px 5px;\n font-size: 12px;\n background: rgba(0, 0, 0, 0.1);\n }\n</style>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
autoplay | \nAutoplay interval (ms) | \nnumber | string | \n- | \n
duration | \nAnimation duration (ms) | \nnumber | string | \n500 | \n
initial-swipe | \nIndex of initial swipe, start from 0 | \nnumber | string | \n0 | \n
width | \nWidth of swipe item | \nnumber | string | \n0 | \n
height | \nHeight of swipe item | \nnumber | string | \n0 | \n
loop | \nWhether to enable loop | \nboolean | \ntrue | \n
show-indicators | \nWhether to show indicators | \nboolean | \ntrue | \n
vertical | \nWhether to be vertical Scrolling | \nboolean | \nfalse | \n
touchable | \nWhether to allow swipe by touch gesture | \nboolean | \ntrue | \n
stop-propagation | \nWhether to stop touchmove event propagation | \nboolean | \nfalse | \n
lazy-render | \nWhether to enable lazy render | \nboolean | \nfalse | \n
indicator-color | \nIndicator color | \nstring | \n#1989fa | \n
Event | \nDescription | \nArguments | \n
---|---|---|
change | \nEmitted when current swipe changed | \nindex: number | \n
drag-start v4.0.9 | \nEmitted when user starts dragging the swipe | \n{ index: number } | \n
drag-end v4.0.9 | \nEmitted when user ends dragging the swipe | \n{ index: number } | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when component is clicked | \nevent: MouseEvent | \n
Use ref to get Swipe instance and call instance methods..
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
prev | \nSwipe to prev item | \n- | \n- | \n
next | \nSwipe to next item | \n- | \n- | \n
swipeTo | \nSwipe to target index | \nindex: number, options: SwipeToOptions | \n- | \n
resize | \nResize Swipe when container element resized or visibility changed | \n- | \n- | \n
The component exports the following type definitions:
\nimport type { SwipeProps, SwipeInstance, SwipeToOptions } from 'vant';\n
\nSwipeInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { SwipeInstance } from 'vant';\n\nconst swipeRef = ref<SwipeInstance>();\n\nswipeRef.value?.next();\n
\nName | \nDescription | \nType | \n
---|---|---|
immediate | \nWhether to skip animation | \nboolean | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
default | \nContent | \n- | \n
indicator | \nCustom indicator | \n{ active: number, total: number } | \n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-swipe-indicator-size | \n6px | \n- | \n
--van-swipe-indicator-margin | \nvar(--van-padding-sm) | \n- | \n
--van-swipe-indicator-active-opacity | \n1 | \n- | \n
--van-swipe-indicator-inactive-opacity | \n0.3 | \n- | \n
--van-swipe-indicator-active-background | \nvar(--van-primary-color) | \n- | \n
--van-swipe-indicator-inactive-background | \nvar(--van-border-color) | \n- | \n
Vant \u5E95\u5C42\u4F9D\u8D56\u4E86 @vant/use
\u5305\uFF0C\u5176\u4E2D\u5185\u7F6E\u4E86\u4E00\u7CFB\u5217\u7684\u7EC4\u5408\u5F0F API\u3002\u5BF9\u4E8E\u4F7F\u7528\u4E86 Vant \u7684\u9879\u76EE\uFF0C\u53EF\u4EE5\u590D\u7528\u8FD9\u4E9B API \u8FDB\u884C\u5F00\u53D1\u3002
\u867D\u7136 Vant \u7684\u4F9D\u8D56\u4E2D\u5DF2\u7ECF\u5305\u542B\u4E86 @vant/use
\uFF0C\u4F46\u6211\u4EEC\u4ECD\u7136\u63A8\u8350\u663E\u5F0F\u5730\u5B89\u88C5\u5B83\uFF1A
# with npm\nnpm i @vant/use\n\n# with yarn\nyarn add @vant/use\n\n# with pnpm\npnpm add @vant/use\n\n# with Bun\nbun add @vant/use\n
\n\u4E0B\u9762\u662F\u4E00\u4E2A Vant \u7EC4\u5408\u5F0F API \u7684\u7528\u6CD5\u793A\u4F8B\uFF0C\u6211\u4EEC\u4ECE @vant/use
\u8FD9\u4E2A\u5305\u4E2D\u5F15\u5165 useWindowSize
\u65B9\u6CD5\uFF0C\u7136\u540E\u8FDB\u884C\u8C03\u7528\uFF0C\u5373\u53EF\u83B7\u53D6\u5230\u5F53\u524D Window \u7684\u5BBD\u5EA6\u548C\u9AD8\u5EA6\u3002
import { useWindowSize } from '@vant/use';\n\nconst { width, height } = useWindowSize();\n\nconsole.log(width.value); // -> \u7A97\u53E3\u5BBD\u5EA6\nconsole.log(height.value); // -> \u7A97\u53E3\u9AD8\u5EA6\n
\n\u4E0B\u9762\u662F Vant \u5BF9\u5916\u63D0\u4F9B\u7684\u6240\u6709\u7EC4\u5408\u5F0F API\uFF0C\u70B9\u51FB\u540D\u79F0\u53EF\u4EE5\u67E5\u770B\u8BE6\u7EC6\u4ECB\u7ECD\uFF1A
\n\u540D\u79F0 | \n\u63CF\u8FF0 | \n
---|---|
useClickAway | \n\u76D1\u542C\u70B9\u51FB\u5143\u7D20\u5916\u90E8\u7684\u4E8B\u4EF6 | \n
useCountDown | \n\u63D0\u4F9B\u5012\u8BA1\u65F6\u7BA1\u7406\u80FD\u529B | \n
useCustomFieldValue | \n\u81EA\u5B9A\u4E49\u8868\u5355\u7EC4\u4EF6\u4E2D\u7684\u8868\u5355\u9879 | \n
useEventListener | \n\u65B9\u4FBF\u5730\u8FDB\u884C\u4E8B\u4EF6\u7ED1\u5B9A | \n
usePageVisibility | \n\u83B7\u53D6\u9875\u9762\u7684\u53EF\u89C1\u72B6\u6001 | \n
useRect | \n\u83B7\u53D6\u5143\u7D20\u7684\u5927\u5C0F\u53CA\u5176\u76F8\u5BF9\u4E8E\u89C6\u53E3\u7684\u4F4D\u7F6E | \n
useRelation | \n\u5EFA\u7ACB\u7236\u5B50\u7EC4\u4EF6\u4E4B\u95F4\u7684\u5173\u8054\u5173\u7CFB | \n
useScrollParent | \n\u83B7\u53D6\u5143\u7D20\u6700\u8FD1\u7684\u53EF\u6EDA\u52A8\u7236\u5143\u7D20 | \n
useToggle | \n\u7528\u4E8E\u5728\u5E03\u5C14\u503C\u4E4B\u95F4\u8FDB\u884C\u5207\u6362 | \n
useWindowSize | \n\u83B7\u53D6\u6D4F\u89C8\u5668\u7A97\u53E3\u7684\u89C6\u53E3\u5BBD\u5EA6\u548C\u9AD8\u5EA6 | \n
useRaf | \n\u63D0\u4F9BrequestAnimationFrame\u7BA1\u7406\u80FD\u529B | \n
Vant \u5E95\u5C42\u4F9D\u8D56\u4E86 @vant/use
\u5305\uFF0C\u5176\u4E2D\u5185\u7F6E\u4E86\u4E00\u7CFB\u5217\u7684\u7EC4\u5408\u5F0F API\u3002\u5BF9\u4E8E\u4F7F\u7528\u4E86 Vant \u7684\u9879\u76EE\uFF0C\u53EF\u4EE5\u590D\u7528\u8FD9\u4E9B API \u8FDB\u884C\u5F00\u53D1\u3002
\u867D\u7136 Vant \u7684\u4F9D\u8D56\u4E2D\u5DF2\u7ECF\u5305\u542B\u4E86 @vant/use
\uFF0C\u4F46\u6211\u4EEC\u4ECD\u7136\u63A8\u8350\u663E\u5F0F\u5730\u5B89\u88C5\u5B83\uFF1A
# with npm\nnpm i @vant/use\n\n# with yarn\nyarn add @vant/use\n\n# with pnpm\npnpm add @vant/use\n\n# with Bun\nbun add @vant/use\n
\n\u4E0B\u9762\u662F\u4E00\u4E2A Vant \u7EC4\u5408\u5F0F API \u7684\u7528\u6CD5\u793A\u4F8B\uFF0C\u6211\u4EEC\u4ECE @vant/use
\u8FD9\u4E2A\u5305\u4E2D\u5F15\u5165 useWindowSize
\u65B9\u6CD5\uFF0C\u7136\u540E\u8FDB\u884C\u8C03\u7528\uFF0C\u5373\u53EF\u83B7\u53D6\u5230\u5F53\u524D Window \u7684\u5BBD\u5EA6\u548C\u9AD8\u5EA6\u3002
import { useWindowSize } from '@vant/use';\n\nconst { width, height } = useWindowSize();\n\nconsole.log(width.value); // -> \u7A97\u53E3\u5BBD\u5EA6\nconsole.log(height.value); // -> \u7A97\u53E3\u9AD8\u5EA6\n
\n\u4E0B\u9762\u662F Vant \u5BF9\u5916\u63D0\u4F9B\u7684\u6240\u6709\u7EC4\u5408\u5F0F API\uFF0C\u70B9\u51FB\u540D\u79F0\u53EF\u4EE5\u67E5\u770B\u8BE6\u7EC6\u4ECB\u7ECD\uFF1A
\n\u540D\u79F0 | \n\u63CF\u8FF0 | \n
---|---|
useClickAway | \n\u76D1\u542C\u70B9\u51FB\u5143\u7D20\u5916\u90E8\u7684\u4E8B\u4EF6 | \n
useCountDown | \n\u63D0\u4F9B\u5012\u8BA1\u65F6\u7BA1\u7406\u80FD\u529B | \n
useCustomFieldValue | \n\u81EA\u5B9A\u4E49\u8868\u5355\u7EC4\u4EF6\u4E2D\u7684\u8868\u5355\u9879 | \n
useEventListener | \n\u65B9\u4FBF\u5730\u8FDB\u884C\u4E8B\u4EF6\u7ED1\u5B9A | \n
usePageVisibility | \n\u83B7\u53D6\u9875\u9762\u7684\u53EF\u89C1\u72B6\u6001 | \n
useRect | \n\u83B7\u53D6\u5143\u7D20\u7684\u5927\u5C0F\u53CA\u5176\u76F8\u5BF9\u4E8E\u89C6\u53E3\u7684\u4F4D\u7F6E | \n
useRelation | \n\u5EFA\u7ACB\u7236\u5B50\u7EC4\u4EF6\u4E4B\u95F4\u7684\u5173\u8054\u5173\u7CFB | \n
useScrollParent | \n\u83B7\u53D6\u5143\u7D20\u6700\u8FD1\u7684\u53EF\u6EDA\u52A8\u7236\u5143\u7D20 | \n
useToggle | \n\u7528\u4E8E\u5728\u5E03\u5C14\u503C\u4E4B\u95F4\u8FDB\u884C\u5207\u6362 | \n
useWindowSize | \n\u83B7\u53D6\u6D4F\u89C8\u5668\u7A97\u53E3\u7684\u89C6\u53E3\u5BBD\u5EA6\u548C\u9AD8\u5EA6 | \n
useRaf | \n\u63D0\u4F9BrequestAnimationFrame\u7BA1\u7406\u80FD\u529B | \n
Display a list of receiving addresses.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { AddressList } from 'vant';\n\nconst app = createApp();\napp.use(AddressList);\n
\n<van-address-list\n v-model="chosenAddressId"\n :list="list"\n :disabled-list="disabledList"\n disabled-text="The following address is out of range"\n default-tag-text="Default"\n @add="onAdd"\n @edit="onEdit"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const chosenAddressId = ref('1');\n const list = [\n {\n id: '1',\n name: 'John Snow',\n tel: '13000000000',\n address: 'Somewhere',\n isDefault: true,\n },\n {\n id: '2',\n name: 'Ned Stark',\n tel: '1310000000',\n address: 'Somewhere',\n },\n ];\n const disabledList = [\n {\n id: '3',\n name: 'Tywin',\n tel: '1320000000',\n address: 'Somewhere',\n },\n ];\n\n const onAdd = () => showToast('Add');\n const onEdit = (item, index) => showToast('Edit:' + index);\n\n return {\n list,\n onAdd,\n onEdit,\n disabledList,\n chosenAddressId,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nId of chosen address | \nnumber | string | \n- | \n
list | \nAddress list | \nAddress[] | \n[] | \n
disabled-list | \nDisabled address list | \nAddress[] | \n[] | \n
disabled-text | \nDisabled text | \nstring | \n- | \n
switchable | \nWhether to allow switch address | \nboolean | \ntrue | \n
show-add-button | \nWhether to show add button | \nboolean | \ntrue | \n
add-button-text | \nAdd button text | \nstring | \nAdd new address | \n
default-tag-text | \nDefault tag text | \nstring | \n- | \n
right-icon v4.5.0 | \nRight Icon | \nstring | \nedit | \n
Event | \nDescription | \nArguments | \n
---|---|---|
add | \nEmitted when the add button is clicked | \n- | \n
edit | \nEmitted when the edit icon of address is clicked | \nitem: Address, index: number | \n
select | \nEmitted when an address is selected | \nitem: Address, index: number | \n
edit-disabled | \nEmitted when the edit icon of disabled address is clicked | \nitem: Address, index: number | \n
select-disabled | \nEmitted when a disabled address is selected | \nitem: Address, index: number | \n
click-item | \nEmitted when an address item is clicked | \nitem: Address, index: number | \n
Key | \nDescription | \nType | \n
---|---|---|
id | \nId | \nnumber | string | \n
name | \nName | \nstring | \n
tel | \nPhone | \nnumber | string | \n
address | \nAddress | \nstring | \n
isDefault | \nIs default address | \nboolean | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
default | \nCustom content after list | \n- | \n
top | \nCustom content before list | \n- | \n
item-bottom | \nCustom content after list item | \nitem: Address | \n
tag | \nCustom tag of list item | \nitem: Address | \n
The component exports the following type definitions:
\nimport type { AddressListProps, AddressListAddress } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-address-list-padding | \nvar(--van-padding-sm) var(--van-padding-sm) 80px | \n- | \n
--van-address-list-disabled-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-address-list-disabled-text-padding | \nvar(--van-padding-base) * 5 0 var(--van-padding-md) | \n- | \n
--van-address-list-disabled-text-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-address-list-disabled-text-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-address-list-add-button-z-index | \n999 | \n- | \n
--van-address-list-item-padding | \nvar(--van-padding-sm) | \n- | \n
--van-address-list-item-text-color | \nvar(--van-text-color) | \n- | \n
--van-address-list-item-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-address-list-item-font-size | \n13px | \n- | \n
--van-address-list-item-line-height | \nvar(--van-line-height-sm) | \n- | \n
--van-address-list-radio-color | \nvar(--van-primary-color) | \n- | \n
--van-address-list-edit-icon-size | \n20px | \n- | \n
Display a list of receiving addresses.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { AddressList } from 'vant';\n\nconst app = createApp();\napp.use(AddressList);\n
\n<van-address-list\n v-model="chosenAddressId"\n :list="list"\n :disabled-list="disabledList"\n disabled-text="The following address is out of range"\n default-tag-text="Default"\n @add="onAdd"\n @edit="onEdit"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const chosenAddressId = ref('1');\n const list = [\n {\n id: '1',\n name: 'John Snow',\n tel: '13000000000',\n address: 'Somewhere',\n isDefault: true,\n },\n {\n id: '2',\n name: 'Ned Stark',\n tel: '1310000000',\n address: 'Somewhere',\n },\n ];\n const disabledList = [\n {\n id: '3',\n name: 'Tywin',\n tel: '1320000000',\n address: 'Somewhere',\n },\n ];\n\n const onAdd = () => showToast('Add');\n const onEdit = (item, index) => showToast('Edit:' + index);\n\n return {\n list,\n onAdd,\n onEdit,\n disabledList,\n chosenAddressId,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nId of chosen address | \nnumber | string | \n- | \n
list | \nAddress list | \nAddress[] | \n[] | \n
disabled-list | \nDisabled address list | \nAddress[] | \n[] | \n
disabled-text | \nDisabled text | \nstring | \n- | \n
switchable | \nWhether to allow switch address | \nboolean | \ntrue | \n
show-add-button | \nWhether to show add button | \nboolean | \ntrue | \n
add-button-text | \nAdd button text | \nstring | \nAdd new address | \n
default-tag-text | \nDefault tag text | \nstring | \n- | \n
right-icon v4.5.0 | \nRight Icon | \nstring | \nedit | \n
Event | \nDescription | \nArguments | \n
---|---|---|
add | \nEmitted when the add button is clicked | \n- | \n
edit | \nEmitted when the edit icon of address is clicked | \nitem: Address, index: number | \n
select | \nEmitted when an address is selected | \nitem: Address, index: number | \n
edit-disabled | \nEmitted when the edit icon of disabled address is clicked | \nitem: Address, index: number | \n
select-disabled | \nEmitted when a disabled address is selected | \nitem: Address, index: number | \n
click-item | \nEmitted when an address item is clicked | \nitem: Address, index: number | \n
Key | \nDescription | \nType | \n
---|---|---|
id | \nId | \nnumber | string | \n
name | \nName | \nstring | \n
tel | \nPhone | \nnumber | string | \n
address | \nAddress | \nstring | \n
isDefault | \nIs default address | \nboolean | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
default | \nCustom content after list | \n- | \n
top | \nCustom content before list | \n- | \n
item-bottom | \nCustom content after list item | \nitem: Address | \n
tag | \nCustom tag of list item | \nitem: Address | \n
The component exports the following type definitions:
\nimport type { AddressListProps, AddressListAddress } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-address-list-padding | \nvar(--van-padding-sm) var(--van-padding-sm) 80px | \n- | \n
--van-address-list-disabled-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-address-list-disabled-text-padding | \nvar(--van-padding-base) * 5 0 var(--van-padding-md) | \n- | \n
--van-address-list-disabled-text-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-address-list-disabled-text-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-address-list-add-button-z-index | \n999 | \n- | \n
--van-address-list-item-padding | \nvar(--van-padding-sm) | \n- | \n
--van-address-list-item-text-color | \nvar(--van-text-color) | \n- | \n
--van-address-list-item-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-address-list-item-font-size | \n13px | \n- | \n
--van-address-list-item-line-height | \nvar(--van-line-height-sm) | \n- | \n
--van-address-list-radio-color | \nvar(--van-primary-color) | \n- | \n
--van-address-list-edit-icon-size | \n20px | \n- | \n
\u521B\u5EFA\u4E00\u4E2A\u906E\u7F69\u5C42\uFF0C\u7528\u4E8E\u5F3A\u8C03\u7279\u5B9A\u7684\u9875\u9762\u5143\u7D20\uFF0C\u5E76\u963B\u6B62\u7528\u6237\u8FDB\u884C\u5176\u4ED6\u64CD\u4F5C\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Overlay } from 'vant';\n\nconst app = createApp();\napp.use(Overlay);\n
\n<van-button type="primary" text="\u663E\u793A\u906E\u7F69\u5C42" @click="show = true" />\n<van-overlay :show="show" @click="show = false" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n return { show };\n },\n};\n
\n\u901A\u8FC7\u9ED8\u8BA4\u63D2\u69FD\u53EF\u4EE5\u5728\u906E\u7F69\u5C42\u4E0A\u5D4C\u5165\u4EFB\u610F\u5185\u5BB9\u3002
\n<van-overlay :show="show" @click="show = false">\n <div class="wrapper" @click.stop>\n <div class="block" />\n </div>\n</van-overlay>\n\n<style>\n .wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n }\n\n .block {\n width: 120px;\n height: 120px;\n background-color: #fff;\n }\n</style>\n
\nOverlay \u7EC4\u4EF6\u9ED8\u8BA4\u7684 z-index \u5C42\u7EA7\u4E3A 1
\uFF0C\u4F60\u53EF\u4EE5\u901A\u8FC7 z-index
\u5C5E\u6027\u8BBE\u7F6E\u5B83\u7684 z-index \u5C42\u7EA7\u3002
<van-overlay z-index="100" />\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
show | \n\u662F\u5426\u5C55\u793A\u906E\u7F69\u5C42 | \nboolean | \nfalse | \n
z-index | \nz-index \u5C42\u7EA7 | \nnumber | string | \n1 | \n
duration | \n\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u79D2\uFF0C\u8BBE\u7F6E\u4E3A 0 \u53EF\u4EE5\u7981\u7528\u52A8\u753B | \nnumber | string | \n0.3 | \n
class-name | \n\u81EA\u5B9A\u4E49\u7C7B\u540D | \nstring | \n- | \n
custom-style | \n\u81EA\u5B9A\u4E49\u6837\u5F0F | \nobject | \n- | \n
lock-scroll | \n\u662F\u5426\u9501\u5B9A\u80CC\u666F\u6EDA\u52A8\uFF0C\u9501\u5B9A\u65F6\u8499\u5C42\u91CC\u7684\u5185\u5BB9\u4E5F\u5C06\u65E0\u6CD5\u6EDA\u52A8 | \nboolean | \ntrue | \n
lazy-render | \n\u662F\u5426\u5728\u663E\u793A\u65F6\u624D\u6E32\u67D3\u8282\u70B9 | \nboolean | \ntrue | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u9ED8\u8BA4\u63D2\u69FD\uFF0C\u7528\u4E8E\u5728\u906E\u7F69\u5C42\u4E0A\u65B9\u5D4C\u5165\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { OverlayProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-overlay-z-index | \n1 | \n- | \n
--van-overlay-background | \nrgba(0, 0, 0, 0.7) | \n- | \n
\u521B\u5EFA\u4E00\u4E2A\u906E\u7F69\u5C42\uFF0C\u7528\u4E8E\u5F3A\u8C03\u7279\u5B9A\u7684\u9875\u9762\u5143\u7D20\uFF0C\u5E76\u963B\u6B62\u7528\u6237\u8FDB\u884C\u5176\u4ED6\u64CD\u4F5C\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Overlay } from 'vant';\n\nconst app = createApp();\napp.use(Overlay);\n
\n<van-button type="primary" text="\u663E\u793A\u906E\u7F69\u5C42" @click="show = true" />\n<van-overlay :show="show" @click="show = false" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n return { show };\n },\n};\n
\n\u901A\u8FC7\u9ED8\u8BA4\u63D2\u69FD\u53EF\u4EE5\u5728\u906E\u7F69\u5C42\u4E0A\u5D4C\u5165\u4EFB\u610F\u5185\u5BB9\u3002
\n<van-overlay :show="show" @click="show = false">\n <div class="wrapper" @click.stop>\n <div class="block" />\n </div>\n</van-overlay>\n\n<style>\n .wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n }\n\n .block {\n width: 120px;\n height: 120px;\n background-color: #fff;\n }\n</style>\n
\nOverlay \u7EC4\u4EF6\u9ED8\u8BA4\u7684 z-index \u5C42\u7EA7\u4E3A 1
\uFF0C\u4F60\u53EF\u4EE5\u901A\u8FC7 z-index
\u5C5E\u6027\u8BBE\u7F6E\u5B83\u7684 z-index \u5C42\u7EA7\u3002
<van-overlay z-index="100" />\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
show | \n\u662F\u5426\u5C55\u793A\u906E\u7F69\u5C42 | \nboolean | \nfalse | \n
z-index | \nz-index \u5C42\u7EA7 | \nnumber | string | \n1 | \n
duration | \n\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u79D2\uFF0C\u8BBE\u7F6E\u4E3A 0 \u53EF\u4EE5\u7981\u7528\u52A8\u753B | \nnumber | string | \n0.3 | \n
class-name | \n\u81EA\u5B9A\u4E49\u7C7B\u540D | \nstring | \n- | \n
custom-style | \n\u81EA\u5B9A\u4E49\u6837\u5F0F | \nobject | \n- | \n
lock-scroll | \n\u662F\u5426\u9501\u5B9A\u80CC\u666F\u6EDA\u52A8\uFF0C\u9501\u5B9A\u65F6\u8499\u5C42\u91CC\u7684\u5185\u5BB9\u4E5F\u5C06\u65E0\u6CD5\u6EDA\u52A8 | \nboolean | \ntrue | \n
lazy-render | \n\u662F\u5426\u5728\u663E\u793A\u65F6\u624D\u6E32\u67D3\u8282\u70B9 | \nboolean | \ntrue | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u9ED8\u8BA4\u63D2\u69FD\uFF0C\u7528\u4E8E\u5728\u906E\u7F69\u5C42\u4E0A\u65B9\u5D4C\u5165\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { OverlayProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-overlay-z-index | \n1 | \n- | \n
--van-overlay-background | \nrgba(0, 0, 0, 0.7) | \n- | \n
\u7528\u4E8E\u6570\u636E\u5F55\u5165\u3001\u6821\u9A8C\uFF0C\u652F\u6301\u8F93\u5165\u6846\u3001\u5355\u9009\u6846\u3001\u590D\u9009\u6846\u3001\u6587\u4EF6\u4E0A\u4F20\u7B49\u7C7B\u578B\uFF0C\u9700\u8981\u4E0E Field \u8F93\u5165\u6846 \u7EC4\u4EF6\u642D\u914D\u4F7F\u7528\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Form, Field, CellGroup } from 'vant';\n\nconst app = createApp();\napp.use(Form);\napp.use(Field);\napp.use(CellGroup);\n
\n\u5728\u8868\u5355\u4E2D\uFF0C\u6BCF\u4E2A Field \u7EC4\u4EF6 \u4EE3\u8868\u4E00\u4E2A\u8868\u5355\u9879\uFF0C\u4F7F\u7528 Field \u7684 rules
\u5C5E\u6027\u5B9A\u4E49\u6821\u9A8C\u89C4\u5219\u3002
<van-form @submit="onSubmit">\n <van-cell-group inset>\n <van-field\n v-model="username"\n name="\u7528\u6237\u540D"\n label="\u7528\u6237\u540D"\n placeholder="\u7528\u6237\u540D"\n :rules="[{ required: true, message: '\u8BF7\u586B\u5199\u7528\u6237\u540D' }]"\n />\n <van-field\n v-model="password"\n type="password"\n name="\u5BC6\u7801"\n label="\u5BC6\u7801"\n placeholder="\u5BC6\u7801"\n :rules="[{ required: true, message: '\u8BF7\u586B\u5199\u5BC6\u7801' }]"\n />\n </van-cell-group>\n <div style="margin: 16px;">\n <van-button round block type="primary" native-type="submit">\n \u63D0\u4EA4\n </van-button>\n </div>\n</van-form>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const username = ref('');\n const password = ref('');\n const onSubmit = (values) => {\n console.log('submit', values);\n };\n\n return {\n username,\n password,\n onSubmit,\n };\n },\n};\n
\n\u901A\u8FC7 rules
\u5B9A\u4E49\u8868\u5355\u6821\u9A8C\u89C4\u5219\uFF0C\u6240\u6709\u53EF\u7528\u5B57\u6BB5\u89C1\u4E0B\u65B9\u8868\u683C\u3002
<van-form @failed="onFailed">\n <van-cell-group inset>\n <!-- \u901A\u8FC7 pattern \u8FDB\u884C\u6B63\u5219\u6821\u9A8C -->\n <van-field\n v-model="value1"\n name="pattern"\n placeholder="\u6B63\u5219\u6821\u9A8C"\n :rules="[{ pattern, message: '\u8BF7\u8F93\u5165\u6B63\u786E\u5185\u5BB9' }]"\n />\n <!-- \u901A\u8FC7 validator \u8FDB\u884C\u51FD\u6570\u6821\u9A8C -->\n <van-field\n v-model="value2"\n name="validator"\n placeholder="\u51FD\u6570\u6821\u9A8C"\n :rules="[{ validator, message: '\u8BF7\u8F93\u5165\u6B63\u786E\u5185\u5BB9' }]"\n />\n <!-- \u901A\u8FC7 validator \u8FD4\u56DE\u9519\u8BEF\u63D0\u793A -->\n <van-field\n v-model="value3"\n name="validatorMessage"\n placeholder="\u6821\u9A8C\u51FD\u6570\u8FD4\u56DE\u9519\u8BEF\u63D0\u793A"\n :rules="[{ validator: validatorMessage }]"\n />\n <!-- \u901A\u8FC7 validator \u8FDB\u884C\u5F02\u6B65\u51FD\u6570\u6821\u9A8C -->\n <van-field\n v-model="value4"\n name="asyncValidator"\n placeholder="\u5F02\u6B65\u51FD\u6570\u6821\u9A8C"\n :rules="[{ validator: asyncValidator, message: '\u8BF7\u8F93\u5165\u6B63\u786E\u5185\u5BB9' }]"\n />\n </van-cell-group>\n <div style="margin: 16px;">\n <van-button round block type="primary" native-type="submit">\n \u63D0\u4EA4\n </van-button>\n </div>\n</van-form>\n
\nimport { ref } from 'vue';\nimport { closeToast, showLoadingToast } from 'vant';\n\nexport default {\n setup() {\n const value1 = ref('');\n const value2 = ref('');\n const value3 = ref('abc');\n const value4 = ref('');\n const pattern = /\\d{6}/;\n\n // \u6821\u9A8C\u51FD\u6570\u8FD4\u56DE true \u8868\u793A\u6821\u9A8C\u901A\u8FC7\uFF0Cfalse \u8868\u793A\u4E0D\u901A\u8FC7\n const validator = (val) => /1\\d{10}/.test(val);\n\n // \u6821\u9A8C\u51FD\u6570\u53EF\u4EE5\u76F4\u63A5\u8FD4\u56DE\u4E00\u6BB5\u9519\u8BEF\u63D0\u793A\n const validatorMessage = (val) => `${val} \u4E0D\u5408\u6CD5\uFF0C\u8BF7\u91CD\u65B0\u8F93\u5165`;\n\n // \u6821\u9A8C\u51FD\u6570\u53EF\u4EE5\u8FD4\u56DE Promise\uFF0C\u5B9E\u73B0\u5F02\u6B65\u6821\u9A8C\n const asyncValidator = (val) =>\n new Promise((resolve) => {\n showLoadingToast('\u9A8C\u8BC1\u4E2D...');\n\n setTimeout(() => {\n closeToast();\n resolve(val === '1234');\n }, 1000);\n });\n\n const onFailed = (errorInfo) => {\n console.log('failed', errorInfo);\n };\n\n return {\n value1,\n value2,\n value3,\n value4,\n pattern,\n onFailed,\n validator,\n asyncValidator,\n };\n },\n};\n
\n\u5728\u8868\u5355\u4E2D\u4F7F\u7528 Switch \u7EC4\u4EF6\u3002
\n<van-field name="switch" label="\u5F00\u5173">\n <template #input>\n <van-switch v-model="checked" />\n </template>\n</van-field>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(false);\n return { checked };\n },\n};\n
\n\u5728\u8868\u5355\u4E2D\u4F7F\u7528 Checkbox \u7EC4\u4EF6\u3002
\n<van-field name="checkbox" label="\u590D\u9009\u6846">\n <template #input>\n <van-checkbox v-model="checked" shape="square" />\n </template>\n</van-field>\n<van-field name="checkboxGroup" label="\u590D\u9009\u6846\u7EC4">\n <template #input>\n <van-checkbox-group v-model="groupChecked" direction="horizontal">\n <van-checkbox name="1" shape="square">\u590D\u9009\u6846 1</van-checkbox>\n <van-checkbox name="2" shape="square">\u590D\u9009\u6846 2</van-checkbox>\n </van-checkbox-group>\n </template>\n</van-field>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(false);\n const groupChecked = ref([]);\n return {\n checked,\n groupChecked,\n };\n },\n};\n
\n\u5728\u8868\u5355\u4E2D\u4F7F\u7528 Radio \u7EC4\u4EF6\u3002
\n<van-field name="radio" label="\u5355\u9009\u6846">\n <template #input>\n <van-radio-group v-model="checked" direction="horizontal">\n <van-radio name="1">\u5355\u9009\u6846 1</van-radio>\n <van-radio name="2">\u5355\u9009\u6846 2</van-radio>\n </van-radio-group>\n </template>\n</van-field>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref('1');\n return { checked };\n },\n};\n
\n\u5728\u8868\u5355\u4E2D\u4F7F\u7528 Stepper \u7EC4\u4EF6\u3002
\n<van-field name="stepper" label="\u6B65\u8FDB\u5668">\n <template #input>\n <van-stepper v-model="value" />\n </template>\n</van-field>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(1);\n return { value };\n },\n};\n
\n\u5728\u8868\u5355\u4E2D\u4F7F\u7528 Rate \u7EC4\u4EF6\u3002
\n<van-field name="rate" label="\u8BC4\u5206">\n <template #input>\n <van-rate v-model="value" />\n </template>\n</van-field>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(3);\n return { value };\n },\n};\n
\n\u5728\u8868\u5355\u4E2D\u4F7F\u7528 Slider \u7EC4\u4EF6\u3002
\n<van-field name="slider" label="\u6ED1\u5757">\n <template #input>\n <van-slider v-model="value" />\n </template>\n</van-field>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(50);\n return { value };\n },\n};\n
\n\u5728\u8868\u5355\u4E2D\u4F7F\u7528 Uploader \u7EC4\u4EF6\u3002
\n<van-field name="uploader" label="\u6587\u4EF6\u4E0A\u4F20">\n <template #input>\n <van-uploader v-model="value" />\n </template>\n</van-field>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref([\n { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },\n ]);\n return { value };\n },\n};\n
\n\u5728\u8868\u5355\u4E2D\u4F7F\u7528 Picker \u7EC4\u4EF6\u3002
\n<van-field\n v-model="result"\n is-link\n readonly\n name="picker"\n label="\u9009\u62E9\u5668"\n placeholder="\u70B9\u51FB\u9009\u62E9\u57CE\u5E02"\n @click="showPicker = true"\n/>\n<van-popup v-model:show="showPicker" position="bottom">\n <van-picker\n :columns="columns"\n @confirm="onConfirm"\n @cancel="showPicker = false"\n />\n</van-popup>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const result = ref('');\n const showPicker = ref(false);\n const columns = [\n { text: '\u676D\u5DDE', value: 'Hangzhou' },\n { text: '\u5B81\u6CE2', value: 'Ningbo' },\n { text: '\u6E29\u5DDE', value: 'Wenzhou' },\n { text: '\u7ECD\u5174', value: 'Shaoxing' },\n { text: '\u6E56\u5DDE', value: 'Huzhou' },\n ];\n\n const onConfirm = ({ selectedOptions }) => {\n result.value = selectedOptions[0]?.text;\n showPicker.value = false;\n };\n\n return {\n result,\n columns,\n onConfirm,\n showPicker,\n };\n },\n};\n
\n\u5728\u8868\u5355\u4E2D\u4F7F\u7528 DatePicker \u7EC4\u4EF6\u3002
\n<van-field\n v-model="result"\n is-link\n readonly\n name="datePicker"\n label="\u65F6\u95F4\u9009\u62E9"\n placeholder="\u70B9\u51FB\u9009\u62E9\u65F6\u95F4"\n @click="showPicker = true"\n/>\n<van-popup v-model:show="showPicker" position="bottom">\n <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" />\n</van-popup>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const result = ref('');\n const showPicker = ref(false);\n const onConfirm = ({ selectedValues }) => {\n result.value = selectedValues.join('/');\n showPicker.value = false;\n };\n\n return {\n result,\n onConfirm,\n showPicker,\n };\n },\n};\n
\n\u5728\u8868\u5355\u4E2D\u4F7F\u7528 Area \u7EC4\u4EF6\u3002
\n<van-field\n v-model="result"\n is-link\n readonly\n name="area"\n label="\u5730\u533A\u9009\u62E9"\n placeholder="\u70B9\u51FB\u9009\u62E9\u7701\u5E02\u533A"\n @click="showArea = true"\n/>\n<van-popup v-model:show="showArea" position="bottom">\n <van-area\n :area-list="areaList"\n @confirm="onConfirm"\n @cancel="showArea = false"\n />\n</van-popup>\n
\nimport { ref } from 'vue';\nimport { areaList } from '@vant/area-data';\n\nexport default {\n setup() {\n const result = ref('');\n const showArea = ref(false);\n const onConfirm = ({ selectedOptions }) => {\n showArea.value = false;\n result.value = selectedOptions.map((item) => item.text).join('/');\n };\n\n return {\n result,\n areaList,\n showArea,\n onConfirm,\n };\n },\n};\n
\n\u5728\u8868\u5355\u4E2D\u4F7F\u7528 Calendar \u7EC4\u4EF6\u3002
\n<van-field\n v-model="result"\n is-link\n readonly\n name="calendar"\n label="\u65E5\u5386"\n placeholder="\u70B9\u51FB\u9009\u62E9\u65E5\u671F"\n @click="showCalendar = true"\n/>\n<van-calendar v-model:show="showCalendar" @confirm="onConfirm" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const result = ref('');\n const showCalendar = ref(false);\n const onConfirm = (date) => {\n result.value = `${date.getMonth() + 1}/${date.getDate()}`;\n showCalendar.value = false;\n };\n\n return {\n result,\n onConfirm,\n showCalendar,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
label-width | \n\u8868\u5355\u9879 label \u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx | \nnumber | string | \n6.2em | \n
label-align | \n\u8868\u5355\u9879 label \u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center right top | \nstring | \nleft | \n
input-align | \n\u8F93\u5165\u6846\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center right | \nstring | \nleft | \n
error-message-align | \n\u9519\u8BEF\u63D0\u793A\u6587\u6848\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center right | \nstring | \nleft | \n
validate-trigger | \n\u8868\u5355\u6821\u9A8C\u89E6\u53D1\u65F6\u673A\uFF0C\u53EF\u9009\u503C\u4E3A onChange \u3001onSubmit \uFF0C\u652F\u6301\u901A\u8FC7\u6570\u7EC4\u540C\u65F6\u8BBE\u7F6E\u591A\u4E2A\u503C\uFF0C\u5177\u4F53\u7528\u6CD5\u89C1\u4E0B\u65B9\u8868\u683C | \nstring | string[] | \nonBlur | \n
colon | \n\u662F\u5426\u5728 label \u540E\u9762\u6DFB\u52A0\u5192\u53F7 | \nboolean | \nfalse | \n
disabled | \n\u662F\u5426\u7981\u7528\u8868\u5355\u4E2D\u7684\u6240\u6709\u8F93\u5165\u6846 | \nboolean | \nfalse | \n
readonly | \n\u662F\u5426\u5C06\u8868\u5355\u4E2D\u7684\u6240\u6709\u8F93\u5165\u6846\u8BBE\u7F6E\u4E3A\u53EA\u8BFB\u72B6\u6001 | \nboolean | \nfalse | \n
required v4.7.3 | \n\u662F\u5426\u663E\u793A\u8868\u5355\u5FC5\u586B\u661F\u53F7 | \nboolean | \'auto\' | \nnull | \n
validate-first | \n\u662F\u5426\u5728\u67D0\u4E00\u9879\u6821\u9A8C\u4E0D\u901A\u8FC7\u65F6\u505C\u6B62\u6821\u9A8C | \nboolean | \nfalse | \n
scroll-to-error | \n\u662F\u5426\u5728\u63D0\u4EA4\u8868\u5355\u4E14\u6821\u9A8C\u4E0D\u901A\u8FC7\u65F6\u6EDA\u52A8\u81F3\u9519\u8BEF\u7684\u8868\u5355\u9879 | \nboolean | \nfalse | \n
show-error | \n\u662F\u5426\u5728\u6821\u9A8C\u4E0D\u901A\u8FC7\u65F6\u6807\u7EA2\u8F93\u5165\u6846 | \nboolean | \nfalse | \n
show-error-message | \n\u662F\u5426\u5728\u6821\u9A8C\u4E0D\u901A\u8FC7\u65F6\u5728\u8F93\u5165\u6846\u4E0B\u65B9\u5C55\u793A\u9519\u8BEF\u63D0\u793A | \nboolean | \ntrue | \n
submit-on-enter | \n\u662F\u5426\u5728\u6309\u4E0B\u56DE\u8F66\u952E\u65F6\u63D0\u4EA4\u8868\u5355 | \nboolean | \ntrue | \n
\n\n\u8868\u5355\u9879\u7684 API \u53C2\u89C1\uFF1AField \u7EC4\u4EF6
\n
\u4F7F\u7528 Field \u7684 rules
\u5C5E\u6027\u53EF\u4EE5\u5B9A\u4E49\u6821\u9A8C\u89C4\u5219\uFF0C\u53EF\u9009\u5C5E\u6027\u5982\u4E0B:
\u952E\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
required | \n\u662F\u5426\u4E3A\u5FC5\u9009\u5B57\u6BB5\uFF0C\u5F53\u503C\u4E3A\u7A7A\u503C\u65F6\uFF08\u7A7A\u5B57\u7B26\u4E32\u3001\u7A7A\u6570\u7EC4\u3001false \u3001undefined \u3001null \uFF09\uFF0C\u6821\u9A8C\u4E0D\u901A\u8FC7 | \nboolean | \n
message | \n\u9519\u8BEF\u63D0\u793A\u6587\u6848\uFF0C\u53EF\u4EE5\u8BBE\u7F6E\u4E3A\u4E00\u4E2A\u51FD\u6570\u6765\u8FD4\u56DE\u52A8\u6001\u7684\u6587\u6848\u5185\u5BB9 | \nstring | (value, rule) => string | \n
validator | \n\u901A\u8FC7\u51FD\u6570\u8FDB\u884C\u6821\u9A8C\uFF0C\u53EF\u4EE5\u8FD4\u56DE\u4E00\u4E2A Promise \u6765\u8FDB\u884C\u5F02\u6B65\u6821\u9A8C | \n(value, rule) => boolean | string | Promise | \n
pattern | \n\u901A\u8FC7\u6B63\u5219\u8868\u8FBE\u5F0F\u8FDB\u884C\u6821\u9A8C\uFF0C\u6B63\u5219\u65E0\u6CD5\u5339\u914D\u8868\u793A\u6821\u9A8C\u4E0D\u901A\u8FC7 | \nRegExp | \n
trigger | \n\u8BBE\u7F6E\u672C\u9879\u89C4\u5219\u7684\u89E6\u53D1\u65F6\u673A\uFF0C\u4F18\u5148\u7EA7\u9AD8\u4E8E Form \u7EC4\u4EF6\u8BBE\u7F6E\u7684 validate-trigger \u5C5E\u6027\uFF0C\u53EF\u9009\u503C\u4E3A onChange \u3001onBlur \u3001onSubmit | \nstring | string[] | \n
formatter | \n\u683C\u5F0F\u5316\u51FD\u6570\uFF0C\u5C06\u8868\u5355\u9879\u7684\u503C\u8F6C\u6362\u540E\u8FDB\u884C\u6821\u9A8C | \n(value, rule) => any | \n
validateEmpty | \n\u8BBE\u7F6E validator \u548C pattern \u662F\u5426\u8981\u5BF9\u7A7A\u503C\u8FDB\u884C\u6821\u9A8C\uFF0C\u9ED8\u8BA4\u503C\u4E3A true \uFF0C\u53EF\u4EE5\u8BBE\u7F6E\u4E3A false \u6765\u7981\u7528\u8BE5\u884C\u4E3A | \nboolean | \n
\u901A\u8FC7 validate-trigger
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u8868\u5355\u6821\u9A8C\u7684\u89E6\u53D1\u65F6\u673A\u3002
\u503C | \n\u63CF\u8FF0 | \n
---|---|
onSubmit | \n\u4EC5\u5728\u63D0\u4EA4\u8868\u5355\u65F6\u89E6\u53D1\u6821\u9A8C | \n
onBlur | \n\u5728\u63D0\u4EA4\u8868\u5355\u548C\u8F93\u5165\u6846\u5931\u7126\u65F6\u89E6\u53D1\u6821\u9A8C | \n
onChange | \n\u5728\u63D0\u4EA4\u8868\u5355\u548C\u8F93\u5165\u6846\u5185\u5BB9\u53D8\u5316\u65F6\u89E6\u53D1\u6821\u9A8C | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
submit | \n\u63D0\u4EA4\u8868\u5355\u4E14\u9A8C\u8BC1\u901A\u8FC7\u540E\u89E6\u53D1 | \nvalues: object | \n
failed | \n\u63D0\u4EA4\u8868\u5355\u4E14\u9A8C\u8BC1\u4E0D\u901A\u8FC7\u540E\u89E6\u53D1 | \nerrorInfo: { values: object, errors: object[] } | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Form \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
submit | \n\u63D0\u4EA4\u8868\u5355\uFF0C\u4E0E\u70B9\u51FB\u63D0\u4EA4\u6309\u94AE\u7684\u6548\u679C\u7B49\u4EF7 | \n- | \n- | \n
getValues | \n\u83B7\u53D6\u6240\u6709\u8868\u5355\u9879\u5F53\u524D\u7684\u503C | \n- | \nRecord<string, unknown> | \n
validate | \n\u9A8C\u8BC1\u8868\u5355\uFF0C\u652F\u6301\u4F20\u5165\u4E00\u4E2A\u6216\u591A\u4E2A name \u6765\u9A8C\u8BC1\u5355\u4E2A\u6216\u90E8\u5206\u8868\u5355\u9879\uFF0C\u4E0D\u4F20\u5165 name \u65F6\uFF0C\u4F1A\u9A8C\u8BC1\u6240\u6709\u8868\u5355\u9879 | \nname?: string | string[] | \nPromise<void> | \n
resetValidation | \n\u91CD\u7F6E\u8868\u5355\u9879\u7684\u9A8C\u8BC1\u63D0\u793A\uFF0C\u652F\u6301\u4F20\u5165\u4E00\u4E2A\u6216\u591A\u4E2A name \u6765\u91CD\u7F6E\u5355\u4E2A\u6216\u90E8\u5206\u8868\u5355\u9879\uFF0C\u4E0D\u4F20\u5165 name \u65F6\uFF0C\u4F1A\u91CD\u7F6E\u6240\u6709\u8868\u5355\u9879 | \nname?: string | string[] | \n- | \n
getValidationStatus | \n\u83B7\u53D6\u6240\u6709\u8868\u5355\u9879\u7684\u6821\u9A8C\u72B6\u6001\uFF0C\u72B6\u6001\u5305\u62EC passed \u3001failed \u3001unvalidated | \n- | \nRecord<string, FieldValidationStatus> | \n
scrollToField | \n\u6EDA\u52A8\u5230\u5BF9\u5E94\u8868\u5355\u9879\u7684\u4F4D\u7F6E\uFF0C\u9ED8\u8BA4\u6EDA\u52A8\u5230\u9876\u90E8\uFF0C\u7B2C\u4E8C\u4E2A\u53C2\u6570\u4F20 false \u53EF\u6EDA\u52A8\u81F3\u5E95\u90E8 | \nname: string, alignToTop: boolean | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { FormProps, FormInstance } from 'vant';\n
\nFormInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { FormInstance } from 'vant';\n\nconst formRef = ref<FormInstance>();\n\nformRef.value?.submit();\n
\n\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u8868\u5355\u5185\u5BB9 | \n
Vant \u652F\u6301\u5728 Form \u7EC4\u4EF6\u4E2D\u63D2\u5165\u81EA\u5B9A\u4E49\u7684\u8868\u5355\u9879\uFF0C\u5177\u4F53\u7528\u6CD5\u53C2\u89C1 useCustomFieldValue\u3002
\n\u7528\u4E8E\u6570\u636E\u5F55\u5165\u3001\u6821\u9A8C\uFF0C\u652F\u6301\u8F93\u5165\u6846\u3001\u5355\u9009\u6846\u3001\u590D\u9009\u6846\u3001\u6587\u4EF6\u4E0A\u4F20\u7B49\u7C7B\u578B\uFF0C\u9700\u8981\u4E0E Field \u8F93\u5165\u6846 \u7EC4\u4EF6\u642D\u914D\u4F7F\u7528\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Form, Field, CellGroup } from 'vant';\n\nconst app = createApp();\napp.use(Form);\napp.use(Field);\napp.use(CellGroup);\n
\n\u5728\u8868\u5355\u4E2D\uFF0C\u6BCF\u4E2A Field \u7EC4\u4EF6 \u4EE3\u8868\u4E00\u4E2A\u8868\u5355\u9879\uFF0C\u4F7F\u7528 Field \u7684 rules
\u5C5E\u6027\u5B9A\u4E49\u6821\u9A8C\u89C4\u5219\u3002
<van-form @submit="onSubmit">\n <van-cell-group inset>\n <van-field\n v-model="username"\n name="\u7528\u6237\u540D"\n label="\u7528\u6237\u540D"\n placeholder="\u7528\u6237\u540D"\n :rules="[{ required: true, message: '\u8BF7\u586B\u5199\u7528\u6237\u540D' }]"\n />\n <van-field\n v-model="password"\n type="password"\n name="\u5BC6\u7801"\n label="\u5BC6\u7801"\n placeholder="\u5BC6\u7801"\n :rules="[{ required: true, message: '\u8BF7\u586B\u5199\u5BC6\u7801' }]"\n />\n </van-cell-group>\n <div style="margin: 16px;">\n <van-button round block type="primary" native-type="submit">\n \u63D0\u4EA4\n </van-button>\n </div>\n</van-form>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const username = ref('');\n const password = ref('');\n const onSubmit = (values) => {\n console.log('submit', values);\n };\n\n return {\n username,\n password,\n onSubmit,\n };\n },\n};\n
\n\u901A\u8FC7 rules
\u5B9A\u4E49\u8868\u5355\u6821\u9A8C\u89C4\u5219\uFF0C\u6240\u6709\u53EF\u7528\u5B57\u6BB5\u89C1\u4E0B\u65B9\u8868\u683C\u3002
<van-form @failed="onFailed">\n <van-cell-group inset>\n <!-- \u901A\u8FC7 pattern \u8FDB\u884C\u6B63\u5219\u6821\u9A8C -->\n <van-field\n v-model="value1"\n name="pattern"\n placeholder="\u6B63\u5219\u6821\u9A8C"\n :rules="[{ pattern, message: '\u8BF7\u8F93\u5165\u6B63\u786E\u5185\u5BB9' }]"\n />\n <!-- \u901A\u8FC7 validator \u8FDB\u884C\u51FD\u6570\u6821\u9A8C -->\n <van-field\n v-model="value2"\n name="validator"\n placeholder="\u51FD\u6570\u6821\u9A8C"\n :rules="[{ validator, message: '\u8BF7\u8F93\u5165\u6B63\u786E\u5185\u5BB9' }]"\n />\n <!-- \u901A\u8FC7 validator \u8FD4\u56DE\u9519\u8BEF\u63D0\u793A -->\n <van-field\n v-model="value3"\n name="validatorMessage"\n placeholder="\u6821\u9A8C\u51FD\u6570\u8FD4\u56DE\u9519\u8BEF\u63D0\u793A"\n :rules="[{ validator: validatorMessage }]"\n />\n <!-- \u901A\u8FC7 validator \u8FDB\u884C\u5F02\u6B65\u51FD\u6570\u6821\u9A8C -->\n <van-field\n v-model="value4"\n name="asyncValidator"\n placeholder="\u5F02\u6B65\u51FD\u6570\u6821\u9A8C"\n :rules="[{ validator: asyncValidator, message: '\u8BF7\u8F93\u5165\u6B63\u786E\u5185\u5BB9' }]"\n />\n </van-cell-group>\n <div style="margin: 16px;">\n <van-button round block type="primary" native-type="submit">\n \u63D0\u4EA4\n </van-button>\n </div>\n</van-form>\n
\nimport { ref } from 'vue';\nimport { closeToast, showLoadingToast } from 'vant';\n\nexport default {\n setup() {\n const value1 = ref('');\n const value2 = ref('');\n const value3 = ref('abc');\n const value4 = ref('');\n const pattern = /\\d{6}/;\n\n // \u6821\u9A8C\u51FD\u6570\u8FD4\u56DE true \u8868\u793A\u6821\u9A8C\u901A\u8FC7\uFF0Cfalse \u8868\u793A\u4E0D\u901A\u8FC7\n const validator = (val) => /1\\d{10}/.test(val);\n\n // \u6821\u9A8C\u51FD\u6570\u53EF\u4EE5\u76F4\u63A5\u8FD4\u56DE\u4E00\u6BB5\u9519\u8BEF\u63D0\u793A\n const validatorMessage = (val) => `${val} \u4E0D\u5408\u6CD5\uFF0C\u8BF7\u91CD\u65B0\u8F93\u5165`;\n\n // \u6821\u9A8C\u51FD\u6570\u53EF\u4EE5\u8FD4\u56DE Promise\uFF0C\u5B9E\u73B0\u5F02\u6B65\u6821\u9A8C\n const asyncValidator = (val) =>\n new Promise((resolve) => {\n showLoadingToast('\u9A8C\u8BC1\u4E2D...');\n\n setTimeout(() => {\n closeToast();\n resolve(val === '1234');\n }, 1000);\n });\n\n const onFailed = (errorInfo) => {\n console.log('failed', errorInfo);\n };\n\n return {\n value1,\n value2,\n value3,\n value4,\n pattern,\n onFailed,\n validator,\n asyncValidator,\n };\n },\n};\n
\n\u5728\u8868\u5355\u4E2D\u4F7F\u7528 Switch \u7EC4\u4EF6\u3002
\n<van-field name="switch" label="\u5F00\u5173">\n <template #input>\n <van-switch v-model="checked" />\n </template>\n</van-field>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(false);\n return { checked };\n },\n};\n
\n\u5728\u8868\u5355\u4E2D\u4F7F\u7528 Checkbox \u7EC4\u4EF6\u3002
\n<van-field name="checkbox" label="\u590D\u9009\u6846">\n <template #input>\n <van-checkbox v-model="checked" shape="square" />\n </template>\n</van-field>\n<van-field name="checkboxGroup" label="\u590D\u9009\u6846\u7EC4">\n <template #input>\n <van-checkbox-group v-model="groupChecked" direction="horizontal">\n <van-checkbox name="1" shape="square">\u590D\u9009\u6846 1</van-checkbox>\n <van-checkbox name="2" shape="square">\u590D\u9009\u6846 2</van-checkbox>\n </van-checkbox-group>\n </template>\n</van-field>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(false);\n const groupChecked = ref([]);\n return {\n checked,\n groupChecked,\n };\n },\n};\n
\n\u5728\u8868\u5355\u4E2D\u4F7F\u7528 Radio \u7EC4\u4EF6\u3002
\n<van-field name="radio" label="\u5355\u9009\u6846">\n <template #input>\n <van-radio-group v-model="checked" direction="horizontal">\n <van-radio name="1">\u5355\u9009\u6846 1</van-radio>\n <van-radio name="2">\u5355\u9009\u6846 2</van-radio>\n </van-radio-group>\n </template>\n</van-field>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref('1');\n return { checked };\n },\n};\n
\n\u5728\u8868\u5355\u4E2D\u4F7F\u7528 Stepper \u7EC4\u4EF6\u3002
\n<van-field name="stepper" label="\u6B65\u8FDB\u5668">\n <template #input>\n <van-stepper v-model="value" />\n </template>\n</van-field>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(1);\n return { value };\n },\n};\n
\n\u5728\u8868\u5355\u4E2D\u4F7F\u7528 Rate \u7EC4\u4EF6\u3002
\n<van-field name="rate" label="\u8BC4\u5206">\n <template #input>\n <van-rate v-model="value" />\n </template>\n</van-field>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(3);\n return { value };\n },\n};\n
\n\u5728\u8868\u5355\u4E2D\u4F7F\u7528 Slider \u7EC4\u4EF6\u3002
\n<van-field name="slider" label="\u6ED1\u5757">\n <template #input>\n <van-slider v-model="value" />\n </template>\n</van-field>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(50);\n return { value };\n },\n};\n
\n\u5728\u8868\u5355\u4E2D\u4F7F\u7528 Uploader \u7EC4\u4EF6\u3002
\n<van-field name="uploader" label="\u6587\u4EF6\u4E0A\u4F20">\n <template #input>\n <van-uploader v-model="value" />\n </template>\n</van-field>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref([\n { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },\n ]);\n return { value };\n },\n};\n
\n\u5728\u8868\u5355\u4E2D\u4F7F\u7528 Picker \u7EC4\u4EF6\u3002
\n<van-field\n v-model="result"\n is-link\n readonly\n name="picker"\n label="\u9009\u62E9\u5668"\n placeholder="\u70B9\u51FB\u9009\u62E9\u57CE\u5E02"\n @click="showPicker = true"\n/>\n<van-popup v-model:show="showPicker" position="bottom">\n <van-picker\n :columns="columns"\n @confirm="onConfirm"\n @cancel="showPicker = false"\n />\n</van-popup>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const result = ref('');\n const showPicker = ref(false);\n const columns = [\n { text: '\u676D\u5DDE', value: 'Hangzhou' },\n { text: '\u5B81\u6CE2', value: 'Ningbo' },\n { text: '\u6E29\u5DDE', value: 'Wenzhou' },\n { text: '\u7ECD\u5174', value: 'Shaoxing' },\n { text: '\u6E56\u5DDE', value: 'Huzhou' },\n ];\n\n const onConfirm = ({ selectedOptions }) => {\n result.value = selectedOptions[0]?.text;\n showPicker.value = false;\n };\n\n return {\n result,\n columns,\n onConfirm,\n showPicker,\n };\n },\n};\n
\n\u5728\u8868\u5355\u4E2D\u4F7F\u7528 DatePicker \u7EC4\u4EF6\u3002
\n<van-field\n v-model="result"\n is-link\n readonly\n name="datePicker"\n label="\u65F6\u95F4\u9009\u62E9"\n placeholder="\u70B9\u51FB\u9009\u62E9\u65F6\u95F4"\n @click="showPicker = true"\n/>\n<van-popup v-model:show="showPicker" position="bottom">\n <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" />\n</van-popup>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const result = ref('');\n const showPicker = ref(false);\n const onConfirm = ({ selectedValues }) => {\n result.value = selectedValues.join('/');\n showPicker.value = false;\n };\n\n return {\n result,\n onConfirm,\n showPicker,\n };\n },\n};\n
\n\u5728\u8868\u5355\u4E2D\u4F7F\u7528 Area \u7EC4\u4EF6\u3002
\n<van-field\n v-model="result"\n is-link\n readonly\n name="area"\n label="\u5730\u533A\u9009\u62E9"\n placeholder="\u70B9\u51FB\u9009\u62E9\u7701\u5E02\u533A"\n @click="showArea = true"\n/>\n<van-popup v-model:show="showArea" position="bottom">\n <van-area\n :area-list="areaList"\n @confirm="onConfirm"\n @cancel="showArea = false"\n />\n</van-popup>\n
\nimport { ref } from 'vue';\nimport { areaList } from '@vant/area-data';\n\nexport default {\n setup() {\n const result = ref('');\n const showArea = ref(false);\n const onConfirm = ({ selectedOptions }) => {\n showArea.value = false;\n result.value = selectedOptions.map((item) => item.text).join('/');\n };\n\n return {\n result,\n areaList,\n showArea,\n onConfirm,\n };\n },\n};\n
\n\u5728\u8868\u5355\u4E2D\u4F7F\u7528 Calendar \u7EC4\u4EF6\u3002
\n<van-field\n v-model="result"\n is-link\n readonly\n name="calendar"\n label="\u65E5\u5386"\n placeholder="\u70B9\u51FB\u9009\u62E9\u65E5\u671F"\n @click="showCalendar = true"\n/>\n<van-calendar v-model:show="showCalendar" @confirm="onConfirm" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const result = ref('');\n const showCalendar = ref(false);\n const onConfirm = (date) => {\n result.value = `${date.getMonth() + 1}/${date.getDate()}`;\n showCalendar.value = false;\n };\n\n return {\n result,\n onConfirm,\n showCalendar,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
label-width | \n\u8868\u5355\u9879 label \u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx | \nnumber | string | \n6.2em | \n
label-align | \n\u8868\u5355\u9879 label \u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center right top | \nstring | \nleft | \n
input-align | \n\u8F93\u5165\u6846\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center right | \nstring | \nleft | \n
error-message-align | \n\u9519\u8BEF\u63D0\u793A\u6587\u6848\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center right | \nstring | \nleft | \n
validate-trigger | \n\u8868\u5355\u6821\u9A8C\u89E6\u53D1\u65F6\u673A\uFF0C\u53EF\u9009\u503C\u4E3A onChange \u3001onSubmit \uFF0C\u652F\u6301\u901A\u8FC7\u6570\u7EC4\u540C\u65F6\u8BBE\u7F6E\u591A\u4E2A\u503C\uFF0C\u5177\u4F53\u7528\u6CD5\u89C1\u4E0B\u65B9\u8868\u683C | \nstring | string[] | \nonBlur | \n
colon | \n\u662F\u5426\u5728 label \u540E\u9762\u6DFB\u52A0\u5192\u53F7 | \nboolean | \nfalse | \n
disabled | \n\u662F\u5426\u7981\u7528\u8868\u5355\u4E2D\u7684\u6240\u6709\u8F93\u5165\u6846 | \nboolean | \nfalse | \n
readonly | \n\u662F\u5426\u5C06\u8868\u5355\u4E2D\u7684\u6240\u6709\u8F93\u5165\u6846\u8BBE\u7F6E\u4E3A\u53EA\u8BFB\u72B6\u6001 | \nboolean | \nfalse | \n
required v4.7.3 | \n\u662F\u5426\u663E\u793A\u8868\u5355\u5FC5\u586B\u661F\u53F7 | \nboolean | \'auto\' | \nnull | \n
validate-first | \n\u662F\u5426\u5728\u67D0\u4E00\u9879\u6821\u9A8C\u4E0D\u901A\u8FC7\u65F6\u505C\u6B62\u6821\u9A8C | \nboolean | \nfalse | \n
scroll-to-error | \n\u662F\u5426\u5728\u63D0\u4EA4\u8868\u5355\u4E14\u6821\u9A8C\u4E0D\u901A\u8FC7\u65F6\u6EDA\u52A8\u81F3\u9519\u8BEF\u7684\u8868\u5355\u9879 | \nboolean | \nfalse | \n
show-error | \n\u662F\u5426\u5728\u6821\u9A8C\u4E0D\u901A\u8FC7\u65F6\u6807\u7EA2\u8F93\u5165\u6846 | \nboolean | \nfalse | \n
show-error-message | \n\u662F\u5426\u5728\u6821\u9A8C\u4E0D\u901A\u8FC7\u65F6\u5728\u8F93\u5165\u6846\u4E0B\u65B9\u5C55\u793A\u9519\u8BEF\u63D0\u793A | \nboolean | \ntrue | \n
submit-on-enter | \n\u662F\u5426\u5728\u6309\u4E0B\u56DE\u8F66\u952E\u65F6\u63D0\u4EA4\u8868\u5355 | \nboolean | \ntrue | \n
\n\n\u8868\u5355\u9879\u7684 API \u53C2\u89C1\uFF1AField \u7EC4\u4EF6
\n
\u4F7F\u7528 Field \u7684 rules
\u5C5E\u6027\u53EF\u4EE5\u5B9A\u4E49\u6821\u9A8C\u89C4\u5219\uFF0C\u53EF\u9009\u5C5E\u6027\u5982\u4E0B:
\u952E\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
required | \n\u662F\u5426\u4E3A\u5FC5\u9009\u5B57\u6BB5\uFF0C\u5F53\u503C\u4E3A\u7A7A\u503C\u65F6\uFF08\u7A7A\u5B57\u7B26\u4E32\u3001\u7A7A\u6570\u7EC4\u3001false \u3001undefined \u3001null \uFF09\uFF0C\u6821\u9A8C\u4E0D\u901A\u8FC7 | \nboolean | \n
message | \n\u9519\u8BEF\u63D0\u793A\u6587\u6848\uFF0C\u53EF\u4EE5\u8BBE\u7F6E\u4E3A\u4E00\u4E2A\u51FD\u6570\u6765\u8FD4\u56DE\u52A8\u6001\u7684\u6587\u6848\u5185\u5BB9 | \nstring | (value, rule) => string | \n
validator | \n\u901A\u8FC7\u51FD\u6570\u8FDB\u884C\u6821\u9A8C\uFF0C\u53EF\u4EE5\u8FD4\u56DE\u4E00\u4E2A Promise \u6765\u8FDB\u884C\u5F02\u6B65\u6821\u9A8C | \n(value, rule) => boolean | string | Promise | \n
pattern | \n\u901A\u8FC7\u6B63\u5219\u8868\u8FBE\u5F0F\u8FDB\u884C\u6821\u9A8C\uFF0C\u6B63\u5219\u65E0\u6CD5\u5339\u914D\u8868\u793A\u6821\u9A8C\u4E0D\u901A\u8FC7 | \nRegExp | \n
trigger | \n\u8BBE\u7F6E\u672C\u9879\u89C4\u5219\u7684\u89E6\u53D1\u65F6\u673A\uFF0C\u4F18\u5148\u7EA7\u9AD8\u4E8E Form \u7EC4\u4EF6\u8BBE\u7F6E\u7684 validate-trigger \u5C5E\u6027\uFF0C\u53EF\u9009\u503C\u4E3A onChange \u3001onBlur \u3001onSubmit | \nstring | string[] | \n
formatter | \n\u683C\u5F0F\u5316\u51FD\u6570\uFF0C\u5C06\u8868\u5355\u9879\u7684\u503C\u8F6C\u6362\u540E\u8FDB\u884C\u6821\u9A8C | \n(value, rule) => any | \n
validateEmpty | \n\u8BBE\u7F6E validator \u548C pattern \u662F\u5426\u8981\u5BF9\u7A7A\u503C\u8FDB\u884C\u6821\u9A8C\uFF0C\u9ED8\u8BA4\u503C\u4E3A true \uFF0C\u53EF\u4EE5\u8BBE\u7F6E\u4E3A false \u6765\u7981\u7528\u8BE5\u884C\u4E3A | \nboolean | \n
\u901A\u8FC7 validate-trigger
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u8868\u5355\u6821\u9A8C\u7684\u89E6\u53D1\u65F6\u673A\u3002
\u503C | \n\u63CF\u8FF0 | \n
---|---|
onSubmit | \n\u4EC5\u5728\u63D0\u4EA4\u8868\u5355\u65F6\u89E6\u53D1\u6821\u9A8C | \n
onBlur | \n\u5728\u63D0\u4EA4\u8868\u5355\u548C\u8F93\u5165\u6846\u5931\u7126\u65F6\u89E6\u53D1\u6821\u9A8C | \n
onChange | \n\u5728\u63D0\u4EA4\u8868\u5355\u548C\u8F93\u5165\u6846\u5185\u5BB9\u53D8\u5316\u65F6\u89E6\u53D1\u6821\u9A8C | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
submit | \n\u63D0\u4EA4\u8868\u5355\u4E14\u9A8C\u8BC1\u901A\u8FC7\u540E\u89E6\u53D1 | \nvalues: object | \n
failed | \n\u63D0\u4EA4\u8868\u5355\u4E14\u9A8C\u8BC1\u4E0D\u901A\u8FC7\u540E\u89E6\u53D1 | \nerrorInfo: { values: object, errors: object[] } | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Form \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
submit | \n\u63D0\u4EA4\u8868\u5355\uFF0C\u4E0E\u70B9\u51FB\u63D0\u4EA4\u6309\u94AE\u7684\u6548\u679C\u7B49\u4EF7 | \n- | \n- | \n
getValues | \n\u83B7\u53D6\u6240\u6709\u8868\u5355\u9879\u5F53\u524D\u7684\u503C | \n- | \nRecord<string, unknown> | \n
validate | \n\u9A8C\u8BC1\u8868\u5355\uFF0C\u652F\u6301\u4F20\u5165\u4E00\u4E2A\u6216\u591A\u4E2A name \u6765\u9A8C\u8BC1\u5355\u4E2A\u6216\u90E8\u5206\u8868\u5355\u9879\uFF0C\u4E0D\u4F20\u5165 name \u65F6\uFF0C\u4F1A\u9A8C\u8BC1\u6240\u6709\u8868\u5355\u9879 | \nname?: string | string[] | \nPromise<void> | \n
resetValidation | \n\u91CD\u7F6E\u8868\u5355\u9879\u7684\u9A8C\u8BC1\u63D0\u793A\uFF0C\u652F\u6301\u4F20\u5165\u4E00\u4E2A\u6216\u591A\u4E2A name \u6765\u91CD\u7F6E\u5355\u4E2A\u6216\u90E8\u5206\u8868\u5355\u9879\uFF0C\u4E0D\u4F20\u5165 name \u65F6\uFF0C\u4F1A\u91CD\u7F6E\u6240\u6709\u8868\u5355\u9879 | \nname?: string | string[] | \n- | \n
getValidationStatus | \n\u83B7\u53D6\u6240\u6709\u8868\u5355\u9879\u7684\u6821\u9A8C\u72B6\u6001\uFF0C\u72B6\u6001\u5305\u62EC passed \u3001failed \u3001unvalidated | \n- | \nRecord<string, FieldValidationStatus> | \n
scrollToField | \n\u6EDA\u52A8\u5230\u5BF9\u5E94\u8868\u5355\u9879\u7684\u4F4D\u7F6E\uFF0C\u9ED8\u8BA4\u6EDA\u52A8\u5230\u9876\u90E8\uFF0C\u7B2C\u4E8C\u4E2A\u53C2\u6570\u4F20 false \u53EF\u6EDA\u52A8\u81F3\u5E95\u90E8 | \nname: string, alignToTop: boolean | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { FormProps, FormInstance } from 'vant';\n
\nFormInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { FormInstance } from 'vant';\n\nconst formRef = ref<FormInstance>();\n\nformRef.value?.submit();\n
\n\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u8868\u5355\u5185\u5BB9 | \n
Vant \u652F\u6301\u5728 Form \u7EC4\u4EF6\u4E2D\u63D2\u5165\u81EA\u5B9A\u4E49\u7684\u8868\u5355\u9879\uFF0C\u5177\u4F53\u7528\u6CD5\u53C2\u89C1 useCustomFieldValue\u3002
\nLayout \u63D0\u4F9B\u4E86 van-row
\u548C van-col
\u4E24\u4E2A\u7EC4\u4EF6\u6765\u8FDB\u884C\u884C\u5217\u5E03\u5C40\u3002
\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Col, Row } from 'vant';\n\nconst app = createApp();\napp.use(Col);\napp.use(Row);\n
\nLayout \u7EC4\u4EF6\u63D0\u4F9B\u4E86 24\u5217\u6805\u683C
\uFF0C\u901A\u8FC7\u5728 Col
\u4E0A\u6DFB\u52A0 span
\u5C5E\u6027\u8BBE\u7F6E\u5217\u6240\u5360\u7684\u5BBD\u5EA6\u767E\u5206\u6BD4\u3002\u6B64\u5916\uFF0C\u6DFB\u52A0 offset
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u5217\u7684\u504F\u79FB\u5BBD\u5EA6\uFF0C\u8BA1\u7B97\u65B9\u5F0F\u4E0E span \u76F8\u540C\u3002
<van-row>\n <van-col span="8">span: 8</van-col>\n <van-col span="8">span: 8</van-col>\n <van-col span="8">span: 8</van-col>\n</van-row>\n\n<van-row>\n <van-col span="4">span: 4</van-col>\n <van-col span="10" offset="4">offset: 4, span: 10</van-col>\n</van-row>\n\n<van-row>\n <van-col offset="12" span="12">offset: 12, span: 12</van-col>\n</van-row>\n
\n\u901A\u8FC7 gutter
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u5217\u5143\u7D20\u4E4B\u95F4\u7684\u95F4\u8DDD\uFF0C\u9ED8\u8BA4\u95F4\u8DDD\u4E3A 0\u3002
<van-row gutter="20">\n <van-col span="8">span: 8</van-col>\n <van-col span="8">span: 8</van-col>\n <van-col span="8">span: 8</van-col>\n</van-row>\n
\n\u5982\u679C\u9700\u8981\u8BBE\u7F6E\u5782\u76F4\u95F4\u8DDD\uFF0C\u53EF\u4EE5\u4F7F\u7528\u6570\u7EC4\u5F62\u5F0F\u8BBE\u7F6E [\u6C34\u5E73\u95F4\u8DDD, \u5782\u76F4\u95F4\u8DDD]
\u3002
<!-- \u8BBE\u7F6E\u5782\u76F4\u95F4\u8DDD -->\n<van-row :gutter="[20, 20]">\n <van-col span="12">span: 12</van-col>\n <van-col span="12">span: 12</van-col>\n <van-col span="12">span: 12</van-col>\n <van-col span="12">span: 12</van-col>\n</van-row>\n
\n\u901A\u8FC7 justify
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u4E3B\u8F74\u4E0A\u5185\u5BB9\u7684\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u7B49\u4EF7\u4E8E flex \u5E03\u5C40\u4E2D\u7684 justify-content
\u5C5E\u6027\u3002
<!-- \u5C45\u4E2D -->\n<van-row justify="center">\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n</van-row>\n\n<!-- \u53F3\u5BF9\u9F50 -->\n<van-row justify="end">\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n</van-row>\n\n<!-- \u4E24\u7AEF\u5BF9\u9F50 -->\n<van-row justify="space-between">\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n</van-row>\n\n<!-- \u6BCF\u4E2A\u5143\u7D20\u7684\u4E24\u4FA7\u95F4\u9694\u76F8\u7B49 -->\n<van-row justify="space-around">\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n</van-row>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
gutter | \n\u5217\u5143\u7D20\u4E4B\u95F4\u7684\u95F4\u8DDD\uFF08\u5355\u4F4D\u4E3A px\uFF09 | \nnumber | string | Array | \n- | \n
tag | \n\u81EA\u5B9A\u4E49\u5143\u7D20\u6807\u7B7E | \nstring | \ndiv | \n
justify | \n\u4E3B\u8F74\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A end center space-around space-between | \nstring | \nstart | \n
align | \n\u4EA4\u53C9\u8F74\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center bottom | \nstring | \ntop | \n
wrap | \n\u662F\u5426\u81EA\u52A8\u6362\u884C | \nboolean | \ntrue | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
span | \n\u5217\u5143\u7D20\u5BBD\u5EA6 | \nnumber | string | \n- | \n
offset | \n\u5217\u5143\u7D20\u504F\u79FB\u8DDD\u79BB | \nnumber | string | \n- | \n
tag | \n\u81EA\u5B9A\u4E49\u5143\u7D20\u6807\u7B7E | \nstring | \ndiv | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { ColProps, RowProps, RowAlign, RowJustify } from 'vant';\n
\nLayout \u63D0\u4F9B\u4E86 van-row
\u548C van-col
\u4E24\u4E2A\u7EC4\u4EF6\u6765\u8FDB\u884C\u884C\u5217\u5E03\u5C40\u3002
\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Col, Row } from 'vant';\n\nconst app = createApp();\napp.use(Col);\napp.use(Row);\n
\nLayout \u7EC4\u4EF6\u63D0\u4F9B\u4E86 24\u5217\u6805\u683C
\uFF0C\u901A\u8FC7\u5728 Col
\u4E0A\u6DFB\u52A0 span
\u5C5E\u6027\u8BBE\u7F6E\u5217\u6240\u5360\u7684\u5BBD\u5EA6\u767E\u5206\u6BD4\u3002\u6B64\u5916\uFF0C\u6DFB\u52A0 offset
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u5217\u7684\u504F\u79FB\u5BBD\u5EA6\uFF0C\u8BA1\u7B97\u65B9\u5F0F\u4E0E span \u76F8\u540C\u3002
<van-row>\n <van-col span="8">span: 8</van-col>\n <van-col span="8">span: 8</van-col>\n <van-col span="8">span: 8</van-col>\n</van-row>\n\n<van-row>\n <van-col span="4">span: 4</van-col>\n <van-col span="10" offset="4">offset: 4, span: 10</van-col>\n</van-row>\n\n<van-row>\n <van-col offset="12" span="12">offset: 12, span: 12</van-col>\n</van-row>\n
\n\u901A\u8FC7 gutter
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u5217\u5143\u7D20\u4E4B\u95F4\u7684\u95F4\u8DDD\uFF0C\u9ED8\u8BA4\u95F4\u8DDD\u4E3A 0\u3002
<van-row gutter="20">\n <van-col span="8">span: 8</van-col>\n <van-col span="8">span: 8</van-col>\n <van-col span="8">span: 8</van-col>\n</van-row>\n
\n\u5982\u679C\u9700\u8981\u8BBE\u7F6E\u5782\u76F4\u95F4\u8DDD\uFF0C\u53EF\u4EE5\u4F7F\u7528\u6570\u7EC4\u5F62\u5F0F\u8BBE\u7F6E [\u6C34\u5E73\u95F4\u8DDD, \u5782\u76F4\u95F4\u8DDD]
\u3002
<!-- \u8BBE\u7F6E\u5782\u76F4\u95F4\u8DDD -->\n<van-row :gutter="[20, 20]">\n <van-col span="12">span: 12</van-col>\n <van-col span="12">span: 12</van-col>\n <van-col span="12">span: 12</van-col>\n <van-col span="12">span: 12</van-col>\n</van-row>\n
\n\u901A\u8FC7 justify
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u4E3B\u8F74\u4E0A\u5185\u5BB9\u7684\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u7B49\u4EF7\u4E8E flex \u5E03\u5C40\u4E2D\u7684 justify-content
\u5C5E\u6027\u3002
<!-- \u5C45\u4E2D -->\n<van-row justify="center">\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n</van-row>\n\n<!-- \u53F3\u5BF9\u9F50 -->\n<van-row justify="end">\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n</van-row>\n\n<!-- \u4E24\u7AEF\u5BF9\u9F50 -->\n<van-row justify="space-between">\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n</van-row>\n\n<!-- \u6BCF\u4E2A\u5143\u7D20\u7684\u4E24\u4FA7\u95F4\u9694\u76F8\u7B49 -->\n<van-row justify="space-around">\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n</van-row>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
gutter | \n\u5217\u5143\u7D20\u4E4B\u95F4\u7684\u95F4\u8DDD\uFF08\u5355\u4F4D\u4E3A px\uFF09 | \nnumber | string | Array | \n- | \n
tag | \n\u81EA\u5B9A\u4E49\u5143\u7D20\u6807\u7B7E | \nstring | \ndiv | \n
justify | \n\u4E3B\u8F74\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A end center space-around space-between | \nstring | \nstart | \n
align | \n\u4EA4\u53C9\u8F74\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center bottom | \nstring | \ntop | \n
wrap | \n\u662F\u5426\u81EA\u52A8\u6362\u884C | \nboolean | \ntrue | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
span | \n\u5217\u5143\u7D20\u5BBD\u5EA6 | \nnumber | string | \n- | \n
offset | \n\u5217\u5143\u7D20\u504F\u79FB\u8DDD\u79BB | \nnumber | string | \n- | \n
tag | \n\u81EA\u5B9A\u4E49\u5143\u7D20\u6807\u7B7E | \nstring | \ndiv | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { ColProps, RowProps, RowAlign, RowJustify } from 'vant';\n
\nThe picker component is usually used with Popup Component.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Picker } from 'vant';\n\nconst app = createApp();\napp.use(Picker);\n
\n<van-picker\n title="Title"\n :columns="columns"\n @confirm="onConfirm"\n @cancel="onCancel"\n @change="onChange"\n/>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const columns = [\n { text: 'Delaware', value: 'Delaware' },\n { text: 'Florida', value: 'Florida' },\n { text: 'Wenzhou', value: 'Wenzhou' },\n { text: 'Indiana', value: 'Indiana' },\n { text: 'Maine', value: 'Maine' },\n ];\n const onConfirm = ({ selectedValues }) => {\n showToast(`Value: ${selectedValues.join(',')}`);\n };\n const onChange = ({ selectedValues }) => {\n showToast(`Value: ${selectedValues.join(',')}`);\n };\n const onCancel = () => showToast('Cancel');\n\n return {\n columns,\n onChange,\n onCancel,\n onConfirm,\n };\n },\n};\n
\n<van-field\n v-model="fieldValue"\n is-link\n readonly\n label="City"\n placeholder="Choose City"\n @click="showPicker = true"\n/>\n<van-popup v-model:show="showPicker" round position="bottom">\n <van-picker\n title="Title"\n :columns="columns"\n @cancel="showPicker = false"\n @confirm="onConfirm"\n />\n</van-popup>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const columns = [\n { text: 'Delaware', value: 'Delaware' },\n { text: 'Florida', value: 'Florida' },\n { text: 'Wenzhou', value: 'Wenzhou' },\n { text: 'Indiana', value: 'Indiana' },\n { text: 'Maine', value: 'Maine' },\n ];\n const fieldValue = ref('');\n const showPicker = ref(false);\n\n const onConfirm = ({ selectedOptions }) => {\n showPicker.value = false;\n fieldValue.value = selectedOptions[0].text;\n };\n\n return {\n columns,\n onConfirm,\n fieldValue,\n showPicker,\n };\n },\n};\n
\nUsing v-model
to bind selected values.
<van-picker v-model="selectedValues" title="Title" :columns="columns" />\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const columns = [\n { text: 'Delaware', value: 'Delaware' },\n { text: 'Florida', value: 'Florida' },\n { text: 'Wenzhou', value: 'Wenzhou' },\n { text: 'Indiana', value: 'Indiana' },\n { text: 'Maine', value: 'Maine' },\n ];\n const selectedValues = ref(['Wenzhou']);\n\n return {\n columns,\n selectedValues,\n };\n },\n};\n
\n<van-picker title="Title" :columns="columns" />\n
\nexport default {\n setup() {\n const columns = [\n [\n { text: 'Monday', value: 'Monday' },\n { text: 'Tuesday', value: 'Tuesday' },\n { text: 'Wednesday', value: 'Wednesday' },\n { text: 'Thursday', value: 'Thursday' },\n { text: 'Friday', value: 'Friday' },\n ],\n [\n { text: 'Morning', value: 'Morning' },\n { text: 'Afternoon', value: 'Afternoon' },\n { text: 'Evening', value: 'Evening' },\n ],\n ];\n\n return { columns };\n },\n};\n
\n<van-picker title="Title" :columns="columns" />\n
\nexport default {\n setup() {\n const columns = [\n {\n text: 'Zhejiang',\n value: 'Zhejiang',\n children: [\n {\n text: 'Hangzhou',\n value: 'Hangzhou',\n children: [\n { text: 'Xihu', value: 'Xihu' },\n { text: 'Yuhang', value: 'Yuhang' },\n ],\n },\n {\n text: 'Wenzhou',\n value: 'Wenzhou',\n children: [\n { text: 'Lucheng', value: 'Lucheng' },\n { text: 'Ouhai', value: 'Ouhai' },\n ],\n },\n ],\n },\n {\n text: 'Fujian',\n value: 'Fujian',\n children: [\n {\n text: 'Fuzhou',\n value: 'Fuzhou',\n children: [\n { text: 'Gulou', value: 'Gulou' },\n { text: 'Taijiang', value: 'Taijiang' },\n ],\n },\n {\n text: 'Xiamen',\n value: 'Xiamen',\n children: [\n { text: 'Siming', value: 'Siming' },\n { text: 'Haicang', value: 'Haicang' },\n ],\n },\n ],\n },\n ];\n\n return { columns };\n },\n};\n
\n<van-picker :columns="columns" />\n
\nexport default {\n setup() {\n const columns = [\n { text: 'Delaware', value: 'Delaware', disabled: true },\n { text: 'Florida', value: 'Florida' },\n { text: 'Wenzhou', value: 'Wenzhou' },\n ];\n return { columns };\n },\n};\n
\nWhen Picker columns data is acquired asynchronously, use loading
prop to show loading prompt.
<van-picker title="Title" :columns="columns" :loading="loading" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const columns = ref([]);\n const loading = ref(true);\n\n setTimeout(() => {\n columns.value = [{ text: 'Option', value: 'option' }];\n loading.value = false;\n }, 1000);\n\n return { columns, loading };\n },\n};\n
\n<van-picker\n :title="Title"\n :columns="columns"\n :columns-field-names="customFieldName"\n/>\n
\nexport default {\n setup() {\n const columns = [\n {\n cityName: 'Zhejiang',\n cities: [\n {\n cityName: 'Hangzhou',\n cities: [{ cityName: 'Xihu' }, { cityName: 'Yuhang' }],\n },\n {\n cityName: 'Wenzhou',\n cities: [{ cityName: 'Lucheng' }, { cityName: 'Ouhai' }],\n },\n ],\n },\n {\n cityName: 'Fujian',\n cities: [\n {\n cityName: 'Fuzhou',\n cities: [{ cityName: 'Gulou' }, { cityName: 'Taijiang' }],\n },\n {\n cityName: 'Xiamen',\n cities: [{ cityName: 'Siming' }, { cityName: 'Haicang' }],\n },\n ],\n },\n ];\n\n const customFieldName = {\n text: 'cityName',\n value: 'cityName',\n children: 'cities',\n };\n\n return {\n columns,\n customFieldName,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nvalues of chosen option | \nnumber[] | string[] | \n- | \n
columns | \nColumns data | \nPickerOption[] | PickerOption[][] | \n[] | \n
columns-field-names | \ncustom columns field | \nobject | \n{ text: \'text\', value: \'value\', children: \'children\' } | \n
title | \nToolbar title | \nstring | \n- | \n
confirm-button-text | \nText of confirm button | \nstring | \nConfirm | \n
cancel-button-text | \nText of cancel button | \nstring | \nCancel | \n
toolbar-position | \nToolbar position, cat be set to bottom | \nstring | \ntop | \n
loading | \nWhether to show loading prompt | \nboolean | \nfalse | \n
readonly | \nWhether to be readonly | \nboolean | \nfalse | \n
show-toolbar | \nWhether to show toolbar | \nboolean | \ntrue | \n
allow-html | \nWhether to allow HTML in option text | \nboolean | \nfalse | \n
option-height | \nOption height, supports px vw vh rem unit, default px | \nnumber | string | \n44 | \n
visible-option-num | \nCount of visible columns | \nnumber | string | \n6 | \n
swipe-duration | \nDuration of the momentum animation, unit ms | \nnumber | string | \n1000 | \n
Event | \nDescription | \nArguments | \n
---|---|---|
confirm | \nEmitted when the confirm button is clicked | \n{ selectedValues, selectedOptions, selectedIndexes } | \n
cancel | \nEmitted when the cancel button is clicked | \n{ selectedValues, selectedOptions, selectedIndexes } | \n
change | \nEmitted when current selected option is changed | \n{ selectedValues, selectedOptions,selectedIndexes, columnIndex } | \n
click-option | \nEmitted when an option is clicked | \n{ currentOption, selectedValues, selectedOptions, selectedIndexes, columnIndex } | \n
scroll-into v4.2.1 | \nEmitted when an option is scrolled into the middle selection area by clicking or dragging | \n{ currentOption, columnIndex } | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
toolbar | \nCustom toolbar content | \n- | \n
title | \nCustom title | \n- | \n
confirm | \nCustom confirm button text | \n- | \n
cancel | \nCustom cancel button text | \n- | \n
option | \nCustom option content | \noption: PickerOption, index: number | \n
columns-top | \nCustom content above columns | \n- | \n
columns-bottom | \nCustom content below columns | \n- | \n
Key | \nDescription | \nType | \n
---|---|---|
text | \nText | \nstring | number | \n
value | \nValue of option | \nstring | number | \n
disabled | \nWhether to disable option | \nboolean | \n
children | \nCascade children options | \nPickerOption[] | \n
className | \nClassName for this option | \nstring | Array | object | \n
Use ref to get Picker instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
confirm | \nStop scrolling and emit confirm event | \n- | \n- | \n
getSelectedOptions | \nGet current selected options | \n- | \n(PickerOption | undefined)[] | \n
The component exports the following type definitions:
\nimport type {\n PickerProps,\n PickerColumn,\n PickerOption,\n PickerInstance,\n PickerFieldNames,\n PickerToolbarPosition,\n PickerCancelEventParams,\n PickerChangeEventParams,\n PickerConfirmEventParams,\n} from 'vant';\n
\nPickerInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { PickerInstance } from 'vant';\n\nconst pickerRef = ref<PickerInstance>();\n\npickerRef.value?.confirm();\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-picker-background | \nvar(--van-background-2) | \n- | \n
--van-picker-toolbar-height | \n44px | \n- | \n
--van-picker-title-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-picker-title-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-picker-action-padding | \n0 var(--van-padding-md) | \n- | \n
--van-picker-action-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-picker-confirm-action-color | \nvar(--van-primary-color) | \n- | \n
--van-picker-cancel-action-color | \nvar(--van-text-color-2) | \n- | \n
--van-picker-option-padding | \n0 var(--van-padding-base) | \n- | \n
--van-picker-option-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-picker-option-text-color | \nvar(--van-text-color) | \n- | \n
--van-picker-option-disabled-opacity | \n0.3 | \n- | \n
--van-picker-mask-color | \nlinear-gradient | \n- | \n
--van-picker-loading-icon-color | \nvar(--van-primary-color) | \n- | \n
--van-picker-loading-mask-color | \nrgba(255, 255, 255, 0.9) | \n- | \n
The picker component is usually used with Popup Component.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Picker } from 'vant';\n\nconst app = createApp();\napp.use(Picker);\n
\n<van-picker\n title="Title"\n :columns="columns"\n @confirm="onConfirm"\n @cancel="onCancel"\n @change="onChange"\n/>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const columns = [\n { text: 'Delaware', value: 'Delaware' },\n { text: 'Florida', value: 'Florida' },\n { text: 'Wenzhou', value: 'Wenzhou' },\n { text: 'Indiana', value: 'Indiana' },\n { text: 'Maine', value: 'Maine' },\n ];\n const onConfirm = ({ selectedValues }) => {\n showToast(`Value: ${selectedValues.join(',')}`);\n };\n const onChange = ({ selectedValues }) => {\n showToast(`Value: ${selectedValues.join(',')}`);\n };\n const onCancel = () => showToast('Cancel');\n\n return {\n columns,\n onChange,\n onCancel,\n onConfirm,\n };\n },\n};\n
\n<van-field\n v-model="fieldValue"\n is-link\n readonly\n label="City"\n placeholder="Choose City"\n @click="showPicker = true"\n/>\n<van-popup v-model:show="showPicker" round position="bottom">\n <van-picker\n title="Title"\n :columns="columns"\n @cancel="showPicker = false"\n @confirm="onConfirm"\n />\n</van-popup>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const columns = [\n { text: 'Delaware', value: 'Delaware' },\n { text: 'Florida', value: 'Florida' },\n { text: 'Wenzhou', value: 'Wenzhou' },\n { text: 'Indiana', value: 'Indiana' },\n { text: 'Maine', value: 'Maine' },\n ];\n const fieldValue = ref('');\n const showPicker = ref(false);\n\n const onConfirm = ({ selectedOptions }) => {\n showPicker.value = false;\n fieldValue.value = selectedOptions[0].text;\n };\n\n return {\n columns,\n onConfirm,\n fieldValue,\n showPicker,\n };\n },\n};\n
\nUsing v-model
to bind selected values.
<van-picker v-model="selectedValues" title="Title" :columns="columns" />\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const columns = [\n { text: 'Delaware', value: 'Delaware' },\n { text: 'Florida', value: 'Florida' },\n { text: 'Wenzhou', value: 'Wenzhou' },\n { text: 'Indiana', value: 'Indiana' },\n { text: 'Maine', value: 'Maine' },\n ];\n const selectedValues = ref(['Wenzhou']);\n\n return {\n columns,\n selectedValues,\n };\n },\n};\n
\n<van-picker title="Title" :columns="columns" />\n
\nexport default {\n setup() {\n const columns = [\n [\n { text: 'Monday', value: 'Monday' },\n { text: 'Tuesday', value: 'Tuesday' },\n { text: 'Wednesday', value: 'Wednesday' },\n { text: 'Thursday', value: 'Thursday' },\n { text: 'Friday', value: 'Friday' },\n ],\n [\n { text: 'Morning', value: 'Morning' },\n { text: 'Afternoon', value: 'Afternoon' },\n { text: 'Evening', value: 'Evening' },\n ],\n ];\n\n return { columns };\n },\n};\n
\n<van-picker title="Title" :columns="columns" />\n
\nexport default {\n setup() {\n const columns = [\n {\n text: 'Zhejiang',\n value: 'Zhejiang',\n children: [\n {\n text: 'Hangzhou',\n value: 'Hangzhou',\n children: [\n { text: 'Xihu', value: 'Xihu' },\n { text: 'Yuhang', value: 'Yuhang' },\n ],\n },\n {\n text: 'Wenzhou',\n value: 'Wenzhou',\n children: [\n { text: 'Lucheng', value: 'Lucheng' },\n { text: 'Ouhai', value: 'Ouhai' },\n ],\n },\n ],\n },\n {\n text: 'Fujian',\n value: 'Fujian',\n children: [\n {\n text: 'Fuzhou',\n value: 'Fuzhou',\n children: [\n { text: 'Gulou', value: 'Gulou' },\n { text: 'Taijiang', value: 'Taijiang' },\n ],\n },\n {\n text: 'Xiamen',\n value: 'Xiamen',\n children: [\n { text: 'Siming', value: 'Siming' },\n { text: 'Haicang', value: 'Haicang' },\n ],\n },\n ],\n },\n ];\n\n return { columns };\n },\n};\n
\n<van-picker :columns="columns" />\n
\nexport default {\n setup() {\n const columns = [\n { text: 'Delaware', value: 'Delaware', disabled: true },\n { text: 'Florida', value: 'Florida' },\n { text: 'Wenzhou', value: 'Wenzhou' },\n ];\n return { columns };\n },\n};\n
\nWhen Picker columns data is acquired asynchronously, use loading
prop to show loading prompt.
<van-picker title="Title" :columns="columns" :loading="loading" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const columns = ref([]);\n const loading = ref(true);\n\n setTimeout(() => {\n columns.value = [{ text: 'Option', value: 'option' }];\n loading.value = false;\n }, 1000);\n\n return { columns, loading };\n },\n};\n
\n<van-picker\n :title="Title"\n :columns="columns"\n :columns-field-names="customFieldName"\n/>\n
\nexport default {\n setup() {\n const columns = [\n {\n cityName: 'Zhejiang',\n cities: [\n {\n cityName: 'Hangzhou',\n cities: [{ cityName: 'Xihu' }, { cityName: 'Yuhang' }],\n },\n {\n cityName: 'Wenzhou',\n cities: [{ cityName: 'Lucheng' }, { cityName: 'Ouhai' }],\n },\n ],\n },\n {\n cityName: 'Fujian',\n cities: [\n {\n cityName: 'Fuzhou',\n cities: [{ cityName: 'Gulou' }, { cityName: 'Taijiang' }],\n },\n {\n cityName: 'Xiamen',\n cities: [{ cityName: 'Siming' }, { cityName: 'Haicang' }],\n },\n ],\n },\n ];\n\n const customFieldName = {\n text: 'cityName',\n value: 'cityName',\n children: 'cities',\n };\n\n return {\n columns,\n customFieldName,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nvalues of chosen option | \nnumber[] | string[] | \n- | \n
columns | \nColumns data | \nPickerOption[] | PickerOption[][] | \n[] | \n
columns-field-names | \ncustom columns field | \nobject | \n{ text: \'text\', value: \'value\', children: \'children\' } | \n
title | \nToolbar title | \nstring | \n- | \n
confirm-button-text | \nText of confirm button | \nstring | \nConfirm | \n
cancel-button-text | \nText of cancel button | \nstring | \nCancel | \n
toolbar-position | \nToolbar position, cat be set to bottom | \nstring | \ntop | \n
loading | \nWhether to show loading prompt | \nboolean | \nfalse | \n
readonly | \nWhether to be readonly | \nboolean | \nfalse | \n
show-toolbar | \nWhether to show toolbar | \nboolean | \ntrue | \n
allow-html | \nWhether to allow HTML in option text | \nboolean | \nfalse | \n
option-height | \nOption height, supports px vw vh rem unit, default px | \nnumber | string | \n44 | \n
visible-option-num | \nCount of visible columns | \nnumber | string | \n6 | \n
swipe-duration | \nDuration of the momentum animation, unit ms | \nnumber | string | \n1000 | \n
Event | \nDescription | \nArguments | \n
---|---|---|
confirm | \nEmitted when the confirm button is clicked | \n{ selectedValues, selectedOptions, selectedIndexes } | \n
cancel | \nEmitted when the cancel button is clicked | \n{ selectedValues, selectedOptions, selectedIndexes } | \n
change | \nEmitted when current selected option is changed | \n{ selectedValues, selectedOptions,selectedIndexes, columnIndex } | \n
click-option | \nEmitted when an option is clicked | \n{ currentOption, selectedValues, selectedOptions, selectedIndexes, columnIndex } | \n
scroll-into v4.2.1 | \nEmitted when an option is scrolled into the middle selection area by clicking or dragging | \n{ currentOption, columnIndex } | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
toolbar | \nCustom toolbar content | \n- | \n
title | \nCustom title | \n- | \n
confirm | \nCustom confirm button text | \n- | \n
cancel | \nCustom cancel button text | \n- | \n
option | \nCustom option content | \noption: PickerOption, index: number | \n
columns-top | \nCustom content above columns | \n- | \n
columns-bottom | \nCustom content below columns | \n- | \n
Key | \nDescription | \nType | \n
---|---|---|
text | \nText | \nstring | number | \n
value | \nValue of option | \nstring | number | \n
disabled | \nWhether to disable option | \nboolean | \n
children | \nCascade children options | \nPickerOption[] | \n
className | \nClassName for this option | \nstring | Array | object | \n
Use ref to get Picker instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
confirm | \nStop scrolling and emit confirm event | \n- | \n- | \n
getSelectedOptions | \nGet current selected options | \n- | \n(PickerOption | undefined)[] | \n
The component exports the following type definitions:
\nimport type {\n PickerProps,\n PickerColumn,\n PickerOption,\n PickerInstance,\n PickerFieldNames,\n PickerToolbarPosition,\n PickerCancelEventParams,\n PickerChangeEventParams,\n PickerConfirmEventParams,\n} from 'vant';\n
\nPickerInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { PickerInstance } from 'vant';\n\nconst pickerRef = ref<PickerInstance>();\n\npickerRef.value?.confirm();\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-picker-background | \nvar(--van-background-2) | \n- | \n
--van-picker-toolbar-height | \n44px | \n- | \n
--van-picker-title-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-picker-title-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-picker-action-padding | \n0 var(--van-padding-md) | \n- | \n
--van-picker-action-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-picker-confirm-action-color | \nvar(--van-primary-color) | \n- | \n
--van-picker-cancel-action-color | \nvar(--van-text-color-2) | \n- | \n
--van-picker-option-padding | \n0 var(--van-padding-base) | \n- | \n
--van-picker-option-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-picker-option-text-color | \nvar(--van-text-color) | \n- | \n
--van-picker-option-disabled-opacity | \n0.3 | \n- | \n
--van-picker-mask-color | \nlinear-gradient | \n- | \n
--van-picker-loading-icon-color | \nvar(--van-primary-color) | \n- | \n
--van-picker-loading-mask-color | \nrgba(255, 255, 255, 0.9) | \n- | \n
\u7528\u4E8E\u6807\u8BB0\u5173\u952E\u8BCD\u548C\u6982\u62EC\u4E3B\u8981\u5185\u5BB9\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Tag } from 'vant';\n\nconst app = createApp();\napp.use(Tag);\n
\n\u901A\u8FC7 type
\u5C5E\u6027\u63A7\u5236\u6807\u7B7E\u989C\u8272\u3002
<van-tag type="primary">\u6807\u7B7E</van-tag>\n<van-tag type="success">\u6807\u7B7E</van-tag>\n<van-tag type="danger">\u6807\u7B7E</van-tag>\n<van-tag type="warning">\u6807\u7B7E</van-tag>\n
\n\u8BBE\u7F6E plain
\u5C5E\u6027\u8BBE\u7F6E\u4E3A\u7A7A\u5FC3\u6837\u5F0F\u3002
<van-tag plain type="primary">\u6807\u7B7E</van-tag>\n
\n\u901A\u8FC7 round
\u8BBE\u7F6E\u4E3A\u5706\u89D2\u6837\u5F0F\u3002
<van-tag round type="primary">\u6807\u7B7E</van-tag>\n
\n\u901A\u8FC7 mark
\u8BBE\u7F6E\u4E3A\u6807\u8BB0\u6837\u5F0F(\u534A\u5706\u89D2)\u3002
<van-tag mark type="primary">\u6807\u7B7E</van-tag>\n
\n\u6DFB\u52A0 closeable
\u5C5E\u6027\u8868\u793A\u6807\u7B7E\u662F\u53EF\u5173\u95ED\u7684\uFF0C\u5173\u95ED\u6807\u7B7E\u65F6\u4F1A\u89E6\u53D1 close
\u4E8B\u4EF6\uFF0C\u5728 close
\u4E8B\u4EF6\u4E2D\u53EF\u4EE5\u6267\u884C\u9690\u85CF\u6807\u7B7E\u7684\u903B\u8F91\u3002
<van-tag :show="show" closeable size="medium" type="primary" @close="close">\n \u6807\u7B7E\n</van-tag>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(true);\n const close = () => {\n show.value = false;\n };\n\n return {\n show,\n close,\n };\n },\n};\n
\n\u901A\u8FC7 size
\u5C5E\u6027\u8C03\u6574\u6807\u7B7E\u5927\u5C0F\u3002
<van-tag type="primary">\u6807\u7B7E</van-tag>\n<van-tag type="primary" size="medium">\u6807\u7B7E</van-tag>\n<van-tag type="primary" size="large">\u6807\u7B7E</van-tag>\n
\n\u901A\u8FC7 color
\u548C text-color
\u5C5E\u6027\u8BBE\u7F6E\u6807\u7B7E\u989C\u8272\u3002
<van-tag color="#7232dd">\u6807\u7B7E</van-tag>\n<van-tag color="#ffe1e1" text-color="#ad0000">\u6807\u7B7E</van-tag>\n<van-tag color="#7232dd" plain>\u6807\u7B7E</van-tag>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
type | \n\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A primary success danger warning | \nstring | \ndefault | \n
size | \n\u5927\u5C0F, \u53EF\u9009\u503C\u4E3A large medium | \nstring | \n- | \n
color | \n\u6807\u7B7E\u989C\u8272 | \nstring | \n- | \n
show | \n\u662F\u5426\u5C55\u793A\u6807\u7B7E | \nboolean | \ntrue | \n
plain | \n\u662F\u5426\u4E3A\u7A7A\u5FC3\u6837\u5F0F | \nboolean | \nfalse | \n
round | \n\u662F\u5426\u4E3A\u5706\u89D2\u6837\u5F0F | \nboolean | \nfalse | \n
mark | \n\u662F\u5426\u4E3A\u6807\u8BB0\u6837\u5F0F | \nboolean | \nfalse | \n
text-color | \n\u6587\u672C\u989C\u8272\uFF0C\u4F18\u5148\u7EA7\u9AD8\u4E8E color \u5C5E\u6027 | \nstring | \nwhite | \n
closeable | \n\u662F\u5426\u4E3A\u53EF\u5173\u95ED\u6807\u7B7E | \nboolean | \nfalse | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u6807\u7B7E\u663E\u793A\u5185\u5BB9 | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
close | \n\u5173\u95ED\u6807\u7B7E\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { TagSize, TagType, TagProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-tag-padding | \n0 var(--van-padding-base) | \n- | \n
--van-tag-text-color | \nvar(--van-white) | \n- | \n
--van-tag-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-tag-radius | \n2px | \n- | \n
--van-tag-line-height | \n16px | \n- | \n
--van-tag-medium-padding | \n2px 6px | \n- | \n
--van-tag-large-padding | \nvar(--van-padding-base) var(--van-padding-xs) | \n- | \n
--van-tag-large-radius | \nvar(--van-radius-md) | \n- | \n
--van-tag-large-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-tag-round-radius | \nvar(--van-radius-max) | \n- | \n
--van-tag-danger-color | \nvar(--van-danger-color) | \n- | \n
--van-tag-primary-color | \nvar(--van-primary-color) | \n- | \n
--van-tag-success-color | \nvar(--van-success-color) | \n- | \n
--van-tag-warning-color | \nvar(--van-warning-color) | \n- | \n
--van-tag-default-color | \nvar(--van-gray-6) | \n- | \n
--van-tag-plain-background | \nvar(--van-background-2) | \n- | \n
\u7528\u4E8E\u6807\u8BB0\u5173\u952E\u8BCD\u548C\u6982\u62EC\u4E3B\u8981\u5185\u5BB9\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Tag } from 'vant';\n\nconst app = createApp();\napp.use(Tag);\n
\n\u901A\u8FC7 type
\u5C5E\u6027\u63A7\u5236\u6807\u7B7E\u989C\u8272\u3002
<van-tag type="primary">\u6807\u7B7E</van-tag>\n<van-tag type="success">\u6807\u7B7E</van-tag>\n<van-tag type="danger">\u6807\u7B7E</van-tag>\n<van-tag type="warning">\u6807\u7B7E</van-tag>\n
\n\u8BBE\u7F6E plain
\u5C5E\u6027\u8BBE\u7F6E\u4E3A\u7A7A\u5FC3\u6837\u5F0F\u3002
<van-tag plain type="primary">\u6807\u7B7E</van-tag>\n
\n\u901A\u8FC7 round
\u8BBE\u7F6E\u4E3A\u5706\u89D2\u6837\u5F0F\u3002
<van-tag round type="primary">\u6807\u7B7E</van-tag>\n
\n\u901A\u8FC7 mark
\u8BBE\u7F6E\u4E3A\u6807\u8BB0\u6837\u5F0F(\u534A\u5706\u89D2)\u3002
<van-tag mark type="primary">\u6807\u7B7E</van-tag>\n
\n\u6DFB\u52A0 closeable
\u5C5E\u6027\u8868\u793A\u6807\u7B7E\u662F\u53EF\u5173\u95ED\u7684\uFF0C\u5173\u95ED\u6807\u7B7E\u65F6\u4F1A\u89E6\u53D1 close
\u4E8B\u4EF6\uFF0C\u5728 close
\u4E8B\u4EF6\u4E2D\u53EF\u4EE5\u6267\u884C\u9690\u85CF\u6807\u7B7E\u7684\u903B\u8F91\u3002
<van-tag :show="show" closeable size="medium" type="primary" @close="close">\n \u6807\u7B7E\n</van-tag>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(true);\n const close = () => {\n show.value = false;\n };\n\n return {\n show,\n close,\n };\n },\n};\n
\n\u901A\u8FC7 size
\u5C5E\u6027\u8C03\u6574\u6807\u7B7E\u5927\u5C0F\u3002
<van-tag type="primary">\u6807\u7B7E</van-tag>\n<van-tag type="primary" size="medium">\u6807\u7B7E</van-tag>\n<van-tag type="primary" size="large">\u6807\u7B7E</van-tag>\n
\n\u901A\u8FC7 color
\u548C text-color
\u5C5E\u6027\u8BBE\u7F6E\u6807\u7B7E\u989C\u8272\u3002
<van-tag color="#7232dd">\u6807\u7B7E</van-tag>\n<van-tag color="#ffe1e1" text-color="#ad0000">\u6807\u7B7E</van-tag>\n<van-tag color="#7232dd" plain>\u6807\u7B7E</van-tag>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
type | \n\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A primary success danger warning | \nstring | \ndefault | \n
size | \n\u5927\u5C0F, \u53EF\u9009\u503C\u4E3A large medium | \nstring | \n- | \n
color | \n\u6807\u7B7E\u989C\u8272 | \nstring | \n- | \n
show | \n\u662F\u5426\u5C55\u793A\u6807\u7B7E | \nboolean | \ntrue | \n
plain | \n\u662F\u5426\u4E3A\u7A7A\u5FC3\u6837\u5F0F | \nboolean | \nfalse | \n
round | \n\u662F\u5426\u4E3A\u5706\u89D2\u6837\u5F0F | \nboolean | \nfalse | \n
mark | \n\u662F\u5426\u4E3A\u6807\u8BB0\u6837\u5F0F | \nboolean | \nfalse | \n
text-color | \n\u6587\u672C\u989C\u8272\uFF0C\u4F18\u5148\u7EA7\u9AD8\u4E8E color \u5C5E\u6027 | \nstring | \nwhite | \n
closeable | \n\u662F\u5426\u4E3A\u53EF\u5173\u95ED\u6807\u7B7E | \nboolean | \nfalse | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u6807\u7B7E\u663E\u793A\u5185\u5BB9 | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
close | \n\u5173\u95ED\u6807\u7B7E\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { TagSize, TagType, TagProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-tag-padding | \n0 var(--van-padding-base) | \n- | \n
--van-tag-text-color | \nvar(--van-white) | \n- | \n
--van-tag-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-tag-radius | \n2px | \n- | \n
--van-tag-line-height | \n16px | \n- | \n
--van-tag-medium-padding | \n2px 6px | \n- | \n
--van-tag-large-padding | \nvar(--van-padding-base) var(--van-padding-xs) | \n- | \n
--van-tag-large-radius | \nvar(--van-radius-md) | \n- | \n
--van-tag-large-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-tag-round-radius | \nvar(--van-radius-max) | \n- | \n
--van-tag-danger-color | \nvar(--van-danger-color) | \n- | \n
--van-tag-primary-color | \nvar(--van-primary-color) | \n- | \n
--van-tag-success-color | \nvar(--van-success-color) | \n- | \n
--van-tag-warning-color | \nvar(--van-warning-color) | \n- | \n
--van-tag-default-color | \nvar(--van-gray-6) | \n- | \n
--van-tag-plain-background | \nvar(--van-background-2) | \n- | \n
Used to display product pictures, prices and other information.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Card } from 'vant';\n\nconst app = createApp();\napp.use(Card);\n
\n<van-card\n num="2"\n price="2.00"\n title="Title"\n desc="Description"\n thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"\n/>\n
\n<van-card\n num="2"\n tag="Tag"\n price="2.00"\n title="Title"\n desc="Description"\n origin-price="10.00"\n thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"\n/>\n
\nUse slot to custom content.
\n<van-card\n num="2"\n title="Title"\n desc="Description"\n price="2.00"\n thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"\n>\n <template #tags>\n <van-tag plain type="primary">Tag</van-tag>\n <van-tag plain type="primary">Tag</van-tag>\n </template>\n <template #footer>\n <van-button size="mini">Button</van-button>\n <van-button size="mini">Button</van-button>\n </template>\n</van-card>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
thumb | \nLeft thumb image URL | \nstring | \n- | \n
title | \nTitle | \nstring | \n- | \n
desc | \nDescription | \nstring | \n- | \n
tag | \nTag | \nstring | \n- | \n
num | \nnumber | \nnumber | string | \n- | \n
price | \nPrice | \nnumber | string | \n- | \n
origin-price | \nOrigin price | \nnumber | string | \n- | \n
centered | \nWhether content vertical centered | \nboolean | \nfalse | \n
currency | \nCurrency symbol | \nstring | \n\xa5 | \n
thumb-link | \nThumb link URL | \nstring | \n- | \n
lazy-load | \nWhether to enable thumb lazy load, should register Lazyload component | \nboolean | \nfalse | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when component is clicked | \nevent: MouseEvent | \n
click-thumb | \nEmitted when thumb is clicked | \nevent: MouseEvent | \n
Name | \nDescription | \n
---|---|
title | \nCustom title | \n
desc | \nCustom description | \n
num | \nCustom num | \n
price | \nCustom price | \n
origin-price | \nCustom origin price | \n
price-top | \nCustom price top | \n
bottom | \nCustom price bottom | \n
thumb | \nCustom thumb | \n
tag | \nCustom thumb tag | \n
tags | \nCustom tags | \n
footer | \nCustom footer | \n
The component exports the following type definitions:
\nimport type { CardProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-card-padding | \nvar(--van-padding-xs) var(--van-padding-md) | \n- | \n
--van-card-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-card-text-color | \nvar(--van-text-color) | \n- | \n
--van-card-background | \nvar(--van-background) | \n- | \n
--van-card-thumb-size | \n88px | \n- | \n
--van-card-thumb-radius | \nvar(--van-radius-lg) | \n- | \n
--van-card-title-line-height | \n16px | \n- | \n
--van-card-desc-color | \nvar(--van-text-color-2) | \n- | \n
--van-card-desc-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-card-price-color | \nvar(--van-text-color) | \n- | \n
--van-card-origin-price-color | \nvar(--van-text-color-2) | \n- | \n
--van-card-num-color | \nvar(--van-text-color-2) | \n- | \n
--van-card-origin-price-font-size | \nvar(--van-font-size-xs) | \n- | \n
--van-card-price-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-card-price-integer-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-card-price-font | \nvar(--van-price-font) | \n- | \n
Used to display product pictures, prices and other information.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Card } from 'vant';\n\nconst app = createApp();\napp.use(Card);\n
\n<van-card\n num="2"\n price="2.00"\n title="Title"\n desc="Description"\n thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"\n/>\n
\n<van-card\n num="2"\n tag="Tag"\n price="2.00"\n title="Title"\n desc="Description"\n origin-price="10.00"\n thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"\n/>\n
\nUse slot to custom content.
\n<van-card\n num="2"\n title="Title"\n desc="Description"\n price="2.00"\n thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"\n>\n <template #tags>\n <van-tag plain type="primary">Tag</van-tag>\n <van-tag plain type="primary">Tag</van-tag>\n </template>\n <template #footer>\n <van-button size="mini">Button</van-button>\n <van-button size="mini">Button</van-button>\n </template>\n</van-card>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
thumb | \nLeft thumb image URL | \nstring | \n- | \n
title | \nTitle | \nstring | \n- | \n
desc | \nDescription | \nstring | \n- | \n
tag | \nTag | \nstring | \n- | \n
num | \nnumber | \nnumber | string | \n- | \n
price | \nPrice | \nnumber | string | \n- | \n
origin-price | \nOrigin price | \nnumber | string | \n- | \n
centered | \nWhether content vertical centered | \nboolean | \nfalse | \n
currency | \nCurrency symbol | \nstring | \n\xa5 | \n
thumb-link | \nThumb link URL | \nstring | \n- | \n
lazy-load | \nWhether to enable thumb lazy load, should register Lazyload component | \nboolean | \nfalse | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when component is clicked | \nevent: MouseEvent | \n
click-thumb | \nEmitted when thumb is clicked | \nevent: MouseEvent | \n
Name | \nDescription | \n
---|---|
title | \nCustom title | \n
desc | \nCustom description | \n
num | \nCustom num | \n
price | \nCustom price | \n
origin-price | \nCustom origin price | \n
price-top | \nCustom price top | \n
bottom | \nCustom price bottom | \n
thumb | \nCustom thumb | \n
tag | \nCustom thumb tag | \n
tags | \nCustom tags | \n
footer | \nCustom footer | \n
The component exports the following type definitions:
\nimport type { CardProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-card-padding | \nvar(--van-padding-xs) var(--van-padding-md) | \n- | \n
--van-card-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-card-text-color | \nvar(--van-text-color) | \n- | \n
--van-card-background | \nvar(--van-background) | \n- | \n
--van-card-thumb-size | \n88px | \n- | \n
--van-card-thumb-radius | \nvar(--van-radius-lg) | \n- | \n
--van-card-title-line-height | \n16px | \n- | \n
--van-card-desc-color | \nvar(--van-text-color-2) | \n- | \n
--van-card-desc-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-card-price-color | \nvar(--van-text-color) | \n- | \n
--van-card-origin-price-color | \nvar(--van-text-color-2) | \n- | \n
--van-card-num-color | \nvar(--van-text-color-2) | \n- | \n
--van-card-origin-price-font-size | \nvar(--van-font-size-xs) | \n- | \n
--van-card-price-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-card-price-integer-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-card-price-font | \nvar(--van-price-font) | \n- | \n
\u7EA7\u8054\u9009\u62E9\u6846\uFF0C\u7528\u4E8E\u591A\u5C42\u7EA7\u6570\u636E\u7684\u9009\u62E9\uFF0C\u5178\u578B\u573A\u666F\u4E3A\u7701\u5E02\u533A\u9009\u62E9\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Cascader } from 'vant';\n\nconst app = createApp();\napp.use(Cascader);\n
\n\u7EA7\u8054\u9009\u62E9\u7EC4\u4EF6\u53EF\u4EE5\u642D\u914D Field \u548C Popup \u7EC4\u4EF6\u4F7F\u7528\uFF0C\u793A\u4F8B\u5982\u4E0B\uFF1A
\n<van-field\n v-model="fieldValue"\n is-link\n readonly\n label="\u5730\u533A"\n placeholder="\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A"\n @click="show = true"\n/>\n<van-popup v-model:show="show" round position="bottom">\n <van-cascader\n v-model="cascaderValue"\n title="\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A"\n :options="options"\n @close="show = false"\n @finish="onFinish"\n />\n</van-popup>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n const fieldValue = ref('');\n const cascaderValue = ref('');\n // \u9009\u9879\u5217\u8868\uFF0Cchildren \u4EE3\u8868\u5B50\u9009\u9879\uFF0C\u652F\u6301\u591A\u7EA7\u5D4C\u5957\n const options = [\n {\n text: '\u6D59\u6C5F\u7701',\n value: '330000',\n children: [{ text: '\u676D\u5DDE\u5E02', value: '330100' }],\n },\n {\n text: '\u6C5F\u82CF\u7701',\n value: '320000',\n children: [{ text: '\u5357\u4EAC\u5E02', value: '320100' }],\n },\n ];\n // \u5168\u90E8\u9009\u9879\u9009\u62E9\u5B8C\u6BD5\u540E\uFF0C\u4F1A\u89E6\u53D1 finish \u4E8B\u4EF6\n const onFinish = ({ selectedOptions }) => {\n show.value = false;\n fieldValue.value = selectedOptions.map((option) => option.text).join('/');\n };\n\n return {\n show,\n options,\n onFinish,\n fieldValue,\n cascaderValue,\n };\n },\n};\n
\nCascader \u7EC4\u4EF6\u5E38\u7528\u4E8E\u9009\u62E9\u7701\u5E02\u533A\uFF0CVant \u63D0\u4F9B\u4E86\u4E00\u4EFD\u4E2D\u56FD\u7701\u5E02\u533A\u6570\u636E\uFF0C\u4F60\u53EF\u4EE5\u5B89\u88C5 @vant/area-data npm \u5305\u6765\u5F15\u5165\uFF1A
\n# \u901A\u8FC7 npm\nnpm i @vant/area-data\n\n# \u901A\u8FC7 yarn\nyarn add @vant/area-data\n\n# \u901A\u8FC7 pnpm\npnpm add @vant/area-data\n\n# \u901A\u8FC7 Bun\nbun add @vant/area-data\n
\n<van-field\n v-model="fieldValue"\n is-link\n readonly\n label="\u5730\u533A"\n placeholder="\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A"\n @click="show = true"\n/>\n<van-popup v-model:show="show" round position="bottom">\n <van-cascader\n v-model="cascaderValue"\n title="\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A"\n :options="options"\n @close="show = false"\n @finish="onFinish"\n />\n</van-popup>\n
\nimport { ref } from 'vue';\nimport { useCascaderAreaData } from '@vant/area-data';\n\nexport default {\n setup() {\n const show = ref(false);\n const fieldValue = ref('');\n const cascaderValue = ref('');\n const options = useCascaderAreaData();\n const onFinish = ({ selectedOptions }) => {\n show.value = false;\n fieldValue.value = selectedOptions.map((option) => option.text).join('/');\n };\n return {\n show,\n options,\n onFinish,\n fieldValue,\n cascaderValue,\n };\n },\n};\n
\n\n\nTips: \u4E2D\u56FD\u7684\u884C\u653F\u533A\u5212\u6BCF\u5E74\u90FD\u4F1A\u6709\u53D8\u52A8\uFF0C\u5982\u679C\u53D1\u73B0\u7701\u5E02\u533A\u6570\u636E\u672A\u53CA\u65F6\u66F4\u65B0\uFF0C\u6B22\u8FCE\u63D0 Pull Request \u5E2E\u52A9\u6211\u4EEC\u66F4\u65B0\u3002\u4F60\u53EF\u4EE5\u5728\u300C\u56FD\u5BB6\u7EDF\u8BA1\u5C40 - \u5168\u56FD\u533A\u5212\u4EE3\u7801\u300D \u548C\u300C\u6C11\u653F\u90E8 - \u884C\u653F\u533A\u5212\u4EE3\u7801\u300D\u4E0A\u67E5\u8BE2\u5230\u6700\u65B0\u6570\u636E\uFF0C\u8BF7\u6839\u636E\u5B98\u65B9\u6570\u636E\u8FDB\u884C\u6838\u5B9E\u3002
\n
\u901A\u8FC7 active-color
\u5C5E\u6027\u6765\u8BBE\u7F6E\u9009\u4E2D\u72B6\u6001\u7684\u9AD8\u4EAE\u989C\u8272\u3002
<van-cascader\n v-model="cascaderValue"\n title="\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A"\n :options="options"\n active-color="#ee0a24"\n @close="show = false"\n @finish="onFinish"\n/>\n
\n\u53EF\u4EE5\u76D1\u542C change
\u4E8B\u4EF6\u5E76\u52A8\u6001\u8BBE\u7F6E options
\uFF0C\u5B9E\u73B0\u5F02\u6B65\u52A0\u8F7D\u9009\u9879\u3002
<van-field\n v-model="fieldValue"\n is-link\n readonly\n label="\u5730\u533A"\n placeholder="\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A"\n @click="show = true"\n/>\n<van-popup v-model:show="show" round position="bottom">\n <van-cascader\n v-model="cascaderValue"\n title="\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A"\n :options="options"\n @close="show = false"\n @change="onChange"\n @finish="onFinish"\n />\n</van-popup>\n
\nimport { ref } from 'vue';\nimport { closeToast, showLoadingToast } from 'vant';\n\nexport default {\n setup() {\n const show = ref(false);\n const fieldValue = ref('');\n const cascaderValue = ref('');\n const options = ref([\n {\n text: '\u6D59\u6C5F\u7701',\n value: '330000',\n children: [],\n },\n ]);\n const onChange = ({ value }) => {\n if (\n value === options.value[0].value &&\n options.value[0].children.length === 0\n ) {\n // \u6A21\u62DF\u6570\u636E\u8BF7\u6C42\n showLoadingToast('\u52A0\u8F7D\u4E2D...');\n setTimeout(() => {\n options.value[0].children = [\n { text: '\u676D\u5DDE\u5E02', value: '330100' },\n { text: '\u5B81\u6CE2\u5E02', value: '330200' },\n ];\n closeToast();\n }, 1000);\n }\n };\n const onFinish = ({ selectedOptions }) => {\n show.value = false;\n fieldValue.value = selectedOptions.map((option) => option.text).join('/');\n };\n\n return {\n show,\n options,\n onFinish,\n fieldValue,\n cascaderValue,\n };\n },\n};\n
\n\u901A\u8FC7 field-names
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49 options
\u91CC\u7684\u5B57\u6BB5\u540D\u79F0\u3002
<van-cascader\n v-model="code"\n title="\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A"\n :options="options"\n :field-names="fieldNames"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const code = ref('');\n const fieldNames = {\n text: 'name',\n value: 'code',\n children: 'items',\n };\n const options = [\n {\n name: '\u6D59\u6C5F\u7701',\n code: '330000',\n items: [{ name: '\u676D\u5DDE\u5E02', code: '330100' }],\n },\n {\n name: '\u6C5F\u82CF\u7701',\n code: '320000',\n items: [{ name: '\u5357\u4EAC\u5E02', code: '320100' }],\n },\n ];\n\n return {\n code,\n options,\n fieldNames,\n };\n },\n};\n
\n<van-cascader v-model="code" title="\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A" :options="options">\n <template #options-top="{ tabIndex }">\n <div class="current-level">\u5F53\u524D\u4E3A\u7B2C {{ tabIndex + 1 }} \u7EA7</div>\n </template>\n</van-cascader>\n\n<style>\n .current-level {\n font-size: 14px;\n padding: 16px 16px 0;\n color: var(--van-gray-6);\n }\n</style>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const code = ref('');\n const options = [\n {\n name: '\u6D59\u6C5F\u7701',\n code: '330000',\n items: [{ name: '\u676D\u5DDE\u5E02', code: '330100' }],\n },\n {\n name: '\u6C5F\u82CF\u7701',\n code: '320000',\n items: [{ name: '\u5357\u4EAC\u5E02', code: '320100' }],\n },\n ];\n\n return {\n code,\n options,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u9009\u4E2D\u9879\u7684\u503C | \nstring | number | \n- | \n
title | \n\u9876\u90E8\u6807\u9898 | \nstring | \n- | \n
options | \n\u53EF\u9009\u9879\u6570\u636E\u6E90 | \nCascaderOption[] | \n[] | \n
placeholder | \n\u672A\u9009\u4E2D\u65F6\u7684\u63D0\u793A\u6587\u6848 | \nstring | \n\u8BF7\u9009\u62E9 | \n
active-color | \n\u9009\u4E2D\u72B6\u6001\u7684\u9AD8\u4EAE\u989C\u8272 | \nstring | \n#1989fa | \n
swipeable | \n\u662F\u5426\u5F00\u542F\u624B\u52BF\u5DE6\u53F3\u6ED1\u52A8\u5207\u6362 | \nboolean | \ntrue | \n
closeable | \n\u662F\u5426\u663E\u793A\u5173\u95ED\u56FE\u6807 | \nboolean | \ntrue | \n
show-header | \n\u662F\u5426\u5C55\u793A\u6807\u9898\u680F | \nboolean | \ntrue | \n
close-icon | \n\u5173\u95ED\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \ncross | \n
field-names | \n\u81EA\u5B9A\u4E49 options \u7ED3\u6784\u4E2D\u7684\u5B57\u6BB5 | \nCascaderFieldNames | \n{ text: \'text\', value: \'value\', children: \'children\' } | \n
options
\u5C5E\u6027\u662F\u4E00\u4E2A\u7531\u5BF9\u8C61\u6784\u6210\u7684\u6570\u7EC4\uFF0C\u6570\u7EC4\u4E2D\u7684\u6BCF\u4E2A\u5BF9\u8C61\u914D\u7F6E\u4E00\u4E2A\u53EF\u9009\u9879\uFF0C\u5BF9\u8C61\u53EF\u4EE5\u5305\u542B\u4EE5\u4E0B\u503C\uFF1A
\u952E\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
text | \n\u9009\u9879\u6587\u5B57\uFF08\u5FC5\u586B\uFF09 | \nstring | \n
value | \n\u9009\u9879\u5BF9\u5E94\u7684\u503C\uFF08\u5FC5\u586B\uFF09 | \nstring | number | \n
color | \n\u9009\u9879\u6587\u5B57\u989C\u8272 | \nstring | \n
children | \n\u5B50\u9009\u9879\u5217\u8868 | \nCascaderOption[] | \n
disabled | \n\u662F\u5426\u7981\u7528\u9009\u9879 | \nboolean | \n
className | \n\u4E3A\u5BF9\u5E94\u5217\u6DFB\u52A0\u989D\u5916\u7684 class | \nstring | Array | object | \n
\u4E8B\u4EF6 | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u9009\u4E2D\u9879\u53D8\u5316\u65F6\u89E6\u53D1 | \n{ value: string | number, selectedOptions: CascaderOption[], tabIndex: number } | \n
finish | \n\u5168\u90E8\u9009\u9879\u9009\u62E9\u5B8C\u6210\u540E\u89E6\u53D1 | \n{ value: string | number, selectedOptions: CascaderOption[], tabIndex: number } | \n
close | \n\u70B9\u51FB\u5173\u95ED\u56FE\u6807\u65F6\u89E6\u53D1 | \n- | \n
click-tab | \n\u70B9\u51FB\u6807\u7B7E\u65F6\u89E6\u53D1 | \ntabIndex: number, title: string | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
title | \n\u81EA\u5B9A\u4E49\u9876\u90E8\u6807\u9898 | \n- | \n
option | \n\u81EA\u5B9A\u4E49\u9009\u9879\u6587\u5B57 | \n{ option: CascaderOption, selected: boolean } | \n
options-top | \n\u81EA\u5B9A\u4E49\u9009\u9879\u4E0A\u65B9\u7684\u5185\u5BB9 | \n{ tabIndex: number } | \n
options-bottom | \n\u81EA\u5B9A\u4E49\u9009\u9879\u4E0B\u65B9\u7684\u5185\u5BB9 | \n{ tabIndex: number } | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { CascaderProps, CascaderOption, CascaderFieldNames } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-cascader-header-height | \n48px | \n- | \n
--van-cascader-header-padding | \n0 var(--van-padding-md) | \n- | \n
--van-cascader-title-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-cascader-title-line-height | \n20px | \n- | \n
--van-cascader-close-icon-size | \n22px | \n- | \n
--van-cascader-close-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-cascader-selected-icon-size | \n18px | \n- | \n
--van-cascader-tabs-height | \n48px | \n- | \n
--van-cascader-active-color | \nvar(--van-danger-color) | \n- | \n
--van-cascader-options-height | \n384px | \n- | \n
--van-cascader-option-disabled-color | \nvar(--van-text-color-3) | \n- | \n
--van-cascader-tab-color | \nvar(--van-text-color) | \n- | \n
--van-cascader-unselected-tab-color | \nvar(--van-text-color-2) | \n- | \n
\u7EA7\u8054\u9009\u62E9\u6846\uFF0C\u7528\u4E8E\u591A\u5C42\u7EA7\u6570\u636E\u7684\u9009\u62E9\uFF0C\u5178\u578B\u573A\u666F\u4E3A\u7701\u5E02\u533A\u9009\u62E9\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Cascader } from 'vant';\n\nconst app = createApp();\napp.use(Cascader);\n
\n\u7EA7\u8054\u9009\u62E9\u7EC4\u4EF6\u53EF\u4EE5\u642D\u914D Field \u548C Popup \u7EC4\u4EF6\u4F7F\u7528\uFF0C\u793A\u4F8B\u5982\u4E0B\uFF1A
\n<van-field\n v-model="fieldValue"\n is-link\n readonly\n label="\u5730\u533A"\n placeholder="\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A"\n @click="show = true"\n/>\n<van-popup v-model:show="show" round position="bottom">\n <van-cascader\n v-model="cascaderValue"\n title="\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A"\n :options="options"\n @close="show = false"\n @finish="onFinish"\n />\n</van-popup>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n const fieldValue = ref('');\n const cascaderValue = ref('');\n // \u9009\u9879\u5217\u8868\uFF0Cchildren \u4EE3\u8868\u5B50\u9009\u9879\uFF0C\u652F\u6301\u591A\u7EA7\u5D4C\u5957\n const options = [\n {\n text: '\u6D59\u6C5F\u7701',\n value: '330000',\n children: [{ text: '\u676D\u5DDE\u5E02', value: '330100' }],\n },\n {\n text: '\u6C5F\u82CF\u7701',\n value: '320000',\n children: [{ text: '\u5357\u4EAC\u5E02', value: '320100' }],\n },\n ];\n // \u5168\u90E8\u9009\u9879\u9009\u62E9\u5B8C\u6BD5\u540E\uFF0C\u4F1A\u89E6\u53D1 finish \u4E8B\u4EF6\n const onFinish = ({ selectedOptions }) => {\n show.value = false;\n fieldValue.value = selectedOptions.map((option) => option.text).join('/');\n };\n\n return {\n show,\n options,\n onFinish,\n fieldValue,\n cascaderValue,\n };\n },\n};\n
\nCascader \u7EC4\u4EF6\u5E38\u7528\u4E8E\u9009\u62E9\u7701\u5E02\u533A\uFF0CVant \u63D0\u4F9B\u4E86\u4E00\u4EFD\u4E2D\u56FD\u7701\u5E02\u533A\u6570\u636E\uFF0C\u4F60\u53EF\u4EE5\u5B89\u88C5 @vant/area-data npm \u5305\u6765\u5F15\u5165\uFF1A
\n# \u901A\u8FC7 npm\nnpm i @vant/area-data\n\n# \u901A\u8FC7 yarn\nyarn add @vant/area-data\n\n# \u901A\u8FC7 pnpm\npnpm add @vant/area-data\n\n# \u901A\u8FC7 Bun\nbun add @vant/area-data\n
\n<van-field\n v-model="fieldValue"\n is-link\n readonly\n label="\u5730\u533A"\n placeholder="\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A"\n @click="show = true"\n/>\n<van-popup v-model:show="show" round position="bottom">\n <van-cascader\n v-model="cascaderValue"\n title="\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A"\n :options="options"\n @close="show = false"\n @finish="onFinish"\n />\n</van-popup>\n
\nimport { ref } from 'vue';\nimport { useCascaderAreaData } from '@vant/area-data';\n\nexport default {\n setup() {\n const show = ref(false);\n const fieldValue = ref('');\n const cascaderValue = ref('');\n const options = useCascaderAreaData();\n const onFinish = ({ selectedOptions }) => {\n show.value = false;\n fieldValue.value = selectedOptions.map((option) => option.text).join('/');\n };\n return {\n show,\n options,\n onFinish,\n fieldValue,\n cascaderValue,\n };\n },\n};\n
\n\n\nTips: \u4E2D\u56FD\u7684\u884C\u653F\u533A\u5212\u6BCF\u5E74\u90FD\u4F1A\u6709\u53D8\u52A8\uFF0C\u5982\u679C\u53D1\u73B0\u7701\u5E02\u533A\u6570\u636E\u672A\u53CA\u65F6\u66F4\u65B0\uFF0C\u6B22\u8FCE\u63D0 Pull Request \u5E2E\u52A9\u6211\u4EEC\u66F4\u65B0\u3002\u4F60\u53EF\u4EE5\u5728\u300C\u56FD\u5BB6\u7EDF\u8BA1\u5C40 - \u5168\u56FD\u533A\u5212\u4EE3\u7801\u300D \u548C\u300C\u6C11\u653F\u90E8 - \u884C\u653F\u533A\u5212\u4EE3\u7801\u300D\u4E0A\u67E5\u8BE2\u5230\u6700\u65B0\u6570\u636E\uFF0C\u8BF7\u6839\u636E\u5B98\u65B9\u6570\u636E\u8FDB\u884C\u6838\u5B9E\u3002
\n
\u901A\u8FC7 active-color
\u5C5E\u6027\u6765\u8BBE\u7F6E\u9009\u4E2D\u72B6\u6001\u7684\u9AD8\u4EAE\u989C\u8272\u3002
<van-cascader\n v-model="cascaderValue"\n title="\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A"\n :options="options"\n active-color="#ee0a24"\n @close="show = false"\n @finish="onFinish"\n/>\n
\n\u53EF\u4EE5\u76D1\u542C change
\u4E8B\u4EF6\u5E76\u52A8\u6001\u8BBE\u7F6E options
\uFF0C\u5B9E\u73B0\u5F02\u6B65\u52A0\u8F7D\u9009\u9879\u3002
<van-field\n v-model="fieldValue"\n is-link\n readonly\n label="\u5730\u533A"\n placeholder="\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A"\n @click="show = true"\n/>\n<van-popup v-model:show="show" round position="bottom">\n <van-cascader\n v-model="cascaderValue"\n title="\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A"\n :options="options"\n @close="show = false"\n @change="onChange"\n @finish="onFinish"\n />\n</van-popup>\n
\nimport { ref } from 'vue';\nimport { closeToast, showLoadingToast } from 'vant';\n\nexport default {\n setup() {\n const show = ref(false);\n const fieldValue = ref('');\n const cascaderValue = ref('');\n const options = ref([\n {\n text: '\u6D59\u6C5F\u7701',\n value: '330000',\n children: [],\n },\n ]);\n const onChange = ({ value }) => {\n if (\n value === options.value[0].value &&\n options.value[0].children.length === 0\n ) {\n // \u6A21\u62DF\u6570\u636E\u8BF7\u6C42\n showLoadingToast('\u52A0\u8F7D\u4E2D...');\n setTimeout(() => {\n options.value[0].children = [\n { text: '\u676D\u5DDE\u5E02', value: '330100' },\n { text: '\u5B81\u6CE2\u5E02', value: '330200' },\n ];\n closeToast();\n }, 1000);\n }\n };\n const onFinish = ({ selectedOptions }) => {\n show.value = false;\n fieldValue.value = selectedOptions.map((option) => option.text).join('/');\n };\n\n return {\n show,\n options,\n onFinish,\n fieldValue,\n cascaderValue,\n };\n },\n};\n
\n\u901A\u8FC7 field-names
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49 options
\u91CC\u7684\u5B57\u6BB5\u540D\u79F0\u3002
<van-cascader\n v-model="code"\n title="\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A"\n :options="options"\n :field-names="fieldNames"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const code = ref('');\n const fieldNames = {\n text: 'name',\n value: 'code',\n children: 'items',\n };\n const options = [\n {\n name: '\u6D59\u6C5F\u7701',\n code: '330000',\n items: [{ name: '\u676D\u5DDE\u5E02', code: '330100' }],\n },\n {\n name: '\u6C5F\u82CF\u7701',\n code: '320000',\n items: [{ name: '\u5357\u4EAC\u5E02', code: '320100' }],\n },\n ];\n\n return {\n code,\n options,\n fieldNames,\n };\n },\n};\n
\n<van-cascader v-model="code" title="\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A" :options="options">\n <template #options-top="{ tabIndex }">\n <div class="current-level">\u5F53\u524D\u4E3A\u7B2C {{ tabIndex + 1 }} \u7EA7</div>\n </template>\n</van-cascader>\n\n<style>\n .current-level {\n font-size: 14px;\n padding: 16px 16px 0;\n color: var(--van-gray-6);\n }\n</style>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const code = ref('');\n const options = [\n {\n name: '\u6D59\u6C5F\u7701',\n code: '330000',\n items: [{ name: '\u676D\u5DDE\u5E02', code: '330100' }],\n },\n {\n name: '\u6C5F\u82CF\u7701',\n code: '320000',\n items: [{ name: '\u5357\u4EAC\u5E02', code: '320100' }],\n },\n ];\n\n return {\n code,\n options,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u9009\u4E2D\u9879\u7684\u503C | \nstring | number | \n- | \n
title | \n\u9876\u90E8\u6807\u9898 | \nstring | \n- | \n
options | \n\u53EF\u9009\u9879\u6570\u636E\u6E90 | \nCascaderOption[] | \n[] | \n
placeholder | \n\u672A\u9009\u4E2D\u65F6\u7684\u63D0\u793A\u6587\u6848 | \nstring | \n\u8BF7\u9009\u62E9 | \n
active-color | \n\u9009\u4E2D\u72B6\u6001\u7684\u9AD8\u4EAE\u989C\u8272 | \nstring | \n#1989fa | \n
swipeable | \n\u662F\u5426\u5F00\u542F\u624B\u52BF\u5DE6\u53F3\u6ED1\u52A8\u5207\u6362 | \nboolean | \ntrue | \n
closeable | \n\u662F\u5426\u663E\u793A\u5173\u95ED\u56FE\u6807 | \nboolean | \ntrue | \n
show-header | \n\u662F\u5426\u5C55\u793A\u6807\u9898\u680F | \nboolean | \ntrue | \n
close-icon | \n\u5173\u95ED\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \ncross | \n
field-names | \n\u81EA\u5B9A\u4E49 options \u7ED3\u6784\u4E2D\u7684\u5B57\u6BB5 | \nCascaderFieldNames | \n{ text: \'text\', value: \'value\', children: \'children\' } | \n
options
\u5C5E\u6027\u662F\u4E00\u4E2A\u7531\u5BF9\u8C61\u6784\u6210\u7684\u6570\u7EC4\uFF0C\u6570\u7EC4\u4E2D\u7684\u6BCF\u4E2A\u5BF9\u8C61\u914D\u7F6E\u4E00\u4E2A\u53EF\u9009\u9879\uFF0C\u5BF9\u8C61\u53EF\u4EE5\u5305\u542B\u4EE5\u4E0B\u503C\uFF1A
\u952E\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
text | \n\u9009\u9879\u6587\u5B57\uFF08\u5FC5\u586B\uFF09 | \nstring | \n
value | \n\u9009\u9879\u5BF9\u5E94\u7684\u503C\uFF08\u5FC5\u586B\uFF09 | \nstring | number | \n
color | \n\u9009\u9879\u6587\u5B57\u989C\u8272 | \nstring | \n
children | \n\u5B50\u9009\u9879\u5217\u8868 | \nCascaderOption[] | \n
disabled | \n\u662F\u5426\u7981\u7528\u9009\u9879 | \nboolean | \n
className | \n\u4E3A\u5BF9\u5E94\u5217\u6DFB\u52A0\u989D\u5916\u7684 class | \nstring | Array | object | \n
\u4E8B\u4EF6 | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u9009\u4E2D\u9879\u53D8\u5316\u65F6\u89E6\u53D1 | \n{ value: string | number, selectedOptions: CascaderOption[], tabIndex: number } | \n
finish | \n\u5168\u90E8\u9009\u9879\u9009\u62E9\u5B8C\u6210\u540E\u89E6\u53D1 | \n{ value: string | number, selectedOptions: CascaderOption[], tabIndex: number } | \n
close | \n\u70B9\u51FB\u5173\u95ED\u56FE\u6807\u65F6\u89E6\u53D1 | \n- | \n
click-tab | \n\u70B9\u51FB\u6807\u7B7E\u65F6\u89E6\u53D1 | \ntabIndex: number, title: string | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
title | \n\u81EA\u5B9A\u4E49\u9876\u90E8\u6807\u9898 | \n- | \n
option | \n\u81EA\u5B9A\u4E49\u9009\u9879\u6587\u5B57 | \n{ option: CascaderOption, selected: boolean } | \n
options-top | \n\u81EA\u5B9A\u4E49\u9009\u9879\u4E0A\u65B9\u7684\u5185\u5BB9 | \n{ tabIndex: number } | \n
options-bottom | \n\u81EA\u5B9A\u4E49\u9009\u9879\u4E0B\u65B9\u7684\u5185\u5BB9 | \n{ tabIndex: number } | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { CascaderProps, CascaderOption, CascaderFieldNames } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-cascader-header-height | \n48px | \n- | \n
--van-cascader-header-padding | \n0 var(--van-padding-md) | \n- | \n
--van-cascader-title-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-cascader-title-line-height | \n20px | \n- | \n
--van-cascader-close-icon-size | \n22px | \n- | \n
--van-cascader-close-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-cascader-selected-icon-size | \n18px | \n- | \n
--van-cascader-tabs-height | \n48px | \n- | \n
--van-cascader-active-color | \nvar(--van-danger-color) | \n- | \n
--van-cascader-options-height | \n384px | \n- | \n
--van-cascader-option-disabled-color | \nvar(--van-text-color-3) | \n- | \n
--van-cascader-tab-color | \nvar(--van-text-color) | \n- | \n
--van-cascader-unselected-tab-color | \nvar(--van-text-color-2) | \n- | \n
Used to zoom in and preview the picture, and it supports two methods: function call and component call.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { ImagePreview } from 'vant';\n\nconst app = createApp();\napp.use(ImagePreview);\n
\nVant provides some utility functions that can quickly evoke global ImagePreview
components.
For example, calling the showImagePreview
function will render a Dialog directly in the page.
import { showImagePreview } from 'vant';\n\nshowImagePreview(['https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg']);\n
\nWhen calling showImagePreview
, you can directly pass an array of images to display the image preview.
import { showImagePreview } from 'vant';\n\nshowImagePreview([\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n]);\n
\nshowImagePreview
supports passing a configuration object, and you can specify the initial position (index value) of the image through the startPosition
option.
import { showImagePreview } from 'vant';\n\nshowImagePreview({\n images: [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n ],\n startPosition: 1,\n});\n
\nWhen the closeable
option is enabled, a close icon will be displayed in the top-right corner of the popup layer. You can customize the icon by using the close-icon
option, and the icon position can be customized using the close-icon-position
option.
import { showImagePreview } from 'vant';\n\nshowImagePreview({\n images: [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n ],\n closeable: true,\n});\n
\nYou can listen to the close event of the image preview through the onClose
option.
import { showToast, showImagePreview } from 'vant';\n\nshowImagePreview({\n images: [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n ],\n onClose() {\n showToast('closed');\n },\n});\n
\nYou can pass a callback function through the beforeClose
option to perform specific operations before closing the image preview.
import { showImagePreview } from 'vant';\n\nconst instance = showImagePreview({\n images: [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n ],\n beforeClose: () => false,\n});\n\nsetTimeout(() => {\n instance.close();\n}, 2000);\n
\nIf you need to embed components or other custom content inside the ImagePreview, you can directly use the ImagePreview component and customize it using the index
slot. Before using it, you need to register the component through app.use
or other methods.
<van-image-preview v-model:show="show" :images="images" @change="onChange">\n <template v-slot:index>Page: {{ index + 1 }}</template>\n</van-image-preview>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n const index = ref(0);\n const images = [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n ];\n const onChange = (newIndex) => {\n index.value = newIndex;\n };\n\n return {\n show,\n index,\n images,\n onChange,\n };\n },\n};\n
\nWhen using ImagePreview component, you can custom the image through the image
slot, such as render a video content. In this example, you can also set close-on-click-image
prop to false
, so that the preview won\'t be accidentally closed when you click on the video.
<van-image-preview\n v-model:show="show"\n :images="images"\n :close-on-click-image="false"\n>\n <template #image="{ src }">\n <video style="width: 100%;" controls>\n <source :src="src" />\n </video>\n </template>\n</van-image-preview>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n const images = [\n 'https://www.w3school.com.cn/i/movie.ogg',\n 'https://www.w3school.com.cn/i/movie.ogg',\n 'https://www.w3school.com.cn/i/movie.ogg',\n ];\n return {\n show,\n images,\n };\n },\n};\n
\nVant exports following ImagePreview utility functions:
\nMethods | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
showImagePreview | \nDisplay a full-screen image preview component | \nstring[] | ImagePreviewOptions | \nImagePreview Instance | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
images | \nImages URL list | \nstring[] | \n[] | \n
startPosition | \nStart position | \nnumber | string | \n0 | \n
showIndex | \nWhether to show index | \nboolean | \ntrue | \n
showIndicators | \nWhether to show indicators | \nboolean | \nfalse | \n
loop | \nWhether to enable loop | \nboolean | \ntrue | \n
swipeDuration | \nAnimation duration (ms) | \nnumber | string | \n300 | \n
onClose | \nEmitted when ImagePreview is closed | \nFunction | \n- | \n
onChange | \nEmitted when current image changed | \nFunction | \n- | \n
onScale | \nEmitted when scaling current image | \nFunction | \n- | \n
closeOnPopstate | \nWhether to close when popstate | \nboolean | \ntrue | \n
doubleScale v4.7.2 | \nWhether to enable double tap zoom gesture. When disabled, the image preview will be closed immediately upon clicking | \nboolean | \ntrue | \n
closeOnClickImage v4.8.3 | \nWhether to close when image is clicked | \nboolean | \ntrue | \n
closeOnClickOverlay v4.6.4 | \nWhether to close when overlay is clicked | \nboolean | \ntrue | \n
beforeClose | \nCallback function before close | \n(action) => boolean | Promise | \n- | \n
className | \nCustom className | \nstring | Array | object | \n- | \n
maxZoom | \nMax zoom | \nnumber | string | \n3 | \n
minZoom | \nMin zoom | \nnumber | string | \n1/3 | \n
closeable | \nWhether to show close icon | \nboolean | \nfalse | \n
closeIcon | \nClose icon name | \nstring | \nclear | \n
closeIconPosition | \nClose icon position, can be set to top-left bottom-left bottom-right | \nstring | \ntop-right | \n
transition | \nTransition, equivalent to name prop of transition | \nstring | \nvan-fade | \n
overlayClass | \nCustom overlay class | \nstring | Array | object | \n- | \n
overlayStyle | \nCustom overlay style | \nobject | \n- | \n
teleport | \nSpecifies a target element where ImagePreview will be mounted | \nstring | Element | \n- | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:show | \nWhether to show ImagePreview | \nboolean | \nfalse | \n
images | \nImages URL list | \nstring[] | \n[] | \n
start-position | \nStart position | \nnumber | string | \n0 | \n
swipe-duration | \nAnimation duration (ms) | \nnumber | string | \n300 | \n
show-index | \nWhether to show index | \nboolean | \ntrue | \n
show-indicators | \nWhether to show indicators | \nboolean | \nfalse | \n
loop | \nWhether to enable loop | \nboolean | \ntrue | \n
double-scale | \nWhether to enable double tap zoom gesture. When disabled, the image preview will be closed immediately upon clicking | \nboolean | \ntrue | \n
before-close | \nCallback function before close | \n(action: number) => boolean | Promise<boolean> | \n- | \n
close-on-popstate | \nWhether to close when popstate | \nboolean | \ntrue | \n
close-on-click-image v4.8.3 | \nWhether to close when image is clicked | \nboolean | \ntrue | \n
close-on-click-overlay v4.6.4 | \nWhether to close when overlay is clicked | \nboolean | \ntrue | \n
class-name | \nCustom className (apply to Popup in image preview) | \nstring | Array | object | \n- | \n
max-zoom | \nMax zoom | \nnumber | string | \n3 | \n
min-zoom | \nMin zoom | \nnumber | string | \n1/3 | \n
closeable | \nWhether to show close icon | \nboolean | \nfalse | \n
close-icon | \nClose icon name | \nstring | \nclear | \n
close-icon-position | \nClose icon position, can be set to top-left bottom-left bottom-right | \nstring | \ntop-right | \n
transition | \nTransition, equivalent to name prop of transition | \nstring | \nvan-fade | \n
overlay-class | \nCustom overlay class | \nstring | Array | object | \n- | \n
overlay-style | \nCustom overlay style | \nobject | \n- | \n
teleport | \nSpecifies a target element where ImagePreview will be mounted | \nstring | Element | \n- | \n
Event | \nDescription | \nArguments | \n
---|---|---|
close | \nEmitted when closing ImagePreview | \n{ index: number, url: string } | \n
closed | \nEmitted when ImagePreview is closed | \n- | \n
change | \nEmitted when current image changed | \nindex: number | \n
scale | \nEmitted when scaling current image | \n{ index: number, scale: number } | \n
long-press | \nEmitted when long press current image | \n{ index: number } | \n
Use ref to get ImagePreview instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
resetScale 4.7.4 | \nReset the current image\'s zoom ratio | \n- | \n- | \n
swipeTo | \nSwipe to target index | \nindex: number, options?: SwipeToOptions | \n- | \n
The component exports the following type definitions:
\nimport type {\n ImagePreviewProps,\n ImagePreviewOptions,\n ImagePreviewInstance,\n ImagePreviewScaleEventParams,\n} from 'vant';\n
\nImagePreviewInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { ImagePreviewInstance } from 'vant';\n\nconst imagePreviewRef = ref<ImagePreviewInstance>();\n\nimagePreviewRef.value?.swipeTo(1);\n
\nName | \nDescription | \nSlotProps | \n
---|---|---|
index | \nCustom index | \n{ index: index of current image } | \n
cover | \nCustom content that covers the image preview | \n- | \n
image | \nCustom image content | \n{ src: current image src } | \n
Attribute | \nDescription | \nType | \n
---|---|---|
url | \nURL of current image | \nnumber | \n
index | \nIndex of current image | \nnumber | \n
Attribute | \nDescription | \nType | \n
---|---|---|
index | \nIndex of current image | \nnumber | \n
scale | \nscale of current image | \nnumber | \n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-image-preview-index-text-color | \nvar(--van-white) | \n- | \n
--van-image-preview-index-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-image-preview-index-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-image-preview-index-text-shadow | \n0 1px 1px var(--van-gray-8) | \n- | \n
--van-image-preview-overlay-background | \nrgba(0, 0, 0, 0.9) | \n- | \n
--van-image-preview-close-icon-size | \n22px | \n- | \n
--van-image-preview-close-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-image-preview-close-icon-margin | \nvar(--van-padding-md) | \n- | \n
--van-image-preview-close-icon-z-index | \n1 | \n- | \n
Used to zoom in and preview the picture, and it supports two methods: function call and component call.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { ImagePreview } from 'vant';\n\nconst app = createApp();\napp.use(ImagePreview);\n
\nVant provides some utility functions that can quickly evoke global ImagePreview
components.
For example, calling the showImagePreview
function will render a Dialog directly in the page.
import { showImagePreview } from 'vant';\n\nshowImagePreview(['https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg']);\n
\nWhen calling showImagePreview
, you can directly pass an array of images to display the image preview.
import { showImagePreview } from 'vant';\n\nshowImagePreview([\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n]);\n
\nshowImagePreview
supports passing a configuration object, and you can specify the initial position (index value) of the image through the startPosition
option.
import { showImagePreview } from 'vant';\n\nshowImagePreview({\n images: [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n ],\n startPosition: 1,\n});\n
\nWhen the closeable
option is enabled, a close icon will be displayed in the top-right corner of the popup layer. You can customize the icon by using the close-icon
option, and the icon position can be customized using the close-icon-position
option.
import { showImagePreview } from 'vant';\n\nshowImagePreview({\n images: [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n ],\n closeable: true,\n});\n
\nYou can listen to the close event of the image preview through the onClose
option.
import { showToast, showImagePreview } from 'vant';\n\nshowImagePreview({\n images: [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n ],\n onClose() {\n showToast('closed');\n },\n});\n
\nYou can pass a callback function through the beforeClose
option to perform specific operations before closing the image preview.
import { showImagePreview } from 'vant';\n\nconst instance = showImagePreview({\n images: [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n ],\n beforeClose: () => false,\n});\n\nsetTimeout(() => {\n instance.close();\n}, 2000);\n
\nIf you need to embed components or other custom content inside the ImagePreview, you can directly use the ImagePreview component and customize it using the index
slot. Before using it, you need to register the component through app.use
or other methods.
<van-image-preview v-model:show="show" :images="images" @change="onChange">\n <template v-slot:index>Page: {{ index + 1 }}</template>\n</van-image-preview>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n const index = ref(0);\n const images = [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n ];\n const onChange = (newIndex) => {\n index.value = newIndex;\n };\n\n return {\n show,\n index,\n images,\n onChange,\n };\n },\n};\n
\nWhen using ImagePreview component, you can custom the image through the image
slot, such as render a video content.
<van-image-preview v-model:show="show" :images="images">\n <template #image="{ src }">\n <video style="width: 100%;" controls>\n <source :src="src" />\n </video>\n </template>\n</van-image-preview>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n const images = [\n 'https://www.w3school.com.cn/i/movie.ogg',\n 'https://www.w3school.com.cn/i/movie.ogg',\n 'https://www.w3school.com.cn/i/movie.ogg',\n ];\n return {\n show,\n images,\n };\n },\n};\n
\nVant exports following ImagePreview utility functions:
\nMethods | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
showImagePreview | \nDisplay a full-screen image preview component | \nstring[] | ImagePreviewOptions | \nImagePreview Instance | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
images | \nImages URL list | \nstring[] | \n[] | \n
startPosition | \nStart position | \nnumber | string | \n0 | \n
showIndex | \nWhether to show index | \nboolean | \ntrue | \n
showIndicators | \nWhether to show indicators | \nboolean | \nfalse | \n
loop | \nWhether to enable loop | \nboolean | \ntrue | \n
swipeDuration | \nAnimation duration (ms) | \nnumber | string | \n300 | \n
onClose | \nEmitted when ImagePreview is closed | \nFunction | \n- | \n
onChange | \nEmitted when current image changed | \nFunction | \n- | \n
onScale | \nEmitted when scaling current image | \nFunction | \n- | \n
closeOnPopstate | \nWhether to close when popstate | \nboolean | \ntrue | \n
doubleScale v4.7.2 | \nWhether to enable double tap zoom gesture. When disabled, the image preview will be closed immediately upon clicking | \nboolean | \ntrue | \n
closeOnClickOverlay v4.6.4 | \nWhether to close when overlay is clicked | \nboolean | \ntrue | \n
beforeClose | \nCallback function before close | \n(action) => boolean | Promise | \n- | \n
className | \nCustom className | \nstring | Array | object | \n- | \n
maxZoom | \nMax zoom | \nnumber | string | \n3 | \n
minZoom | \nMin zoom | \nnumber | string | \n1/3 | \n
closeable | \nWhether to show close icon | \nboolean | \nfalse | \n
closeIcon | \nClose icon name | \nstring | \nclear | \n
closeIconPosition | \nClose icon position, can be set to top-left bottom-left bottom-right | \nstring | \ntop-right | \n
transition | \nTransition, equivalent to name prop of transition | \nstring | \nvan-fade | \n
overlayClass | \nCustom overlay class | \nstring | Array | object | \n- | \n
overlayStyle | \nCustom overlay style | \nobject | \n- | \n
teleport | \nSpecifies a target element where ImagePreview will be mounted | \nstring | Element | \n- | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:show | \nWhether to show ImagePreview | \nboolean | \nfalse | \n
images | \nImages URL list | \nstring[] | \n[] | \n
start-position | \nStart position | \nnumber | string | \n0 | \n
swipe-duration | \nAnimation duration (ms) | \nnumber | string | \n300 | \n
show-index | \nWhether to show index | \nboolean | \ntrue | \n
show-indicators | \nWhether to show indicators | \nboolean | \nfalse | \n
loop | \nWhether to enable loop | \nboolean | \ntrue | \n
double-scale | \nWhether to enable double tap zoom gesture. When disabled, the image preview will be closed immediately upon clicking | \nboolean | \ntrue | \n
before-close | \nCallback function before close | \n(action: number) => boolean | Promise<boolean> | \n- | \n
close-on-popstate | \nWhether to close when popstate | \nboolean | \ntrue | \n
close-on-click-overlay v4.6.4 | \nWhether to close when overlay is clicked | \nboolean | \ntrue | \n
class-name | \nCustom className (apply to Popup in image preview) | \nstring | Array | object | \n- | \n
max-zoom | \nMax zoom | \nnumber | string | \n3 | \n
min-zoom | \nMin zoom | \nnumber | string | \n1/3 | \n
closeable | \nWhether to show close icon | \nboolean | \nfalse | \n
close-icon | \nClose icon name | \nstring | \nclear | \n
close-icon-position | \nClose icon position, can be set to top-left bottom-left bottom-right | \nstring | \ntop-right | \n
transition | \nTransition, equivalent to name prop of transition | \nstring | \nvan-fade | \n
overlay-class | \nCustom overlay class | \nstring | Array | object | \n- | \n
overlay-style | \nCustom overlay style | \nobject | \n- | \n
teleport | \nSpecifies a target element where ImagePreview will be mounted | \nstring | Element | \n- | \n
Event | \nDescription | \nArguments | \n
---|---|---|
close | \nEmitted when closing ImagePreview | \n{ index: number, url: string } | \n
closed | \nEmitted when ImagePreview is closed | \n- | \n
change | \nEmitted when current image changed | \nindex: number | \n
scale | \nEmitted when scaling current image | \n{ index: number, scale: number } | \n
long-press | \nEmitted when long press current image | \n{ index: number } | \n
Use ref to get ImagePreview instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
resetScale 4.7.4 | \nReset the current image\'s zoom ratio | \n- | \n- | \n
swipeTo | \nSwipe to target index | \nindex: number, options?: SwipeToOptions | \n- | \n
The component exports the following type definitions:
\nimport type {\n ImagePreviewProps,\n ImagePreviewOptions,\n ImagePreviewInstance,\n ImagePreviewScaleEventParams,\n} from 'vant';\n
\nImagePreviewInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { ImagePreviewInstance } from 'vant';\n\nconst imagePreviewRef = ref<ImagePreviewInstance>();\n\nimagePreviewRef.value?.swipeTo(1);\n
\nName | \nDescription | \nSlotProps | \n
---|---|---|
index | \nCustom index | \n{ index: index of current image } | \n
cover | \nCustom content that covers the image preview | \n- | \n
image | \nCustom image content | \n{ src: current image src } | \n
Attribute | \nDescription | \nType | \n
---|---|---|
url | \nURL of current image | \nnumber | \n
index | \nIndex of current image | \nnumber | \n
Attribute | \nDescription | \nType | \n
---|---|---|
index | \nIndex of current image | \nnumber | \n
scale | \nscale of current image | \nnumber | \n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-image-preview-index-text-color | \nvar(--van-white) | \n- | \n
--van-image-preview-index-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-image-preview-index-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-image-preview-index-text-shadow | \n0 1px 1px var(--van-gray-8) | \n- | \n
--van-image-preview-overlay-background | \nrgba(0, 0, 0, 0.9) | \n- | \n
--van-image-preview-close-icon-size | \n22px | \n- | \n
--van-image-preview-close-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-image-preview-close-icon-margin | \nvar(--van-padding-md) | \n- | \n
--van-image-preview-close-icon-z-index | \n1 | \n- | \n
\u901A\u8FC7\u672C\u7AE0\u8282\u4F60\u53EF\u4EE5\u4E86\u89E3\u5230 Vant \u7684\u4E00\u4E9B\u8FDB\u9636\u7528\u6CD5\uFF0C\u6BD4\u5982\u7EC4\u4EF6\u63D2\u69FD\u7528\u6CD5\u3001\u591A\u79CD\u6D4F\u89C8\u5668\u9002\u914D\u65B9\u5F0F\u3002
\nVant \u652F\u6301\u591A\u79CD\u7EC4\u4EF6\u6CE8\u518C\u65B9\u5F0F\uFF0C\u8BF7\u6839\u636E\u5B9E\u9645\u4E1A\u52A1\u9700\u8981\u8FDB\u884C\u9009\u62E9\u3002
\n\u5168\u5C40\u6CE8\u518C\u540E\uFF0C\u4F60\u53EF\u4EE5\u5728 app \u4E0B\u7684\u4EFB\u610F\u5B50\u7EC4\u4EF6\u4E2D\u4F7F\u7528\u6CE8\u518C\u7684 Vant \u7EC4\u4EF6\u3002
\nimport { Button } from 'vant';\nimport { createApp } from 'vue';\n\nconst app = createApp();\n\n// \u65B9\u5F0F\u4E00. \u901A\u8FC7 app.use \u6CE8\u518C\n// \u6CE8\u518C\u5B8C\u6210\u540E\uFF0C\u5728\u6A21\u677F\u4E2D\u901A\u8FC7 <van-button> \u6216 <VanButton> \u6807\u7B7E\u6765\u4F7F\u7528\u6309\u94AE\u7EC4\u4EF6\napp.use(Button);\n\n// \u65B9\u5F0F\u4E8C. \u901A\u8FC7 app.component \u6CE8\u518C\n// \u6CE8\u518C\u5B8C\u6210\u540E\uFF0C\u5728\u6A21\u677F\u4E2D\u901A\u8FC7 <van-button> \u6807\u7B7E\u6765\u4F7F\u7528\u6309\u94AE\u7EC4\u4EF6\napp.component(Button.name, Button);\n
\n\u5C40\u90E8\u6CE8\u518C\u540E\uFF0C\u4F60\u53EF\u4EE5\u5728\u5F53\u524D\u7EC4\u4EF6\u4E2D\u4F7F\u7528\u6CE8\u518C\u7684 Vant \u7EC4\u4EF6\u3002
\nimport { Button } from 'vant';\n\nexport default {\n components: {\n [Button.name]: Button,\n },\n};\n
\n\n\n\u5BF9\u4E8E\u7EC4\u4EF6\u6CE8\u518C\u66F4\u8BE6\u7EC6\u7684\u4ECB\u7ECD\uFF0C\u8BF7\u53C2\u8003 Vue \u5B98\u65B9\u6587\u6863 - \u7EC4\u4EF6\u6CE8\u518C\u3002
\n
\u5728 <script setup>
\u4E2D\u53EF\u4EE5\u76F4\u63A5\u4F7F\u7528 Vant \u7EC4\u4EF6\uFF0C\u4E0D\u9700\u8981\u8FDB\u884C\u7EC4\u4EF6\u6CE8\u518C\u3002
<script setup>\n import { Button } from 'vant';\n</script>\n\n<template>\n <Button />\n</template>\n
\n\u5728 JSX \u548C TSX \u4E2D\u53EF\u4EE5\u76F4\u63A5\u4F7F\u7528 Vant \u7EC4\u4EF6\uFF0C\u4E0D\u9700\u8981\u8FDB\u884C\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { Button } from 'vant';\n\nexport default {\n render() {\n return <Button />;\n },\n};\n
\nVant \u63D0\u4F9B\u4E86\u4E30\u5BCC\u7684\u7EC4\u4EF6\u63D2\u69FD\uFF0C\u901A\u8FC7\u63D2\u69FD\u53EF\u4EE5\u5BF9\u7EC4\u4EF6\u7684\u67D0\u4E00\u90E8\u5206\u8FDB\u884C\u4E2A\u6027\u5316\u5B9A\u5236\u3002\u5982\u679C\u4F60\u5BF9 Vue \u7684\u63D2\u69FD\u4E0D\u592A\u719F\u6089\uFF0C\u53EF\u4EE5\u9605\u8BFB Vue \u5B98\u65B9\u6587\u6863\u4E2D\u7684\u63D2\u69FD\u7AE0\u8282\u3002\u4E0B\u9762\u662F\u901A\u8FC7\u63D2\u69FD\u6765\u5B9A\u5236 Checkbox \u56FE\u6807\u7684\u793A\u4F8B\uFF1A
\n<van-checkbox v-model="checked">\n <!-- \u4F7F\u7528\u7EC4\u4EF6\u63D0\u4F9B\u7684 icon \u63D2\u69FD -->\n <!-- \u5C06\u9ED8\u8BA4\u56FE\u6807\u66FF\u6362\u4E3A\u4E2A\u6027\u5316\u56FE\u7247 -->\n <template #icon="props">\n <img :src="props.checked ? activeIcon : inactiveIcon" />\n </template>\n</van-checkbox>\n
\nexport default {\n data() {\n return {\n checked: true,\n activeIcon:\n 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',\n inactiveIcon:\n 'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',\n };\n },\n};\n
\nVant \u4E2D\u7684\u8BB8\u591A\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\u65F6\uFF0C\u6211\u4EEC\u9700\u8981\u901A\u8FC7 ref \u6765\u6CE8\u518C\u7EC4\u4EF6\u5F15\u7528\u4FE1\u606F\uFF0C\u5F15\u7528\u4FE1\u606F\u5C06\u4F1A\u6CE8\u518C\u5728\u7236\u7EC4\u4EF6\u7684$refs
\u5BF9\u8C61\u4E0A\u3002\u6CE8\u518C\u5B8C\u6210\u540E\uFF0C\u6211\u4EEC\u53EF\u4EE5\u901A\u8FC7this.$refs.xxx
\u8BBF\u95EE\u5230\u5BF9\u5E94\u7684\u7EC4\u4EF6\u5B9E\u4F8B\uFF0C\u5E76\u8C03\u7528\u4E0A\u9762\u7684\u5B9E\u4F8B\u65B9\u6CD5\u3002
<!-- \u901A\u8FC7 ref \u5C5E\u6027\u5C06\u7EC4\u4EF6\u7ED1\u5B9A\u5230 this.$refs.checkbox \u4E0A -->\n<van-checkbox v-model="checked" ref="checkbox"> \u590D\u9009\u6846 </van-checkbox>\n
\nexport default {\n data() {\n return {\n checked: false,\n };\n },\n // \u6CE8\u610F\uFF1A\u7EC4\u4EF6\u6302\u8F7D\u540E\u624D\u80FD\u8BBF\u95EE\u5230 ref \u5BF9\u8C61\n mounted() {\n this.$refs.checkbox.toggle();\n },\n};\n
\nVant \u9ED8\u8BA4\u4F7F\u7528 px
\u4F5C\u4E3A\u6837\u5F0F\u5355\u4F4D\uFF0C\u5982\u679C\u9700\u8981\u4F7F\u7528 viewport
\u5355\u4F4D (vw, vh, vmin, vmax)\uFF0C\u63A8\u8350\u4F7F\u7528 postcss-px-to-viewport \u8FDB\u884C\u8F6C\u6362\u3002
postcss-px-to-viewport \u662F\u4E00\u6B3E PostCSS \u63D2\u4EF6\uFF0C\u7528\u4E8E\u5C06 px \u5355\u4F4D\u8F6C\u5316\u4E3A vw/vh \u5355\u4F4D\u3002
\n\u4E0B\u9762\u63D0\u4F9B\u4E86\u4E00\u4EFD\u57FA\u672C\u7684 PostCSS \u793A\u4F8B\u914D\u7F6E\uFF0C\u53EF\u4EE5\u5728\u6B64\u914D\u7F6E\u7684\u57FA\u7840\u4E0A\u6839\u636E\u9879\u76EE\u9700\u6C42\u8FDB\u884C\u4FEE\u6539\u3002
\n// postcss.config.js\nmodule.exports = {\n plugins: {\n 'postcss-px-to-viewport': {\n viewportWidth: 375,\n },\n },\n};\n
\n\n\nTips: \u5728\u914D\u7F6E postcss-loader \u65F6\uFF0C\u5E94\u907F\u514D ignore node_modules \u76EE\u5F55\uFF0C\u5426\u5219\u5C06\u5BFC\u81F4 Vant \u6837\u5F0F\u65E0\u6CD5\u88AB\u7F16\u8BD1\u3002
\n
\u5982\u679C\u9700\u8981\u4F7F\u7528 rem
\u5355\u4F4D\u8FDB\u884C\u9002\u914D\uFF0C\u63A8\u8350\u4F7F\u7528\u4EE5\u4E0B\u4E24\u4E2A\u5DE5\u5177\uFF1A
\u4E0B\u9762\u63D0\u4F9B\u4E86\u4E00\u4EFD\u57FA\u672C\u7684 PostCSS \u793A\u4F8B\u914D\u7F6E\uFF0C\u53EF\u4EE5\u5728\u6B64\u914D\u7F6E\u7684\u57FA\u7840\u4E0A\u6839\u636E\u9879\u76EE\u9700\u6C42\u8FDB\u884C\u4FEE\u6539\u3002
\n// postcss.config.js\nmodule.exports = {\n plugins: {\n 'postcss-pxtorem': {\n rootValue: 37.5,\n propList: ['*'],\n },\n },\n};\n
\n\n\nTips: \u5728\u914D\u7F6E postcss-pxtorem \u65F6\uFF0C\u540C\u6837\u5E94\u907F\u514D ignore node_modules \u76EE\u5F55\uFF0C\u5426\u5219\u4F1A\u5BFC\u81F4 Vant \u6837\u5F0F\u65E0\u6CD5\u88AB\u7F16\u8BD1\u3002
\n
\u5982\u679C\u8BBE\u8BA1\u7A3F\u7684\u5C3A\u5BF8\u4E0D\u662F 375\uFF0C\u800C\u662F 750 \u6216\u5176\u4ED6\u5927\u5C0F\uFF0C\u53EF\u4EE5\u5C06 rootValue
\u914D\u7F6E\u8C03\u6574\u4E3A:
// postcss.config.js\nmodule.exports = {\n plugins: {\n // postcss-pxtorem \u63D2\u4EF6\u7684\u7248\u672C\u9700\u8981 >= 5.0.0\n 'postcss-pxtorem': {\n rootValue({ file }) {\n return file.indexOf('vant') !== -1 ? 37.5 : 75;\n },\n propList: ['*'],\n },\n },\n};\n
\nVant \u662F\u4E00\u4E2A\u9762\u5411\u79FB\u52A8\u7AEF\u7684\u7EC4\u4EF6\u5E93\uFF0C\u56E0\u6B64\u9ED8\u8BA4\u53EA\u9002\u914D\u4E86\u79FB\u52A8\u7AEF\u8BBE\u5907\uFF0C\u8FD9\u610F\u5473\u7740\u7EC4\u4EF6\u53EA\u76D1\u542C\u4E86\u79FB\u52A8\u7AEF\u7684 touch
\u4E8B\u4EF6\uFF0C\u6CA1\u6709\u76D1\u542C\u684C\u9762\u7AEF\u7684 mouse
\u4E8B\u4EF6\u3002
\u5982\u679C\u4F60\u9700\u8981\u5728\u684C\u9762\u7AEF\u4F7F\u7528 Vant\uFF0C\u53EF\u4EE5\u5F15\u5165\u6211\u4EEC\u63D0\u4F9B\u7684 @vant/touch-emulator\uFF0C\u8FD9\u4E2A\u5E93\u4F1A\u5728\u684C\u9762\u7AEF\u81EA\u52A8\u5C06 mouse
\u4E8B\u4EF6\u8F6C\u6362\u6210\u5BF9\u5E94\u7684 touch
\u4E8B\u4EF6\uFF0C\u4F7F\u5F97\u7EC4\u4EF6\u80FD\u591F\u5728\u684C\u9762\u7AEF\u4F7F\u7528\u3002
# \u5B89\u88C5\u6A21\u5757\nnpm i @vant/touch-emulator -S\n
\n// \u5F15\u5165\u6A21\u5757\u540E\u81EA\u52A8\u751F\u6548\nimport '@vant/touch-emulator';\n
\niPhone X \u7B49\u673A\u578B\u5E95\u90E8\u5B58\u5728\u5E95\u90E8\u6307\u793A\u6761\uFF0C\u6307\u793A\u6761\u7684\u64CD\u4F5C\u533A\u57DF\u4E0E\u9875\u9762\u5E95\u90E8\u5B58\u5728\u91CD\u5408\uFF0C\u5BB9\u6613\u5BFC\u81F4\u7528\u6237\u8BEF\u64CD\u4F5C\uFF0C\u56E0\u6B64\u6211\u4EEC\u9700\u8981\u9488\u5BF9\u8FD9\u4E9B\u673A\u578B\u8FDB\u884C\u5B89\u5168\u533A\u9002\u914D\u3002Vant \u4E2D\u90E8\u5206\u7EC4\u4EF6\u63D0\u4F9B\u4E86 safe-area-inset-top
\u6216 safe-area-inset-bottom
\u5C5E\u6027\uFF0C\u8BBE\u7F6E\u8BE5\u5C5E\u6027\u540E\uFF0C\u5373\u53EF\u5728\u5BF9\u5E94\u7684\u673A\u578B\u4E0A\u5F00\u542F\u9002\u914D\uFF0C\u5982\u4E0B\u793A\u4F8B\uFF1A
<!-- \u5728 head \u6807\u7B7E\u4E2D\u6DFB\u52A0 meta \u6807\u7B7E\uFF0C\u5E76\u8BBE\u7F6E viewport-fit=cover \u503C -->\n<meta\n name="viewport"\n content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"\n/>\n\n<!-- \u5F00\u542F\u9876\u90E8\u5B89\u5168\u533A\u9002\u914D -->\n<van-nav-bar safe-area-inset-top />\n\n<!-- \u5F00\u542F\u5E95\u90E8\u5B89\u5168\u533A\u9002\u914D -->\n<van-number-keyboard safe-area-inset-bottom />\n
\n\n\u901A\u8FC7\u672C\u7AE0\u8282\u4F60\u53EF\u4EE5\u4E86\u89E3\u5230 Vant \u7684\u4E00\u4E9B\u8FDB\u9636\u7528\u6CD5\uFF0C\u6BD4\u5982\u7EC4\u4EF6\u63D2\u69FD\u7528\u6CD5\u3001\u591A\u79CD\u6D4F\u89C8\u5668\u9002\u914D\u65B9\u5F0F\u3002
\nVant \u652F\u6301\u591A\u79CD\u7EC4\u4EF6\u6CE8\u518C\u65B9\u5F0F\uFF0C\u8BF7\u6839\u636E\u5B9E\u9645\u4E1A\u52A1\u9700\u8981\u8FDB\u884C\u9009\u62E9\u3002
\n\u5168\u5C40\u6CE8\u518C\u540E\uFF0C\u4F60\u53EF\u4EE5\u5728 app \u4E0B\u7684\u4EFB\u610F\u5B50\u7EC4\u4EF6\u4E2D\u4F7F\u7528\u6CE8\u518C\u7684 Vant \u7EC4\u4EF6\u3002
\nimport { Button } from 'vant';\nimport { createApp } from 'vue';\n\nconst app = createApp();\n\n// \u65B9\u5F0F\u4E00. \u901A\u8FC7 app.use \u6CE8\u518C\n// \u6CE8\u518C\u5B8C\u6210\u540E\uFF0C\u5728\u6A21\u677F\u4E2D\u901A\u8FC7 <van-button> \u6216 <VanButton> \u6807\u7B7E\u6765\u4F7F\u7528\u6309\u94AE\u7EC4\u4EF6\napp.use(Button);\n\n// \u65B9\u5F0F\u4E8C. \u901A\u8FC7 app.component \u6CE8\u518C\n// \u6CE8\u518C\u5B8C\u6210\u540E\uFF0C\u5728\u6A21\u677F\u4E2D\u901A\u8FC7 <van-button> \u6807\u7B7E\u6765\u4F7F\u7528\u6309\u94AE\u7EC4\u4EF6\napp.component(Button.name, Button);\n
\n\u5C40\u90E8\u6CE8\u518C\u540E\uFF0C\u4F60\u53EF\u4EE5\u5728\u5F53\u524D\u7EC4\u4EF6\u4E2D\u4F7F\u7528\u6CE8\u518C\u7684 Vant \u7EC4\u4EF6\u3002
\nimport { Button } from 'vant';\n\nexport default {\n components: {\n [Button.name]: Button,\n },\n};\n
\n\n\n\u5BF9\u4E8E\u7EC4\u4EF6\u6CE8\u518C\u66F4\u8BE6\u7EC6\u7684\u4ECB\u7ECD\uFF0C\u8BF7\u53C2\u8003 Vue \u5B98\u65B9\u6587\u6863 - \u7EC4\u4EF6\u6CE8\u518C\u3002
\n
\u5728 <script setup>
\u4E2D\u53EF\u4EE5\u76F4\u63A5\u4F7F\u7528 Vant \u7EC4\u4EF6\uFF0C\u4E0D\u9700\u8981\u8FDB\u884C\u7EC4\u4EF6\u6CE8\u518C\u3002
<script setup>\n import { Button } from 'vant';\n</script>\n\n<template>\n <Button />\n</template>\n
\n\u5728 JSX \u548C TSX \u4E2D\u53EF\u4EE5\u76F4\u63A5\u4F7F\u7528 Vant \u7EC4\u4EF6\uFF0C\u4E0D\u9700\u8981\u8FDB\u884C\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { Button } from 'vant';\n\nexport default {\n render() {\n return <Button />;\n },\n};\n
\nVant \u63D0\u4F9B\u4E86\u4E30\u5BCC\u7684\u7EC4\u4EF6\u63D2\u69FD\uFF0C\u901A\u8FC7\u63D2\u69FD\u53EF\u4EE5\u5BF9\u7EC4\u4EF6\u7684\u67D0\u4E00\u90E8\u5206\u8FDB\u884C\u4E2A\u6027\u5316\u5B9A\u5236\u3002\u5982\u679C\u4F60\u5BF9 Vue \u7684\u63D2\u69FD\u4E0D\u592A\u719F\u6089\uFF0C\u53EF\u4EE5\u9605\u8BFB Vue \u5B98\u65B9\u6587\u6863\u4E2D\u7684\u63D2\u69FD\u7AE0\u8282\u3002\u4E0B\u9762\u662F\u901A\u8FC7\u63D2\u69FD\u6765\u5B9A\u5236 Checkbox \u56FE\u6807\u7684\u793A\u4F8B\uFF1A
\n<van-checkbox v-model="checked">\n <!-- \u4F7F\u7528\u7EC4\u4EF6\u63D0\u4F9B\u7684 icon \u63D2\u69FD -->\n <!-- \u5C06\u9ED8\u8BA4\u56FE\u6807\u66FF\u6362\u4E3A\u4E2A\u6027\u5316\u56FE\u7247 -->\n <template #icon="props">\n <img :src="props.checked ? activeIcon : inactiveIcon" />\n </template>\n</van-checkbox>\n
\nexport default {\n data() {\n return {\n checked: true,\n activeIcon:\n 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',\n inactiveIcon:\n 'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',\n };\n },\n};\n
\nVant \u4E2D\u7684\u8BB8\u591A\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\u65F6\uFF0C\u6211\u4EEC\u9700\u8981\u901A\u8FC7 ref \u6765\u6CE8\u518C\u7EC4\u4EF6\u5F15\u7528\u4FE1\u606F\uFF0C\u5F15\u7528\u4FE1\u606F\u5C06\u4F1A\u6CE8\u518C\u5728\u7236\u7EC4\u4EF6\u7684$refs
\u5BF9\u8C61\u4E0A\u3002\u6CE8\u518C\u5B8C\u6210\u540E\uFF0C\u6211\u4EEC\u53EF\u4EE5\u901A\u8FC7this.$refs.xxx
\u8BBF\u95EE\u5230\u5BF9\u5E94\u7684\u7EC4\u4EF6\u5B9E\u4F8B\uFF0C\u5E76\u8C03\u7528\u4E0A\u9762\u7684\u5B9E\u4F8B\u65B9\u6CD5\u3002
<!-- \u901A\u8FC7 ref \u5C5E\u6027\u5C06\u7EC4\u4EF6\u7ED1\u5B9A\u5230 this.$refs.checkbox \u4E0A -->\n<van-checkbox v-model="checked" ref="checkbox"> \u590D\u9009\u6846 </van-checkbox>\n
\nexport default {\n data() {\n return {\n checked: false,\n };\n },\n // \u6CE8\u610F\uFF1A\u7EC4\u4EF6\u6302\u8F7D\u540E\u624D\u80FD\u8BBF\u95EE\u5230 ref \u5BF9\u8C61\n mounted() {\n this.$refs.checkbox.toggle();\n },\n};\n
\nVant \u9ED8\u8BA4\u4F7F\u7528 px
\u4F5C\u4E3A\u6837\u5F0F\u5355\u4F4D\uFF0C\u5982\u679C\u9700\u8981\u4F7F\u7528 viewport
\u5355\u4F4D (vw, vh, vmin, vmax)\uFF0C\u63A8\u8350\u4F7F\u7528 postcss-px-to-viewport \u8FDB\u884C\u8F6C\u6362\u3002
postcss-px-to-viewport \u662F\u4E00\u6B3E PostCSS \u63D2\u4EF6\uFF0C\u7528\u4E8E\u5C06 px \u5355\u4F4D\u8F6C\u5316\u4E3A vw/vh \u5355\u4F4D\u3002
\n\u4E0B\u9762\u63D0\u4F9B\u4E86\u4E00\u4EFD\u57FA\u672C\u7684 PostCSS \u793A\u4F8B\u914D\u7F6E\uFF0C\u53EF\u4EE5\u5728\u6B64\u914D\u7F6E\u7684\u57FA\u7840\u4E0A\u6839\u636E\u9879\u76EE\u9700\u6C42\u8FDB\u884C\u4FEE\u6539\u3002
\n// postcss.config.js\nmodule.exports = {\n plugins: {\n 'postcss-px-to-viewport': {\n viewportWidth: 375,\n },\n },\n};\n
\n\n\nTips: \u5728\u914D\u7F6E postcss-loader \u65F6\uFF0C\u5E94\u907F\u514D ignore node_modules \u76EE\u5F55\uFF0C\u5426\u5219\u5C06\u5BFC\u81F4 Vant \u6837\u5F0F\u65E0\u6CD5\u88AB\u7F16\u8BD1\u3002
\n
\u5982\u679C\u9700\u8981\u4F7F\u7528 rem
\u5355\u4F4D\u8FDB\u884C\u9002\u914D\uFF0C\u63A8\u8350\u4F7F\u7528\u4EE5\u4E0B\u4E24\u4E2A\u5DE5\u5177\uFF1A
\u4E0B\u9762\u63D0\u4F9B\u4E86\u4E00\u4EFD\u57FA\u672C\u7684 PostCSS \u793A\u4F8B\u914D\u7F6E\uFF0C\u53EF\u4EE5\u5728\u6B64\u914D\u7F6E\u7684\u57FA\u7840\u4E0A\u6839\u636E\u9879\u76EE\u9700\u6C42\u8FDB\u884C\u4FEE\u6539\u3002
\n// postcss.config.js\nmodule.exports = {\n plugins: {\n 'postcss-pxtorem': {\n rootValue: 37.5,\n propList: ['*'],\n },\n },\n};\n
\n\n\nTips: \u5728\u914D\u7F6E postcss-pxtorem \u65F6\uFF0C\u540C\u6837\u5E94\u907F\u514D ignore node_modules \u76EE\u5F55\uFF0C\u5426\u5219\u4F1A\u5BFC\u81F4 Vant \u6837\u5F0F\u65E0\u6CD5\u88AB\u7F16\u8BD1\u3002
\n
\u5982\u679C\u8BBE\u8BA1\u7A3F\u7684\u5C3A\u5BF8\u4E0D\u662F 375\uFF0C\u800C\u662F 750 \u6216\u5176\u4ED6\u5927\u5C0F\uFF0C\u53EF\u4EE5\u5C06 rootValue
\u914D\u7F6E\u8C03\u6574\u4E3A:
// postcss.config.js\nmodule.exports = {\n plugins: {\n // postcss-pxtorem \u63D2\u4EF6\u7684\u7248\u672C\u9700\u8981 >= 5.0.0\n 'postcss-pxtorem': {\n rootValue({ file }) {\n return file.indexOf('vant') !== -1 ? 37.5 : 75;\n },\n propList: ['*'],\n },\n },\n};\n
\nVant \u662F\u4E00\u4E2A\u9762\u5411\u79FB\u52A8\u7AEF\u7684\u7EC4\u4EF6\u5E93\uFF0C\u56E0\u6B64\u9ED8\u8BA4\u53EA\u9002\u914D\u4E86\u79FB\u52A8\u7AEF\u8BBE\u5907\uFF0C\u8FD9\u610F\u5473\u7740\u7EC4\u4EF6\u53EA\u76D1\u542C\u4E86\u79FB\u52A8\u7AEF\u7684 touch
\u4E8B\u4EF6\uFF0C\u6CA1\u6709\u76D1\u542C\u684C\u9762\u7AEF\u7684 mouse
\u4E8B\u4EF6\u3002
\u5982\u679C\u4F60\u9700\u8981\u5728\u684C\u9762\u7AEF\u4F7F\u7528 Vant\uFF0C\u53EF\u4EE5\u5F15\u5165\u6211\u4EEC\u63D0\u4F9B\u7684 @vant/touch-emulator\uFF0C\u8FD9\u4E2A\u5E93\u4F1A\u5728\u684C\u9762\u7AEF\u81EA\u52A8\u5C06 mouse
\u4E8B\u4EF6\u8F6C\u6362\u6210\u5BF9\u5E94\u7684 touch
\u4E8B\u4EF6\uFF0C\u4F7F\u5F97\u7EC4\u4EF6\u80FD\u591F\u5728\u684C\u9762\u7AEF\u4F7F\u7528\u3002
# \u5B89\u88C5\u6A21\u5757\nnpm i @vant/touch-emulator -S\n
\n// \u5F15\u5165\u6A21\u5757\u540E\u81EA\u52A8\u751F\u6548\nimport '@vant/touch-emulator';\n
\niPhone X \u7B49\u673A\u578B\u5E95\u90E8\u5B58\u5728\u5E95\u90E8\u6307\u793A\u6761\uFF0C\u6307\u793A\u6761\u7684\u64CD\u4F5C\u533A\u57DF\u4E0E\u9875\u9762\u5E95\u90E8\u5B58\u5728\u91CD\u5408\uFF0C\u5BB9\u6613\u5BFC\u81F4\u7528\u6237\u8BEF\u64CD\u4F5C\uFF0C\u56E0\u6B64\u6211\u4EEC\u9700\u8981\u9488\u5BF9\u8FD9\u4E9B\u673A\u578B\u8FDB\u884C\u5B89\u5168\u533A\u9002\u914D\u3002Vant \u4E2D\u90E8\u5206\u7EC4\u4EF6\u63D0\u4F9B\u4E86 safe-area-inset-top
\u6216 safe-area-inset-bottom
\u5C5E\u6027\uFF0C\u8BBE\u7F6E\u8BE5\u5C5E\u6027\u540E\uFF0C\u5373\u53EF\u5728\u5BF9\u5E94\u7684\u673A\u578B\u4E0A\u5F00\u542F\u9002\u914D\uFF0C\u5982\u4E0B\u793A\u4F8B\uFF1A
<!-- \u5728 head \u6807\u7B7E\u4E2D\u6DFB\u52A0 meta \u6807\u7B7E\uFF0C\u5E76\u8BBE\u7F6E viewport-fit=cover \u503C -->\n<meta\n name="viewport"\n content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"\n/>\n\n<!-- \u5F00\u542F\u9876\u90E8\u5B89\u5168\u533A\u9002\u914D -->\n<van-nav-bar safe-area-inset-top />\n\n<!-- \u5F00\u542F\u5E95\u90E8\u5B89\u5168\u533A\u9002\u914D -->\n<van-number-keyboard safe-area-inset-bottom />\n
\n\nPlace a group of content in multiple collapsible panels, click the title of the panel to expand or contract its content.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Collapse, CollapseItem } from 'vant';\n\nconst app = createApp();\napp.use(Collapse);\napp.use(CollapseItem);\n
\nUse v-model
to control the name of active panels.
<van-collapse v-model="activeNames">\n <van-collapse-item title="Title1" name="1">\n The code is written for people to see and can be run on a machine.\n </van-collapse-item>\n <van-collapse-item title="Title2" name="2">\n Technology is nothing more than the common soul of those who develop it.\n </van-collapse-item>\n <van-collapse-item title="Title3" name="3">\n The frequency of people swearing during code reading is the only measure of\n code quality.\n </van-collapse-item>\n</van-collapse>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeNames = ref(['1']);\n return { activeNames };\n },\n};\n
\nIn accordion mode, only one panel can be expanded at the same time.
\n<van-collapse v-model="activeName" accordion>\n <van-collapse-item title="Title1" name="1">\n The code is written for people to see and can be run on a machine.\n </van-collapse-item>\n <van-collapse-item title="Title2" name="2">\n Technology is nothing more than the common soul of those who develop it.\n </van-collapse-item>\n <van-collapse-item title="Title3" name="3">\n The frequency of people swearing during code reading is the only measure of\n code quality.\n </van-collapse-item>\n</van-collapse>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeName = ref('1');\n return { activeName };\n },\n};\n
\nUse the disabled
prop to disable CollapseItem.
<van-collapse v-model="activeNames">\n <van-collapse-item title="Title1" name="1">\n The code is written for people to see and can be run on a machine.\n </van-collapse-item>\n <van-collapse-item title="Title2" name="2" disabled>\n Technology is nothing more than the common soul of those who develop it.\n </van-collapse-item>\n <van-collapse-item title="Title3" name="3" disabled>\n The frequency of people swearing during code reading is the only measure of\n code quality.\n </van-collapse-item>\n</van-collapse>\n
\nUsing title
slot to custom title.
<van-collapse v-model="activeNames">\n <van-collapse-item name="1">\n <template #title>\n <div>Title1 <van-icon name="question-o" /></div>\n </template>\n The code is written for people to see and can be run on a machine.\n </van-collapse-item>\n <van-collapse-item title="Title2" name="2" icon="shop-o">\n Technology is nothing more than the common soul of those who develop it.\n </van-collapse-item>\n</van-collapse>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeNames = ref(['1']);\n return { activeNames };\n },\n};\n
\nUsing toggleAll
method to toggle all items.
<van-collapse v-model="activeNames" ref="collapse">\n <van-collapse-item title="Title1" name="1">\n The code is written for people to see and can be run on a machine.\n </van-collapse-item>\n <van-collapse-item title="Title2" name="2">\n Technology is nothing more than the common soul of those who develop it.\n </van-collapse-item>\n <van-collapse-item title="Title3" name="3">\n The frequency of people swearing during code reading is the only measure of\n code quality.\n </van-collapse-item>\n</van-collapse>\n\n<van-button type="primary" @click="openAll">Open All</van-button>\n<van-button type="primary" @click="toggleAll">Toggle All</van-button>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeNames = ref(['1']);\n const collapse = ref(null);\n\n const openAll = () => {\n collapse.value.toggleAll(true);\n }\n const toggleAll = () => {\n collapse.value.toggleAll();\n },\n\n return {\n activeNames,\n openAll,\n toggleAll,\n collapse,\n };\n },\n};\n
\n\n\nTips: The toggleAll method cannot be used in accordion mode.
\n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nNames of current active panels | \naccordion mode: number | string non-accordion mode: (number | string)[] | \n- | \n
accordion | \nWhether to be accordion mode | \nboolean | \nfalse | \n
border | \nWhether to show outer border | \nboolean | \ntrue | \n
Event | \nDescription | \nArguments | \n
---|---|---|
change | \nEmitted when switching panel | \nactiveNames: string | number | Array<string | number> | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
name | \nName | \nnumber | string | \nindex | \n
icon | \nLeft Icon | \nstring | \n- | \n
size | \nTitle size, can be set to large | \nstring | \n- | \n
title | \nTitle | \nnumber | string | \n- | \n
value | \nRight text | \nnumber | string | \n- | \n
label | \nDescription below the title | \nstring | \n- | \n
border | \nWhether to show inner border | \nboolean | \ntrue | \n
disabled | \nWhether to disabled collapse | \nboolean | \nfalse | \n
readonly | \nWhether to be readonly | \nboolean | \nfalse | \n
is-link | \nWhether to show link icon | \nboolean | \ntrue | \n
lazy-render | \nWhether to lazy render util opened | \nboolean | \ntrue | \n
title-class | \nTitle className | \nstring | \n- | \n
value-class | \nValue className | \nstring | \n- | \n
label-class | \nLabel className | \nstring | \n- | \n
Use ref to get Collapse instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
toggleAll | \nToggle the expanded status of all collapses | \noptions?: boolean | object | \n- | \n
import { ref } from 'vue';\nimport type { CollapseInstance } from 'vant';\n\nconst collapseRef = ref<CollapseInstance>();\n\n// Toggle all\ncollapseRef.value?.toggleAll();\n// Expand all\ncollapseRef.value?.toggleAll(true);\n// UnExpand all\ncollapseRef.value?.toggleAll(false);\n\n// Toggle all, skip disabled\ncollapseRef.value?.toggleAll({\n skipDisabled: true,\n});\n// Expand all, skip disabled\ncollapseRef.value?.toggleAll({\n expanded: true,\n skipDisabled: true,\n});\n
\nUse ref to get CollapseItem instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
toggle | \nToggle expanded status | \nexpanded: boolean | \n- | \n
The component exports the following type definitions:
\nimport type {\n CollapseProps,\n CollapseItemProps,\n CollapseItemInstance,\n CollapseToggleAllOptions,\n} from 'vant';\n
\nCollapseItemInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { CollapseItemInstance } from 'vant';\n\nconst collapseItemRef = ref<CollapseItemInstance>();\n\ncollapseItemRef.value?.toggle();\n
\nName | \nDescription | \n
---|---|
default | \nContent | \n
title | \nCustom header title | \n
value | \nCustom header value | \n
label | \nCustom header label | \n
icon | \nCustom header left icon | \n
right-icon | \nCustom header right icon | \n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-collapse-item-duration | \nvar(--van-duration-base) | \n- | \n
--van-collapse-item-content-padding | \nvar(--van-padding-sm) var(--van-padding-md) | \n- | \n
--van-collapse-item-content-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-collapse-item-content-line-height | \n1.5 | \n- | \n
--van-collapse-item-content-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-collapse-item-content-background | \nvar(--van-background-2) | \n- | \n
--van-collapse-item-title-disabled-color | \nvar(--van-text-color-3) | \n- | \n
Place a group of content in multiple collapsible panels, click the title of the panel to expand or contract its content.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Collapse, CollapseItem } from 'vant';\n\nconst app = createApp();\napp.use(Collapse);\napp.use(CollapseItem);\n
\nUse v-model
to control the name of active panels.
<van-collapse v-model="activeNames">\n <van-collapse-item title="Title1" name="1">\n The code is written for people to see and can be run on a machine.\n </van-collapse-item>\n <van-collapse-item title="Title2" name="2">\n Technology is nothing more than the common soul of those who develop it.\n </van-collapse-item>\n <van-collapse-item title="Title3" name="3">\n The frequency of people swearing during code reading is the only measure of\n code quality.\n </van-collapse-item>\n</van-collapse>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeNames = ref(['1']);\n return { activeNames };\n },\n};\n
\nIn accordion mode, only one panel can be expanded at the same time.
\n<van-collapse v-model="activeName" accordion>\n <van-collapse-item title="Title1" name="1">\n The code is written for people to see and can be run on a machine.\n </van-collapse-item>\n <van-collapse-item title="Title2" name="2">\n Technology is nothing more than the common soul of those who develop it.\n </van-collapse-item>\n <van-collapse-item title="Title3" name="3">\n The frequency of people swearing during code reading is the only measure of\n code quality.\n </van-collapse-item>\n</van-collapse>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeName = ref('1');\n return { activeName };\n },\n};\n
\nUse the disabled
prop to disable CollapseItem.
<van-collapse v-model="activeNames">\n <van-collapse-item title="Title1" name="1">\n The code is written for people to see and can be run on a machine.\n </van-collapse-item>\n <van-collapse-item title="Title2" name="2" disabled>\n Technology is nothing more than the common soul of those who develop it.\n </van-collapse-item>\n <van-collapse-item title="Title3" name="3" disabled>\n The frequency of people swearing during code reading is the only measure of\n code quality.\n </van-collapse-item>\n</van-collapse>\n
\nUsing title
slot to custom title.
<van-collapse v-model="activeNames">\n <van-collapse-item name="1">\n <template #title>\n <div>Title1 <van-icon name="question-o" /></div>\n </template>\n The code is written for people to see and can be run on a machine.\n </van-collapse-item>\n <van-collapse-item title="Title2" name="2" icon="shop-o">\n Technology is nothing more than the common soul of those who develop it.\n </van-collapse-item>\n</van-collapse>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeNames = ref(['1']);\n return { activeNames };\n },\n};\n
\nUsing toggleAll
method to toggle all items.
<van-collapse v-model="activeNames" ref="collapse">\n <van-collapse-item title="Title1" name="1">\n The code is written for people to see and can be run on a machine.\n </van-collapse-item>\n <van-collapse-item title="Title2" name="2">\n Technology is nothing more than the common soul of those who develop it.\n </van-collapse-item>\n <van-collapse-item title="Title3" name="3">\n The frequency of people swearing during code reading is the only measure of\n code quality.\n </van-collapse-item>\n</van-collapse>\n\n<van-button type="primary" @click="openAll">Open All</van-button>\n<van-button type="primary" @click="toggleAll">Toggle All</van-button>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeNames = ref(['1']);\n const collapse = ref(null);\n\n const openAll = () => {\n collapse.value.toggleAll(true);\n }\n const toggleAll = () => {\n collapse.value.toggleAll();\n },\n\n return {\n activeNames,\n openAll,\n toggleAll,\n collapse,\n };\n },\n};\n
\n\n\nTips: The toggleAll method cannot be used in accordion mode.
\n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nNames of current active panels | \naccordion mode: number | string non-accordion mode: (number | string)[] | \n- | \n
accordion | \nWhether to be accordion mode | \nboolean | \nfalse | \n
border | \nWhether to show outer border | \nboolean | \ntrue | \n
Event | \nDescription | \nArguments | \n
---|---|---|
change | \nEmitted when switching panel | \nactiveNames: string | number | Array<string | number> | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
name | \nName | \nnumber | string | \nindex | \n
icon | \nLeft Icon | \nstring | \n- | \n
size | \nTitle size, can be set to large | \nstring | \n- | \n
title | \nTitle | \nnumber | string | \n- | \n
value | \nRight text | \nnumber | string | \n- | \n
label | \nDescription below the title | \nstring | \n- | \n
border | \nWhether to show inner border | \nboolean | \ntrue | \n
disabled | \nWhether to disabled collapse | \nboolean | \nfalse | \n
readonly | \nWhether to be readonly | \nboolean | \nfalse | \n
is-link | \nWhether to show link icon | \nboolean | \ntrue | \n
lazy-render | \nWhether to lazy render util opened | \nboolean | \ntrue | \n
title-class | \nTitle className | \nstring | \n- | \n
value-class | \nValue className | \nstring | \n- | \n
label-class | \nLabel className | \nstring | \n- | \n
Use ref to get Collapse instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
toggleAll | \nToggle the expanded status of all collapses | \noptions?: boolean | object | \n- | \n
import { ref } from 'vue';\nimport type { CollapseInstance } from 'vant';\n\nconst collapseRef = ref<CollapseInstance>();\n\n// Toggle all\ncollapseRef.value?.toggleAll();\n// Expand all\ncollapseRef.value?.toggleAll(true);\n// UnExpand all\ncollapseRef.value?.toggleAll(false);\n\n// Toggle all, skip disabled\ncollapseRef.value?.toggleAll({\n skipDisabled: true,\n});\n// Expand all, skip disabled\ncollapseRef.value?.toggleAll({\n expanded: true,\n skipDisabled: true,\n});\n
\nUse ref to get CollapseItem instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
toggle | \nToggle expanded status | \nexpanded: boolean | \n- | \n
The component exports the following type definitions:
\nimport type {\n CollapseProps,\n CollapseItemProps,\n CollapseItemInstance,\n CollapseToggleAllOptions,\n} from 'vant';\n
\nCollapseItemInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { CollapseItemInstance } from 'vant';\n\nconst collapseItemRef = ref<CollapseItemInstance>();\n\ncollapseItemRef.value?.toggle();\n
\nName | \nDescription | \n
---|---|
default | \nContent | \n
title | \nCustom header title | \n
value | \nCustom header value | \n
label | \nCustom header label | \n
icon | \nCustom header left icon | \n
right-icon | \nCustom header right icon | \n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-collapse-item-duration | \nvar(--van-duration-base) | \n- | \n
--van-collapse-item-content-padding | \nvar(--van-padding-sm) var(--van-padding-md) | \n- | \n
--van-collapse-item-content-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-collapse-item-content-line-height | \n1.5 | \n- | \n
--van-collapse-item-content-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-collapse-item-content-background | \nvar(--van-background-2) | \n- | \n
--van-collapse-item-title-disabled-color | \nvar(--van-text-color-3) | \n- | \n
Add specific text or patterns on the page as watermarks, which can be used to prevent information theft. Please upgrade vant
to >= v4.2.0 before using this component.
Register component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Watermark } from 'vant';\n\nconst app = createApp();\napp.use(Watermark);\n
\nUse the content
prop to set the text of the watermark.
<van-watermark content="Vant" />\n
\nUse the image
prop to set the watermark image, and use opacity
prop to adjust the transparency of the watermark.
<van-watermark\n image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"\n opacity="0.2"\n/>\n
\nUse gap-x
gap-y
prop to control the gap between watermark items.
<van-watermark\n image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"\n :gap-x="30"\n :gap-y="10"\n opacity="0.2"\n/>\n
\nUse rotate
prop to control the rotate of watermark. The default value is -22
.
<van-watermark\n image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"\n rotate="22"\n opacity="0.2"\n/>\n
\nUse the full-page
prop to control the display range of the watermark.
<van-watermark\n image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"\n opacity="0.2"\n :full-page="true"\n/>\n
\nUse the content
slot to pass HTML as watermark. Only supports inline styles, and self-closing tags are not supported.
<van-watermark :width="150">\n <template #content>\n <div style="background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%)">\n <p style="mix-blend-mode: difference; color: #fff">Vant watermark</p>\n </div>\n </template>\n</van-watermark>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
width | \nWatermark width | \nnumber | \n100 | \n
height | \nWatermark height | \nnumber | \n100 | \n
z-index | \nWatermark\'s z-index | \nnumber | string | \n100 | \n
content | \nText watermark content | \nstring | \n- | \n
image | \nImage watermark content. If content and image are passed at the same time, use the image watermark first | \nstring | \n- | \n
rotate | \nWatermark rotation angle | \nnumber | string | \n-22 | \n
full-page | \nWhether to display the watermark in full screen | \nboolean | \ntrue | \n
gap-x | \nHorizontal spacing between watermarks | \nnumber | \n0 | \n
gap-y | \nVertical spacing between watermarks | \nnumber | \n0 | \n
text-color | \nColor of text watermark | \nstring | \n#dcdee0 | \n
opacity | \nOpacity of watermark | \nnumber | string | \n- | \n
Attribute | \nDescription | \n
---|---|
content | \nContent of HTML watermark. Only supports inline styles, and self-closing tags are not supported. The priority is higher than content or image props | \n
The component exports the following type definitions:
\nimport type { WaterProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-watermark-z-index | \n100 | \nz-index of root element | \n
Add specific text or patterns on the page as watermarks, which can be used to prevent information theft. Please upgrade vant
to >= v4.2.0 before using this component.
Register component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Watermark } from 'vant';\n\nconst app = createApp();\napp.use(Watermark);\n
\nUse the content
prop to set the text of the watermark.
<van-watermark content="Vant" />\n
\nUse the image
prop to set the watermark image, and use opacity
prop to adjust the transparency of the watermark.
<van-watermark\n image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"\n opacity="0.2"\n/>\n
\nUse gap-x
gap-y
prop to control the gap between watermark items.
<van-watermark\n image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"\n :gap-x="30"\n :gap-y="10"\n opacity="0.2"\n/>\n
\nUse rotate
prop to control the rotate of watermark. The default value is -22
.
<van-watermark\n image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"\n rotate="22"\n opacity="0.2"\n/>\n
\nUse the full-page
prop to control the display range of the watermark.
<van-watermark\n image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"\n opacity="0.2"\n :full-page="true"\n/>\n
\nUse the content
slot to pass HTML as watermark. Only supports inline styles, and self-closing tags are not supported.
<van-watermark :width="150">\n <template #content>\n <div style="background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%)">\n <p style="mix-blend-mode: difference; color: #fff">Vant watermark</p>\n </div>\n </template>\n</van-watermark>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
width | \nWatermark width | \nnumber | \n100 | \n
height | \nWatermark height | \nnumber | \n100 | \n
z-index | \nWatermark\'s z-index | \nnumber | string | \n100 | \n
content | \nText watermark content | \nstring | \n- | \n
image | \nImage watermark content. If content and image are passed at the same time, use the image watermark first | \nstring | \n- | \n
rotate | \nWatermark rotation angle | \nnumber | string | \n-22 | \n
full-page | \nWhether to display the watermark in full screen | \nboolean | \ntrue | \n
gap-x | \nHorizontal spacing between watermarks | \nnumber | \n0 | \n
gap-y | \nVertical spacing between watermarks | \nnumber | \n0 | \n
text-color | \nColor of text watermark | \nstring | \n#dcdee0 | \n
opacity | \nOpacity of watermark | \nnumber | string | \n- | \n
Attribute | \nDescription | \n
---|---|
content | \nContent of HTML watermark. Only supports inline styles, and self-closing tags are not supported. The priority is higher than content or image props | \n
The component exports the following type definitions:
\nimport type { WaterProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-watermark-z-index | \n100 | \nz-index of root element | \n
The rate component is used for rating things.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Rate } from 'vant';\n\nconst app = createApp();\napp.use(Rate);\n
\n<van-rate v-model="value" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(3);\n return { value };\n },\n};\n
\n<van-rate v-model="value" icon="like" void-icon="like-o" />\n
\n<van-rate\n v-model="value"\n :size="25"\n color="#ffd21e"\n void-icon="star"\n void-color="#eee"\n/>\n
\n<van-rate v-model="value" allow-half />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(2.5);\n return { value };\n },\n};\n
\n<van-rate v-model="value" :count="6" />\n
\nWhen the clearable
prop is set to true
, clicking on the same value again will reset the value to 0
.
<van-rate v-model="value" clearable />\n
\n<van-rate v-model="value" disabled />\n
\n<van-rate v-model="value" readonly />\n
\n<van-rate v-model="value" readonly />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(3.3);\n return { value };\n },\n};\n
\n<van-rate v-model="value" @change="onChange" />\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const value = ref(3);\n const onChange = (value) => showToast('current value:' + value);\n return {\n value,\n onChange,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nCurrent rate | \nnumber | \n- | \n
count | \nCount | \nnumber | string | \n5 | \n
size | \nIcon size | \nnumber | string | \n20px | \n
gutter | \nIcon gutter | \nnumber | string | \n4px | \n
color | \nSelected color | \nstring | \n#ee0a24 | \n
void-color | \nVoid color | \nstring | \n#c8c9cc | \n
disabled-color | \nDisabled color | \nstring | \n#c8c9cc | \n
icon | \nSelected icon | \nstring | \nstar | \n
void-icon | \nVoid icon | \nstring | \nstar-o | \n
icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
allow-half | \nWhether to allow half star | \nboolean | \nfalse | \n
clearable v4.6.0 | \nWhether to allow clear when click again | \nboolean | \nfalse | \n
readonly | \nWhether to be readonly | \nboolean | \nfalse | \n
disabled | \nWhether to disable rate | \nboolean | \nfalse | \n
touchable | \nWhether to allow select rate by touch gesture | \nboolean | \ntrue | \n
Event | \nDescription | \nParameters | \n
---|---|---|
change | \nEmitted when rate changed | \ncurrentValue: number | \n
The component exports the following type definitions:
\nimport type { RateProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-rate-icon-size | \n20px | \n- | \n
--van-rate-icon-gutter | \nvar(--van-padding-base) | \n- | \n
--van-rate-icon-void-color | \nvar(--van-gray-5) | \n- | \n
--van-rate-icon-full-color | \nvar(--van-danger-color) | \n- | \n
--van-rate-icon-disabled-color | \nvar(--van-gray-5) | \n- | \n
The rate component is used for rating things.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Rate } from 'vant';\n\nconst app = createApp();\napp.use(Rate);\n
\n<van-rate v-model="value" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(3);\n return { value };\n },\n};\n
\n<van-rate v-model="value" icon="like" void-icon="like-o" />\n
\n<van-rate\n v-model="value"\n :size="25"\n color="#ffd21e"\n void-icon="star"\n void-color="#eee"\n/>\n
\n<van-rate v-model="value" allow-half />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(2.5);\n return { value };\n },\n};\n
\n<van-rate v-model="value" :count="6" />\n
\nWhen the clearable
prop is set to true
, clicking on the same value again will reset the value to 0
.
<van-rate v-model="value" clearable />\n
\n<van-rate v-model="value" disabled />\n
\n<van-rate v-model="value" readonly />\n
\n<van-rate v-model="value" readonly />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(3.3);\n return { value };\n },\n};\n
\n<van-rate v-model="value" @change="onChange" />\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const value = ref(3);\n const onChange = (value) => showToast('current value:' + value);\n return {\n value,\n onChange,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nCurrent rate | \nnumber | \n- | \n
count | \nCount | \nnumber | string | \n5 | \n
size | \nIcon size | \nnumber | string | \n20px | \n
gutter | \nIcon gutter | \nnumber | string | \n4px | \n
color | \nSelected color | \nstring | \n#ee0a24 | \n
void-color | \nVoid color | \nstring | \n#c8c9cc | \n
disabled-color | \nDisabled color | \nstring | \n#c8c9cc | \n
icon | \nSelected icon | \nstring | \nstar | \n
void-icon | \nVoid icon | \nstring | \nstar-o | \n
icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
allow-half | \nWhether to allow half star | \nboolean | \nfalse | \n
clearable v4.6.0 | \nWhether to allow clear when click again | \nboolean | \nfalse | \n
readonly | \nWhether to be readonly | \nboolean | \nfalse | \n
disabled | \nWhether to disable rate | \nboolean | \nfalse | \n
touchable | \nWhether to allow select rate by touch gesture | \nboolean | \ntrue | \n
Event | \nDescription | \nParameters | \n
---|---|---|
change | \nEmitted when rate changed | \ncurrentValue: number | \n
The component exports the following type definitions:
\nimport type { RateProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-rate-icon-size | \n20px | \n- | \n
--van-rate-icon-gutter | \nvar(--van-padding-base) | \n- | \n
--van-rate-icon-void-color | \nvar(--van-gray-5) | \n- | \n
--van-rate-icon-full-color | \nvar(--van-danger-color) | \n- | \n
--van-rate-icon-disabled-color | \nvar(--van-gray-5) | \n- | \n
Display contact information in the form of cards.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { ContactCard } from 'vant';\n\nconst app = createApp();\napp.use(ContactCard);\n
\n<van-contact-card type="add" @click="onAdd" />\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onAdd = () => showToast('add');\n return {\n onAdd,\n };\n },\n};\n
\n<van-contact-card type="edit" :tel="tel" :name="name" @click="onEdit" />\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const tel = ref('13000000000');\n const name = ref('John Snow');\n const onEdit = () => showToast('edit');\n\n return {\n tel,\n name,\n onEdit,\n };\n },\n};\n
\n<van-contact-card\n type="edit"\n name="John Snow"\n tel="13000000000"\n :editable="false"\n/>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
type | \nCan be set to edit | \nstring | \nadd | \n
name | \nName | \nstring | \n- | \n
tel | \nPhone | \nstring | \n- | \n
add-text | \nAdd card text | \nstring | \nAdd contact info | \n
editable | \nWhether to allow editing of contacts | \nboolean | \ntrue | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when component is clicked | \nevent: MouseEvent | \n
The component exports the following type definitions:
\nimport type { ContactCardType, ContactCardProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-contact-card-padding | \nvar(--van-padding-md) | \n- | \n
--van-contact-card-add-icon-size | \n40px | \n- | \n
--van-contact-card-add-icon-color | \nvar(--van-primary-color) | \n- | \n
--van-contact-card-title-line-height | \nvar(--van-line-height-md) | \n- | \n
Display contact information in the form of cards.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { ContactCard } from 'vant';\n\nconst app = createApp();\napp.use(ContactCard);\n
\n<van-contact-card type="add" @click="onAdd" />\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onAdd = () => showToast('add');\n return {\n onAdd,\n };\n },\n};\n
\n<van-contact-card type="edit" :tel="tel" :name="name" @click="onEdit" />\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const tel = ref('13000000000');\n const name = ref('John Snow');\n const onEdit = () => showToast('edit');\n\n return {\n tel,\n name,\n onEdit,\n };\n },\n};\n
\n<van-contact-card\n type="edit"\n name="John Snow"\n tel="13000000000"\n :editable="false"\n/>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
type | \nCan be set to edit | \nstring | \nadd | \n
name | \nName | \nstring | \n- | \n
tel | \nPhone | \nstring | \n- | \n
add-text | \nAdd card text | \nstring | \nAdd contact info | \n
editable | \nWhether to allow editing of contacts | \nboolean | \ntrue | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when component is clicked | \nevent: MouseEvent | \n
The component exports the following type definitions:
\nimport type { ContactCardType, ContactCardProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-contact-card-padding | \nvar(--van-padding-md) | \n- | \n
--van-contact-card-add-icon-size | \n40px | \n- | \n
--van-contact-card-add-icon-color | \nvar(--van-primary-color) | \n- | \n
--van-contact-card-title-line-height | \nvar(--van-line-height-md) | \n- | \n
\u5728\u53F3\u4E0A\u89D2\u5C55\u793A\u5FBD\u6807\u6570\u5B57\u6216\u5C0F\u7EA2\u70B9\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Badge } from 'vant';\n\nconst app = createApp();\napp.use(Badge);\n
\n\u8BBE\u7F6E content
\u5C5E\u6027\u540E\uFF0CBadge \u4F1A\u5728\u5B50\u5143\u7D20\u7684\u53F3\u4E0A\u89D2\u663E\u793A\u5BF9\u5E94\u7684\u5FBD\u6807\uFF0C\u4E5F\u53EF\u4EE5\u901A\u8FC7 dot
\u6765\u663E\u793A\u5C0F\u7EA2\u70B9\u3002
<van-badge :content="5">\n <div class="child" />\n</van-badge>\n<van-badge :content="10">\n <div class="child" />\n</van-badge>\n<van-badge content="Hot">\n <div class="child" />\n</van-badge>\n<van-badge dot>\n <div class="child" />\n</van-badge>\n\n<style>\n .child {\n width: 40px;\n height: 40px;\n background: #f2f3f5;\n border-radius: 4px;\n }\n</style>\n
\n\u8BBE\u7F6E max
\u5C5E\u6027\u540E\uFF0C\u5F53 content
\u7684\u6570\u503C\u8D85\u8FC7\u6700\u5927\u503C\u65F6\uFF0C\u4F1A\u81EA\u52A8\u663E\u793A\u4E3A {max}+
\u3002
<van-badge :content="20" max="9">\n <div class="child" />\n</van-badge>\n<van-badge :content="50" max="20">\n <div class="child" />\n</van-badge>\n<van-badge :content="200" max="99">\n <div class="child" />\n</van-badge>\n
\n\u901A\u8FC7 color
\u5C5E\u6027\u6765\u8BBE\u7F6E\u5FBD\u6807\u7684\u989C\u8272\u3002
<van-badge :content="5" color="#1989fa">\n <div class="child" />\n</van-badge>\n<van-badge :content="10" color="#1989fa">\n <div class="child" />\n</van-badge>\n<van-badge dot color="#1989fa">\n <div class="child" />\n</van-badge>\n
\n\u901A\u8FC7 content
\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u5FBD\u6807\u7684\u5185\u5BB9\uFF0C\u6BD4\u5982\u63D2\u5165\u4E00\u4E2A\u56FE\u6807\u3002
<van-badge>\n <div class="child" />\n <template #content>\n <van-icon name="success" class="badge-icon" />\n </template>\n</van-badge>\n<van-badge>\n <div class="child" />\n <template #content>\n <van-icon name="cross" class="badge-icon" />\n </template>\n</van-badge>\n<van-badge>\n <div class="child" />\n <template #content>\n <van-icon name="down" class="badge-icon" />\n </template>\n</van-badge>\n
\n.badge-icon {\n display: block;\n font-size: 10px;\n line-height: 16px;\n}\n
\n\u901A\u8FC7 position
\u5C5E\u6027\u6765\u8BBE\u7F6E\u5FBD\u6807\u7684\u4F4D\u7F6E\u3002
<van-badge :content="10" position="top-left">\n <div class="child" />\n</van-badge>\n<van-badge :content="10" position="bottom-left">\n <div class="child" />\n</van-badge>\n<van-badge :content="10" position="bottom-right">\n <div class="child" />\n</van-badge>\n
\n\u5F53 Badge \u6CA1\u6709\u5B50\u5143\u7D20\u65F6\uFF0C\u4F1A\u4F5C\u4E3A\u4E00\u4E2A\u72EC\u7ACB\u7684\u5143\u7D20\u8FDB\u884C\u5C55\u793A\u3002
\n<van-badge :content="20" />\n\n<van-badge :content="200" max="99" />\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
content | \n\u5FBD\u6807\u5185\u5BB9 | \nnumber | string | \n- | \n
color | \n\u5FBD\u6807\u80CC\u666F\u989C\u8272 | \nstring | \n#ee0a24 | \n
dot | \n\u662F\u5426\u5C55\u793A\u4E3A\u5C0F\u7EA2\u70B9 | \nboolean | \nfalse | \n
max | \n\u6700\u5927\u503C\uFF0C\u8D85\u8FC7\u6700\u5927\u503C\u4F1A\u663E\u793A {max}+ \uFF0C\u4EC5\u5F53 content \u4E3A\u6570\u5B57\u65F6\u6709\u6548 | \nnumber | string | \n- | \n
offset | \n\u8BBE\u7F6E\u5FBD\u6807\u7684\u504F\u79FB\u91CF\uFF0C\u6570\u7EC4\u7684\u4E24\u9879\u5206\u522B\u5BF9\u5E94\u6C34\u5E73\u5411\u53F3\u548C\u5782\u76F4\u5411\u4E0B\u65B9\u5411\u7684\u504F\u79FB\u91CF\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \n[number | string, number | string] | \n- | \n
show-zero | \n\u5F53 content \u4E3A\u6570\u5B57 0 \u6216\u5B57\u7B26\u4E32 \'0\' \u65F6\uFF0C\u662F\u5426\u5C55\u793A\u5FBD\u6807 | \nboolean | \ntrue | \n
position | \n\u5FBD\u6807\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A top-left bottom-left bottom-right | \nstring | \ntop-right | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u5FBD\u6807\u5305\u88F9\u7684\u5B50\u5143\u7D20 | \n
content | \n\u81EA\u5B9A\u4E49\u5FBD\u6807\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { BadgeProps, BadgePosition } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-badge-size | \n16px | \n- | \n
--van-badge-color | \nvar(--van-white) | \n- | \n
--van-badge-padding | \n0 3px | \n- | \n
--van-badge-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-badge-font-weight | \nvar(--van-font-bold) | \n- | \n
--van-badge-border-width | \nvar(--van-border-width) | \n- | \n
--van-badge-background | \nvar(--van-danger-color) | \n- | \n
--van-badge-dot-color | \nvar(--van-danger-color) | \n- | \n
--van-badge-dot-size | \n8px | \n- | \n
--van-badge-font | \n-apple-system-font, Helvetica Neue, Arial, sans-serif | \n- | \n
\u5728\u53F3\u4E0A\u89D2\u5C55\u793A\u5FBD\u6807\u6570\u5B57\u6216\u5C0F\u7EA2\u70B9\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Badge } from 'vant';\n\nconst app = createApp();\napp.use(Badge);\n
\n\u8BBE\u7F6E content
\u5C5E\u6027\u540E\uFF0CBadge \u4F1A\u5728\u5B50\u5143\u7D20\u7684\u53F3\u4E0A\u89D2\u663E\u793A\u5BF9\u5E94\u7684\u5FBD\u6807\uFF0C\u4E5F\u53EF\u4EE5\u901A\u8FC7 dot
\u6765\u663E\u793A\u5C0F\u7EA2\u70B9\u3002
<van-badge :content="5">\n <div class="child" />\n</van-badge>\n<van-badge :content="10">\n <div class="child" />\n</van-badge>\n<van-badge content="Hot">\n <div class="child" />\n</van-badge>\n<van-badge dot>\n <div class="child" />\n</van-badge>\n\n<style>\n .child {\n width: 40px;\n height: 40px;\n background: #f2f3f5;\n border-radius: 4px;\n }\n</style>\n
\n\u8BBE\u7F6E max
\u5C5E\u6027\u540E\uFF0C\u5F53 content
\u7684\u6570\u503C\u8D85\u8FC7\u6700\u5927\u503C\u65F6\uFF0C\u4F1A\u81EA\u52A8\u663E\u793A\u4E3A {max}+
\u3002
<van-badge :content="20" max="9">\n <div class="child" />\n</van-badge>\n<van-badge :content="50" max="20">\n <div class="child" />\n</van-badge>\n<van-badge :content="200" max="99">\n <div class="child" />\n</van-badge>\n
\n\u901A\u8FC7 color
\u5C5E\u6027\u6765\u8BBE\u7F6E\u5FBD\u6807\u7684\u989C\u8272\u3002
<van-badge :content="5" color="#1989fa">\n <div class="child" />\n</van-badge>\n<van-badge :content="10" color="#1989fa">\n <div class="child" />\n</van-badge>\n<van-badge dot color="#1989fa">\n <div class="child" />\n</van-badge>\n
\n\u901A\u8FC7 content
\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u5FBD\u6807\u7684\u5185\u5BB9\uFF0C\u6BD4\u5982\u63D2\u5165\u4E00\u4E2A\u56FE\u6807\u3002
<van-badge>\n <div class="child" />\n <template #content>\n <van-icon name="success" class="badge-icon" />\n </template>\n</van-badge>\n<van-badge>\n <div class="child" />\n <template #content>\n <van-icon name="cross" class="badge-icon" />\n </template>\n</van-badge>\n<van-badge>\n <div class="child" />\n <template #content>\n <van-icon name="down" class="badge-icon" />\n </template>\n</van-badge>\n
\n.badge-icon {\n display: block;\n font-size: 10px;\n line-height: 16px;\n}\n
\n\u901A\u8FC7 position
\u5C5E\u6027\u6765\u8BBE\u7F6E\u5FBD\u6807\u7684\u4F4D\u7F6E\u3002
<van-badge :content="10" position="top-left">\n <div class="child" />\n</van-badge>\n<van-badge :content="10" position="bottom-left">\n <div class="child" />\n</van-badge>\n<van-badge :content="10" position="bottom-right">\n <div class="child" />\n</van-badge>\n
\n\u5F53 Badge \u6CA1\u6709\u5B50\u5143\u7D20\u65F6\uFF0C\u4F1A\u4F5C\u4E3A\u4E00\u4E2A\u72EC\u7ACB\u7684\u5143\u7D20\u8FDB\u884C\u5C55\u793A\u3002
\n<van-badge :content="20" />\n\n<van-badge :content="200" max="99" />\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
content | \n\u5FBD\u6807\u5185\u5BB9 | \nnumber | string | \n- | \n
color | \n\u5FBD\u6807\u80CC\u666F\u989C\u8272 | \nstring | \n#ee0a24 | \n
dot | \n\u662F\u5426\u5C55\u793A\u4E3A\u5C0F\u7EA2\u70B9 | \nboolean | \nfalse | \n
max | \n\u6700\u5927\u503C\uFF0C\u8D85\u8FC7\u6700\u5927\u503C\u4F1A\u663E\u793A {max}+ \uFF0C\u4EC5\u5F53 content \u4E3A\u6570\u5B57\u65F6\u6709\u6548 | \nnumber | string | \n- | \n
offset | \n\u8BBE\u7F6E\u5FBD\u6807\u7684\u504F\u79FB\u91CF\uFF0C\u6570\u7EC4\u7684\u4E24\u9879\u5206\u522B\u5BF9\u5E94\u6C34\u5E73\u5411\u53F3\u548C\u5782\u76F4\u5411\u4E0B\u65B9\u5411\u7684\u504F\u79FB\u91CF\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \n[number | string, number | string] | \n- | \n
show-zero | \n\u5F53 content \u4E3A\u6570\u5B57 0 \u6216\u5B57\u7B26\u4E32 \'0\' \u65F6\uFF0C\u662F\u5426\u5C55\u793A\u5FBD\u6807 | \nboolean | \ntrue | \n
position | \n\u5FBD\u6807\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A top-left bottom-left bottom-right | \nstring | \ntop-right | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u5FBD\u6807\u5305\u88F9\u7684\u5B50\u5143\u7D20 | \n
content | \n\u81EA\u5B9A\u4E49\u5FBD\u6807\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { BadgeProps, BadgePosition } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-badge-size | \n16px | \n- | \n
--van-badge-color | \nvar(--van-white) | \n- | \n
--van-badge-padding | \n0 3px | \n- | \n
--van-badge-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-badge-font-weight | \nvar(--van-font-bold) | \n- | \n
--van-badge-border-width | \nvar(--van-border-width) | \n- | \n
--van-badge-background | \nvar(--van-danger-color) | \n- | \n
--van-badge-dot-color | \nvar(--van-danger-color) | \n- | \n
--van-badge-dot-size | \n8px | \n- | \n
--van-badge-font | \n-apple-system-font, Helvetica Neue, Arial, sans-serif | \n- | \n
Set the spacing between elements.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Space } from 'vant';\n\nconst app = createApp();\napp.use(Space);\n
\n<van-space>\n <van-button type="primary">Button</van-button>\n <van-button type="primary">Button</van-button>\n <van-button type="primary">Button</van-button>\n <van-button type="primary">Button</van-button>\n</van-space>\n
\n<van-space direction="vertical" fill>\n <van-button type="primary" block>Button</van-button>\n <van-button type="primary" block>Button</van-button>\n <van-button type="primary" block>Button</van-button>\n</van-space>\n
\n<!-- 20px -->\n<van-space :size="20">\n <van-button type="primary">Button</van-button>\n <van-button type="primary">Button</van-button>\n <van-button type="primary">Button</van-button>\n</van-space>\n\n<!-- 2rem -->\n<van-space size="2rem">\n <van-button type="primary">Button</van-button>\n <van-button type="primary">Button</van-button>\n <van-button type="primary">Button</van-button>\n</van-space>\n
\n<van-radio-group\n v-model="align"\n direction="horizontal"\n style="margin-bottom: 16px"\n>\n <van-radio name="start">start</van-radio>\n <van-radio name="center">center</van-radio>\n <van-radio name="end">end</van-radio>\n <van-radio name="baseline">baseline</van-radio>\n</van-radio-group>\n\n<van-space :align="align" style="padding: 16px; background: #f3f2f5">\n <van-button type="primary">{{ align }}</van-button>\n <div style="padding: 40px 20px; background: #fff">Block</div>\n</van-space>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const align = ref('center');\n return { align };\n },\n};\n
\n<van-space wrap>\n <van-button type="primary" block>Button</van-button>\n <van-button type="primary" block>Button</van-button>\n <van-button type="primary" block>Button</van-button>\n <van-button type="primary" block>Button</van-button>\n <van-button type="primary" block>Button</van-button>\n <van-button type="primary" block>Button</van-button>\n <van-button type="primary" block>Button</van-button>\n <van-button type="primary" block>Button</van-button>\n</van-space>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
direction | \nSpacing direction | \nvertical | horizontal | \nhorizontal | \n
size | \nSpacing size, such as 20px 2em . The default unit is px, supports using array to set horizontal and vertical spacing | \nnumber | string | number[] | string[] | \n8px | \n
align | \nSpacing alignment | \nstart | end | center | baseline | \n- | \n
wrap | \nWhether to wrap automatically, only for horizontal alignment | \nboolean | \nfalse | \n
fill | \nWhether to render Space as a block element and fill the parent element | \nboolean | \nfalse | \n
Name | \nDescription | \n
---|---|
default | \nDefault slot | \n
The component exports the following type definitions:
\nimport type { SpaceProps, SpaceSize, SpaceAlign } from 'vant';\n
\nSet the spacing between elements.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Space } from 'vant';\n\nconst app = createApp();\napp.use(Space);\n
\n<van-space>\n <van-button type="primary">Button</van-button>\n <van-button type="primary">Button</van-button>\n <van-button type="primary">Button</van-button>\n <van-button type="primary">Button</van-button>\n</van-space>\n
\n<van-space direction="vertical" fill>\n <van-button type="primary" block>Button</van-button>\n <van-button type="primary" block>Button</van-button>\n <van-button type="primary" block>Button</van-button>\n</van-space>\n
\n<!-- 20px -->\n<van-space :size="20">\n <van-button type="primary">Button</van-button>\n <van-button type="primary">Button</van-button>\n <van-button type="primary">Button</van-button>\n</van-space>\n\n<!-- 2rem -->\n<van-space size="2rem">\n <van-button type="primary">Button</van-button>\n <van-button type="primary">Button</van-button>\n <van-button type="primary">Button</van-button>\n</van-space>\n
\n<van-radio-group\n v-model="align"\n direction="horizontal"\n style="margin-bottom: 16px"\n>\n <van-radio name="start">start</van-radio>\n <van-radio name="center">center</van-radio>\n <van-radio name="end">end</van-radio>\n <van-radio name="baseline">baseline</van-radio>\n</van-radio-group>\n\n<van-space :align="align" style="padding: 16px; background: #f3f2f5">\n <van-button type="primary">{{ align }}</van-button>\n <div style="padding: 40px 20px; background: #fff">Block</div>\n</van-space>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const align = ref('center');\n return { align };\n },\n};\n
\n<van-space wrap>\n <van-button type="primary" block>Button</van-button>\n <van-button type="primary" block>Button</van-button>\n <van-button type="primary" block>Button</van-button>\n <van-button type="primary" block>Button</van-button>\n <van-button type="primary" block>Button</van-button>\n <van-button type="primary" block>Button</van-button>\n <van-button type="primary" block>Button</van-button>\n <van-button type="primary" block>Button</van-button>\n</van-space>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
direction | \nSpacing direction | \nvertical | horizontal | \nhorizontal | \n
size | \nSpacing size, such as 20px 2em . The default unit is px, supports using array to set horizontal and vertical spacing | \nnumber | string | number[] | string[] | \n8px | \n
align | \nSpacing alignment | \nstart | end | center | baseline | \n- | \n
wrap | \nWhether to wrap automatically, only for horizontal alignment | \nboolean | \nfalse | \n
fill | \nWhether to render Space as a block element and fill the parent element | \nboolean | \nfalse | \n
Name | \nDescription | \n
---|---|
default | \nDefault slot | \n
The component exports the following type definitions:
\nimport type { SpaceProps, SpaceSize, SpaceAlign } from 'vant';\n
\n\u83B7\u53D6\u5143\u7D20\u7684\u5927\u5C0F\u53CA\u5176\u76F8\u5BF9\u4E8E\u89C6\u53E3\u7684\u4F4D\u7F6E\uFF0C\u7B49\u4EF7\u4E8E Element.getBoundingClientRect\u3002
\n<div ref="root" />\n
\nimport { ref, onMounted } from 'vue';\nimport { useRect } from '@vant/use';\n\nexport default {\n setup() {\n const root = ref();\n\n onMounted(() => {\n const rect = useRect(root);\n console.log(rect); // -> \u5143\u7D20\u7684\u5927\u5C0F\u53CA\u5176\u76F8\u5BF9\u4E8E\u89C6\u53E3\u7684\u4F4D\u7F6E\n });\n\n return { root };\n },\n};\n
\nfunction useRect(\n element: Element | Window | Ref<Element | Window | undefined>,\n): DOMRect;\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
width | \n\u5BBD\u5EA6 | \nnumber | \n
height | \n\u9AD8\u5EA6 | \nnumber | \n
top | \n\u9876\u90E8\u4E0E\u89C6\u56FE\u7A97\u53E3\u5DE6\u4E0A\u89D2\u7684\u8DDD\u79BB | \nnumber | \n
left | \n\u5DE6\u4FA7\u4E0E\u89C6\u56FE\u7A97\u53E3\u5DE6\u4E0A\u89D2\u7684\u8DDD\u79BB | \nnumber | \n
right | \n\u53F3\u4FA7\u4E0E\u89C6\u56FE\u7A97\u53E3\u5DE6\u4E0A\u89D2\u7684\u8DDD\u79BB | \nnumber | \n
bottom | \n\u5E95\u90E8\u4E0E\u89C6\u56FE\u7A97\u53E3\u5DE6\u4E0A\u89D2\u7684\u8DDD\u79BB | \nnumber | \n
\u83B7\u53D6\u5143\u7D20\u7684\u5927\u5C0F\u53CA\u5176\u76F8\u5BF9\u4E8E\u89C6\u53E3\u7684\u4F4D\u7F6E\uFF0C\u7B49\u4EF7\u4E8E Element.getBoundingClientRect\u3002
\n<div ref="root" />\n
\nimport { ref, onMounted } from 'vue';\nimport { useRect } from '@vant/use';\n\nexport default {\n setup() {\n const root = ref();\n\n onMounted(() => {\n const rect = useRect(root);\n console.log(rect); // -> \u5143\u7D20\u7684\u5927\u5C0F\u53CA\u5176\u76F8\u5BF9\u4E8E\u89C6\u53E3\u7684\u4F4D\u7F6E\n });\n\n return { root };\n },\n};\n
\nfunction useRect(\n element: Element | Window | Ref<Element | Window | undefined>,\n): DOMRect;\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
width | \n\u5BBD\u5EA6 | \nnumber | \n
height | \n\u9AD8\u5EA6 | \nnumber | \n
top | \n\u9876\u90E8\u4E0E\u89C6\u56FE\u7A97\u53E3\u5DE6\u4E0A\u89D2\u7684\u8DDD\u79BB | \nnumber | \n
left | \n\u5DE6\u4FA7\u4E0E\u89C6\u56FE\u7A97\u53E3\u5DE6\u4E0A\u89D2\u7684\u8DDD\u79BB | \nnumber | \n
right | \n\u53F3\u4FA7\u4E0E\u89C6\u56FE\u7A97\u53E3\u5DE6\u4E0A\u89D2\u7684\u8DDD\u79BB | \nnumber | \n
bottom | \n\u5E95\u90E8\u4E0E\u89C6\u56FE\u7A97\u53E3\u5DE6\u4E0A\u89D2\u7684\u8DDD\u79BB | \nnumber | \n
\u5B9E\u73B0\u89C2\u770B\u89C6\u9891\u65F6\u5F39\u51FA\u7684\u8BC4\u8BBA\u6027\u5B57\u5E55\u529F\u80FD\u3002\u8BF7\u5347\u7EA7 vant
\u5230 >= 4.4.0 \u7248\u672C\u6765\u4F7F\u7528\u8BE5\u7EC4\u4EF6\u3002
\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Barrage } from 'vant';\n\nconst app = createApp();\napp.use(Barrage);\n
\n\u53EF\u4EE5\u901A\u8FC7 v-model
\u53CC\u5411\u7ED1\u5B9A\u5F39\u5E55\u6570\u636E\uFF0CBarrage
\u4F1A\u5728\u7EC4\u4EF6\u533A\u57DF\u5185\u64AD\u653E\u6587\u5B57\u5F39\u5E55\uFF0C\u4F7F\u7528\u6570\u7EC4\u6570\u636E push()
\u53EF\u4EE5\u53D1\u9001\u5F39\u5E55\u6587\u5B57\u3002
<van-barrage v-model="list">\n <div class="video" style="width: 100%; height: 150px"></div>\n</van-barrage>\n<van-space style="margin-top: 10px">\n <van-button @click="add" type="primary" size="small"> \u5F39\u5E55 </van-button>\n</van-space>\n
\nexport default {\n setup() {\n const defaultList = [\n { id: 100, text: '\u8F7B\u91CF' },\n { id: 101, text: '\u53EF\u5B9A\u5236\u7684' },\n { id: 102, text: '\u79FB\u52A8\u7AEF' },\n { id: 103, text: 'Vue' },\n { id: 104, text: '\u7EC4\u4EF6\u5E93' },\n { id: 105, text: 'VantUI' },\n { id: 106, text: '666' },\n ];\n\n const list = ref([...defaultList]);\n const add = () => {\n list.value.push({ id: Math.random(), text: 'Barrage' });\n };\n\n return { list, add };\n },\n};\n
\n\u8BBE\u7F6E auto-play
\u4E3A false
\u5C5E\u6027\u540E\uFF0C\u9700\u8981\u4F7F\u7528 play()
\u8FDB\u884C\u5F39\u5E55\u64AD\u653E\uFF0C\u6682\u505C\u53EF\u4EE5\u4F7F\u7528 pause()
\u5B9E\u73B0\u3002
<van-barrage v-model="list" ref="barrage" :auto-play="false">\n <div class="video" style="width: 100%; height: 150px"></div>\n</van-barrage>\n<van-space style="margin-top: 10px">\n <van-button @click="add" type="primary" size="small" :disabled="!isPlay">\n \u5F39\u5E55\n </van-button>\n <van-button @click="toggle()" size="small">\n {{ isPlay ? '\u6682\u505C' : '\u5F00\u59CB' }}\n </van-button>\n</van-space>\n
\nexport default {\n setup() {\n const defaultList = [\n { id: 100, text: '\u8F7B\u91CF' },\n { id: 101, text: '\u53EF\u5B9A\u5236\u7684' },\n { id: 102, text: '\u79FB\u52A8\u7AEF' },\n { id: 103, text: 'Vue' },\n { id: 104, text: '\u7EC4\u4EF6\u5E93' },\n { id: 105, text: 'VantUI' },\n { id: 106, text: '666' },\n ];\n\n const list = ref([...defaultList]);\n const barrage = ref<BarrageInstance>();\n const add = () => {\n list.value.push({ id: Math.random(), text: 'Barrage' });\n };\n\n const [isPlay, toggle] = useToggle(false);\n\n watch(isPlay, () => {\n if (isPlay.value) barrage.value?.play();\n else barrage.value?.pause();\n });\n\n return { list, barrage, isPlay, toggle, add };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F39\u5E55\u6570\u636E | \nBarrageItem[] | \n- | \n
auto-play | \n\u662F\u5426\u81EA\u52A8\u64AD\u653E\u5F39\u5E55 | \nboolean | \ntrue | \n
rows | \n\u5F39\u5E55\u6587\u5B57\u884C\u6570 | \nnumber | string | \n4 | \n
top | \n\u5F39\u5E55\u6587\u5B57\u533A\u57DF\u9876\u90E8\u95F4\u8DDD\uFF0C\u5355\u4F4D px | \nnumber | string | \n10 | \n
duration | \n\u5F39\u5E55\u6587\u5B57\u6ED1\u8FC7\u5BB9\u5668\u7684\u65F6\u95F4\uFF0C\u5355\u4F4D ms | \nnumber | string | \n4000 | \n
delay | \n\u5F39\u5E55\u52A8\u753B\u5EF6\u65F6\uFF0C\u5355\u4F4D ms | \nnumber | \n300 | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Barrage \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
play | \n\u64AD\u653E\u5F39\u5E55 | \n- | \n- | \n
pause | \n\u6682\u505C\u5F39\u5E55 | \n- | \n- | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u5F39\u5E55\u7EC4\u4EF6\u5B50\u5143\u7D20 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { BarrageProps, BarrageItem, BarrageInstance } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-barrage-font-size | \n16px | \n- | \n
--van-barrage-space | \n10px | \n- | \n
--van-barrage-color | \nvar(--van-white) | \n- | \n
--van-barrage-font | \ninherit | \n- | \n
\u5B9E\u73B0\u89C2\u770B\u89C6\u9891\u65F6\u5F39\u51FA\u7684\u8BC4\u8BBA\u6027\u5B57\u5E55\u529F\u80FD\u3002\u8BF7\u5347\u7EA7 vant
\u5230 >= 4.4.0 \u7248\u672C\u6765\u4F7F\u7528\u8BE5\u7EC4\u4EF6\u3002
\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Barrage } from 'vant';\n\nconst app = createApp();\napp.use(Barrage);\n
\n\u53EF\u4EE5\u901A\u8FC7 v-model
\u53CC\u5411\u7ED1\u5B9A\u5F39\u5E55\u6570\u636E\uFF0CBarrage
\u4F1A\u5728\u7EC4\u4EF6\u533A\u57DF\u5185\u64AD\u653E\u6587\u5B57\u5F39\u5E55\uFF0C\u4F7F\u7528\u6570\u7EC4\u6570\u636E push()
\u53EF\u4EE5\u53D1\u9001\u5F39\u5E55\u6587\u5B57\u3002
<van-barrage v-model="list">\n <div class="video" style="width: 100%; height: 150px"></div>\n</van-barrage>\n<van-space style="margin-top: 10px">\n <van-button @click="add" type="primary" size="small"> \u5F39\u5E55 </van-button>\n</van-space>\n
\nexport default {\n setup() {\n const defaultList = [\n { id: 100, text: '\u8F7B\u91CF' },\n { id: 101, text: '\u53EF\u5B9A\u5236\u7684' },\n { id: 102, text: '\u79FB\u52A8\u7AEF' },\n { id: 103, text: 'Vue' },\n { id: 104, text: '\u7EC4\u4EF6\u5E93' },\n { id: 105, text: 'VantUI' },\n { id: 106, text: '666' },\n ];\n\n const list = ref([...defaultList]);\n const add = () => {\n list.value.push({ id: Math.random(), text: 'Barrage' });\n };\n\n return { list, add };\n },\n};\n
\n\u8BBE\u7F6E auto-play
\u4E3A false
\u5C5E\u6027\u540E\uFF0C\u9700\u8981\u4F7F\u7528 play()
\u8FDB\u884C\u5F39\u5E55\u64AD\u653E\uFF0C\u6682\u505C\u53EF\u4EE5\u4F7F\u7528 pause()
\u5B9E\u73B0\u3002
<van-barrage v-model="list" ref="barrage" :auto-play="false">\n <div class="video" style="width: 100%; height: 150px"></div>\n</van-barrage>\n<van-space style="margin-top: 10px">\n <van-button @click="add" type="primary" size="small" :disabled="!isPlay">\n \u5F39\u5E55\n </van-button>\n <van-button @click="toggle()" size="small">\n {{ isPlay ? '\u6682\u505C' : '\u5F00\u59CB' }}\n </van-button>\n</van-space>\n
\nexport default {\n setup() {\n const defaultList = [\n { id: 100, text: '\u8F7B\u91CF' },\n { id: 101, text: '\u53EF\u5B9A\u5236\u7684' },\n { id: 102, text: '\u79FB\u52A8\u7AEF' },\n { id: 103, text: 'Vue' },\n { id: 104, text: '\u7EC4\u4EF6\u5E93' },\n { id: 105, text: 'VantUI' },\n { id: 106, text: '666' },\n ];\n\n const list = ref([...defaultList]);\n const barrage = ref<BarrageInstance>();\n const add = () => {\n list.value.push({ id: Math.random(), text: 'Barrage' });\n };\n\n const [isPlay, toggle] = useToggle(false);\n\n watch(isPlay, () => {\n if (isPlay.value) barrage.value?.play();\n else barrage.value?.pause();\n });\n\n return { list, barrage, isPlay, toggle, add };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F39\u5E55\u6570\u636E | \nBarrageItem[] | \n- | \n
auto-play | \n\u662F\u5426\u81EA\u52A8\u64AD\u653E\u5F39\u5E55 | \nboolean | \ntrue | \n
rows | \n\u5F39\u5E55\u6587\u5B57\u884C\u6570 | \nnumber | string | \n4 | \n
top | \n\u5F39\u5E55\u6587\u5B57\u533A\u57DF\u9876\u90E8\u95F4\u8DDD\uFF0C\u5355\u4F4D px | \nnumber | string | \n10 | \n
duration | \n\u5F39\u5E55\u6587\u5B57\u6ED1\u8FC7\u5BB9\u5668\u7684\u65F6\u95F4\uFF0C\u5355\u4F4D ms | \nnumber | string | \n4000 | \n
delay | \n\u5F39\u5E55\u52A8\u753B\u5EF6\u65F6\uFF0C\u5355\u4F4D ms | \nnumber | \n300 | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Barrage \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
play | \n\u64AD\u653E\u5F39\u5E55 | \n- | \n- | \n
pause | \n\u6682\u505C\u5F39\u5E55 | \n- | \n- | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u5F39\u5E55\u7EC4\u4EF6\u5B50\u5143\u7D20 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { BarrageProps, BarrageItem, BarrageInstance } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-barrage-font-size | \n16px | \n- | \n
--van-barrage-space | \n10px | \n- | \n
--van-barrage-color | \nvar(--van-white) | \n- | \n
--van-barrage-font | \ninherit | \n- | \n
\u589E\u5F3A\u7248\u7684 img \u6807\u7B7E\uFF0C\u63D0\u4F9B\u591A\u79CD\u56FE\u7247\u586B\u5145\u6A21\u5F0F\uFF0C\u652F\u6301\u56FE\u7247\u61D2\u52A0\u8F7D\u3001\u52A0\u8F7D\u4E2D\u63D0\u793A\u3001\u52A0\u8F7D\u5931\u8D25\u63D0\u793A\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Image as VanImage } from 'vant';\n\nconst app = createApp();\napp.use(VanImage);\n
\n\u57FA\u7840\u7528\u6CD5\u4E0E\u539F\u751F img
\u6807\u7B7E\u4E00\u81F4\uFF0C\u53EF\u4EE5\u8BBE\u7F6E src
\u3001width
\u3001height
\u3001alt
\u7B49\u539F\u751F\u5C5E\u6027\u3002
<van-image\n width="100"\n height="100"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"\n/>\n
\n\u901A\u8FC7 fit
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u56FE\u7247\u586B\u5145\u6A21\u5F0F\uFF0C\u7B49\u540C\u4E8E\u539F\u751F\u7684 object-fit \u5C5E\u6027\uFF0C\u53EF\u9009\u503C\u89C1\u4E0B\u65B9\u8868\u683C\u3002
<van-image\n width="10rem"\n height="10rem"\n fit="contain"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"\n/>\n
\n\u901A\u8FC7 position
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u56FE\u7247\u4F4D\u7F6E\uFF0C\u7ED3\u5408 fit
\u5C5E\u6027\u4F7F\u7528\uFF0C\u7B49\u540C\u4E8E\u539F\u751F\u7684 object-position \u5C5E\u6027\u3002
<van-image\n width="10rem"\n height="10rem"\n fit="cover"\n position="left"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"\n/>\n
\n\u901A\u8FC7 round
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u56FE\u7247\u53D8\u5706\uFF0C\u6CE8\u610F\u5F53\u56FE\u7247\u5BBD\u9AD8\u4E0D\u76F8\u7B49\u4E14 fit
\u4E3A contain
\u6216 scale-down
\u65F6\uFF0C\u5C06\u65E0\u6CD5\u586B\u5145\u4E00\u4E2A\u5B8C\u6574\u7684\u5706\u5F62\u3002
<van-image\n round\n width="10rem"\n height="10rem"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"\n/>\n
\n\u8BBE\u7F6E lazy-load
\u5C5E\u6027\u6765\u5F00\u542F\u56FE\u7247\u61D2\u52A0\u8F7D\uFF0C\u9700\u8981\u642D\u914D Lazyload \u7EC4\u4EF6\u4F7F\u7528\u3002
<van-image\n width="100"\n height="100"\n lazy-load\n src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"\n/>\n
\nimport { createApp } from 'vue';\nimport { Lazyload } from 'vant';\n\nconst app = createApp();\napp.use(Lazyload);\n
\nImage
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u9ED8\u8BA4\u7684\u52A0\u8F7D\u4E2D\u63D0\u793A\uFF0C\u652F\u6301\u901A\u8FC7 loading
\u63D2\u69FD\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002
<van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg">\n <template v-slot:loading>\n <van-loading type="spinner" size="20" />\n </template>\n</van-image>\n
\nImage
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u9ED8\u8BA4\u7684\u52A0\u8F7D\u5931\u8D25\u63D0\u793A\uFF0C\u652F\u6301\u901A\u8FC7 error
\u63D2\u69FD\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002
<van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg">\n <template v-slot:error>\u52A0\u8F7D\u5931\u8D25</template>\n</van-image>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
src | \n\u56FE\u7247\u94FE\u63A5 | \nstring | \n- | \n
fit | \n\u56FE\u7247\u586B\u5145\u6A21\u5F0F\uFF0C\u7B49\u540C\u4E8E\u539F\u751F\u7684 object-fit \u5C5E\u6027 | \nstring | \nfill | \n
position | \n\u56FE\u7247\u4F4D\u7F6E\uFF0C\u7B49\u540C\u4E8E\u539F\u751F\u7684 object-position \u5C5E\u6027\uFF0C\u53EF\u9009\u503C\u4E3A top right bottom left \u6216 string | \nstring | \ncenter | \n
alt | \n\u66FF\u4EE3\u6587\u672C | \nstring | \n- | \n
width | \n\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n- | \n
height | \n\u9AD8\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n- | \n
radius | \n\u5706\u89D2\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n0 | \n
round | \n\u662F\u5426\u663E\u793A\u4E3A\u5706\u5F62 | \nboolean | \nfalse | \n
block 3.6.3 | \n\u662F\u5426\u5C06\u6839\u8282\u70B9\u8BBE\u7F6E\u4E3A\u5757\u7EA7\u5143\u7D20\uFF0C\u9ED8\u8BA4\u60C5\u51B5\u4E0B\u4E3A inline-block \u5143\u7D20 | \nboolean | \nfalse | \n
lazy-load | \n\u662F\u5426\u5F00\u542F\u56FE\u7247\u61D2\u52A0\u8F7D\uFF0C\u987B\u914D\u5408 Lazyload \u7EC4\u4EF6\u4F7F\u7528 | \nboolean | \nfalse | \n
show-error | \n\u662F\u5426\u5C55\u793A\u56FE\u7247\u52A0\u8F7D\u5931\u8D25\u63D0\u793A | \nboolean | \ntrue | \n
show-loading | \n\u662F\u5426\u5C55\u793A\u56FE\u7247\u52A0\u8F7D\u4E2D\u63D0\u793A | \nboolean | \ntrue | \n
error-icon | \n\u5931\u8D25\u65F6\u63D0\u793A\u7684\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \nphoto-fail | \n
loading-icon | \n\u52A0\u8F7D\u65F6\u63D0\u793A\u7684\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \nphoto | \n
icon-size | \n\u52A0\u8F7D\u56FE\u6807\u548C\u5931\u8D25\u56FE\u6807\u7684\u5927\u5C0F | \nnumber | string | \n32px | \n
icon-prefix | \n\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 | \nstring | \nvan-icon | \n
\u540D\u79F0 | \n\u542B\u4E49 | \n
---|---|
contain | \n\u4FDD\u6301\u5BBD\u9AD8\u7F29\u653E\u56FE\u7247\uFF0C\u4F7F\u56FE\u7247\u7684\u957F\u8FB9\u80FD\u5B8C\u5168\u663E\u793A\u51FA\u6765 | \n
cover | \n\u4FDD\u6301\u5BBD\u9AD8\u7F29\u653E\u56FE\u7247\uFF0C\u4F7F\u56FE\u7247\u7684\u77ED\u8FB9\u80FD\u5B8C\u5168\u663E\u793A\u51FA\u6765\uFF0C\u88C1\u526A\u957F\u8FB9 | \n
fill | \n\u62C9\u4F38\u56FE\u7247\uFF0C\u4F7F\u56FE\u7247\u586B\u6EE1\u5143\u7D20 | \n
none | \n\u4FDD\u6301\u56FE\u7247\u539F\u6709\u5C3A\u5BF8 | \n
scale-down | \n\u53D6 none \u6216 contain \u4E2D\u8F83\u5C0F\u7684\u4E00\u4E2A | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u56FE\u7247\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
load | \n\u56FE\u7247\u52A0\u8F7D\u5B8C\u6BD5\u65F6\u89E6\u53D1 | \nevent: Event | \n
error | \n\u56FE\u7247\u52A0\u8F7D\u5931\u8D25\u65F6\u89E6\u53D1 | \n- | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u81EA\u5B9A\u4E49\u56FE\u7247\u4E0B\u65B9\u7684\u5185\u5BB9 | \n
loading | \n\u81EA\u5B9A\u4E49\u52A0\u8F7D\u4E2D\u7684\u63D0\u793A\u5185\u5BB9 | \n
error | \n\u81EA\u5B9A\u4E49\u52A0\u8F7D\u5931\u8D25\u65F6\u7684\u63D0\u793A\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { ImageFit, ImagePosition, ImageProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-image-placeholder-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-image-placeholder-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-image-placeholder-background | \nvar(--van-background) | \n- | \n
--van-image-loading-icon-size | \n32px | \n- | \n
--van-image-loading-icon-color | \nvar(--van-gray-4) | \n- | \n
--van-image-error-icon-size | \n32px | \n- | \n
--van-image-error-icon-color | \nvar(--van-gray-4) | \n- | \n
\u5728 .vue \u6587\u4EF6\u4E2D\u901A\u8FC7\u76F8\u5BF9\u8DEF\u5F84\u5F15\u7528\u672C\u5730\u56FE\u7247\u65F6\uFF0C\u9700\u8981\u5728\u56FE\u7247\u7684\u94FE\u63A5\u5916\u5305\u4E0A\u4E00\u5C42 require()
\uFF0C\u5C06\u56FE\u7247 URL \u8F6C\u6362\u4E3A webpack \u6A21\u5757\u8BF7\u6C42\uFF0C\u5E76\u7ED3\u5408 file-loader \u6216\u8005 url-loader \u8FDB\u884C\u5904\u7406\u3002
<!-- \u9519\u8BEF\u5199\u6CD5 -->\n<van-image src="./image.png" />\n\n<!-- \u6B63\u786E\u5199\u6CD5 -->\n<van-image :src="require('./image.png')" />\n
\n\n\n\u5BF9\u6B64\u66F4\u8BE6\u7EC6\u7684\u89E3\u91CA\u53EF\u4EE5\u53C2\u8003 vue-loader \u7684\u5904\u7406\u8D44\u6E90\u8DEF\u5F84\u7AE0\u8282\u3002
\n
\u4F7F\u7528 Image \u7EC4\u4EF6\u65F6\uFF0C\u53EF\u80FD\u4F1A\u9047\u5230\u5C06 <image> \u4F5C\u4E3A\u6807\u7B7E\u540D\u65F6\u65E0\u6CD5\u6E32\u67D3\u7684\u95EE\u9898\uFF0C\u6BD4\u5982\u4E0B\u9762\u7684\u5199\u6CD5\uFF1A
\n<template>\n <image src="xxx" />\n</template>\n\n<script>\nimport { Image } from 'vant';\n\nexport default {\n components: {\n Image,\n },\n};\n<script>\n
\n\u8FD9\u662F\u56E0\u4E3A <image> \u6807\u7B7E\u662F\u539F\u751F\u7684 SVG \u6807\u7B7E\uFF0CVue \u4E0D\u5141\u8BB8\u5C06\u539F\u751F\u6807\u7B7E\u540D\u6CE8\u518C\u4E3A\u7EC4\u4EF6\u540D\uFF0C\u4F7F\u7528 <van-image> \u5373\u53EF\u89C4\u907F\u8FD9\u4E2A\u95EE\u9898\u3002
\n\u589E\u5F3A\u7248\u7684 img \u6807\u7B7E\uFF0C\u63D0\u4F9B\u591A\u79CD\u56FE\u7247\u586B\u5145\u6A21\u5F0F\uFF0C\u652F\u6301\u56FE\u7247\u61D2\u52A0\u8F7D\u3001\u52A0\u8F7D\u4E2D\u63D0\u793A\u3001\u52A0\u8F7D\u5931\u8D25\u63D0\u793A\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Image as VanImage } from 'vant';\n\nconst app = createApp();\napp.use(VanImage);\n
\n\u57FA\u7840\u7528\u6CD5\u4E0E\u539F\u751F img
\u6807\u7B7E\u4E00\u81F4\uFF0C\u53EF\u4EE5\u8BBE\u7F6E src
\u3001width
\u3001height
\u3001alt
\u7B49\u539F\u751F\u5C5E\u6027\u3002
<van-image\n width="100"\n height="100"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"\n/>\n
\n\u901A\u8FC7 fit
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u56FE\u7247\u586B\u5145\u6A21\u5F0F\uFF0C\u7B49\u540C\u4E8E\u539F\u751F\u7684 object-fit \u5C5E\u6027\uFF0C\u53EF\u9009\u503C\u89C1\u4E0B\u65B9\u8868\u683C\u3002
<van-image\n width="10rem"\n height="10rem"\n fit="contain"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"\n/>\n
\n\u901A\u8FC7 position
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u56FE\u7247\u4F4D\u7F6E\uFF0C\u7ED3\u5408 fit
\u5C5E\u6027\u4F7F\u7528\uFF0C\u7B49\u540C\u4E8E\u539F\u751F\u7684 object-position \u5C5E\u6027\u3002
<van-image\n width="10rem"\n height="10rem"\n fit="cover"\n position="left"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"\n/>\n
\n\u901A\u8FC7 round
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u56FE\u7247\u53D8\u5706\uFF0C\u6CE8\u610F\u5F53\u56FE\u7247\u5BBD\u9AD8\u4E0D\u76F8\u7B49\u4E14 fit
\u4E3A contain
\u6216 scale-down
\u65F6\uFF0C\u5C06\u65E0\u6CD5\u586B\u5145\u4E00\u4E2A\u5B8C\u6574\u7684\u5706\u5F62\u3002
<van-image\n round\n width="10rem"\n height="10rem"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"\n/>\n
\n\u8BBE\u7F6E lazy-load
\u5C5E\u6027\u6765\u5F00\u542F\u56FE\u7247\u61D2\u52A0\u8F7D\uFF0C\u9700\u8981\u642D\u914D Lazyload \u7EC4\u4EF6\u4F7F\u7528\u3002
<van-image\n width="100"\n height="100"\n lazy-load\n src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"\n/>\n
\nimport { createApp } from 'vue';\nimport { Lazyload } from 'vant';\n\nconst app = createApp();\napp.use(Lazyload);\n
\nImage
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u9ED8\u8BA4\u7684\u52A0\u8F7D\u4E2D\u63D0\u793A\uFF0C\u652F\u6301\u901A\u8FC7 loading
\u63D2\u69FD\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002
<van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg">\n <template v-slot:loading>\n <van-loading type="spinner" size="20" />\n </template>\n</van-image>\n
\nImage
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u9ED8\u8BA4\u7684\u52A0\u8F7D\u5931\u8D25\u63D0\u793A\uFF0C\u652F\u6301\u901A\u8FC7 error
\u63D2\u69FD\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002
<van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg">\n <template v-slot:error>\u52A0\u8F7D\u5931\u8D25</template>\n</van-image>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
src | \n\u56FE\u7247\u94FE\u63A5 | \nstring | \n- | \n
fit | \n\u56FE\u7247\u586B\u5145\u6A21\u5F0F\uFF0C\u7B49\u540C\u4E8E\u539F\u751F\u7684 object-fit \u5C5E\u6027 | \nstring | \nfill | \n
position | \n\u56FE\u7247\u4F4D\u7F6E\uFF0C\u7B49\u540C\u4E8E\u539F\u751F\u7684 object-position \u5C5E\u6027\uFF0C\u53EF\u9009\u503C\u4E3A top right bottom left \u6216 string | \nstring | \ncenter | \n
alt | \n\u66FF\u4EE3\u6587\u672C | \nstring | \n- | \n
width | \n\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n- | \n
height | \n\u9AD8\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n- | \n
radius | \n\u5706\u89D2\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n0 | \n
round | \n\u662F\u5426\u663E\u793A\u4E3A\u5706\u5F62 | \nboolean | \nfalse | \n
block 3.6.3 | \n\u662F\u5426\u5C06\u6839\u8282\u70B9\u8BBE\u7F6E\u4E3A\u5757\u7EA7\u5143\u7D20\uFF0C\u9ED8\u8BA4\u60C5\u51B5\u4E0B\u4E3A inline-block \u5143\u7D20 | \nboolean | \nfalse | \n
lazy-load | \n\u662F\u5426\u5F00\u542F\u56FE\u7247\u61D2\u52A0\u8F7D\uFF0C\u987B\u914D\u5408 Lazyload \u7EC4\u4EF6\u4F7F\u7528 | \nboolean | \nfalse | \n
show-error | \n\u662F\u5426\u5C55\u793A\u56FE\u7247\u52A0\u8F7D\u5931\u8D25\u63D0\u793A | \nboolean | \ntrue | \n
show-loading | \n\u662F\u5426\u5C55\u793A\u56FE\u7247\u52A0\u8F7D\u4E2D\u63D0\u793A | \nboolean | \ntrue | \n
error-icon | \n\u5931\u8D25\u65F6\u63D0\u793A\u7684\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \nphoto-fail | \n
loading-icon | \n\u52A0\u8F7D\u65F6\u63D0\u793A\u7684\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \nphoto | \n
icon-size | \n\u52A0\u8F7D\u56FE\u6807\u548C\u5931\u8D25\u56FE\u6807\u7684\u5927\u5C0F | \nnumber | string | \n32px | \n
icon-prefix | \n\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 | \nstring | \nvan-icon | \n
\u540D\u79F0 | \n\u542B\u4E49 | \n
---|---|
contain | \n\u4FDD\u6301\u5BBD\u9AD8\u7F29\u653E\u56FE\u7247\uFF0C\u4F7F\u56FE\u7247\u7684\u957F\u8FB9\u80FD\u5B8C\u5168\u663E\u793A\u51FA\u6765 | \n
cover | \n\u4FDD\u6301\u5BBD\u9AD8\u7F29\u653E\u56FE\u7247\uFF0C\u4F7F\u56FE\u7247\u7684\u77ED\u8FB9\u80FD\u5B8C\u5168\u663E\u793A\u51FA\u6765\uFF0C\u88C1\u526A\u957F\u8FB9 | \n
fill | \n\u62C9\u4F38\u56FE\u7247\uFF0C\u4F7F\u56FE\u7247\u586B\u6EE1\u5143\u7D20 | \n
none | \n\u4FDD\u6301\u56FE\u7247\u539F\u6709\u5C3A\u5BF8 | \n
scale-down | \n\u53D6 none \u6216 contain \u4E2D\u8F83\u5C0F\u7684\u4E00\u4E2A | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u56FE\u7247\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
load | \n\u56FE\u7247\u52A0\u8F7D\u5B8C\u6BD5\u65F6\u89E6\u53D1 | \nevent: Event | \n
error | \n\u56FE\u7247\u52A0\u8F7D\u5931\u8D25\u65F6\u89E6\u53D1 | \n- | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u81EA\u5B9A\u4E49\u56FE\u7247\u4E0B\u65B9\u7684\u5185\u5BB9 | \n
loading | \n\u81EA\u5B9A\u4E49\u52A0\u8F7D\u4E2D\u7684\u63D0\u793A\u5185\u5BB9 | \n
error | \n\u81EA\u5B9A\u4E49\u52A0\u8F7D\u5931\u8D25\u65F6\u7684\u63D0\u793A\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { ImageFit, ImagePosition, ImageProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-image-placeholder-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-image-placeholder-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-image-placeholder-background | \nvar(--van-background) | \n- | \n
--van-image-loading-icon-size | \n32px | \n- | \n
--van-image-loading-icon-color | \nvar(--van-gray-4) | \n- | \n
--van-image-error-icon-size | \n32px | \n- | \n
--van-image-error-icon-color | \nvar(--van-gray-4) | \n- | \n
\u5728 .vue \u6587\u4EF6\u4E2D\u901A\u8FC7\u76F8\u5BF9\u8DEF\u5F84\u5F15\u7528\u672C\u5730\u56FE\u7247\u65F6\uFF0C\u9700\u8981\u5728\u56FE\u7247\u7684\u94FE\u63A5\u5916\u5305\u4E0A\u4E00\u5C42 require()
\uFF0C\u5C06\u56FE\u7247 URL \u8F6C\u6362\u4E3A webpack \u6A21\u5757\u8BF7\u6C42\uFF0C\u5E76\u7ED3\u5408 file-loader \u6216\u8005 url-loader \u8FDB\u884C\u5904\u7406\u3002
<!-- \u9519\u8BEF\u5199\u6CD5 -->\n<van-image src="./image.png" />\n\n<!-- \u6B63\u786E\u5199\u6CD5 -->\n<van-image :src="require('./image.png')" />\n
\n\n\n\u5BF9\u6B64\u66F4\u8BE6\u7EC6\u7684\u89E3\u91CA\u53EF\u4EE5\u53C2\u8003 vue-loader \u7684\u5904\u7406\u8D44\u6E90\u8DEF\u5F84\u7AE0\u8282\u3002
\n
\u4F7F\u7528 Image \u7EC4\u4EF6\u65F6\uFF0C\u53EF\u80FD\u4F1A\u9047\u5230\u5C06 <image> \u4F5C\u4E3A\u6807\u7B7E\u540D\u65F6\u65E0\u6CD5\u6E32\u67D3\u7684\u95EE\u9898\uFF0C\u6BD4\u5982\u4E0B\u9762\u7684\u5199\u6CD5\uFF1A
\n<template>\n <image src="xxx" />\n</template>\n\n<script>\nimport { Image } from 'vant';\n\nexport default {\n components: {\n Image,\n },\n};\n<script>\n
\n\u8FD9\u662F\u56E0\u4E3A <image> \u6807\u7B7E\u662F\u539F\u751F\u7684 SVG \u6807\u7B7E\uFF0CVue \u4E0D\u5141\u8BB8\u5C06\u539F\u751F\u6807\u7B7E\u540D\u6CE8\u518C\u4E3A\u7EC4\u4EF6\u540D\uFF0C\u4F7F\u7528 <van-image> \u5373\u53EF\u89C4\u907F\u8FD9\u4E2A\u95EE\u9898\u3002
\nUsed to indicate the transition state during loading.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Loading } from 'vant';\n\nconst app = createApp();\napp.use(Loading);\n
\n<van-loading />\n\n<van-loading type="spinner" />\n
\n<van-loading color="#1989fa" />\n\n<van-loading type="spinner" color="#1989fa" />\n
\n<van-loading size="24" />\n\n<van-loading type="spinner" size="24px" />\n
\n<van-loading size="24px">Loading...</van-loading>\n
\n<van-loading size="24px" vertical>Loading...</van-loading>\n
\nuse color
or text-color
to change text color.
<!-- the color of text and icon will be changed -->\n<van-loading color="#0094ff" />\n\n<!-- only change text color -->\n<van-loading text-color="#0094ff" />\n
\nUse icon
slot to custom icon.
<van-loading vertical>\n <template #icon>\n <van-icon name="star-o" size="30" />\n </template>\n Loading...\n</van-loading>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
color | \nLoading color | \nstring | \n#c9c9c9 | \n
type | \nCan be set to spinner | \nstring | \ncircular | \n
size | \nIcon size | \nnumber | string | \n30px | \n
text-size | \nText font size | \nnumber | string | \n14px | \n
text-color | \nText color | \nstring | \n#c9c9c9 | \n
vertical | \nWhether to arrange icons and text content vertically | \nboolean | \nfalse | \n
Name | \nDescription | \n
---|---|
default | \nLoading text | \n
icon | \nCustom loading icon | \n
The component exports the following type definitions:
\nimport type { LoadingType, LoadingProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-loading-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-loading-text-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-loading-spinner-color | \nvar(--van-gray-5) | \n- | \n
--van-loading-spinner-size | \n30px | \n- | \n
--van-loading-spinner-duration | \n0.8s | \n- | \n
Used to indicate the transition state during loading.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Loading } from 'vant';\n\nconst app = createApp();\napp.use(Loading);\n
\n<van-loading />\n\n<van-loading type="spinner" />\n
\n<van-loading color="#1989fa" />\n\n<van-loading type="spinner" color="#1989fa" />\n
\n<van-loading size="24" />\n\n<van-loading type="spinner" size="24px" />\n
\n<van-loading size="24px">Loading...</van-loading>\n
\n<van-loading size="24px" vertical>Loading...</van-loading>\n
\nuse color
or text-color
to change text color.
<!-- the color of text and icon will be changed -->\n<van-loading color="#0094ff" />\n\n<!-- only change text color -->\n<van-loading text-color="#0094ff" />\n
\nUse icon
slot to custom icon.
<van-loading vertical>\n <template #icon>\n <van-icon name="star-o" size="30" />\n </template>\n Loading...\n</van-loading>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
color | \nLoading color | \nstring | \n#c9c9c9 | \n
type | \nCan be set to spinner | \nstring | \ncircular | \n
size | \nIcon size | \nnumber | string | \n30px | \n
text-size | \nText font size | \nnumber | string | \n14px | \n
text-color | \nText color | \nstring | \n#c9c9c9 | \n
vertical | \nWhether to arrange icons and text content vertically | \nboolean | \nfalse | \n
Name | \nDescription | \n
---|---|
default | \nLoading text | \n
icon | \nCustom loading icon | \n
The component exports the following type definitions:
\nimport type { LoadingType, LoadingProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-loading-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-loading-text-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-loading-spinner-color | \nvar(--van-gray-5) | \n- | \n
--van-loading-spinner-size | \n30px | \n- | \n
--van-loading-spinner-duration | \n0.8s | \n- | \n
\u7528\u4E8E\u641C\u7D22\u573A\u666F\u7684\u8F93\u5165\u6846\u7EC4\u4EF6\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Search } from 'vant';\n\nconst app = createApp();\napp.use(Search);\n
\nv-model
\u7528\u4E8E\u63A7\u5236\u641C\u7D22\u6846\u4E2D\u7684\u6587\u5B57\uFF0Cbackground
\u53EF\u4EE5\u81EA\u5B9A\u4E49\u641C\u7D22\u6846\u5916\u90E8\u80CC\u666F\u8272\u3002
<van-search v-model="value" placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref('');\n return { value };\n },\n};\n
\nSearch \u7EC4\u4EF6\u63D0\u4F9B\u4E86 search
\u548C cancel
\u4E8B\u4EF6\uFF0Csearch
\u4E8B\u4EF6\u5728\u70B9\u51FB\u952E\u76D8\u4E0A\u7684\u641C\u7D22/\u56DE\u8F66\u6309\u94AE\u540E\u89E6\u53D1\uFF0Ccancel
\u4E8B\u4EF6\u5728\u70B9\u51FB\u641C\u7D22\u6846\u53F3\u4FA7\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1\u3002
<form action="/">\n <van-search\n v-model="value"\n show-action\n placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"\n @search="onSearch"\n @cancel="onCancel"\n />\n</form>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const value = ref('');\n const onSearch = (val) => showToast(val);\n const onCancel = () => showToast('\u53D6\u6D88');\n return {\n value,\n onSearch,\n onCancel,\n };\n },\n};\n
\n\n\nTips: \u5728 van-search \u5916\u5C42\u589E\u52A0 form \u6807\u7B7E\uFF0C\u4E14 action \u4E0D\u4E3A\u7A7A\uFF0C\u5373\u53EF\u5728 iOS \u8F93\u5165\u6CD5\u4E2D\u663E\u793A\u641C\u7D22\u6309\u94AE\u3002
\n
\u901A\u8FC7 input-align
\u5C5E\u6027\u8BBE\u7F6E\u641C\u7D22\u6846\u5185\u5BB9\u7684\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center
\u3001right
\u3002
<van-search\n v-model="value"\n placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"\n input-align="center"\n/>\n
\n\u901A\u8FC7 disabled
\u5C5E\u6027\u7981\u7528\u641C\u7D22\u6846\u3002
<van-search v-model="value" disabled placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD" />\n
\n\u901A\u8FC7 background
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u641C\u7D22\u6846\u5916\u90E8\u7684\u80CC\u666F\u8272\uFF0C\u901A\u8FC7 shape
\u5C5E\u6027\u8BBE\u7F6E\u641C\u7D22\u6846\u7684\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A round
\u3002
<van-search\n v-model="value"\n shape="round"\n background="#4fc08d"\n placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"\n/>\n
\n\u4F7F\u7528 action
\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u53F3\u4FA7\u6309\u94AE\u7684\u5185\u5BB9\u3002\u4F7F\u7528\u63D2\u69FD\u540E\uFF0Ccancel
\u4E8B\u4EF6\u5C06\u4E0D\u518D\u89E6\u53D1\u3002
<van-search\n v-model="value"\n show-action\n label="\u5730\u5740"\n placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"\n @search="onSearch"\n>\n <template #action>\n <div @click="onClickButton">\u641C\u7D22</div>\n </template>\n</van-search>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const value = ref('');\n const onSearch = (val) => showToast(val);\n const onClickButton = () => showToast(value.value);\n return {\n value,\n onSearch,\n onClickButton,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u8F93\u5165\u7684\u503C | \nnumber | string | \n- | \n
label | \n\u641C\u7D22\u6846\u5DE6\u4FA7\u6587\u672C | \nstring | \n- | \n
name | \n\u540D\u79F0\uFF0C\u4F5C\u4E3A\u63D0\u4EA4\u8868\u5355\u65F6\u7684\u6807\u8BC6\u7B26 | \nstring | \n- | \n
shape | \n\u641C\u7D22\u6846\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A round | \nstring | \nsquare | \n
id | \n\u641C\u7D22\u6846 id\uFF0C\u540C\u65F6\u4F1A\u8BBE\u7F6E label \u7684 for \u5C5E\u6027 | \nstring | \nvan-search-n-input | \n
background | \n\u641C\u7D22\u6846\u5916\u90E8\u80CC\u666F\u8272 | \nstring | \n#f2f2f2 | \n
maxlength | \n\u8F93\u5165\u7684\u6700\u5927\u5B57\u7B26\u6570 | \nnumber | string | \n- | \n
placeholder | \n\u5360\u4F4D\u63D0\u793A\u6587\u5B57 | \nstring | \n- | \n
clearable | \n\u662F\u5426\u542F\u7528\u6E05\u9664\u56FE\u6807\uFF0C\u70B9\u51FB\u6E05\u9664\u56FE\u6807\u540E\u4F1A\u6E05\u7A7A\u8F93\u5165\u6846 | \nboolean | \ntrue | \n
clear-icon | \n\u6E05\u9664\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \nclear | \n
clear-trigger | \n\u663E\u793A\u6E05\u9664\u56FE\u6807\u7684\u65F6\u673A\uFF0Calways \u8868\u793A\u8F93\u5165\u6846\u4E0D\u4E3A\u7A7A\u65F6\u5C55\u793A\uFF0Cfocus \u8868\u793A\u8F93\u5165\u6846\u805A\u7126\u4E14\u4E0D\u4E3A\u7A7A\u65F6\u5C55\u793A | \nstring | \nfocus | \n
autofocus | \n\u662F\u5426\u81EA\u52A8\u805A\u7126\uFF0CiOS \u7CFB\u7EDF\u4E0D\u652F\u6301\u8BE5\u5C5E\u6027 | \nboolean | \nfalse | \n
show-action | \n\u662F\u5426\u5728\u641C\u7D22\u6846\u53F3\u4FA7\u663E\u793A\u53D6\u6D88\u6309\u94AE | \nboolean | \nfalse | \n
action-text | \n\u53D6\u6D88\u6309\u94AE\u6587\u5B57 | \nstring | \n\u53D6\u6D88 | \n
disabled | \n\u662F\u5426\u7981\u7528\u8F93\u5165\u6846 | \nboolean | \nfalse | \n
readonly | \n\u662F\u5426\u5C06\u8F93\u5165\u6846\u8BBE\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u53EA\u8BFB\u72B6\u6001\u4E0B\u65E0\u6CD5\u8F93\u5165\u5185\u5BB9 | \nboolean | \nfalse | \n
error | \n\u662F\u5426\u5C06\u8F93\u5165\u5185\u5BB9\u6807\u7EA2 | \nboolean | \nfalse | \n
error-message | \n\u5E95\u90E8\u9519\u8BEF\u63D0\u793A\u6587\u6848\uFF0C\u4E3A\u7A7A\u65F6\u4E0D\u5C55\u793A | \nstring | \n- | \n
formatter | \n\u8F93\u5165\u5185\u5BB9\u683C\u5F0F\u5316\u51FD\u6570 | \n(val: string) => string | \n- | \n
format-trigger | \n\u683C\u5F0F\u5316\u51FD\u6570\u89E6\u53D1\u7684\u65F6\u673A\uFF0C\u53EF\u9009\u503C\u4E3A onBlur | \nstring | \nonChange | \n
input-align | \n\u8F93\u5165\u6846\u5185\u5BB9\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center right | \nstring | \nleft | \n
left-icon | \n\u8F93\u5165\u6846\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \nsearch | \n
right-icon | \n\u8F93\u5165\u6846\u53F3\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n- | \n
autocomplete | \ninput \u6807\u7B7E\u539F\u751F\u7684\u81EA\u52A8\u5B8C\u6210\u5C5E\u6027 | \nstring | \n- | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
search | \n\u786E\u5B9A\u641C\u7D22\u65F6\u89E6\u53D1 | \nvalue: string (\u5F53\u524D\u8F93\u5165\u7684\u503C) | \n
update:model-value | \n\u8F93\u5165\u6846\u5185\u5BB9\u53D8\u5316\u65F6\u89E6\u53D1 | \nvalue: string (\u5F53\u524D\u8F93\u5165\u7684\u503C) | \n
focus | \n\u8F93\u5165\u6846\u83B7\u5F97\u7126\u70B9\u65F6\u89E6\u53D1 | \nevent: Event | \n
blur | \n\u8F93\u5165\u6846\u5931\u53BB\u7126\u70B9\u65F6\u89E6\u53D1 | \nevent: Event | \n
click-input | \n\u70B9\u51FB\u8F93\u5165\u533A\u57DF\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
click-left-icon | \n\u70B9\u51FB\u5DE6\u4FA7\u56FE\u6807\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
click-right-icon 3.4.0 | \n\u70B9\u51FB\u53F3\u4FA7\u56FE\u6807\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
clear | \n\u70B9\u51FB\u6E05\u9664\u6309\u94AE\u540E\u89E6\u53D1 | \nevent: MouseEvent | \n
cancel | \n\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1 | \n- | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Search \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
focus | \n\u83B7\u53D6\u8F93\u5165\u6846\u7126\u70B9 | \n- | \n- | \n
blur | \n\u53D6\u6D88\u8F93\u5165\u6846\u7126\u70B9 | \n- | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { SearchProps, SearchShape, SearchInstance } from 'vant';\n
\nSearchInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { SearchInstance } from 'vant';\n\nconst searchRef = ref<SearchInstance>();\n\nsearchRef.value?.focus();\n
\n\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
left | \n\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u5185\u5BB9\uFF08\u641C\u7D22\u6846\u5916\uFF09 | \n
action | \n\u81EA\u5B9A\u4E49\u53F3\u4FA7\u5185\u5BB9\uFF08\u641C\u7D22\u6846\u5916\uFF09\uFF0C\u8BBE\u7F6E show-action \u5C5E\u6027\u540E\u5C55\u793A | \n
label | \n\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u6587\u672C\uFF08\u641C\u7D22\u6846\u5185\uFF09 | \n
left-icon | \n\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u56FE\u6807\uFF08\u641C\u7D22\u6846\u5185\uFF09 | \n
right-icon | \n\u81EA\u5B9A\u4E49\u53F3\u4FA7\u56FE\u6807\uFF08\u641C\u7D22\u6846\u5185\uFF09 | \n
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-search-padding | \n10px var(--van-padding-sm) | \n- | \n
--van-search-background | \nvar(--van-background-2) | \n- | \n
--van-search-content-background | \nvar(--van-gray-1) | \n- | \n
--van-search-input-height | \n34px | \n- | \n
--van-search-label-padding | \n0 5px | \n- | \n
--van-search-label-color | \nvar(--van-text-color) | \n- | \n
--van-search-label-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-search-left-icon-color | \nvar(--van-gray-6) | \n- | \n
--van-search-action-padding | \n0 var(--van-padding-xs) | \n- | \n
--van-search-action-text-color | \nvar(--van-text-color) | \n- | \n
--van-search-action-font-size | \nvar(--van-font-size-md) | \n- | \n
\u6E05\u9664\u6309\u94AE\u76D1\u542C\u662F\u7684\u79FB\u52A8\u7AEF Touch \u4E8B\u4EF6\uFF0C\u53C2\u89C1\u684C\u9762\u7AEF\u9002\u914D\u3002
\n\u7528\u4E8E\u641C\u7D22\u573A\u666F\u7684\u8F93\u5165\u6846\u7EC4\u4EF6\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Search } from 'vant';\n\nconst app = createApp();\napp.use(Search);\n
\nv-model
\u7528\u4E8E\u63A7\u5236\u641C\u7D22\u6846\u4E2D\u7684\u6587\u5B57\uFF0Cbackground
\u53EF\u4EE5\u81EA\u5B9A\u4E49\u641C\u7D22\u6846\u5916\u90E8\u80CC\u666F\u8272\u3002
<van-search v-model="value" placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref('');\n return { value };\n },\n};\n
\nSearch \u7EC4\u4EF6\u63D0\u4F9B\u4E86 search
\u548C cancel
\u4E8B\u4EF6\uFF0Csearch
\u4E8B\u4EF6\u5728\u70B9\u51FB\u952E\u76D8\u4E0A\u7684\u641C\u7D22/\u56DE\u8F66\u6309\u94AE\u540E\u89E6\u53D1\uFF0Ccancel
\u4E8B\u4EF6\u5728\u70B9\u51FB\u641C\u7D22\u6846\u53F3\u4FA7\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1\u3002
<form action="/">\n <van-search\n v-model="value"\n show-action\n placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"\n @search="onSearch"\n @cancel="onCancel"\n />\n</form>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const value = ref('');\n const onSearch = (val) => showToast(val);\n const onCancel = () => showToast('\u53D6\u6D88');\n return {\n value,\n onSearch,\n onCancel,\n };\n },\n};\n
\n\n\nTips: \u5728 van-search \u5916\u5C42\u589E\u52A0 form \u6807\u7B7E\uFF0C\u4E14 action \u4E0D\u4E3A\u7A7A\uFF0C\u5373\u53EF\u5728 iOS \u8F93\u5165\u6CD5\u4E2D\u663E\u793A\u641C\u7D22\u6309\u94AE\u3002
\n
\u901A\u8FC7 input-align
\u5C5E\u6027\u8BBE\u7F6E\u641C\u7D22\u6846\u5185\u5BB9\u7684\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center
\u3001right
\u3002
<van-search\n v-model="value"\n placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"\n input-align="center"\n/>\n
\n\u901A\u8FC7 disabled
\u5C5E\u6027\u7981\u7528\u641C\u7D22\u6846\u3002
<van-search v-model="value" disabled placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD" />\n
\n\u901A\u8FC7 background
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u641C\u7D22\u6846\u5916\u90E8\u7684\u80CC\u666F\u8272\uFF0C\u901A\u8FC7 shape
\u5C5E\u6027\u8BBE\u7F6E\u641C\u7D22\u6846\u7684\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A round
\u3002
<van-search\n v-model="value"\n shape="round"\n background="#4fc08d"\n placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"\n/>\n
\n\u4F7F\u7528 action
\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u53F3\u4FA7\u6309\u94AE\u7684\u5185\u5BB9\u3002\u4F7F\u7528\u63D2\u69FD\u540E\uFF0Ccancel
\u4E8B\u4EF6\u5C06\u4E0D\u518D\u89E6\u53D1\u3002
<van-search\n v-model="value"\n show-action\n label="\u5730\u5740"\n placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"\n @search="onSearch"\n>\n <template #action>\n <div @click="onClickButton">\u641C\u7D22</div>\n </template>\n</van-search>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const value = ref('');\n const onSearch = (val) => showToast(val);\n const onClickButton = () => showToast(value.value);\n return {\n value,\n onSearch,\n onClickButton,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u8F93\u5165\u7684\u503C | \nnumber | string | \n- | \n
label | \n\u641C\u7D22\u6846\u5DE6\u4FA7\u6587\u672C | \nstring | \n- | \n
name | \n\u540D\u79F0\uFF0C\u4F5C\u4E3A\u63D0\u4EA4\u8868\u5355\u65F6\u7684\u6807\u8BC6\u7B26 | \nstring | \n- | \n
shape | \n\u641C\u7D22\u6846\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A round | \nstring | \nsquare | \n
id | \n\u641C\u7D22\u6846 id\uFF0C\u540C\u65F6\u4F1A\u8BBE\u7F6E label \u7684 for \u5C5E\u6027 | \nstring | \nvan-search-n-input | \n
background | \n\u641C\u7D22\u6846\u5916\u90E8\u80CC\u666F\u8272 | \nstring | \n#f2f2f2 | \n
maxlength | \n\u8F93\u5165\u7684\u6700\u5927\u5B57\u7B26\u6570 | \nnumber | string | \n- | \n
placeholder | \n\u5360\u4F4D\u63D0\u793A\u6587\u5B57 | \nstring | \n- | \n
clearable | \n\u662F\u5426\u542F\u7528\u6E05\u9664\u56FE\u6807\uFF0C\u70B9\u51FB\u6E05\u9664\u56FE\u6807\u540E\u4F1A\u6E05\u7A7A\u8F93\u5165\u6846 | \nboolean | \ntrue | \n
clear-icon | \n\u6E05\u9664\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \nclear | \n
clear-trigger | \n\u663E\u793A\u6E05\u9664\u56FE\u6807\u7684\u65F6\u673A\uFF0Calways \u8868\u793A\u8F93\u5165\u6846\u4E0D\u4E3A\u7A7A\u65F6\u5C55\u793A\uFF0Cfocus \u8868\u793A\u8F93\u5165\u6846\u805A\u7126\u4E14\u4E0D\u4E3A\u7A7A\u65F6\u5C55\u793A | \nstring | \nfocus | \n
autofocus | \n\u662F\u5426\u81EA\u52A8\u805A\u7126\uFF0CiOS \u7CFB\u7EDF\u4E0D\u652F\u6301\u8BE5\u5C5E\u6027 | \nboolean | \nfalse | \n
show-action | \n\u662F\u5426\u5728\u641C\u7D22\u6846\u53F3\u4FA7\u663E\u793A\u53D6\u6D88\u6309\u94AE | \nboolean | \nfalse | \n
action-text | \n\u53D6\u6D88\u6309\u94AE\u6587\u5B57 | \nstring | \n\u53D6\u6D88 | \n
disabled | \n\u662F\u5426\u7981\u7528\u8F93\u5165\u6846 | \nboolean | \nfalse | \n
readonly | \n\u662F\u5426\u5C06\u8F93\u5165\u6846\u8BBE\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u53EA\u8BFB\u72B6\u6001\u4E0B\u65E0\u6CD5\u8F93\u5165\u5185\u5BB9 | \nboolean | \nfalse | \n
error | \n\u662F\u5426\u5C06\u8F93\u5165\u5185\u5BB9\u6807\u7EA2 | \nboolean | \nfalse | \n
error-message | \n\u5E95\u90E8\u9519\u8BEF\u63D0\u793A\u6587\u6848\uFF0C\u4E3A\u7A7A\u65F6\u4E0D\u5C55\u793A | \nstring | \n- | \n
formatter | \n\u8F93\u5165\u5185\u5BB9\u683C\u5F0F\u5316\u51FD\u6570 | \n(val: string) => string | \n- | \n
format-trigger | \n\u683C\u5F0F\u5316\u51FD\u6570\u89E6\u53D1\u7684\u65F6\u673A\uFF0C\u53EF\u9009\u503C\u4E3A onBlur | \nstring | \nonChange | \n
input-align | \n\u8F93\u5165\u6846\u5185\u5BB9\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center right | \nstring | \nleft | \n
left-icon | \n\u8F93\u5165\u6846\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \nsearch | \n
right-icon | \n\u8F93\u5165\u6846\u53F3\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n- | \n
autocomplete | \ninput \u6807\u7B7E\u539F\u751F\u7684\u81EA\u52A8\u5B8C\u6210\u5C5E\u6027 | \nstring | \n- | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
search | \n\u786E\u5B9A\u641C\u7D22\u65F6\u89E6\u53D1 | \nvalue: string (\u5F53\u524D\u8F93\u5165\u7684\u503C) | \n
update:model-value | \n\u8F93\u5165\u6846\u5185\u5BB9\u53D8\u5316\u65F6\u89E6\u53D1 | \nvalue: string (\u5F53\u524D\u8F93\u5165\u7684\u503C) | \n
focus | \n\u8F93\u5165\u6846\u83B7\u5F97\u7126\u70B9\u65F6\u89E6\u53D1 | \nevent: Event | \n
blur | \n\u8F93\u5165\u6846\u5931\u53BB\u7126\u70B9\u65F6\u89E6\u53D1 | \nevent: Event | \n
click-input | \n\u70B9\u51FB\u8F93\u5165\u533A\u57DF\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
click-left-icon | \n\u70B9\u51FB\u5DE6\u4FA7\u56FE\u6807\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
click-right-icon 3.4.0 | \n\u70B9\u51FB\u53F3\u4FA7\u56FE\u6807\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
clear | \n\u70B9\u51FB\u6E05\u9664\u6309\u94AE\u540E\u89E6\u53D1 | \nevent: MouseEvent | \n
cancel | \n\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1 | \n- | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Search \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
focus | \n\u83B7\u53D6\u8F93\u5165\u6846\u7126\u70B9 | \n- | \n- | \n
blur | \n\u53D6\u6D88\u8F93\u5165\u6846\u7126\u70B9 | \n- | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { SearchProps, SearchShape, SearchInstance } from 'vant';\n
\nSearchInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { SearchInstance } from 'vant';\n\nconst searchRef = ref<SearchInstance>();\n\nsearchRef.value?.focus();\n
\n\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
left | \n\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u5185\u5BB9\uFF08\u641C\u7D22\u6846\u5916\uFF09 | \n
action | \n\u81EA\u5B9A\u4E49\u53F3\u4FA7\u5185\u5BB9\uFF08\u641C\u7D22\u6846\u5916\uFF09\uFF0C\u8BBE\u7F6E show-action \u5C5E\u6027\u540E\u5C55\u793A | \n
label | \n\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u6587\u672C\uFF08\u641C\u7D22\u6846\u5185\uFF09 | \n
left-icon | \n\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u56FE\u6807\uFF08\u641C\u7D22\u6846\u5185\uFF09 | \n
right-icon | \n\u81EA\u5B9A\u4E49\u53F3\u4FA7\u56FE\u6807\uFF08\u641C\u7D22\u6846\u5185\uFF09 | \n
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-search-padding | \n10px var(--van-padding-sm) | \n- | \n
--van-search-background | \nvar(--van-background-2) | \n- | \n
--van-search-content-background | \nvar(--van-gray-1) | \n- | \n
--van-search-input-height | \n34px | \n- | \n
--van-search-label-padding | \n0 5px | \n- | \n
--van-search-label-color | \nvar(--van-text-color) | \n- | \n
--van-search-label-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-search-left-icon-color | \nvar(--van-gray-6) | \n- | \n
--van-search-action-padding | \n0 var(--van-padding-xs) | \n- | \n
--van-search-action-text-color | \nvar(--van-text-color) | \n- | \n
--van-search-action-font-size | \nvar(--van-font-size-md) | \n- | \n
\u6E05\u9664\u6309\u94AE\u76D1\u542C\u662F\u7684\u79FB\u52A8\u7AEF Touch \u4E8B\u4EF6\uFF0C\u53C2\u89C1\u684C\u9762\u7AEF\u9002\u914D\u3002
\n\u7528\u4E8E\u7B7E\u540D\u573A\u666F\u7684\u7EC4\u4EF6\uFF0C\u57FA\u4E8E Canvas \u5B9E\u73B0\u3002\u8BF7\u5347\u7EA7 vant
\u5230 >= 4.3.0 \u7248\u672C\u6765\u4F7F\u7528\u8BE5\u7EC4\u4EF6\u3002
\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Signature } from 'vant';\n\nconst app = createApp();\napp.use(Signature);\n
\n\u5F53\u70B9\u51FB\u786E\u8BA4\u6309\u94AE\u65F6\uFF0C\u7EC4\u4EF6\u4F1A\u89E6\u53D1 submit
\u4E8B\u4EF6\uFF0C\u4E8B\u4EF6\u7684\u7B2C\u4E00\u4E2A\u53C2\u6570\u4E3A data
\uFF0C\u5305\u542B\u4EE5\u4E0B\u5B57\u6BB5\uFF1A
image
\uFF1A\u7B7E\u540D\u5BF9\u5E94\u7684\u56FE\u7247\uFF0C\u4E3A base64 \u5B57\u7B26\u4E32\u683C\u5F0F\u3002\u82E5\u7B7E\u540D\u4E3A\u7A7A\uFF0C\u5219\u8FD4\u56DE\u7A7A\u5B57\u7B26\u4E32\u3002canvas
\uFF1ACanvas \u5143\u7D20\u3002<van-signature @submit="onSubmit" @clear="onClear" />\n<van-image v-if="image" :src="image" />\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const image = ref('');\n const onSubmit = (data) => {\n image.value = data.image;\n };\n const onClear = () => showToast('clear');\n\n return {\n image,\n onSubmit,\n onClear,\n };\n },\n};\n
\n\u901A\u8FC7 pen-color
\u6765\u81EA\u5B9A\u4E49\u7B14\u89E6\u989C\u8272\u3002
<van-signature pen-color="#ff0000" @submit="onSubmit" @clear="onClear" />\n
\n\u901A\u8FC7 line-width
\u6765\u81EA\u5B9A\u4E49\u7EBF\u6761\u5BBD\u5EA6\u3002
<van-signature :line-width="6" @submit="onSubmit" @clear="onClear" />\n
\n\u901A\u8FC7 background-color
\u6765\u81EA\u5B9A\u4E49\u80CC\u666F\u989C\u8272\u3002
<van-signature background-color="#eee" @submit="onSubmit" @clear="onClear" />\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
type | \n\u5BFC\u51FA\u56FE\u7247\u7C7B\u578B | \nstring | \npng | \n
pen-color | \n\u7B14\u89E6\u989C\u8272\uFF0C\u9ED8\u8BA4\u9ED1\u8272 | \nstring | \n#000 | \n
line-width | \n\u7EBF\u6761\u5BBD\u5EA6 | \nnumber | \n3 | \n
background-color | \n\u80CC\u666F\u989C\u8272 | \nstring | \n- | \n
tips | \n\u5F53\u4E0D\u652F\u6301 Canvas \u7684\u65F6\u5019\u51FA\u73B0\u7684\u63D0\u793A\u6587\u6848 | \nstring | \n- | \n
clear-button-text | \n\u6E05\u9664\u6309\u94AE\u6587\u6848 | \nstring | \n\u6E05\u7A7A | \n
confirm-button-text | \n\u786E\u8BA4\u6309\u94AE\u6587\u6848 | \nstring | \n\u786E\u8BA4 | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
start | \n\u5F00\u59CB\u7B7E\u540D\u65F6\u89E6\u53D1 | \n- | \n
end | \n\u7ED3\u675F\u7B7E\u540D\u65F6\u89E6\u53D1 | \n- | \n
signing | \n\u7B7E\u540D\u8FC7\u7A0B\u4E2D\u89E6\u53D1 | \nevent: TouchEvent | \n
submit | \n\u70B9\u51FB\u786E\u5B9A\u6309\u94AE\u65F6\u89E6\u53D1 | \ndata: { image: string; canvas: HTMLCanvasElement } | \n
clear | \n\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1 | \n- | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Signature \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
resize v4.7.3 | \n\u5916\u5C42\u5143\u7D20\u5927\u5C0F\u6216\u7EC4\u4EF6\u663E\u793A\u72B6\u6001\u53D8\u5316\u65F6\uFF0C\u53EF\u4EE5\u8C03\u7528\u6B64\u65B9\u6CD5\u6765\u89E6\u53D1\u91CD\u7ED8 | \n- | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { SignatureProps, SignatureInstance } from 'vant';\n
\nSignatureInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { SignatureInstance } from 'vant';\n\nconst signatureRef = ref<SignatureInstance>();\n\nsignatureRef.value?.resize();\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-signature-padding | \nvar(--van-padding-xs) | \n- | \n
--van-signature-content-height | \n200px | \n\u753B\u5E03\u9AD8\u5EA6 | \n
--van-signature-content-background | \nvar(--van-background-2) | \n\u753B\u5E03\u80CC\u666F\u8272 | \n
--van-signature-content-border | \n1px dotted #dadada | \n\u753B\u5E03\u8FB9\u6846\u6837\u5F0F | \n
\u7528\u4E8E\u7B7E\u540D\u573A\u666F\u7684\u7EC4\u4EF6\uFF0C\u57FA\u4E8E Canvas \u5B9E\u73B0\u3002\u8BF7\u5347\u7EA7 vant
\u5230 >= 4.3.0 \u7248\u672C\u6765\u4F7F\u7528\u8BE5\u7EC4\u4EF6\u3002
\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Signature } from 'vant';\n\nconst app = createApp();\napp.use(Signature);\n
\n\u5F53\u70B9\u51FB\u786E\u8BA4\u6309\u94AE\u65F6\uFF0C\u7EC4\u4EF6\u4F1A\u89E6\u53D1 submit
\u4E8B\u4EF6\uFF0C\u4E8B\u4EF6\u7684\u7B2C\u4E00\u4E2A\u53C2\u6570\u4E3A data
\uFF0C\u5305\u542B\u4EE5\u4E0B\u5B57\u6BB5\uFF1A
image
\uFF1A\u7B7E\u540D\u5BF9\u5E94\u7684\u56FE\u7247\uFF0C\u4E3A base64 \u5B57\u7B26\u4E32\u683C\u5F0F\u3002\u82E5\u7B7E\u540D\u4E3A\u7A7A\uFF0C\u5219\u8FD4\u56DE\u7A7A\u5B57\u7B26\u4E32\u3002canvas
\uFF1ACanvas \u5143\u7D20\u3002<van-signature @submit="onSubmit" @clear="onClear" />\n<van-image v-if="image" :src="image" />\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const image = ref('');\n const onSubmit = (data) => {\n image.value = data.image;\n };\n const onClear = () => showToast('clear');\n\n return {\n image,\n onSubmit,\n onClear,\n };\n },\n};\n
\n\u901A\u8FC7 pen-color
\u6765\u81EA\u5B9A\u4E49\u7B14\u89E6\u989C\u8272\u3002
<van-signature pen-color="#ff0000" @submit="onSubmit" @clear="onClear" />\n
\n\u901A\u8FC7 line-width
\u6765\u81EA\u5B9A\u4E49\u7EBF\u6761\u5BBD\u5EA6\u3002
<van-signature :line-width="6" @submit="onSubmit" @clear="onClear" />\n
\n\u901A\u8FC7 background-color
\u6765\u81EA\u5B9A\u4E49\u80CC\u666F\u989C\u8272\u3002
<van-signature background-color="#eee" @submit="onSubmit" @clear="onClear" />\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
type | \n\u5BFC\u51FA\u56FE\u7247\u7C7B\u578B | \nstring | \npng | \n
pen-color | \n\u7B14\u89E6\u989C\u8272\uFF0C\u9ED8\u8BA4\u9ED1\u8272 | \nstring | \n#000 | \n
line-width | \n\u7EBF\u6761\u5BBD\u5EA6 | \nnumber | \n3 | \n
background-color | \n\u80CC\u666F\u989C\u8272 | \nstring | \n- | \n
tips | \n\u5F53\u4E0D\u652F\u6301 Canvas \u7684\u65F6\u5019\u51FA\u73B0\u7684\u63D0\u793A\u6587\u6848 | \nstring | \n- | \n
clear-button-text | \n\u6E05\u9664\u6309\u94AE\u6587\u6848 | \nstring | \n\u6E05\u7A7A | \n
confirm-button-text | \n\u786E\u8BA4\u6309\u94AE\u6587\u6848 | \nstring | \n\u786E\u8BA4 | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
start | \n\u5F00\u59CB\u7B7E\u540D\u65F6\u89E6\u53D1 | \n- | \n
end | \n\u7ED3\u675F\u7B7E\u540D\u65F6\u89E6\u53D1 | \n- | \n
signing | \n\u7B7E\u540D\u8FC7\u7A0B\u4E2D\u89E6\u53D1 | \nevent: TouchEvent | \n
submit | \n\u70B9\u51FB\u786E\u5B9A\u6309\u94AE\u65F6\u89E6\u53D1 | \ndata: { image: string; canvas: HTMLCanvasElement } | \n
clear | \n\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1 | \n- | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Signature \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
resize v4.7.3 | \n\u5916\u5C42\u5143\u7D20\u5927\u5C0F\u6216\u7EC4\u4EF6\u663E\u793A\u72B6\u6001\u53D8\u5316\u65F6\uFF0C\u53EF\u4EE5\u8C03\u7528\u6B64\u65B9\u6CD5\u6765\u89E6\u53D1\u91CD\u7ED8 | \n- | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { SignatureProps, SignatureInstance } from 'vant';\n
\nSignatureInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { SignatureInstance } from 'vant';\n\nconst signatureRef = ref<SignatureInstance>();\n\nsignatureRef.value?.resize();\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-signature-padding | \nvar(--van-padding-xs) | \n- | \n
--van-signature-content-height | \n200px | \n\u753B\u5E03\u9AD8\u5EA6 | \n
--van-signature-content-background | \nvar(--van-background-2) | \n\u753B\u5E03\u80CC\u666F\u8272 | \n
--van-signature-content-border | \n1px dotted #dadada | \n\u753B\u5E03\u8FB9\u6846\u6837\u5F0F | \n
\u7011\u5E03\u6D41\u6EDA\u52A8\u52A0\u8F7D\uFF0C\u7528\u4E8E\u5C55\u793A\u957F\u5217\u8868\uFF0C\u5F53\u5217\u8868\u5373\u5C06\u6EDA\u52A8\u5230\u5E95\u90E8\u65F6\uFF0C\u4F1A\u89E6\u53D1\u4E8B\u4EF6\u5E76\u52A0\u8F7D\u66F4\u591A\u5217\u8868\u9879\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { List } from 'vant';\n\nconst app = createApp();\napp.use(List);\n
\nList \u7EC4\u4EF6\u901A\u8FC7 loading
\u548C finished
\u4E24\u4E2A\u53D8\u91CF\u63A7\u5236\u52A0\u8F7D\u72B6\u6001\uFF0C\u5F53\u7EC4\u4EF6\u6EDA\u52A8\u5230\u5E95\u90E8\u65F6\uFF0C\u4F1A\u89E6\u53D1 load
\u4E8B\u4EF6\u5E76\u5C06 loading
\u8BBE\u7F6E\u6210 true
\u3002\u6B64\u65F6\u53EF\u4EE5\u53D1\u8D77\u5F02\u6B65\u64CD\u4F5C\u5E76\u66F4\u65B0\u6570\u636E\uFF0C\u6570\u636E\u66F4\u65B0\u5B8C\u6BD5\u540E\uFF0C\u5C06 loading
\u8BBE\u7F6E\u6210 false
\u5373\u53EF\u3002\u82E5\u6570\u636E\u5DF2\u5168\u90E8\u52A0\u8F7D\u5B8C\u6BD5\uFF0C\u5219\u76F4\u63A5\u5C06 finished
\u8BBE\u7F6E\u6210 true
\u5373\u53EF\u3002
<van-list\n v-model:loading="loading"\n :finished="finished"\n finished-text="\u6CA1\u6709\u66F4\u591A\u4E86"\n @load="onLoad"\n>\n <van-cell v-for="item in list" :key="item" :title="item" />\n</van-list>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const list = ref([]);\n const loading = ref(false);\n const finished = ref(false);\n\n const onLoad = () => {\n // \u5F02\u6B65\u66F4\u65B0\u6570\u636E\n // setTimeout \u4EC5\u505A\u793A\u4F8B\uFF0C\u771F\u5B9E\u573A\u666F\u4E2D\u4E00\u822C\u4E3A ajax \u8BF7\u6C42\n setTimeout(() => {\n for (let i = 0; i < 10; i++) {\n list.value.push(list.value.length + 1);\n }\n\n // \u52A0\u8F7D\u72B6\u6001\u7ED3\u675F\n loading.value = false;\n\n // \u6570\u636E\u5168\u90E8\u52A0\u8F7D\u5B8C\u6210\n if (list.value.length >= 40) {\n finished.value = true;\n }\n }, 1000);\n };\n\n return {\n list,\n onLoad,\n loading,\n finished,\n };\n },\n};\n
\n\u82E5\u5217\u8868\u6570\u636E\u52A0\u8F7D\u5931\u8D25\uFF0C\u5C06 error
\u8BBE\u7F6E\u6210 true
\u5373\u53EF\u663E\u793A\u9519\u8BEF\u63D0\u793A\uFF0C\u7528\u6237\u70B9\u51FB\u9519\u8BEF\u63D0\u793A\u540E\u4F1A\u91CD\u65B0\u89E6\u53D1 load \u4E8B\u4EF6\u3002
<van-list\n v-model:loading="loading"\n v-model:error="error"\n error-text="\u8BF7\u6C42\u5931\u8D25\uFF0C\u70B9\u51FB\u91CD\u65B0\u52A0\u8F7D"\n @load="onLoad"\n>\n <van-cell v-for="item in list" :key="item" :title="item" />\n</van-list>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const list = ref([]);\n const error = ref(false);\n const loading = ref(false);\n const onLoad = () => {\n fetchSomeThing().catch(() => {\n error.value = true;\n });\n };\n\n return {\n list,\n error,\n onLoad,\n loading,\n };\n },\n};\n
\nList \u7EC4\u4EF6\u53EF\u4EE5\u4E0E PullRefresh \u7EC4\u4EF6\u7ED3\u5408\u4F7F\u7528\uFF0C\u5B9E\u73B0\u4E0B\u62C9\u5237\u65B0\u7684\u6548\u679C\u3002
\n<van-pull-refresh v-model="refreshing" @refresh="onRefresh">\n <van-list\n v-model:loading="loading"\n :finished="finished"\n finished-text="\u6CA1\u6709\u66F4\u591A\u4E86"\n @load="onLoad"\n >\n <van-cell v-for="item in list" :key="item" :title="item" />\n </van-list>\n</van-pull-refresh>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const list = ref([]);\n const loading = ref(false);\n const finished = ref(false);\n const refreshing = ref(false);\n\n const onLoad = () => {\n setTimeout(() => {\n if (refreshing.value) {\n list.value = [];\n refreshing.value = false;\n }\n\n for (let i = 0; i < 10; i++) {\n list.value.push(list.value.length + 1);\n }\n loading.value = false;\n\n if (list.value.length >= 40) {\n finished.value = true;\n }\n }, 1000);\n };\n\n const onRefresh = () => {\n // \u6E05\u7A7A\u5217\u8868\u6570\u636E\n finished.value = false;\n\n // \u91CD\u65B0\u52A0\u8F7D\u6570\u636E\n // \u5C06 loading \u8BBE\u7F6E\u4E3A true\uFF0C\u8868\u793A\u5904\u4E8E\u52A0\u8F7D\u72B6\u6001\n loading.value = true;\n onLoad();\n };\n\n return {\n list,\n onLoad,\n loading,\n finished,\n onRefresh,\n refreshing,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:loading | \n\u662F\u5426\u5904\u4E8E\u52A0\u8F7D\u72B6\u6001\uFF0C\u52A0\u8F7D\u8FC7\u7A0B\u4E2D\u4E0D\u89E6\u53D1 load \u4E8B\u4EF6 | \nboolean | \nfalse | \n
v-model:error | \n\u662F\u5426\u52A0\u8F7D\u5931\u8D25\uFF0C\u52A0\u8F7D\u5931\u8D25\u540E\u70B9\u51FB\u9519\u8BEF\u63D0\u793A\u53EF\u4EE5\u91CD\u65B0\u89E6\u53D1 load \u4E8B\u4EF6 | \nboolean | \nfalse | \n
finished | \n\u662F\u5426\u5DF2\u52A0\u8F7D\u5B8C\u6210\uFF0C\u52A0\u8F7D\u5B8C\u6210\u540E\u4E0D\u518D\u89E6\u53D1 load \u4E8B\u4EF6 | \nboolean | \nfalse | \n
offset | \n\u6EDA\u52A8\u6761\u4E0E\u5E95\u90E8\u8DDD\u79BB\u5C0F\u4E8E offset \u65F6\u89E6\u53D1 load \u4E8B\u4EF6 | \nnumber | string | \n300 | \n
loading-text | \n\u52A0\u8F7D\u8FC7\u7A0B\u4E2D\u7684\u63D0\u793A\u6587\u6848 | \nstring | \n\u52A0\u8F7D\u4E2D... | \n
finished-text | \n\u52A0\u8F7D\u5B8C\u6210\u540E\u7684\u63D0\u793A\u6587\u6848 | \nstring | \n- | \n
error-text | \n\u52A0\u8F7D\u5931\u8D25\u540E\u7684\u63D0\u793A\u6587\u6848 | \nstring | \n- | \n
immediate-check | \n\u662F\u5426\u5728\u521D\u59CB\u5316\u65F6\u7ACB\u5373\u6267\u884C\u6EDA\u52A8\u4F4D\u7F6E\u68C0\u67E5 | \nboolean | \ntrue | \n
disabled | \n\u662F\u5426\u7981\u7528\u6EDA\u52A8\u52A0\u8F7D | \nboolean | \nfalse | \n
direction | \n\u6EDA\u52A8\u89E6\u53D1\u52A0\u8F7D\u7684\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A up | \nstring | \ndown | \n
scroller v4.6.4 | \n\u6307\u5B9A\u9700\u8981\u76D1\u542C\u6EDA\u52A8\u4E8B\u4EF6\u7684\u8282\u70B9\uFF0C\u9ED8\u8BA4\u4E3A\u6700\u8FD1\u7684\u7236\u7EA7\u6EDA\u52A8\u8282\u70B9 | \nElement | \n- | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
load | \n\u6EDA\u52A8\u6761\u4E0E\u5E95\u90E8\u8DDD\u79BB\u5C0F\u4E8E offset \u65F6\u89E6\u53D1 | \n- | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 List \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
check | \n\u68C0\u67E5\u5F53\u524D\u7684\u6EDA\u52A8\u4F4D\u7F6E\uFF0C\u82E5\u5DF2\u6EDA\u52A8\u81F3\u5E95\u90E8\uFF0C\u5219\u4F1A\u89E6\u53D1 load \u4E8B\u4EF6 | \n- | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { ListProps, ListInstance, ListDirection } from 'vant';\n
\nListInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { ListInstance } from 'vant';\n\nconst listRef = ref<ListInstance>();\n\nlistRef.value?.check();\n
\n\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u5217\u8868\u5185\u5BB9 | \n
loading | \n\u81EA\u5B9A\u4E49\u5E95\u90E8\u52A0\u8F7D\u4E2D\u63D0\u793A | \n
finished | \n\u81EA\u5B9A\u4E49\u52A0\u8F7D\u5B8C\u6210\u540E\u7684\u63D0\u793A\u6587\u6848 | \n
error | \n\u81EA\u5B9A\u4E49\u52A0\u8F7D\u5931\u8D25\u540E\u7684\u63D0\u793A\u6587\u6848 | \n
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-list-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-list-text-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-list-text-line-height | \n50px | \n- | \n
--van-list-loading-icon-size | \n16px | \n- | \n
List \u4F1A\u76D1\u542C\u6D4F\u89C8\u5668\u7684\u6EDA\u52A8\u4E8B\u4EF6\u5E76\u8BA1\u7B97\u5217\u8868\u7684\u4F4D\u7F6E\uFF0C\u5F53\u5217\u8868\u5E95\u90E8\u4E0E\u53EF\u89C6\u533A\u57DF\u7684\u8DDD\u79BB\u5C0F\u4E8E offset
\u65F6\uFF0CList \u4F1A\u89E6\u53D1\u4E00\u6B21 load
\u4E8B\u4EF6\u3002
List \u521D\u59CB\u5316\u540E\u4F1A\u89E6\u53D1\u4E00\u6B21 load \u4E8B\u4EF6\uFF0C\u7528\u4E8E\u52A0\u8F7D\u7B2C\u4E00\u5C4F\u7684\u6570\u636E\uFF0C\u8FD9\u4E2A\u7279\u6027\u53EF\u4EE5\u901A\u8FC7 immediate-check
\u5C5E\u6027\u5173\u95ED\u3002
\u5982\u679C\u4E00\u6B21\u8BF7\u6C42\u52A0\u8F7D\u7684\u6570\u636E\u6761\u6570\u8F83\u5C11\uFF0C\u5BFC\u81F4\u5217\u8868\u5185\u5BB9\u65E0\u6CD5\u94FA\u6EE1\u5F53\u524D\u5C4F\u5E55\uFF0CList \u4F1A\u7EE7\u7EED\u89E6\u53D1 load
\u4E8B\u4EF6\uFF0C\u76F4\u5230\u5185\u5BB9\u94FA\u6EE1\u5C4F\u5E55\u6216\u6570\u636E\u5168\u90E8\u52A0\u8F7D\u5B8C\u6210\u3002
\u56E0\u6B64\u4F60\u9700\u8981\u8C03\u6574\u6BCF\u6B21\u83B7\u53D6\u7684\u6570\u636E\u6761\u6570\uFF0C\u7406\u60F3\u60C5\u51B5\u4E0B\u6BCF\u6B21\u8BF7\u6C42\u83B7\u53D6\u7684\u6570\u636E\u6761\u6570\u5E94\u80FD\u591F\u586B\u6EE1\u4E00\u5C4F\u9AD8\u5EA6\u3002
\nList
\u6709\u4EE5\u4E0B\u4E09\u79CD\u72B6\u6001\uFF0C\u7406\u89E3\u8FD9\u4E9B\u72B6\u6001\u6709\u52A9\u4E8E\u4F60\u6B63\u786E\u5730\u4F7F\u7528 List
\u7EC4\u4EF6\uFF1A
loading
\u4E3A false
\uFF0C\u6B64\u65F6\u4F1A\u6839\u636E\u5217\u8868\u6EDA\u52A8\u4F4D\u7F6E\u5224\u65AD\u662F\u5426\u89E6\u53D1 load
\u4E8B\u4EF6\uFF08\u5217\u8868\u5185\u5BB9\u4E0D\u8DB3\u4E00\u5C4F\u5E55\u65F6\uFF0C\u4F1A\u76F4\u63A5\u89E6\u53D1\uFF09\u3002loading
\u4E3A true
\uFF0C\u8868\u793A\u6B63\u5728\u53D1\u9001\u5F02\u6B65\u8BF7\u6C42\uFF0C\u6B64\u65F6\u4E0D\u4F1A\u89E6\u53D1 load
\u4E8B\u4EF6\u3002finished
\u4E3A true
\uFF0C\u6B64\u65F6\u4E0D\u4F1A\u89E6\u53D1 load
\u4E8B\u4EF6\u3002\u5728\u6BCF\u6B21\u8BF7\u6C42\u5B8C\u6BD5\u540E\uFF0C\u9700\u8981\u624B\u52A8\u5C06 loading
\u8BBE\u7F6E\u4E3A false
\uFF0C\u8868\u793A\u52A0\u8F7D\u7ED3\u675F\u3002
\u82E5 List \u7684\u5185\u5BB9\u4F7F\u7528\u4E86 float \u5E03\u5C40\uFF0C\u53EF\u4EE5\u5728\u5BB9\u5668\u4E0A\u6DFB\u52A0 van-clearfix
\u7C7B\u540D\u6765\u6E05\u9664\u6D6E\u52A8\uFF0C\u4F7F\u5F97 List \u80FD\u6B63\u786E\u5224\u65AD\u5143\u7D20\u4F4D\u7F6E\u3002
<van-list>\n <div class="van-clearfix">\n <div class="float-item" />\n <div class="float-item" />\n <div class="float-item" />\n </div>\n</van-list>\n
\n\u5982\u679C\u5728 html \u548C body \u6807\u7B7E\u4E0A\u8BBE\u7F6E\u4E86 overflow-x: hidden
\u6837\u5F0F\uFF0C\u4F1A\u5BFC\u81F4 List \u4E00\u76F4\u89E6\u53D1\u52A0\u8F7D\u3002
html,\nbody {\n overflow-x: hidden;\n}\n
\n\u8FD9\u4E2A\u95EE\u9898\u7684\u539F\u56E0\u662F\u5F53\u5143\u7D20\u8BBE\u7F6E\u4E86 overflow-x: hidden
\u6837\u5F0F\u65F6\uFF0C\u8BE5\u5143\u7D20\u7684 overflow-y
\u4F1A\u88AB\u6D4F\u89C8\u5668\u8BBE\u7F6E\u4E3A auto
\uFF0C\u800C\u4E0D\u662F\u9ED8\u8BA4\u503C visible
\uFF0C\u5BFC\u81F4 List \u65E0\u6CD5\u6B63\u786E\u5730\u5224\u65AD\u6EDA\u52A8\u5BB9\u5668\u3002\u89E3\u51B3\u65B9\u6CD5\u662F\u53BB\u9664\u8BE5\u6837\u5F0F\uFF0C\u6216\u8005\u5728 html \u548C body \u6807\u7B7E\u4E0A\u6DFB\u52A0 height: 100%
\u6837\u5F0F\u3002
\u8BBE\u7F6E direction
\u5C5E\u6027\u4E3A up \u540E\uFF0C\u5F53\u6EDA\u52A8\u6761\u5904\u4E8E\u9875\u9762\u9876\u90E8\u65F6\uFF0C\u5C31\u4F1A\u89E6\u53D1 List \u7EC4\u4EF6\u7684\u52A0\u8F7D\u3002
\u56E0\u6B64\u5728\u4F7F\u7528\u8BE5\u5C5E\u6027\u65F6\uFF0C\u5EFA\u8BAE\u5728\u6BCF\u6B21\u6570\u636E\u52A0\u8F7D\u5B8C\u6210\u540E\uFF0C\u5C06\u6EDA\u52A8\u6761\u6EDA\u52A8\u81F3\u9875\u9762\u5E95\u90E8\u6216\u975E\u9876\u90E8\u7684\u4F4D\u7F6E\u3002
\n\u7011\u5E03\u6D41\u6EDA\u52A8\u52A0\u8F7D\uFF0C\u7528\u4E8E\u5C55\u793A\u957F\u5217\u8868\uFF0C\u5F53\u5217\u8868\u5373\u5C06\u6EDA\u52A8\u5230\u5E95\u90E8\u65F6\uFF0C\u4F1A\u89E6\u53D1\u4E8B\u4EF6\u5E76\u52A0\u8F7D\u66F4\u591A\u5217\u8868\u9879\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { List } from 'vant';\n\nconst app = createApp();\napp.use(List);\n
\nList \u7EC4\u4EF6\u901A\u8FC7 loading
\u548C finished
\u4E24\u4E2A\u53D8\u91CF\u63A7\u5236\u52A0\u8F7D\u72B6\u6001\uFF0C\u5F53\u7EC4\u4EF6\u6EDA\u52A8\u5230\u5E95\u90E8\u65F6\uFF0C\u4F1A\u89E6\u53D1 load
\u4E8B\u4EF6\u5E76\u5C06 loading
\u8BBE\u7F6E\u6210 true
\u3002\u6B64\u65F6\u53EF\u4EE5\u53D1\u8D77\u5F02\u6B65\u64CD\u4F5C\u5E76\u66F4\u65B0\u6570\u636E\uFF0C\u6570\u636E\u66F4\u65B0\u5B8C\u6BD5\u540E\uFF0C\u5C06 loading
\u8BBE\u7F6E\u6210 false
\u5373\u53EF\u3002\u82E5\u6570\u636E\u5DF2\u5168\u90E8\u52A0\u8F7D\u5B8C\u6BD5\uFF0C\u5219\u76F4\u63A5\u5C06 finished
\u8BBE\u7F6E\u6210 true
\u5373\u53EF\u3002
<van-list\n v-model:loading="loading"\n :finished="finished"\n finished-text="\u6CA1\u6709\u66F4\u591A\u4E86"\n @load="onLoad"\n>\n <van-cell v-for="item in list" :key="item" :title="item" />\n</van-list>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const list = ref([]);\n const loading = ref(false);\n const finished = ref(false);\n\n const onLoad = () => {\n // \u5F02\u6B65\u66F4\u65B0\u6570\u636E\n // setTimeout \u4EC5\u505A\u793A\u4F8B\uFF0C\u771F\u5B9E\u573A\u666F\u4E2D\u4E00\u822C\u4E3A ajax \u8BF7\u6C42\n setTimeout(() => {\n for (let i = 0; i < 10; i++) {\n list.value.push(list.value.length + 1);\n }\n\n // \u52A0\u8F7D\u72B6\u6001\u7ED3\u675F\n loading.value = false;\n\n // \u6570\u636E\u5168\u90E8\u52A0\u8F7D\u5B8C\u6210\n if (list.value.length >= 40) {\n finished.value = true;\n }\n }, 1000);\n };\n\n return {\n list,\n onLoad,\n loading,\n finished,\n };\n },\n};\n
\n\u82E5\u5217\u8868\u6570\u636E\u52A0\u8F7D\u5931\u8D25\uFF0C\u5C06 error
\u8BBE\u7F6E\u6210 true
\u5373\u53EF\u663E\u793A\u9519\u8BEF\u63D0\u793A\uFF0C\u7528\u6237\u70B9\u51FB\u9519\u8BEF\u63D0\u793A\u540E\u4F1A\u91CD\u65B0\u89E6\u53D1 load \u4E8B\u4EF6\u3002
<van-list\n v-model:loading="loading"\n v-model:error="error"\n error-text="\u8BF7\u6C42\u5931\u8D25\uFF0C\u70B9\u51FB\u91CD\u65B0\u52A0\u8F7D"\n @load="onLoad"\n>\n <van-cell v-for="item in list" :key="item" :title="item" />\n</van-list>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const list = ref([]);\n const error = ref(false);\n const loading = ref(false);\n const onLoad = () => {\n fetchSomeThing().catch(() => {\n error.value = true;\n });\n };\n\n return {\n list,\n error,\n onLoad,\n loading,\n };\n },\n};\n
\nList \u7EC4\u4EF6\u53EF\u4EE5\u4E0E PullRefresh \u7EC4\u4EF6\u7ED3\u5408\u4F7F\u7528\uFF0C\u5B9E\u73B0\u4E0B\u62C9\u5237\u65B0\u7684\u6548\u679C\u3002
\n<van-pull-refresh v-model="refreshing" @refresh="onRefresh">\n <van-list\n v-model:loading="loading"\n :finished="finished"\n finished-text="\u6CA1\u6709\u66F4\u591A\u4E86"\n @load="onLoad"\n >\n <van-cell v-for="item in list" :key="item" :title="item" />\n </van-list>\n</van-pull-refresh>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const list = ref([]);\n const loading = ref(false);\n const finished = ref(false);\n const refreshing = ref(false);\n\n const onLoad = () => {\n setTimeout(() => {\n if (refreshing.value) {\n list.value = [];\n refreshing.value = false;\n }\n\n for (let i = 0; i < 10; i++) {\n list.value.push(list.value.length + 1);\n }\n loading.value = false;\n\n if (list.value.length >= 40) {\n finished.value = true;\n }\n }, 1000);\n };\n\n const onRefresh = () => {\n // \u6E05\u7A7A\u5217\u8868\u6570\u636E\n finished.value = false;\n\n // \u91CD\u65B0\u52A0\u8F7D\u6570\u636E\n // \u5C06 loading \u8BBE\u7F6E\u4E3A true\uFF0C\u8868\u793A\u5904\u4E8E\u52A0\u8F7D\u72B6\u6001\n loading.value = true;\n onLoad();\n };\n\n return {\n list,\n onLoad,\n loading,\n finished,\n onRefresh,\n refreshing,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:loading | \n\u662F\u5426\u5904\u4E8E\u52A0\u8F7D\u72B6\u6001\uFF0C\u52A0\u8F7D\u8FC7\u7A0B\u4E2D\u4E0D\u89E6\u53D1 load \u4E8B\u4EF6 | \nboolean | \nfalse | \n
v-model:error | \n\u662F\u5426\u52A0\u8F7D\u5931\u8D25\uFF0C\u52A0\u8F7D\u5931\u8D25\u540E\u70B9\u51FB\u9519\u8BEF\u63D0\u793A\u53EF\u4EE5\u91CD\u65B0\u89E6\u53D1 load \u4E8B\u4EF6 | \nboolean | \nfalse | \n
finished | \n\u662F\u5426\u5DF2\u52A0\u8F7D\u5B8C\u6210\uFF0C\u52A0\u8F7D\u5B8C\u6210\u540E\u4E0D\u518D\u89E6\u53D1 load \u4E8B\u4EF6 | \nboolean | \nfalse | \n
offset | \n\u6EDA\u52A8\u6761\u4E0E\u5E95\u90E8\u8DDD\u79BB\u5C0F\u4E8E offset \u65F6\u89E6\u53D1 load \u4E8B\u4EF6 | \nnumber | string | \n300 | \n
loading-text | \n\u52A0\u8F7D\u8FC7\u7A0B\u4E2D\u7684\u63D0\u793A\u6587\u6848 | \nstring | \n\u52A0\u8F7D\u4E2D... | \n
finished-text | \n\u52A0\u8F7D\u5B8C\u6210\u540E\u7684\u63D0\u793A\u6587\u6848 | \nstring | \n- | \n
error-text | \n\u52A0\u8F7D\u5931\u8D25\u540E\u7684\u63D0\u793A\u6587\u6848 | \nstring | \n- | \n
immediate-check | \n\u662F\u5426\u5728\u521D\u59CB\u5316\u65F6\u7ACB\u5373\u6267\u884C\u6EDA\u52A8\u4F4D\u7F6E\u68C0\u67E5 | \nboolean | \ntrue | \n
disabled | \n\u662F\u5426\u7981\u7528\u6EDA\u52A8\u52A0\u8F7D | \nboolean | \nfalse | \n
direction | \n\u6EDA\u52A8\u89E6\u53D1\u52A0\u8F7D\u7684\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A up | \nstring | \ndown | \n
scroller v4.6.4 | \n\u6307\u5B9A\u9700\u8981\u76D1\u542C\u6EDA\u52A8\u4E8B\u4EF6\u7684\u8282\u70B9\uFF0C\u9ED8\u8BA4\u4E3A\u6700\u8FD1\u7684\u7236\u7EA7\u6EDA\u52A8\u8282\u70B9 | \nElement | \n- | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
load | \n\u6EDA\u52A8\u6761\u4E0E\u5E95\u90E8\u8DDD\u79BB\u5C0F\u4E8E offset \u65F6\u89E6\u53D1 | \n- | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 List \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
check | \n\u68C0\u67E5\u5F53\u524D\u7684\u6EDA\u52A8\u4F4D\u7F6E\uFF0C\u82E5\u5DF2\u6EDA\u52A8\u81F3\u5E95\u90E8\uFF0C\u5219\u4F1A\u89E6\u53D1 load \u4E8B\u4EF6 | \n- | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { ListProps, ListInstance, ListDirection } from 'vant';\n
\nListInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { ListInstance } from 'vant';\n\nconst listRef = ref<ListInstance>();\n\nlistRef.value?.check();\n
\n\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u5217\u8868\u5185\u5BB9 | \n
loading | \n\u81EA\u5B9A\u4E49\u5E95\u90E8\u52A0\u8F7D\u4E2D\u63D0\u793A | \n
finished | \n\u81EA\u5B9A\u4E49\u52A0\u8F7D\u5B8C\u6210\u540E\u7684\u63D0\u793A\u6587\u6848 | \n
error | \n\u81EA\u5B9A\u4E49\u52A0\u8F7D\u5931\u8D25\u540E\u7684\u63D0\u793A\u6587\u6848 | \n
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-list-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-list-text-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-list-text-line-height | \n50px | \n- | \n
--van-list-loading-icon-size | \n16px | \n- | \n
List \u4F1A\u76D1\u542C\u6D4F\u89C8\u5668\u7684\u6EDA\u52A8\u4E8B\u4EF6\u5E76\u8BA1\u7B97\u5217\u8868\u7684\u4F4D\u7F6E\uFF0C\u5F53\u5217\u8868\u5E95\u90E8\u4E0E\u53EF\u89C6\u533A\u57DF\u7684\u8DDD\u79BB\u5C0F\u4E8E offset
\u65F6\uFF0CList \u4F1A\u89E6\u53D1\u4E00\u6B21 load
\u4E8B\u4EF6\u3002
List \u521D\u59CB\u5316\u540E\u4F1A\u89E6\u53D1\u4E00\u6B21 load \u4E8B\u4EF6\uFF0C\u7528\u4E8E\u52A0\u8F7D\u7B2C\u4E00\u5C4F\u7684\u6570\u636E\uFF0C\u8FD9\u4E2A\u7279\u6027\u53EF\u4EE5\u901A\u8FC7 immediate-check
\u5C5E\u6027\u5173\u95ED\u3002
\u5982\u679C\u4E00\u6B21\u8BF7\u6C42\u52A0\u8F7D\u7684\u6570\u636E\u6761\u6570\u8F83\u5C11\uFF0C\u5BFC\u81F4\u5217\u8868\u5185\u5BB9\u65E0\u6CD5\u94FA\u6EE1\u5F53\u524D\u5C4F\u5E55\uFF0CList \u4F1A\u7EE7\u7EED\u89E6\u53D1 load
\u4E8B\u4EF6\uFF0C\u76F4\u5230\u5185\u5BB9\u94FA\u6EE1\u5C4F\u5E55\u6216\u6570\u636E\u5168\u90E8\u52A0\u8F7D\u5B8C\u6210\u3002
\u56E0\u6B64\u4F60\u9700\u8981\u8C03\u6574\u6BCF\u6B21\u83B7\u53D6\u7684\u6570\u636E\u6761\u6570\uFF0C\u7406\u60F3\u60C5\u51B5\u4E0B\u6BCF\u6B21\u8BF7\u6C42\u83B7\u53D6\u7684\u6570\u636E\u6761\u6570\u5E94\u80FD\u591F\u586B\u6EE1\u4E00\u5C4F\u9AD8\u5EA6\u3002
\nList
\u6709\u4EE5\u4E0B\u4E09\u79CD\u72B6\u6001\uFF0C\u7406\u89E3\u8FD9\u4E9B\u72B6\u6001\u6709\u52A9\u4E8E\u4F60\u6B63\u786E\u5730\u4F7F\u7528 List
\u7EC4\u4EF6\uFF1A
loading
\u4E3A false
\uFF0C\u6B64\u65F6\u4F1A\u6839\u636E\u5217\u8868\u6EDA\u52A8\u4F4D\u7F6E\u5224\u65AD\u662F\u5426\u89E6\u53D1 load
\u4E8B\u4EF6\uFF08\u5217\u8868\u5185\u5BB9\u4E0D\u8DB3\u4E00\u5C4F\u5E55\u65F6\uFF0C\u4F1A\u76F4\u63A5\u89E6\u53D1\uFF09\u3002loading
\u4E3A true
\uFF0C\u8868\u793A\u6B63\u5728\u53D1\u9001\u5F02\u6B65\u8BF7\u6C42\uFF0C\u6B64\u65F6\u4E0D\u4F1A\u89E6\u53D1 load
\u4E8B\u4EF6\u3002finished
\u4E3A true
\uFF0C\u6B64\u65F6\u4E0D\u4F1A\u89E6\u53D1 load
\u4E8B\u4EF6\u3002\u5728\u6BCF\u6B21\u8BF7\u6C42\u5B8C\u6BD5\u540E\uFF0C\u9700\u8981\u624B\u52A8\u5C06 loading
\u8BBE\u7F6E\u4E3A false
\uFF0C\u8868\u793A\u52A0\u8F7D\u7ED3\u675F\u3002
\u82E5 List \u7684\u5185\u5BB9\u4F7F\u7528\u4E86 float \u5E03\u5C40\uFF0C\u53EF\u4EE5\u5728\u5BB9\u5668\u4E0A\u6DFB\u52A0 van-clearfix
\u7C7B\u540D\u6765\u6E05\u9664\u6D6E\u52A8\uFF0C\u4F7F\u5F97 List \u80FD\u6B63\u786E\u5224\u65AD\u5143\u7D20\u4F4D\u7F6E\u3002
<van-list>\n <div class="van-clearfix">\n <div class="float-item" />\n <div class="float-item" />\n <div class="float-item" />\n </div>\n</van-list>\n
\n\u5982\u679C\u5728 html \u548C body \u6807\u7B7E\u4E0A\u8BBE\u7F6E\u4E86 overflow-x: hidden
\u6837\u5F0F\uFF0C\u4F1A\u5BFC\u81F4 List \u4E00\u76F4\u89E6\u53D1\u52A0\u8F7D\u3002
html,\nbody {\n overflow-x: hidden;\n}\n
\n\u8FD9\u4E2A\u95EE\u9898\u7684\u539F\u56E0\u662F\u5F53\u5143\u7D20\u8BBE\u7F6E\u4E86 overflow-x: hidden
\u6837\u5F0F\u65F6\uFF0C\u8BE5\u5143\u7D20\u7684 overflow-y
\u4F1A\u88AB\u6D4F\u89C8\u5668\u8BBE\u7F6E\u4E3A auto
\uFF0C\u800C\u4E0D\u662F\u9ED8\u8BA4\u503C visible
\uFF0C\u5BFC\u81F4 List \u65E0\u6CD5\u6B63\u786E\u5730\u5224\u65AD\u6EDA\u52A8\u5BB9\u5668\u3002\u89E3\u51B3\u65B9\u6CD5\u662F\u53BB\u9664\u8BE5\u6837\u5F0F\uFF0C\u6216\u8005\u5728 html \u548C body \u6807\u7B7E\u4E0A\u6DFB\u52A0 height: 100%
\u6837\u5F0F\u3002
\u8BBE\u7F6E direction
\u5C5E\u6027\u4E3A up \u540E\uFF0C\u5F53\u6EDA\u52A8\u6761\u5904\u4E8E\u9875\u9762\u9876\u90E8\u65F6\uFF0C\u5C31\u4F1A\u89E6\u53D1 List \u7EC4\u4EF6\u7684\u52A0\u8F7D\u3002
\u56E0\u6B64\u5728\u4F7F\u7528\u8BE5\u5C5E\u6027\u65F6\uFF0C\u5EFA\u8BAE\u5728\u6BCF\u6B21\u6570\u636E\u52A0\u8F7D\u5B8C\u6210\u540E\uFF0C\u5C06\u6EDA\u52A8\u6761\u6EDA\u52A8\u81F3\u9875\u9762\u5E95\u90E8\u6216\u975E\u9876\u90E8\u7684\u4F4D\u7F6E\u3002
\nUsed to switch between different content areas.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Tab, Tabs } from 'vant';\n\nconst app = createApp();\napp.use(Tab);\napp.use(Tabs);\n
\nThe first tab is active by default, you can set v-model:active
to active specified tab.
<van-tabs v-model:active="active">\n <van-tab v-for="index in 4" :title="'tab' + index">\n content of tab {{ index }}\n </van-tab>\n</van-tabs>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref(0);\n return { active };\n },\n};\n
\n<van-tabs v-model:active="activeName">\n <van-tab title="tab 1" name="a">content of tab 1</van-tab>\n <van-tab title="tab 2" name="b">content of tab 2</van-tab>\n <van-tab title="tab 3" name="c">content of tab 3</van-tab>\n</van-tabs>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeName = ref('b');\n return { activeName };\n },\n};\n
\nBy default more than 5 tabs, you can scroll through the tabs. You can set swipe-threshold
attribute to customize threshold number.
<van-tabs v-model:active="active">\n <van-tab v-for="index in 8" :title="'tab' + index">\n content of tab {{ index }}\n </van-tab>\n</van-tabs>\n
\nUse disabled
prop to disable a tab.
<van-tabs v-model:active="active">\n <van-tab v-for="index in 3" :title="'tab' + index" :disabled="index === 2">\n content of tab {{ index }}\n </van-tab>\n</van-tabs>\n
\nTabs styled as cards.
\n<van-tabs v-model:active="active" type="card">\n <van-tab v-for="index in 3" :title="'tab' + index">\n content of tab {{ index }}\n </van-tab>\n</van-tabs>\n
\n<van-tabs v-model:active="active" @click-tab="onClickTab">\n <van-tab v-for="index in 2" :title="'tab' + index">\n content of tab {{ index }}\n </van-tab>\n</van-tabs>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onClickTab = ({ title }) => showToast(title);\n return {\n onClickTab,\n };\n },\n};\n
\nIn sticky mode, the tab nav will be fixed to top when scroll to top.
\n<van-tabs v-model:active="active" sticky>\n <van-tab v-for="index in 4" :title="'tab ' + index">\n content {{ index }}\n </van-tab>\n</van-tabs>\n
\nIn shrink mode, the tabs will be shrinked to the left.
\n<van-tabs v-model:active="active" shrink>\n <van-tab v-for="index in 4" :title="'tab ' + index">\n content {{ index }}\n </van-tab>\n</van-tabs>\n
\nUse title slot to custom tab title.
\n<van-tabs v-model:active="active">\n <van-tab v-for="index in 2">\n <template #title> <van-icon name="more-o" />tab </template>\n content {{ index }}\n </van-tab>\n</van-tabs>\n
\nUse animated
props to change tabs with animation.
<van-tabs v-model:active="active" animated>\n <van-tab v-for="index in 4" :title="'tab ' + index">\n content {{ index }}\n </van-tab>\n</van-tabs>\n
\nIn swipeable mode, you can switch tabs with swipe gesture in the content.
\n<van-tabs v-model:active="active" swipeable>\n <van-tab v-for="index in 4" :title="'tab ' + index">\n content {{ index }}\n </van-tab>\n</van-tabs>\n
\nIn scrollspy mode, the list of content will be tiled.
\n<van-tabs v-model:active="active" scrollspy sticky>\n <van-tab v-for="index in 8" :title="'tab ' + index">\n content {{ index }}\n </van-tab>\n</van-tabs>\n
\n<van-tabs v-model:active="active" :before-change="beforeChange">\n <van-tab v-for="index in 4" :title="'tab ' + index">\n content {{ index }}\n </van-tab>\n</van-tabs>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref(0);\n const beforeChange = (index) => {\n // prevent change\n if (index === 1) {\n return false;\n }\n\n // async\n return new Promise((resolve) => {\n resolve(index !== 3);\n });\n };\n\n return {\n active,\n beforeChange,\n };\n },\n};\n
\n\n\nTips: The before-change callback will not be triggered by swiping gesture.
\n
By setting the showHeader
prop to false
, the title bar of the Tabs component can be hidden. In this case, you can control the active
prop of the Tabs using custom components.
<van-tabs v-model:active="active" :show-header="false">\n <van-tab v-for="index in 4"> content {{ index }} </van-tab>\n</van-tabs>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:active | \nIndex of active tab | \nnumber | string | \n0 | \n
type | \nCan be set to line card | \nstring | \nline | \n
color | \nTab color | \nstring | \n#1989fa | \n
background | \nBackground color | \nstring | \nwhite | \n
duration | \nToggle tab\'s animation time | \nnumber | string | \n0.3 | \n
line-width | \nWidth of tab line | \nnumber | string | \n40px | \n
line-height | \nHeight of tab line | \nnumber | string | \n3px | \n
animated | \nWhether to change tabs with animation | \nboolean | \nfalse | \n
border | \nWhether to show border when type="line" | \nboolean | \nfalse | \n
ellipsis | \nWhether to ellipsis too long title | \nboolean | \ntrue | \n
sticky | \nWhether to use sticky mode | \nboolean | \nfalse | \n
shrink | \nWhether to shrink the the tabs to the left | \nboolean | \nfalse | \n
swipeable | \nWhether to enable gestures to slide left and right | \nboolean | \nfalse | \n
lazy-render | \nWhether to enable tab content lazy render | \nboolean | \ntrue | \n
scrollspy | \nWhether to use scrollspy mode | \nboolean | \nfalse | \n
show-header v4.7.3 | \nWhether to show title bar | \nboolean | \ntrue | \n
offset-top | \nSticky offset top , supports px vw vh rem unit, default px | \nnumber | string | \n0 | \n
swipe-threshold | \nSet swipe tabs threshold | \nnumber | string | \n5 | \n
title-active-color | \nTitle active color | \nstring | \n- | \n
title-inactive-color | \nTitle inactive color | \nstring | \n- | \n
before-change | \nCallback function before changing tabs, return false to prevent change, support return Promise | \n(name: number | string) => boolean | Promise<boolean> | \n- | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
title | \nTitle | \nstring | \n- | \n
disabled | \nWhether to disable tab | \nboolean | \nfalse | \n
dot | \nWhether to show red dot on the title | \nboolean | \nfalse | \n
badge | \nContent of the badge on the title | \nnumber | string | \n- | \n
name | \nIdentifier | \nnumber | string | \nIndex of tab | \n
url | \nLink | \nstring | \n- | \n
to | \nThe target route should navigate to when clicked on, same as the to prop of Vue Router | \nstring | object | \n- | \n
replace | \nIf true, the navigation will not leave a history record | \nboolean | \nfalse | \n
title-style | \nCustom title style | \nstring | Array | object | \n- | \n
title-class | \nCustom title class name | \nstring | Array | object | \n- | \n
show-zero-badge | \nWhether to show badge when the value is zero | \nboolean | \ntrue | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click-tab | \nEmitted when a tab is clicked | \n{ name: string | number, title: string, event: MouseEvent, disabled: boolean } | \n
change | \nEmitted when active tab changed | \nname: string | number, title: string | \n
rendered | \nEmitted when content first rendered in lazy-render mode | \nname: string | number, title: string | \n
scroll | \nEmitted when tab scrolling in sticky mode | \n{ scrollTop: number, isFixed: boolean } | \n
Use ref to get Tabs instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
resize | \nResize Tabs when container element resized or visibility changed | \n- | \n- | \n
scrollTo | \nGo to specified tab in scrollspy mode | \nname: string | number | \n- | \n
The component exports the following type definitions:
\nimport type { TabProps, TabsType, TabsProps, TabsInstance } from 'vant';\n
\nTabsInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { TabsInstance } from 'vant';\n\nconst tabsRef = ref<TabsInstance>();\n\ntabsRef.value?.scrollTo(0);\n
\nName | \nDescription | \n
---|---|
nav-left | \nCustom nav left content | \n
nav-right | \nCustom nav right content | \n
nav-bottom | \nCustom nav bottom content | \n
Name | \nDescription | \n
---|---|
default | \nContent of tab | \n
title | \nCustom tab title | \n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-tab-text-color | \nvar(--van-gray-7) | \n- | \n
--van-tab-active-text-color | \nvar(--van-text-color) | \n- | \n
--van-tab-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-tab-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-tab-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-tabs-default-color | \nvar(--van-primary-color) | \n- | \n
--van-tabs-line-height | \n44px | \n- | \n
--van-tabs-card-height | \n30px | \n- | \n
--van-tabs-nav-background | \nvar(--van-background-2) | \n- | \n
--van-tabs-bottom-bar-width | \n40px | \n- | \n
--van-tabs-bottom-bar-height | \n3px | \n- | \n
--van-tabs-bottom-bar-color | \nvar(--van-primary-color) | \n- | \n
Used to switch between different content areas.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Tab, Tabs } from 'vant';\n\nconst app = createApp();\napp.use(Tab);\napp.use(Tabs);\n
\nThe first tab is active by default, you can set v-model:active
to active specified tab.
<van-tabs v-model:active="active">\n <van-tab v-for="index in 4" :title="'tab' + index">\n content of tab {{ index }}\n </van-tab>\n</van-tabs>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref(0);\n return { active };\n },\n};\n
\n<van-tabs v-model:active="activeName">\n <van-tab title="tab 1" name="a">content of tab 1</van-tab>\n <van-tab title="tab 2" name="b">content of tab 2</van-tab>\n <van-tab title="tab 3" name="c">content of tab 3</van-tab>\n</van-tabs>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeName = ref('b');\n return { activeName };\n },\n};\n
\nBy default more than 5 tabs, you can scroll through the tabs. You can set swipe-threshold
attribute to customize threshold number.
<van-tabs v-model:active="active">\n <van-tab v-for="index in 8" :title="'tab' + index">\n content of tab {{ index }}\n </van-tab>\n</van-tabs>\n
\nUse disabled
prop to disable a tab.
<van-tabs v-model:active="active">\n <van-tab v-for="index in 3" :title="'tab' + index" :disabled="index === 2">\n content of tab {{ index }}\n </van-tab>\n</van-tabs>\n
\nTabs styled as cards.
\n<van-tabs v-model:active="active" type="card">\n <van-tab v-for="index in 3" :title="'tab' + index">\n content of tab {{ index }}\n </van-tab>\n</van-tabs>\n
\n<van-tabs v-model:active="active" @click-tab="onClickTab">\n <van-tab v-for="index in 2" :title="'tab' + index">\n content of tab {{ index }}\n </van-tab>\n</van-tabs>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onClickTab = ({ title }) => showToast(title);\n return {\n onClickTab,\n };\n },\n};\n
\nIn sticky mode, the tab nav will be fixed to top when scroll to top.
\n<van-tabs v-model:active="active" sticky>\n <van-tab v-for="index in 4" :title="'tab ' + index">\n content {{ index }}\n </van-tab>\n</van-tabs>\n
\nIn shrink mode, the tabs will be shrinked to the left.
\n<van-tabs v-model:active="active" shrink>\n <van-tab v-for="index in 4" :title="'tab ' + index">\n content {{ index }}\n </van-tab>\n</van-tabs>\n
\nUse title slot to custom tab title.
\n<van-tabs v-model:active="active">\n <van-tab v-for="index in 2">\n <template #title> <van-icon name="more-o" />tab </template>\n content {{ index }}\n </van-tab>\n</van-tabs>\n
\nUse animated
props to change tabs with animation.
<van-tabs v-model:active="active" animated>\n <van-tab v-for="index in 4" :title="'tab ' + index">\n content {{ index }}\n </van-tab>\n</van-tabs>\n
\nIn swipeable mode, you can switch tabs with swipe gesture in the content.
\n<van-tabs v-model:active="active" swipeable>\n <van-tab v-for="index in 4" :title="'tab ' + index">\n content {{ index }}\n </van-tab>\n</van-tabs>\n
\nIn scrollspy mode, the list of content will be tiled.
\n<van-tabs v-model:active="active" scrollspy sticky>\n <van-tab v-for="index in 8" :title="'tab ' + index">\n content {{ index }}\n </van-tab>\n</van-tabs>\n
\n<van-tabs v-model:active="active" :before-change="beforeChange">\n <van-tab v-for="index in 4" :title="'tab ' + index">\n content {{ index }}\n </van-tab>\n</van-tabs>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref(0);\n const beforeChange = (index) => {\n // prevent change\n if (index === 1) {\n return false;\n }\n\n // async\n return new Promise((resolve) => {\n resolve(index !== 3);\n });\n };\n\n return {\n active,\n beforeChange,\n };\n },\n};\n
\n\n\nTips: The before-change callback will not be triggered by swiping gesture.
\n
By setting the showHeader
prop to false
, the title bar of the Tabs component can be hidden. In this case, you can control the active
prop of the Tabs using custom components.
<van-tabs v-model:active="active" :show-header="false">\n <van-tab v-for="index in 4"> content {{ index }} </van-tab>\n</van-tabs>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:active | \nIndex of active tab | \nnumber | string | \n0 | \n
type | \nCan be set to line card | \nstring | \nline | \n
color | \nTab color | \nstring | \n#1989fa | \n
background | \nBackground color | \nstring | \nwhite | \n
duration | \nToggle tab\'s animation time | \nnumber | string | \n0.3 | \n
line-width | \nWidth of tab line | \nnumber | string | \n40px | \n
line-height | \nHeight of tab line | \nnumber | string | \n3px | \n
animated | \nWhether to change tabs with animation | \nboolean | \nfalse | \n
border | \nWhether to show border when type="line" | \nboolean | \nfalse | \n
ellipsis | \nWhether to ellipsis too long title | \nboolean | \ntrue | \n
sticky | \nWhether to use sticky mode | \nboolean | \nfalse | \n
shrink | \nWhether to shrink the the tabs to the left | \nboolean | \nfalse | \n
swipeable | \nWhether to enable gestures to slide left and right | \nboolean | \nfalse | \n
lazy-render | \nWhether to enable tab content lazy render | \nboolean | \ntrue | \n
scrollspy | \nWhether to use scrollspy mode | \nboolean | \nfalse | \n
show-header v4.7.3 | \nWhether to show title bar | \nboolean | \ntrue | \n
offset-top | \nSticky offset top , supports px vw vh rem unit, default px | \nnumber | string | \n0 | \n
swipe-threshold | \nSet swipe tabs threshold | \nnumber | string | \n5 | \n
title-active-color | \nTitle active color | \nstring | \n- | \n
title-inactive-color | \nTitle inactive color | \nstring | \n- | \n
before-change | \nCallback function before changing tabs, return false to prevent change, support return Promise | \n(name: number | string) => boolean | Promise<boolean> | \n- | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
title | \nTitle | \nstring | \n- | \n
disabled | \nWhether to disable tab | \nboolean | \nfalse | \n
dot | \nWhether to show red dot on the title | \nboolean | \nfalse | \n
badge | \nContent of the badge on the title | \nnumber | string | \n- | \n
name | \nIdentifier | \nnumber | string | \nIndex of tab | \n
url | \nLink | \nstring | \n- | \n
to | \nThe target route should navigate to when clicked on, same as the to prop of Vue Router | \nstring | object | \n- | \n
replace | \nIf true, the navigation will not leave a history record | \nboolean | \nfalse | \n
title-style | \nCustom title style | \nstring | Array | object | \n- | \n
title-class | \nCustom title class name | \nstring | Array | object | \n- | \n
show-zero-badge | \nWhether to show badge when the value is zero | \nboolean | \ntrue | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click-tab | \nEmitted when a tab is clicked | \n{ name: string | number, title: string, event: MouseEvent, disabled: boolean } | \n
change | \nEmitted when active tab changed | \nname: string | number, title: string | \n
rendered | \nEmitted when content first rendered in lazy-render mode | \nname: string | number, title: string | \n
scroll | \nEmitted when tab scrolling in sticky mode | \n{ scrollTop: number, isFixed: boolean } | \n
Use ref to get Tabs instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
resize | \nResize Tabs when container element resized or visibility changed | \n- | \n- | \n
scrollTo | \nGo to specified tab in scrollspy mode | \nname: string | number | \n- | \n
The component exports the following type definitions:
\nimport type { TabProps, TabsType, TabsProps, TabsInstance } from 'vant';\n
\nTabsInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { TabsInstance } from 'vant';\n\nconst tabsRef = ref<TabsInstance>();\n\ntabsRef.value?.scrollTo(0);\n
\nName | \nDescription | \n
---|---|
nav-left | \nCustom nav left content | \n
nav-right | \nCustom nav right content | \n
nav-bottom | \nCustom nav bottom content | \n
Name | \nDescription | \n
---|---|
default | \nContent of tab | \n
title | \nCustom tab title | \n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-tab-text-color | \nvar(--van-gray-7) | \n- | \n
--van-tab-active-text-color | \nvar(--van-text-color) | \n- | \n
--van-tab-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-tab-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-tab-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-tabs-default-color | \nvar(--van-primary-color) | \n- | \n
--van-tabs-line-height | \n44px | \n- | \n
--van-tabs-card-height | \n30px | \n- | \n
--van-tabs-nav-background | \nvar(--van-background-2) | \n- | \n
--van-tabs-bottom-bar-width | \n40px | \n- | \n
--van-tabs-bottom-bar-height | \n3px | \n- | \n
--van-tabs-bottom-bar-color | \nvar(--van-primary-color) | \n- | \n
This document provides an upgrade guide from Vant 2 to Vant 3.
\nVant 3 is developed based on Vue 3. Before using Vant 3, please upgrade the Vue in the project to version 3.0 or above.
\nThere are some incompatible changes from Vant 2 to Vant 3, please read the incompatible changes below carefully and deal with them in order.
\nThe GoodsAction component is renamed to ActionBar.
\n<!-- Vant 2 -->\n<van-goods-action>\n <van-goods-action-icon text="icon" />\n <van-goods-action-button text="button" />\n</van-goods-action>\n\n<!-- Vant 3 -->\n<van-action-bar>\n <van-action-bar-icon text="icon" />\n <van-action-bar-button text="button" />\n</van-action-bar>\n
\nVant v3 removed the SwitchCell component, you can use the Cell and Switch components instead.
\n<!-- Vant 2 -->\n<van-switch-cell title="title" v-model="checked" />\n\n<!-- Vant 3 -->\n<van-cell center title="title">\n <template #right-icon>\n <van-switch v-model="checked" size="24" />\n </template>\n</van-cell>\n
\nIn order to adapt to Vue 3\'s v-model API usage changes, all components that provide v-model have some adjustments in usage. v-model
for the following popup components has been renamed to v-model:show
:
<!-- Vant 2 -->\n<van-popup v-model="show" />\n\n<!-- Vant 3 -->\n<van-popup v-model:show="show" />\n
\nThe prop corresponding to the following form component v-model is renamed to modelValue
, and the event is renamed to update:modelValue
:
-Checkbox
\n<!-- Vant 2 -->\n<van-field :value="value" @input="onInput" />\n\n<!-- Vant 3 -->\n<van-field :model-value="value" @update:model-value="onInput" />\n
\nv-model
renamed to v-model:currentRate
v-model
renamed to v-model:code
v-model
renamed to v-model:loading
, error.sync
renamed to v-model:error
v-model
renamed to v-model:active
active-id.sync
renamed to v-model:active-id
main-active-index.sync
renamed to v-model:main-active-index
In the previous version, we used the info
prop to display the badge in the upper right corner of the icon. In order to better meet the naming habits of the community, we renamed this prop to badge, which affects the following components:
At the same time, the Info component will also be renamed to Badge.
\n<!-- Vant 2 -->\n<van-icon info="5" />\n\n<!-- Vant 3 -->\n<van-icon badge="5" />\n
\nVue 3.0 added a new Teleport component, which provides the ability to render the component to any DOM position, and Vant 2 also provides similar capabilities through the get-container
prop. For consistency with the official API, the get-container
prop in Vant 3 will be renamed to teleport
.
<!-- Vant 2 -->\n<template>\n <van-popup get-container="body" />\n <van-popup :get-container="getContainer" />\n</template>\n<script>\n export default {\n methods: {\n getContainer() {\n return document.querySelector('#container');\n },\n },\n };\n</script>\n\n<!-- Vant 3 -->\n<template>\n <van-popup teleport="body" />\n <van-popup :teleport="container" />\n</template>\n<script>\n export default {\n beforeCreate() {\n this.container = document.querySelector('#container');\n },\n };\n</script>\n
\nchange
event parameter is no longer passed to the component instanceinfo
to primary
primary
to success
native-type
changed from submit
to button
@click.stop
to prevent event bubblingallow-html
prop is disabled by default.before-close
prop usage adjustment, no longer pass in the done function, but return Promise to control.change
event parameter is no longer passed to the component instanceasync-close
prop, you can use the new before-close
prop instead.change
event parameter is no longer passed to the component instance.allow-html
prop is turned off by default.show-toolbar
prop is enabled by default.confirm
and change
events will contain a complete option object.trigger
prop adjusted to click
.async-change
prop is renamed to before-change
, and the usage method is adjusted.detail
parameter of open
event renamed to name
.on-close
prop renamed to before-close
, and parameter structure adjusted.before-close
prop is no longer passed to the component instance.mask
prop renamed to overlay
.navclick
event renamed to click-nav
.itemclick
event renamed to click-item
.Global methods such as $toast
and $dialog
are provided by default in Vant 2, but Vue 3.0 no longer supports directly mounting methods on Vue\'s prototype chain, so starting from Vant 3.0, you must first pass app.use
registers the component to the corresponding app.
import { Toast, Dialog, Notify } from 'vant';\n\n// Register components such as Toast to the app\napp.use(Toast);\napp.use(Dialog);\napp.use(Notify);\n\n// Subcomponents in the app can directly call methods such as $toast\nexport default {\n mounted() {\n this.$toast('prompt text');\n },\n};\n
\nThis document provides an upgrade guide from Vant 2 to Vant 3.
\nVant 3 is developed based on Vue 3. Before using Vant 3, please upgrade the Vue in the project to version 3.0 or above.
\nThere are some incompatible changes from Vant 2 to Vant 3, please read the incompatible changes below carefully and deal with them in order.
\nThe GoodsAction component is renamed to ActionBar.
\n<!-- Vant 2 -->\n<van-goods-action>\n <van-goods-action-icon text="icon" />\n <van-goods-action-button text="button" />\n</van-goods-action>\n\n<!-- Vant 3 -->\n<van-action-bar>\n <van-action-bar-icon text="icon" />\n <van-action-bar-button text="button" />\n</van-action-bar>\n
\nVant v3 removed the SwitchCell component, you can use the Cell and Switch components instead.
\n<!-- Vant 2 -->\n<van-switch-cell title="title" v-model="checked" />\n\n<!-- Vant 3 -->\n<van-cell center title="title">\n <template #right-icon>\n <van-switch v-model="checked" size="24" />\n </template>\n</van-cell>\n
\nIn order to adapt to Vue 3\'s v-model API usage changes, all components that provide v-model have some adjustments in usage. v-model
for the following popup components has been renamed to v-model:show
:
<!-- Vant 2 -->\n<van-popup v-model="show" />\n\n<!-- Vant 3 -->\n<van-popup v-model:show="show" />\n
\nThe prop corresponding to the following form component v-model is renamed to modelValue
, and the event is renamed to update:modelValue
:
-Checkbox
\n<!-- Vant 2 -->\n<van-field :value="value" @input="onInput" />\n\n<!-- Vant 3 -->\n<van-field :model-value="value" @update:model-value="onInput" />\n
\nv-model
renamed to v-model:currentRate
v-model
renamed to v-model:code
v-model
renamed to v-model:loading
, error.sync
renamed to v-model:error
v-model
renamed to v-model:active
active-id.sync
renamed to v-model:active-id
main-active-index.sync
renamed to v-model:main-active-index
In the previous version, we used the info
prop to display the badge in the upper right corner of the icon. In order to better meet the naming habits of the community, we renamed this prop to badge, which affects the following components:
At the same time, the Info component will also be renamed to Badge.
\n<!-- Vant 2 -->\n<van-icon info="5" />\n\n<!-- Vant 3 -->\n<van-icon badge="5" />\n
\nVue 3.0 added a new Teleport component, which provides the ability to render the component to any DOM position, and Vant 2 also provides similar capabilities through the get-container
prop. For consistency with the official API, the get-container
prop in Vant 3 will be renamed to teleport
.
<!-- Vant 2 -->\n<template>\n <van-popup get-container="body" />\n <van-popup :get-container="getContainer" />\n</template>\n<script>\n export default {\n methods: {\n getContainer() {\n return document.querySelector('#container');\n },\n },\n };\n</script>\n\n<!-- Vant 3 -->\n<template>\n <van-popup teleport="body" />\n <van-popup :teleport="container" />\n</template>\n<script>\n export default {\n beforeCreate() {\n this.container = document.querySelector('#container');\n },\n };\n</script>\n
\nchange
event parameter is no longer passed to the component instanceinfo
to primary
primary
to success
native-type
changed from submit
to button
@click.stop
to prevent event bubblingallow-html
prop is disabled by default.before-close
prop usage adjustment, no longer pass in the done function, but return Promise to control.change
event parameter is no longer passed to the component instanceasync-close
prop, you can use the new before-close
prop instead.change
event parameter is no longer passed to the component instance.allow-html
prop is turned off by default.show-toolbar
prop is enabled by default.confirm
and change
events will contain a complete option object.trigger
prop adjusted to click
.async-change
prop is renamed to before-change
, and the usage method is adjusted.detail
parameter of open
event renamed to name
.on-close
prop renamed to before-close
, and parameter structure adjusted.before-close
prop is no longer passed to the component instance.mask
prop renamed to overlay
.navclick
event renamed to click-nav
.itemclick
event renamed to click-item
.Global methods such as $toast
and $dialog
are provided by default in Vant 2, but Vue 3.0 no longer supports directly mounting methods on Vue\'s prototype chain, so starting from Vant 3.0, you must first pass app.use
registers the component to the corresponding app.
import { Toast, Dialog, Notify } from 'vant';\n\n// Register components such as Toast to the app\napp.use(Toast);\napp.use(Dialog);\napp.use(Notify);\n\n// Subcomponents in the app can directly call methods such as $toast\nexport default {\n mounted() {\n this.$toast('prompt text');\n },\n};\n
\nUsed to display the contact list.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { ContactList } from 'vant';\n\nconst app = createApp();\napp.use(ContactList);\n
\n<van-contact-list\n v-model="chosenContactId"\n :list="list"\n default-tag-text="default"\n @add="onAdd"\n @edit="onEdit"\n @select="onSelect"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const chosenContactId = ref('1');\n const list = ref([\n {\n id: '1',\n name: 'John Snow',\n tel: '13000000000',\n isDefault: true,\n },\n {\n id: '2',\n name: 'Ned Stark',\n tel: '1310000000',\n },\n ]);\n\n const onAdd = () => showToast('Add');\n const onEdit = (contact) => showToast('Edit' + contact.id);\n const onSelect = (contact) => showToast('Select' + contact.id);\n\n return {\n list,\n onAdd,\n onEdit,\n onSelect,\n chosenContactId,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nId of chosen contact | \nnumber | string | \n- | \n
list | \nContact list | \nContactListItem[] | \n[] | \n
add-text | \nAdd button text | \nstring | \nAdd new contact | \n
default-tag-text | \nDefault tag text | \nstring | \n- | \n
Event | \nDescription | \nArguments | \n
---|---|---|
add | \nEmitted when the add button is clicked | \n- | \n
edit | \nEmitted when the edit button is clicked | \ncontact: ContactListItem, index: number | \n
select | \nEmitted when a contact is selected | \ncontact: ContactListItem, index: number | \n
key | \nDescription | \nType | \n
---|---|---|
id | \nID | \nnumber | string | \n
name | \nName | \nstring | \n
tel | \nPhone | \nstring | \n
isDefault | \nIs default contact | \nboolean | undefined | \n
The component exports the following type definitions:
\nimport type { ContactListItem, ContactListProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-contact-list-padding | \nvar(--van-padding-sm) var(--van-padding-sm) 80px | \n- | \n
--van-contact-list-edit-icon-size | \n16px | \n- | \n
--van-contact-list-add-button-z-index | \n999 | \n- | \n
--van-contact-list-radio-color | \nvar(--van-primary-color) | \n- | \n
--van-contact-list-item-padding | \nvar(--van-padding-md) | \n- | \n
Used to display the contact list.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { ContactList } from 'vant';\n\nconst app = createApp();\napp.use(ContactList);\n
\n<van-contact-list\n v-model="chosenContactId"\n :list="list"\n default-tag-text="default"\n @add="onAdd"\n @edit="onEdit"\n @select="onSelect"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const chosenContactId = ref('1');\n const list = ref([\n {\n id: '1',\n name: 'John Snow',\n tel: '13000000000',\n isDefault: true,\n },\n {\n id: '2',\n name: 'Ned Stark',\n tel: '1310000000',\n },\n ]);\n\n const onAdd = () => showToast('Add');\n const onEdit = (contact) => showToast('Edit' + contact.id);\n const onSelect = (contact) => showToast('Select' + contact.id);\n\n return {\n list,\n onAdd,\n onEdit,\n onSelect,\n chosenContactId,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nId of chosen contact | \nnumber | string | \n- | \n
list | \nContact list | \nContactListItem[] | \n[] | \n
add-text | \nAdd button text | \nstring | \nAdd new contact | \n
default-tag-text | \nDefault tag text | \nstring | \n- | \n
Event | \nDescription | \nArguments | \n
---|---|---|
add | \nEmitted when the add button is clicked | \n- | \n
edit | \nEmitted when the edit button is clicked | \ncontact: ContactListItem, index: number | \n
select | \nEmitted when a contact is selected | \ncontact: ContactListItem, index: number | \n
key | \nDescription | \nType | \n
---|---|---|
id | \nID | \nnumber | string | \n
name | \nName | \nstring | \n
tel | \nPhone | \nstring | \n
isDefault | \nIs default contact | \nboolean | undefined | \n
The component exports the following type definitions:
\nimport type { ContactListItem, ContactListProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-contact-list-padding | \nvar(--van-padding-sm) var(--van-padding-sm) 80px | \n- | \n
--van-contact-list-edit-icon-size | \n16px | \n- | \n
--van-contact-list-add-button-z-index | \n999 | \n- | \n
--van-contact-list-radio-color | \nvar(--van-primary-color) | \n- | \n
--van-contact-list-item-padding | \nvar(--van-padding-md) | \n- | \n
\u7528\u4E8E\u5FAA\u73AF\u64AD\u653E\u4E00\u7EC4\u56FE\u7247\u6216\u5185\u5BB9\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Swipe, SwipeItem } from 'vant';\n\nconst app = createApp();\napp.use(Swipe);\napp.use(SwipeItem);\n
\n\u6BCF\u4E2A SwipeItem \u4EE3\u8868\u4E00\u5F20\u8F6E\u64AD\u5361\u7247\uFF0C\u53EF\u4EE5\u901A\u8FC7 autoplay
\u5C5E\u6027\u8BBE\u7F6E\u81EA\u52A8\u8F6E\u64AD\u7684\u95F4\u9694\u3002
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">\n <van-swipe-item>1</van-swipe-item>\n <van-swipe-item>2</van-swipe-item>\n <van-swipe-item>3</van-swipe-item>\n <van-swipe-item>4</van-swipe-item>\n</van-swipe>\n\n<style>\n .my-swipe .van-swipe-item {\n color: #fff;\n font-size: 20px;\n line-height: 150px;\n text-align: center;\n background-color: #39a9ed;\n }\n</style>\n
\n\u5F53 Swipe \u4E2D\u542B\u6709\u56FE\u7247\u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7 lazy-render
\u5C5E\u6027\u6765\u5F00\u542F\u61D2\u52A0\u8F7D\u6A21\u5F0F\u3002\u5728\u61D2\u52A0\u8F7D\u6A21\u5F0F\u4E0B\uFF0C\u53EA\u4F1A\u6E32\u67D3\u5F53\u524D\u9875\u548C\u4E0B\u4E00\u9875\u3002
<van-swipe :autoplay="3000" lazy-render>\n <van-swipe-item v-for="image in images" :key="image">\n <img :src="image" />\n </van-swipe-item>\n</van-swipe>\n
\nexport default {\n setup() {\n const images = [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n ];\n return { images };\n },\n};\n
\n\u5728\u6BCF\u4E00\u9875\u8F6E\u64AD\u7ED3\u675F\u540E\uFF0C\u4F1A\u89E6\u53D1 change
\u4E8B\u4EF6\u3002
<van-swipe @change="onChange">\n <van-swipe-item>1</van-swipe-item>\n <van-swipe-item>2</van-swipe-item>\n <van-swipe-item>3</van-swipe-item>\n <van-swipe-item>4</van-swipe-item>\n</van-swipe>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onChange = (index) => showToast('\u5F53\u524D Swipe \u7D22\u5F15\uFF1A' + index);\n return { onChange };\n },\n};\n
\n\u8BBE\u7F6E vertical
\u5C5E\u6027\u540E\u6ED1\u5757\u4F1A\u7EB5\u5411\u6392\u5217\uFF0C\u6B64\u65F6\u9700\u8981\u6307\u5B9A\u6ED1\u5757\u5BB9\u5668\u7684\u9AD8\u5EA6\u3002
<van-swipe style="height: 200px;" vertical>\n <van-swipe-item>1</van-swipe-item>\n <van-swipe-item>2</van-swipe-item>\n <van-swipe-item>3</van-swipe-item>\n <van-swipe-item>4</van-swipe-item>\n</van-swipe>\n
\n\u6ED1\u5757\u9ED8\u8BA4\u5BBD\u5EA6\u4E3A 100%
\uFF0C\u53EF\u4EE5\u901A\u8FC7 width
\u5C5E\u6027\u8BBE\u7F6E\u5355\u4E2A\u6ED1\u5757\u7684\u5BBD\u5EA6\u3002\u7EB5\u5411\u6EDA\u52A8\u6A21\u5F0F\u4E0B\uFF0C\u53EF\u4EE5\u901A\u8FC7 height
\u5C5E\u6027\u8BBE\u7F6E\u5355\u4E2A\u6ED1\u5757\u7684\u9AD8\u5EA6\u3002
<van-swipe :loop="false" :width="300">\n <van-swipe-item>1</van-swipe-item>\n <van-swipe-item>2</van-swipe-item>\n <van-swipe-item>3</van-swipe-item>\n <van-swipe-item>4</van-swipe-item>\n</van-swipe>\n
\n\n\n\u76EE\u524D\u4E0D\u652F\u6301\u5728\u5FAA\u73AF\u6EDA\u52A8\u6A21\u5F0F\u4E0B\u81EA\u5B9A\u4E49\u6ED1\u5757\u5927\u5C0F\uFF0C\u56E0\u6B64\u9700\u8981\u5C06 loop \u8BBE\u7F6E\u4E3A false\u3002
\n
\u901A\u8FC7 indicator
\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u6307\u793A\u5668\u7684\u6837\u5F0F\u3002
<van-swipe>\n <van-swipe-item>1</van-swipe-item>\n <van-swipe-item>2</van-swipe-item>\n <van-swipe-item>3</van-swipe-item>\n <van-swipe-item>4</van-swipe-item>\n <template #indicator="{ active, total }">\n <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>\n </template>\n</van-swipe>\n\n<style>\n .custom-indicator {\n position: absolute;\n right: 5px;\n bottom: 5px;\n padding: 2px 5px;\n font-size: 12px;\n background: rgba(0, 0, 0, 0.1);\n }\n</style>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
autoplay | \n\u81EA\u52A8\u8F6E\u64AD\u95F4\u9694\uFF0C\u5355\u4F4D\u4E3A ms | \nnumber | string | \n- | \n
duration | \n\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u4E3A ms | \nnumber | string | \n500 | \n
initial-swipe | \n\u521D\u59CB\u4F4D\u7F6E\u7D22\u5F15\u503C | \nnumber | string | \n0 | \n
width | \n\u6ED1\u5757\u5BBD\u5EA6\uFF0C\u5355\u4F4D\u4E3A px | \nnumber | string | \nauto | \n
height | \n\u6ED1\u5757\u9AD8\u5EA6\uFF0C\u5355\u4F4D\u4E3A px | \nnumber | string | \nauto | \n
loop | \n\u662F\u5426\u5F00\u542F\u5FAA\u73AF\u64AD\u653E | \nboolean | \ntrue | \n
show-indicators | \n\u662F\u5426\u663E\u793A\u6307\u793A\u5668 | \nboolean | \ntrue | \n
vertical | \n\u662F\u5426\u4E3A\u7EB5\u5411\u6EDA\u52A8 | \nboolean | \nfalse | \n
touchable | \n\u662F\u5426\u53EF\u4EE5\u901A\u8FC7\u624B\u52BF\u6ED1\u52A8 | \nboolean | \ntrue | \n
stop-propagation | \n\u662F\u5426\u963B\u6B62\u6ED1\u52A8\u4E8B\u4EF6\u5192\u6CE1 | \nboolean | \ntrue | \n
lazy-render | \n\u662F\u5426\u5EF6\u8FDF\u6E32\u67D3\u672A\u5C55\u793A\u7684\u8F6E\u64AD | \nboolean | \nfalse | \n
indicator-color | \n\u6307\u793A\u5668\u989C\u8272 | \nstring | \n#1989fa | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u6BCF\u4E00\u9875\u8F6E\u64AD\u7ED3\u675F\u540E\u89E6\u53D1 | \nindex: number | \n
drag-start v4.0.9 | \n\u5F53\u7528\u6237\u5F00\u59CB\u62D6\u52A8\u8F6E\u64AD\u7EC4\u4EF6\u65F6\u89E6\u53D1 | \n{ index: number } | \n
drag-end v4.0.9 | \n\u5F53\u7528\u6237\u7ED3\u675F\u62D6\u52A8\u8F6E\u64AD\u7EC4\u4EF6\u65F6\u89E6\u53D1 | \n{ index: number } | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Swipe \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
prev | \n\u5207\u6362\u5230\u4E0A\u4E00\u8F6E\u64AD | \n- | \n- | \n
next | \n\u5207\u6362\u5230\u4E0B\u4E00\u8F6E\u64AD | \n- | \n- | \n
swipeTo | \n\u5207\u6362\u5230\u6307\u5B9A\u4F4D\u7F6E | \nindex: number, options: SwipeToOptions | \n- | \n
resize | \n\u5916\u5C42\u5143\u7D20\u5927\u5C0F\u6216\u7EC4\u4EF6\u663E\u793A\u72B6\u6001\u53D8\u5316\u65F6\uFF0C\u53EF\u4EE5\u8C03\u7528\u6B64\u65B9\u6CD5\u6765\u89E6\u53D1\u91CD\u7ED8 | \n- | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { SwipeProps, SwipeInstance, SwipeToOptions } from 'vant';\n
\nSwipeInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { SwipeInstance } from 'vant';\n\nconst swipeRef = ref<SwipeInstance>();\n\nswipeRef.value?.next();\n
\n\u540D\u79F0 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
immediate | \n\u662F\u5426\u8DF3\u8FC7\u52A8\u753B | \nboolean | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
default | \n\u8F6E\u64AD\u5185\u5BB9 | \n- | \n
indicator | \n\u81EA\u5B9A\u4E49\u6307\u793A\u5668 | \n{ active: number, total: number } | \n
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-swipe-indicator-size | \n6px | \n- | \n
--van-swipe-indicator-margin | \nvar(--van-padding-sm) | \n- | \n
--van-swipe-indicator-active-opacity | \n1 | \n- | \n
--van-swipe-indicator-inactive-opacity | \n0.3 | \n- | \n
--van-swipe-indicator-active-background | \nvar(--van-primary-color) | \n- | \n
--van-swipe-indicator-inactive-background | \nvar(--van-border-color) | \n- | \n
\u8FD9\u79CD\u60C5\u51B5\u901A\u5E38\u662F\u7531\u4E8E\u9879\u76EE\u4E2D\u5F15\u5165\u4E86 fastclick
\u5E93\u5BFC\u81F4\u7684\u3002fastclick
\u7684\u539F\u7406\u662F\u901A\u8FC7 Touch \u4E8B\u4EF6\u6A21\u62DF\u51FA click \u4E8B\u4EF6\uFF0C\u800C Swipe \u5185\u90E8\u9ED8\u8BA4\u4F1A\u963B\u6B62 touchmove \u4E8B\u4EF6\u5192\u6CE1\uFF0C\u5E72\u6270\u4E86 fastclick \u7684\u5224\u65AD\uFF0C\u5BFC\u81F4\u51FA\u73B0\u8FD9\u4E2A\u95EE\u9898\u3002
\u5C06 Swipe \u7EC4\u4EF6\u7684 stop-propagation \u5C5E\u6027\u8BBE\u7F6E\u4E3A false \u5373\u53EF\u907F\u514D\u8BE5\u95EE\u9898\u3002
\n\u53C2\u89C1\u684C\u9762\u7AEF\u9002\u914D\u3002
\nVant \u4E2D\u7684 Swipe \u7EC4\u4EF6\u662F\u6BD4\u8F83\u8F7B\u91CF\u7684\uFF0C\u56E0\u6B64\u529F\u80FD\u4E5F\u6BD4\u8F83\u57FA\u7840\u3002\u5982\u679C\u9700\u8981\u66F4\u590D\u6742\u7684\u8F6E\u64AD\u6548\u679C\uFF0C\u63A8\u8350\u4F7F\u7528\u793E\u533A\u91CC\u4E00\u4E9B\u4F18\u8D28\u7684\u8F6E\u64AD\u5E93\uFF0C\u6BD4\u5982 vue-awesome-swiper\u3002
\nSwipe \u7EC4\u4EF6\u5728\u6302\u8F7D\u65F6\uFF0C\u4F1A\u83B7\u53D6\u81EA\u8EAB\u7684\u5BBD\u5EA6\uFF0C\u5E76\u8BA1\u7B97\u51FA\u8F6E\u64AD\u56FE\u7684\u4F4D\u7F6E\u3002\u5982\u679C\u7EC4\u4EF6\u4E00\u5F00\u59CB\u5904\u4E8E\u9690\u85CF\u72B6\u6001\uFF0C\u5219\u83B7\u53D6\u5230\u7684\u5BBD\u5EA6\u6C38\u8FDC\u4E3A 0\uFF0C\u56E0\u6B64\u65E0\u6CD5\u6B63\u786E\u8BA1\u7B97\u4F4D\u7F6E\u3002
\n\u65B9\u6CD5\u4E00\uFF0C\u5982\u679C\u662F\u4F7F\u7528 v-show
\u6765\u63A7\u5236\u7EC4\u4EF6\u5C55\u793A\u7684\uFF0C\u5219\u66FF\u6362\u4E3A v-if
\u5373\u53EF\u89E3\u51B3\u6B64\u95EE\u9898\uFF1A
<!-- Before -->\n<van-swipe v-show="show" />\n<!-- After -->\n<van-swipe v-if="show" />\n
\n\u65B9\u6CD5\u4E8C\uFF0C\u8C03\u7528\u7EC4\u4EF6\u7684 resize \u65B9\u6CD5\u6765\u4E3B\u52A8\u89E6\u53D1\u91CD\u7ED8\uFF1A
\n<van-swipe v-show="show" ref="swipe" />\n
\nthis.$refs.swipe.resize();\n
\n\u7528\u4E8E\u5FAA\u73AF\u64AD\u653E\u4E00\u7EC4\u56FE\u7247\u6216\u5185\u5BB9\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Swipe, SwipeItem } from 'vant';\n\nconst app = createApp();\napp.use(Swipe);\napp.use(SwipeItem);\n
\n\u6BCF\u4E2A SwipeItem \u4EE3\u8868\u4E00\u5F20\u8F6E\u64AD\u5361\u7247\uFF0C\u53EF\u4EE5\u901A\u8FC7 autoplay
\u5C5E\u6027\u8BBE\u7F6E\u81EA\u52A8\u8F6E\u64AD\u7684\u95F4\u9694\u3002
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">\n <van-swipe-item>1</van-swipe-item>\n <van-swipe-item>2</van-swipe-item>\n <van-swipe-item>3</van-swipe-item>\n <van-swipe-item>4</van-swipe-item>\n</van-swipe>\n\n<style>\n .my-swipe .van-swipe-item {\n color: #fff;\n font-size: 20px;\n line-height: 150px;\n text-align: center;\n background-color: #39a9ed;\n }\n</style>\n
\n\u5F53 Swipe \u4E2D\u542B\u6709\u56FE\u7247\u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7 lazy-render
\u5C5E\u6027\u6765\u5F00\u542F\u61D2\u52A0\u8F7D\u6A21\u5F0F\u3002\u5728\u61D2\u52A0\u8F7D\u6A21\u5F0F\u4E0B\uFF0C\u53EA\u4F1A\u6E32\u67D3\u5F53\u524D\u9875\u548C\u4E0B\u4E00\u9875\u3002
<van-swipe :autoplay="3000" lazy-render>\n <van-swipe-item v-for="image in images" :key="image">\n <img :src="image" />\n </van-swipe-item>\n</van-swipe>\n
\nexport default {\n setup() {\n const images = [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n ];\n return { images };\n },\n};\n
\n\u5728\u6BCF\u4E00\u9875\u8F6E\u64AD\u7ED3\u675F\u540E\uFF0C\u4F1A\u89E6\u53D1 change
\u4E8B\u4EF6\u3002
<van-swipe @change="onChange">\n <van-swipe-item>1</van-swipe-item>\n <van-swipe-item>2</van-swipe-item>\n <van-swipe-item>3</van-swipe-item>\n <van-swipe-item>4</van-swipe-item>\n</van-swipe>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onChange = (index) => showToast('\u5F53\u524D Swipe \u7D22\u5F15\uFF1A' + index);\n return { onChange };\n },\n};\n
\n\u8BBE\u7F6E vertical
\u5C5E\u6027\u540E\u6ED1\u5757\u4F1A\u7EB5\u5411\u6392\u5217\uFF0C\u6B64\u65F6\u9700\u8981\u6307\u5B9A\u6ED1\u5757\u5BB9\u5668\u7684\u9AD8\u5EA6\u3002
<van-swipe style="height: 200px;" vertical>\n <van-swipe-item>1</van-swipe-item>\n <van-swipe-item>2</van-swipe-item>\n <van-swipe-item>3</van-swipe-item>\n <van-swipe-item>4</van-swipe-item>\n</van-swipe>\n
\n\u6ED1\u5757\u9ED8\u8BA4\u5BBD\u5EA6\u4E3A 100%
\uFF0C\u53EF\u4EE5\u901A\u8FC7 width
\u5C5E\u6027\u8BBE\u7F6E\u5355\u4E2A\u6ED1\u5757\u7684\u5BBD\u5EA6\u3002\u7EB5\u5411\u6EDA\u52A8\u6A21\u5F0F\u4E0B\uFF0C\u53EF\u4EE5\u901A\u8FC7 height
\u5C5E\u6027\u8BBE\u7F6E\u5355\u4E2A\u6ED1\u5757\u7684\u9AD8\u5EA6\u3002
<van-swipe :loop="false" :width="300">\n <van-swipe-item>1</van-swipe-item>\n <van-swipe-item>2</van-swipe-item>\n <van-swipe-item>3</van-swipe-item>\n <van-swipe-item>4</van-swipe-item>\n</van-swipe>\n
\n\n\n\u76EE\u524D\u4E0D\u652F\u6301\u5728\u5FAA\u73AF\u6EDA\u52A8\u6A21\u5F0F\u4E0B\u81EA\u5B9A\u4E49\u6ED1\u5757\u5927\u5C0F\uFF0C\u56E0\u6B64\u9700\u8981\u5C06 loop \u8BBE\u7F6E\u4E3A false\u3002
\n
\u901A\u8FC7 indicator
\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u6307\u793A\u5668\u7684\u6837\u5F0F\u3002
<van-swipe>\n <van-swipe-item>1</van-swipe-item>\n <van-swipe-item>2</van-swipe-item>\n <van-swipe-item>3</van-swipe-item>\n <van-swipe-item>4</van-swipe-item>\n <template #indicator="{ active, total }">\n <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>\n </template>\n</van-swipe>\n\n<style>\n .custom-indicator {\n position: absolute;\n right: 5px;\n bottom: 5px;\n padding: 2px 5px;\n font-size: 12px;\n background: rgba(0, 0, 0, 0.1);\n }\n</style>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
autoplay | \n\u81EA\u52A8\u8F6E\u64AD\u95F4\u9694\uFF0C\u5355\u4F4D\u4E3A ms | \nnumber | string | \n- | \n
duration | \n\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u4E3A ms | \nnumber | string | \n500 | \n
initial-swipe | \n\u521D\u59CB\u4F4D\u7F6E\u7D22\u5F15\u503C | \nnumber | string | \n0 | \n
width | \n\u6ED1\u5757\u5BBD\u5EA6\uFF0C\u5355\u4F4D\u4E3A px | \nnumber | string | \nauto | \n
height | \n\u6ED1\u5757\u9AD8\u5EA6\uFF0C\u5355\u4F4D\u4E3A px | \nnumber | string | \nauto | \n
loop | \n\u662F\u5426\u5F00\u542F\u5FAA\u73AF\u64AD\u653E | \nboolean | \ntrue | \n
show-indicators | \n\u662F\u5426\u663E\u793A\u6307\u793A\u5668 | \nboolean | \ntrue | \n
vertical | \n\u662F\u5426\u4E3A\u7EB5\u5411\u6EDA\u52A8 | \nboolean | \nfalse | \n
touchable | \n\u662F\u5426\u53EF\u4EE5\u901A\u8FC7\u624B\u52BF\u6ED1\u52A8 | \nboolean | \ntrue | \n
stop-propagation | \n\u662F\u5426\u963B\u6B62\u6ED1\u52A8\u4E8B\u4EF6\u5192\u6CE1 | \nboolean | \ntrue | \n
lazy-render | \n\u662F\u5426\u5EF6\u8FDF\u6E32\u67D3\u672A\u5C55\u793A\u7684\u8F6E\u64AD | \nboolean | \nfalse | \n
indicator-color | \n\u6307\u793A\u5668\u989C\u8272 | \nstring | \n#1989fa | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u6BCF\u4E00\u9875\u8F6E\u64AD\u7ED3\u675F\u540E\u89E6\u53D1 | \nindex: number | \n
drag-start v4.0.9 | \n\u5F53\u7528\u6237\u5F00\u59CB\u62D6\u52A8\u8F6E\u64AD\u7EC4\u4EF6\u65F6\u89E6\u53D1 | \n{ index: number } | \n
drag-end v4.0.9 | \n\u5F53\u7528\u6237\u7ED3\u675F\u62D6\u52A8\u8F6E\u64AD\u7EC4\u4EF6\u65F6\u89E6\u53D1 | \n{ index: number } | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Swipe \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
prev | \n\u5207\u6362\u5230\u4E0A\u4E00\u8F6E\u64AD | \n- | \n- | \n
next | \n\u5207\u6362\u5230\u4E0B\u4E00\u8F6E\u64AD | \n- | \n- | \n
swipeTo | \n\u5207\u6362\u5230\u6307\u5B9A\u4F4D\u7F6E | \nindex: number, options: SwipeToOptions | \n- | \n
resize | \n\u5916\u5C42\u5143\u7D20\u5927\u5C0F\u6216\u7EC4\u4EF6\u663E\u793A\u72B6\u6001\u53D8\u5316\u65F6\uFF0C\u53EF\u4EE5\u8C03\u7528\u6B64\u65B9\u6CD5\u6765\u89E6\u53D1\u91CD\u7ED8 | \n- | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { SwipeProps, SwipeInstance, SwipeToOptions } from 'vant';\n
\nSwipeInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { SwipeInstance } from 'vant';\n\nconst swipeRef = ref<SwipeInstance>();\n\nswipeRef.value?.next();\n
\n\u540D\u79F0 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
immediate | \n\u662F\u5426\u8DF3\u8FC7\u52A8\u753B | \nboolean | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
default | \n\u8F6E\u64AD\u5185\u5BB9 | \n- | \n
indicator | \n\u81EA\u5B9A\u4E49\u6307\u793A\u5668 | \n{ active: number, total: number } | \n
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-swipe-indicator-size | \n6px | \n- | \n
--van-swipe-indicator-margin | \nvar(--van-padding-sm) | \n- | \n
--van-swipe-indicator-active-opacity | \n1 | \n- | \n
--van-swipe-indicator-inactive-opacity | \n0.3 | \n- | \n
--van-swipe-indicator-active-background | \nvar(--van-primary-color) | \n- | \n
--van-swipe-indicator-inactive-background | \nvar(--van-border-color) | \n- | \n
\u8FD9\u79CD\u60C5\u51B5\u901A\u5E38\u662F\u7531\u4E8E\u9879\u76EE\u4E2D\u5F15\u5165\u4E86 fastclick
\u5E93\u5BFC\u81F4\u7684\u3002fastclick
\u7684\u539F\u7406\u662F\u901A\u8FC7 Touch \u4E8B\u4EF6\u6A21\u62DF\u51FA click \u4E8B\u4EF6\uFF0C\u800C Swipe \u5185\u90E8\u9ED8\u8BA4\u4F1A\u963B\u6B62 touchmove \u4E8B\u4EF6\u5192\u6CE1\uFF0C\u5E72\u6270\u4E86 fastclick \u7684\u5224\u65AD\uFF0C\u5BFC\u81F4\u51FA\u73B0\u8FD9\u4E2A\u95EE\u9898\u3002
\u5C06 Swipe \u7EC4\u4EF6\u7684 stop-propagation \u5C5E\u6027\u8BBE\u7F6E\u4E3A false \u5373\u53EF\u907F\u514D\u8BE5\u95EE\u9898\u3002
\n\u53C2\u89C1\u684C\u9762\u7AEF\u9002\u914D\u3002
\nVant \u4E2D\u7684 Swipe \u7EC4\u4EF6\u662F\u6BD4\u8F83\u8F7B\u91CF\u7684\uFF0C\u56E0\u6B64\u529F\u80FD\u4E5F\u6BD4\u8F83\u57FA\u7840\u3002\u5982\u679C\u9700\u8981\u66F4\u590D\u6742\u7684\u8F6E\u64AD\u6548\u679C\uFF0C\u63A8\u8350\u4F7F\u7528\u793E\u533A\u91CC\u4E00\u4E9B\u4F18\u8D28\u7684\u8F6E\u64AD\u5E93\uFF0C\u6BD4\u5982 vue-awesome-swiper\u3002
\nSwipe \u7EC4\u4EF6\u5728\u6302\u8F7D\u65F6\uFF0C\u4F1A\u83B7\u53D6\u81EA\u8EAB\u7684\u5BBD\u5EA6\uFF0C\u5E76\u8BA1\u7B97\u51FA\u8F6E\u64AD\u56FE\u7684\u4F4D\u7F6E\u3002\u5982\u679C\u7EC4\u4EF6\u4E00\u5F00\u59CB\u5904\u4E8E\u9690\u85CF\u72B6\u6001\uFF0C\u5219\u83B7\u53D6\u5230\u7684\u5BBD\u5EA6\u6C38\u8FDC\u4E3A 0\uFF0C\u56E0\u6B64\u65E0\u6CD5\u6B63\u786E\u8BA1\u7B97\u4F4D\u7F6E\u3002
\n\u65B9\u6CD5\u4E00\uFF0C\u5982\u679C\u662F\u4F7F\u7528 v-show
\u6765\u63A7\u5236\u7EC4\u4EF6\u5C55\u793A\u7684\uFF0C\u5219\u66FF\u6362\u4E3A v-if
\u5373\u53EF\u89E3\u51B3\u6B64\u95EE\u9898\uFF1A
<!-- Before -->\n<van-swipe v-show="show" />\n<!-- After -->\n<van-swipe v-if="show" />\n
\n\u65B9\u6CD5\u4E8C\uFF0C\u8C03\u7528\u7EC4\u4EF6\u7684 resize \u65B9\u6CD5\u6765\u4E3B\u52A8\u89E6\u53D1\u91CD\u7ED8\uFF1A
\n<van-swipe v-show="show" ref="swipe" />\n
\nthis.$refs.swipe.resize();\n
\nA panel that floats at the bottom of a page, which can be dragged up and down to browse content, often used to provide additional functionality or information. Please upgrade vant
to >= v4.5.0 before using this component.
Register component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { FloatingPanel } from 'vant';\n\nconst app = createApp();\napp.use(FloatingPanel);\n
\nThe default height of FloatingPanel is 100px
, and users can drag it to expand the panel to a height of 60%
of the screen height.
<van-floating-panel>\n <van-cell-group>\n <van-cell\n v-for="i in 26"\n :key="i"\n :title="String.fromCharCode(i + 64)"\n size="large"\n />\n </van-cell-group>\n</van-floating-panel>\n
\nYou can set the anchor position of FloatingPanel through the anchors
attribute, and control the display height of the current panel through v-model:height
.
For example, you can make the panel stop at three positions: 100px
, 40% of the screen height, and 70% of the screen height.
<van-floating-panel v-model:height="height" :anchors="anchors">\n <div style="text-align: center; padding: 15px">\n <p>Panel Show Height {{ height.toFixed(0) }} px</p>\n </div>\n</van-floating-panel>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const anchors = [\n 100,\n Math.round(0.4 * window.innerHeight),\n Math.round(0.7 * window.innerHeight),\n ];\n const height = ref(anchors[0]);\n\n return { anchors, height };\n },\n};\n
\nBy default, both the header and content areas of FloatingPanel can be dragged, but you can disable dragging of the content area through the content-draggable
attribute.
<van-floating-panel :content-draggable="false">\n <div style="text-align: center; padding: 15px">\n <p>Content cannot be dragged</p>\n </div>\n</van-floating-panel>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:height | \nThe current display height of the panel | \nnumber | string | \n0 | \n
anchors | \nSetting custom anchors, unit px | \nnumber[] | \n[100, window.innerWidth * 0.6] | \n
duration | \nTransition duration, unit second | \nnumber | string | \n0.3 | \n
content-draggable | \nAllow dragging content | \nboolean | \ntrue | \n
lock-scroll v4.6.4 | \nWhen not dragging, Whether to lock background scroll | \nboolean | \nfalse | \n
safe-area-inset-bottom | \nWhether to enable bottom safe area adaptation | \nboolean | \ntrue | \n
Event | \nDescription | \nArguments | \n
---|---|---|
height-change | \nEmitted when panel height is changed and the dragging is finished | \n{ height: number } | \n
Name | \nDescription | \n
---|---|
default | \nCustom panel content | \n
The component exports the following type definitions:
\nimport type { FloatingPanelProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-floating-panel-border-radius | \n16px | \n- | \n
--van-floating-panel-header-height | \n30px | \n- | \n
--van-floating-panel-z-index | \n999 | \n- | \n
--van-floating-panel-background | \nvar(--van-background-2) | \n- | \n
--van-floating-panel-bar-width | \n20px | \n- | \n
--van-floating-panel-bar-height | \n3px | \n- | \n
--van-floating-panel-bar-color | \nvar(--van-gray-5) | \n- | \n
A panel that floats at the bottom of a page, which can be dragged up and down to browse content, often used to provide additional functionality or information. Please upgrade vant
to >= v4.5.0 before using this component.
Register component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { FloatingPanel } from 'vant';\n\nconst app = createApp();\napp.use(FloatingPanel);\n
\nThe default height of FloatingPanel is 100px
, and users can drag it to expand the panel to a height of 60%
of the screen height.
<van-floating-panel>\n <van-cell-group>\n <van-cell\n v-for="i in 26"\n :key="i"\n :title="String.fromCharCode(i + 64)"\n size="large"\n />\n </van-cell-group>\n</van-floating-panel>\n
\nYou can set the anchor position of FloatingPanel through the anchors
attribute, and control the display height of the current panel through v-model:height
.
For example, you can make the panel stop at three positions: 100px
, 40% of the screen height, and 70% of the screen height.
<van-floating-panel v-model:height="height" :anchors="anchors">\n <div style="text-align: center; padding: 15px">\n <p>Panel Show Height {{ height.toFixed(0) }} px</p>\n </div>\n</van-floating-panel>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const anchors = [\n 100,\n Math.round(0.4 * window.innerHeight),\n Math.round(0.7 * window.innerHeight),\n ];\n const height = ref(anchors[0]);\n\n return { anchors, height };\n },\n};\n
\nBy default, both the header and content areas of FloatingPanel can be dragged, but you can disable dragging of the content area through the content-draggable
attribute.
<van-floating-panel :content-draggable="false">\n <div style="text-align: center; padding: 15px">\n <p>Content cannot be dragged</p>\n </div>\n</van-floating-panel>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:height | \nThe current display height of the panel | \nnumber | string | \n0 | \n
anchors | \nSetting custom anchors, unit px | \nnumber[] | \n[100, window.innerWidth * 0.6] | \n
duration | \nTransition duration, unit second | \nnumber | string | \n0.3 | \n
content-draggable | \nAllow dragging content | \nboolean | \ntrue | \n
lock-scroll v4.6.4 | \nWhen not dragging, Whether to lock background scroll | \nboolean | \nfalse | \n
safe-area-inset-bottom | \nWhether to enable bottom safe area adaptation | \nboolean | \ntrue | \n
Event | \nDescription | \nArguments | \n
---|---|---|
height-change | \nEmitted when panel height is changed and the dragging is finished | \n{ height: number } | \n
Name | \nDescription | \n
---|---|
default | \nCustom panel content | \n
The component exports the following type definitions:
\nimport type { FloatingPanelProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-floating-panel-border-radius | \n16px | \n- | \n
--van-floating-panel-header-height | \n30px | \n- | \n
--van-floating-panel-z-index | \n999 | \n- | \n
--van-floating-panel-background | \nvar(--van-background-2) | \n- | \n
--van-floating-panel-bar-width | \n20px | \n- | \n
--van-floating-panel-bar-height | \n3px | \n- | \n
--van-floating-panel-bar-color | \nvar(--van-gray-5) | \n- | \n
Circular progress bar component, and supports gradient color animation.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Circle } from 'vant';\n\nconst app = createApp();\napp.use(Circle);\n
\n<van-circle\n v-model:current-rate="currentRate"\n :rate="30"\n :speed="100"\n :text="text"\n/>\n
\nimport { ref, computed } from 'vue';\n\nexport default {\n setup() {\n const currentRate = ref(0);\n const text = computed(() => currentRate.value.toFixed(0) + '%');\n\n return {\n text,\n currentRate,\n };\n },\n};\n
\nThe width of the progress bar is controlled by the stroke-width
prop, stroke-width
refers to the width of path
in SVG, and the default value is 40
.
<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n :stroke-width="60"\n text="Custom Width"\n/>\n
\nThe unit of stroke-width
is not px
, if you want to know the relationship between stroke-width
and px
, you can use the following formula to calculate:
// viewBox size for SVG\nconst viewBox = 1000 + strokeWidth;\n\n// The width of the Circle component, the default is 100px\nconst circleWidth = 100;\n\n// Final rendered progress bar width (px)\nconst pxWidth = (strokeWidth * circleWidth) / viewBox;\n
\n<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n layer-color="#ebedf0"\n text="Custom Color"\n/>\n
\n<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n :color="gradientColor"\n text="Gradient"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentRate = ref(0);\n const gradientColor = {\n '0%': '#3fecff',\n '100%': '#6149f6',\n };\n\n return {\n currentRate,\n gradientColor,\n };\n },\n};\n
\n<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n :clockwise="false"\n text="Counter Clockwise"\n/>\n
\n<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n size="120px"\n text="Custom Size"\n/>\n
\n<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n text="Left"\n start-position="left"\n/>\n<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n text="Right"\n start-position="right"\n/>\n<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n text="Bottom"\n start-position="bottom"\n/>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:current-rate | \nCurrent rate | \nnumber | \n- | \n
rate | \nTarget rate | \nnumber | string | \n100 | \n
size | \nCircle size | \nnumber | string | \n100px | \n
color | \nProgress color, passing object to render gradient | \nstring | object | \n#1989fa | \n
layer-color | \nLayer color | \nstring | \nwhite | \n
fill | \nFill color | \nstring | \nnone | \n
speed | \nAnimate speed\uFF08rate/s\uFF09 | \nnumber | string | \n0 | \n
text | \nText | \nstring | \n- | \n
stroke-width | \nStroke width | \nnumber | string | \n40 | \n
stroke-linecap | \nStroke linecap, can be set to square butt | \nstring | \nround | \n
clockwise | \nWhether to be clockwise | \nboolean | \ntrue | \n
start-position | \nProgress start position, can be set to left \u3001right \u3001bottom | \nCircleStartPosition | \ntop | \n
Name | \nDescription | \n
---|---|
default | \ncustom text content | \n
The component exports the following type definitions:
\nimport type { CircleProps, CircleStartPosition } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-circle-size | \n100px | \n- | \n
--van-circle-color | \nvar(--van-primary-color) | \n- | \n
--van-circle-layer-color | \nvar(--van-white) | \n- | \n
--van-circle-text-color | \nvar(--van-text-color) | \n- | \n
--van-circle-text-font-weight | \nvar(--van-font-bold) | \n- | \n
--van-circle-text-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-circle-text-line-height | \nvar(--van-line-height-md) | \n- | \n
Circular progress bar component, and supports gradient color animation.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Circle } from 'vant';\n\nconst app = createApp();\napp.use(Circle);\n
\n<van-circle\n v-model:current-rate="currentRate"\n :rate="30"\n :speed="100"\n :text="text"\n/>\n
\nimport { ref, computed } from 'vue';\n\nexport default {\n setup() {\n const currentRate = ref(0);\n const text = computed(() => currentRate.value.toFixed(0) + '%');\n\n return {\n text,\n currentRate,\n };\n },\n};\n
\nThe width of the progress bar is controlled by the stroke-width
prop, stroke-width
refers to the width of path
in SVG, and the default value is 40
.
<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n :stroke-width="60"\n text="Custom Width"\n/>\n
\nThe unit of stroke-width
is not px
, if you want to know the relationship between stroke-width
and px
, you can use the following formula to calculate:
// viewBox size for SVG\nconst viewBox = 1000 + strokeWidth;\n\n// The width of the Circle component, the default is 100px\nconst circleWidth = 100;\n\n// Final rendered progress bar width (px)\nconst pxWidth = (strokeWidth * circleWidth) / viewBox;\n
\n<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n layer-color="#ebedf0"\n text="Custom Color"\n/>\n
\n<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n :color="gradientColor"\n text="Gradient"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentRate = ref(0);\n const gradientColor = {\n '0%': '#3fecff',\n '100%': '#6149f6',\n };\n\n return {\n currentRate,\n gradientColor,\n };\n },\n};\n
\n<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n :clockwise="false"\n text="Counter Clockwise"\n/>\n
\n<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n size="120px"\n text="Custom Size"\n/>\n
\n<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n text="Left"\n start-position="left"\n/>\n<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n text="Right"\n start-position="right"\n/>\n<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n text="Bottom"\n start-position="bottom"\n/>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:current-rate | \nCurrent rate | \nnumber | \n- | \n
rate | \nTarget rate | \nnumber | string | \n100 | \n
size | \nCircle size | \nnumber | string | \n100px | \n
color | \nProgress color, passing object to render gradient | \nstring | object | \n#1989fa | \n
layer-color | \nLayer color | \nstring | \nwhite | \n
fill | \nFill color | \nstring | \nnone | \n
speed | \nAnimate speed\uFF08rate/s\uFF09 | \nnumber | string | \n0 | \n
text | \nText | \nstring | \n- | \n
stroke-width | \nStroke width | \nnumber | string | \n40 | \n
stroke-linecap | \nStroke linecap, can be set to square butt | \nstring | \nround | \n
clockwise | \nWhether to be clockwise | \nboolean | \ntrue | \n
start-position | \nProgress start position, can be set to left \u3001right \u3001bottom | \nCircleStartPosition | \ntop | \n
Name | \nDescription | \n
---|---|
default | \ncustom text content | \n
The component exports the following type definitions:
\nimport type { CircleProps, CircleStartPosition } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-circle-size | \n100px | \n- | \n
--van-circle-color | \nvar(--van-primary-color) | \n- | \n
--van-circle-layer-color | \nvar(--van-white) | \n- | \n
--van-circle-text-color | \nvar(--van-text-color) | \n- | \n
--van-circle-text-font-weight | \nvar(--van-font-bold) | \n- | \n
--van-circle-text-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-circle-text-line-height | \nvar(--van-line-height-md) | \n- | \n
Used for cell components that can slide left and right to display operation buttons.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { SwipeCell } from 'vant';\n\nconst app = createApp();\napp.use(SwipeCell);\n
\n<van-swipe-cell>\n <template #left>\n <van-button square type="primary" text="Select" />\n </template>\n <van-cell :border="false" title="Cell" value="Cell Content" />\n <template #right>\n <van-button square type="danger" text="Delete" />\n <van-button square type="primary" text="Collect" />\n </template>\n</van-swipe-cell>\n
\n<van-swipe-cell>\n <van-card\n num="2"\n price="2.00"\n desc="Description"\n title="Title"\n class="goods-card"\n thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"\n />\n <template #right>\n <van-button square text="Delete" type="danger" class="delete-button" />\n </template>\n</van-swipe-cell>\n\n<style>\n .goods-card {\n margin: 0;\n background-color: @white;\n }\n\n .delete-button {\n height: 100%;\n }\n</style>\n
\n<van-swipe-cell :before-close="beforeClose">\n <template #left>\n <van-button square type="primary" text="Select" />\n </template>\n <van-cell :border="false" title="Cell" value="Cell Content" />\n <template #right>\n <van-button square type="danger" text="Delete" />\n </template>\n</van-swipe-cell>\n
\nimport { showConfirmDialog } from 'vant';\n\nexport default {\n setup() {\n const beforeClose = ({ position }) => {\n switch (position) {\n case 'left':\n case 'cell':\n case 'outside':\n return true;\n case 'right':\n return new Promise((resolve) => {\n showConfirmDialog({\n title: 'Are you sure to delete?',\n })\n .then(() => resolve(true))\n .catch(() => resolve(false));\n });\n }\n };\n\n return { beforeClose };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
name | \nIdentifier of SwipeCell, usually a unique string or number | \nnumber | string | \n- | \n
left-width | \nWidth of the left swipe area | \nnumber | string | \nauto | \n
right-width | \nWidth of the right swipe area | \nnumber | string | \nauto | \n
before-close | \nCallback function before close | \n(args) => boolean | Promise<boolean> | \n- | \n
disabled | \nWhether to disabled swipe | \nboolean | \nfalse | \n
stop-propagation | \nWhether to stop touchmove event propagation | \nboolean | \nfalse | \n
Name | \nDescription | \n
---|---|
default | \ncustom content | \n
left | \ncontent of left scrollable area | \n
right | \ncontent of right scrollable area | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when SwipeCell is clicked | \nposition: \'left\' | \'right\' | \'cell\' | \'outside\' | \n
open | \nEmitted when SwipeCell is opened | \nvalue: { name: string | number, position: \'left\' | \'right\' } | \n
close | \nEmitted when SwipeCell is closed | \nvalue: { name: string | number, position: \'left\' | \'right\' | \'cell\' | \'outside\' } | \n
Attribute | \nDescription | \nType | \n
---|---|---|
name | \nName | \nstring | number | \n
position | \nClick position | \n\'left\' | \'right\' | \'cell\' | \'outside\' | \n
Use ref to get SwipeCell instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
open | \nopen SwipeCell | \nposition: left | right | \n- | \n
close | \nclose SwipeCell | \n- | \n- | \n
The component exports the following type definitions:
\nimport type {\n SwipeCellSide,\n SwipeCellProps,\n SwipeCellPosition,\n SwipeCellInstance,\n} from 'vant';\n
\nSwipeCellInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { SwipeCellInstance } from 'vant';\n\nconst swipeCellRef = ref<SwipeCellInstance>();\n\nswipeCellRef.value?.close();\n
\nUsed for cell components that can slide left and right to display operation buttons.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { SwipeCell } from 'vant';\n\nconst app = createApp();\napp.use(SwipeCell);\n
\n<van-swipe-cell>\n <template #left>\n <van-button square type="primary" text="Select" />\n </template>\n <van-cell :border="false" title="Cell" value="Cell Content" />\n <template #right>\n <van-button square type="danger" text="Delete" />\n <van-button square type="primary" text="Collect" />\n </template>\n</van-swipe-cell>\n
\n<van-swipe-cell>\n <van-card\n num="2"\n price="2.00"\n desc="Description"\n title="Title"\n class="goods-card"\n thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"\n />\n <template #right>\n <van-button square text="Delete" type="danger" class="delete-button" />\n </template>\n</van-swipe-cell>\n\n<style>\n .goods-card {\n margin: 0;\n background-color: @white;\n }\n\n .delete-button {\n height: 100%;\n }\n</style>\n
\n<van-swipe-cell :before-close="beforeClose">\n <template #left>\n <van-button square type="primary" text="Select" />\n </template>\n <van-cell :border="false" title="Cell" value="Cell Content" />\n <template #right>\n <van-button square type="danger" text="Delete" />\n </template>\n</van-swipe-cell>\n
\nimport { showConfirmDialog } from 'vant';\n\nexport default {\n setup() {\n const beforeClose = ({ position }) => {\n switch (position) {\n case 'left':\n case 'cell':\n case 'outside':\n return true;\n case 'right':\n return new Promise((resolve) => {\n showConfirmDialog({\n title: 'Are you sure to delete?',\n })\n .then(() => resolve(true))\n .catch(() => resolve(false));\n });\n }\n };\n\n return { beforeClose };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
name | \nIdentifier of SwipeCell, usually a unique string or number | \nnumber | string | \n- | \n
left-width | \nWidth of the left swipe area | \nnumber | string | \nauto | \n
right-width | \nWidth of the right swipe area | \nnumber | string | \nauto | \n
before-close | \nCallback function before close | \n(args) => boolean | Promise<boolean> | \n- | \n
disabled | \nWhether to disabled swipe | \nboolean | \nfalse | \n
stop-propagation | \nWhether to stop touchmove event propagation | \nboolean | \nfalse | \n
Name | \nDescription | \n
---|---|
default | \ncustom content | \n
left | \ncontent of left scrollable area | \n
right | \ncontent of right scrollable area | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when SwipeCell is clicked | \nposition: \'left\' | \'right\' | \'cell\' | \'outside\' | \n
open | \nEmitted when SwipeCell is opened | \nvalue: { name: string | number, position: \'left\' | \'right\' } | \n
close | \nEmitted when SwipeCell is closed | \nvalue: { name: string | number, position: \'left\' | \'right\' | \'cell\' | \'outside\' } | \n
Attribute | \nDescription | \nType | \n
---|---|---|
name | \nName | \nstring | number | \n
position | \nClick position | \n\'left\' | \'right\' | \'cell\' | \'outside\' | \n
Use ref to get SwipeCell instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
open | \nopen SwipeCell | \nposition: left | right | \n- | \n
close | \nclose SwipeCell | \n- | \n- | \n
The component exports the following type definitions:
\nimport type {\n SwipeCellSide,\n SwipeCellProps,\n SwipeCellPosition,\n SwipeCellInstance,\n} from 'vant';\n
\nSwipeCellInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { SwipeCellInstance } from 'vant';\n\nconst swipeCellRef = ref<SwipeCellInstance>();\n\nswipeCellRef.value?.close();\n
\nUsed for indexed sorting display and quick positioning of lists.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { IndexBar } from 'vant';\n\nconst app = createApp();\napp.use(IndexBar);\napp.use(IndexAnchor);\n
\n<van-index-bar>\n <van-index-anchor index="A" />\n <van-cell title="Text" />\n <van-cell title="Text" />\n <van-cell title="Text" />\n\n <van-index-anchor index="B" />\n <van-cell title="Text" />\n <van-cell title="Text" />\n <van-cell title="Text" />\n\n ...\n</van-index-bar>\n
\n<van-index-bar :index-list="indexList">\n <van-index-anchor index="1">Title 1</van-index-anchor>\n <van-cell title="Text" />\n <van-cell title="Text" />\n <van-cell title="Text" />\n\n <van-index-anchor index="2">Title 2</van-index-anchor>\n <van-cell title="Text" />\n <van-cell title="Text" />\n <van-cell title="Text" />\n\n ...\n</van-index-bar>\n
\nexport default {\n setup() {\n return {\n indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
index-list | \nIndex List | \n(string | number)[] | \nA-Z | \n
z-index | \nz-index | \nnumber | string | \n1 | \n
sticky | \nWhether to enable anchor sticky top | \nboolean | \ntrue | \n
sticky-offset-top | \nAnchor offset top when sticky | \nnumber | \n0 | \n
highlight-color | \nIndex character highlight color | \nstring | \n#1989fa | \n
teleport | \nSpecifies a target element where IndexBar will be mounted | \nstring | Element | \n- | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
index | \nIndex | \nnumber | string | \n- | \n
Event | \nDescription | \nArguments | \n
---|---|---|
select | \nEmitted when an index is selected | \nindex: number | string | \n
change | \nEmitted when active index changed | \nindex: number | string | \n
Use ref to get IndexBar instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
scrollTo | \nscroll to target element | \nindex: number | string | \n- | \n
The component exports the following type definitions:
\nimport type { IndexBarProps, IndexAnchorProps, IndexBarInstance } from 'vant';\n
\nIndexBarInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { IndexBarInstance } from 'vant';\n\nconst indexBarRef = ref<IndexBarInstance>();\n\nindexBarRef.value?.scrollTo('B');\n
\nName | \nDescription | \n
---|---|
default | \nAnchor content, show index by default | \n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-index-bar-sidebar-z-index | \n2 | \n- | \n
--van-index-bar-index-font-size | \nvar(--van-font-size-xs) | \n- | \n
--van-index-bar-index-line-height | \nvar(--van-line-height-xs) | \n- | \n
--van-index-bar-index-active-color | \nvar(--van-primary-color) | \n- | \n
--van-index-anchor-z-index | \n1 | \n- | \n
--van-index-anchor-padding | \n0 var(--van-padding-md) | \n- | \n
--van-index-anchor-text-color | \nvar(--van-text-color) | \n- | \n
--van-index-anchor-font-weight | \nvar(--van-font-bold) | \n- | \n
--van-index-anchor-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-index-anchor-line-height | \n32px | \n- | \n
--van-index-anchor-background | \ntransparent | \n- | \n
--van-index-anchor-sticky-text-color | \nvar(--van-primary-color) | \n- | \n
--van-index-anchor-sticky-background | \nvar(--van-background-2) | \n- | \n
Used for indexed sorting display and quick positioning of lists.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { IndexBar } from 'vant';\n\nconst app = createApp();\napp.use(IndexBar);\napp.use(IndexAnchor);\n
\n<van-index-bar>\n <van-index-anchor index="A" />\n <van-cell title="Text" />\n <van-cell title="Text" />\n <van-cell title="Text" />\n\n <van-index-anchor index="B" />\n <van-cell title="Text" />\n <van-cell title="Text" />\n <van-cell title="Text" />\n\n ...\n</van-index-bar>\n
\n<van-index-bar :index-list="indexList">\n <van-index-anchor index="1">Title 1</van-index-anchor>\n <van-cell title="Text" />\n <van-cell title="Text" />\n <van-cell title="Text" />\n\n <van-index-anchor index="2">Title 2</van-index-anchor>\n <van-cell title="Text" />\n <van-cell title="Text" />\n <van-cell title="Text" />\n\n ...\n</van-index-bar>\n
\nexport default {\n setup() {\n return {\n indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
index-list | \nIndex List | \n(string | number)[] | \nA-Z | \n
z-index | \nz-index | \nnumber | string | \n1 | \n
sticky | \nWhether to enable anchor sticky top | \nboolean | \ntrue | \n
sticky-offset-top | \nAnchor offset top when sticky | \nnumber | \n0 | \n
highlight-color | \nIndex character highlight color | \nstring | \n#1989fa | \n
teleport | \nSpecifies a target element where IndexBar will be mounted | \nstring | Element | \n- | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
index | \nIndex | \nnumber | string | \n- | \n
Event | \nDescription | \nArguments | \n
---|---|---|
select | \nEmitted when an index is selected | \nindex: number | string | \n
change | \nEmitted when active index changed | \nindex: number | string | \n
Use ref to get IndexBar instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
scrollTo | \nscroll to target element | \nindex: number | string | \n- | \n
The component exports the following type definitions:
\nimport type { IndexBarProps, IndexAnchorProps, IndexBarInstance } from 'vant';\n
\nIndexBarInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { IndexBarInstance } from 'vant';\n\nconst indexBarRef = ref<IndexBarInstance>();\n\nindexBarRef.value?.scrollTo('B');\n
\nName | \nDescription | \n
---|---|
default | \nAnchor content, show index by default | \n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-index-bar-sidebar-z-index | \n2 | \n- | \n
--van-index-bar-index-font-size | \nvar(--van-font-size-xs) | \n- | \n
--van-index-bar-index-line-height | \nvar(--van-line-height-xs) | \n- | \n
--van-index-bar-index-active-color | \nvar(--van-primary-color) | \n- | \n
--van-index-anchor-z-index | \n1 | \n- | \n
--van-index-anchor-padding | \n0 var(--van-padding-md) | \n- | \n
--van-index-anchor-text-color | \nvar(--van-text-color) | \n- | \n
--van-index-anchor-font-weight | \nvar(--van-font-bold) | \n- | \n
--van-index-anchor-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-index-anchor-line-height | \n32px | \n- | \n
--van-index-anchor-background | \ntransparent | \n- | \n
--van-index-anchor-sticky-text-color | \nvar(--van-primary-color) | \n- | \n
--van-index-anchor-sticky-background | \nvar(--van-background-2) | \n- | \n
\u5BF9\u957F\u6587\u672C\u8FDB\u884C\u7701\u7565\uFF0C\u652F\u6301\u5C55\u5F00/\u6536\u8D77\u3002\u8BF7\u5347\u7EA7 vant
\u5230 >= 4.1.0 \u7248\u672C\u6765\u4F7F\u7528\u8BE5\u7EC4\u4EF6\u3002
\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { TextEllipsis } from 'vant';\n\nconst app = createApp();\napp.use(TextEllipsis);\n
\n\u9ED8\u8BA4\u5C55\u793A 1
\u884C\uFF0C\u8D85\u8FC7 1
\u884C\u663E\u793A\u7701\u7565\u53F7\u3002
<van-text-ellipsis :content="text" />\n
\nexport default {\n setup() {\n const text = '\u6162\u6162\u6765\uFF0C\u4E0D\u8981\u6025\uFF0C\u751F\u6D3B\u7ED9\u4F60\u51FA\u4E86\u96BE\u9898\uFF0C\u53EF\u4E5F\u7EC8\u6709\u4E00\u5929\u4F1A\u7ED9\u51FA\u7B54\u6848\u3002';\n return { text };\n },\n};\n
\n\u8D85\u8FC7\u884C\u6570\u652F\u6301\u5C55\u5F00/\u6536\u8D77\u3002
\n<van-text-ellipsis :content="text" expand-text="\u5C55\u5F00" collapse-text="\u6536\u8D77" />\n
\nexport default {\n setup() {\n const text =\n '\u4F3C\u6C34\u6D41\u5E74\u662F\u4E00\u4E2A\u4EBA\u6240\u6709\u7684\u4E00\u5207\uFF0C\u53EA\u6709\u8FD9\u4E2A\u4E1C\u897F\uFF0C\u624D\u771F\u6B63\u5F52\u4F60\u6240\u6709\u3002\u5176\u4F59\u7684\u4E00\u5207\uFF0C\u90FD\u662F\u7247\u523B\u7684\u6B22\u5A31\u548C\u4E0D\u5E78\uFF0C\u8F6C\u773C\u95F4\u5C31\u5DF2\u8DD1\u5230\u90A3\u4F3C\u6C34\u6D41\u5E74\u91CC\u53BB\u4E86\u3002';\n return { text };\n },\n};\n
\n\u901A\u8FC7\u8BBE\u7F6E rows
\u9650\u5236\u5C55\u793A\u884C\u6570\u3002
<van-text-ellipsis\n rows="3"\n :content="text"\n expand-text="\u5C55\u5F00"\n collapse-text="\u6536\u8D77"\n/>\n
\nexport default {\n setup() {\n const text =\n '\u90A3\u4E00\u5929\u6211\u4E8C\u5341\u4E00\u5C81\uFF0C\u5728\u6211\u4E00\u751F\u7684\u9EC4\u91D1\u65F6\u4EE3\u3002\u6211\u6709\u597D\u591A\u5962\u671B\u3002\u6211\u60F3\u7231\uFF0C\u60F3\u5403\uFF0C\u8FD8\u60F3\u5728\u4E00\u77AC\u95F4\u53D8\u6210\u5929\u4E0A\u534A\u660E\u534A\u6697\u7684\u4E91\u3002\u540E\u6765\u6211\u624D\u77E5\u9053\uFF0C\u751F\u6D3B\u5C31\u662F\u4E2A\u7F13\u6162\u53D7\u9524\u7684\u8FC7\u7A0B\uFF0C\u4EBA\u4E00\u5929\u5929\u8001\u4E0B\u53BB\uFF0C\u5962\u671B\u4E5F\u4E00\u5929\u5929\u6D88\u5931\uFF0C\u6700\u540E\u53D8\u5F97\u50CF\u6328\u4E86\u9524\u7684\u725B\u4E00\u6837\u3002\u53EF\u662F\u6211\u8FC7\u4E8C\u5341\u4E00\u5C81\u751F\u65E5\u65F6\u6CA1\u6709\u9884\u89C1\u5230\u8FD9\u4E00\u70B9\u3002\u6211\u89C9\u5F97\u81EA\u5DF1\u4F1A\u6C38\u8FDC\u751F\u731B\u4E0B\u53BB\uFF0C\u4EC0\u4E48\u4E5F\u9524\u4E0D\u4E86\u6211\u3002';\n return { text };\n },\n};\n
\n\u901A\u8FC7\u8BBE\u7F6E position
\u63A7\u5236\u7701\u7565\u4F4D\u7F6E\u3002
<van-text-ellipsis\n rows="1"\n :content="text"\n expand-text="\u5C55\u5F00"\n collapse-text="\u6536\u8D77"\n position="start"\n/>\n
\nexport default {\n setup() {\n const text =\n '\u90A3\u4E00\u5929\u6211\u4E8C\u5341\u4E00\u5C81\uFF0C\u5728\u6211\u4E00\u751F\u7684\u9EC4\u91D1\u65F6\u4EE3\u3002\u6211\u6709\u597D\u591A\u5962\u671B\u3002\u6211\u60F3\u7231\uFF0C\u60F3\u5403\uFF0C\u8FD8\u60F3\u5728\u4E00\u77AC\u95F4\u53D8\u6210\u5929\u4E0A\u534A\u660E\u534A\u6697\u7684\u4E91\u3002\u540E\u6765\u6211\u624D\u77E5\u9053\uFF0C\u751F\u6D3B\u5C31\u662F\u4E2A\u7F13\u6162\u53D7\u9524\u7684\u8FC7\u7A0B\uFF0C\u4EBA\u4E00\u5929\u5929\u8001\u4E0B\u53BB\uFF0C\u5962\u671B\u4E5F\u4E00\u5929\u5929\u6D88\u5931\uFF0C\u6700\u540E\u53D8\u5F97\u50CF\u6328\u4E86\u9524\u7684\u725B\u4E00\u6837\u3002\u53EF\u662F\u6211\u8FC7\u4E8C\u5341\u4E00\u5C81\u751F\u65E5\u65F6\u6CA1\u6709\u9884\u89C1\u5230\u8FD9\u4E00\u70B9\u3002\u6211\u89C9\u5F97\u81EA\u5DF1\u4F1A\u6C38\u8FDC\u751F\u731B\u4E0B\u53BB\uFF0C\u4EC0\u4E48\u4E5F\u9524\u4E0D\u4E86\u6211\u3002';\n return { text };\n },\n};\n
\n<van-text-ellipsis\n rows="2"\n :content="text"\n expand-text="\u5C55\u5F00"\n collapse-text="\u6536\u8D77"\n position="middle"\n/>\n
\nexport default {\n setup() {\n const text =\n '\u90A3\u4E00\u5929\u6211\u4E8C\u5341\u4E00\u5C81\uFF0C\u5728\u6211\u4E00\u751F\u7684\u9EC4\u91D1\u65F6\u4EE3\u3002\u6211\u6709\u597D\u591A\u5962\u671B\u3002\u6211\u60F3\u7231\uFF0C\u60F3\u5403\uFF0C\u8FD8\u60F3\u5728\u4E00\u77AC\u95F4\u53D8\u6210\u5929\u4E0A\u534A\u660E\u534A\u6697\u7684\u4E91\u3002\u540E\u6765\u6211\u624D\u77E5\u9053\uFF0C\u751F\u6D3B\u5C31\u662F\u4E2A\u7F13\u6162\u53D7\u9524\u7684\u8FC7\u7A0B\uFF0C\u4EBA\u4E00\u5929\u5929\u8001\u4E0B\u53BB\uFF0C\u5962\u671B\u4E5F\u4E00\u5929\u5929\u6D88\u5931\uFF0C\u6700\u540E\u53D8\u5F97\u50CF\u6328\u4E86\u9524\u7684\u725B\u4E00\u6837\u3002\u53EF\u662F\u6211\u8FC7\u4E8C\u5341\u4E00\u5C81\u751F\u65E5\u65F6\u6CA1\u6709\u9884\u89C1\u5230\u8FD9\u4E00\u70B9\u3002\u6211\u89C9\u5F97\u81EA\u5DF1\u4F1A\u6C38\u8FDC\u751F\u731B\u4E0B\u53BB\uFF0C\u4EC0\u4E48\u4E5F\u9524\u4E0D\u4E86\u6211\u3002';\n return { text };\n },\n};\n
\n\u901A\u8FC7\u63D2\u69FD action
\u81EA\u5B9A\u4E49\u64CD\u4F5C\u5185\u5BB9\u3002
<van-text-ellipsis :content="text">\n <template #action="{ expanded }">{{ expanded ? '\u6536\u8D77' : '\u5C55\u5F00' }}</template>\n</van-text-ellipsis>\n
\nexport default {\n setup() {\n const text = '\u6162\u6162\u6765\uFF0C\u4E0D\u8981\u6025\uFF0C\u751F\u6D3B\u7ED9\u4F60\u51FA\u4E86\u96BE\u9898\uFF0C\u53EF\u4E5F\u7EC8\u6709\u4E00\u5929\u4F1A\u7ED9\u51FA\u7B54\u6848\u3002';\n return { text };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
rows | \n\u5C55\u793A\u7684\u884C\u6570 | \nnumber | string | \n1 | \n
content | \n\u9700\u8981\u5C55\u793A\u7684\u6587\u672C | \nstring | \n- | \n
expand-text | \n\u5C55\u5F00\u64CD\u4F5C\u7684\u6587\u6848 | \nstring | \n- | \n
collapse-text | \n\u6536\u8D77\u64CD\u4F5C\u7684\u6587\u6848 | \nstring | \n- | \n
dots v4.2.0 | \n\u7701\u7565\u53F7\u7684\u6587\u672C\u5185\u5BB9 | \nstring | \n\'...\' | \n
position v4.6.2 | \n\u7701\u7565\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A start middle | \nstring | \n\'end\' | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click-action | \n\u70B9\u51FB\u5C55\u5F00/\u6536\u8D77\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 TextEllipsis \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
toggle | \n\u5207\u6362\u6587\u672C\u7684\u5C55\u5F00\u72B6\u6001\uFF0C\u4F20 true \u4E3A\u5C55\u5F00\uFF0Cfalse \u4E3A\u6536\u8D77\uFF0C\u4E0D\u4F20\u53C2\u4E3A\u5207\u6362 | \nexpanded?: boolean | \n- | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
action v4.8.3 | \n\u81EA\u5B9A\u4E49\u64CD\u4F5C | \n{ expanded: boolean } | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n TextEllipsisProps,\n TextEllipsisInstance,\n TextEllipsisThemeVars,\n} from 'vant';\n
\nTextEllipsisInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { TextEllipsisInstance } from 'vant';\n\nconst textEllipsisRef = ref<TextEllipsisInstance>();\n\ntextEllipsisRef.value?.toggle();\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-text-ellipsis-action-color | \nvar(--van-blue) | \n\u64CD\u4F5C\u6309\u94AE\u7684\u989C\u8272 | \n
--van-text-ellipsis-line-height | \n1.6 | \n\u6587\u672C\u7684\u884C\u9AD8 | \n
\u5BF9\u957F\u6587\u672C\u8FDB\u884C\u7701\u7565\uFF0C\u652F\u6301\u5C55\u5F00/\u6536\u8D77\u3002\u8BF7\u5347\u7EA7 vant
\u5230 >= 4.1.0 \u7248\u672C\u6765\u4F7F\u7528\u8BE5\u7EC4\u4EF6\u3002
\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { TextEllipsis } from 'vant';\n\nconst app = createApp();\napp.use(TextEllipsis);\n
\n\u9ED8\u8BA4\u5C55\u793A 1
\u884C\uFF0C\u8D85\u8FC7 1
\u884C\u663E\u793A\u7701\u7565\u53F7\u3002
<van-text-ellipsis :content="text" />\n
\nexport default {\n setup() {\n const text = '\u6162\u6162\u6765\uFF0C\u4E0D\u8981\u6025\uFF0C\u751F\u6D3B\u7ED9\u4F60\u51FA\u4E86\u96BE\u9898\uFF0C\u53EF\u4E5F\u7EC8\u6709\u4E00\u5929\u4F1A\u7ED9\u51FA\u7B54\u6848\u3002';\n return { text };\n },\n};\n
\n\u8D85\u8FC7\u884C\u6570\u652F\u6301\u5C55\u5F00/\u6536\u8D77\u3002
\n<van-text-ellipsis :content="text" expand-text="\u5C55\u5F00" collapse-text="\u6536\u8D77" />\n
\nexport default {\n setup() {\n const text =\n '\u4F3C\u6C34\u6D41\u5E74\u662F\u4E00\u4E2A\u4EBA\u6240\u6709\u7684\u4E00\u5207\uFF0C\u53EA\u6709\u8FD9\u4E2A\u4E1C\u897F\uFF0C\u624D\u771F\u6B63\u5F52\u4F60\u6240\u6709\u3002\u5176\u4F59\u7684\u4E00\u5207\uFF0C\u90FD\u662F\u7247\u523B\u7684\u6B22\u5A31\u548C\u4E0D\u5E78\uFF0C\u8F6C\u773C\u95F4\u5C31\u5DF2\u8DD1\u5230\u90A3\u4F3C\u6C34\u6D41\u5E74\u91CC\u53BB\u4E86\u3002';\n return { text };\n },\n};\n
\n\u901A\u8FC7\u8BBE\u7F6E rows
\u9650\u5236\u5C55\u793A\u884C\u6570\u3002
<van-text-ellipsis\n rows="3"\n :content="text"\n expand-text="\u5C55\u5F00"\n collapse-text="\u6536\u8D77"\n/>\n
\nexport default {\n setup() {\n const text =\n '\u90A3\u4E00\u5929\u6211\u4E8C\u5341\u4E00\u5C81\uFF0C\u5728\u6211\u4E00\u751F\u7684\u9EC4\u91D1\u65F6\u4EE3\u3002\u6211\u6709\u597D\u591A\u5962\u671B\u3002\u6211\u60F3\u7231\uFF0C\u60F3\u5403\uFF0C\u8FD8\u60F3\u5728\u4E00\u77AC\u95F4\u53D8\u6210\u5929\u4E0A\u534A\u660E\u534A\u6697\u7684\u4E91\u3002\u540E\u6765\u6211\u624D\u77E5\u9053\uFF0C\u751F\u6D3B\u5C31\u662F\u4E2A\u7F13\u6162\u53D7\u9524\u7684\u8FC7\u7A0B\uFF0C\u4EBA\u4E00\u5929\u5929\u8001\u4E0B\u53BB\uFF0C\u5962\u671B\u4E5F\u4E00\u5929\u5929\u6D88\u5931\uFF0C\u6700\u540E\u53D8\u5F97\u50CF\u6328\u4E86\u9524\u7684\u725B\u4E00\u6837\u3002\u53EF\u662F\u6211\u8FC7\u4E8C\u5341\u4E00\u5C81\u751F\u65E5\u65F6\u6CA1\u6709\u9884\u89C1\u5230\u8FD9\u4E00\u70B9\u3002\u6211\u89C9\u5F97\u81EA\u5DF1\u4F1A\u6C38\u8FDC\u751F\u731B\u4E0B\u53BB\uFF0C\u4EC0\u4E48\u4E5F\u9524\u4E0D\u4E86\u6211\u3002';\n return { text };\n },\n};\n
\n\u901A\u8FC7\u8BBE\u7F6E position
\u63A7\u5236\u7701\u7565\u4F4D\u7F6E\u3002
<van-text-ellipsis\n rows="1"\n :content="text"\n expand-text="\u5C55\u5F00"\n collapse-text="\u6536\u8D77"\n position="start"\n/>\n
\nexport default {\n setup() {\n const text =\n '\u90A3\u4E00\u5929\u6211\u4E8C\u5341\u4E00\u5C81\uFF0C\u5728\u6211\u4E00\u751F\u7684\u9EC4\u91D1\u65F6\u4EE3\u3002\u6211\u6709\u597D\u591A\u5962\u671B\u3002\u6211\u60F3\u7231\uFF0C\u60F3\u5403\uFF0C\u8FD8\u60F3\u5728\u4E00\u77AC\u95F4\u53D8\u6210\u5929\u4E0A\u534A\u660E\u534A\u6697\u7684\u4E91\u3002\u540E\u6765\u6211\u624D\u77E5\u9053\uFF0C\u751F\u6D3B\u5C31\u662F\u4E2A\u7F13\u6162\u53D7\u9524\u7684\u8FC7\u7A0B\uFF0C\u4EBA\u4E00\u5929\u5929\u8001\u4E0B\u53BB\uFF0C\u5962\u671B\u4E5F\u4E00\u5929\u5929\u6D88\u5931\uFF0C\u6700\u540E\u53D8\u5F97\u50CF\u6328\u4E86\u9524\u7684\u725B\u4E00\u6837\u3002\u53EF\u662F\u6211\u8FC7\u4E8C\u5341\u4E00\u5C81\u751F\u65E5\u65F6\u6CA1\u6709\u9884\u89C1\u5230\u8FD9\u4E00\u70B9\u3002\u6211\u89C9\u5F97\u81EA\u5DF1\u4F1A\u6C38\u8FDC\u751F\u731B\u4E0B\u53BB\uFF0C\u4EC0\u4E48\u4E5F\u9524\u4E0D\u4E86\u6211\u3002';\n return { text };\n },\n};\n
\n<van-text-ellipsis\n rows="2"\n :content="text"\n expand-text="\u5C55\u5F00"\n collapse-text="\u6536\u8D77"\n position="middle"\n/>\n
\nexport default {\n setup() {\n const text =\n '\u90A3\u4E00\u5929\u6211\u4E8C\u5341\u4E00\u5C81\uFF0C\u5728\u6211\u4E00\u751F\u7684\u9EC4\u91D1\u65F6\u4EE3\u3002\u6211\u6709\u597D\u591A\u5962\u671B\u3002\u6211\u60F3\u7231\uFF0C\u60F3\u5403\uFF0C\u8FD8\u60F3\u5728\u4E00\u77AC\u95F4\u53D8\u6210\u5929\u4E0A\u534A\u660E\u534A\u6697\u7684\u4E91\u3002\u540E\u6765\u6211\u624D\u77E5\u9053\uFF0C\u751F\u6D3B\u5C31\u662F\u4E2A\u7F13\u6162\u53D7\u9524\u7684\u8FC7\u7A0B\uFF0C\u4EBA\u4E00\u5929\u5929\u8001\u4E0B\u53BB\uFF0C\u5962\u671B\u4E5F\u4E00\u5929\u5929\u6D88\u5931\uFF0C\u6700\u540E\u53D8\u5F97\u50CF\u6328\u4E86\u9524\u7684\u725B\u4E00\u6837\u3002\u53EF\u662F\u6211\u8FC7\u4E8C\u5341\u4E00\u5C81\u751F\u65E5\u65F6\u6CA1\u6709\u9884\u89C1\u5230\u8FD9\u4E00\u70B9\u3002\u6211\u89C9\u5F97\u81EA\u5DF1\u4F1A\u6C38\u8FDC\u751F\u731B\u4E0B\u53BB\uFF0C\u4EC0\u4E48\u4E5F\u9524\u4E0D\u4E86\u6211\u3002';\n return { text };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
rows | \n\u5C55\u793A\u7684\u884C\u6570 | \nnumber | string | \n1 | \n
content | \n\u9700\u8981\u5C55\u793A\u7684\u6587\u672C | \nstring | \n- | \n
expand-text | \n\u5C55\u5F00\u64CD\u4F5C\u7684\u6587\u6848 | \nstring | \n- | \n
collapse-text | \n\u6536\u8D77\u64CD\u4F5C\u7684\u6587\u6848 | \nstring | \n- | \n
dots v4.2.0 | \n\u7701\u7565\u53F7\u7684\u6587\u672C\u5185\u5BB9 | \nstring | \n\'...\' | \n
position v4.6.2 | \n\u7701\u7565\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A start middle | \nstring | \n\'end\' | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click-action | \n\u70B9\u51FB\u5C55\u5F00/\u6536\u8D77\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 TextEllipsis \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
toggle | \n\u5207\u6362\u6587\u672C\u7684\u5C55\u5F00\u72B6\u6001\uFF0C\u4F20 true \u4E3A\u5C55\u5F00\uFF0Cfalse \u4E3A\u6536\u8D77\uFF0C\u4E0D\u4F20\u53C2\u4E3A\u5207\u6362 | \nexpanded?: boolean | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n TextEllipsisProps,\n TextEllipsisInstance,\n TextEllipsisThemeVars,\n} from 'vant';\n
\nTextEllipsisInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { TextEllipsisInstance } from 'vant';\n\nconst textEllipsisRef = ref<TextEllipsisInstance>();\n\ntextEllipsisRef.value?.toggle();\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-text-ellipsis-action-color | \nvar(--van-blue) | \n\u64CD\u4F5C\u6309\u94AE\u7684\u989C\u8272 | \n
--van-text-ellipsis-line-height | \n1.6 | \n\u6587\u672C\u7684\u884C\u9AD8 | \n
\u52A0\u8F7D\u56FE\u6807\uFF0C\u7528\u4E8E\u8868\u793A\u52A0\u8F7D\u4E2D\u7684\u8FC7\u6E21\u72B6\u6001\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Loading } from 'vant';\n\nconst app = createApp();\napp.use(Loading);\n
\n\u901A\u8FC7 type
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u52A0\u8F7D\u56FE\u6807\u7684\u7C7B\u578B\uFF0C\u9ED8\u8BA4\u4E3A circular
\uFF0C\u53EF\u9009\u503C\u4E3A spinner
\u3002
<van-loading />\n\n<van-loading type="spinner" />\n
\n\u901A\u8FC7 color
\u5C5E\u6027\u8BBE\u7F6E\u52A0\u8F7D\u56FE\u6807\u7684\u989C\u8272\u3002
<van-loading color="#1989fa" />\n\n<van-loading type="spinner" color="#1989fa" />\n
\n\u901A\u8FC7 size
\u5C5E\u6027\u8BBE\u7F6E\u52A0\u8F7D\u56FE\u6807\u7684\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px
\u3002
<van-loading size="24" />\n\n<van-loading type="spinner" size="24px" />\n
\n\u53EF\u4EE5\u4F7F\u7528\u9ED8\u8BA4\u63D2\u69FD\u5728\u56FE\u6807\u7684\u53F3\u4FA7\u63D2\u5165\u52A0\u8F7D\u6587\u6848\u3002
\n<van-loading size="24px">\u52A0\u8F7D\u4E2D...</van-loading>\n
\n\u8BBE\u7F6E vertical
\u5C5E\u6027\u540E\uFF0C\u56FE\u6807\u548C\u6587\u6848\u4F1A\u5782\u76F4\u6392\u5217\u3002
<van-loading size="24px" vertical>\u52A0\u8F7D\u4E2D...</van-loading>\n
\n\u901A\u8FC7 color
\u6216\u8005 text-color
\u5C5E\u6027\u8BBE\u7F6E\u52A0\u8F7D\u6587\u6848\u7684\u989C\u8272\u3002
<!-- \u53EF\u4FEE\u6539\u6587\u6848\u548C\u52A0\u8F7D\u56FE\u6807\u7684\u989C\u8272 -->\n<van-loading color="#0094ff" />\n\n<!-- \u53EA\u4FEE\u6539\u6587\u6848\u989C\u8272 -->\n<van-loading text-color="#0094ff" />\n
\n\u901A\u8FC7 icon
\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u52A0\u8F7D\u56FE\u6807\u3002
<van-loading vertical>\n <template #icon>\n <van-icon name="star-o" size="30" />\n </template>\n \u52A0\u8F7D\u4E2D...\n</van-loading>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
color | \n\u989C\u8272 | \nstring | \n#c9c9c9 | \n
type | \n\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A spinner | \nstring | \ncircular | \n
size | \n\u52A0\u8F7D\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n30px | \n
text-size | \n\u6587\u5B57\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n14px | \n
text-color | \n\u6587\u5B57\u989C\u8272 | \nstring | \n#c9c9c9 | \n
vertical | \n\u662F\u5426\u5782\u76F4\u6392\u5217\u56FE\u6807\u548C\u6587\u5B57\u5185\u5BB9 | \nboolean | \nfalse | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u52A0\u8F7D\u6587\u6848 | \n
icon | \n\u81EA\u5B9A\u4E49\u52A0\u8F7D\u56FE\u6807 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { LoadingType, LoadingProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-loading-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-loading-text-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-loading-spinner-color | \nvar(--van-gray-5) | \n- | \n
--van-loading-spinner-size | \n30px | \n- | \n
--van-loading-spinner-duration | \n0.8s | \n- | \n
\u52A0\u8F7D\u56FE\u6807\uFF0C\u7528\u4E8E\u8868\u793A\u52A0\u8F7D\u4E2D\u7684\u8FC7\u6E21\u72B6\u6001\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Loading } from 'vant';\n\nconst app = createApp();\napp.use(Loading);\n
\n\u901A\u8FC7 type
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u52A0\u8F7D\u56FE\u6807\u7684\u7C7B\u578B\uFF0C\u9ED8\u8BA4\u4E3A circular
\uFF0C\u53EF\u9009\u503C\u4E3A spinner
\u3002
<van-loading />\n\n<van-loading type="spinner" />\n
\n\u901A\u8FC7 color
\u5C5E\u6027\u8BBE\u7F6E\u52A0\u8F7D\u56FE\u6807\u7684\u989C\u8272\u3002
<van-loading color="#1989fa" />\n\n<van-loading type="spinner" color="#1989fa" />\n
\n\u901A\u8FC7 size
\u5C5E\u6027\u8BBE\u7F6E\u52A0\u8F7D\u56FE\u6807\u7684\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px
\u3002
<van-loading size="24" />\n\n<van-loading type="spinner" size="24px" />\n
\n\u53EF\u4EE5\u4F7F\u7528\u9ED8\u8BA4\u63D2\u69FD\u5728\u56FE\u6807\u7684\u53F3\u4FA7\u63D2\u5165\u52A0\u8F7D\u6587\u6848\u3002
\n<van-loading size="24px">\u52A0\u8F7D\u4E2D...</van-loading>\n
\n\u8BBE\u7F6E vertical
\u5C5E\u6027\u540E\uFF0C\u56FE\u6807\u548C\u6587\u6848\u4F1A\u5782\u76F4\u6392\u5217\u3002
<van-loading size="24px" vertical>\u52A0\u8F7D\u4E2D...</van-loading>\n
\n\u901A\u8FC7 color
\u6216\u8005 text-color
\u5C5E\u6027\u8BBE\u7F6E\u52A0\u8F7D\u6587\u6848\u7684\u989C\u8272\u3002
<!-- \u53EF\u4FEE\u6539\u6587\u6848\u548C\u52A0\u8F7D\u56FE\u6807\u7684\u989C\u8272 -->\n<van-loading color="#0094ff" />\n\n<!-- \u53EA\u4FEE\u6539\u6587\u6848\u989C\u8272 -->\n<van-loading text-color="#0094ff" />\n
\n\u901A\u8FC7 icon
\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u52A0\u8F7D\u56FE\u6807\u3002
<van-loading vertical>\n <template #icon>\n <van-icon name="star-o" size="30" />\n </template>\n \u52A0\u8F7D\u4E2D...\n</van-loading>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
color | \n\u989C\u8272 | \nstring | \n#c9c9c9 | \n
type | \n\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A spinner | \nstring | \ncircular | \n
size | \n\u52A0\u8F7D\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n30px | \n
text-size | \n\u6587\u5B57\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n14px | \n
text-color | \n\u6587\u5B57\u989C\u8272 | \nstring | \n#c9c9c9 | \n
vertical | \n\u662F\u5426\u5782\u76F4\u6392\u5217\u56FE\u6807\u548C\u6587\u5B57\u5185\u5BB9 | \nboolean | \nfalse | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u52A0\u8F7D\u6587\u6848 | \n
icon | \n\u81EA\u5B9A\u4E49\u52A0\u8F7D\u56FE\u6807 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { LoadingType, LoadingProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-loading-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-loading-text-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-loading-spinner-color | \nvar(--van-gray-5) | \n- | \n
--van-loading-spinner-size | \n30px | \n- | \n
--van-loading-spinner-duration | \n0.8s | \n- | \n
\u7A7A\u72B6\u6001\u65F6\u7684\u5360\u4F4D\u63D0\u793A\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Empty } from 'vant';\n\nconst app = createApp();\napp.use(Empty);\n
\n<van-empty description="\u63CF\u8FF0\u6587\u5B57" />\n
\nEmpty \u7EC4\u4EF6\u5185\u7F6E\u4E86\u591A\u79CD\u5360\u4F4D\u56FE\u7247\u7C7B\u578B\uFF0C\u53EF\u4EE5\u5728\u4E0D\u540C\u4E1A\u52A1\u573A\u666F\u4E0B\u4F7F\u7528\u3002
\n<!-- \u901A\u7528\u9519\u8BEF -->\n<van-empty image="error" description="\u63CF\u8FF0\u6587\u5B57" />\n<!-- \u7F51\u7EDC\u9519\u8BEF -->\n<van-empty image="network" description="\u63CF\u8FF0\u6587\u5B57" />\n<!-- \u641C\u7D22\u63D0\u793A -->\n<van-empty image="search" description="\u63CF\u8FF0\u6587\u5B57" />\n
\n\u901A\u8FC7 image-size
\u5C5E\u6027\u56FE\u7247\u7684\u5927\u5C0F\u3002
<!-- \u4E0D\u6307\u5B9A\u5355\u4F4D\uFF0C\u9ED8\u8BA4\u4E3A px -->\n<van-empty image-size="100" description="\u63CF\u8FF0\u6587\u5B57" />\n<!-- \u6307\u5B9A\u5355\u4F4D\uFF0C\u652F\u6301 rem, vh, vw -->\n<van-empty image-size="10rem" description="\u63CF\u8FF0\u6587\u5B57" />\n
\n\u5C06 image-size
\u8BBE\u7F6E\u4E3A\u6570\u7EC4\u683C\u5F0F\uFF0C\u53EF\u4EE5\u5206\u522B\u8BBE\u7F6E\u5BBD\u9AD8\u3002\u6570\u7EC4\u7B2C\u4E00\u9879\u5BF9\u5E94\u5BBD\u5EA6\uFF0C\u6570\u7EC4\u7B2C\u4E8C\u9879\u5BF9\u5E94\u9AD8\u5EA6\u3002
<van-empty :image-size="[60, 40]" description="\u63CF\u8FF0\u6587\u5B57" />\n
\n\u9700\u8981\u81EA\u5B9A\u4E49\u56FE\u7247\u65F6\uFF0C\u53EF\u4EE5\u5728 image \u5C5E\u6027\u4E2D\u4F20\u5165\u4EFB\u610F\u56FE\u7247 URL\u3002
\n<van-empty\n image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"\n image-size="80"\n description="\u63CF\u8FF0\u6587\u5B57"\n/>\n
\n\u901A\u8FC7\u9ED8\u8BA4\u63D2\u69FD\u53EF\u4EE5\u5728 Empty \u7EC4\u4EF6\u7684\u4E0B\u65B9\u63D2\u5165\u5185\u5BB9\u3002
\n<van-empty description="\u63CF\u8FF0\u6587\u5B57">\n <van-button round type="primary" class="bottom-button">\u6309\u94AE</van-button>\n</van-empty>\n\n<style>\n .bottom-button {\n width: 160px;\n height: 40px;\n }\n</style>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
image | \n\u56FE\u7247\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A error network search \uFF0C\u652F\u6301\u4F20\u5165\u56FE\u7247 URL | \nstring | \ndefault | \n
image-size | \n\u56FE\u7247\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | Array | \n- | \n
description | \n\u56FE\u7247\u4E0B\u65B9\u7684\u63CF\u8FF0\u6587\u5B57 | \nstring | \n- | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u81EA\u5B9A\u4E49\u5E95\u90E8\u5185\u5BB9 | \n
image | \n\u81EA\u5B9A\u4E49\u56FE\u6807 | \n
description | \n\u81EA\u5B9A\u4E49\u63CF\u8FF0\u6587\u5B57 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { EmptyProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-empty-padding | \nvar(--van-padding-xl) 0 | \n- | \n
--van-empty-image-size | \n160px | \n- | \n
--van-empty-description-margin-top | \nvar(--van-padding-md) | \n- | \n
--van-empty-description-padding | \n0 60px | \n- | \n
--van-empty-description-color | \nvar(--van-text-color-2) | \n- | \n
--van-empty-description-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-empty-description-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-empty-bottom-margin-top | \n24px | \n- | \n
\u7A7A\u72B6\u6001\u65F6\u7684\u5360\u4F4D\u63D0\u793A\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Empty } from 'vant';\n\nconst app = createApp();\napp.use(Empty);\n
\n<van-empty description="\u63CF\u8FF0\u6587\u5B57" />\n
\nEmpty \u7EC4\u4EF6\u5185\u7F6E\u4E86\u591A\u79CD\u5360\u4F4D\u56FE\u7247\u7C7B\u578B\uFF0C\u53EF\u4EE5\u5728\u4E0D\u540C\u4E1A\u52A1\u573A\u666F\u4E0B\u4F7F\u7528\u3002
\n<!-- \u901A\u7528\u9519\u8BEF -->\n<van-empty image="error" description="\u63CF\u8FF0\u6587\u5B57" />\n<!-- \u7F51\u7EDC\u9519\u8BEF -->\n<van-empty image="network" description="\u63CF\u8FF0\u6587\u5B57" />\n<!-- \u641C\u7D22\u63D0\u793A -->\n<van-empty image="search" description="\u63CF\u8FF0\u6587\u5B57" />\n
\n\u901A\u8FC7 image-size
\u5C5E\u6027\u56FE\u7247\u7684\u5927\u5C0F\u3002
<!-- \u4E0D\u6307\u5B9A\u5355\u4F4D\uFF0C\u9ED8\u8BA4\u4E3A px -->\n<van-empty image-size="100" description="\u63CF\u8FF0\u6587\u5B57" />\n<!-- \u6307\u5B9A\u5355\u4F4D\uFF0C\u652F\u6301 rem, vh, vw -->\n<van-empty image-size="10rem" description="\u63CF\u8FF0\u6587\u5B57" />\n
\n\u5C06 image-size
\u8BBE\u7F6E\u4E3A\u6570\u7EC4\u683C\u5F0F\uFF0C\u53EF\u4EE5\u5206\u522B\u8BBE\u7F6E\u5BBD\u9AD8\u3002\u6570\u7EC4\u7B2C\u4E00\u9879\u5BF9\u5E94\u5BBD\u5EA6\uFF0C\u6570\u7EC4\u7B2C\u4E8C\u9879\u5BF9\u5E94\u9AD8\u5EA6\u3002
<van-empty :image-size="[60, 40]" description="\u63CF\u8FF0\u6587\u5B57" />\n
\n\u9700\u8981\u81EA\u5B9A\u4E49\u56FE\u7247\u65F6\uFF0C\u53EF\u4EE5\u5728 image \u5C5E\u6027\u4E2D\u4F20\u5165\u4EFB\u610F\u56FE\u7247 URL\u3002
\n<van-empty\n image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"\n image-size="80"\n description="\u63CF\u8FF0\u6587\u5B57"\n/>\n
\n\u901A\u8FC7\u9ED8\u8BA4\u63D2\u69FD\u53EF\u4EE5\u5728 Empty \u7EC4\u4EF6\u7684\u4E0B\u65B9\u63D2\u5165\u5185\u5BB9\u3002
\n<van-empty description="\u63CF\u8FF0\u6587\u5B57">\n <van-button round type="primary" class="bottom-button">\u6309\u94AE</van-button>\n</van-empty>\n\n<style>\n .bottom-button {\n width: 160px;\n height: 40px;\n }\n</style>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
image | \n\u56FE\u7247\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A error network search \uFF0C\u652F\u6301\u4F20\u5165\u56FE\u7247 URL | \nstring | \ndefault | \n
image-size | \n\u56FE\u7247\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | Array | \n- | \n
description | \n\u56FE\u7247\u4E0B\u65B9\u7684\u63CF\u8FF0\u6587\u5B57 | \nstring | \n- | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u81EA\u5B9A\u4E49\u5E95\u90E8\u5185\u5BB9 | \n
image | \n\u81EA\u5B9A\u4E49\u56FE\u6807 | \n
description | \n\u81EA\u5B9A\u4E49\u63CF\u8FF0\u6587\u5B57 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { EmptyProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-empty-padding | \nvar(--van-padding-xl) 0 | \n- | \n
--van-empty-image-size | \n160px | \n- | \n
--van-empty-description-margin-top | \nvar(--van-padding-md) | \n- | \n
--van-empty-description-padding | \n0 60px | \n- | \n
--van-empty-description-color | \nvar(--van-text-color-2) | \n- | \n
--van-empty-description-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-empty-description-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-empty-bottom-margin-top | \n24px | \n- | \n
Separate content into multiple areas.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Divider } from 'vant';\n\nconst app = createApp();\napp.use(Divider);\n
\n<van-divider />\n
\n<van-divider>Text</van-divider>\n
\n<van-divider content-position="left">Text</van-divider>\n<van-divider content-position="right">Text</van-divider>\n
\n<van-divider dashed>Text</van-divider>\n
\n<van-divider\n :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"\n>\n Text\n</van-divider>\n
\n<van-divider vertical />\nText\n<van-divider vertical dashed />\nText\n<van-divider vertical :hairline="false" />\nText\n<van-divider vertical :style="{ borderColor: '#1989fa' }" />\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
dashed | \nWhether to use dashed border | \nboolean | \nfalse | \n
hairline | \nWhether to use hairline | \nboolean | \ntrue | \n
content-position | \nContent position, can be set to left right | \nstring | \ncenter | \n
vertical v4.4.0 | \nWhether to use vertical | \nboolean | \nfalse | \n
Name | \nDescription | \n
---|---|
default | \ncontent | \n
The component exports the following type definitions:
\nimport type { DividerProps, DividerContentPosition } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-divider-margin | \nvar(--van-padding-md) 0 | \n- | \n
--van-divider-vertical-margin | \n0 var(--van-padding-xs) | \n- | \n
--van-divider-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-divider-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-divider-line-height | \n24px | \n- | \n
--van-divider-border-color | \nvar(--van-border-color) | \n- | \n
--van-divider-content-padding | \nvar(--van-padding-md) | \n- | \n
--van-divider-content-left-width | \n10% | \n- | \n
--van-divider-content-right-width | \n10% | \n- | \n
Separate content into multiple areas.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Divider } from 'vant';\n\nconst app = createApp();\napp.use(Divider);\n
\n<van-divider />\n
\n<van-divider>Text</van-divider>\n
\n<van-divider content-position="left">Text</van-divider>\n<van-divider content-position="right">Text</van-divider>\n
\n<van-divider dashed>Text</van-divider>\n
\n<van-divider\n :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"\n>\n Text\n</van-divider>\n
\n<van-divider vertical />\nText\n<van-divider vertical dashed />\nText\n<van-divider vertical :hairline="false" />\nText\n<van-divider vertical :style="{ borderColor: '#1989fa' }" />\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
dashed | \nWhether to use dashed border | \nboolean | \nfalse | \n
hairline | \nWhether to use hairline | \nboolean | \ntrue | \n
content-position | \nContent position, can be set to left right | \nstring | \ncenter | \n
vertical v4.4.0 | \nWhether to use vertical | \nboolean | \nfalse | \n
Name | \nDescription | \n
---|---|
default | \ncontent | \n
The component exports the following type definitions:
\nimport type { DividerProps, DividerContentPosition } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-divider-margin | \nvar(--van-padding-md) 0 | \n- | \n
--van-divider-vertical-margin | \n0 var(--van-padding-xs) | \n- | \n
--van-divider-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-divider-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-divider-line-height | \n24px | \n- | \n
--van-divider-border-color | \nvar(--van-border-color) | \n- | \n
--van-divider-content-padding | \nvar(--van-padding-md) | \n- | \n
--van-divider-content-left-width | \n10% | \n- | \n
--van-divider-content-right-width | \n10% | \n- | \n
Buttons are used to trigger an action, such as submitting a form.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Button } from 'vant';\n\nconst app = createApp();\napp.use(Button);\n
\nThe Button supports five types: default
, primary
, success
, warning
, and danger
. The default type is default
.
<van-button type="primary">Primary</van-button>\n<van-button type="success">Success</van-button>\n<van-button type="default">Default</van-button>\n<van-button type="danger">Danger</van-button>\n<van-button type="warning">Warning</van-button>\n
\nUse the plain
prop to set the button as a plain button. The text color of a plain button is the same as the button color, and the background is white.
<van-button plain type="primary">Plain</van-button>\n<van-button plain type="success">Plain</van-button>\n
\nSetting the hairline
prop to display a border with a thickness of 0.5px.
<van-button plain hairline type="primary">Hairline</van-button>\n<van-button plain hairline type="success">Hairline</van-button>\n
\nUse the disabled
prop to disable the button. In the disabled state, the button cannot be clicked.
<van-button disabled type="primary">Disabled</van-button>\n<van-button disabled type="success">Disabled</van-button>\n
\nSet the button as a loading state using the loading
prop. In the loading state, the button text is hidden by default. You can set the text for the loading state using the loading-text
property.
<van-button loading type="primary" />\n<van-button loading type="primary" loading-type="spinner" />\n<van-button loading type="success" loading-text="Loading..." />\n
\nUse the square
prop to set the button as square-shaped and the round
prop to set it as round-shaped.
<van-button square type="primary">Square</van-button>\n<van-button round type="success">Round</van-button>\n
\nUse the icon
prop to set the button icon. It supports all icons from the Icon component or you can pass a custom icon URL.
<van-button icon="plus" type="primary" />\n<van-button icon="plus" type="primary">Button</van-button>\n<van-button\n icon="https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png"\n type="primary"\n>\n Button\n</van-button>\n
\nFour sizes are supported: large
, normal
, small
, and mini
. The default size is normal
.
<van-button type="primary" size="large">Large</van-button>\n<van-button type="primary" size="normal">Normal</van-button>\n<van-button type="primary" size="small">Small</van-button>\n<van-button type="primary" size="mini">Mini</van-button>\n
\nBy default, the button is an inline-block element. Use the block
prop to change the button element type to a block-level element.
<van-button type="primary" block>Block Element</van-button>\n
\nYou can use the url
prop for URL redirection or the to
prop for route navigation.
<van-button type="primary" url="https://github.com">URL</van-button>\n<van-button type="primary" to="index">Vue Router</van-button>\n
\nCustomize the button color using the color
prop.
<van-button color="#7232dd">Pure</van-button>\n<van-button color="#7232dd" plain>Pure</van-button>\n<van-button color="linear-gradient(to right, #ff6034, #ee0a24)">\n Gradient\n</van-button>\n
\nWith the combination of the Button and Swipe component, you can create an animated button effect with vertical scrolling.
\n<van-button type="danger" round>\n <van-swipe\n vertical\n class="notice-swipe"\n :autoplay="2000"\n :touchable="false"\n :show-indicators="false"\n >\n <van-swipe-item>Do Task</van-swipe-item>\n <van-swipe-item>Lottery</van-swipe-item>\n </van-swipe>\n</van-button>\n\n<style>\n .notice-swipe {\n height: 40px;\n line-height: 40px;\n }\n</style>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
type | \nCan be set to primary success warning danger | \nstring | \ndefault | \n
size | \nCan be set to large small mini | \nstring | \nnormal | \n
text | \nText | \nstring | \n- | \n
color | \nColor, support linear-gradient | \nstring | \n- | \n
icon | \nLeft Icon | \nstring | \n- | \n
icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
icon-position | \nIcon position, can be set to right | \nstring | \nleft | \n
tag | \nHTML Tag | \nstring | \nbutton | \n
native-type | \nNative Type Attribute | \nstring | \nbutton | \n
plain | \nWhether to be plain button | \nboolean | \nfalse | \n
block | \nWhether to set display block | \nboolean | \nfalse | \n
round | \nWhether to be round button | \nboolean | \nfalse | \n
square | \nWhether to be square button | \nboolean | \nfalse | \n
disabled | \nWhether to disable button | \nboolean | \nfalse | \n
loading | \nWhether to show loading status | \nboolean | \nfalse | \n
loading-text | \nLoading text | \nstring | \n- | \n
loading-type | \nLoading type, can be set to spinner | \nstring | \ncircular | \n
loading-size | \nLoading icon size | \nnumber | string | \n20px | \n
url | \nLink URL | \nstring | \n- | \n
to | \nThe target route should navigate to when clicked on, same as the to prop of Vue Router | \nstring | object | \n- | \n
replace | \nIf true, the navigation will not leave a history record | \nboolean | \nfalse | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when button is clicked and not disabled or loading | \nevent: MouseEvent | \n
touchstart | \nEmitted when button is touched | \nevent: TouchEvent | \n
Name | \nDescription | \n
---|---|
default | \nDefault slot | \n
icon | \nCustom icon | \n
loading | \nCustom loading icon | \n
The component exports the following type definitions:
\nimport type {\n ButtonType,\n ButtonSize,\n ButtonProps,\n ButtonNativeType,\n ButtonIconPosition,\n} from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-button-mini-height | \n24px | \n- | \n
--van-button-mini-padding | \n0 var(--van-padding-base) | \n- | \n
--van-button-mini-font-size | \nvar(--van-font-size-xs) | \n- | \n
--van-button-small-height | \n32px | \n- | \n
--van-button-small-padding | \n0 var(--van-padding-xs) | \n- | \n
--van-button-small-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-button-normal-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-button-normal-padding | \n0 15px | \n- | \n
--van-button-large-height | \n50px | \n- | \n
--van-button-default-height | \n44px | \n- | \n
--van-button-default-line-height | \n1.2 | \n- | \n
--van-button-default-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-button-default-color | \nvar(--van-text-color) | \n- | \n
--van-button-default-background | \nvar(--van-background-2) | \n- | \n
--van-button-default-border-color | \nvar(--van-gray-4) | \n- | \n
--van-button-primary-color | \nvar(--van-white) | \n- | \n
--van-button-primary-background | \nvar(--van-primary-color) | \n- | \n
--van-button-primary-border-color | \nvar(--van-primary-color) | \n- | \n
--van-button-success-color | \nvar(--van-white) | \n- | \n
--van-button-success-background | \nvar(--van-success-color) | \n- | \n
--van-button-success-border-color | \nvar(--van-success-color) | \n- | \n
--van-button-danger-color | \nvar(--van-white) | \n- | \n
--van-button-danger-background | \nvar(--van-danger-color) | \n- | \n
--van-button-danger-border-color | \nvar(--van-danger-color) | \n- | \n
--van-button-warning-color | \nvar(--van-white) | \n- | \n
--van-button-warning-background | \nvar(--van-warning-color) | \n- | \n
--van-button-warning-border-color | \nvar(--van-warning-color) | \n- | \n
--van-button-border-width | \nvar(--van-border-width) | \n- | \n
--van-button-radius | \nvar(--van-radius-md) | \n- | \n
--van-button-round-radius | \nvar(--van-radius-max) | \n- | \n
--van-button-plain-background | \nvar(--van-white) | \n- | \n
--van-button-disabled-opacity | \nvar(--van-disabled-opacity) | \n- | \n
--van-button-icon-size | \n1.2em | \n- | \n
--van-button-loading-icon-size | \n20px | \n- | \n
Buttons are used to trigger an action, such as submitting a form.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Button } from 'vant';\n\nconst app = createApp();\napp.use(Button);\n
\nThe Button supports five types: default
, primary
, success
, warning
, and danger
. The default type is default
.
<van-button type="primary">Primary</van-button>\n<van-button type="success">Success</van-button>\n<van-button type="default">Default</van-button>\n<van-button type="danger">Danger</van-button>\n<van-button type="warning">Warning</van-button>\n
\nUse the plain
prop to set the button as a plain button. The text color of a plain button is the same as the button color, and the background is white.
<van-button plain type="primary">Plain</van-button>\n<van-button plain type="success">Plain</van-button>\n
\nSetting the hairline
prop to display a border with a thickness of 0.5px.
<van-button plain hairline type="primary">Hairline</van-button>\n<van-button plain hairline type="success">Hairline</van-button>\n
\nUse the disabled
prop to disable the button. In the disabled state, the button cannot be clicked.
<van-button disabled type="primary">Disabled</van-button>\n<van-button disabled type="success">Disabled</van-button>\n
\nSet the button as a loading state using the loading
prop. In the loading state, the button text is hidden by default. You can set the text for the loading state using the loading-text
property.
<van-button loading type="primary" />\n<van-button loading type="primary" loading-type="spinner" />\n<van-button loading type="success" loading-text="Loading..." />\n
\nUse the square
prop to set the button as square-shaped and the round
prop to set it as round-shaped.
<van-button square type="primary">Square</van-button>\n<van-button round type="success">Round</van-button>\n
\nUse the icon
prop to set the button icon. It supports all icons from the Icon component or you can pass a custom icon URL.
<van-button icon="plus" type="primary" />\n<van-button icon="plus" type="primary">Button</van-button>\n<van-button\n icon="https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png"\n type="primary"\n>\n Button\n</van-button>\n
\nFour sizes are supported: large
, normal
, small
, and mini
. The default size is normal
.
<van-button type="primary" size="large">Large</van-button>\n<van-button type="primary" size="normal">Normal</van-button>\n<van-button type="primary" size="small">Small</van-button>\n<van-button type="primary" size="mini">Mini</van-button>\n
\nBy default, the button is an inline-block element. Use the block
prop to change the button element type to a block-level element.
<van-button type="primary" block>Block Element</van-button>\n
\nYou can use the url
prop for URL redirection or the to
prop for route navigation.
<van-button type="primary" url="https://github.com">URL</van-button>\n<van-button type="primary" to="index">Vue Router</van-button>\n
\nCustomize the button color using the color
prop.
<van-button color="#7232dd">Pure</van-button>\n<van-button color="#7232dd" plain>Pure</van-button>\n<van-button color="linear-gradient(to right, #ff6034, #ee0a24)">\n Gradient\n</van-button>\n
\nWith the combination of the Button and Swipe component, you can create an animated button effect with vertical scrolling.
\n<van-button type="danger" round>\n <van-swipe\n vertical\n class="notice-swipe"\n :autoplay="2000"\n :touchable="false"\n :show-indicators="false"\n >\n <van-swipe-item>Do Task</van-swipe-item>\n <van-swipe-item>Lottery</van-swipe-item>\n </van-swipe>\n</van-button>\n\n<style>\n .notice-swipe {\n height: 40px;\n line-height: 40px;\n }\n</style>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
type | \nCan be set to primary success warning danger | \nstring | \ndefault | \n
size | \nCan be set to large small mini | \nstring | \nnormal | \n
text | \nText | \nstring | \n- | \n
color | \nColor, support linear-gradient | \nstring | \n- | \n
icon | \nLeft Icon | \nstring | \n- | \n
icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
icon-position | \nIcon position, can be set to right | \nstring | \nleft | \n
tag | \nHTML Tag | \nstring | \nbutton | \n
native-type | \nNative Type Attribute | \nstring | \nbutton | \n
plain | \nWhether to be plain button | \nboolean | \nfalse | \n
block | \nWhether to set display block | \nboolean | \nfalse | \n
round | \nWhether to be round button | \nboolean | \nfalse | \n
square | \nWhether to be square button | \nboolean | \nfalse | \n
disabled | \nWhether to disable button | \nboolean | \nfalse | \n
loading | \nWhether to show loading status | \nboolean | \nfalse | \n
loading-text | \nLoading text | \nstring | \n- | \n
loading-type | \nLoading type, can be set to spinner | \nstring | \ncircular | \n
loading-size | \nLoading icon size | \nnumber | string | \n20px | \n
url | \nLink URL | \nstring | \n- | \n
to | \nThe target route should navigate to when clicked on, same as the to prop of Vue Router | \nstring | object | \n- | \n
replace | \nIf true, the navigation will not leave a history record | \nboolean | \nfalse | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when button is clicked and not disabled or loading | \nevent: MouseEvent | \n
touchstart | \nEmitted when button is touched | \nevent: TouchEvent | \n
Name | \nDescription | \n
---|---|
default | \nDefault slot | \n
icon | \nCustom icon | \n
loading | \nCustom loading icon | \n
The component exports the following type definitions:
\nimport type {\n ButtonType,\n ButtonSize,\n ButtonProps,\n ButtonNativeType,\n ButtonIconPosition,\n} from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-button-mini-height | \n24px | \n- | \n
--van-button-mini-padding | \n0 var(--van-padding-base) | \n- | \n
--van-button-mini-font-size | \nvar(--van-font-size-xs) | \n- | \n
--van-button-small-height | \n32px | \n- | \n
--van-button-small-padding | \n0 var(--van-padding-xs) | \n- | \n
--van-button-small-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-button-normal-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-button-normal-padding | \n0 15px | \n- | \n
--van-button-large-height | \n50px | \n- | \n
--van-button-default-height | \n44px | \n- | \n
--van-button-default-line-height | \n1.2 | \n- | \n
--van-button-default-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-button-default-color | \nvar(--van-text-color) | \n- | \n
--van-button-default-background | \nvar(--van-background-2) | \n- | \n
--van-button-default-border-color | \nvar(--van-gray-4) | \n- | \n
--van-button-primary-color | \nvar(--van-white) | \n- | \n
--van-button-primary-background | \nvar(--van-primary-color) | \n- | \n
--van-button-primary-border-color | \nvar(--van-primary-color) | \n- | \n
--van-button-success-color | \nvar(--van-white) | \n- | \n
--van-button-success-background | \nvar(--van-success-color) | \n- | \n
--van-button-success-border-color | \nvar(--van-success-color) | \n- | \n
--van-button-danger-color | \nvar(--van-white) | \n- | \n
--van-button-danger-background | \nvar(--van-danger-color) | \n- | \n
--van-button-danger-border-color | \nvar(--van-danger-color) | \n- | \n
--van-button-warning-color | \nvar(--van-white) | \n- | \n
--van-button-warning-background | \nvar(--van-warning-color) | \n- | \n
--van-button-warning-border-color | \nvar(--van-warning-color) | \n- | \n
--van-button-border-width | \nvar(--van-border-width) | \n- | \n
--van-button-radius | \nvar(--van-radius-md) | \n- | \n
--van-button-round-radius | \nvar(--van-radius-max) | \n- | \n
--van-button-plain-background | \nvar(--van-white) | \n- | \n
--van-button-disabled-opacity | \nvar(--van-disabled-opacity) | \n- | \n
--van-button-icon-size | \n1.2em | \n- | \n
--van-button-loading-icon-size | \n20px | \n- | \n
\u60AC\u6D6E\u5728\u9875\u9762\u8FB9\u7F18\u7684\u53EF\u70B9\u51FB\u6C14\u6CE1\u3002\u8BF7\u5347\u7EA7 vant
\u5230 >= 4.6.0 \u7248\u672C\u6765\u4F7F\u7528\u8BE5\u7EC4\u4EF6\u3002
\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { FloatingBubble } from 'vant';\n\nconst app = createApp();\napp.use(FloatingBubble);\n
\n\u6D6E\u52A8\u6C14\u6CE1\u9ED8\u8BA4\u5C55\u793A\u5728\u53F3\u4E0B\u89D2\uFF0C\u5E76\u5141\u8BB8\u5728 y \u8F74\u65B9\u5411\u4E0A\u4E0B\u62D6\u62FD\uFF0C\u4F60\u53EF\u4EE5\u901A\u8FC7 icon
\u5C5E\u6027\u8BBE\u7F6E\u6C14\u6CE1\u7684\u56FE\u6807\u3002
<van-floating-bubble icon="chat" @click="onClick" />\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onClick = () => {\n showToast('\u70B9\u51FB\u6C14\u6CE1');\n };\n return { onClick };\n },\n};\n
\n\u5141\u8BB8 x \u548C y \u8F74\u65B9\u5411\u62D6\u62FD\uFF0C\u5438\u9644\u5230 x \u8F74\u65B9\u5411\u6700\u8FD1\u4E00\u8FB9\u3002
\n<van-floating-bubble\n axis="xy"\n icon="chat"\n magnetic="x"\n @offset-change="onOffsetChange"\n/>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onOffsetChange = (offset) => {\n showToast(`x: ${offset.x.toFixed(0)}, y: ${offset.y.toFixed(0)}`);\n };\n return { onOffsetChange };\n },\n};\n
\n\u4F7F\u7528 v-model:offset
\u63A7\u5236 FloatingBubble \u7684\u4F4D\u7F6E\u3002
<van-floating-bubble v-model:offset="offset" axis="xy" icon="chat" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const offset = ref({ x: 200, y: 400 });\n return { offset };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:offset | \n\u63A7\u5236\u6C14\u6CE1\u4F4D\u7F6E | \nOffsetType | \n\u9ED8\u8BA4\u53F3\u4E0B\u89D2\u5750\u6807 | \n
axis | \n\u62D6\u62FD\u7684\u65B9\u5411\uFF0Cxy \u4EE3\u8868\u81EA\u7531\u62D6\u62FD\uFF0Clock \u4EE3\u8868\u7981\u6B62\u62D6\u62FD | \n\'x\' | \'y\' | \'xy\' | \'lock\' | \ny | \n
magnetic | \n\u81EA\u52A8\u78C1\u5438\u7684\u65B9\u5411 | \n\'x\' | \'y\' | \n- | \n
icon | \n\u6C14\u6CE1\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n- | \n
gap | \n\u6C14\u6CE1\u4E0E\u7A97\u53E3\u7684\u6700\u5C0F\u95F4\u8DDD\uFF0C\u5355\u4F4D\u4E3A px | \nnumber | \n24 | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \nbody | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u7EC4\u4EF6\u65F6\u89E6\u53D1 | \nMouseEvent | \n
offset-change | \n\u7531\u7528\u6237\u62D6\u62FD\u5BFC\u81F4\u4F4D\u7F6E\u6539\u53D8\u540E\u89E6\u53D1 | \n{x: string, y: string} | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u81EA\u5B9A\u4E49\u6C14\u6CE1\u663E\u793A\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nexport type {\n FloatingBubbleProps,\n FloatingBubbleAxis,\n FloatingBubbleMagnetic,\n FloatingBubbleOffset,\n} from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-floating-bubble-size | \n48px | \n- | \n
--van-floating-bubble-initial-gap | \n24px | \n- | \n
--van-floating-bubble-icon-size | \n28px | \n- | \n
--van-floating-bubble-background | \nvar(--van-primary-color) | \n- | \n
--van-floating-bubble-color | \nvar(--van-background-2) | \n- | \n
--van-floating-bubble-z-index | \n999 | \n- | \n
--van-floating-bubble-border-radius | \n--van-floating-bubble-border-radius | \n- | \n
\u60AC\u6D6E\u5728\u9875\u9762\u8FB9\u7F18\u7684\u53EF\u70B9\u51FB\u6C14\u6CE1\u3002\u8BF7\u5347\u7EA7 vant
\u5230 >= 4.6.0 \u7248\u672C\u6765\u4F7F\u7528\u8BE5\u7EC4\u4EF6\u3002
\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { FloatingBubble } from 'vant';\n\nconst app = createApp();\napp.use(FloatingBubble);\n
\n\u6D6E\u52A8\u6C14\u6CE1\u9ED8\u8BA4\u5C55\u793A\u5728\u53F3\u4E0B\u89D2\uFF0C\u5E76\u5141\u8BB8\u5728 y \u8F74\u65B9\u5411\u4E0A\u4E0B\u62D6\u62FD\uFF0C\u4F60\u53EF\u4EE5\u901A\u8FC7 icon
\u5C5E\u6027\u8BBE\u7F6E\u6C14\u6CE1\u7684\u56FE\u6807\u3002
<van-floating-bubble icon="chat" @click="onClick" />\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onClick = () => {\n showToast('\u70B9\u51FB\u6C14\u6CE1');\n };\n return { onClick };\n },\n};\n
\n\u5141\u8BB8 x \u548C y \u8F74\u65B9\u5411\u62D6\u62FD\uFF0C\u5438\u9644\u5230 x \u8F74\u65B9\u5411\u6700\u8FD1\u4E00\u8FB9\u3002
\n<van-floating-bubble\n axis="xy"\n icon="chat"\n magnetic="x"\n @offset-change="onOffsetChange"\n/>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onOffsetChange = (offset) => {\n showToast(`x: ${offset.x.toFixed(0)}, y: ${offset.y.toFixed(0)}`);\n };\n return { onOffsetChange };\n },\n};\n
\n\u4F7F\u7528 v-model:offset
\u63A7\u5236 FloatingBubble \u7684\u4F4D\u7F6E\u3002
<van-floating-bubble v-model:offset="offset" axis="xy" icon="chat" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const offset = ref({ x: 200, y: 400 });\n return { offset };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:offset | \n\u63A7\u5236\u6C14\u6CE1\u4F4D\u7F6E | \nOffsetType | \n\u9ED8\u8BA4\u53F3\u4E0B\u89D2\u5750\u6807 | \n
axis | \n\u62D6\u62FD\u7684\u65B9\u5411\uFF0Cxy \u4EE3\u8868\u81EA\u7531\u62D6\u62FD\uFF0Clock \u4EE3\u8868\u7981\u6B62\u62D6\u62FD | \n\'x\' | \'y\' | \'xy\' | \'lock\' | \ny | \n
magnetic | \n\u81EA\u52A8\u78C1\u5438\u7684\u65B9\u5411 | \n\'x\' | \'y\' | \n- | \n
icon | \n\u6C14\u6CE1\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n- | \n
gap | \n\u6C14\u6CE1\u4E0E\u7A97\u53E3\u7684\u6700\u5C0F\u95F4\u8DDD\uFF0C\u5355\u4F4D\u4E3A px | \nnumber | \n24 | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \nbody | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u7EC4\u4EF6\u65F6\u89E6\u53D1 | \nMouseEvent | \n
offset-change | \n\u7531\u7528\u6237\u62D6\u62FD\u5BFC\u81F4\u4F4D\u7F6E\u6539\u53D8\u540E\u89E6\u53D1 | \n{x: string, y: string} | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u81EA\u5B9A\u4E49\u6C14\u6CE1\u663E\u793A\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nexport type {\n FloatingBubbleProps,\n FloatingBubbleAxis,\n FloatingBubbleMagnetic,\n FloatingBubbleOffset,\n} from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-floating-bubble-size | \n48px | \n- | \n
--van-floating-bubble-initial-gap | \n24px | \n- | \n
--van-floating-bubble-icon-size | \n28px | \n- | \n
--van-floating-bubble-background | \nvar(--van-primary-color) | \n- | \n
--van-floating-bubble-color | \nvar(--van-background-2) | \n- | \n
--van-floating-bubble-z-index | \n999 | \n- | \n
--van-floating-bubble-border-radius | \n--van-floating-bubble-border-radius | \n- | \n
\u5355\u5143\u683C\u4E3A\u5217\u8868\u4E2D\u7684\u5355\u4E2A\u5C55\u793A\u9879\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Cell, CellGroup } from 'vant';\n\nconst app = createApp();\napp.use(Cell);\napp.use(CellGroup);\n
\nCell
\u53EF\u4EE5\u5355\u72EC\u4F7F\u7528\uFF0C\u4E5F\u53EF\u4EE5\u4E0E CellGroup
\u642D\u914D\u4F7F\u7528\uFF0CCellGroup
\u53EF\u4EE5\u4E3A Cell
\u63D0\u4F9B\u4E0A\u4E0B\u5916\u8FB9\u6846\u3002
<van-cell-group>\n <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />\n <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" label="\u63CF\u8FF0\u4FE1\u606F" />\n</van-cell-group>\n
\n\u901A\u8FC7 CellGroup
\u7684 inset
\u5C5E\u6027\uFF0C\u53EF\u4EE5\u5C06\u5355\u5143\u683C\u8F6C\u6362\u4E3A\u5706\u89D2\u5361\u7247\u98CE\u683C\uFF08\u4ECE 3.1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\uFF09\u3002
<van-cell-group inset>\n <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />\n <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" label="\u63CF\u8FF0\u4FE1\u606F" />\n</van-cell-group>\n
\n\u901A\u8FC7 size
\u5C5E\u6027\u53EF\u4EE5\u63A7\u5236\u5355\u5143\u683C\u7684\u5927\u5C0F\u3002
<van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" size="large" />\n<van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" size="large" label="\u63CF\u8FF0\u4FE1\u606F" />\n
\n\u901A\u8FC7 icon
\u5C5E\u6027\u5728\u6807\u9898\u5DE6\u4FA7\u5C55\u793A\u56FE\u6807\u3002
<van-cell title="\u5355\u5143\u683C" icon="location-o" />\n
\n\u8BBE\u7F6E is-link
\u5C5E\u6027\u540E\u4F1A\u5728\u5355\u5143\u683C\u53F3\u4FA7\u663E\u793A\u7BAD\u5934\uFF0C\u5E76\u4E14\u53EF\u4EE5\u901A\u8FC7 arrow-direction
\u5C5E\u6027\u63A7\u5236\u7BAD\u5934\u65B9\u5411\u3002
<van-cell title="\u5355\u5143\u683C" is-link />\n<van-cell title="\u5355\u5143\u683C" is-link value="\u5185\u5BB9" />\n<van-cell title="\u5355\u5143\u683C" is-link arrow-direction="down" value="\u5185\u5BB9" />\n
\n\u53EF\u4EE5\u901A\u8FC7 url
\u5C5E\u6027\u8FDB\u884C URL \u8DF3\u8F6C\uFF0C\u6216\u901A\u8FC7 to
\u5C5E\u6027\u8FDB\u884C\u8DEF\u7531\u8DF3\u8F6C\u3002
<van-cell title="URL \u8DF3\u8F6C" is-link url="https://github.com" />\n<van-cell title="\u8DEF\u7531\u8DF3\u8F6C" is-link to="index" />\n
\n\u901A\u8FC7 CellGroup
\u7684 title
\u5C5E\u6027\u53EF\u4EE5\u6307\u5B9A\u5206\u7EC4\u6807\u9898\u3002
<van-cell-group title="\u5206\u7EC41">\n <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />\n</van-cell-group>\n<van-cell-group title="\u5206\u7EC42">\n <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />\n</van-cell-group>\n
\n\u5982\u4EE5\u4E0A\u7528\u6CD5\u4E0D\u80FD\u6EE1\u8DB3\u4F60\u7684\u9700\u6C42\uFF0C\u53EF\u4EE5\u4F7F\u7528\u63D2\u69FD\u6765\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002
\n<van-cell value="\u5185\u5BB9" is-link>\n <!-- \u4F7F\u7528 title \u63D2\u69FD\u6765\u81EA\u5B9A\u4E49\u6807\u9898 -->\n <template #title>\n <span class="custom-title">\u5355\u5143\u683C</span>\n <van-tag type="primary">\u6807\u7B7E</van-tag>\n </template>\n</van-cell>\n\n<van-cell title="\u5355\u5143\u683C" icon="shop-o">\n <!-- \u4F7F\u7528 right-icon \u63D2\u69FD\u6765\u81EA\u5B9A\u4E49\u53F3\u4FA7\u56FE\u6807 -->\n <template #right-icon>\n <van-icon name="search" class="search-icon" />\n </template>\n</van-cell>\n\n<style>\n .custom-title {\n margin-right: 4px;\n vertical-align: middle;\n }\n\n .search-icon {\n font-size: 16px;\n line-height: inherit;\n }\n</style>\n
\n\u901A\u8FC7 center
\u5C5E\u6027\u53EF\u4EE5\u8BA9 Cell
\u7684\u5DE6\u53F3\u5185\u5BB9\u90FD\u5782\u76F4\u5C45\u4E2D\u3002
<van-cell center title="\u5355\u5143\u683C" value="\u5185\u5BB9" label="\u63CF\u8FF0\u4FE1\u606F" />\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
title | \n\u5206\u7EC4\u6807\u9898 | \nstring | \n- | \n
inset | \n\u662F\u5426\u5C55\u793A\u4E3A\u5706\u89D2\u5361\u7247\u98CE\u683C | \nboolean | \nfalse | \n
border | \n\u662F\u5426\u663E\u793A\u5916\u8FB9\u6846 | \nboolean | \ntrue | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
title | \n\u5DE6\u4FA7\u6807\u9898 | \nnumber | string | \n- | \n
value | \n\u53F3\u4FA7\u5185\u5BB9 | \nnumber | string | \n- | \n
label | \n\u6807\u9898\u4E0B\u65B9\u7684\u63CF\u8FF0\u4FE1\u606F | \nstring | \n- | \n
size | \n\u5355\u5143\u683C\u5927\u5C0F\uFF0C\u53EF\u9009\u503C\u4E3A large normal | \nstring | \n- | \n
icon | \n\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n- | \n
icon-prefix | \n\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 | \nstring | \nvan-icon | \n
tag | \n\u6839\u8282\u70B9\u5BF9\u5E94\u7684 HTML \u6807\u7B7E\u540D | \nstring | \ndiv | \n
url | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740 | \nstring | \n- | \n
to | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u76EE\u6807\u8DEF\u7531\u5BF9\u8C61\uFF0C\u7B49\u540C\u4E8E Vue Router \u7684 to \u5C5E\u6027 | \nstring | object | \n- | \n
border | \n\u662F\u5426\u663E\u793A\u5185\u8FB9\u6846 | \nboolean | \ntrue | \n
replace | \n\u662F\u5426\u5728\u8DF3\u8F6C\u65F6\u66FF\u6362\u5F53\u524D\u9875\u9762\u5386\u53F2 | \nboolean | \nfalse | \n
clickable | \n\u662F\u5426\u5F00\u542F\u70B9\u51FB\u53CD\u9988 | \nboolean | \nnull | \n
is-link | \n\u662F\u5426\u5C55\u793A\u53F3\u4FA7\u7BAD\u5934\u5E76\u5F00\u542F\u70B9\u51FB\u53CD\u9988 | \nboolean | \nfalse | \n
required | \n\u662F\u5426\u663E\u793A\u8868\u5355\u5FC5\u586B\u661F\u53F7 | \nboolean | \nfalse | \n
center | \n\u662F\u5426\u4F7F\u5185\u5BB9\u5782\u76F4\u5C45\u4E2D | \nboolean | \nfalse | \n
arrow-direction | \n\u7BAD\u5934\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A left up down | \nstring | \nright | \n
title-style | \n\u5DE6\u4FA7\u6807\u9898\u989D\u5916\u6837\u5F0F | \nstring | Array | object | \n- | \n
title-class | \n\u5DE6\u4FA7\u6807\u9898\u989D\u5916\u7C7B\u540D | \nstring | Array | object | \n- | \n
value-class | \n\u53F3\u4FA7\u5185\u5BB9\u989D\u5916\u7C7B\u540D | \nstring | Array | object | \n- | \n
label-class | \n\u63CF\u8FF0\u4FE1\u606F\u989D\u5916\u7C7B\u540D | \nstring | Array | object | \n- | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u5355\u5143\u683C\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u9ED8\u8BA4\u63D2\u69FD | \n
title | \n\u81EA\u5B9A\u4E49\u5206\u7EC4\u6807\u9898 | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
title | \n\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u6807\u9898 | \n
value | \n\u81EA\u5B9A\u4E49\u53F3\u4FA7\u5185\u5BB9 | \n
label | \n\u81EA\u5B9A\u4E49\u6807\u9898\u4E0B\u65B9\u7684\u63CF\u8FF0\u4FE1\u606F | \n
icon | \n\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u56FE\u6807 | \n
right-icon | \n\u81EA\u5B9A\u4E49\u53F3\u4FA7\u56FE\u6807 | \n
extra | \n\u81EA\u5B9A\u4E49\u5355\u5143\u683C\u6700\u53F3\u4FA7\u7684\u989D\u5916\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n CellSize,\n CellProps,\n CellGroupProps,\n CellArrowDirection,\n} from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-cell-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-cell-line-height | \n24px | \n- | \n
--van-cell-vertical-padding | \n10px | \n- | \n
--van-cell-horizontal-padding | \nvar(--van-padding-md) | \n- | \n
--van-cell-text-color | \nvar(--van-text-color) | \n- | \n
--van-cell-background | \nvar(--van-background-2) | \n- | \n
--van-cell-border-color | \nvar(--van-border-color) | \n- | \n
--van-cell-active-color | \nvar(--van-active-color) | \n- | \n
--van-cell-required-color | \nvar(--van-danger-color) | \n- | \n
--van-cell-label-color | \nvar(--van-text-color-2) | \n- | \n
--van-cell-label-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-cell-label-line-height | \nvar(--van-line-height-sm) | \n- | \n
--van-cell-label-margin-top | \nvar(--van-padding-base) | \n- | \n
--van-cell-value-color | \nvar(--van-text-color-2) | \n- | \n
--van-cell-value-font-size | \ninherit | \n- | \n
--van-cell-icon-size | \n16px | \n- | \n
--van-cell-right-icon-color | \nvar(--van-gray-6) | \n- | \n
--van-cell-large-vertical-padding | \nvar(--van-padding-sm) | \n- | \n
--van-cell-large-title-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-cell-large-label-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-cell-large-value-font-size | \ninherit | \n- | \n
--van-cell-group-background | \nvar(--van-background-2) | \n- | \n
--van-cell-group-title-color | \nvar(--van-text-color-2) | \n- | \n
--van-cell-group-title-padding | \nvar(--van-padding-md) var(--van-padding-md) var(--van-padding-xs) | \n- | \n
--van-cell-group-title-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-cell-group-title-line-height | \n16px | \n- | \n
--van-cell-group-inset-padding | \n0 var(--van-padding-md) | \n- | \n
--van-cell-group-inset-radius | \nvar(--van-radius-lg) | \n- | \n
--van-cell-group-inset-title-padding | \nvar(--van-padding-md) var(--van-padding-md) var(--van-padding-xs) var(--van-padding-xl) | \n- | \n
\u5355\u5143\u683C\u4E3A\u5217\u8868\u4E2D\u7684\u5355\u4E2A\u5C55\u793A\u9879\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Cell, CellGroup } from 'vant';\n\nconst app = createApp();\napp.use(Cell);\napp.use(CellGroup);\n
\nCell
\u53EF\u4EE5\u5355\u72EC\u4F7F\u7528\uFF0C\u4E5F\u53EF\u4EE5\u4E0E CellGroup
\u642D\u914D\u4F7F\u7528\uFF0CCellGroup
\u53EF\u4EE5\u4E3A Cell
\u63D0\u4F9B\u4E0A\u4E0B\u5916\u8FB9\u6846\u3002
<van-cell-group>\n <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />\n <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" label="\u63CF\u8FF0\u4FE1\u606F" />\n</van-cell-group>\n
\n\u901A\u8FC7 CellGroup
\u7684 inset
\u5C5E\u6027\uFF0C\u53EF\u4EE5\u5C06\u5355\u5143\u683C\u8F6C\u6362\u4E3A\u5706\u89D2\u5361\u7247\u98CE\u683C\uFF08\u4ECE 3.1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\uFF09\u3002
<van-cell-group inset>\n <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />\n <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" label="\u63CF\u8FF0\u4FE1\u606F" />\n</van-cell-group>\n
\n\u901A\u8FC7 size
\u5C5E\u6027\u53EF\u4EE5\u63A7\u5236\u5355\u5143\u683C\u7684\u5927\u5C0F\u3002
<van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" size="large" />\n<van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" size="large" label="\u63CF\u8FF0\u4FE1\u606F" />\n
\n\u901A\u8FC7 icon
\u5C5E\u6027\u5728\u6807\u9898\u5DE6\u4FA7\u5C55\u793A\u56FE\u6807\u3002
<van-cell title="\u5355\u5143\u683C" icon="location-o" />\n
\n\u8BBE\u7F6E is-link
\u5C5E\u6027\u540E\u4F1A\u5728\u5355\u5143\u683C\u53F3\u4FA7\u663E\u793A\u7BAD\u5934\uFF0C\u5E76\u4E14\u53EF\u4EE5\u901A\u8FC7 arrow-direction
\u5C5E\u6027\u63A7\u5236\u7BAD\u5934\u65B9\u5411\u3002
<van-cell title="\u5355\u5143\u683C" is-link />\n<van-cell title="\u5355\u5143\u683C" is-link value="\u5185\u5BB9" />\n<van-cell title="\u5355\u5143\u683C" is-link arrow-direction="down" value="\u5185\u5BB9" />\n
\n\u53EF\u4EE5\u901A\u8FC7 url
\u5C5E\u6027\u8FDB\u884C URL \u8DF3\u8F6C\uFF0C\u6216\u901A\u8FC7 to
\u5C5E\u6027\u8FDB\u884C\u8DEF\u7531\u8DF3\u8F6C\u3002
<van-cell title="URL \u8DF3\u8F6C" is-link url="https://github.com" />\n<van-cell title="\u8DEF\u7531\u8DF3\u8F6C" is-link to="index" />\n
\n\u901A\u8FC7 CellGroup
\u7684 title
\u5C5E\u6027\u53EF\u4EE5\u6307\u5B9A\u5206\u7EC4\u6807\u9898\u3002
<van-cell-group title="\u5206\u7EC41">\n <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />\n</van-cell-group>\n<van-cell-group title="\u5206\u7EC42">\n <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />\n</van-cell-group>\n
\n\u5982\u4EE5\u4E0A\u7528\u6CD5\u4E0D\u80FD\u6EE1\u8DB3\u4F60\u7684\u9700\u6C42\uFF0C\u53EF\u4EE5\u4F7F\u7528\u63D2\u69FD\u6765\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002
\n<van-cell value="\u5185\u5BB9" is-link>\n <!-- \u4F7F\u7528 title \u63D2\u69FD\u6765\u81EA\u5B9A\u4E49\u6807\u9898 -->\n <template #title>\n <span class="custom-title">\u5355\u5143\u683C</span>\n <van-tag type="primary">\u6807\u7B7E</van-tag>\n </template>\n</van-cell>\n\n<van-cell title="\u5355\u5143\u683C" icon="shop-o">\n <!-- \u4F7F\u7528 right-icon \u63D2\u69FD\u6765\u81EA\u5B9A\u4E49\u53F3\u4FA7\u56FE\u6807 -->\n <template #right-icon>\n <van-icon name="search" class="search-icon" />\n </template>\n</van-cell>\n\n<style>\n .custom-title {\n margin-right: 4px;\n vertical-align: middle;\n }\n\n .search-icon {\n font-size: 16px;\n line-height: inherit;\n }\n</style>\n
\n\u901A\u8FC7 center
\u5C5E\u6027\u53EF\u4EE5\u8BA9 Cell
\u7684\u5DE6\u53F3\u5185\u5BB9\u90FD\u5782\u76F4\u5C45\u4E2D\u3002
<van-cell center title="\u5355\u5143\u683C" value="\u5185\u5BB9" label="\u63CF\u8FF0\u4FE1\u606F" />\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
title | \n\u5206\u7EC4\u6807\u9898 | \nstring | \n- | \n
inset | \n\u662F\u5426\u5C55\u793A\u4E3A\u5706\u89D2\u5361\u7247\u98CE\u683C | \nboolean | \nfalse | \n
border | \n\u662F\u5426\u663E\u793A\u5916\u8FB9\u6846 | \nboolean | \ntrue | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
title | \n\u5DE6\u4FA7\u6807\u9898 | \nnumber | string | \n- | \n
value | \n\u53F3\u4FA7\u5185\u5BB9 | \nnumber | string | \n- | \n
label | \n\u6807\u9898\u4E0B\u65B9\u7684\u63CF\u8FF0\u4FE1\u606F | \nstring | \n- | \n
size | \n\u5355\u5143\u683C\u5927\u5C0F\uFF0C\u53EF\u9009\u503C\u4E3A large normal | \nstring | \n- | \n
icon | \n\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n- | \n
icon-prefix | \n\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 | \nstring | \nvan-icon | \n
tag | \n\u6839\u8282\u70B9\u5BF9\u5E94\u7684 HTML \u6807\u7B7E\u540D | \nstring | \ndiv | \n
url | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740 | \nstring | \n- | \n
to | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u76EE\u6807\u8DEF\u7531\u5BF9\u8C61\uFF0C\u7B49\u540C\u4E8E Vue Router \u7684 to \u5C5E\u6027 | \nstring | object | \n- | \n
border | \n\u662F\u5426\u663E\u793A\u5185\u8FB9\u6846 | \nboolean | \ntrue | \n
replace | \n\u662F\u5426\u5728\u8DF3\u8F6C\u65F6\u66FF\u6362\u5F53\u524D\u9875\u9762\u5386\u53F2 | \nboolean | \nfalse | \n
clickable | \n\u662F\u5426\u5F00\u542F\u70B9\u51FB\u53CD\u9988 | \nboolean | \nnull | \n
is-link | \n\u662F\u5426\u5C55\u793A\u53F3\u4FA7\u7BAD\u5934\u5E76\u5F00\u542F\u70B9\u51FB\u53CD\u9988 | \nboolean | \nfalse | \n
required | \n\u662F\u5426\u663E\u793A\u8868\u5355\u5FC5\u586B\u661F\u53F7 | \nboolean | \nfalse | \n
center | \n\u662F\u5426\u4F7F\u5185\u5BB9\u5782\u76F4\u5C45\u4E2D | \nboolean | \nfalse | \n
arrow-direction | \n\u7BAD\u5934\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A left up down | \nstring | \nright | \n
title-style | \n\u5DE6\u4FA7\u6807\u9898\u989D\u5916\u6837\u5F0F | \nstring | Array | object | \n- | \n
title-class | \n\u5DE6\u4FA7\u6807\u9898\u989D\u5916\u7C7B\u540D | \nstring | Array | object | \n- | \n
value-class | \n\u53F3\u4FA7\u5185\u5BB9\u989D\u5916\u7C7B\u540D | \nstring | Array | object | \n- | \n
label-class | \n\u63CF\u8FF0\u4FE1\u606F\u989D\u5916\u7C7B\u540D | \nstring | Array | object | \n- | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u5355\u5143\u683C\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u9ED8\u8BA4\u63D2\u69FD | \n
title | \n\u81EA\u5B9A\u4E49\u5206\u7EC4\u6807\u9898 | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
title | \n\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u6807\u9898 | \n
value | \n\u81EA\u5B9A\u4E49\u53F3\u4FA7\u5185\u5BB9 | \n
label | \n\u81EA\u5B9A\u4E49\u6807\u9898\u4E0B\u65B9\u7684\u63CF\u8FF0\u4FE1\u606F | \n
icon | \n\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u56FE\u6807 | \n
right-icon | \n\u81EA\u5B9A\u4E49\u53F3\u4FA7\u56FE\u6807 | \n
extra | \n\u81EA\u5B9A\u4E49\u5355\u5143\u683C\u6700\u53F3\u4FA7\u7684\u989D\u5916\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n CellSize,\n CellProps,\n CellGroupProps,\n CellArrowDirection,\n} from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-cell-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-cell-line-height | \n24px | \n- | \n
--van-cell-vertical-padding | \n10px | \n- | \n
--van-cell-horizontal-padding | \nvar(--van-padding-md) | \n- | \n
--van-cell-text-color | \nvar(--van-text-color) | \n- | \n
--van-cell-background | \nvar(--van-background-2) | \n- | \n
--van-cell-border-color | \nvar(--van-border-color) | \n- | \n
--van-cell-active-color | \nvar(--van-active-color) | \n- | \n
--van-cell-required-color | \nvar(--van-danger-color) | \n- | \n
--van-cell-label-color | \nvar(--van-text-color-2) | \n- | \n
--van-cell-label-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-cell-label-line-height | \nvar(--van-line-height-sm) | \n- | \n
--van-cell-label-margin-top | \nvar(--van-padding-base) | \n- | \n
--van-cell-value-color | \nvar(--van-text-color-2) | \n- | \n
--van-cell-value-font-size | \ninherit | \n- | \n
--van-cell-icon-size | \n16px | \n- | \n
--van-cell-right-icon-color | \nvar(--van-gray-6) | \n- | \n
--van-cell-large-vertical-padding | \nvar(--van-padding-sm) | \n- | \n
--van-cell-large-title-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-cell-large-label-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-cell-large-value-font-size | \ninherit | \n- | \n
--van-cell-group-background | \nvar(--van-background-2) | \n- | \n
--van-cell-group-title-color | \nvar(--van-text-color-2) | \n- | \n
--van-cell-group-title-padding | \nvar(--van-padding-md) var(--van-padding-md) var(--van-padding-xs) | \n- | \n
--van-cell-group-title-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-cell-group-title-line-height | \n16px | \n- | \n
--van-cell-group-inset-padding | \n0 var(--van-padding-md) | \n- | \n
--van-cell-group-inset-radius | \nvar(--van-radius-lg) | \n- | \n
--van-cell-group-inset-title-padding | \nvar(--van-padding-md) var(--van-padding-md) var(--van-padding-xs) var(--van-padding-xl) | \n- | \n
\u5706\u73AF\u5F62\u7684\u8FDB\u5EA6\u6761\u7EC4\u4EF6\uFF0C\u652F\u6301\u8FDB\u5EA6\u6E10\u53D8\u52A8\u753B\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Circle } from 'vant';\n\nconst app = createApp();\napp.use(Circle);\n
\nrate
\u5C5E\u6027\u8868\u793A\u8FDB\u5EA6\u6761\u7684\u76EE\u6807\u8FDB\u5EA6\uFF0Cv-model:current-rate
\u8868\u793A\u52A8\u753B\u8FC7\u7A0B\u4E2D\u7684\u5B9E\u65F6\u8FDB\u5EA6\u3002\u5F53 rate
\u53D1\u751F\u53D8\u5316\u65F6\uFF0Cv-model:current-rate
\u4F1A\u4EE5 speed
\u7684\u901F\u5EA6\u53D8\u5316\uFF0C\u76F4\u81F3\u8FBE\u5230 rate
\u8BBE\u5B9A\u7684\u503C\u3002
<van-circle\n v-model:current-rate="currentRate"\n :rate="30"\n :speed="100"\n :text="text"\n/>\n
\nimport { ref, computed } from 'vue';\n\nexport default {\n setup() {\n const currentRate = ref(0);\n const text = computed(() => currentRate.value.toFixed(0) + '%');\n\n return {\n text,\n currentRate,\n };\n },\n};\n
\n\u901A\u8FC7 stroke-width
\u5C5E\u6027\u6765\u63A7\u5236\u8FDB\u5EA6\u6761\u5BBD\u5EA6\uFF0Cstroke-width
\u6307\u7684\u662F SVG \u4E2D path
\u7684\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u503C\u4E3A 40
\u3002
<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n :stroke-width="60"\n text="\u5BBD\u5EA6\u5B9A\u5236"\n/>\n
\nstroke-width
\u7684\u5355\u4F4D\u4E0D\u662F px
\uFF0C\u5982\u679C\u4F60\u60F3\u77E5\u9053 stroke-width
\u4E0E px
\u7684\u6362\u7B97\u5173\u7CFB\uFF0C\u53EF\u4EE5\u901A\u8FC7\u5982\u4E0B\u516C\u5F0F\u8BA1\u7B97\uFF1A
// SVG \u7684 viewBox \u5927\u5C0F\nconst viewBox = 1000 + strokeWidth;\n\n// Circle \u7EC4\u4EF6\u7684\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u4E3A 100px\nconst circleWidth = 100;\n\n// \u6700\u7EC8\u6E32\u67D3\u51FA\u6765\u7684\u8FDB\u5EA6\u6761\u5BBD\u5EA6\uFF08px\uFF09\nconst pxWidth = (strokeWidth * circleWidth) / viewBox;\n
\n\u901A\u8FC7 color
\u5C5E\u6027\u6765\u63A7\u5236\u8FDB\u5EA6\u6761\u989C\u8272\uFF0Clayer-color
\u5C5E\u6027\u6765\u63A7\u5236\u8F68\u9053\u989C\u8272\u3002
<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n layer-color="#ebedf0"\n text="\u989C\u8272\u5B9A\u5236"\n/>\n
\ncolor
\u5C5E\u6027\u652F\u6301\u4F20\u5165\u5BF9\u8C61\u683C\u5F0F\u6765\u5B9A\u4E49\u6E10\u53D8\u8272\u3002
<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n :color="gradientColor"\n text="\u6E10\u53D8\u8272"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentRate = ref(0);\n const gradientColor = {\n '0%': '#3fecff',\n '100%': '#6149f6',\n };\n\n return {\n currentRate,\n gradientColor,\n };\n },\n};\n
\n\u5C06 clockwise
\u8BBE\u7F6E\u4E3A false
\uFF0C\u8FDB\u5EA6\u4F1A\u4ECE\u9006\u65F6\u9488\u65B9\u5411\u5F00\u59CB\u3002
<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n :clockwise="false"\n text="\u9006\u65F6\u9488\u65B9\u5411"\n/>\n
\n\u901A\u8FC7 size
\u5C5E\u6027\u8BBE\u7F6E\u5706\u73AF\u76F4\u5F84\u3002
<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n size="120px"\n text="\u5927\u5C0F\u5B9A\u5236"\n/>\n
\n\u8FDB\u5EA6\u6761\u9ED8\u8BA4\u4ECE\u9876\u90E8\u5F00\u59CB\uFF0C\u53EF\u4EE5\u901A\u8FC7 start-position
\u5C5E\u6027\u8BBE\u7F6E\u8D77\u59CB\u4F4D\u7F6E\u3002
<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n text="\u5DE6\u4FA7"\n start-position="left"\n/>\n<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n text="\u53F3\u4FA7"\n start-position="right"\n/>\n<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n text="\u5E95\u90E8"\n start-position="bottom"\n/>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:current-rate | \n\u5F53\u524D\u8FDB\u5EA6 | \nnumber | \n- | \n
rate | \n\u76EE\u6807\u8FDB\u5EA6 | \nnumber | string | \n100 | \n
size | \n\u5706\u73AF\u76F4\u5F84\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n100px | \n
color | \n\u8FDB\u5EA6\u6761\u989C\u8272\uFF0C\u4F20\u5165\u5BF9\u8C61\u683C\u5F0F\u53EF\u4EE5\u5B9A\u4E49\u6E10\u53D8\u8272 | \nstring | object | \n#1989fa | \n
layer-color | \n\u8F68\u9053\u989C\u8272 | \nstring | \nwhite | \n
fill | \n\u586B\u5145\u989C\u8272 | \nstring | \nnone | \n
speed | \n\u52A8\u753B\u901F\u5EA6\uFF08\u5355\u4F4D\u4E3A rate/s\uFF09 | \nnumber | string | \n0 | \n
text | \n\u6587\u5B57 | \nstring | \n- | \n
stroke-width | \n\u8FDB\u5EA6\u6761\u5BBD\u5EA6 | \nnumber | string | \n40 | \n
stroke-linecap | \n\u8FDB\u5EA6\u6761\u7AEF\u70B9\u7684\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A square butt | \nstring | \nround | \n
clockwise | \n\u662F\u5426\u987A\u65F6\u9488\u589E\u52A0 | \nboolean | \ntrue | \n
start-position | \n\u8FDB\u5EA6\u8D77\u59CB\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A left \u3001right \u3001bottom | \nCircleStartPosition | \ntop | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u81EA\u5B9A\u4E49\u6587\u5B57\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { CircleProps, CircleStartPosition } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-circle-size | \n100px | \n- | \n
--van-circle-color | \nvar(--van-primary-color) | \n- | \n
--van-circle-layer-color | \nvar(--van-white) | \n- | \n
--van-circle-text-color | \nvar(--van-text-color) | \n- | \n
--van-circle-text-font-weight | \nvar(--van-font-bold) | \n- | \n
--van-circle-text-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-circle-text-line-height | \nvar(--van-line-height-md) | \n- | \n
\u5706\u73AF\u5F62\u7684\u8FDB\u5EA6\u6761\u7EC4\u4EF6\uFF0C\u652F\u6301\u8FDB\u5EA6\u6E10\u53D8\u52A8\u753B\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Circle } from 'vant';\n\nconst app = createApp();\napp.use(Circle);\n
\nrate
\u5C5E\u6027\u8868\u793A\u8FDB\u5EA6\u6761\u7684\u76EE\u6807\u8FDB\u5EA6\uFF0Cv-model:current-rate
\u8868\u793A\u52A8\u753B\u8FC7\u7A0B\u4E2D\u7684\u5B9E\u65F6\u8FDB\u5EA6\u3002\u5F53 rate
\u53D1\u751F\u53D8\u5316\u65F6\uFF0Cv-model:current-rate
\u4F1A\u4EE5 speed
\u7684\u901F\u5EA6\u53D8\u5316\uFF0C\u76F4\u81F3\u8FBE\u5230 rate
\u8BBE\u5B9A\u7684\u503C\u3002
<van-circle\n v-model:current-rate="currentRate"\n :rate="30"\n :speed="100"\n :text="text"\n/>\n
\nimport { ref, computed } from 'vue';\n\nexport default {\n setup() {\n const currentRate = ref(0);\n const text = computed(() => currentRate.value.toFixed(0) + '%');\n\n return {\n text,\n currentRate,\n };\n },\n};\n
\n\u901A\u8FC7 stroke-width
\u5C5E\u6027\u6765\u63A7\u5236\u8FDB\u5EA6\u6761\u5BBD\u5EA6\uFF0Cstroke-width
\u6307\u7684\u662F SVG \u4E2D path
\u7684\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u503C\u4E3A 40
\u3002
<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n :stroke-width="60"\n text="\u5BBD\u5EA6\u5B9A\u5236"\n/>\n
\nstroke-width
\u7684\u5355\u4F4D\u4E0D\u662F px
\uFF0C\u5982\u679C\u4F60\u60F3\u77E5\u9053 stroke-width
\u4E0E px
\u7684\u6362\u7B97\u5173\u7CFB\uFF0C\u53EF\u4EE5\u901A\u8FC7\u5982\u4E0B\u516C\u5F0F\u8BA1\u7B97\uFF1A
// SVG \u7684 viewBox \u5927\u5C0F\nconst viewBox = 1000 + strokeWidth;\n\n// Circle \u7EC4\u4EF6\u7684\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u4E3A 100px\nconst circleWidth = 100;\n\n// \u6700\u7EC8\u6E32\u67D3\u51FA\u6765\u7684\u8FDB\u5EA6\u6761\u5BBD\u5EA6\uFF08px\uFF09\nconst pxWidth = (strokeWidth * circleWidth) / viewBox;\n
\n\u901A\u8FC7 color
\u5C5E\u6027\u6765\u63A7\u5236\u8FDB\u5EA6\u6761\u989C\u8272\uFF0Clayer-color
\u5C5E\u6027\u6765\u63A7\u5236\u8F68\u9053\u989C\u8272\u3002
<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n layer-color="#ebedf0"\n text="\u989C\u8272\u5B9A\u5236"\n/>\n
\ncolor
\u5C5E\u6027\u652F\u6301\u4F20\u5165\u5BF9\u8C61\u683C\u5F0F\u6765\u5B9A\u4E49\u6E10\u53D8\u8272\u3002
<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n :color="gradientColor"\n text="\u6E10\u53D8\u8272"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentRate = ref(0);\n const gradientColor = {\n '0%': '#3fecff',\n '100%': '#6149f6',\n };\n\n return {\n currentRate,\n gradientColor,\n };\n },\n};\n
\n\u5C06 clockwise
\u8BBE\u7F6E\u4E3A false
\uFF0C\u8FDB\u5EA6\u4F1A\u4ECE\u9006\u65F6\u9488\u65B9\u5411\u5F00\u59CB\u3002
<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n :clockwise="false"\n text="\u9006\u65F6\u9488\u65B9\u5411"\n/>\n
\n\u901A\u8FC7 size
\u5C5E\u6027\u8BBE\u7F6E\u5706\u73AF\u76F4\u5F84\u3002
<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n size="120px"\n text="\u5927\u5C0F\u5B9A\u5236"\n/>\n
\n\u8FDB\u5EA6\u6761\u9ED8\u8BA4\u4ECE\u9876\u90E8\u5F00\u59CB\uFF0C\u53EF\u4EE5\u901A\u8FC7 start-position
\u5C5E\u6027\u8BBE\u7F6E\u8D77\u59CB\u4F4D\u7F6E\u3002
<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n text="\u5DE6\u4FA7"\n start-position="left"\n/>\n<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n text="\u53F3\u4FA7"\n start-position="right"\n/>\n<van-circle\n v-model:current-rate="currentRate"\n :rate="rate"\n text="\u5E95\u90E8"\n start-position="bottom"\n/>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:current-rate | \n\u5F53\u524D\u8FDB\u5EA6 | \nnumber | \n- | \n
rate | \n\u76EE\u6807\u8FDB\u5EA6 | \nnumber | string | \n100 | \n
size | \n\u5706\u73AF\u76F4\u5F84\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n100px | \n
color | \n\u8FDB\u5EA6\u6761\u989C\u8272\uFF0C\u4F20\u5165\u5BF9\u8C61\u683C\u5F0F\u53EF\u4EE5\u5B9A\u4E49\u6E10\u53D8\u8272 | \nstring | object | \n#1989fa | \n
layer-color | \n\u8F68\u9053\u989C\u8272 | \nstring | \nwhite | \n
fill | \n\u586B\u5145\u989C\u8272 | \nstring | \nnone | \n
speed | \n\u52A8\u753B\u901F\u5EA6\uFF08\u5355\u4F4D\u4E3A rate/s\uFF09 | \nnumber | string | \n0 | \n
text | \n\u6587\u5B57 | \nstring | \n- | \n
stroke-width | \n\u8FDB\u5EA6\u6761\u5BBD\u5EA6 | \nnumber | string | \n40 | \n
stroke-linecap | \n\u8FDB\u5EA6\u6761\u7AEF\u70B9\u7684\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A square butt | \nstring | \nround | \n
clockwise | \n\u662F\u5426\u987A\u65F6\u9488\u589E\u52A0 | \nboolean | \ntrue | \n
start-position | \n\u8FDB\u5EA6\u8D77\u59CB\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A left \u3001right \u3001bottom | \nCircleStartPosition | \ntop | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u81EA\u5B9A\u4E49\u6587\u5B57\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { CircleProps, CircleStartPosition } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-circle-size | \n100px | \n- | \n
--van-circle-color | \nvar(--van-primary-color) | \n- | \n
--van-circle-layer-color | \nvar(--van-white) | \n- | \n
--van-circle-text-color | \nvar(--van-text-color) | \n- | \n
--van-circle-text-font-weight | \nvar(--van-font-bold) | \n- | \n
--van-circle-text-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-circle-text-line-height | \nvar(--van-line-height-md) | \n- | \n
Used to provide interactive operations for pull-down refresh.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { PullRefresh } from 'vant';\n\nconst app = createApp();\napp.use(PullRefresh);\n
\nThe refresh
event will be Emitted when pull refresh, you should set v-model
to false
to reset loading status after process refresh event.
<van-pull-refresh v-model="loading" @refresh="onRefresh">\n <p>Refresh Count: {{ count }}</p>\n</van-pull-refresh>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const count = ref(0);\n const loading = ref(false);\n const onRefresh = () => {\n setTimeout(() => {\n showToast('Refresh Success');\n loading.value = false;\n count.value++;\n }, 1000);\n };\n\n return {\n count,\n loading,\n onRefresh,\n };\n },\n};\n
\nUse success-text
to set the success prompt after the refresh is successful
<van-pull-refresh\n v-model="isLoading"\n success-text="Refresh success"\n @refresh="onRefresh"\n>\n <p>Refresh Count: {{ count }}</p>\n</van-pull-refresh>\n
\nUse slots to custom tips.
\n<van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">\n <template #pulling="props">\n <img\n class="doge"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"\n :style="{ transform: `scale(${props.distance / 80})` }"\n />\n </template>\n\n <template #loosing>\n <img\n class="doge"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"\n />\n </template>\n\n <template #loading>\n <img\n class="doge"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/doge-fire.jpeg"\n />\n </template>\n <p>Refresh Count: {{ count }}</p>\n</van-pull-refresh>\n\n<style>\n .doge {\n width: 140px;\n height: 72px;\n margin-top: 8px;\n border-radius: 4px;\n }\n</style>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nLoading status | \nboolean | \n- | \n
pulling-text | \nText to show when pulling | \nstring | \nPull to refresh... | \n
loosing-text | \nText to show when loosing | \nstring | \nLoose to refresh... | \n
loading-text | \nText to show when loading | \nstring | \nLoading... | \n
success-text | \nText to show when loading success | \nstring | \n- | \n
success-duration | \nSuccess text display duration(ms) | \nnumber | string | \n500 | \n
animation-duration | \nAnimation duration | \nnumber | string | \n300 | \n
head-height | \nHeight of head | \nnumber | string | \n50 | \n
pull-distance | \nThe distance to trigger the pull refresh | \nnumber | string | \nsame as head-height | \n
disabled | \nWhether to disable pull refresh | \nboolean | \nfalse | \n
Event | \nDescription | \nParameters | \n
---|---|---|
refresh | \nEmitted after pulling refresh | \n- | \n
change | \nEmitted when draging or status changed | \n{ status: string, distance: number } | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
default | \nDefault slot | \n- | \n
normal | \nContent of head when at normal status | \n- | \n
pulling | \nContent of head when at pulling | \n{ distance: number } | \n
loosing | \nContent of head when at loosing | \n{ distance: number } | \n
loading | \nContent of head when at loading | \n{ distance: number } | \n
success | \nContent of head when succeed | \n- | \n
The component exports the following type definitions:
\nimport type { PullRefreshProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-pull-refresh-head-height | \n50px | \n- | \n
--van-pull-refresh-head-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-pull-refresh-head-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-pull-refresh-loading-icon-size | \n16px | \n- | \n
Used to provide interactive operations for pull-down refresh.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { PullRefresh } from 'vant';\n\nconst app = createApp();\napp.use(PullRefresh);\n
\nThe refresh
event will be Emitted when pull refresh, you should set v-model
to false
to reset loading status after process refresh event.
<van-pull-refresh v-model="loading" @refresh="onRefresh">\n <p>Refresh Count: {{ count }}</p>\n</van-pull-refresh>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const count = ref(0);\n const loading = ref(false);\n const onRefresh = () => {\n setTimeout(() => {\n showToast('Refresh Success');\n loading.value = false;\n count.value++;\n }, 1000);\n };\n\n return {\n count,\n loading,\n onRefresh,\n };\n },\n};\n
\nUse success-text
to set the success prompt after the refresh is successful
<van-pull-refresh\n v-model="isLoading"\n success-text="Refresh success"\n @refresh="onRefresh"\n>\n <p>Refresh Count: {{ count }}</p>\n</van-pull-refresh>\n
\nUse slots to custom tips.
\n<van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">\n <template #pulling="props">\n <img\n class="doge"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"\n :style="{ transform: `scale(${props.distance / 80})` }"\n />\n </template>\n\n <template #loosing>\n <img\n class="doge"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"\n />\n </template>\n\n <template #loading>\n <img\n class="doge"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/doge-fire.jpeg"\n />\n </template>\n <p>Refresh Count: {{ count }}</p>\n</van-pull-refresh>\n\n<style>\n .doge {\n width: 140px;\n height: 72px;\n margin-top: 8px;\n border-radius: 4px;\n }\n</style>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nLoading status | \nboolean | \n- | \n
pulling-text | \nText to show when pulling | \nstring | \nPull to refresh... | \n
loosing-text | \nText to show when loosing | \nstring | \nLoose to refresh... | \n
loading-text | \nText to show when loading | \nstring | \nLoading... | \n
success-text | \nText to show when loading success | \nstring | \n- | \n
success-duration | \nSuccess text display duration(ms) | \nnumber | string | \n500 | \n
animation-duration | \nAnimation duration | \nnumber | string | \n300 | \n
head-height | \nHeight of head | \nnumber | string | \n50 | \n
pull-distance | \nThe distance to trigger the pull refresh | \nnumber | string | \nsame as head-height | \n
disabled | \nWhether to disable pull refresh | \nboolean | \nfalse | \n
Event | \nDescription | \nParameters | \n
---|---|---|
refresh | \nEmitted after pulling refresh | \n- | \n
change | \nEmitted when draging or status changed | \n{ status: string, distance: number } | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
default | \nDefault slot | \n- | \n
normal | \nContent of head when at normal status | \n- | \n
pulling | \nContent of head when at pulling | \n{ distance: number } | \n
loosing | \nContent of head when at loosing | \n{ distance: number } | \n
loading | \nContent of head when at loading | \n{ distance: number } | \n
success | \nContent of head when succeed | \n- | \n
The component exports the following type definitions:
\nimport type { PullRefreshProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-pull-refresh-head-height | \n50px | \n- | \n
--van-pull-refresh-head-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-pull-refresh-head-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-pull-refresh-loading-icon-size | \n16px | \n- | \n
\u5728\u4E00\u7EC4\u5907\u9009\u9879\u4E2D\u8FDB\u884C\u5355\u9009\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { RadioGroup, Radio } from 'vant';\n\nconst app = createApp();\napp.use(Radio);\napp.use(RadioGroup);\n
\n\u901A\u8FC7 v-model
\u7ED1\u5B9A\u503C\u5F53\u524D\u9009\u4E2D\u9879\u7684 name\u3002
<van-radio-group v-model="checked">\n <van-radio name="1">\u5355\u9009\u6846 1</van-radio>\n <van-radio name="2">\u5355\u9009\u6846 2</van-radio>\n</van-radio-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref('1');\n return { checked };\n },\n};\n
\n\u5C06 direction
\u5C5E\u6027\u8BBE\u7F6E\u4E3A horizontal
\u540E\uFF0C\u5355\u9009\u6846\u7EC4\u4F1A\u53D8\u6210\u6C34\u5E73\u6392\u5217\u3002
<van-radio-group v-model="checked" direction="horizontal">\n <van-radio name="1">\u5355\u9009\u6846 1</van-radio>\n <van-radio name="2">\u5355\u9009\u6846 2</van-radio>\n</van-radio-group>\n
\n\u901A\u8FC7 disabled
\u5C5E\u6027\u7981\u6B62\u9009\u9879\u5207\u6362\uFF0C\u5728 Radio
\u4E0A\u8BBE\u7F6E disabled
\u53EF\u4EE5\u7981\u7528\u5355\u4E2A\u9009\u9879\u3002
<van-radio-group v-model="checked" disabled>\n <van-radio name="1">\u5355\u9009\u6846 1</van-radio>\n <van-radio name="2">\u5355\u9009\u6846 2</van-radio>\n</van-radio-group>\n
\nshape
\u5C5E\u6027\u53EF\u9009\u503C\u4E3A square
\u548C dot
\uFF0C\u5355\u9009\u6846\u5F62\u72B6\u5206\u522B\u5BF9\u5E94\u65B9\u5F62\u548C\u5706\u70B9\u5F62\u3002
<van-radio-group v-model="checked" shape="square">\n <van-radio name="1">\u5355\u9009\u6846 1</van-radio>\n <van-radio name="2">\u5355\u9009\u6846 2</van-radio>\n</van-radio-group>\n\n<van-radio-group v-model="checked" shape="dot">\n <van-radio name="1">Radio 1</van-radio>\n <van-radio name="2">Radio 2</van-radio>\n</van-radio-group>\n
\n\u901A\u8FC7 checked-color
\u5C5E\u6027\u8BBE\u7F6E\u9009\u4E2D\u72B6\u6001\u7684\u56FE\u6807\u989C\u8272\u3002
<van-radio-group v-model="checked">\n <van-radio name="1" checked-color="#ee0a24">\u5355\u9009\u6846 1</van-radio>\n <van-radio name="2" checked-color="#ee0a24">\u5355\u9009\u6846 2</van-radio>\n</van-radio-group>\n
\n\u901A\u8FC7 icon-size
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u56FE\u6807\u7684\u5927\u5C0F\u3002
<van-radio-group v-model="checked">\n <van-radio name="1" icon-size="24px">\u5355\u9009\u6846 1</van-radio>\n <van-radio name="2" icon-size="24px">\u5355\u9009\u6846 2</van-radio>\n</van-radio-group>\n
\n\u901A\u8FC7 icon
\u63D2\u69FD\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u5E76\u901A\u8FC7 slotProps
\u5224\u65AD\u662F\u5426\u4E3A\u9009\u4E2D\u72B6\u6001\u3002
<van-radio-group v-model="checked">\n <van-radio name="1">\n \u5355\u9009\u6846 1\n <template #icon="props">\n <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />\n </template>\n </van-radio>\n <van-radio name="2">\n \u5355\u9009\u6846 2\n <template #icon="props">\n <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />\n </template>\n </van-radio>\n</van-radio-group>\n\n<style>\n .img-icon {\n height: 20px;\n }\n</style>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref('1');\n return {\n checked,\n activeIcon:\n 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',\n inactiveIcon:\n 'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',\n };\n },\n};\n
\n\u5C06 label-position
\u5C5E\u6027\u8BBE\u7F6E\u4E3A \'left\'
\uFF0C\u53EF\u4EE5\u5C06\u6587\u672C\u4F4D\u7F6E\u8C03\u6574\u5230\u5355\u9009\u6846\u5DE6\u4FA7\u3002
<van-radio-group v-model="checked">\n <van-radio name="1" label-position="left">\u5355\u9009\u6846 1</van-radio>\n <van-radio name="2" label-position="left">\u5355\u9009\u6846 2</van-radio>\n</van-radio-group>\n
\n\u8BBE\u7F6E label-disabled
\u5C5E\u6027\u540E\uFF0C\u70B9\u51FB\u56FE\u6807\u4EE5\u5916\u7684\u5185\u5BB9\u4E0D\u4F1A\u89E6\u53D1\u5355\u9009\u6846\u5207\u6362\u3002
<van-radio-group v-model="checked">\n <van-radio name="1" label-disabled>\u5355\u9009\u6846 1</van-radio>\n <van-radio name="2" label-disabled>\u5355\u9009\u6846 2</van-radio>\n</van-radio-group>\n
\n\u642D\u914D\u5355\u5143\u683C\u7EC4\u4EF6\u4F7F\u7528\u65F6\uFF0C\u9700\u8981\u518D\u5F15\u5165 Cell
\u548C CellGroup
\u7EC4\u4EF6\u3002
<van-radio-group v-model="checked">\n <van-cell-group inset>\n <van-cell title="\u5355\u9009\u6846 1" clickable @click="checked = '1'">\n <template #right-icon>\n <van-radio name="1" />\n </template>\n </van-cell>\n <van-cell title="\u5355\u9009\u6846 2" clickable @click="checked = '2'">\n <template #right-icon>\n <van-radio name="2" />\n </template>\n </van-cell>\n </van-cell-group>\n</van-radio-group>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
name | \n\u6807\u8BC6\u7B26\uFF0C\u901A\u5E38\u4E3A\u4E00\u4E2A\u552F\u4E00\u7684\u5B57\u7B26\u4E32\u6216\u6570\u5B57 | \nany | \n- | \n
shape | \n\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A square dot | \nstring | \nround | \n
disabled | \n\u662F\u5426\u4E3A\u7981\u7528\u72B6\u6001 | \nboolean | \nfalse | \n
label-disabled | \n\u662F\u5426\u7981\u7528\u6587\u672C\u5185\u5BB9\u70B9\u51FB | \nboolean | \nfalse | \n
label-position | \n\u6587\u672C\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A left | \nstring | \nright | \n
icon-size | \n\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n20px | \n
checked-color | \n\u9009\u4E2D\u72B6\u6001\u989C\u8272 | \nstring | \n#1989fa | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u9009\u4E2D\u9879\u7684\u6807\u8BC6\u7B26 | \nany | \n- | \n
disabled | \n\u662F\u5426\u7981\u7528\u6240\u6709\u5355\u9009\u6846 | \nboolean | \nfalse | \n
direction | \n\u6392\u5217\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A horizontal | \nstring | \nvertical | \n
icon-size | \n\u6240\u6709\u5355\u9009\u6846\u7684\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n20px | \n
checked-color | \n\u6240\u6709\u5355\u9009\u6846\u7684\u9009\u4E2D\u72B6\u6001\u989C\u8272 | \nstring | \n#1989fa | \n
shape v4.6.3 | \n\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A square dot | \nstring | \nround | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u5355\u9009\u6846\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6 | \nname: string | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
default | \n\u81EA\u5B9A\u4E49\u6587\u672C | \n{ checked: boolean, disabled: boolean } | \n
icon | \n\u81EA\u5B9A\u4E49\u56FE\u6807 | \n{ checked: boolean, disabled: boolean } | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n RadioProps,\n RadioShape,\n RadioGroupProps,\n RadioLabelPosition,\n RadioGroupDirection,\n} from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-radio-size | \n20px | \n- | \n
--van-radio-dot-size | \n8px | \n\u5706\u70B9\u5230\u8FB9\u754C\u7684\u8DDD\u79BB | \n
--van-radio-border-color | \nvar(--van-gray-5) | \n- | \n
--van-radio-duration | \nvar(--van-duration-fast) | \n- | \n
--van-radio-label-margin | \nvar(--van-padding-xs) | \n- | \n
--van-radio-label-color | \nvar(--van-text-color) | \n- | \n
--van-radio-checked-icon-color | \nvar(--van-primary-color) | \n- | \n
--van-radio-disabled-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-radio-disabled-label-color | \nvar(--van-text-color-3) | \n- | \n
--van-radio-disabled-background | \nvar(--van-border-color) | \n- | \n
\u5728\u4E00\u7EC4\u5907\u9009\u9879\u4E2D\u8FDB\u884C\u5355\u9009\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { RadioGroup, Radio } from 'vant';\n\nconst app = createApp();\napp.use(Radio);\napp.use(RadioGroup);\n
\n\u901A\u8FC7 v-model
\u7ED1\u5B9A\u503C\u5F53\u524D\u9009\u4E2D\u9879\u7684 name\u3002
<van-radio-group v-model="checked">\n <van-radio name="1">\u5355\u9009\u6846 1</van-radio>\n <van-radio name="2">\u5355\u9009\u6846 2</van-radio>\n</van-radio-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref('1');\n return { checked };\n },\n};\n
\n\u5C06 direction
\u5C5E\u6027\u8BBE\u7F6E\u4E3A horizontal
\u540E\uFF0C\u5355\u9009\u6846\u7EC4\u4F1A\u53D8\u6210\u6C34\u5E73\u6392\u5217\u3002
<van-radio-group v-model="checked" direction="horizontal">\n <van-radio name="1">\u5355\u9009\u6846 1</van-radio>\n <van-radio name="2">\u5355\u9009\u6846 2</van-radio>\n</van-radio-group>\n
\n\u901A\u8FC7 disabled
\u5C5E\u6027\u7981\u6B62\u9009\u9879\u5207\u6362\uFF0C\u5728 Radio
\u4E0A\u8BBE\u7F6E disabled
\u53EF\u4EE5\u7981\u7528\u5355\u4E2A\u9009\u9879\u3002
<van-radio-group v-model="checked" disabled>\n <van-radio name="1">\u5355\u9009\u6846 1</van-radio>\n <van-radio name="2">\u5355\u9009\u6846 2</van-radio>\n</van-radio-group>\n
\nshape
\u5C5E\u6027\u53EF\u9009\u503C\u4E3A square
\u548C dot
\uFF0C\u5355\u9009\u6846\u5F62\u72B6\u5206\u522B\u5BF9\u5E94\u65B9\u5F62\u548C\u5706\u70B9\u5F62\u3002
<van-radio-group v-model="checked" shape="square">\n <van-radio name="1">\u5355\u9009\u6846 1</van-radio>\n <van-radio name="2">\u5355\u9009\u6846 2</van-radio>\n</van-radio-group>\n\n<van-radio-group v-model="checked" shape="dot">\n <van-radio name="1">Radio 1</van-radio>\n <van-radio name="2">Radio 2</van-radio>\n</van-radio-group>\n
\n\u901A\u8FC7 checked-color
\u5C5E\u6027\u8BBE\u7F6E\u9009\u4E2D\u72B6\u6001\u7684\u56FE\u6807\u989C\u8272\u3002
<van-radio-group v-model="checked">\n <van-radio name="1" checked-color="#ee0a24">\u5355\u9009\u6846 1</van-radio>\n <van-radio name="2" checked-color="#ee0a24">\u5355\u9009\u6846 2</van-radio>\n</van-radio-group>\n
\n\u901A\u8FC7 icon-size
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u56FE\u6807\u7684\u5927\u5C0F\u3002
<van-radio-group v-model="checked">\n <van-radio name="1" icon-size="24px">\u5355\u9009\u6846 1</van-radio>\n <van-radio name="2" icon-size="24px">\u5355\u9009\u6846 2</van-radio>\n</van-radio-group>\n
\n\u901A\u8FC7 icon
\u63D2\u69FD\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u5E76\u901A\u8FC7 slotProps
\u5224\u65AD\u662F\u5426\u4E3A\u9009\u4E2D\u72B6\u6001\u3002
<van-radio-group v-model="checked">\n <van-radio name="1">\n \u5355\u9009\u6846 1\n <template #icon="props">\n <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />\n </template>\n </van-radio>\n <van-radio name="2">\n \u5355\u9009\u6846 2\n <template #icon="props">\n <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />\n </template>\n </van-radio>\n</van-radio-group>\n\n<style>\n .img-icon {\n height: 20px;\n }\n</style>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref('1');\n return {\n checked,\n activeIcon:\n 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',\n inactiveIcon:\n 'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',\n };\n },\n};\n
\n\u5C06 label-position
\u5C5E\u6027\u8BBE\u7F6E\u4E3A \'left\'
\uFF0C\u53EF\u4EE5\u5C06\u6587\u672C\u4F4D\u7F6E\u8C03\u6574\u5230\u5355\u9009\u6846\u5DE6\u4FA7\u3002
<van-radio-group v-model="checked">\n <van-radio name="1" label-position="left">\u5355\u9009\u6846 1</van-radio>\n <van-radio name="2" label-position="left">\u5355\u9009\u6846 2</van-radio>\n</van-radio-group>\n
\n\u8BBE\u7F6E label-disabled
\u5C5E\u6027\u540E\uFF0C\u70B9\u51FB\u56FE\u6807\u4EE5\u5916\u7684\u5185\u5BB9\u4E0D\u4F1A\u89E6\u53D1\u5355\u9009\u6846\u5207\u6362\u3002
<van-radio-group v-model="checked">\n <van-radio name="1" label-disabled>\u5355\u9009\u6846 1</van-radio>\n <van-radio name="2" label-disabled>\u5355\u9009\u6846 2</van-radio>\n</van-radio-group>\n
\n\u642D\u914D\u5355\u5143\u683C\u7EC4\u4EF6\u4F7F\u7528\u65F6\uFF0C\u9700\u8981\u518D\u5F15\u5165 Cell
\u548C CellGroup
\u7EC4\u4EF6\u3002
<van-radio-group v-model="checked">\n <van-cell-group inset>\n <van-cell title="\u5355\u9009\u6846 1" clickable @click="checked = '1'">\n <template #right-icon>\n <van-radio name="1" />\n </template>\n </van-cell>\n <van-cell title="\u5355\u9009\u6846 2" clickable @click="checked = '2'">\n <template #right-icon>\n <van-radio name="2" />\n </template>\n </van-cell>\n </van-cell-group>\n</van-radio-group>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
name | \n\u6807\u8BC6\u7B26\uFF0C\u901A\u5E38\u4E3A\u4E00\u4E2A\u552F\u4E00\u7684\u5B57\u7B26\u4E32\u6216\u6570\u5B57 | \nany | \n- | \n
shape | \n\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A square dot | \nstring | \nround | \n
disabled | \n\u662F\u5426\u4E3A\u7981\u7528\u72B6\u6001 | \nboolean | \nfalse | \n
label-disabled | \n\u662F\u5426\u7981\u7528\u6587\u672C\u5185\u5BB9\u70B9\u51FB | \nboolean | \nfalse | \n
label-position | \n\u6587\u672C\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A left | \nstring | \nright | \n
icon-size | \n\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n20px | \n
checked-color | \n\u9009\u4E2D\u72B6\u6001\u989C\u8272 | \nstring | \n#1989fa | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u9009\u4E2D\u9879\u7684\u6807\u8BC6\u7B26 | \nany | \n- | \n
disabled | \n\u662F\u5426\u7981\u7528\u6240\u6709\u5355\u9009\u6846 | \nboolean | \nfalse | \n
direction | \n\u6392\u5217\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A horizontal | \nstring | \nvertical | \n
icon-size | \n\u6240\u6709\u5355\u9009\u6846\u7684\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n20px | \n
checked-color | \n\u6240\u6709\u5355\u9009\u6846\u7684\u9009\u4E2D\u72B6\u6001\u989C\u8272 | \nstring | \n#1989fa | \n
shape v4.6.3 | \n\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A square dot | \nstring | \nround | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u5355\u9009\u6846\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6 | \nname: string | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
default | \n\u81EA\u5B9A\u4E49\u6587\u672C | \n{ checked: boolean, disabled: boolean } | \n
icon | \n\u81EA\u5B9A\u4E49\u56FE\u6807 | \n{ checked: boolean, disabled: boolean } | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n RadioProps,\n RadioShape,\n RadioGroupProps,\n RadioLabelPosition,\n RadioGroupDirection,\n} from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-radio-size | \n20px | \n- | \n
--van-radio-dot-size | \n8px | \n\u5706\u70B9\u5230\u8FB9\u754C\u7684\u8DDD\u79BB | \n
--van-radio-border-color | \nvar(--van-gray-5) | \n- | \n
--van-radio-duration | \nvar(--van-duration-fast) | \n- | \n
--van-radio-label-margin | \nvar(--van-padding-xs) | \n- | \n
--van-radio-label-color | \nvar(--van-text-color) | \n- | \n
--van-radio-checked-icon-color | \nvar(--van-primary-color) | \n- | \n
--van-radio-disabled-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-radio-disabled-label-color | \nvar(--van-text-color-3) | \n- | \n
--van-radio-disabled-background | \nvar(--van-border-color) | \n- | \n
\u7528\u6237\u53EF\u4EE5\u5728\u6587\u672C\u6846\u5185\u8F93\u5165\u6216\u7F16\u8F91\u6587\u5B57\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Field, CellGroup } from 'vant';\n\nconst app = createApp();\napp.use(Field);\napp.use(CellGroup);\n
\n\u53EF\u4EE5\u901A\u8FC7 v-model
\u53CC\u5411\u7ED1\u5B9A\u8F93\u5165\u6846\u7684\u503C\uFF0C\u901A\u8FC7 placeholder
\u8BBE\u7F6E\u5360\u4F4D\u63D0\u793A\u6587\u5B57\u3002
<!-- \u53EF\u4EE5\u4F7F\u7528 CellGroup \u4F5C\u4E3A\u5BB9\u5668 -->\n<van-cell-group inset>\n <van-field v-model="value" label="\u6587\u672C" placeholder="\u8BF7\u8F93\u5165\u7528\u6237\u540D" />\n</van-cell-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref('');\n return { value };\n },\n};\n
\n\u6839\u636E type
\u5C5E\u6027\u5B9A\u4E49\u4E0D\u540C\u7C7B\u578B\u7684\u8F93\u5165\u6846\uFF0C\u9ED8\u8BA4\u503C\u4E3A text
\u3002
<van-cell-group inset>\n <!-- \u8F93\u5165\u4EFB\u610F\u6587\u672C -->\n <van-field v-model="text" label="\u6587\u672C" />\n <!-- \u8F93\u5165\u624B\u673A\u53F7\uFF0C\u8C03\u8D77\u624B\u673A\u53F7\u952E\u76D8 -->\n <van-field v-model="tel" type="tel" label="\u624B\u673A\u53F7" />\n <!-- \u5141\u8BB8\u8F93\u5165\u6B63\u6574\u6570\uFF0C\u8C03\u8D77\u7EAF\u6570\u5B57\u952E\u76D8 -->\n <van-field v-model="digit" type="digit" label="\u6574\u6570" />\n <!-- \u5141\u8BB8\u8F93\u5165\u6570\u5B57\uFF0C\u8C03\u8D77\u5E26\u7B26\u53F7\u7684\u7EAF\u6570\u5B57\u952E\u76D8 -->\n <van-field v-model="number" type="number" label="\u6570\u5B57" />\n <!-- \u8F93\u5165\u5BC6\u7801 -->\n <van-field v-model="password" type="password" label="\u5BC6\u7801" />\n</van-cell-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const tel = ref('');\n const text = ref('');\n const digit = ref('');\n const number = ref('');\n const password = ref('');\n\n return { tel, text, digit, number, password };\n },\n};\n
\n\u901A\u8FC7 readonly
\u5C06\u8F93\u5165\u6846\u8BBE\u7F6E\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u901A\u8FC7 disabled
\u5C06\u8F93\u5165\u6846\u8BBE\u7F6E\u4E3A\u7981\u7528\u72B6\u6001\u3002
<van-cell-group inset>\n <van-field label="\u6587\u672C" model-value="\u8F93\u5165\u6846\u53EA\u8BFB" readonly />\n <van-field label="\u6587\u672C" model-value="\u8F93\u5165\u6846\u5DF2\u7981\u7528" disabled />\n</van-cell-group>\n
\n\u901A\u8FC7 left-icon
\u548C right-icon
\u914D\u7F6E\u8F93\u5165\u6846\u4E24\u4FA7\u7684\u56FE\u6807\uFF0C\u901A\u8FC7\u8BBE\u7F6E clearable
\u5728\u8F93\u5165\u8FC7\u7A0B\u4E2D\u5C55\u793A\u6E05\u9664\u56FE\u6807\u3002
<van-cell-group inset>\n <van-field\n v-model="value1"\n label="\u6587\u672C"\n left-icon="smile-o"\n right-icon="warning-o"\n placeholder="\u663E\u793A\u56FE\u6807"\n />\n <van-field\n v-model="value2"\n clearable\n label="\u6587\u672C"\n left-icon="music-o"\n placeholder="\u663E\u793A\u6E05\u9664\u56FE\u6807"\n />\n</van-cell-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value1 = ref('');\n const value2 = ref('123');\n return {\n value1,\n value2,\n };\n },\n};\n
\n\u8BBE\u7F6E required
\u5C5E\u6027\u6765\u5C55\u793A\u5FC5\u586B\u661F\u53F7\u3002
<van-cell-group inset>\n <van-field\n v-model="username"\n required\n label="\u7528\u6237\u540D"\n placeholder="\u8BF7\u8F93\u5165\u7528\u6237\u540D"\n />\n <van-field\n v-model="phone"\n required\n label="\u624B\u673A\u53F7"\n placeholder="\u8BF7\u8F93\u5165\u624B\u673A\u53F7"\n />\n</van-cell-group>\n
\n\u8BF7\u6CE8\u610F required
\u5C5E\u6027\u53EA\u7528\u4E8E\u63A7\u5236\u6837\u5F0F\u5C55\u793A\uFF0C\u5728\u8FDB\u884C\u8868\u5355\u6821\u9A8C\u65F6\uFF0C\u9700\u8981\u4F7F\u7528 rule.required
\u9009\u9879\u6765\u63A7\u5236\u6821\u9A8C\u903B\u8F91\u3002
\u4F60\u53EF\u4EE5\u5728 Form \u7EC4\u4EF6\u4E0A\u8BBE\u7F6E required="auto"
\uFF0C\u6B64\u65F6 Form \u91CC\u7684\u6240\u6709 Field \u4F1A\u81EA\u52A8\u6839\u636E rule.required
\u6765\u5224\u65AD\u662F\u5426\u9700\u8981\u5C55\u793A\u661F\u53F7\u3002
<van-form required="auto">\n <van-field\n v-model="username"\n :rules="[{ required: true }]"\n label="\u7528\u6237\u540D"\n placeholder="\u8BF7\u8F93\u5165\u7528\u6237\u540D"\n />\n <van-field\n v-model="phone"\n :rules="[{ required: false }]"\n label="\u624B\u673A\u53F7"\n placeholder="\u8BF7\u8F93\u5165\u624B\u673A\u53F7"\n />\n</van-form>\n
\n\u8BBE\u7F6E required
\u5C5E\u6027\u8868\u793A\u8FD9\u662F\u4E00\u4E2A\u5FC5\u586B\u9879\uFF0C\u53EF\u4EE5\u914D\u5408 error
\u6216 error-message
\u5C5E\u6027\u663E\u793A\u5BF9\u5E94\u7684\u9519\u8BEF\u63D0\u793A\u3002
<van-cell-group inset>\n <van-field\n v-model="username"\n error\n label="\u7528\u6237\u540D"\n placeholder="\u8BF7\u8F93\u5165\u7528\u6237\u540D"\n />\n <van-field\n v-model="phone"\n label="\u624B\u673A\u53F7"\n placeholder="\u8BF7\u8F93\u5165\u624B\u673A\u53F7"\n error-message="\u624B\u673A\u53F7\u683C\u5F0F\u9519\u8BEF"\n />\n</van-cell-group>\n
\n\u901A\u8FC7 button \u63D2\u69FD\u53EF\u4EE5\u5728\u8F93\u5165\u6846\u5C3E\u90E8\u63D2\u5165\u6309\u94AE\u3002
\n<van-cell-group inset>\n <van-field\n v-model="sms"\n center\n clearable\n label="\u77ED\u4FE1\u9A8C\u8BC1\u7801"\n placeholder="\u8BF7\u8F93\u5165\u77ED\u4FE1\u9A8C\u8BC1\u7801"\n >\n <template #button>\n <van-button size="small" type="primary">\u53D1\u9001\u9A8C\u8BC1\u7801</van-button>\n </template>\n </van-field>\n</van-cell-group>\n
\n\u901A\u8FC7 formatter
\u5C5E\u6027\u53EF\u4EE5\u5BF9\u8F93\u5165\u7684\u5185\u5BB9\u8FDB\u884C\u683C\u5F0F\u5316\uFF0C\u901A\u8FC7 format-trigger
\u5C5E\u6027\u53EF\u4EE5\u6307\u5B9A\u6267\u884C\u683C\u5F0F\u5316\u7684\u65F6\u673A\uFF0C\u9ED8\u8BA4\u5728\u8F93\u5165\u65F6\u8FDB\u884C\u683C\u5F0F\u5316\u3002
<van-cell-group inset>\n <van-field\n v-model="value1"\n label="\u6587\u672C"\n :formatter="formatter"\n placeholder="\u5728\u8F93\u5165\u65F6\u6267\u884C\u683C\u5F0F\u5316"\n />\n <van-field\n v-model="value2"\n label="\u6587\u672C"\n :formatter="formatter"\n format-trigger="onBlur"\n placeholder="\u5728\u5931\u7126\u65F6\u6267\u884C\u683C\u5F0F\u5316"\n />\n</van-cell-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value1 = ref('');\n const value2 = ref('');\n // \u8FC7\u6EE4\u8F93\u5165\u7684\u6570\u5B57\n const formatter = (value) => value.replace(/\\d/g, '');\n\n return {\n value1,\n value2,\n formatter,\n };\n },\n};\n
\n\u5BF9\u4E8E textarea\uFF0C\u53EF\u4EE5\u901A\u8FC7 autosize
\u5C5E\u6027\u8BBE\u7F6E\u9AD8\u5EA6\u81EA\u9002\u5E94\u3002
<van-cell-group inset>\n <van-field\n v-model="message"\n rows="1"\n autosize\n label="\u7559\u8A00"\n type="textarea"\n placeholder="\u8BF7\u8F93\u5165\u7559\u8A00"\n />\n</van-cell-group>\n
\n\u8BBE\u7F6E maxlength
\u548C show-word-limit
\u5C5E\u6027\u540E\u4F1A\u5728\u5E95\u90E8\u663E\u793A\u5B57\u6570\u7EDF\u8BA1\u3002
<van-cell-group inset>\n <van-field\n v-model="message"\n rows="2"\n autosize\n label="\u7559\u8A00"\n type="textarea"\n maxlength="50"\n placeholder="\u8BF7\u8F93\u5165\u7559\u8A00"\n show-word-limit\n />\n</van-cell-group>\n
\n\u901A\u8FC7 input-align
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u8F93\u5165\u6846\u5185\u5BB9\u7684\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center
\u3001right
\u3002
<van-cell-group inset>\n <van-field\n v-model="value"\n label="\u6587\u672C"\n placeholder="\u8F93\u5165\u6846\u5185\u5BB9\u53F3\u5BF9\u9F50"\n input-align="right"\n />\n</van-cell-group>\n
\n\u901A\u8FC7 label-align
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u8F93\u5165\u6846\u6587\u672C\u7684\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A center
\u3001right
\u3001top
\u3002
<van-cell-group inset>\n <van-field\n v-model="value"\n label="\u6587\u672C"\n placeholder="\u9876\u90E8\u5BF9\u9F50"\n label-align="top"\n />\n <van-field\n v-model="value2"\n label="\u6587\u672C"\n placeholder="\u5DE6\u5BF9\u9F50"\n label-align="left"\n />\n <van-field\n v-model="value3"\n label="\u6587\u672C"\n placeholder="\u5C45\u4E2D\u5BF9\u9F50"\n label-align="center"\n />\n <van-field\n v-model="value4"\n label="\u6587\u672C"\n placeholder="\u53F3\u5BF9\u9F50"\n label-align="right"\n />\n</van-cell-group>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u8F93\u5165\u7684\u503C | \nnumber | string | \n- | \n
label | \n\u8F93\u5165\u6846\u5DE6\u4FA7\u6587\u672C | \nstring | \n- | \n
name | \n\u540D\u79F0\uFF0C\u4F5C\u4E3A\u63D0\u4EA4\u8868\u5355\u65F6\u7684\u6807\u8BC6\u7B26 | \nstring | \n- | \n
id | \n\u8F93\u5165\u6846 id\uFF0C\u540C\u65F6\u4F1A\u8BBE\u7F6E label \u7684 for \u5C5E\u6027 | \nstring | \nvan-field-n-input | \n
type | \n\u8F93\u5165\u6846\u7C7B\u578B, \u652F\u6301\u539F\u751F input \u6807\u7B7E\u7684\u6240\u6709 type \u5C5E\u6027\uFF0C\u989D\u5916\u652F\u6301\u4E86 digit \u7C7B\u578B | \nFieldType | \ntext | \n
size | \n\u5927\u5C0F\uFF0C\u53EF\u9009\u503C\u4E3A large normal | \nstring | \n- | \n
maxlength | \n\u8F93\u5165\u7684\u6700\u5927\u5B57\u7B26\u6570 | \nnumber | string | \n- | \n
placeholder | \n\u8F93\u5165\u6846\u5360\u4F4D\u63D0\u793A\u6587\u5B57 | \nstring | \n- | \n
border | \n\u662F\u5426\u663E\u793A\u5185\u8FB9\u6846 | \nboolean | \ntrue | \n
disabled | \n\u662F\u5426\u7981\u7528\u8F93\u5165\u6846 | \nboolean | \nfalse | \n
readonly | \n\u662F\u5426\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u53EA\u8BFB\u72B6\u6001\u4E0B\u65E0\u6CD5\u8F93\u5165\u5185\u5BB9 | \nboolean | \nfalse | \n
colon | \n\u662F\u5426\u5728 label \u540E\u9762\u6DFB\u52A0\u5192\u53F7 | \nboolean | \nfalse | \n
required | \n\u662F\u5426\u663E\u793A\u8868\u5355\u5FC5\u586B\u661F\u53F7 | \nboolean | \'auto\' | \nnull | \n
center | \n\u662F\u5426\u4F7F\u5185\u5BB9\u5782\u76F4\u5C45\u4E2D | \nboolean | \nfalse | \n
clearable | \n\u662F\u5426\u542F\u7528\u6E05\u9664\u56FE\u6807\uFF0C\u70B9\u51FB\u6E05\u9664\u56FE\u6807\u540E\u4F1A\u6E05\u7A7A\u8F93\u5165\u6846 | \nboolean | \nfalse | \n
clear-icon | \n\u6E05\u9664\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \nclear | \n
clear-trigger | \n\u663E\u793A\u6E05\u9664\u56FE\u6807\u7684\u65F6\u673A\uFF0Calways \u8868\u793A\u8F93\u5165\u6846\u4E0D\u4E3A\u7A7A\u65F6\u5C55\u793A\uFF0Cfocus \u8868\u793A\u8F93\u5165\u6846\u805A\u7126\u4E14\u4E0D\u4E3A\u7A7A\u65F6\u5C55\u793A | \nFieldClearTrigger | \nfocus | \n
clickable | \n\u662F\u5426\u5F00\u542F\u70B9\u51FB\u53CD\u9988 | \nboolean | \nfalse | \n
is-link | \n\u662F\u5426\u5C55\u793A\u53F3\u4FA7\u7BAD\u5934\u5E76\u5F00\u542F\u70B9\u51FB\u53CD\u9988 | \nboolean | \nfalse | \n
autofocus | \n\u662F\u5426\u81EA\u52A8\u805A\u7126\uFF0CiOS \u7CFB\u7EDF\u4E0D\u652F\u6301\u8BE5\u5C5E\u6027 | \nboolean | \nfalse | \n
show-word-limit | \n\u662F\u5426\u663E\u793A\u5B57\u6570\u7EDF\u8BA1\uFF0C\u9700\u8981\u8BBE\u7F6E maxlength \u5C5E\u6027 | \nboolean | \nfalse | \n
error | \n\u662F\u5426\u5C06\u8F93\u5165\u5185\u5BB9\u6807\u7EA2 | \nboolean | \nfalse | \n
error-message | \n\u5E95\u90E8\u9519\u8BEF\u63D0\u793A\u6587\u6848\uFF0C\u4E3A\u7A7A\u65F6\u4E0D\u5C55\u793A | \nstring | \n- | \n
error-message-align | \n\u9519\u8BEF\u63D0\u793A\u6587\u6848\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center right | \nFieldTextAlign | \nleft | \n
formatter | \n\u8F93\u5165\u5185\u5BB9\u683C\u5F0F\u5316\u51FD\u6570 | \n(val: string) => string | \n- | \n
format-trigger | \n\u683C\u5F0F\u5316\u51FD\u6570\u89E6\u53D1\u7684\u65F6\u673A\uFF0C\u53EF\u9009\u503C\u4E3A onBlur | \nFieldFormatTrigger | \nonChange | \n
arrow-direction | \n\u7BAD\u5934\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A left up down | \nstring | \nright | \n
label-class | \n\u5DE6\u4FA7\u6587\u672C\u989D\u5916\u7C7B\u540D | \nstring | Array | object | \n- | \n
label-width | \n\u5DE6\u4FA7\u6587\u672C\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n6.2em | \n
label-align | \n\u5DE6\u4FA7\u6587\u672C\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center right top | \nFieldTextAlign | \nleft | \n
input-align | \n\u8F93\u5165\u6846\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center right | \nFieldTextAlign | \nleft | \n
autosize | \n\u662F\u5426\u81EA\u9002\u5E94\u5185\u5BB9\u9AD8\u5EA6\uFF0C\u53EA\u5BF9 textarea \u6709\u6548\uFF0C \u53EF\u4F20\u5165\u5BF9\u8C61,\u5982 { maxHeight: 100, minHeight: 50 }\uFF0C \u5355\u4F4D\u4E3A px | \nboolean | FieldAutosizeConfig | \nfalse | \n
left-icon | \n\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n- | \n
right-icon | \n\u53F3\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n- | \n
icon-prefix | \n\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 | \nstring | \nvan-icon | \n
rules | \n\u8868\u5355\u6821\u9A8C\u89C4\u5219\uFF0C\u8BE6\u89C1 Form \u7EC4\u4EF6 | \nFieldRule[] | \n- | \n
autocomplete | \nHTML \u539F\u751F\u5C5E\u6027\uFF0C\u7528\u4E8E\u63A7\u5236\u81EA\u52A8\u5B8C\u6210\u529F\u80FD\uFF0C\u8BE6\u89C1 MDN - autocomplete | \nstring | \n- | \n
autocapitalize v4.6.2 | \nHTML \u539F\u751F\u5C5E\u6027\uFF0C\u7528\u4E8E\u63A7\u5236\u6587\u672C\u8F93\u5165\u65F6\u662F\u5426\u81EA\u52A8\u5927\u5199\uFF0C\u6B64 API \u4EC5\u5728\u90E8\u5206\u6D4F\u89C8\u5668\u652F\u6301\uFF0C\u8BE6\u89C1 MDN - autocapitalize | \nstring | \n- | \n
enterkeyhint | \nHTML \u539F\u751F\u5C5E\u6027\uFF0C\u7528\u4E8E\u63A7\u5236\u56DE\u8F66\u952E\u6837\u5F0F\uFF0C\u6B64 API \u4EC5\u5728\u90E8\u5206\u6D4F\u89C8\u5668\u652F\u6301\uFF0C\u8BE6\u89C1 MDN - enterkeyhint | \nstring | \n- | \n
spellcheck v4.6.2 | \nHTML \u539F\u751F\u5C5E\u6027\uFF0C\u7528\u4E8E\u68C0\u67E5\u5143\u7D20\u7684\u62FC\u5199\u9519\u8BEF\uFF0C\u6B64 API \u4EC5\u5728\u90E8\u5206\u6D4F\u89C8\u5668\u652F\u6301\uFF0C\u8BE6\u89C1 MDN - spellcheck | \nboolean | \n- | \n
autocorrect v4.6.2 | \n\u4EC5 Safari \u9002\u7528\uFF0C\u7528\u4E8E\u81EA\u52A8\u66F4\u6B63\u8F93\u5165\u7684\u6587\u672C\uFF0C\u8BE6\u89C1 MDN - autocorrect | \nstring | \n- | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
update:model-value | \n\u8F93\u5165\u6846\u5185\u5BB9\u53D8\u5316\u65F6\u89E6\u53D1 | \nvalue: string (\u5F53\u524D\u8F93\u5165\u7684\u503C) | \n
focus | \n\u8F93\u5165\u6846\u83B7\u5F97\u7126\u70B9\u65F6\u89E6\u53D1 | \nevent: Event | \n
blur | \n\u8F93\u5165\u6846\u5931\u53BB\u7126\u70B9\u65F6\u89E6\u53D1 | \nevent: Event | \n
clear | \n\u70B9\u51FB\u6E05\u9664\u6309\u94AE\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
click | \n\u70B9\u51FB\u7EC4\u4EF6\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
click-input | \n\u70B9\u51FB\u8F93\u5165\u533A\u57DF\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
click-left-icon | \n\u70B9\u51FB\u5DE6\u4FA7\u56FE\u6807\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
click-right-icon | \n\u70B9\u51FB\u53F3\u4FA7\u56FE\u6807\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
start-validate | \n\u5F00\u59CB\u8868\u5355\u6821\u9A8C\u65F6\u89E6\u53D1 | \n- | \n
end-validate | \n\u7ED3\u675F\u8868\u5355\u6821\u9A8C\u65F6\u89E6\u53D1 | \n{ status: string, message: string } | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Field \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
focus | \n\u83B7\u53D6\u8F93\u5165\u6846\u7126\u70B9 | \n- | \n- | \n
blur | \n\u53D6\u6D88\u8F93\u5165\u6846\u7126\u70B9 | \n- | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n FieldType,\n FieldRule,\n FieldProps,\n FieldInstance,\n FieldTextAlign,\n FieldRuleMessage,\n FieldClearTrigger,\n FieldFormatTrigger,\n FieldRuleValidator,\n FieldRuleFormatter,\n FieldValidateError,\n FieldAutosizeConfig,\n FieldValidateTrigger,\n FieldValidationStatus,\n} from 'vant';\n
\nFieldInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { FieldInstance } from 'vant';\n\nconst fieldRef = ref<FieldInstance>();\n\nfieldRef.value?.focus();\n
\n\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
label | \n\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u5DE6\u4FA7\u6587\u672C | \n- | \n
input | \n\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\uFF0C\u4F7F\u7528\u6B64\u63D2\u69FD\u540E\uFF0C\u4E0E\u8F93\u5165\u6846\u76F8\u5173\u7684\u5C5E\u6027\u548C\u4E8B\u4EF6\u5C06\u5931\u6548 | \n- | \n
left-icon | \n\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u5934\u90E8\u56FE\u6807 | \n- | \n
right-icon | \n\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u5C3E\u90E8\u56FE\u6807 | \n- | \n
button | \n\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u5C3E\u90E8\u6309\u94AE | \n- | \n
error-message | \n\u81EA\u5B9A\u4E49\u5E95\u90E8\u9519\u8BEF\u63D0\u793A\u6587\u6848 | \n{ message: string } | \n
extra | \n\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u6700\u53F3\u4FA7\u7684\u989D\u5916\u5185\u5BB9 | \n- | \n
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-field-label-width | \n6.2em | \n- | \n
--van-field-label-color | \nvar(--van-text-color) | \n- | \n
--van-field-label-margin-right | \nvar(--van-padding-sm) | \n- | \n
--van-field-input-text-color | \nvar(--van-text-color) | \n- | \n
--van-field-input-error-text-color | \nvar(--van-danger-color) | \n- | \n
--van-field-input-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-field-placeholder-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-field-icon-size | \n18px | \n- | \n
--van-field-clear-icon-size | \n18px | \n- | \n
--van-field-clear-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-field-right-icon-color | \nvar(--van-gray-6) | \n- | \n
--van-field-error-message-color | \nvar(--van-danger-color) | \n- | \n
--van-field-error-message-font-size | \n12px | \n- | \n
--van-field-text-area-min-height | \n60px | \n- | \n
--van-field-word-limit-color | \nvar(--van-gray-7) | \n- | \n
--van-field-word-limit-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-field-word-limit-line-height | \n16px | \n- | \n
--van-field-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-field-required-mark-color | \nvar(--van-red) | \n- | \n
HTML \u539F\u751F\u7684 type="number"
\u5C5E\u6027\u5728 iOS \u548C Android \u7CFB\u7EDF\u4E0A\u90FD\u5B58\u5728\u4E00\u5B9A\u95EE\u9898\uFF0C\u6BD4\u5982 maxlength \u5C5E\u6027\u4E0D\u751F\u6548\u3001\u65E0\u6CD5\u83B7\u53D6\u5230\u5B8C\u6574\u7684\u8F93\u5165\u5185\u5BB9\u7B49\u3002\u56E0\u6B64\u8BBE\u7F6E type \u4E3A number
\u65F6\uFF0CField \u4E0D\u4F1A\u4F7F\u7528\u539F\u751F\u7684 type="number"
\u5C5E\u6027\uFF0C\u800C\u662F\u7528\u73B0\u4EE3\u6D4F\u89C8\u5668\u652F\u6301\u7684 inputmode \u5C5E\u6027\u6765\u63A7\u5236\u8F93\u5165\u952E\u76D8\u7684\u7C7B\u578B\u3002
Field \u7EC4\u4EF6\u5185\u90E8\u4F1A\u5C06\u4F20\u5165\u7684 v-model \u683C\u5F0F\u5316\u4E3A string \u7C7B\u578B\uFF0C\u4FBF\u4E8E\u7EC4\u4EF6\u5185\u90E8\u8FDB\u884C\u5904\u7406\u3002
\n\u5982\u679C\u4F60\u5E0C\u671B\u5728 v-model \u4E0A\u7ED1\u5B9A number \u7C7B\u578B\uFF0C\u53EF\u4EE5\u4F7F\u7528 Vue \u63D0\u4F9B\u7684 .number \u4FEE\u9970\u7B26\u3002
\n<van-field v-model.number="value" type="tel" />\n
\n\u6E05\u9664\u6309\u94AE\u76D1\u542C\u662F\u7684\u79FB\u52A8\u7AEF Touch \u4E8B\u4EF6\uFF0C\u53C2\u89C1\u684C\u9762\u7AEF\u9002\u914D\u3002
\n\u7528\u6237\u53EF\u4EE5\u5728\u6587\u672C\u6846\u5185\u8F93\u5165\u6216\u7F16\u8F91\u6587\u5B57\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Field, CellGroup } from 'vant';\n\nconst app = createApp();\napp.use(Field);\napp.use(CellGroup);\n
\n\u53EF\u4EE5\u901A\u8FC7 v-model
\u53CC\u5411\u7ED1\u5B9A\u8F93\u5165\u6846\u7684\u503C\uFF0C\u901A\u8FC7 placeholder
\u8BBE\u7F6E\u5360\u4F4D\u63D0\u793A\u6587\u5B57\u3002
<!-- \u53EF\u4EE5\u4F7F\u7528 CellGroup \u4F5C\u4E3A\u5BB9\u5668 -->\n<van-cell-group inset>\n <van-field v-model="value" label="\u6587\u672C" placeholder="\u8BF7\u8F93\u5165\u7528\u6237\u540D" />\n</van-cell-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref('');\n return { value };\n },\n};\n
\n\u6839\u636E type
\u5C5E\u6027\u5B9A\u4E49\u4E0D\u540C\u7C7B\u578B\u7684\u8F93\u5165\u6846\uFF0C\u9ED8\u8BA4\u503C\u4E3A text
\u3002
<van-cell-group inset>\n <!-- \u8F93\u5165\u4EFB\u610F\u6587\u672C -->\n <van-field v-model="text" label="\u6587\u672C" />\n <!-- \u8F93\u5165\u624B\u673A\u53F7\uFF0C\u8C03\u8D77\u624B\u673A\u53F7\u952E\u76D8 -->\n <van-field v-model="tel" type="tel" label="\u624B\u673A\u53F7" />\n <!-- \u5141\u8BB8\u8F93\u5165\u6B63\u6574\u6570\uFF0C\u8C03\u8D77\u7EAF\u6570\u5B57\u952E\u76D8 -->\n <van-field v-model="digit" type="digit" label="\u6574\u6570" />\n <!-- \u5141\u8BB8\u8F93\u5165\u6570\u5B57\uFF0C\u8C03\u8D77\u5E26\u7B26\u53F7\u7684\u7EAF\u6570\u5B57\u952E\u76D8 -->\n <van-field v-model="number" type="number" label="\u6570\u5B57" />\n <!-- \u8F93\u5165\u5BC6\u7801 -->\n <van-field v-model="password" type="password" label="\u5BC6\u7801" />\n</van-cell-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const tel = ref('');\n const text = ref('');\n const digit = ref('');\n const number = ref('');\n const password = ref('');\n\n return { tel, text, digit, number, password };\n },\n};\n
\n\u901A\u8FC7 readonly
\u5C06\u8F93\u5165\u6846\u8BBE\u7F6E\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u901A\u8FC7 disabled
\u5C06\u8F93\u5165\u6846\u8BBE\u7F6E\u4E3A\u7981\u7528\u72B6\u6001\u3002
<van-cell-group inset>\n <van-field label="\u6587\u672C" model-value="\u8F93\u5165\u6846\u53EA\u8BFB" readonly />\n <van-field label="\u6587\u672C" model-value="\u8F93\u5165\u6846\u5DF2\u7981\u7528" disabled />\n</van-cell-group>\n
\n\u901A\u8FC7 left-icon
\u548C right-icon
\u914D\u7F6E\u8F93\u5165\u6846\u4E24\u4FA7\u7684\u56FE\u6807\uFF0C\u901A\u8FC7\u8BBE\u7F6E clearable
\u5728\u8F93\u5165\u8FC7\u7A0B\u4E2D\u5C55\u793A\u6E05\u9664\u56FE\u6807\u3002
<van-cell-group inset>\n <van-field\n v-model="value1"\n label="\u6587\u672C"\n left-icon="smile-o"\n right-icon="warning-o"\n placeholder="\u663E\u793A\u56FE\u6807"\n />\n <van-field\n v-model="value2"\n clearable\n label="\u6587\u672C"\n left-icon="music-o"\n placeholder="\u663E\u793A\u6E05\u9664\u56FE\u6807"\n />\n</van-cell-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value1 = ref('');\n const value2 = ref('123');\n return {\n value1,\n value2,\n };\n },\n};\n
\n\u8BBE\u7F6E required
\u5C5E\u6027\u6765\u5C55\u793A\u5FC5\u586B\u661F\u53F7\u3002
<van-cell-group inset>\n <van-field\n v-model="username"\n required\n label="\u7528\u6237\u540D"\n placeholder="\u8BF7\u8F93\u5165\u7528\u6237\u540D"\n />\n <van-field\n v-model="phone"\n required\n label="\u624B\u673A\u53F7"\n placeholder="\u8BF7\u8F93\u5165\u624B\u673A\u53F7"\n />\n</van-cell-group>\n
\n\u8BF7\u6CE8\u610F required
\u5C5E\u6027\u53EA\u7528\u4E8E\u63A7\u5236\u6837\u5F0F\u5C55\u793A\uFF0C\u5728\u8FDB\u884C\u8868\u5355\u6821\u9A8C\u65F6\uFF0C\u9700\u8981\u4F7F\u7528 rule.required
\u9009\u9879\u6765\u63A7\u5236\u6821\u9A8C\u903B\u8F91\u3002
\u4F60\u53EF\u4EE5\u5728 Form \u7EC4\u4EF6\u4E0A\u8BBE\u7F6E required="auto"
\uFF0C\u6B64\u65F6 Form \u91CC\u7684\u6240\u6709 Field \u4F1A\u81EA\u52A8\u6839\u636E rule.required
\u6765\u5224\u65AD\u662F\u5426\u9700\u8981\u5C55\u793A\u661F\u53F7\u3002
<van-form required="auto">\n <van-field\n v-model="username"\n :rules="[{ required: true }]"\n label="\u7528\u6237\u540D"\n placeholder="\u8BF7\u8F93\u5165\u7528\u6237\u540D"\n />\n <van-field\n v-model="phone"\n :rules="[{ required: false }]"\n label="\u624B\u673A\u53F7"\n placeholder="\u8BF7\u8F93\u5165\u624B\u673A\u53F7"\n />\n</van-form>\n
\n\u8BBE\u7F6E required
\u5C5E\u6027\u8868\u793A\u8FD9\u662F\u4E00\u4E2A\u5FC5\u586B\u9879\uFF0C\u53EF\u4EE5\u914D\u5408 error
\u6216 error-message
\u5C5E\u6027\u663E\u793A\u5BF9\u5E94\u7684\u9519\u8BEF\u63D0\u793A\u3002
<van-cell-group inset>\n <van-field\n v-model="username"\n error\n label="\u7528\u6237\u540D"\n placeholder="\u8BF7\u8F93\u5165\u7528\u6237\u540D"\n />\n <van-field\n v-model="phone"\n label="\u624B\u673A\u53F7"\n placeholder="\u8BF7\u8F93\u5165\u624B\u673A\u53F7"\n error-message="\u624B\u673A\u53F7\u683C\u5F0F\u9519\u8BEF"\n />\n</van-cell-group>\n
\n\u901A\u8FC7 button \u63D2\u69FD\u53EF\u4EE5\u5728\u8F93\u5165\u6846\u5C3E\u90E8\u63D2\u5165\u6309\u94AE\u3002
\n<van-cell-group inset>\n <van-field\n v-model="sms"\n center\n clearable\n label="\u77ED\u4FE1\u9A8C\u8BC1\u7801"\n placeholder="\u8BF7\u8F93\u5165\u77ED\u4FE1\u9A8C\u8BC1\u7801"\n >\n <template #button>\n <van-button size="small" type="primary">\u53D1\u9001\u9A8C\u8BC1\u7801</van-button>\n </template>\n </van-field>\n</van-cell-group>\n
\n\u901A\u8FC7 formatter
\u5C5E\u6027\u53EF\u4EE5\u5BF9\u8F93\u5165\u7684\u5185\u5BB9\u8FDB\u884C\u683C\u5F0F\u5316\uFF0C\u901A\u8FC7 format-trigger
\u5C5E\u6027\u53EF\u4EE5\u6307\u5B9A\u6267\u884C\u683C\u5F0F\u5316\u7684\u65F6\u673A\uFF0C\u9ED8\u8BA4\u5728\u8F93\u5165\u65F6\u8FDB\u884C\u683C\u5F0F\u5316\u3002
<van-cell-group inset>\n <van-field\n v-model="value1"\n label="\u6587\u672C"\n :formatter="formatter"\n placeholder="\u5728\u8F93\u5165\u65F6\u6267\u884C\u683C\u5F0F\u5316"\n />\n <van-field\n v-model="value2"\n label="\u6587\u672C"\n :formatter="formatter"\n format-trigger="onBlur"\n placeholder="\u5728\u5931\u7126\u65F6\u6267\u884C\u683C\u5F0F\u5316"\n />\n</van-cell-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value1 = ref('');\n const value2 = ref('');\n // \u8FC7\u6EE4\u8F93\u5165\u7684\u6570\u5B57\n const formatter = (value) => value.replace(/\\d/g, '');\n\n return {\n value1,\n value2,\n formatter,\n };\n },\n};\n
\n\u5BF9\u4E8E textarea\uFF0C\u53EF\u4EE5\u901A\u8FC7 autosize
\u5C5E\u6027\u8BBE\u7F6E\u9AD8\u5EA6\u81EA\u9002\u5E94\u3002
<van-cell-group inset>\n <van-field\n v-model="message"\n rows="1"\n autosize\n label="\u7559\u8A00"\n type="textarea"\n placeholder="\u8BF7\u8F93\u5165\u7559\u8A00"\n />\n</van-cell-group>\n
\n\u8BBE\u7F6E maxlength
\u548C show-word-limit
\u5C5E\u6027\u540E\u4F1A\u5728\u5E95\u90E8\u663E\u793A\u5B57\u6570\u7EDF\u8BA1\u3002
<van-cell-group inset>\n <van-field\n v-model="message"\n rows="2"\n autosize\n label="\u7559\u8A00"\n type="textarea"\n maxlength="50"\n placeholder="\u8BF7\u8F93\u5165\u7559\u8A00"\n show-word-limit\n />\n</van-cell-group>\n
\n\u901A\u8FC7 input-align
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u8F93\u5165\u6846\u5185\u5BB9\u7684\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center
\u3001right
\u3002
<van-cell-group inset>\n <van-field\n v-model="value"\n label="\u6587\u672C"\n placeholder="\u8F93\u5165\u6846\u5185\u5BB9\u53F3\u5BF9\u9F50"\n input-align="right"\n />\n</van-cell-group>\n
\n\u901A\u8FC7 label-align
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u8F93\u5165\u6846\u6587\u672C\u7684\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A center
\u3001right
\u3001top
\u3002
<van-cell-group inset>\n <van-field\n v-model="value"\n label="\u6587\u672C"\n placeholder="\u9876\u90E8\u5BF9\u9F50"\n label-align="top"\n />\n <van-field\n v-model="value2"\n label="\u6587\u672C"\n placeholder="\u5DE6\u5BF9\u9F50"\n label-align="left"\n />\n <van-field\n v-model="value3"\n label="\u6587\u672C"\n placeholder="\u5C45\u4E2D\u5BF9\u9F50"\n label-align="center"\n />\n <van-field\n v-model="value4"\n label="\u6587\u672C"\n placeholder="\u53F3\u5BF9\u9F50"\n label-align="right"\n />\n</van-cell-group>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u8F93\u5165\u7684\u503C | \nnumber | string | \n- | \n
label | \n\u8F93\u5165\u6846\u5DE6\u4FA7\u6587\u672C | \nstring | \n- | \n
name | \n\u540D\u79F0\uFF0C\u4F5C\u4E3A\u63D0\u4EA4\u8868\u5355\u65F6\u7684\u6807\u8BC6\u7B26 | \nstring | \n- | \n
id | \n\u8F93\u5165\u6846 id\uFF0C\u540C\u65F6\u4F1A\u8BBE\u7F6E label \u7684 for \u5C5E\u6027 | \nstring | \nvan-field-n-input | \n
type | \n\u8F93\u5165\u6846\u7C7B\u578B, \u652F\u6301\u539F\u751F input \u6807\u7B7E\u7684\u6240\u6709 type \u5C5E\u6027\uFF0C\u989D\u5916\u652F\u6301\u4E86 digit \u7C7B\u578B | \nFieldType | \ntext | \n
size | \n\u5927\u5C0F\uFF0C\u53EF\u9009\u503C\u4E3A large normal | \nstring | \n- | \n
maxlength | \n\u8F93\u5165\u7684\u6700\u5927\u5B57\u7B26\u6570 | \nnumber | string | \n- | \n
placeholder | \n\u8F93\u5165\u6846\u5360\u4F4D\u63D0\u793A\u6587\u5B57 | \nstring | \n- | \n
border | \n\u662F\u5426\u663E\u793A\u5185\u8FB9\u6846 | \nboolean | \ntrue | \n
disabled | \n\u662F\u5426\u7981\u7528\u8F93\u5165\u6846 | \nboolean | \nfalse | \n
readonly | \n\u662F\u5426\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u53EA\u8BFB\u72B6\u6001\u4E0B\u65E0\u6CD5\u8F93\u5165\u5185\u5BB9 | \nboolean | \nfalse | \n
colon | \n\u662F\u5426\u5728 label \u540E\u9762\u6DFB\u52A0\u5192\u53F7 | \nboolean | \nfalse | \n
required | \n\u662F\u5426\u663E\u793A\u8868\u5355\u5FC5\u586B\u661F\u53F7 | \nboolean | \'auto\' | \nnull | \n
center | \n\u662F\u5426\u4F7F\u5185\u5BB9\u5782\u76F4\u5C45\u4E2D | \nboolean | \nfalse | \n
clearable | \n\u662F\u5426\u542F\u7528\u6E05\u9664\u56FE\u6807\uFF0C\u70B9\u51FB\u6E05\u9664\u56FE\u6807\u540E\u4F1A\u6E05\u7A7A\u8F93\u5165\u6846 | \nboolean | \nfalse | \n
clear-icon | \n\u6E05\u9664\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \nclear | \n
clear-trigger | \n\u663E\u793A\u6E05\u9664\u56FE\u6807\u7684\u65F6\u673A\uFF0Calways \u8868\u793A\u8F93\u5165\u6846\u4E0D\u4E3A\u7A7A\u65F6\u5C55\u793A\uFF0Cfocus \u8868\u793A\u8F93\u5165\u6846\u805A\u7126\u4E14\u4E0D\u4E3A\u7A7A\u65F6\u5C55\u793A | \nFieldClearTrigger | \nfocus | \n
clickable | \n\u662F\u5426\u5F00\u542F\u70B9\u51FB\u53CD\u9988 | \nboolean | \nfalse | \n
is-link | \n\u662F\u5426\u5C55\u793A\u53F3\u4FA7\u7BAD\u5934\u5E76\u5F00\u542F\u70B9\u51FB\u53CD\u9988 | \nboolean | \nfalse | \n
autofocus | \n\u662F\u5426\u81EA\u52A8\u805A\u7126\uFF0CiOS \u7CFB\u7EDF\u4E0D\u652F\u6301\u8BE5\u5C5E\u6027 | \nboolean | \nfalse | \n
show-word-limit | \n\u662F\u5426\u663E\u793A\u5B57\u6570\u7EDF\u8BA1\uFF0C\u9700\u8981\u8BBE\u7F6E maxlength \u5C5E\u6027 | \nboolean | \nfalse | \n
error | \n\u662F\u5426\u5C06\u8F93\u5165\u5185\u5BB9\u6807\u7EA2 | \nboolean | \nfalse | \n
error-message | \n\u5E95\u90E8\u9519\u8BEF\u63D0\u793A\u6587\u6848\uFF0C\u4E3A\u7A7A\u65F6\u4E0D\u5C55\u793A | \nstring | \n- | \n
error-message-align | \n\u9519\u8BEF\u63D0\u793A\u6587\u6848\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center right | \nFieldTextAlign | \nleft | \n
formatter | \n\u8F93\u5165\u5185\u5BB9\u683C\u5F0F\u5316\u51FD\u6570 | \n(val: string) => string | \n- | \n
format-trigger | \n\u683C\u5F0F\u5316\u51FD\u6570\u89E6\u53D1\u7684\u65F6\u673A\uFF0C\u53EF\u9009\u503C\u4E3A onBlur | \nFieldFormatTrigger | \nonChange | \n
arrow-direction | \n\u7BAD\u5934\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A left up down | \nstring | \nright | \n
label-class | \n\u5DE6\u4FA7\u6587\u672C\u989D\u5916\u7C7B\u540D | \nstring | Array | object | \n- | \n
label-width | \n\u5DE6\u4FA7\u6587\u672C\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n6.2em | \n
label-align | \n\u5DE6\u4FA7\u6587\u672C\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center right top | \nFieldTextAlign | \nleft | \n
input-align | \n\u8F93\u5165\u6846\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center right | \nFieldTextAlign | \nleft | \n
autosize | \n\u662F\u5426\u81EA\u9002\u5E94\u5185\u5BB9\u9AD8\u5EA6\uFF0C\u53EA\u5BF9 textarea \u6709\u6548\uFF0C \u53EF\u4F20\u5165\u5BF9\u8C61,\u5982 { maxHeight: 100, minHeight: 50 }\uFF0C \u5355\u4F4D\u4E3A px | \nboolean | FieldAutosizeConfig | \nfalse | \n
left-icon | \n\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n- | \n
right-icon | \n\u53F3\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n- | \n
icon-prefix | \n\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 | \nstring | \nvan-icon | \n
rules | \n\u8868\u5355\u6821\u9A8C\u89C4\u5219\uFF0C\u8BE6\u89C1 Form \u7EC4\u4EF6 | \nFieldRule[] | \n- | \n
autocomplete | \nHTML \u539F\u751F\u5C5E\u6027\uFF0C\u7528\u4E8E\u63A7\u5236\u81EA\u52A8\u5B8C\u6210\u529F\u80FD\uFF0C\u8BE6\u89C1 MDN - autocomplete | \nstring | \n- | \n
autocapitalize v4.6.2 | \nHTML \u539F\u751F\u5C5E\u6027\uFF0C\u7528\u4E8E\u63A7\u5236\u6587\u672C\u8F93\u5165\u65F6\u662F\u5426\u81EA\u52A8\u5927\u5199\uFF0C\u6B64 API \u4EC5\u5728\u90E8\u5206\u6D4F\u89C8\u5668\u652F\u6301\uFF0C\u8BE6\u89C1 MDN - autocapitalize | \nstring | \n- | \n
enterkeyhint | \nHTML \u539F\u751F\u5C5E\u6027\uFF0C\u7528\u4E8E\u63A7\u5236\u56DE\u8F66\u952E\u6837\u5F0F\uFF0C\u6B64 API \u4EC5\u5728\u90E8\u5206\u6D4F\u89C8\u5668\u652F\u6301\uFF0C\u8BE6\u89C1 MDN - enterkeyhint | \nstring | \n- | \n
spellcheck v4.6.2 | \nHTML \u539F\u751F\u5C5E\u6027\uFF0C\u7528\u4E8E\u68C0\u67E5\u5143\u7D20\u7684\u62FC\u5199\u9519\u8BEF\uFF0C\u6B64 API \u4EC5\u5728\u90E8\u5206\u6D4F\u89C8\u5668\u652F\u6301\uFF0C\u8BE6\u89C1 MDN - spellcheck | \nboolean | \n- | \n
autocorrect v4.6.2 | \n\u4EC5 Safari \u9002\u7528\uFF0C\u7528\u4E8E\u81EA\u52A8\u66F4\u6B63\u8F93\u5165\u7684\u6587\u672C\uFF0C\u8BE6\u89C1 MDN - autocorrect | \nstring | \n- | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
update:model-value | \n\u8F93\u5165\u6846\u5185\u5BB9\u53D8\u5316\u65F6\u89E6\u53D1 | \nvalue: string (\u5F53\u524D\u8F93\u5165\u7684\u503C) | \n
focus | \n\u8F93\u5165\u6846\u83B7\u5F97\u7126\u70B9\u65F6\u89E6\u53D1 | \nevent: Event | \n
blur | \n\u8F93\u5165\u6846\u5931\u53BB\u7126\u70B9\u65F6\u89E6\u53D1 | \nevent: Event | \n
clear | \n\u70B9\u51FB\u6E05\u9664\u6309\u94AE\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
click | \n\u70B9\u51FB\u7EC4\u4EF6\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
click-input | \n\u70B9\u51FB\u8F93\u5165\u533A\u57DF\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
click-left-icon | \n\u70B9\u51FB\u5DE6\u4FA7\u56FE\u6807\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
click-right-icon | \n\u70B9\u51FB\u53F3\u4FA7\u56FE\u6807\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
start-validate | \n\u5F00\u59CB\u8868\u5355\u6821\u9A8C\u65F6\u89E6\u53D1 | \n- | \n
end-validate | \n\u7ED3\u675F\u8868\u5355\u6821\u9A8C\u65F6\u89E6\u53D1 | \n{ status: string, message: string } | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Field \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
focus | \n\u83B7\u53D6\u8F93\u5165\u6846\u7126\u70B9 | \n- | \n- | \n
blur | \n\u53D6\u6D88\u8F93\u5165\u6846\u7126\u70B9 | \n- | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n FieldType,\n FieldRule,\n FieldProps,\n FieldInstance,\n FieldTextAlign,\n FieldRuleMessage,\n FieldClearTrigger,\n FieldFormatTrigger,\n FieldRuleValidator,\n FieldRuleFormatter,\n FieldValidateError,\n FieldAutosizeConfig,\n FieldValidateTrigger,\n FieldValidationStatus,\n} from 'vant';\n
\nFieldInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { FieldInstance } from 'vant';\n\nconst fieldRef = ref<FieldInstance>();\n\nfieldRef.value?.focus();\n
\n\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
label | \n\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u5DE6\u4FA7\u6587\u672C | \n- | \n
input | \n\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\uFF0C\u4F7F\u7528\u6B64\u63D2\u69FD\u540E\uFF0C\u4E0E\u8F93\u5165\u6846\u76F8\u5173\u7684\u5C5E\u6027\u548C\u4E8B\u4EF6\u5C06\u5931\u6548 | \n- | \n
left-icon | \n\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u5934\u90E8\u56FE\u6807 | \n- | \n
right-icon | \n\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u5C3E\u90E8\u56FE\u6807 | \n- | \n
button | \n\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u5C3E\u90E8\u6309\u94AE | \n- | \n
error-message | \n\u81EA\u5B9A\u4E49\u5E95\u90E8\u9519\u8BEF\u63D0\u793A\u6587\u6848 | \n{ message: string } | \n
extra | \n\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u6700\u53F3\u4FA7\u7684\u989D\u5916\u5185\u5BB9 | \n- | \n
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-field-label-width | \n6.2em | \n- | \n
--van-field-label-color | \nvar(--van-text-color) | \n- | \n
--van-field-label-margin-right | \nvar(--van-padding-sm) | \n- | \n
--van-field-input-text-color | \nvar(--van-text-color) | \n- | \n
--van-field-input-error-text-color | \nvar(--van-danger-color) | \n- | \n
--van-field-input-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-field-placeholder-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-field-icon-size | \n18px | \n- | \n
--van-field-clear-icon-size | \n18px | \n- | \n
--van-field-clear-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-field-right-icon-color | \nvar(--van-gray-6) | \n- | \n
--van-field-error-message-color | \nvar(--van-danger-color) | \n- | \n
--van-field-error-message-font-size | \n12px | \n- | \n
--van-field-text-area-min-height | \n60px | \n- | \n
--van-field-word-limit-color | \nvar(--van-gray-7) | \n- | \n
--van-field-word-limit-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-field-word-limit-line-height | \n16px | \n- | \n
--van-field-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-field-required-mark-color | \nvar(--van-red) | \n- | \n
HTML \u539F\u751F\u7684 type="number"
\u5C5E\u6027\u5728 iOS \u548C Android \u7CFB\u7EDF\u4E0A\u90FD\u5B58\u5728\u4E00\u5B9A\u95EE\u9898\uFF0C\u6BD4\u5982 maxlength \u5C5E\u6027\u4E0D\u751F\u6548\u3001\u65E0\u6CD5\u83B7\u53D6\u5230\u5B8C\u6574\u7684\u8F93\u5165\u5185\u5BB9\u7B49\u3002\u56E0\u6B64\u8BBE\u7F6E type \u4E3A number
\u65F6\uFF0CField \u4E0D\u4F1A\u4F7F\u7528\u539F\u751F\u7684 type="number"
\u5C5E\u6027\uFF0C\u800C\u662F\u7528\u73B0\u4EE3\u6D4F\u89C8\u5668\u652F\u6301\u7684 inputmode \u5C5E\u6027\u6765\u63A7\u5236\u8F93\u5165\u952E\u76D8\u7684\u7C7B\u578B\u3002
Field \u7EC4\u4EF6\u5185\u90E8\u4F1A\u5C06\u4F20\u5165\u7684 v-model \u683C\u5F0F\u5316\u4E3A string \u7C7B\u578B\uFF0C\u4FBF\u4E8E\u7EC4\u4EF6\u5185\u90E8\u8FDB\u884C\u5904\u7406\u3002
\n\u5982\u679C\u4F60\u5E0C\u671B\u5728 v-model \u4E0A\u7ED1\u5B9A number \u7C7B\u578B\uFF0C\u53EF\u4EE5\u4F7F\u7528 Vue \u63D0\u4F9B\u7684 .number \u4FEE\u9970\u7B26\u3002
\n<van-field v-model.number="value" type="tel" />\n
\n\u6E05\u9664\u6309\u94AE\u76D1\u542C\u662F\u7684\u79FB\u52A8\u7AEF Touch \u4E8B\u4EF6\uFF0C\u53C2\u89C1\u684C\u9762\u7AEF\u9002\u914D\u3002
\nCalendar component for selecting dates or date ranges.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Calendar } from 'vant';\n\nconst app = createApp();\napp.use(Calendar);\n
\nThe confirm
event will be emitted after the date selection is completed.
<van-cell title="Select Single Date" :value="date" @click="show = true" />\n<van-calendar v-model:show="show" @confirm="onConfirm" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const date = ref('');\n const show = ref(false);\n\n const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;\n const onConfirm = (value) => {\n show.value = false;\n date.value = formatDate(value);\n };\n\n return {\n date,\n show,\n onConfirm,\n };\n },\n};\n
\n<van-cell title="Select Multiple Date" :value="text" @click="show = true" />\n<van-calendar v-model:show="show" type="multiple" @confirm="onConfirm" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const text = ref('');\n const show = ref(false);\n\n const onConfirm = (dates) => {\n show.value = false;\n text.value = `\u9009\u62E9\u4E86 ${dates.length} \u4E2A\u65E5\u671F`;\n };\n\n return {\n text,\n show,\n onConfirm,\n };\n },\n};\n
\nYou can select a date range after setting type
torange
. In range mode, the date returned by the confirm
event is an array, the first item in the array is the start time and the second item is the end time.
<van-cell title="Select Date Range" :value="date" @click="show = true" />\n<van-calendar v-model:show="show" type="range" @confirm="onConfirm" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const date = ref('');\n const show = ref(false);\n\n const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;\n const onConfirm = (values) => {\n const [start, end] = values;\n show.value = false;\n date.value = `${formatDate(start)} - ${formatDate(end)}`;\n };\n\n return {\n date,\n show,\n onConfirm,\n };\n },\n};\n
\nSet show-confirm
to false
to hide the confirm button. In this case, the confirm
event will be emitted immediately after the selection is completed.
<van-calendar v-model:show="show" :show-confirm="false" />\n
\nUse color
prop to custom calendar color.
<van-calendar v-model:show="show" color="#ee0a24" />\n
\nUse min-date
and max-date
to custom date range.
<van-calendar v-model:show="show" :min-date="minDate" :max-date="maxDate" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n\n return {\n show,\n minDate: new Date(2010, 0, 1),\n maxDate: new Date(2010, 0, 31),\n };\n },\n};\n
\nUse confirm-text
and confirm-disabled-text
to custom confirm text.
<van-calendar\n v-model:show="show"\n type="range"\n confirm-text="OK"\n confirm-disabled-text="Select End Time"\n/>\n
\nUse formatter
to custom day text.
<van-calendar v-model:show="show" type="range" :formatter="formatter" />\n
\nexport default {\n setup() {\n const formatter = (day) => {\n const month = day.date.getMonth() + 1;\n const date = day.date.getDate();\n\n if (month === 5) {\n if (date === 1) {\n day.topInfo = 'Labor Day';\n } else if (date === 4) {\n day.topInfo = 'Youth Day';\n } else if (date === 11) {\n day.text = 'Today';\n }\n }\n\n if (day.type === 'start') {\n day.bottomInfo = 'In';\n } else if (day.type === 'end') {\n day.bottomInfo = 'Out';\n }\n\n return day;\n };\n\n return {\n formatter,\n };\n },\n};\n
\nUse position
to custom popup position, can be set to top
\u3001left
\u3001right
.
<van-calendar v-model:show="show" :round="false" position="right" />\n
\nWhen selecting a date range, you can use the max-range
prop to specify the maximum number of selectable days.
<van-calendar type="range" :max-range="3" :style="{ height: '500px' }" />\n
\nUse first-day-of-week
to custom the start day of week
<van-calendar first-day-of-week="1" />\n
\nSet poppable
to false
, the calendar will be displayed directly on the page instead of appearing as a popup
<van-calendar\n title="Calendar"\n :poppable="false"\n :show-confirm="false"\n :style="{ height: '500px' }"\n/>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
type | \nType, can be set to range multiple | \nstring | \nsingle | \n
title | \nTitle of calendar | \nstring | \nCalendar | \n
color | \nColor for the bottom button and selected date | \nstring | \n#1989fa | \n
min-date | \nMin date | \nDate | \nToday | \n
max-date | \nMax date | \nDate | \nSix months after the today | \n
default-date | \nDefault selected date | \nDate | Date[] | null | \nToday | \n
row-height | \nRow height | \nnumber | string | \n64 | \n
formatter | \nDay formatter | \n(day: Day) => Day | \n- | \n
poppable | \nWhether to show the calendar inside a popup | \nboolean | \ntrue | \n
lazy-render | \nWhether to enable lazy render | \nboolean | \ntrue | \n
show-mark | \nWhether to show background month mark | \nboolean | \ntrue | \n
show-title | \nWhether to show title | \nboolean | \ntrue | \n
show-subtitle | \nWhether to show subtitle | \nboolean | \ntrue | \n
show-confirm | \nWhether to show confirm button | \nboolean | \ntrue | \n
readonly | \nWhether to be readonly | \nboolean | \nfalse | \n
confirm-text | \nConfirm button text | \nstring | \nConfirm | \n
confirm-disabled-text | \nConfirm button text when disabled | \nstring | \nConfirm | \n
first-day-of-week | \nSet the start day of week | \n0-6 | \n0 | \n
Following props are supported when the poppable is true
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:show | \nWhether to show calendar | \nboolean | \nfalse | \n
position | \nPopup position, can be set to top right left | \nstring | \nbottom | \n
round | \nWhether to show round corner | \nboolean | \ntrue | \n
close-on-popstate | \nWhether to close when popstate | \nboolean | \ntrue | \n
close-on-click-overlay | \nWhether to close when overlay is clicked | \nboolean | \ntrue | \n
safe-area-inset-top | \nWhether to enable top safe area adaptation | \nboolean | \nfalse | \n
safe-area-inset-bottom | \nWhether to enable bottom safe area adaptation | \nboolean | \ntrue | \n
teleport | \nSpecifies a target element where Calendar will be mounted | \nstring | Element | \n- | \n
Following props are supported when the type is range
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
max-range | \nNumber of selectable days | \nnumber | string | \nUnlimited | \n
range-prompt | \nError message when exceeded max range | \nstring | \nChoose no more than xx days | \n
show-range-prompt | \nWhether prompt error message when exceeded max range | \nboolean | \ntrue | \n
allow-same-day | \nWhether the start and end time of the range is allowed on the same day | \nboolean | \nfalse | \n
Following props are supported when the type is multiple
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
max-range | \nMax count of selectable days | \nnumber | string | \nUnlimited | \n
range-prompt | \nError message when exceeded max count | \nstring | \nChoose no more than xx days | \n
Key | \nDescription | \nType | \n
---|---|---|
date | \nDate | \nDate | \n
type | \nType, can be set to selected \u3001start \u3001middle \u3001end \u3001disabled | \nstring | \n
text | \nText | \nstring | \n
topInfo | \nTop info | \nstring | \n
bottomInfo | \nBottom info | \nstring | \n
className | \nExtra className | \nstring | \n
Event | \nDescription | \nArguments | \n
---|---|---|
select | \nEmitted when date is selected | \nvalue: Date | Date[] | \n
confirm | \nEmitted after date selection is complete, if show-confirm is true , it is Emitted after clicking the confirm button | \nvalue: Date | Date[] | \n
open | \nEmitted when opening Popup | \n- | \n
close | \nEmitted when closing Popup | \n- | \n
opened | \nEmitted when Popup is opened | \n- | \n
closed | \nEmitted when Popup is closed | \n- | \n
unselect | \nEmitted when unselect date when type is multiple | \nvalue: Date | \n
month-show | \nEmitted when a month enters the visible area | \nvalue: { date: Date, title: string } | \n
over-range | \nEmitted when exceeded max range | \n- | \n
click-subtitle | \nEmitted when clicking the subtitle | \nevent: MouseEvent | \n
click-disabled-date v4.7.0 | \nEmitted when clicking disabled date | \nvalue: Date | Date[] | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
title | \nCustom title | \n- | \n
subtitle | \nCustom subtitle | \n{ text: string, date?: Date } | \n
month-title v4.0.9 | \nCustom title of every month | \n{ text: string, date: Date } | \n
footer | \nCustom footer | \n- | \n
confirm-text | \nCustom confirm text | \n{ disabled: boolean } | \n
top-info | \nCustom top info of day | \nday: Day | \n
bottom-info | \nCustom bottom info of day | \nday: Day | \n
Use ref to get Calendar instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
reset | \nReset selected date, will reset to default date when no params passed | \ndate?: Date | Date[] | \n- | \n
scrollToDate | \nScroll to date | \ndate: Date | \n- | \n
getSelectedDate | \nget selected date | \n- | \nDate | Date[] | null | \n
The component exports the following type definitions:
\nimport type {\n CalendarType,\n CalendarProps,\n CalendarDayItem,\n CalendarDayType,\n CalendarInstance,\n} from 'vant';\n
\nCalendarInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { CalendarInstance } from 'vant';\n\nconst calendarRef = ref<CalendarInstance>();\n\ncalendarRef.value?.reset();\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-calendar-background | \nvar(--van-background-2) | \n- | \n
--van-calendar-popup-height | \n80% | \n- | \n
--van-calendar-header-shadow | \n0 2px 10px rgba(125, 126, 128, 0.16) | \n- | \n
--van-calendar-header-title-height | \n44px | \n- | \n
--van-calendar-header-title-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-calendar-header-subtitle-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-calendar-weekdays-height | \n30px | \n- | \n
--van-calendar-weekdays-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-calendar-month-title-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-calendar-month-mark-color | \nfade(var(--van-gray-2), 80%) | \n- | \n
--van-calendar-month-mark-font-size | \n160px | \n- | \n
--van-calendar-day-height | \n64px | \n- | \n
--van-calendar-day-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-calendar-day-margin-bottom | \n4px | \n- | \n
--van-calendar-range-edge-color | \nvar(--van-white) | \n- | \n
--van-calendar-range-edge-background | \nvar(--van-primary-color) | \n- | \n
--van-calendar-range-middle-color | \nvar(--van-primary-color) | \n- | \n
--van-calendar-range-middle-background-opacity | \n0.1 | \n- | \n
--van-calendar-selected-day-size | \n54px | \n- | \n
--van-calendar-selected-day-color | \nvar(--van-white) | \n- | \n
--van-calendar-info-font-size | \nvar(--van-font-size-xs) | \n- | \n
--van-calendar-info-line-height | \nvar(--van-line-height-xs) | \n- | \n
--van-calendar-selected-day-background | \nvar(--van-primary-color) | \n- | \n
--van-calendar-day-disabled-color | \nvar(--van-text-color-3) | \n- | \n
--van-calendar-confirm-button-height | \n36px | \n- | \n
--van-calendar-confirm-button-margin | \n7px 0 | \n- | \n
Calendar component for selecting dates or date ranges.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Calendar } from 'vant';\n\nconst app = createApp();\napp.use(Calendar);\n
\nThe confirm
event will be emitted after the date selection is completed.
<van-cell title="Select Single Date" :value="date" @click="show = true" />\n<van-calendar v-model:show="show" @confirm="onConfirm" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const date = ref('');\n const show = ref(false);\n\n const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;\n const onConfirm = (value) => {\n show.value = false;\n date.value = formatDate(value);\n };\n\n return {\n date,\n show,\n onConfirm,\n };\n },\n};\n
\n<van-cell title="Select Multiple Date" :value="text" @click="show = true" />\n<van-calendar v-model:show="show" type="multiple" @confirm="onConfirm" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const text = ref('');\n const show = ref(false);\n\n const onConfirm = (dates) => {\n show.value = false;\n text.value = `\u9009\u62E9\u4E86 ${dates.length} \u4E2A\u65E5\u671F`;\n };\n\n return {\n text,\n show,\n onConfirm,\n };\n },\n};\n
\nYou can select a date range after setting type
torange
. In range mode, the date returned by the confirm
event is an array, the first item in the array is the start time and the second item is the end time.
<van-cell title="Select Date Range" :value="date" @click="show = true" />\n<van-calendar v-model:show="show" type="range" @confirm="onConfirm" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const date = ref('');\n const show = ref(false);\n\n const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;\n const onConfirm = (values) => {\n const [start, end] = values;\n show.value = false;\n date.value = `${formatDate(start)} - ${formatDate(end)}`;\n };\n\n return {\n date,\n show,\n onConfirm,\n };\n },\n};\n
\nSet show-confirm
to false
to hide the confirm button. In this case, the confirm
event will be emitted immediately after the selection is completed.
<van-calendar v-model:show="show" :show-confirm="false" />\n
\nUse color
prop to custom calendar color.
<van-calendar v-model:show="show" color="#ee0a24" />\n
\nUse min-date
and max-date
to custom date range.
<van-calendar v-model:show="show" :min-date="minDate" :max-date="maxDate" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n\n return {\n show,\n minDate: new Date(2010, 0, 1),\n maxDate: new Date(2010, 0, 31),\n };\n },\n};\n
\nUse confirm-text
and confirm-disabled-text
to custom confirm text.
<van-calendar\n v-model:show="show"\n type="range"\n confirm-text="OK"\n confirm-disabled-text="Select End Time"\n/>\n
\nUse formatter
to custom day text.
<van-calendar v-model:show="show" type="range" :formatter="formatter" />\n
\nexport default {\n setup() {\n const formatter = (day) => {\n const month = day.date.getMonth() + 1;\n const date = day.date.getDate();\n\n if (month === 5) {\n if (date === 1) {\n day.topInfo = 'Labor Day';\n } else if (date === 4) {\n day.topInfo = 'Youth Day';\n } else if (date === 11) {\n day.text = 'Today';\n }\n }\n\n if (day.type === 'start') {\n day.bottomInfo = 'In';\n } else if (day.type === 'end') {\n day.bottomInfo = 'Out';\n }\n\n return day;\n };\n\n return {\n formatter,\n };\n },\n};\n
\nUse position
to custom popup position, can be set to top
\u3001left
\u3001right
.
<van-calendar v-model:show="show" :round="false" position="right" />\n
\nWhen selecting a date range, you can use the max-range
prop to specify the maximum number of selectable days.
<van-calendar type="range" :max-range="3" :style="{ height: '500px' }" />\n
\nUse first-day-of-week
to custom the start day of week
<van-calendar first-day-of-week="1" />\n
\nSet poppable
to false
, the calendar will be displayed directly on the page instead of appearing as a popup
<van-calendar\n title="Calendar"\n :poppable="false"\n :show-confirm="false"\n :style="{ height: '500px' }"\n/>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
type | \nType, can be set to range multiple | \nstring | \nsingle | \n
title | \nTitle of calendar | \nstring | \nCalendar | \n
color | \nColor for the bottom button and selected date | \nstring | \n#1989fa | \n
min-date | \nMin date | \nDate | \nToday | \n
max-date | \nMax date | \nDate | \nSix months after the today | \n
default-date | \nDefault selected date | \nDate | Date[] | null | \nToday | \n
row-height | \nRow height | \nnumber | string | \n64 | \n
formatter | \nDay formatter | \n(day: Day) => Day | \n- | \n
poppable | \nWhether to show the calendar inside a popup | \nboolean | \ntrue | \n
lazy-render | \nWhether to enable lazy render | \nboolean | \ntrue | \n
show-mark | \nWhether to show background month mark | \nboolean | \ntrue | \n
show-title | \nWhether to show title | \nboolean | \ntrue | \n
show-subtitle | \nWhether to show subtitle | \nboolean | \ntrue | \n
show-confirm | \nWhether to show confirm button | \nboolean | \ntrue | \n
readonly | \nWhether to be readonly | \nboolean | \nfalse | \n
confirm-text | \nConfirm button text | \nstring | \nConfirm | \n
confirm-disabled-text | \nConfirm button text when disabled | \nstring | \nConfirm | \n
first-day-of-week | \nSet the start day of week | \n0-6 | \n0 | \n
Following props are supported when the poppable is true
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:show | \nWhether to show calendar | \nboolean | \nfalse | \n
position | \nPopup position, can be set to top right left | \nstring | \nbottom | \n
round | \nWhether to show round corner | \nboolean | \ntrue | \n
close-on-popstate | \nWhether to close when popstate | \nboolean | \ntrue | \n
close-on-click-overlay | \nWhether to close when overlay is clicked | \nboolean | \ntrue | \n
safe-area-inset-top | \nWhether to enable top safe area adaptation | \nboolean | \nfalse | \n
safe-area-inset-bottom | \nWhether to enable bottom safe area adaptation | \nboolean | \ntrue | \n
teleport | \nSpecifies a target element where Calendar will be mounted | \nstring | Element | \n- | \n
Following props are supported when the type is range
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
max-range | \nNumber of selectable days | \nnumber | string | \nUnlimited | \n
range-prompt | \nError message when exceeded max range | \nstring | \nChoose no more than xx days | \n
show-range-prompt | \nWhether prompt error message when exceeded max range | \nboolean | \ntrue | \n
allow-same-day | \nWhether the start and end time of the range is allowed on the same day | \nboolean | \nfalse | \n
Following props are supported when the type is multiple
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
max-range | \nMax count of selectable days | \nnumber | string | \nUnlimited | \n
range-prompt | \nError message when exceeded max count | \nstring | \nChoose no more than xx days | \n
Key | \nDescription | \nType | \n
---|---|---|
date | \nDate | \nDate | \n
type | \nType, can be set to selected \u3001start \u3001middle \u3001end \u3001disabled | \nstring | \n
text | \nText | \nstring | \n
topInfo | \nTop info | \nstring | \n
bottomInfo | \nBottom info | \nstring | \n
className | \nExtra className | \nstring | \n
Event | \nDescription | \nArguments | \n
---|---|---|
select | \nEmitted when date is selected | \nvalue: Date | Date[] | \n
confirm | \nEmitted after date selection is complete, if show-confirm is true , it is Emitted after clicking the confirm button | \nvalue: Date | Date[] | \n
open | \nEmitted when opening Popup | \n- | \n
close | \nEmitted when closing Popup | \n- | \n
opened | \nEmitted when Popup is opened | \n- | \n
closed | \nEmitted when Popup is closed | \n- | \n
unselect | \nEmitted when unselect date when type is multiple | \nvalue: Date | \n
month-show | \nEmitted when a month enters the visible area | \nvalue: { date: Date, title: string } | \n
over-range | \nEmitted when exceeded max range | \n- | \n
click-subtitle | \nEmitted when clicking the subtitle | \nevent: MouseEvent | \n
click-disabled-date v4.7.0 | \nEmitted when clicking disabled date | \nvalue: Date | Date[] | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
title | \nCustom title | \n- | \n
subtitle | \nCustom subtitle | \n{ text: string, date?: Date } | \n
month-title v4.0.9 | \nCustom title of every month | \n{ text: string, date: Date } | \n
footer | \nCustom footer | \n- | \n
confirm-text | \nCustom confirm text | \n{ disabled: boolean } | \n
top-info | \nCustom top info of day | \nday: Day | \n
bottom-info | \nCustom bottom info of day | \nday: Day | \n
Use ref to get Calendar instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
reset | \nReset selected date, will reset to default date when no params passed | \ndate?: Date | Date[] | \n- | \n
scrollToDate | \nScroll to date | \ndate: Date | \n- | \n
getSelectedDate | \nget selected date | \n- | \nDate | Date[] | null | \n
The component exports the following type definitions:
\nimport type {\n CalendarType,\n CalendarProps,\n CalendarDayItem,\n CalendarDayType,\n CalendarInstance,\n} from 'vant';\n
\nCalendarInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { CalendarInstance } from 'vant';\n\nconst calendarRef = ref<CalendarInstance>();\n\ncalendarRef.value?.reset();\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-calendar-background | \nvar(--van-background-2) | \n- | \n
--van-calendar-popup-height | \n80% | \n- | \n
--van-calendar-header-shadow | \n0 2px 10px rgba(125, 126, 128, 0.16) | \n- | \n
--van-calendar-header-title-height | \n44px | \n- | \n
--van-calendar-header-title-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-calendar-header-subtitle-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-calendar-weekdays-height | \n30px | \n- | \n
--van-calendar-weekdays-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-calendar-month-title-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-calendar-month-mark-color | \nfade(var(--van-gray-2), 80%) | \n- | \n
--van-calendar-month-mark-font-size | \n160px | \n- | \n
--van-calendar-day-height | \n64px | \n- | \n
--van-calendar-day-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-calendar-day-margin-bottom | \n4px | \n- | \n
--van-calendar-range-edge-color | \nvar(--van-white) | \n- | \n
--van-calendar-range-edge-background | \nvar(--van-primary-color) | \n- | \n
--van-calendar-range-middle-color | \nvar(--van-primary-color) | \n- | \n
--van-calendar-range-middle-background-opacity | \n0.1 | \n- | \n
--van-calendar-selected-day-size | \n54px | \n- | \n
--van-calendar-selected-day-color | \nvar(--van-white) | \n- | \n
--van-calendar-info-font-size | \nvar(--van-font-size-xs) | \n- | \n
--van-calendar-info-line-height | \nvar(--van-line-height-xs) | \n- | \n
--van-calendar-selected-day-background | \nvar(--van-primary-color) | \n- | \n
--van-calendar-day-disabled-color | \nvar(--van-text-color-3) | \n- | \n
--van-calendar-confirm-button-height | \n36px | \n- | \n
--van-calendar-confirm-button-margin | \n7px 0 | \n- | \n
\u8BBE\u7F6E\u5143\u7D20\u4E4B\u95F4\u7684\u95F4\u8DDD\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Space } from 'vant';\n\nconst app = createApp();\napp.use(Space);\n
\nSpace \u7EC4\u4EF6\u4F1A\u5728\u5404\u4E2A\u5B50\u7EC4\u4EF6\u4E4B\u95F4\u8BBE\u7F6E\u4E00\u5B9A\u7684\u95F4\u8DDD\uFF0C\u9ED8\u8BA4\u95F4\u8DDD\u4E3A 8px
\u3002
<van-space>\n <van-button type="primary">\u6309\u94AE</van-button>\n <van-button type="primary">\u6309\u94AE</van-button>\n <van-button type="primary">\u6309\u94AE</van-button>\n <van-button type="primary">\u6309\u94AE</van-button>\n</van-space>\n
\n\u5C06 direction
\u5C5E\u6027\u8BBE\u7F6E\u4E3A vertical
\uFF0C\u53EF\u4EE5\u8BBE\u7F6E\u5782\u76F4\u65B9\u5411\u6392\u5217\u7684\u95F4\u8DDD\u3002
<van-space direction="vertical" fill>\n <van-button type="primary" block>\u6309\u94AE</van-button>\n <van-button type="primary" block>\u6309\u94AE</van-button>\n <van-button type="primary" block>\u6309\u94AE</van-button>\n</van-space>\n
\n\u901A\u8FC7\u8C03\u6574 size
\u7684\u503C\u6765\u63A7\u5236\u95F4\u8DDD\u7684\u5927\u5C0F\u3002\u4F20\u5165 number
\u7C7B\u578B\u65F6\uFF0C\u4F1A\u9ED8\u8BA4\u4F7F\u7528 px
\u5355\u4F4D\uFF1B\u4E5F\u53EF\u4EE5\u4F20\u5165 string
\u7C7B\u578B\uFF0C\u6BD4\u5982 2rem
\u6216 5vw
\u7B49\u5E26\u6709\u5355\u4F4D\u7684\u503C\u3002
<!-- 20px -->\n<van-space :size="20">\n <van-button type="primary">\u6309\u94AE</van-button>\n <van-button type="primary">\u6309\u94AE</van-button>\n <van-button type="primary">\u6309\u94AE</van-button>\n</van-space>\n\n<!-- 2rem -->\n<van-space size="2rem">\n <van-button type="primary">\u6309\u94AE</van-button>\n <van-button type="primary">\u6309\u94AE</van-button>\n <van-button type="primary">\u6309\u94AE</van-button>\n</van-space>\n
\n\u901A\u8FC7\u8C03\u6574 align
\u7684\u503C\u6765\u8BBE\u7F6E\u5B50\u5143\u7D20\u7684\u5BF9\u9F50\u65B9\u5F0F, \u53EF\u9009\u503C\u4E3A start
, center
,end
,baseline
\uFF0C\u5728\u6C34\u5E73\u6A21\u5F0F\u4E0B\u7684\u9ED8\u8BA4\u503C\u4E3A center
\u3002
<van-radio-group\n v-model="align"\n direction="horizontal"\n style="margin-bottom: 16px"\n>\n <van-radio name="start">start</van-radio>\n <van-radio name="center">center</van-radio>\n <van-radio name="end">end</van-radio>\n <van-radio name="baseline">baseline</van-radio>\n</van-radio-group>\n\n<van-space :align="align" style="padding: 16px; background: #f3f2f5">\n <van-button type="primary">{{ align }}</van-button>\n <div style="padding: 40px 20px; background: #fff">Block</div>\n</van-space>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const align = ref('center');\n return { align };\n },\n};\n
\n\u5728\u6C34\u5E73\u6A21\u5F0F\u4E0B, \u901A\u8FC7 wrap
\u5C5E\u6027\u6765\u63A7\u5236\u5B50\u5143\u7D20\u662F\u5426\u81EA\u52A8\u6362\u884C\u3002
<van-space wrap>\n <van-button type="primary" block>\u6309\u94AE</van-button>\n <van-button type="primary" block>\u6309\u94AE</van-button>\n <van-button type="primary" block>\u6309\u94AE</van-button>\n <van-button type="primary" block>\u6309\u94AE</van-button>\n <van-button type="primary" block>\u6309\u94AE</van-button>\n <van-button type="primary" block>\u6309\u94AE</van-button>\n <van-button type="primary" block>\u6309\u94AE</van-button>\n <van-button type="primary" block>\u6309\u94AE</van-button>\n</van-space>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
direction | \n\u95F4\u8DDD\u65B9\u5411 | \nvertical | horizontal | \nhorizontal | \n
size | \n\u95F4\u8DDD\u5927\u5C0F\uFF0C\u5982 20px 2em \uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px \uFF0C\u652F\u6301\u6570\u7EC4\u5F62\u5F0F\u6765\u5206\u522B\u8BBE\u7F6E\u6A2A\u5411\u548C\u7EB5\u5411\u95F4\u8DDD | \nnumber | string | number[] | string[] | \n8px | \n
align | \n\u8BBE\u7F6E\u5B50\u5143\u7D20\u7684\u5BF9\u9F50\u65B9\u5F0F | \nstart | end | center | baseline | \n- | \n
wrap | \n\u662F\u5426\u81EA\u52A8\u6362\u884C\uFF0C\u4EC5\u9002\u7528\u4E8E\u6C34\u5E73\u65B9\u5411\u6392\u5217 | \nboolean | \nfalse | \n
fill | \n\u662F\u5426\u8BA9 Space \u53D8\u4E3A\u4E00\u4E2A\u5757\u7EA7\u5143\u7D20\uFF0C\u586B\u5145\u6574\u4E2A\u7236\u5143\u7D20 | \nboolean | \nfalse | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u95F4\u8DDD\u7EC4\u4EF6\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { SpaceProps, SpaceSize, SpaceAlign } from 'vant';\n
\n\u8BBE\u7F6E\u5143\u7D20\u4E4B\u95F4\u7684\u95F4\u8DDD\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Space } from 'vant';\n\nconst app = createApp();\napp.use(Space);\n
\nSpace \u7EC4\u4EF6\u4F1A\u5728\u5404\u4E2A\u5B50\u7EC4\u4EF6\u4E4B\u95F4\u8BBE\u7F6E\u4E00\u5B9A\u7684\u95F4\u8DDD\uFF0C\u9ED8\u8BA4\u95F4\u8DDD\u4E3A 8px
\u3002
<van-space>\n <van-button type="primary">\u6309\u94AE</van-button>\n <van-button type="primary">\u6309\u94AE</van-button>\n <van-button type="primary">\u6309\u94AE</van-button>\n <van-button type="primary">\u6309\u94AE</van-button>\n</van-space>\n
\n\u5C06 direction
\u5C5E\u6027\u8BBE\u7F6E\u4E3A vertical
\uFF0C\u53EF\u4EE5\u8BBE\u7F6E\u5782\u76F4\u65B9\u5411\u6392\u5217\u7684\u95F4\u8DDD\u3002
<van-space direction="vertical" fill>\n <van-button type="primary" block>\u6309\u94AE</van-button>\n <van-button type="primary" block>\u6309\u94AE</van-button>\n <van-button type="primary" block>\u6309\u94AE</van-button>\n</van-space>\n
\n\u901A\u8FC7\u8C03\u6574 size
\u7684\u503C\u6765\u63A7\u5236\u95F4\u8DDD\u7684\u5927\u5C0F\u3002\u4F20\u5165 number
\u7C7B\u578B\u65F6\uFF0C\u4F1A\u9ED8\u8BA4\u4F7F\u7528 px
\u5355\u4F4D\uFF1B\u4E5F\u53EF\u4EE5\u4F20\u5165 string
\u7C7B\u578B\uFF0C\u6BD4\u5982 2rem
\u6216 5vw
\u7B49\u5E26\u6709\u5355\u4F4D\u7684\u503C\u3002
<!-- 20px -->\n<van-space :size="20">\n <van-button type="primary">\u6309\u94AE</van-button>\n <van-button type="primary">\u6309\u94AE</van-button>\n <van-button type="primary">\u6309\u94AE</van-button>\n</van-space>\n\n<!-- 2rem -->\n<van-space size="2rem">\n <van-button type="primary">\u6309\u94AE</van-button>\n <van-button type="primary">\u6309\u94AE</van-button>\n <van-button type="primary">\u6309\u94AE</van-button>\n</van-space>\n
\n\u901A\u8FC7\u8C03\u6574 align
\u7684\u503C\u6765\u8BBE\u7F6E\u5B50\u5143\u7D20\u7684\u5BF9\u9F50\u65B9\u5F0F, \u53EF\u9009\u503C\u4E3A start
, center
,end
,baseline
\uFF0C\u5728\u6C34\u5E73\u6A21\u5F0F\u4E0B\u7684\u9ED8\u8BA4\u503C\u4E3A center
\u3002
<van-radio-group\n v-model="align"\n direction="horizontal"\n style="margin-bottom: 16px"\n>\n <van-radio name="start">start</van-radio>\n <van-radio name="center">center</van-radio>\n <van-radio name="end">end</van-radio>\n <van-radio name="baseline">baseline</van-radio>\n</van-radio-group>\n\n<van-space :align="align" style="padding: 16px; background: #f3f2f5">\n <van-button type="primary">{{ align }}</van-button>\n <div style="padding: 40px 20px; background: #fff">Block</div>\n</van-space>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const align = ref('center');\n return { align };\n },\n};\n
\n\u5728\u6C34\u5E73\u6A21\u5F0F\u4E0B, \u901A\u8FC7 wrap
\u5C5E\u6027\u6765\u63A7\u5236\u5B50\u5143\u7D20\u662F\u5426\u81EA\u52A8\u6362\u884C\u3002
<van-space wrap>\n <van-button type="primary" block>\u6309\u94AE</van-button>\n <van-button type="primary" block>\u6309\u94AE</van-button>\n <van-button type="primary" block>\u6309\u94AE</van-button>\n <van-button type="primary" block>\u6309\u94AE</van-button>\n <van-button type="primary" block>\u6309\u94AE</van-button>\n <van-button type="primary" block>\u6309\u94AE</van-button>\n <van-button type="primary" block>\u6309\u94AE</van-button>\n <van-button type="primary" block>\u6309\u94AE</van-button>\n</van-space>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
direction | \n\u95F4\u8DDD\u65B9\u5411 | \nvertical | horizontal | \nhorizontal | \n
size | \n\u95F4\u8DDD\u5927\u5C0F\uFF0C\u5982 20px 2em \uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px \uFF0C\u652F\u6301\u6570\u7EC4\u5F62\u5F0F\u6765\u5206\u522B\u8BBE\u7F6E\u6A2A\u5411\u548C\u7EB5\u5411\u95F4\u8DDD | \nnumber | string | number[] | string[] | \n8px | \n
align | \n\u8BBE\u7F6E\u5B50\u5143\u7D20\u7684\u5BF9\u9F50\u65B9\u5F0F | \nstart | end | center | baseline | \n- | \n
wrap | \n\u662F\u5426\u81EA\u52A8\u6362\u884C\uFF0C\u4EC5\u9002\u7528\u4E8E\u6C34\u5E73\u65B9\u5411\u6392\u5217 | \nboolean | \nfalse | \n
fill | \n\u662F\u5426\u8BA9 Space \u53D8\u4E3A\u4E00\u4E2A\u5757\u7EA7\u5143\u7D20\uFF0C\u586B\u5145\u6574\u4E2A\u7236\u5143\u7D20 | \nboolean | \nfalse | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u95F4\u8DDD\u7EC4\u4EF6\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { SpaceProps, SpaceSize, SpaceAlign } from 'vant';\n
\nUsed to select from a set of related data sets.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { TreeSelect } from 'vant';\n\nconst app = createApp();\napp.use(TreeSelect);\n
\n<van-tree-select\n v-model:active-id="activeId"\n v-model:main-active-index="activeIndex"\n :items="items"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeId = ref(1);\n const activeIndex = ref(0);\n const items = [\n {\n text: 'Group 1',\n children: [\n { text: 'Delaware', id: 1 },\n { text: 'Florida', id: 2 },\n { text: 'Georgia', id: 3, disabled: true },\n ],\n },\n {\n text: 'Group 2',\n children: [\n { text: 'Alabama', id: 4 },\n { text: 'Kansas', id: 5 },\n { text: 'Louisiana', id: 6 },\n ],\n },\n { text: 'Group 3', disabled: true },\n ];\n\n return {\n items,\n activeId,\n activeIndex,\n };\n },\n};\n
\n<van-tree-select\n v-model:active-id="activeIds"\n v-model:main-active-index="activeIndex"\n :items="items"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeIds = ref([1, 2]);\n const activeIndex = ref(0);\n const items = [\n {\n text: 'Group 1',\n children: [\n { text: 'Delaware', id: 1 },\n { text: 'Florida', id: 2 },\n { text: 'Georgia', id: 3, disabled: true },\n ],\n },\n {\n text: 'Group 2',\n children: [\n { text: 'Alabama', id: 4 },\n { text: 'Kansas', id: 5 },\n { text: 'Louisiana', id: 6 },\n ],\n },\n { text: 'Group 3', disabled: true },\n ];\n\n return {\n items,\n activeIds,\n activeIndex,\n };\n },\n};\n
\n<van-tree-select\n v-model:main-active-index="activeIndex"\n height="55vw"\n :items="items"\n>\n <template #content>\n <van-image\n v-if="activeIndex === 0"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"\n />\n <van-image\n v-if="activeIndex === 1"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"\n />\n </template>\n</van-tree-select>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeIndex = ref(0);\n return {\n activeIndex,\n items: [{ text: 'Group 1' }, { text: 'Group 2' }],\n };\n },\n};\n
\n<van-tree-select\n v-model:main-active-index="activeIndex"\n height="55vw"\n :items="items"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeIndex = ref(0);\n return {\n activeIndex,\n items: [\n {\n text: 'Group 1',\n children: [\n { text: 'Delaware', id: 1 },\n { text: 'Florida', id: 2 },\n { text: 'Georgia', id: 3, disabled: true },\n ],\n dot: true,\n },\n {\n text: 'Group 2',\n children: [\n { text: 'Alabama', id: 4 },\n { text: 'Kansas', id: 5 },\n { text: 'Louisiana', id: 6 },\n ],\n badge: 5,\n },\n ],\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:main-active-index | \nThe index of selected parent node | \nnumber | string | \n0 | \n
v-model:active-id | \nId of selected item | \nnumber | string | (number | string)[] | \n0 | \n
items | \nRequired datasets for the component | \nTreeSelectItem[] | \n[] | \n
height | \nHeight | \nnumber | string | \n300 | \n
max | \nMaximum number of selected items | \nnumber | string | \nInfinity | \n
selected-icon | \nSelected icon | \nstring | \nsuccess | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click-nav | \nEmitted when parent node is selected | \nindex: number | \n
click-item | \nEmitted when item is selected | \nitem: TreeSelectChild | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
nav-text v4.1.0 | \nCustom name of the parent node | \nitem: TreeSelectChild | \n
content | \nCustom right content | \n- | \n
TreeSelectItem
should be an array contains specified tree objects.
In every tree object, text
property defines id
stands for the unique key while the children
contains sub-tree objects.
[\n {\n // name of the parent node\n text: 'Group 1',\n // badge\n badge: 3,\n // Whether to show red dot\n dot: true,\n // ClassName of parent node\n className: 'my-class',\n // leaves of this parent node\n children: [\n {\n // name of the leaf node\n text: 'Washington',\n // id of the leaf node, component highlights leaf node by comparing the activeId with this.\n id: 1,\n // disable options\n disabled: true,\n },\n {\n text: 'Baltimore',\n id: 2,\n },\n ],\n },\n];\n
\nThe component exports the following type definitions:
\nimport type { TreeSelectItem, TreeSelectChild, TreeSelectProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-tree-select-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-tree-select-nav-background | \nvar(--van-background) | \n- | \n
--van-tree-select-content-background | \nvar(--van-background-2) | \n- | \n
--van-tree-select-nav-item-padding | \n14px var(--van-padding-sm) | \n- | \n
--van-tree-select-item-height | \n48px | \n- | \n
--van-tree-select-item-active-color | \nvar(--van-primary-color) | \n- | \n
--van-tree-select-item-disabled-color | \nvar(--van-gray-5) | \n- | \n
--van-tree-select-item-selected-size | \n16px | \n- | \n
Used to select from a set of related data sets.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { TreeSelect } from 'vant';\n\nconst app = createApp();\napp.use(TreeSelect);\n
\n<van-tree-select\n v-model:active-id="activeId"\n v-model:main-active-index="activeIndex"\n :items="items"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeId = ref(1);\n const activeIndex = ref(0);\n const items = [\n {\n text: 'Group 1',\n children: [\n { text: 'Delaware', id: 1 },\n { text: 'Florida', id: 2 },\n { text: 'Georgia', id: 3, disabled: true },\n ],\n },\n {\n text: 'Group 2',\n children: [\n { text: 'Alabama', id: 4 },\n { text: 'Kansas', id: 5 },\n { text: 'Louisiana', id: 6 },\n ],\n },\n { text: 'Group 3', disabled: true },\n ];\n\n return {\n items,\n activeId,\n activeIndex,\n };\n },\n};\n
\n<van-tree-select\n v-model:active-id="activeIds"\n v-model:main-active-index="activeIndex"\n :items="items"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeIds = ref([1, 2]);\n const activeIndex = ref(0);\n const items = [\n {\n text: 'Group 1',\n children: [\n { text: 'Delaware', id: 1 },\n { text: 'Florida', id: 2 },\n { text: 'Georgia', id: 3, disabled: true },\n ],\n },\n {\n text: 'Group 2',\n children: [\n { text: 'Alabama', id: 4 },\n { text: 'Kansas', id: 5 },\n { text: 'Louisiana', id: 6 },\n ],\n },\n { text: 'Group 3', disabled: true },\n ];\n\n return {\n items,\n activeIds,\n activeIndex,\n };\n },\n};\n
\n<van-tree-select\n v-model:main-active-index="activeIndex"\n height="55vw"\n :items="items"\n>\n <template #content>\n <van-image\n v-if="activeIndex === 0"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"\n />\n <van-image\n v-if="activeIndex === 1"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"\n />\n </template>\n</van-tree-select>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeIndex = ref(0);\n return {\n activeIndex,\n items: [{ text: 'Group 1' }, { text: 'Group 2' }],\n };\n },\n};\n
\n<van-tree-select\n v-model:main-active-index="activeIndex"\n height="55vw"\n :items="items"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeIndex = ref(0);\n return {\n activeIndex,\n items: [\n {\n text: 'Group 1',\n children: [\n { text: 'Delaware', id: 1 },\n { text: 'Florida', id: 2 },\n { text: 'Georgia', id: 3, disabled: true },\n ],\n dot: true,\n },\n {\n text: 'Group 2',\n children: [\n { text: 'Alabama', id: 4 },\n { text: 'Kansas', id: 5 },\n { text: 'Louisiana', id: 6 },\n ],\n badge: 5,\n },\n ],\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:main-active-index | \nThe index of selected parent node | \nnumber | string | \n0 | \n
v-model:active-id | \nId of selected item | \nnumber | string | (number | string)[] | \n0 | \n
items | \nRequired datasets for the component | \nTreeSelectItem[] | \n[] | \n
height | \nHeight | \nnumber | string | \n300 | \n
max | \nMaximum number of selected items | \nnumber | string | \nInfinity | \n
selected-icon | \nSelected icon | \nstring | \nsuccess | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click-nav | \nEmitted when parent node is selected | \nindex: number | \n
click-item | \nEmitted when item is selected | \nitem: TreeSelectChild | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
nav-text v4.1.0 | \nCustom name of the parent node | \nitem: TreeSelectChild | \n
content | \nCustom right content | \n- | \n
TreeSelectItem
should be an array contains specified tree objects.
In every tree object, text
property defines id
stands for the unique key while the children
contains sub-tree objects.
[\n {\n // name of the parent node\n text: 'Group 1',\n // badge\n badge: 3,\n // Whether to show red dot\n dot: true,\n // ClassName of parent node\n className: 'my-class',\n // leaves of this parent node\n children: [\n {\n // name of the leaf node\n text: 'Washington',\n // id of the leaf node, component highlights leaf node by comparing the activeId with this.\n id: 1,\n // disable options\n disabled: true,\n },\n {\n text: 'Baltimore',\n id: 2,\n },\n ],\n },\n];\n
\nThe component exports the following type definitions:
\nimport type { TreeSelectItem, TreeSelectChild, TreeSelectProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-tree-select-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-tree-select-nav-background | \nvar(--van-background) | \n- | \n
--van-tree-select-content-background | \nvar(--van-background-2) | \n- | \n
--van-tree-select-nav-item-padding | \n14px var(--van-padding-sm) | \n- | \n
--van-tree-select-item-height | \n48px | \n- | \n
--van-tree-select-item-active-color | \nvar(--van-primary-color) | \n- | \n
--van-tree-select-item-disabled-color | \nvar(--van-gray-5) | \n- | \n
--van-tree-select-item-selected-size | \n16px | \n- | \n
\u7F16\u8F91\u5E76\u4FDD\u5B58\u8054\u7CFB\u4EBA\u4FE1\u606F\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { ContactEdit } from 'vant';\n\nconst app = createApp();\napp.use(ContactEdit);\n
\n<van-contact-edit\n is-edit\n show-set-default\n :contact-info="editingContact"\n set-default-label="\u8BBE\u4E3A\u9ED8\u8BA4\u8054\u7CFB\u4EBA"\n @save="onSave"\n @delete="onDelete"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const editingContact = ref({\n tel: '',\n name: '',\n });\n const onSave = (contactInfo) => showToast('\u4FDD\u5B58');\n const onDelete = (contactInfo) => showToast('\u5220\u9664');\n return {\n onSave,\n onDelete,\n editingContact,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
contact-info | \n\u8054\u7CFB\u4EBA\u4FE1\u606F | \nContactEditInfo | \n{} | \n
is-edit | \n\u662F\u5426\u4E3A\u7F16\u8F91\u8054\u7CFB\u4EBA | \nboolean | \nfalse | \n
is-saving | \n\u662F\u5426\u663E\u793A\u4FDD\u5B58\u6309\u94AE\u52A0\u8F7D\u52A8\u753B | \nboolean | \nfalse | \n
is-deleting | \n\u662F\u5426\u663E\u793A\u5220\u9664\u6309\u94AE\u52A0\u8F7D\u52A8\u753B | \nboolean | \nfalse | \n
tel-validator | \n\u624B\u673A\u53F7\u683C\u5F0F\u6821\u9A8C\u51FD\u6570 | \n(tel: string) => boolean | \n- | \n
show-set-default | \n\u662F\u5426\u663E\u793A\u9ED8\u8BA4\u8054\u7CFB\u4EBA\u680F | \nboolean | \nfalse | \n
set-default-label | \n\u9ED8\u8BA4\u8054\u7CFB\u4EBA\u680F\u6587\u6848 | \nstring | \n- | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
save | \n\u70B9\u51FB\u4FDD\u5B58\u6309\u94AE\u65F6\u89E6\u53D1 | \ncontent\uFF1A\u8868\u5355\u5185\u5BB9 | \n
delete | \n\u70B9\u51FB\u5220\u9664\u6309\u94AE\u65F6\u89E6\u53D1 | \ncontent\uFF1A\u8868\u5355\u5185\u5BB9 | \n
change-default | \n\u5207\u6362\u662F\u5426\u4E3A\u9ED8\u8BA4\u8054\u7CFB\u4EBA\u65F6\u89E6\u53D1 | \nchecked\uFF1A\u662F\u5426\u9ED8\u8BA4 | \n
\u952E\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
name | \n\u8054\u7CFB\u4EBA\u59D3\u540D | \nstring | \n
tel | \n\u8054\u7CFB\u4EBA\u624B\u673A\u53F7 | \nstring | \n
isDefault | \n\u662F\u5426\u9ED8\u8BA4 | \nboolean | undefined | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { ContactEditInfo, ContactEditProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-contact-edit-padding | \nvar(--van-padding-md) | \n- | \n
--van-contact-edit-fields-radius | \nvar(--van-radius-md) | \n- | \n
--van-contact-edit-buttons-padding | \nvar(--van-padding-xl) 0 | \n- | \n
--van-contact-edit-button-margin-bottom | \nvar(--van-padding-sm) | \n- | \n
--van-contact-edit-button-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-contact-edit-field-label-width | \n4.1em | \n- | \n
\u7F16\u8F91\u5E76\u4FDD\u5B58\u8054\u7CFB\u4EBA\u4FE1\u606F\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { ContactEdit } from 'vant';\n\nconst app = createApp();\napp.use(ContactEdit);\n
\n<van-contact-edit\n is-edit\n show-set-default\n :contact-info="editingContact"\n set-default-label="\u8BBE\u4E3A\u9ED8\u8BA4\u8054\u7CFB\u4EBA"\n @save="onSave"\n @delete="onDelete"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const editingContact = ref({\n tel: '',\n name: '',\n });\n const onSave = (contactInfo) => showToast('\u4FDD\u5B58');\n const onDelete = (contactInfo) => showToast('\u5220\u9664');\n return {\n onSave,\n onDelete,\n editingContact,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
contact-info | \n\u8054\u7CFB\u4EBA\u4FE1\u606F | \nContactEditInfo | \n{} | \n
is-edit | \n\u662F\u5426\u4E3A\u7F16\u8F91\u8054\u7CFB\u4EBA | \nboolean | \nfalse | \n
is-saving | \n\u662F\u5426\u663E\u793A\u4FDD\u5B58\u6309\u94AE\u52A0\u8F7D\u52A8\u753B | \nboolean | \nfalse | \n
is-deleting | \n\u662F\u5426\u663E\u793A\u5220\u9664\u6309\u94AE\u52A0\u8F7D\u52A8\u753B | \nboolean | \nfalse | \n
tel-validator | \n\u624B\u673A\u53F7\u683C\u5F0F\u6821\u9A8C\u51FD\u6570 | \n(tel: string) => boolean | \n- | \n
show-set-default | \n\u662F\u5426\u663E\u793A\u9ED8\u8BA4\u8054\u7CFB\u4EBA\u680F | \nboolean | \nfalse | \n
set-default-label | \n\u9ED8\u8BA4\u8054\u7CFB\u4EBA\u680F\u6587\u6848 | \nstring | \n- | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
save | \n\u70B9\u51FB\u4FDD\u5B58\u6309\u94AE\u65F6\u89E6\u53D1 | \ncontent\uFF1A\u8868\u5355\u5185\u5BB9 | \n
delete | \n\u70B9\u51FB\u5220\u9664\u6309\u94AE\u65F6\u89E6\u53D1 | \ncontent\uFF1A\u8868\u5355\u5185\u5BB9 | \n
change-default | \n\u5207\u6362\u662F\u5426\u4E3A\u9ED8\u8BA4\u8054\u7CFB\u4EBA\u65F6\u89E6\u53D1 | \nchecked\uFF1A\u662F\u5426\u9ED8\u8BA4 | \n
\u952E\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
name | \n\u8054\u7CFB\u4EBA\u59D3\u540D | \nstring | \n
tel | \n\u8054\u7CFB\u4EBA\u624B\u673A\u53F7 | \nstring | \n
isDefault | \n\u662F\u5426\u9ED8\u8BA4 | \nboolean | undefined | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { ContactEditInfo, ContactEditProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-contact-edit-padding | \nvar(--van-padding-md) | \n- | \n
--van-contact-edit-fields-radius | \nvar(--van-radius-md) | \n- | \n
--van-contact-edit-buttons-padding | \nvar(--van-padding-xl) 0 | \n- | \n
--van-contact-edit-button-margin-bottom | \nvar(--van-padding-sm) | \n- | \n
--van-contact-edit-button-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-contact-edit-field-label-width | \n4.1em | \n- | \n
Vant uses Chinese as the default language. If you want to use other languages, please follow the instructions below.
\nVant supports multiple languages with the Locale component, and the Locale.use
method allows you to switch to different languages.
import { Locale } from 'vant';\nimport enUS from 'vant/es/locale/lang/en-US';\n\nLocale.use('en-US', enUS);\n
\nUse Locale.add
method to modify the default configs.
import { Locale } from 'vant';\n\nconst messages = {\n 'en-US': {\n vanPicker: {\n confirm: 'Close',\n },\n },\n};\n\nLocale.add(messages);\n
\nCurrent supported languages:
\nLanguage | \nFilename | \nVersion | \n
---|---|---|
Arabic | \nar-SA | \nv3.5.0 | \n
Bulgarian | \nbg-BG | \nv3.5.0 | \n
Bangla (Bangladesh) | \nbn-BD | \nv3.4.5 | \n
Danish | \nda-DK | \nv3.4.8 | \n
German | \nde-DE | \n- | \n
German (formal) | \nde-DE-formal | \n- | \n
Greek | \nel-GR | \nv3.5.0 | \n
English | \nen-US | \n- | \n
Esperanto | \neo-EO | \nv4.0.9 | \n
Spanish (Spain) | \nes-ES | \n- | \n
Farsi | \nfa-IR | \nv3.5.0 | \n
French | \nfr-FR | \n- | \n
Hebrew | \nhe-IL | \nv3.5.0 | \n
Hindi | \nhi-IN | \nv3.4.3 | \n
Indonesian | \nid-ID | \nv3.4.5 | \n
Icelandic | \nis-IS | \nv3.4.7 | \n
Italian | \nit-IT | \nv3.4.5 | \n
Japanese | \nja-JP | \n- | \n
Khmer | \nkm-KH | \nv4.1.2 | \n
Korean | \nko-KR | \nv3.4.3 | \n
Lao | \nla-LA | \nv3.4.7 | \n
Mongolian | \nmm-MN | \nv4.0.5 | \n
Norwegian | \nnb-NO | \n- | \n
Dutch | \nnl-NL | \nv4.0.5 | \n
Portuguese (Brazil) | \npt-BR | \nv3.3.3 | \n
Romanian | \nro-RO | \n- | \n
Russian | \nru-RU | \nv3.1.5 | \n
Serbian | \nsr-RS | \nv4.6.4 | \n
Swedish | \nsv-SE | \nv3.4.7 | \n
Thai | \nth-TH | \n- | \n
Turkish | \ntr-TR | \n- | \n
Ukrainian | \nuk-UA | \nv3.4.5 | \n
Vietnamese | \nvi-VN | \nv3.4.5 | \n
Chinese | \nzh-CN | \n- | \n
Traditional Chinese (HK) | \nzh-HK | \n- | \n
Traditional Chinese (TW) | \nzh-TW | \n- | \n
\n\nView all language configs Here.
\n
If you can\u2019t find the language you need, please send us a Pull Request to add the new language pack, you can refer to Add German language pack PR.
\nYou can get the current language using useCurrentLang
method.
function useCurrentLang(): Ref<string>;\n
\nimport { useCurrentLang } from 'vant';\n\nconst currentLang = useCurrentLang();\n\nconsole.log(currentLang.value); // --> 'en-US'\n
\nVant uses Chinese as the default language. If you want to use other languages, please follow the instructions below.
\nVant supports multiple languages with the Locale component, and the Locale.use
method allows you to switch to different languages.
import { Locale } from 'vant';\nimport enUS from 'vant/es/locale/lang/en-US';\n\nLocale.use('en-US', enUS);\n
\nUse Locale.add
method to modify the default configs.
import { Locale } from 'vant';\n\nconst messages = {\n 'en-US': {\n vanPicker: {\n confirm: 'Close',\n },\n },\n};\n\nLocale.add(messages);\n
\nCurrent supported languages:
\nLanguage | \nFilename | \nVersion | \n
---|---|---|
Arabic | \nar-SA | \nv3.5.0 | \n
Bulgarian | \nbg-BG | \nv3.5.0 | \n
Bangla (Bangladesh) | \nbn-BD | \nv3.4.5 | \n
Danish | \nda-DK | \nv3.4.8 | \n
German | \nde-DE | \n- | \n
German (formal) | \nde-DE-formal | \n- | \n
Greek | \nel-GR | \nv3.5.0 | \n
English | \nen-US | \n- | \n
Esperanto | \neo-EO | \nv4.0.9 | \n
Spanish (Spain) | \nes-ES | \n- | \n
Farsi | \nfa-IR | \nv3.5.0 | \n
French | \nfr-FR | \n- | \n
Hebrew | \nhe-IL | \nv3.5.0 | \n
Hindi | \nhi-IN | \nv3.4.3 | \n
Indonesian | \nid-ID | \nv3.4.5 | \n
Icelandic | \nis-IS | \nv3.4.7 | \n
Italian | \nit-IT | \nv3.4.5 | \n
Japanese | \nja-JP | \n- | \n
Khmer | \nkm-KH | \nv4.1.2 | \n
Korean | \nko-KR | \nv3.4.3 | \n
Lao | \nla-LA | \nv3.4.7 | \n
Mongolian | \nmm-MN | \nv4.0.5 | \n
Norwegian | \nnb-NO | \n- | \n
Dutch | \nnl-NL | \nv4.0.5 | \n
Portuguese (Brazil) | \npt-BR | \nv3.3.3 | \n
Romanian | \nro-RO | \n- | \n
Russian | \nru-RU | \nv3.1.5 | \n
Serbian | \nsr-RS | \nv4.6.4 | \n
Swedish | \nsv-SE | \nv3.4.7 | \n
Thai | \nth-TH | \n- | \n
Turkish | \ntr-TR | \n- | \n
Ukrainian | \nuk-UA | \nv3.4.5 | \n
Vietnamese | \nvi-VN | \nv3.4.5 | \n
Chinese | \nzh-CN | \n- | \n
Traditional Chinese (HK) | \nzh-HK | \n- | \n
Traditional Chinese (TW) | \nzh-TW | \n- | \n
\n\nView all language configs Here.
\n
If you can\u2019t find the language you need, please send us a Pull Request to add the new language pack, you can refer to Add German language pack PR.
\nYou can get the current language using useCurrentLang
method.
function useCurrentLang(): Ref<string>;\n
\nimport { useCurrentLang } from 'vant';\n\nconst currentLang = useCurrentLang();\n\nconsole.log(currentLang.value); // --> 'en-US'\n
\nA three-level linkage selection of provinces and cities, usually used in conjunction with Popup component.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Area } from 'vant';\n\nconst app = createApp();\napp.use(Area);\n
\nTo initialize Area
component, area-list
property is required.
<van-area title="Title" :area-list="areaList" />\n
\nAn object contains three properties: province_list
, city_list
and county_list
. Each property is a simple key-value object, key is a 6-bit code of the area of which first two bits stand for the province or state, middle two bits are used as city code and the last two are district code, value is the name of the area. If the code stands for an area that has sub-areas, lower bits of it will be filled with 0.
Sample data:
\nexport default {\n province_list: {\n 110000: 'Beijing',\n 330000: 'Zhejiang Province',\n },\n city_list: {\n 110100: 'Beijing City',\n 330100: 'Hangzhou',\n },\n county_list: {\n 110101: 'Dongcheng District',\n 110102: 'Xicheng District',\n // ....\n },\n};\n
\nVant officially provides a default china area data, which can be imported through @vant/area-data:
\n# with npm\nnpm i @vant/area-data\n\n# with yarn\nyarn add @vant/area-data\n\n# with pnpm\npnpm add @vant/area-data\n\n# with Bun\nbun add @vant/area-data\n
\nimport { areaList } from '@vant/area-data';\n\nexport default {\n setup() {\n return { areaList };\n },\n};\n
\nBind the currently selected area code via v-model
.
<van-area v-model="value" title="Title" :area-list="areaList" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref('330302');\n return { value };\n },\n};\n
\ncolumns-num
property is used to config number of columns to be displayed. This component has 3 columns corresponding to a 3 level picker by default. Set columns-num
with 2, you\'ll have a 2 level picker.
<van-area title="Title" :area-list="areaList" :columns-num="2" />\n
\ncolumns-placeholder
property is used to config placeholder of columns.
<van-area\n title="Title"\n :area-list="areaList"\n :columns-placeholder="['Choose', 'Choose', 'Choose']"\n/>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nthe code of selected area | \nstring | \n- | \n
title | \nToolbar title | \nstring | \n- | \n
confirm-button-text | \nText of confirm button | \nstring | \nConfirm | \n
cancel-button-text | \nText of cancel button | \nstring | \nCancel | \n
area-list | \nArea list data | \nobject | \n- | \n
columns-placeholder | \nPlaceholder of columns | \nstring[] | \n[] | \n
loading | \nWhether to show loading prompt | \nboolean | \nfalse | \n
readonly | \nWhether to be readonly | \nboolean | \nfalse | \n
option-height | \nOption height, supports px vw vh rem unit, default px | \nnumber | string | \n44 | \n
columns-num | \nLevel of picker | \nnumber | string | \n3 | \n
visible-option-num | \nCount of visible columns | \nnumber | string | \n6 | \n
swipe-duration | \nDuration of the momentum animation, unit ms | \nnumber | string | \n1000 | \n
Event | \nDescription | \nArguments | \n
---|---|---|
confirm | \nEmitted when the confirm button is clicked | \n{ selectedValues, selectedOptions, selectedIndexes } | \n
cancel | \nEmitted when the cancel button is clicked | \n{ selectedValues, selectedOptions, selectedIndexes } | \n
change | \nEmitted when current option is changed | \n{ selectedValues, selectedOptions, selectedIndexes, columnIndex } | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
toolbar 3.1.2 | \nCustom toolbar content | \n- | \n
title | \nCustom title | \n- | \n
confirm 3.1.2 | \nCustom confirm button text | \n- | \n
cancel 3.1.2 | \nCustom cancel button text | \n- | \n
columns-top | \nCustom content above columns | \n- | \n
columns-bottom | \nCustom content below columns | \n- | \n
Use ref to get Area instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
confirm | \nStop scrolling and emit confirm event | \n- | \n- | \n
getSelectedOptions | \nGet current selected options | \n- | \nPickerOption[] | \n
The component exports the following type definitions:
\nimport type { AreaProps, AreaList, AreaInstance, AreaColumnOption } from 'vant';\n
\nAreaInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { AreaInstance } from 'vant';\n\nconst areaRef = ref<AreaInstance>();\n\nareaRef.value?.confirm();\n
\nA three-level linkage selection of provinces and cities, usually used in conjunction with Popup component.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Area } from 'vant';\n\nconst app = createApp();\napp.use(Area);\n
\nTo initialize Area
component, area-list
property is required.
<van-area title="Title" :area-list="areaList" />\n
\nAn object contains three properties: province_list
, city_list
and county_list
. Each property is a simple key-value object, key is a 6-bit code of the area of which first two bits stand for the province or state, middle two bits are used as city code and the last two are district code, value is the name of the area. If the code stands for an area that has sub-areas, lower bits of it will be filled with 0.
Sample data:
\nexport default {\n province_list: {\n 110000: 'Beijing',\n 330000: 'Zhejiang Province',\n },\n city_list: {\n 110100: 'Beijing City',\n 330100: 'Hangzhou',\n },\n county_list: {\n 110101: 'Dongcheng District',\n 110102: 'Xicheng District',\n // ....\n },\n};\n
\nVant officially provides a default china area data, which can be imported through @vant/area-data:
\n# with npm\nnpm i @vant/area-data\n\n# with yarn\nyarn add @vant/area-data\n\n# with pnpm\npnpm add @vant/area-data\n\n# with Bun\nbun add @vant/area-data\n
\nimport { areaList } from '@vant/area-data';\n\nexport default {\n setup() {\n return { areaList };\n },\n};\n
\nBind the currently selected area code via v-model
.
<van-area v-model="value" title="Title" :area-list="areaList" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref('330302');\n return { value };\n },\n};\n
\ncolumns-num
property is used to config number of columns to be displayed. This component has 3 columns corresponding to a 3 level picker by default. Set columns-num
with 2, you\'ll have a 2 level picker.
<van-area title="Title" :area-list="areaList" :columns-num="2" />\n
\ncolumns-placeholder
property is used to config placeholder of columns.
<van-area\n title="Title"\n :area-list="areaList"\n :columns-placeholder="['Choose', 'Choose', 'Choose']"\n/>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nthe code of selected area | \nstring | \n- | \n
title | \nToolbar title | \nstring | \n- | \n
confirm-button-text | \nText of confirm button | \nstring | \nConfirm | \n
cancel-button-text | \nText of cancel button | \nstring | \nCancel | \n
area-list | \nArea list data | \nobject | \n- | \n
columns-placeholder | \nPlaceholder of columns | \nstring[] | \n[] | \n
loading | \nWhether to show loading prompt | \nboolean | \nfalse | \n
readonly | \nWhether to be readonly | \nboolean | \nfalse | \n
option-height | \nOption height, supports px vw vh rem unit, default px | \nnumber | string | \n44 | \n
columns-num | \nLevel of picker | \nnumber | string | \n3 | \n
visible-option-num | \nCount of visible columns | \nnumber | string | \n6 | \n
swipe-duration | \nDuration of the momentum animation, unit ms | \nnumber | string | \n1000 | \n
Event | \nDescription | \nArguments | \n
---|---|---|
confirm | \nEmitted when the confirm button is clicked | \n{ selectedValues, selectedOptions, selectedIndexes } | \n
cancel | \nEmitted when the cancel button is clicked | \n{ selectedValues, selectedOptions, selectedIndexes } | \n
change | \nEmitted when current option is changed | \n{ selectedValues, selectedOptions, selectedIndexes, columnIndex } | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
toolbar 3.1.2 | \nCustom toolbar content | \n- | \n
title | \nCustom title | \n- | \n
confirm 3.1.2 | \nCustom confirm button text | \n- | \n
cancel 3.1.2 | \nCustom cancel button text | \n- | \n
columns-top | \nCustom content above columns | \n- | \n
columns-bottom | \nCustom content below columns | \n- | \n
Use ref to get Area instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
confirm | \nStop scrolling and emit confirm event | \n- | \n- | \n
getSelectedOptions | \nGet current selected options | \n- | \nPickerOption[] | \n
The component exports the following type definitions:
\nimport type { AreaProps, AreaList, AreaInstance, AreaColumnOption } from 'vant';\n
\nAreaInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { AreaInstance } from 'vant';\n\nconst areaRef = ref<AreaInstance>();\n\nareaRef.value?.confirm();\n
\nWhen the page needs to load a large amount of content, delay loading the content outside the visible area of the page to make the page load smoother.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Lazyload } from 'vant';\n\nconst app = createApp();\napp.use(Lazyload);\n\n// with options\napp.use(Lazyload, {\n lazyComponent: true,\n});\n
\n<img v-for="img in imageList" v-lazy="img" />\n
\nexport default {\n setup() {\n return {\n imageList: [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n ],\n };\n },\n};\n
\nUse v-lazy:background-image
to set background url, and declare the height of the container.
<div v-for="img in imageList" v-lazy:background-image="img" />\n
\n// set `lazyComponent` option\napp.use(Lazyload, {\n lazyComponent: true,\n});\n
\n<lazy-component>\n <img v-for="img in imageList" v-lazy="img" />\n</lazy-component>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
loading | \nSrc of the image while loading | \nstring | \n- | \n
error | \nSrc of the image upon load fail | \nstring | \n- | \n
preLoad | \nProportion of pre-loading height | \nnumber | \n- | \n
attempt | \nAttempts count | \nnumber | \n3 | \n
listenEvents | \nEvents that you want vue listen for | \nstring[] | \nscroll ... | \n
adapter | \nDynamically modify the attribute of element | \nobject | \n- | \n
filter | \nThe image\'s listener filter | \nobject | \n- | \n
lazyComponent | \nLazyload component | \nboolean | \nfalse | \n
\n\nSee more: vue-lazyload
\n
When the page needs to load a large amount of content, delay loading the content outside the visible area of the page to make the page load smoother.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Lazyload } from 'vant';\n\nconst app = createApp();\napp.use(Lazyload);\n\n// with options\napp.use(Lazyload, {\n lazyComponent: true,\n});\n
\n<img v-for="img in imageList" v-lazy="img" />\n
\nexport default {\n setup() {\n return {\n imageList: [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n ],\n };\n },\n};\n
\nUse v-lazy:background-image
to set background url, and declare the height of the container.
<div v-for="img in imageList" v-lazy:background-image="img" />\n
\n// set `lazyComponent` option\napp.use(Lazyload, {\n lazyComponent: true,\n});\n
\n<lazy-component>\n <img v-for="img in imageList" v-lazy="img" />\n</lazy-component>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
loading | \nSrc of the image while loading | \nstring | \n- | \n
error | \nSrc of the image upon load fail | \nstring | \n- | \n
preload | \nProportion of pre-loading height | \nstring | \n- | \n
attempt | \nAttempts count | \nnumber | \n3 | \n
listenEvents | \nEvents that you want vue listen for | \nstring[] | \nscroll ... | \n
adapter | \nDynamically modify the attribute of element | \nobject | \n- | \n
filter | \nThe image\'s listener filter | \nobject | \n- | \n
lazyComponent | \nLazyload component | \nboolean | \nfalse | \n
\n\nSee more: vue-lazyload
\n
Used for redemption and selection of coupons.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { CouponCell, CouponList } from 'vant';\n\nconst app = createApp();\napp.use(CouponCell);\napp.use(CouponList);\n
\n<!-- Coupon Cell -->\n<van-coupon-cell\n :coupons="coupons"\n :chosen-coupon="chosenCoupon"\n @click="showList = true"\n/>\n<!-- Coupon List -->\n<van-popup\n v-model:show="showList"\n round\n position="bottom"\n style="height: 90%; padding-top: 4px;"\n>\n <van-coupon-list\n :coupons="coupons"\n :chosen-coupon="chosenCoupon"\n :disabled-coupons="disabledCoupons"\n @change="onChange"\n @exchange="onExchange"\n />\n</van-popup>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const coupon = {\n available: 1,\n originCondition: 0,\n reason: '',\n value: 150,\n name: 'Coupon name',\n startAt: 1489104000,\n endAt: 1514592000,\n valueDesc: '1.5',\n unitDesc: '\u5143',\n };\n\n const coupons = ref([coupon]);\n const showList = ref(false);\n const chosenCoupon = ref(-1);\n\n const onChange = (index) => {\n showList.value = false;\n chosenCoupon.value = index;\n };\n const onExchange = (code) => {\n coupons.value.push(coupon);\n };\n\n return {\n coupons,\n showList,\n onChange,\n onExchange,\n chosenCoupon,\n disabledCoupons: [coupon],\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
title | \nCell title | \nstring | \nCoupon | \n
chosen-coupon | \nIndex of chosen coupon | \nnumber | string | \n-1 | \n
coupons | \nCoupon list | \nCoupon[] | \n[] | \n
editable | \nCell editable | \nboolean | \ntrue | \n
border | \nWhether to show inner border | \nboolean | \ntrue | \n
currency | \nCurrency symbol | \nstring | \n\xa5 | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nCurrent exchange code | \nstring | \n- | \n
chosen-coupon | \nIndex of chosen coupon | \nnumber | \n-1 | \n
coupons | \nCoupon list | \nCouponInfo[] | \n[] | \n
disabled-coupons | \nDisabled coupon list | \nCouponInfo[] | \n[] | \n
enabled-title | \nTitle of coupon list | \nstring | \nAvailable | \n
disabled-title | \nTitle of disabled coupon list | \nstring | \nUnavailable | \n
exchange-button-text | \nExchange button text | \nstring | \nExchange | \n
exchange-button-loading | \nWhether to show loading in exchange button | \nboolean | \nfalse | \n
exchange-button-disabled | \nWhether to disable exchange button | \nboolean | \nfalse | \n
exchange-min-length | \nMin length to enable exchange button | \nnumber | \n1 | \n
displayed-coupon-index | \nIndex of displayed coupon | \nnumber | \n- | \n
close-button-text | \nClose button text | \nstring | \nClose | \n
input-placeholder | \nInput placeholder | \nstring | \nCoupon code | \n
currency | \nCurrency symbol | \nstring | \n\xa5 | \n
empty-image | \nPlaceholder image when list is empty | \nstring | \n- | \n
show-count | \nWhether to show coupon count in tab title | \nboolean | \ntrue | \n
Event | \nDescription | \nArguments | \n
---|---|---|
change | \nEmitted when chosen coupon changed | \nindex: index of chosen coupon | \n
exchange | \nEmitted when exchanging coupon | \ncode: exchange code | \n
Name | \nDescription | \n
---|---|
list-footer | \nCoupon list bottom | \n
disabled-list-footer | \nUnavailable coupons list bottom | \n
Key | \nDescription | \nType | \n
---|---|---|
id | \nId | \nstring | \n
name | \nName | \nstring | \n
condition | \nCondition | \nstring | \n
startAt | \nStart time (Timestamp, unit second) | \nnumber | \n
endAt | \nEnd time (Timestamp, unit second) | \nnumber | \n
description | \nDescription | \nstring | \n
reason | \nUnavailable reason | \nstring | \n
value | \nValue | \nnumber | \n
valueDesc | \nValue Text | \nstring | \n
unitDesc | \nUnit Text | \nstring | \n
The component exports the following type definitions:
\nimport type { CouponCellProps, CouponListProps, CouponInfo } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-coupon-margin | \n0 var(--van-padding-sm) var(--van-padding-sm) | \n- | \n
--van-coupon-content-height | \n84px | \n- | \n
--van-coupon-content-padding | \n14px 0 | \n- | \n
--van-coupon-content-text-color | \nvar(--van-text-color) | \n- | \n
--van-coupon-background | \nvar(--van-background-2) | \n- | \n
--van-coupon-active-background | \nvar(--van-active-color) | \n- | \n
--van-coupon-radius | \nvar(--van-radius-lg) | \n- | \n
--van-coupon-shadow | \n0 0 4px rgba(0, 0, 0, 0.1) | \n- | \n
--van-coupon-head-width | \n96px | \n- | \n
--van-coupon-amount-color | \nvar(--van-danger-color) | \n- | \n
--van-coupon-amount-font-size | \n30px | \n- | \n
--van-coupon-currency-font-size | \n40% | \n- | \n
--van-coupon-name-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-coupon-disabled-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-coupon-description-padding | \nvar(--van-padding-xs) var(--van-padding-md) | \n- | \n
--van-coupon-description-border-color | \nvar(--van-border-color) | \n- | \n
--van-coupon-checkbox-color | \nvar(--van-danger-color) | \n- | \n
--van-coupon-list-background | \nvar(--van-background) | \n- | \n
--van-coupon-list-field-padding | \n5px 0 5px var(--van-padding-md) | \n- | \n
--van-coupon-list-exchange-button-height | \n32px | \n- | \n
--van-coupon-list-close-button-height | \n40px | \n- | \n
--van-coupon-list-empty-tip-color | \nvar(--van-text-color-2) | \n- | \n
--van-coupon-list-empty-tip-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-coupon-list-empty-tip-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-coupon-cell-selected-text-color | \nvar(--van-text-color) | \n- | \n
Used for redemption and selection of coupons.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { CouponCell, CouponList } from 'vant';\n\nconst app = createApp();\napp.use(CouponCell);\napp.use(CouponList);\n
\n<!-- Coupon Cell -->\n<van-coupon-cell\n :coupons="coupons"\n :chosen-coupon="chosenCoupon"\n @click="showList = true"\n/>\n<!-- Coupon List -->\n<van-popup\n v-model:show="showList"\n round\n position="bottom"\n style="height: 90%; padding-top: 4px;"\n>\n <van-coupon-list\n :coupons="coupons"\n :chosen-coupon="chosenCoupon"\n :disabled-coupons="disabledCoupons"\n @change="onChange"\n @exchange="onExchange"\n />\n</van-popup>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const coupon = {\n available: 1,\n originCondition: 0,\n reason: '',\n value: 150,\n name: 'Coupon name',\n startAt: 1489104000,\n endAt: 1514592000,\n valueDesc: '1.5',\n unitDesc: '\u5143',\n };\n\n const coupons = ref([coupon]);\n const showList = ref(false);\n const chosenCoupon = ref(-1);\n\n const onChange = (index) => {\n showList.value = false;\n chosenCoupon.value = index;\n };\n const onExchange = (code) => {\n coupons.value.push(coupon);\n };\n\n return {\n coupons,\n showList,\n onChange,\n onExchange,\n chosenCoupon,\n disabledCoupons: [coupon],\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
title | \nCell title | \nstring | \nCoupon | \n
chosen-coupon | \nIndex of chosen coupon | \nnumber | string | \n-1 | \n
coupons | \nCoupon list | \nCoupon[] | \n[] | \n
editable | \nCell editable | \nboolean | \ntrue | \n
border | \nWhether to show inner border | \nboolean | \ntrue | \n
currency | \nCurrency symbol | \nstring | \n\xa5 | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nCurrent exchange code | \nstring | \n- | \n
chosen-coupon | \nIndex of chosen coupon | \nnumber | \n-1 | \n
coupons | \nCoupon list | \nCouponInfo[] | \n[] | \n
disabled-coupons | \nDisabled coupon list | \nCouponInfo[] | \n[] | \n
enabled-title | \nTitle of coupon list | \nstring | \nAvailable | \n
disabled-title | \nTitle of disabled coupon list | \nstring | \nUnavailable | \n
exchange-button-text | \nExchange button text | \nstring | \nExchange | \n
exchange-button-loading | \nWhether to show loading in exchange button | \nboolean | \nfalse | \n
exchange-button-disabled | \nWhether to disable exchange button | \nboolean | \nfalse | \n
exchange-min-length | \nMin length to enable exchange button | \nnumber | \n1 | \n
displayed-coupon-index | \nIndex of displayed coupon | \nnumber | \n- | \n
close-button-text | \nClose button text | \nstring | \nClose | \n
input-placeholder | \nInput placeholder | \nstring | \nCoupon code | \n
currency | \nCurrency symbol | \nstring | \n\xa5 | \n
empty-image | \nPlaceholder image when list is empty | \nstring | \n- | \n
show-count | \nWhether to show coupon count in tab title | \nboolean | \ntrue | \n
Event | \nDescription | \nArguments | \n
---|---|---|
change | \nEmitted when chosen coupon changed | \nindex: index of chosen coupon | \n
exchange | \nEmitted when exchanging coupon | \ncode: exchange code | \n
Name | \nDescription | \n
---|---|
list-footer | \nCoupon list bottom | \n
disabled-list-footer | \nUnavailable coupons list bottom | \n
Key | \nDescription | \nType | \n
---|---|---|
id | \nId | \nstring | \n
name | \nName | \nstring | \n
condition | \nCondition | \nstring | \n
startAt | \nStart time (Timestamp, unit second) | \nnumber | \n
endAt | \nEnd time (Timestamp, unit second) | \nnumber | \n
description | \nDescription | \nstring | \n
reason | \nUnavailable reason | \nstring | \n
value | \nValue | \nnumber | \n
valueDesc | \nValue Text | \nstring | \n
unitDesc | \nUnit Text | \nstring | \n
The component exports the following type definitions:
\nimport type { CouponCellProps, CouponListProps, CouponInfo } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-coupon-margin | \n0 var(--van-padding-sm) var(--van-padding-sm) | \n- | \n
--van-coupon-content-height | \n84px | \n- | \n
--van-coupon-content-padding | \n14px 0 | \n- | \n
--van-coupon-content-text-color | \nvar(--van-text-color) | \n- | \n
--van-coupon-background | \nvar(--van-background-2) | \n- | \n
--van-coupon-active-background | \nvar(--van-active-color) | \n- | \n
--van-coupon-radius | \nvar(--van-radius-lg) | \n- | \n
--van-coupon-shadow | \n0 0 4px rgba(0, 0, 0, 0.1) | \n- | \n
--van-coupon-head-width | \n96px | \n- | \n
--van-coupon-amount-color | \nvar(--van-danger-color) | \n- | \n
--van-coupon-amount-font-size | \n30px | \n- | \n
--van-coupon-currency-font-size | \n40% | \n- | \n
--van-coupon-name-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-coupon-disabled-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-coupon-description-padding | \nvar(--van-padding-xs) var(--van-padding-md) | \n- | \n
--van-coupon-description-border-color | \nvar(--van-border-color) | \n- | \n
--van-coupon-checkbox-color | \nvar(--van-danger-color) | \n- | \n
--van-coupon-list-background | \nvar(--van-background) | \n- | \n
--van-coupon-list-field-padding | \n5px 0 5px var(--van-padding-md) | \n- | \n
--van-coupon-list-exchange-button-height | \n32px | \n- | \n
--van-coupon-list-close-button-height | \n40px | \n- | \n
--van-coupon-list-empty-tip-color | \nvar(--van-text-color-2) | \n- | \n
--van-coupon-list-empty-tip-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-coupon-list-empty-tip-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-coupon-cell-selected-text-color | \nvar(--van-text-color) | \n- | \n
The sticky component is consistent with the effect achieved by the position: sticky
property in CSS, in that when the component is within screen range, it will follow the normal layout arrangement, and when the component rolls out of screen range, it will always be fixed at the top of the screen.
Register component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Sticky } from 'vant';\n\nconst app = createApp();\napp.use(Sticky);\n
\n<van-sticky>\n <van-button type="primary">Basic Usage</van-button>\n</van-sticky>\n
\n<van-sticky :offset-top="50">\n <van-button type="primary">Offset Top</van-button>\n</van-sticky>\n
\n<div ref="container" style="height: 150px;">\n <van-sticky :container="container">\n <van-button type="warning">Set Container</van-button>\n </van-sticky>\n</div>\n
\nexport default {\n setup() {\n const container = ref(null);\n return { container };\n },\n};\n
\n<van-sticky :offset-bottom="50" position="bottom">\n <van-button type="primary">Offset Bottom</van-button>\n</van-sticky>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
position | \nOffset position, can be set to bottom | \nstring | \ntop | \n
offset-top | \nOffset top, supports px vw vh rem unit, default px | \nnumber | string | \n0 | \n
offset-bottom | \nOffset bottom, supports px vw vh rem unit, default px | \nnumber | string | \n0 | \n
z-index | \nz-index when sticky | \nnumber | string | \n99 | \n
container | \nContainer DOM | \nElement | \n- | \n
Event | \nDescription | \nArguments | \n
---|---|---|
change | \nEmitted when sticky status changed | \nisFixed: boolean | \n
scroll | \nEmitted when scrolling | \n{ scrollTop: number, isFixed: boolean } | \n
The component exports the following type definitions:
\nimport type { StickyProps, StickyPosition } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-sticky-z-index | \n99 | \n- | \n
The sticky component is consistent with the effect achieved by the position: sticky
property in CSS, in that when the component is within screen range, it will follow the normal layout arrangement, and when the component rolls out of screen range, it will always be fixed at the top of the screen.
Register component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Sticky } from 'vant';\n\nconst app = createApp();\napp.use(Sticky);\n
\n<van-sticky>\n <van-button type="primary">Basic Usage</van-button>\n</van-sticky>\n
\n<van-sticky :offset-top="50">\n <van-button type="primary">Offset Top</van-button>\n</van-sticky>\n
\n<div ref="container" style="height: 150px;">\n <van-sticky :container="container">\n <van-button type="warning">Set Container</van-button>\n </van-sticky>\n</div>\n
\nexport default {\n setup() {\n const container = ref(null);\n return { container };\n },\n};\n
\n<van-sticky :offset-bottom="50" position="bottom">\n <van-button type="primary">Offset Bottom</van-button>\n</van-sticky>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
position | \nOffset position, can be set to bottom | \nstring | \ntop | \n
offset-top | \nOffset top, supports px vw vh rem unit, default px | \nnumber | string | \n0 | \n
offset-bottom | \nOffset bottom, supports px vw vh rem unit, default px | \nnumber | string | \n0 | \n
z-index | \nz-index when sticky | \nnumber | string | \n99 | \n
container | \nContainer DOM | \nElement | \n- | \n
Event | \nDescription | \nArguments | \n
---|---|---|
change | \nEmitted when sticky status changed | \nisFixed: boolean | \n
scroll | \nEmitted when scrolling | \n{ scrollTop: number, isFixed: boolean } | \n
The component exports the following type definitions:
\nimport type { StickyProps, StickyPosition } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-sticky-z-index | \n99 | \n- | \n
\u865A\u62DF\u6570\u5B57\u952E\u76D8\uFF0C\u53EF\u4EE5\u914D\u5408\u5BC6\u7801\u8F93\u5165\u6846\u7EC4\u4EF6\u6216\u81EA\u5B9A\u4E49\u7684\u8F93\u5165\u6846\u7EC4\u4EF6\u4F7F\u7528\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { NumberKeyboard } from 'vant';\n\nconst app = createApp();\napp.use(NumberKeyboard);\n
\n\u6570\u5B57\u952E\u76D8\u63D0\u4F9B\u4E86 input
\u3001delete
\u3001blur
\u4E8B\u4EF6\uFF0C\u5206\u522B\u5BF9\u5E94\u8F93\u5165\u5185\u5BB9\u3001\u5220\u9664\u5185\u5BB9\u548C\u5931\u53BB\u7126\u70B9\u7684\u52A8\u4F5C\u3002
<van-cell @touchstart.stop="show = true">\u5F39\u51FA\u9ED8\u8BA4\u952E\u76D8</van-cell>\n<van-number-keyboard\n :show="show"\n @blur="show = false"\n @input="onInput"\n @delete="onDelete"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const show = ref(true);\n const onInput = (value) => showToast(value);\n const onDelete = () => showToast('\u5220\u9664');\n\n return {\n show,\n onInput,\n onDelete,\n };\n },\n};\n
\n\n\n\u70B9\u51FB\u952E\u76D8\u4EE5\u5916\u7684\u533A\u57DF\u65F6\uFF0C\u952E\u76D8\u4F1A\u81EA\u52A8\u6536\u8D77\uFF0C\u901A\u8FC7\u963B\u6B62\u5143\u7D20\u4E0A\u7684 touchstart \u4E8B\u4EF6\u5192\u6CE1\u53EF\u4EE5\u907F\u514D\u952E\u76D8\u6536\u8D77\u3002
\n
\u5C06 theme \u5C5E\u6027\u8BBE\u7F6E\u4E3A custom
\u6765\u5C55\u793A\u952E\u76D8\u7684\u53F3\u4FA7\u680F\uFF0C\u5E38\u7528\u4E8E\u8F93\u5165\u91D1\u989D\u7684\u573A\u666F\u3002
<van-number-keyboard\n :show="show"\n theme="custom"\n extra-key="."\n close-button-text="\u5B8C\u6210"\n @blur="show = false"\n @input="onInput"\n @delete="onDelete"\n/>\n
\n\u901A\u8FC7 extra-key
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u5DE6\u4E0B\u89D2\u6309\u952E\u5185\u5BB9\uFF0C\u6BD4\u5982\u9700\u8981\u8F93\u5165\u8EAB\u4EFD\u8BC1\u53F7\u65F6\uFF0C\u53EF\u4EE5\u5C06 extra-key
\u8BBE\u7F6E\u4E3A X
\u3002
<van-cell plain type="primary" @touchstart.stop="show = true">\n \u5F39\u51FA\u8EAB\u4EFD\u8BC1\u53F7\u952E\u76D8\n</van-cell>\n<van-number-keyboard\n :show="show"\n extra-key="X"\n close-button-text="\u5B8C\u6210"\n @blur="show = false"\n @input="onInput"\n @delete="onDelete"\n/>\n
\n\u901A\u8FC7 title
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u952E\u76D8\u6807\u9898\u3002
<van-cell plain type="primary" @touchstart.stop="show = true">\n \u5F39\u51FA\u5E26\u6807\u9898\u7684\u952E\u76D8\n</van-cell>\n<van-number-keyboard\n :show="show"\n title="\u952E\u76D8\u6807\u9898"\n extra-key="."\n close-button-text="\u5B8C\u6210"\n @blur="show = false"\n @input="onInput"\n @delete="onDelete"\n/>\n
\n\u5F53 theme \u4E3A custom
\u65F6\uFF0C\u652F\u6301\u4EE5\u6570\u7EC4\u7684\u5F62\u5F0F\u914D\u7F6E\u4E24\u4E2A extra-key
\u3002
<van-cell plain type="primary" @touchstart.stop="show = true">\n \u5F39\u51FA\u914D\u7F6E\u591A\u4E2A\u6309\u952E\u7684\u952E\u76D8\n</van-cell>\n<van-number-keyboard\n :show="show"\n theme="custom"\n :extra-key="['00', '.']"\n close-button-text="\u5B8C\u6210"\n @blur="show = false"\n @input="onInput"\n @delete="onDelete"\n/>\n
\n\u901A\u8FC7 random-key-order
\u5C5E\u6027\u53EF\u4EE5\u968F\u673A\u6392\u5E8F\u6570\u5B57\u952E\u76D8\uFF0C\u5E38\u7528\u4E8E\u5B89\u5168\u7B49\u7EA7\u8F83\u9AD8\u7684\u573A\u666F\u3002
<van-cell @touchstart.stop="show = true"> \u5F39\u51FA\u914D\u7F6E\u968F\u673A\u6570\u5B57\u7684\u952E\u76D8 </van-cell>\n<van-number-keyboard\n :show="show"\n random-key-order\n @blur="show = false"\n @input="onInput"\n @delete="onDelete"\n/>\n
\n\u53EF\u4EE5\u901A\u8FC7 v-model
\u7ED1\u5B9A\u952E\u76D8\u5F53\u524D\u8F93\u5165\u503C\uFF0C\u5E76\u901A\u8FC7 maxlength
\u5C5E\u6027\u6765\u9650\u5236\u8F93\u5165\u957F\u5EA6\u3002
<van-field v-model="value" readonly clickable @touchstart.stop="show = true" />\n<van-number-keyboard\n v-model="value"\n :show="show"\n :maxlength="6"\n @blur="show = false"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(true);\n const value = ref('');\n return {\n show,\n value,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u8F93\u5165\u503C | \nstring | \n- | \n
show | \n\u662F\u5426\u663E\u793A\u952E\u76D8 | \nboolean | \n- | \n
title | \n\u952E\u76D8\u6807\u9898 | \nstring | \n- | \n
theme | \n\u6837\u5F0F\u98CE\u683C\uFF0C\u53EF\u9009\u503C\u4E3A custom | \nstring | \ndefault | \n
maxlength | \n\u8F93\u5165\u503C\u6700\u5927\u957F\u5EA6 | \nnumber | string | \nInfinity | \n
transition | \n\u662F\u5426\u5F00\u542F\u8FC7\u573A\u52A8\u753B | \nboolean | \ntrue | \n
z-index | \n\u952E\u76D8 z-index \u5C42\u7EA7 | \nnumber | string | \n100 | \n
extra-key | \n\u5E95\u90E8\u989D\u5916\u6309\u952E\u7684\u5185\u5BB9 | \nstring | string[] | \n\'\' | \n
close-button-text | \n\u5173\u95ED\u6309\u94AE\u6587\u5B57\uFF0C\u7A7A\u5219\u4E0D\u5C55\u793A | \nstring | \n- | \n
delete-button-text | \n\u5220\u9664\u6309\u94AE\u6587\u5B57\uFF0C\u7A7A\u5219\u5C55\u793A\u5220\u9664\u56FE\u6807 | \nstring | \n- | \n
close-button-loading | \n\u662F\u5426\u5C06\u5173\u95ED\u6309\u94AE\u8BBE\u7F6E\u4E3A\u52A0\u8F7D\u4E2D\u72B6\u6001\uFF0C\u4EC5\u5728 theme="custom" \u65F6\u6709\u6548 | \nboolean | \nfalse | \n
show-delete-key | \n\u662F\u5426\u5C55\u793A\u5220\u9664\u56FE\u6807 | \nboolean | \ntrue | \n
blur-on-close | \n\u662F\u5426\u5728\u70B9\u51FB\u5173\u95ED\u6309\u94AE\u65F6\u89E6\u53D1 blur \u4E8B\u4EF6 | \nboolean | \ntrue | \n
hide-on-click-outside | \n\u662F\u5426\u5728\u70B9\u51FB\u5916\u90E8\u65F6\u6536\u8D77\u952E\u76D8 | \nboolean | \ntrue | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \n- | \n
safe-area-inset-bottom | \n\u662F\u5426\u5F00\u542F\u5E95\u90E8\u5B89\u5168\u533A\u9002\u914D | \nboolean | \ntrue | \n
random-key-order | \n\u662F\u5426\u5C06\u901A\u8FC7\u968F\u673A\u987A\u5E8F\u5C55\u793A\u6309\u952E | \nboolean | \nfalse | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
input | \n\u70B9\u51FB\u6309\u952E\u65F6\u89E6\u53D1 | \nkey: string | \n
delete | \n\u70B9\u51FB\u5220\u9664\u952E\u65F6\u89E6\u53D1 | \n- | \n
close | \n\u70B9\u51FB\u5173\u95ED\u6309\u94AE\u65F6\u89E6\u53D1 | \n- | \n
blur | \n\u70B9\u51FB\u5173\u95ED\u6309\u94AE\u6216\u975E\u952E\u76D8\u533A\u57DF\u65F6\u89E6\u53D1 | \n- | \n
show | \n\u952E\u76D8\u5B8C\u5168\u5F39\u51FA\u65F6\u89E6\u53D1 | \n- | \n
hide | \n\u952E\u76D8\u5B8C\u5168\u6536\u8D77\u65F6\u89E6\u53D1 | \n- | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
delete | \n\u81EA\u5B9A\u4E49\u5220\u9664\u6309\u952E\u5185\u5BB9 | \n
extra-key | \n\u81EA\u5B9A\u4E49\u5DE6\u4E0B\u89D2\u6309\u952E\u5185\u5BB9 | \n
title-left | \n\u81EA\u5B9A\u4E49\u6807\u9898\u680F\u5DE6\u4FA7\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { NumberKeyboardProps, NumberKeyboardTheme } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-number-keyboard-background | \nvar(--van-gray-2) | \n- | \n
--van-number-keyboard-key-height | \n48px | \n- | \n
--van-number-keyboard-key-font-size | \n28px | \n- | \n
--van-number-keyboard-key-active-color | \nvar(--van-gray-3) | \n- | \n
--van-number-keyboard-key-background | \nvar(--van-white) | \n- | \n
--van-number-keyboard-delete-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-number-keyboard-title-color | \nvar(--van-gray-7) | \n- | \n
--van-number-keyboard-title-height | \n34px | \n- | \n
--van-number-keyboard-title-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-number-keyboard-close-padding | \n0 var(--van-padding-md) | \n- | \n
--van-number-keyboard-close-color | \nvar(--van-primary-color) | \n- | \n
--van-number-keyboard-close-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-number-keyboard-button-text-color | \nvar(--van-white) | \n- | \n
--van-number-keyboard-button-background | \nvar(--van-primary-color) | \n- | \n
--van-number-keyboard-z-index | \n100 | \n- | \n
\u53C2\u89C1\u684C\u9762\u7AEF\u9002\u914D\u3002
\n\u865A\u62DF\u6570\u5B57\u952E\u76D8\uFF0C\u53EF\u4EE5\u914D\u5408\u5BC6\u7801\u8F93\u5165\u6846\u7EC4\u4EF6\u6216\u81EA\u5B9A\u4E49\u7684\u8F93\u5165\u6846\u7EC4\u4EF6\u4F7F\u7528\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { NumberKeyboard } from 'vant';\n\nconst app = createApp();\napp.use(NumberKeyboard);\n
\n\u6570\u5B57\u952E\u76D8\u63D0\u4F9B\u4E86 input
\u3001delete
\u3001blur
\u4E8B\u4EF6\uFF0C\u5206\u522B\u5BF9\u5E94\u8F93\u5165\u5185\u5BB9\u3001\u5220\u9664\u5185\u5BB9\u548C\u5931\u53BB\u7126\u70B9\u7684\u52A8\u4F5C\u3002
<van-cell @touchstart.stop="show = true">\u5F39\u51FA\u9ED8\u8BA4\u952E\u76D8</van-cell>\n<van-number-keyboard\n :show="show"\n @blur="show = false"\n @input="onInput"\n @delete="onDelete"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const show = ref(true);\n const onInput = (value) => showToast(value);\n const onDelete = () => showToast('\u5220\u9664');\n\n return {\n show,\n onInput,\n onDelete,\n };\n },\n};\n
\n\n\n\u70B9\u51FB\u952E\u76D8\u4EE5\u5916\u7684\u533A\u57DF\u65F6\uFF0C\u952E\u76D8\u4F1A\u81EA\u52A8\u6536\u8D77\uFF0C\u901A\u8FC7\u963B\u6B62\u5143\u7D20\u4E0A\u7684 touchstart \u4E8B\u4EF6\u5192\u6CE1\u53EF\u4EE5\u907F\u514D\u952E\u76D8\u6536\u8D77\u3002
\n
\u5C06 theme \u5C5E\u6027\u8BBE\u7F6E\u4E3A custom
\u6765\u5C55\u793A\u952E\u76D8\u7684\u53F3\u4FA7\u680F\uFF0C\u5E38\u7528\u4E8E\u8F93\u5165\u91D1\u989D\u7684\u573A\u666F\u3002
<van-number-keyboard\n :show="show"\n theme="custom"\n extra-key="."\n close-button-text="\u5B8C\u6210"\n @blur="show = false"\n @input="onInput"\n @delete="onDelete"\n/>\n
\n\u901A\u8FC7 extra-key
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u5DE6\u4E0B\u89D2\u6309\u952E\u5185\u5BB9\uFF0C\u6BD4\u5982\u9700\u8981\u8F93\u5165\u8EAB\u4EFD\u8BC1\u53F7\u65F6\uFF0C\u53EF\u4EE5\u5C06 extra-key
\u8BBE\u7F6E\u4E3A X
\u3002
<van-cell plain type="primary" @touchstart.stop="show = true">\n \u5F39\u51FA\u8EAB\u4EFD\u8BC1\u53F7\u952E\u76D8\n</van-cell>\n<van-number-keyboard\n :show="show"\n extra-key="X"\n close-button-text="\u5B8C\u6210"\n @blur="show = false"\n @input="onInput"\n @delete="onDelete"\n/>\n
\n\u901A\u8FC7 title
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u952E\u76D8\u6807\u9898\u3002
<van-cell plain type="primary" @touchstart.stop="show = true">\n \u5F39\u51FA\u5E26\u6807\u9898\u7684\u952E\u76D8\n</van-cell>\n<van-number-keyboard\n :show="show"\n title="\u952E\u76D8\u6807\u9898"\n extra-key="."\n close-button-text="\u5B8C\u6210"\n @blur="show = false"\n @input="onInput"\n @delete="onDelete"\n/>\n
\n\u5F53 theme \u4E3A custom
\u65F6\uFF0C\u652F\u6301\u4EE5\u6570\u7EC4\u7684\u5F62\u5F0F\u914D\u7F6E\u4E24\u4E2A extra-key
\u3002
<van-cell plain type="primary" @touchstart.stop="show = true">\n \u5F39\u51FA\u914D\u7F6E\u591A\u4E2A\u6309\u952E\u7684\u952E\u76D8\n</van-cell>\n<van-number-keyboard\n :show="show"\n theme="custom"\n :extra-key="['00', '.']"\n close-button-text="\u5B8C\u6210"\n @blur="show = false"\n @input="onInput"\n @delete="onDelete"\n/>\n
\n\u901A\u8FC7 random-key-order
\u5C5E\u6027\u53EF\u4EE5\u968F\u673A\u6392\u5E8F\u6570\u5B57\u952E\u76D8\uFF0C\u5E38\u7528\u4E8E\u5B89\u5168\u7B49\u7EA7\u8F83\u9AD8\u7684\u573A\u666F\u3002
<van-cell @touchstart.stop="show = true"> \u5F39\u51FA\u914D\u7F6E\u968F\u673A\u6570\u5B57\u7684\u952E\u76D8 </van-cell>\n<van-number-keyboard\n :show="show"\n random-key-order\n @blur="show = false"\n @input="onInput"\n @delete="onDelete"\n/>\n
\n\u53EF\u4EE5\u901A\u8FC7 v-model
\u7ED1\u5B9A\u952E\u76D8\u5F53\u524D\u8F93\u5165\u503C\uFF0C\u5E76\u901A\u8FC7 maxlength
\u5C5E\u6027\u6765\u9650\u5236\u8F93\u5165\u957F\u5EA6\u3002
<van-field v-model="value" readonly clickable @touchstart.stop="show = true" />\n<van-number-keyboard\n v-model="value"\n :show="show"\n :maxlength="6"\n @blur="show = false"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(true);\n const value = ref('');\n return {\n show,\n value,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u8F93\u5165\u503C | \nstring | \n- | \n
show | \n\u662F\u5426\u663E\u793A\u952E\u76D8 | \nboolean | \n- | \n
title | \n\u952E\u76D8\u6807\u9898 | \nstring | \n- | \n
theme | \n\u6837\u5F0F\u98CE\u683C\uFF0C\u53EF\u9009\u503C\u4E3A custom | \nstring | \ndefault | \n
maxlength | \n\u8F93\u5165\u503C\u6700\u5927\u957F\u5EA6 | \nnumber | string | \nInfinity | \n
transition | \n\u662F\u5426\u5F00\u542F\u8FC7\u573A\u52A8\u753B | \nboolean | \ntrue | \n
z-index | \n\u952E\u76D8 z-index \u5C42\u7EA7 | \nnumber | string | \n100 | \n
extra-key | \n\u5E95\u90E8\u989D\u5916\u6309\u952E\u7684\u5185\u5BB9 | \nstring | string[] | \n\'\' | \n
close-button-text | \n\u5173\u95ED\u6309\u94AE\u6587\u5B57\uFF0C\u7A7A\u5219\u4E0D\u5C55\u793A | \nstring | \n- | \n
delete-button-text | \n\u5220\u9664\u6309\u94AE\u6587\u5B57\uFF0C\u7A7A\u5219\u5C55\u793A\u5220\u9664\u56FE\u6807 | \nstring | \n- | \n
close-button-loading | \n\u662F\u5426\u5C06\u5173\u95ED\u6309\u94AE\u8BBE\u7F6E\u4E3A\u52A0\u8F7D\u4E2D\u72B6\u6001\uFF0C\u4EC5\u5728 theme="custom" \u65F6\u6709\u6548 | \nboolean | \nfalse | \n
show-delete-key | \n\u662F\u5426\u5C55\u793A\u5220\u9664\u56FE\u6807 | \nboolean | \ntrue | \n
blur-on-close | \n\u662F\u5426\u5728\u70B9\u51FB\u5173\u95ED\u6309\u94AE\u65F6\u89E6\u53D1 blur \u4E8B\u4EF6 | \nboolean | \ntrue | \n
hide-on-click-outside | \n\u662F\u5426\u5728\u70B9\u51FB\u5916\u90E8\u65F6\u6536\u8D77\u952E\u76D8 | \nboolean | \ntrue | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \n- | \n
safe-area-inset-bottom | \n\u662F\u5426\u5F00\u542F\u5E95\u90E8\u5B89\u5168\u533A\u9002\u914D | \nboolean | \ntrue | \n
random-key-order | \n\u662F\u5426\u5C06\u901A\u8FC7\u968F\u673A\u987A\u5E8F\u5C55\u793A\u6309\u952E | \nboolean | \nfalse | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
input | \n\u70B9\u51FB\u6309\u952E\u65F6\u89E6\u53D1 | \nkey: string | \n
delete | \n\u70B9\u51FB\u5220\u9664\u952E\u65F6\u89E6\u53D1 | \n- | \n
close | \n\u70B9\u51FB\u5173\u95ED\u6309\u94AE\u65F6\u89E6\u53D1 | \n- | \n
blur | \n\u70B9\u51FB\u5173\u95ED\u6309\u94AE\u6216\u975E\u952E\u76D8\u533A\u57DF\u65F6\u89E6\u53D1 | \n- | \n
show | \n\u952E\u76D8\u5B8C\u5168\u5F39\u51FA\u65F6\u89E6\u53D1 | \n- | \n
hide | \n\u952E\u76D8\u5B8C\u5168\u6536\u8D77\u65F6\u89E6\u53D1 | \n- | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
delete | \n\u81EA\u5B9A\u4E49\u5220\u9664\u6309\u952E\u5185\u5BB9 | \n
extra-key | \n\u81EA\u5B9A\u4E49\u5DE6\u4E0B\u89D2\u6309\u952E\u5185\u5BB9 | \n
title-left | \n\u81EA\u5B9A\u4E49\u6807\u9898\u680F\u5DE6\u4FA7\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { NumberKeyboardProps, NumberKeyboardTheme } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-number-keyboard-background | \nvar(--van-gray-2) | \n- | \n
--van-number-keyboard-key-height | \n48px | \n- | \n
--van-number-keyboard-key-font-size | \n28px | \n- | \n
--van-number-keyboard-key-active-color | \nvar(--van-gray-3) | \n- | \n
--van-number-keyboard-key-background | \nvar(--van-white) | \n- | \n
--van-number-keyboard-delete-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-number-keyboard-title-color | \nvar(--van-gray-7) | \n- | \n
--van-number-keyboard-title-height | \n34px | \n- | \n
--van-number-keyboard-title-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-number-keyboard-close-padding | \n0 var(--van-padding-md) | \n- | \n
--van-number-keyboard-close-color | \nvar(--van-primary-color) | \n- | \n
--van-number-keyboard-close-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-number-keyboard-button-text-color | \nvar(--van-white) | \n- | \n
--van-number-keyboard-button-background | \nvar(--van-primary-color) | \n- | \n
--van-number-keyboard-z-index | \n100 | \n- | \n
\u53C2\u89C1\u684C\u9762\u7AEF\u9002\u914D\u3002
\nThe stepper component consists of an increase button, a decrease button and an input box, which are used to input and adjust numbers within a certain range.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Stepper } from 'vant';\n\nconst app = createApp();\napp.use(Stepper);\n
\n<van-stepper v-model="value" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(1);\n return { value };\n },\n};\n
\n<van-stepper v-model="value" step="2" />\n
\n<van-stepper v-model="value" min="5" max="8" />\n
\n<van-stepper v-model="value" integer />\n
\n<van-stepper v-model="value" disabled />\n
\n<van-stepper v-model="value" disable-input />\n
\n<van-stepper v-model="value" step="0.2" :decimal-length="1" />\n
\n<van-stepper v-model="value" input-width="40px" button-size="32px" />\n
\n<van-stepper v-model="value" :before-change="beforeChange" />\n
\nimport { ref } from 'vue';\nimport { closeToast, showLoadingToast } from 'vant';\n\nexport default {\n setup() {\n const value = ref(1);\n\n const beforeChange = (value) => {\n showLoadingToast({ forbidClick: true });\n\n return new Promise((resolve) => {\n setTimeout(() => {\n closeToast();\n // resolve 'true' or 'false'\n resolve(true);\n }, 500);\n });\n };\n\n return {\n value,\n beforeChange,\n };\n },\n};\n
\n<van-stepper v-model="value" theme="round" button-size="22" disable-input />\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nCurrent value | \nnumber | string | \n- | \n
min | \nMin value | \nnumber | string | \n1 | \n
max | \nMax value | \nnumber | string | \n- | \n
auto-fixed | \nWhether to auto fix value that is out of range, set to false and value that is out of range won\u2019t be auto fixed | \nboolean | \ntrue | \n
default-value | \nDefault value, valid when v-model is empty | \nnumber | string | \n1 | \n
step | \nValue change step | \nnumber | string | \n1 | \n
name | \nStepper name, usually a unique string or number | \nnumber | string | \n- | \n
input-width | \nInput width | \nnumber | string | \n32px | \n
button-size | \nButton size | \nnumber | string | \n28px | \n
decimal-length | \nDecimal length | \nnumber | string | \n- | \n
theme | \nTheme, can be set to round | \nstring | \n- | \n
placeholder | \nInput placeholder | \nstring | \n- | \n
integer | \nWhether to allow only integers | \nboolean | \nfalse | \n
disabled | \nWhether to disable value change | \nboolean | \nfalse | \n
disable-plus | \nWhether to disable plus button | \nboolean | \nfalse | \n
disable-minus | \nWhether to disable minus button | \nboolean | \nfalse | \n
disable-input | \nWhether to disable input | \nboolean | \nfalse | \n
before-change | \nCallback function before changing, return false to prevent change, support return Promise | \n(value: number | string) => boolean | Promise<boolean> | \nfalse | \n
show-plus | \nWhether to show plus button | \nboolean | \ntrue | \n
show-minus | \nWhether to show minus button | \nboolean | \ntrue | \n
show-input | \nWhether to show input | \nboolean | \ntrue | \n
long-press | \nWhether to enable the long press gesture, when enabled you can long press the increase and decrease buttons | \nboolean | \ntrue | \n
allow-empty | \nWhether to allow the input value to be empty, set to true to allow an empty string to be passed in | \nboolean | \nfalse | \n
Event | \nDescription | \nArguments | \n
---|---|---|
change | \nEmitted when value changed | \nvalue: string, detail: { name: string } | \n
overlimit | \nEmitted when a disabled button is clicked | \n- | \n
plus | \nEmitted when the plus button is clicked | \n- | \n
minus | \nEmitted when the minus button is clicked | \n- | \n
focus | \nEmitted when the input is focused | \nevent: Event | \n
blur | \nEmitted when the input is blurred | \nevent: Event | \n
The component exports the following type definitions:
\nimport type { StepperTheme, StepperProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-stepper-background | \nvar(--van-active-color) | \n- | \n
--van-stepper-button-icon-color | \nvar(--van-text-color) | \n- | \n
--van-stepper-button-disabled-color | \nvar(--van-background) | \n- | \n
--van-stepper-button-disabled-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-stepper-button-round-theme-color | \nvar(--van-primary-color) | \n- | \n
--van-stepper-input-width | \n32px | \n- | \n
--van-stepper-input-height | \n28px | \n- | \n
--van-stepper-input-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-stepper-input-line-height | \nnormal | \n- | \n
--van-stepper-input-text-color | \nvar(--van-text-color) | \n- | \n
--van-stepper-input-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-stepper-input-disabled-background | \nvar(--van-active-color) | \n- | \n
--van-stepper-radius | \nvar(--van-radius-md) | \n- | \n
The stepper component consists of an increase button, a decrease button and an input box, which are used to input and adjust numbers within a certain range.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Stepper } from 'vant';\n\nconst app = createApp();\napp.use(Stepper);\n
\n<van-stepper v-model="value" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(1);\n return { value };\n },\n};\n
\n<van-stepper v-model="value" step="2" />\n
\n<van-stepper v-model="value" min="5" max="8" />\n
\n<van-stepper v-model="value" integer />\n
\n<van-stepper v-model="value" disabled />\n
\n<van-stepper v-model="value" disable-input />\n
\n<van-stepper v-model="value" step="0.2" :decimal-length="1" />\n
\n<van-stepper v-model="value" input-width="40px" button-size="32px" />\n
\n<van-stepper v-model="value" :before-change="beforeChange" />\n
\nimport { ref } from 'vue';\nimport { closeToast, showLoadingToast } from 'vant';\n\nexport default {\n setup() {\n const value = ref(1);\n\n const beforeChange = (value) => {\n showLoadingToast({ forbidClick: true });\n\n return new Promise((resolve) => {\n setTimeout(() => {\n closeToast();\n // resolve 'true' or 'false'\n resolve(true);\n }, 500);\n });\n };\n\n return {\n value,\n beforeChange,\n };\n },\n};\n
\n<van-stepper v-model="value" theme="round" button-size="22" disable-input />\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nCurrent value | \nnumber | string | \n- | \n
min | \nMin value | \nnumber | string | \n1 | \n
max | \nMax value | \nnumber | string | \n- | \n
auto-fixed | \nWhether to auto fix value that is out of range, set to false and value that is out of range won\u2019t be auto fixed | \nboolean | \ntrue | \n
default-value | \nDefault value, valid when v-model is empty | \nnumber | string | \n1 | \n
step | \nValue change step | \nnumber | string | \n1 | \n
name | \nStepper name, usually a unique string or number | \nnumber | string | \n- | \n
input-width | \nInput width | \nnumber | string | \n32px | \n
button-size | \nButton size | \nnumber | string | \n28px | \n
decimal-length | \nDecimal length | \nnumber | string | \n- | \n
theme | \nTheme, can be set to round | \nstring | \n- | \n
placeholder | \nInput placeholder | \nstring | \n- | \n
integer | \nWhether to allow only integers | \nboolean | \nfalse | \n
disabled | \nWhether to disable value change | \nboolean | \nfalse | \n
disable-plus | \nWhether to disable plus button | \nboolean | \nfalse | \n
disable-minus | \nWhether to disable minus button | \nboolean | \nfalse | \n
disable-input | \nWhether to disable input | \nboolean | \nfalse | \n
before-change | \nCallback function before changing, return false to prevent change, support return Promise | \n(value: number | string) => boolean | Promise<boolean> | \nfalse | \n
show-plus | \nWhether to show plus button | \nboolean | \ntrue | \n
show-minus | \nWhether to show minus button | \nboolean | \ntrue | \n
show-input | \nWhether to show input | \nboolean | \ntrue | \n
long-press | \nWhether to enable the long press gesture, when enabled you can long press the increase and decrease buttons | \nboolean | \ntrue | \n
allow-empty | \nWhether to allow the input value to be empty, set to true to allow an empty string to be passed in | \nboolean | \nfalse | \n
Event | \nDescription | \nArguments | \n
---|---|---|
change | \nEmitted when value changed | \nvalue: string, detail: { name: string } | \n
overlimit | \nEmitted when a disabled button is clicked | \n- | \n
plus | \nEmitted when the plus button is clicked | \n- | \n
minus | \nEmitted when the minus button is clicked | \n- | \n
focus | \nEmitted when the input is focused | \nevent: Event | \n
blur | \nEmitted when the input is blurred | \nevent: Event | \n
The component exports the following type definitions:
\nimport type { StepperTheme, StepperProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-stepper-background | \nvar(--van-active-color) | \n- | \n
--van-stepper-button-icon-color | \nvar(--van-text-color) | \n- | \n
--van-stepper-button-disabled-color | \nvar(--van-background) | \n- | \n
--van-stepper-button-disabled-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-stepper-button-round-theme-color | \nvar(--van-primary-color) | \n- | \n
--van-stepper-input-width | \n32px | \n- | \n
--van-stepper-input-height | \n28px | \n- | \n
--van-stepper-input-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-stepper-input-line-height | \nnormal | \n- | \n
--van-stepper-input-text-color | \nvar(--van-text-color) | \n- | \n
--van-stepper-input-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-stepper-input-disabled-background | \nvar(--van-active-color) | \n- | \n
--van-stepper-radius | \nvar(--van-radius-md) | \n- | \n
\u83B7\u53D6\u6D4F\u89C8\u5668\u7A97\u53E3\u7684\u89C6\u53E3\u5BBD\u5EA6\u548C\u9AD8\u5EA6\uFF0C\u5E76\u5728\u7A97\u53E3\u5927\u5C0F\u53D8\u5316\u65F6\u81EA\u52A8\u66F4\u65B0\u3002
\nimport { watch } from 'vue';\nimport { useWindowSize } from '@vant/use';\n\nexport default {\n setup() {\n const { width, height } = useWindowSize();\n\n console.log(width.value); // -> \u7A97\u53E3\u5BBD\u5EA6\n console.log(height.value); // -> \u7A97\u53E3\u9AD8\u5EA6\n\n watch([width, height], () => {\n console.log('window resized');\n });\n },\n};\n
\nfunction useWindowSize(): {\n width: Ref<number>;\n height: Ref<number>;\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
width | \n\u6D4F\u89C8\u5668\u7A97\u53E3\u5BBD\u5EA6 | \nRef<number> | \n
height | \n\u6D4F\u89C8\u5668\u7A97\u53E3\u9AD8\u5EA6 | \nRef<number> | \n
\u83B7\u53D6\u6D4F\u89C8\u5668\u7A97\u53E3\u7684\u89C6\u53E3\u5BBD\u5EA6\u548C\u9AD8\u5EA6\uFF0C\u5E76\u5728\u7A97\u53E3\u5927\u5C0F\u53D8\u5316\u65F6\u81EA\u52A8\u66F4\u65B0\u3002
\nimport { watch } from 'vue';\nimport { useWindowSize } from '@vant/use';\n\nexport default {\n setup() {\n const { width, height } = useWindowSize();\n\n console.log(width.value); // -> \u7A97\u53E3\u5BBD\u5EA6\n console.log(height.value); // -> \u7A97\u53E3\u9AD8\u5EA6\n\n watch([width, height], () => {\n console.log('window resized');\n });\n },\n};\n
\nfunction useWindowSize(): {\n width: Ref<number>;\n height: Ref<number>;\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
width | \n\u6D4F\u89C8\u5668\u7A97\u53E3\u5BBD\u5EA6 | \nRef<number> | \n
height | \n\u6D4F\u89C8\u5668\u7A97\u53E3\u9AD8\u5EA6 | \nRef<number> | \n
\u7528\u4E8E\u5728\u6253\u5F00\u548C\u5173\u95ED\u72B6\u6001\u4E4B\u95F4\u8FDB\u884C\u5207\u6362\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Switch } from 'vant';\n\nconst app = createApp();\napp.use(Switch);\n
\n\u901A\u8FC7 v-model
\u7ED1\u5B9A\u5F00\u5173\u7684\u9009\u4E2D\u72B6\u6001\uFF0Ctrue
\u8868\u793A\u5F00\uFF0Cfalse
\u8868\u793A\u5173\u3002
<van-switch v-model="checked" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(true);\n return { checked };\n },\n};\n
\n\u901A\u8FC7 disabled
\u5C5E\u6027\u6765\u7981\u7528\u5F00\u5173\uFF0C\u7981\u7528\u72B6\u6001\u4E0B\u5F00\u5173\u4E0D\u53EF\u70B9\u51FB\u3002
<van-switch v-model="checked" disabled />\n
\n\u901A\u8FC7 loading
\u5C5E\u6027\u8BBE\u7F6E\u5F00\u5173\u4E3A\u52A0\u8F7D\u72B6\u6001\uFF0C\u52A0\u8F7D\u72B6\u6001\u4E0B\u5F00\u5173\u4E0D\u53EF\u70B9\u51FB\u3002
<van-switch v-model="checked" loading />\n
\n\u901A\u8FC7 size
\u5C5E\u6027\u81EA\u5B9A\u4E49\u5F00\u5173\u7684\u5927\u5C0F\u3002
<van-switch v-model="checked" size="22px" />\n
\nactive-color
\u5C5E\u6027\u8868\u793A\u6253\u5F00\u65F6\u7684\u80CC\u666F\u8272\uFF0Cinactive-color
\u8868\u793A\u5173\u95ED\u65F6\u7684\u80CC\u666F\u8272\u3002
<van-switch v-model="checked" active-color="#ee0a24" inactive-color="#dcdee0" />\n
\n\u901A\u8FC7 node
\u63D2\u69FD\u81EA\u5B9A\u4E49\u6309\u94AE\u7684\u5185\u5BB9\u3002
<van-switch v-model="checked">\n <template #node>\n <div class="icon-wrapper">\n <van-icon :name="checked ? 'success' : 'cross'" />\n </div>\n </template>\n</van-switch>\n\n<style>\n .icon-wrapper {\n display: flex;\n width: 100%;\n justify-content: center;\n font-size: 18px;\n }\n\n .icon-wrapper .van-icon-success {\n line-height: 32px;\n color: var(--van-blue);\n }\n\n .icon-wrapper .van-icon-cross {\n line-height: 32px;\n color: var(--van-gray-5);\n }\n</style>\n
\n\u9700\u8981\u5F02\u6B65\u63A7\u5236\u5F00\u5173\u65F6\uFF0C\u53EF\u4EE5\u4F7F\u7528 modelValue
\u5C5E\u6027\u548C update:model-value
\u4E8B\u4EF6\u4EE3\u66FF v-model
\uFF0C\u5E76\u5728\u4E8B\u4EF6\u56DE\u8C03\u51FD\u6570\u4E2D\u624B\u52A8\u5904\u7406\u5F00\u5173\u72B6\u6001\u3002
<van-switch :model-value="checked" @update:model-value="onUpdateValue" />\n
\nimport { ref } from 'vue';\nimport { showConfirmDialog } from 'vant';\n\nexport default {\n setup() {\n const checked = ref(true);\n const onUpdateValue = (newValue) => {\n showConfirmDialog({\n title: '\u63D0\u9192',\n message: '\u662F\u5426\u5207\u6362\u5F00\u5173\uFF1F',\n }).then(() => {\n checked.value = newValue;\n });\n };\n\n return {\n checked,\n onUpdateValue,\n };\n },\n};\n
\n<van-cell center title="\u6807\u9898">\n <template #right-icon>\n <van-switch v-model="checked" />\n </template>\n</van-cell>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F00\u5173\u9009\u4E2D\u72B6\u6001 | \nany | \nfalse | \n
loading | \n\u662F\u5426\u4E3A\u52A0\u8F7D\u72B6\u6001 | \nboolean | \nfalse | \n
disabled | \n\u662F\u5426\u4E3A\u7981\u7528\u72B6\u6001 | \nboolean | \nfalse | \n
size | \n\u5F00\u5173\u6309\u94AE\u7684\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n26px | \n
active-color | \n\u6253\u5F00\u65F6\u7684\u80CC\u666F\u8272 | \nstring | \n#1989fa | \n
inactive-color | \n\u5173\u95ED\u65F6\u7684\u80CC\u666F\u8272 | \nstring | \nrgba(120, 120, 128, 0.16) | \n
active-value | \n\u6253\u5F00\u65F6\u5BF9\u5E94\u7684\u503C | \nany | \ntrue | \n
inactive-value | \n\u5173\u95ED\u65F6\u5BF9\u5E94\u7684\u503C | \nany | \nfalse | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u5F00\u5173\u72B6\u6001\u5207\u6362\u65F6\u89E6\u53D1 | \nvalue: any | \n
click | \n\u70B9\u51FB\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
node | \n\u81EA\u5B9A\u4E49\u6309\u94AE\u7684\u5185\u5BB9 | \n- | \n
background | \n\u81EA\u5B9A\u4E49\u5F00\u5173\u7684\u80CC\u666F\u5185\u5BB9 | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { SwitchProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-switch-size | \n26px | \n- | \n
--van-switch-width | \ncalc(1.8em + 4px) | \n- | \n
--van-switch-height | \ncalc(1em + 4px) | \n- | \n
--van-switch-node-size | \n1em | \n- | \n
--van-switch-node-background | \nvar(--van-white) | \n- | \n
--van-switch-node-shadow | \n0 3px 1px 0 rgba(0, 0, 0, 0.05) | \n- | \n
--van-switch-background | \nrgba(120, 120, 128, 0.16) | \n- | \n
--van-switch-on-background | \nvar(--van-primary-color) | \n- | \n
--van-switch-duration | \nvar(--van-duration-base) | \n- | \n
--van-switch-disabled-opacity | \nvar(--van-disabled-opacity) | \n- | \n
\u7528\u4E8E\u5728\u6253\u5F00\u548C\u5173\u95ED\u72B6\u6001\u4E4B\u95F4\u8FDB\u884C\u5207\u6362\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Switch } from 'vant';\n\nconst app = createApp();\napp.use(Switch);\n
\n\u901A\u8FC7 v-model
\u7ED1\u5B9A\u5F00\u5173\u7684\u9009\u4E2D\u72B6\u6001\uFF0Ctrue
\u8868\u793A\u5F00\uFF0Cfalse
\u8868\u793A\u5173\u3002
<van-switch v-model="checked" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(true);\n return { checked };\n },\n};\n
\n\u901A\u8FC7 disabled
\u5C5E\u6027\u6765\u7981\u7528\u5F00\u5173\uFF0C\u7981\u7528\u72B6\u6001\u4E0B\u5F00\u5173\u4E0D\u53EF\u70B9\u51FB\u3002
<van-switch v-model="checked" disabled />\n
\n\u901A\u8FC7 loading
\u5C5E\u6027\u8BBE\u7F6E\u5F00\u5173\u4E3A\u52A0\u8F7D\u72B6\u6001\uFF0C\u52A0\u8F7D\u72B6\u6001\u4E0B\u5F00\u5173\u4E0D\u53EF\u70B9\u51FB\u3002
<van-switch v-model="checked" loading />\n
\n\u901A\u8FC7 size
\u5C5E\u6027\u81EA\u5B9A\u4E49\u5F00\u5173\u7684\u5927\u5C0F\u3002
<van-switch v-model="checked" size="22px" />\n
\nactive-color
\u5C5E\u6027\u8868\u793A\u6253\u5F00\u65F6\u7684\u80CC\u666F\u8272\uFF0Cinactive-color
\u8868\u793A\u5173\u95ED\u65F6\u7684\u80CC\u666F\u8272\u3002
<van-switch v-model="checked" active-color="#ee0a24" inactive-color="#dcdee0" />\n
\n\u901A\u8FC7 node
\u63D2\u69FD\u81EA\u5B9A\u4E49\u6309\u94AE\u7684\u5185\u5BB9\u3002
<van-switch v-model="checked">\n <template #node>\n <div class="icon-wrapper">\n <van-icon :name="checked ? 'success' : 'cross'" />\n </div>\n </template>\n</van-switch>\n\n<style>\n .icon-wrapper {\n display: flex;\n width: 100%;\n justify-content: center;\n font-size: 18px;\n }\n\n .icon-wrapper .van-icon-success {\n line-height: 32px;\n color: var(--van-blue);\n }\n\n .icon-wrapper .van-icon-cross {\n line-height: 32px;\n color: var(--van-gray-5);\n }\n</style>\n
\n\u9700\u8981\u5F02\u6B65\u63A7\u5236\u5F00\u5173\u65F6\uFF0C\u53EF\u4EE5\u4F7F\u7528 modelValue
\u5C5E\u6027\u548C update:model-value
\u4E8B\u4EF6\u4EE3\u66FF v-model
\uFF0C\u5E76\u5728\u4E8B\u4EF6\u56DE\u8C03\u51FD\u6570\u4E2D\u624B\u52A8\u5904\u7406\u5F00\u5173\u72B6\u6001\u3002
<van-switch :model-value="checked" @update:model-value="onUpdateValue" />\n
\nimport { ref } from 'vue';\nimport { showConfirmDialog } from 'vant';\n\nexport default {\n setup() {\n const checked = ref(true);\n const onUpdateValue = (newValue) => {\n showConfirmDialog({\n title: '\u63D0\u9192',\n message: '\u662F\u5426\u5207\u6362\u5F00\u5173\uFF1F',\n }).then(() => {\n checked.value = newValue;\n });\n };\n\n return {\n checked,\n onUpdateValue,\n };\n },\n};\n
\n<van-cell center title="\u6807\u9898">\n <template #right-icon>\n <van-switch v-model="checked" />\n </template>\n</van-cell>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F00\u5173\u9009\u4E2D\u72B6\u6001 | \nany | \nfalse | \n
loading | \n\u662F\u5426\u4E3A\u52A0\u8F7D\u72B6\u6001 | \nboolean | \nfalse | \n
disabled | \n\u662F\u5426\u4E3A\u7981\u7528\u72B6\u6001 | \nboolean | \nfalse | \n
size | \n\u5F00\u5173\u6309\u94AE\u7684\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n26px | \n
active-color | \n\u6253\u5F00\u65F6\u7684\u80CC\u666F\u8272 | \nstring | \n#1989fa | \n
inactive-color | \n\u5173\u95ED\u65F6\u7684\u80CC\u666F\u8272 | \nstring | \nrgba(120, 120, 128, 0.16) | \n
active-value | \n\u6253\u5F00\u65F6\u5BF9\u5E94\u7684\u503C | \nany | \ntrue | \n
inactive-value | \n\u5173\u95ED\u65F6\u5BF9\u5E94\u7684\u503C | \nany | \nfalse | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u5F00\u5173\u72B6\u6001\u5207\u6362\u65F6\u89E6\u53D1 | \nvalue: any | \n
click | \n\u70B9\u51FB\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n\u53C2\u6570 | \n
---|---|---|
node | \n\u81EA\u5B9A\u4E49\u6309\u94AE\u7684\u5185\u5BB9 | \n- | \n
background | \n\u81EA\u5B9A\u4E49\u5F00\u5173\u7684\u80CC\u666F\u5185\u5BB9 | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { SwitchProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-switch-size | \n26px | \n- | \n
--van-switch-width | \ncalc(1.8em + 4px) | \n- | \n
--van-switch-height | \ncalc(1em + 4px) | \n- | \n
--van-switch-node-size | \n1em | \n- | \n
--van-switch-node-background | \nvar(--van-white) | \n- | \n
--van-switch-node-shadow | \n0 3px 1px 0 rgba(0, 0, 0, 0.05) | \n- | \n
--van-switch-background | \nrgba(120, 120, 128, 0.16) | \n- | \n
--van-switch-on-background | \nvar(--van-primary-color) | \n- | \n
--van-switch-duration | \nvar(--van-duration-base) | \n- | \n
--van-switch-disabled-opacity | \nvar(--van-disabled-opacity) | \n- | \n
\u5BAB\u683C\u53EF\u4EE5\u5728\u6C34\u5E73\u65B9\u5411\u4E0A\u628A\u9875\u9762\u5206\u9694\u6210\u7B49\u5BBD\u5EA6\u7684\u533A\u5757\uFF0C\u7528\u4E8E\u5C55\u793A\u5185\u5BB9\u6216\u8FDB\u884C\u9875\u9762\u5BFC\u822A\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Grid, GridItem } from 'vant';\n\nconst app = createApp();\napp.use(Grid);\napp.use(GridItem);\n
\n\u901A\u8FC7 icon
\u5C5E\u6027\u8BBE\u7F6E\u683C\u5B50\u5185\u7684\u56FE\u6807\uFF0Ctext
\u5C5E\u6027\u8BBE\u7F6E\u6587\u5B57\u5185\u5BB9\u3002
<van-grid>\n <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n</van-grid>\n
\n\u9ED8\u8BA4\u4E00\u884C\u5C55\u793A\u56DB\u4E2A\u683C\u5B50\uFF0C\u53EF\u4EE5\u901A\u8FC7 column-num
\u81EA\u5B9A\u4E49\u5217\u6570\u3002
<van-grid :column-num="3">\n <van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="\u6587\u5B57" />\n</van-grid>\n
\n\u901A\u8FC7\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u683C\u5B50\u5C55\u793A\u7684\u5185\u5BB9\u3002
\n<van-grid :border="false" :column-num="3">\n <van-grid-item>\n <van-image\n src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"\n />\n </van-grid-item>\n <van-grid-item>\n <van-image\n src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"\n />\n </van-grid-item>\n <van-grid-item>\n <van-image\n src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg"\n />\n </van-grid-item>\n</van-grid>\n
\n\u8BBE\u7F6E square
\u5C5E\u6027\u540E\uFF0C\u683C\u5B50\u7684\u9AD8\u5EA6\u4F1A\u548C\u5BBD\u5EA6\u4FDD\u6301\u4E00\u81F4\u3002
<van-grid square>\n <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="\u6587\u5B57" />\n</van-grid>\n
\n\u901A\u8FC7 gutter
\u5C5E\u6027\u8BBE\u7F6E\u683C\u5B50\u4E4B\u95F4\u7684\u8DDD\u79BB\u3002
<van-grid :gutter="10">\n <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="\u6587\u5B57" />\n</van-grid>\n
\n\u5C06 direction
\u5C5E\u6027\u8BBE\u7F6E\u4E3A horizontal
\uFF0C\u53EF\u4EE5\u8BA9\u5BAB\u683C\u7684\u5185\u5BB9\u5448\u6A2A\u5411\u6392\u5217\u3002
<van-grid direction="horizontal" :column-num="3">\n <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n</van-grid>\n
\n\u901A\u8FC7 to
\u5C5E\u6027\u8BBE\u7F6E Vue Router \u8DF3\u8F6C\u94FE\u63A5\uFF0C\u901A\u8FC7 url
\u5C5E\u6027\u8BBE\u7F6E URL \u8DF3\u8F6C\u94FE\u63A5\u3002
<van-grid clickable :column-num="2">\n <van-grid-item icon="home-o" text="\u8DEF\u7531\u8DF3\u8F6C" to="/" />\n <van-grid-item icon="search" text="URL \u8DF3\u8F6C" url="https://github.com" />\n</van-grid>\n
\n\u8BBE\u7F6E dot
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\u3002\u8BBE\u7F6E badge
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002
<van-grid :column-num="2">\n <van-grid-item icon="home-o" text="\u6587\u5B57" dot />\n <van-grid-item icon="search" text="\u6587\u5B57" badge="99+" />\n</van-grid>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
column-num | \n\u5217\u6570 | \nnumber | string | \n4 | \n
icon-size | \n\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx | \nnumber | string | \n28px | \n
gutter | \n\u683C\u5B50\u4E4B\u95F4\u7684\u95F4\u8DDD\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx | \nnumber | string | \n0 | \n
border | \n\u662F\u5426\u663E\u793A\u8FB9\u6846 | \nboolean | \ntrue | \n
center | \n\u662F\u5426\u5C06\u683C\u5B50\u5185\u5BB9\u5C45\u4E2D\u663E\u793A | \nboolean | \ntrue | \n
square | \n\u662F\u5426\u5C06\u683C\u5B50\u56FA\u5B9A\u4E3A\u6B63\u65B9\u5F62 | \nboolean | \nfalse | \n
clickable | \n\u662F\u5426\u5F00\u542F\u683C\u5B50\u70B9\u51FB\u53CD\u9988 | \nboolean | \nfalse | \n
direction | \n\u683C\u5B50\u5185\u5BB9\u6392\u5217\u7684\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A horizontal | \nstring | \nvertical | \n
reverse | \n\u662F\u5426\u8C03\u6362\u56FE\u6807\u548C\u6587\u672C\u7684\u4F4D\u7F6E | \nboolean | \nfalse | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
text | \n\u6587\u5B57 | \nstring | \n- | \n
icon | \n\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n- | \n
icon-prefix | \n\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 | \nstring | \nvan-icon | \n
icon-color | \n\u56FE\u6807\u989C\u8272\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 color \u5C5E\u6027 | \nstring | \n- | \n
dot | \n\u662F\u5426\u663E\u793A\u56FE\u6807\u53F3\u4E0A\u89D2\u5C0F\u7EA2\u70B9 | \nboolean | \nfalse | \n
badge | \n\u56FE\u6807\u53F3\u4E0A\u89D2\u5FBD\u6807\u7684\u5185\u5BB9 | \nnumber | string | \n- | \n
badge-props | \n\u81EA\u5B9A\u4E49\u5FBD\u6807\u7684\u5C5E\u6027\uFF0C\u4F20\u5165\u7684\u5BF9\u8C61\u4F1A\u88AB\u900F\u4F20\u7ED9 Badge \u7EC4\u4EF6\u7684 props | \nBadgeProps | \n- | \n
url | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740 | \nstring | \n- | \n
to | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u76EE\u6807\u8DEF\u7531\u5BF9\u8C61\uFF0C\u7B49\u540C\u4E8E Vue Router \u7684 to \u5C5E\u6027 | \nstring | object | \n- | \n
replace | \n\u662F\u5426\u5728\u8DF3\u8F6C\u65F6\u66FF\u6362\u5F53\u524D\u9875\u9762\u5386\u53F2 | \nboolean | \nfalse | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u683C\u5B50\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u81EA\u5B9A\u4E49\u5BAB\u683C\u7684\u6240\u6709\u5185\u5BB9 | \n
icon | \n\u81EA\u5B9A\u4E49\u56FE\u6807 | \n
text | \n\u81EA\u5B9A\u4E49\u6587\u5B57 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { GridProps, GridDirection, GridItemProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-grid-item-content-padding | \nvar(--van-padding-md) var(--van-padding-xs) | \n- | \n
--van-grid-item-content-background | \nvar(--van-background-2) | \n- | \n
--van-grid-item-content-active-color | \nvar(--van-active-color) | \n- | \n
--van-grid-item-icon-size | \n28px | \n- | \n
--van-grid-item-text-color | \nvar(--van-text-color) | \n- | \n
--van-grid-item-text-font-size | \nvar(--van-font-size-sm) | \n- | \n
\u5BAB\u683C\u53EF\u4EE5\u5728\u6C34\u5E73\u65B9\u5411\u4E0A\u628A\u9875\u9762\u5206\u9694\u6210\u7B49\u5BBD\u5EA6\u7684\u533A\u5757\uFF0C\u7528\u4E8E\u5C55\u793A\u5185\u5BB9\u6216\u8FDB\u884C\u9875\u9762\u5BFC\u822A\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Grid, GridItem } from 'vant';\n\nconst app = createApp();\napp.use(Grid);\napp.use(GridItem);\n
\n\u901A\u8FC7 icon
\u5C5E\u6027\u8BBE\u7F6E\u683C\u5B50\u5185\u7684\u56FE\u6807\uFF0Ctext
\u5C5E\u6027\u8BBE\u7F6E\u6587\u5B57\u5185\u5BB9\u3002
<van-grid>\n <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n</van-grid>\n
\n\u9ED8\u8BA4\u4E00\u884C\u5C55\u793A\u56DB\u4E2A\u683C\u5B50\uFF0C\u53EF\u4EE5\u901A\u8FC7 column-num
\u81EA\u5B9A\u4E49\u5217\u6570\u3002
<van-grid :column-num="3">\n <van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="\u6587\u5B57" />\n</van-grid>\n
\n\u901A\u8FC7\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u683C\u5B50\u5C55\u793A\u7684\u5185\u5BB9\u3002
\n<van-grid :border="false" :column-num="3">\n <van-grid-item>\n <van-image\n src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"\n />\n </van-grid-item>\n <van-grid-item>\n <van-image\n src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"\n />\n </van-grid-item>\n <van-grid-item>\n <van-image\n src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg"\n />\n </van-grid-item>\n</van-grid>\n
\n\u8BBE\u7F6E square
\u5C5E\u6027\u540E\uFF0C\u683C\u5B50\u7684\u9AD8\u5EA6\u4F1A\u548C\u5BBD\u5EA6\u4FDD\u6301\u4E00\u81F4\u3002
<van-grid square>\n <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="\u6587\u5B57" />\n</van-grid>\n
\n\u901A\u8FC7 gutter
\u5C5E\u6027\u8BBE\u7F6E\u683C\u5B50\u4E4B\u95F4\u7684\u8DDD\u79BB\u3002
<van-grid :gutter="10">\n <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="\u6587\u5B57" />\n</van-grid>\n
\n\u5C06 direction
\u5C5E\u6027\u8BBE\u7F6E\u4E3A horizontal
\uFF0C\u53EF\u4EE5\u8BA9\u5BAB\u683C\u7684\u5185\u5BB9\u5448\u6A2A\u5411\u6392\u5217\u3002
<van-grid direction="horizontal" :column-num="3">\n <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n</van-grid>\n
\n\u901A\u8FC7 to
\u5C5E\u6027\u8BBE\u7F6E Vue Router \u8DF3\u8F6C\u94FE\u63A5\uFF0C\u901A\u8FC7 url
\u5C5E\u6027\u8BBE\u7F6E URL \u8DF3\u8F6C\u94FE\u63A5\u3002
<van-grid clickable :column-num="2">\n <van-grid-item icon="home-o" text="\u8DEF\u7531\u8DF3\u8F6C" to="/" />\n <van-grid-item icon="search" text="URL \u8DF3\u8F6C" url="https://github.com" />\n</van-grid>\n
\n\u8BBE\u7F6E dot
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\u3002\u8BBE\u7F6E badge
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002
<van-grid :column-num="2">\n <van-grid-item icon="home-o" text="\u6587\u5B57" dot />\n <van-grid-item icon="search" text="\u6587\u5B57" badge="99+" />\n</van-grid>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
column-num | \n\u5217\u6570 | \nnumber | string | \n4 | \n
icon-size | \n\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx | \nnumber | string | \n28px | \n
gutter | \n\u683C\u5B50\u4E4B\u95F4\u7684\u95F4\u8DDD\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx | \nnumber | string | \n0 | \n
border | \n\u662F\u5426\u663E\u793A\u8FB9\u6846 | \nboolean | \ntrue | \n
center | \n\u662F\u5426\u5C06\u683C\u5B50\u5185\u5BB9\u5C45\u4E2D\u663E\u793A | \nboolean | \ntrue | \n
square | \n\u662F\u5426\u5C06\u683C\u5B50\u56FA\u5B9A\u4E3A\u6B63\u65B9\u5F62 | \nboolean | \nfalse | \n
clickable | \n\u662F\u5426\u5F00\u542F\u683C\u5B50\u70B9\u51FB\u53CD\u9988 | \nboolean | \nfalse | \n
direction | \n\u683C\u5B50\u5185\u5BB9\u6392\u5217\u7684\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A horizontal | \nstring | \nvertical | \n
reverse | \n\u662F\u5426\u8C03\u6362\u56FE\u6807\u548C\u6587\u672C\u7684\u4F4D\u7F6E | \nboolean | \nfalse | \n
\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
text | \n\u6587\u5B57 | \nstring | \n- | \n
icon | \n\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \n- | \n
icon-prefix | \n\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 | \nstring | \nvan-icon | \n
icon-color | \n\u56FE\u6807\u989C\u8272\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 color \u5C5E\u6027 | \nstring | \n- | \n
dot | \n\u662F\u5426\u663E\u793A\u56FE\u6807\u53F3\u4E0A\u89D2\u5C0F\u7EA2\u70B9 | \nboolean | \nfalse | \n
badge | \n\u56FE\u6807\u53F3\u4E0A\u89D2\u5FBD\u6807\u7684\u5185\u5BB9 | \nnumber | string | \n- | \n
badge-props | \n\u81EA\u5B9A\u4E49\u5FBD\u6807\u7684\u5C5E\u6027\uFF0C\u4F20\u5165\u7684\u5BF9\u8C61\u4F1A\u88AB\u900F\u4F20\u7ED9 Badge \u7EC4\u4EF6\u7684 props | \nBadgeProps | \n- | \n
url | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740 | \nstring | \n- | \n
to | \n\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u76EE\u6807\u8DEF\u7531\u5BF9\u8C61\uFF0C\u7B49\u540C\u4E8E Vue Router \u7684 to \u5C5E\u6027 | \nstring | object | \n- | \n
replace | \n\u662F\u5426\u5728\u8DF3\u8F6C\u65F6\u66FF\u6362\u5F53\u524D\u9875\u9762\u5386\u53F2 | \nboolean | \nfalse | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u683C\u5B50\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u81EA\u5B9A\u4E49\u5BAB\u683C\u7684\u6240\u6709\u5185\u5BB9 | \n
icon | \n\u81EA\u5B9A\u4E49\u56FE\u6807 | \n
text | \n\u81EA\u5B9A\u4E49\u6587\u5B57 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { GridProps, GridDirection, GridItemProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-grid-item-content-padding | \nvar(--van-padding-md) var(--van-padding-xs) | \n- | \n
--van-grid-item-content-background | \nvar(--van-background-2) | \n- | \n
--van-grid-item-content-active-color | \nvar(--van-active-color) | \n- | \n
--van-grid-item-icon-size | \n28px | \n- | \n
--van-grid-item-text-color | \nvar(--van-text-color) | \n- | \n
--van-grid-item-text-font-size | \nvar(--van-font-size-sm) | \n- | \n
Used to select a value within a given range.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Slider } from 'vant';\n\nconst app = createApp();\napp.use(Slider);\n
\n<van-slider v-model="value" @change="onChange" />\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const value = ref(50);\n const onChange = (value) => showToast('Current value: ' + value);\n return {\n value,\n onChange,\n };\n },\n};\n
\nAdd range
attribute to open dual thumb mode.
<van-slider v-model="value" range @change="onChange" />\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n // value must be an Array\n const value = ref([10, 50]);\n const onChange = (value) => showToast('Current value: ' + value);\n return {\n value,\n onChange,\n };\n },\n};\n
\n<van-slider v-model="value" :min="-50" :max="50" />\n
\n<van-slider v-model="value" disabled />\n
\n<van-slider v-model="value" :step="10" />\n
\n<van-slider v-model="value" bar-height="4px" active-color="#ee0a24" />\n
\n<van-slider v-model="value">\n <template #button>\n <div class="custom-button">{{ value }}</div>\n </template>\n</van-slider>\n\n<style>\n .custom-button {\n width: 26px;\n color: #fff;\n font-size: 10px;\n line-height: 18px;\n text-align: center;\n background-color: var(--van-primary-color);\n border-radius: 100px;\n }\n</style>\n
\n<div :style="{ height: '150px' }">\n <van-slider v-model="value" vertical @change="onChange" />\n <van-slider\n v-model="value2"\n range\n vertical\n style="margin-left: 100px;"\n @change="onChange"\n />\n</div>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const value = ref(50);\n const value2 = ref([10, 50]);\n const onChange = (value) => showToast('Current value: ' + value);\n return {\n value,\n value2,\n onChange,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nCurrent value | \nnumber | [number, number] | \n0 | \n
max | \nMax value | \nnumber | string | \n100 | \n
min | \nMin value | \nnumber | string | \n0 | \n
step | \nStep size | \nnumber | string | \n1 | \n
bar-height | \nHeight of bar | \nnumber | string | \n2px | \n
button-size | \nButton size | \nnumber | string | \n24px | \n
active-color | \nActive color of bar | \nstring | \n#1989fa | \n
inactive-color | \nInactive color of bar | \nstring | \n#e5e5e5 | \n
range | \nWhether to enable dual thumb mode | \nboolean | \nfalse | \n
reverse | \nWhether to reverse slider | \nboolean | \nfalse | \n
disabled | \nWhether to disable slider | \nboolean | \nfalse | \n
readonly | \nWhether to be readonly | \nboolean | \nfalse | \n
vertical | \nWhether to display slider vertically | \nboolean | \nfalse | \n
Event | \nDescription | \nArguments | \n
---|---|---|
update:model-value | \nEmitted when value is changing | \nvalue: number | \n
change | \nEmitted after value changed | \nvalue: number | \n
drag-start | \nEmitted when start dragging | \nevent: TouchEvent | \n
drag-end | \nEmitted when end dragging | \nevent: TouchEvent | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
button | \nCustom button | \n{ value: number, dragging: boolean } | \n
left-button | \nCustom left button in range mode | \n{ value: number, dragging: boolean, dragIndex?: number } | \n
right-button | \nCustom right button in range mode | \n{ value: number, dragging: boolean, dragIndex?: number } | \n
The component exports the following type definitions:
\nimport type { SliderProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-slider-active-background | \nvar(--van-primary-color) | \n- | \n
--van-slider-inactive-background | \nvar(--van-gray-3) | \n- | \n
--van-slider-disabled-opacity | \nvar(--van-disabled-opacity) | \n- | \n
--van-slider-bar-height | \n2px | \n- | \n
--van-slider-button-width | \n24px | \n- | \n
--van-slider-button-height | \n24px | \n- | \n
--van-slider-button-radius | \n50% | \n- | \n
--van-slider-button-background | \nvar(--van-white) | \n- | \n
--van-slider-button-shadow | \n0 1px 2px rgba(0, 0, 0, 0.5) | \n- | \n
Used to select a value within a given range.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Slider } from 'vant';\n\nconst app = createApp();\napp.use(Slider);\n
\n<van-slider v-model="value" @change="onChange" />\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const value = ref(50);\n const onChange = (value) => showToast('Current value: ' + value);\n return {\n value,\n onChange,\n };\n },\n};\n
\nAdd range
attribute to open dual thumb mode.
<van-slider v-model="value" range @change="onChange" />\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n // value must be an Array\n const value = ref([10, 50]);\n const onChange = (value) => showToast('Current value: ' + value);\n return {\n value,\n onChange,\n };\n },\n};\n
\n<van-slider v-model="value" :min="-50" :max="50" />\n
\n<van-slider v-model="value" disabled />\n
\n<van-slider v-model="value" :step="10" />\n
\n<van-slider v-model="value" bar-height="4px" active-color="#ee0a24" />\n
\n<van-slider v-model="value">\n <template #button>\n <div class="custom-button">{{ value }}</div>\n </template>\n</van-slider>\n\n<style>\n .custom-button {\n width: 26px;\n color: #fff;\n font-size: 10px;\n line-height: 18px;\n text-align: center;\n background-color: var(--van-primary-color);\n border-radius: 100px;\n }\n</style>\n
\n<div :style="{ height: '150px' }">\n <van-slider v-model="value" vertical @change="onChange" />\n <van-slider\n v-model="value2"\n range\n vertical\n style="margin-left: 100px;"\n @change="onChange"\n />\n</div>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const value = ref(50);\n const value2 = ref([10, 50]);\n const onChange = (value) => showToast('Current value: ' + value);\n return {\n value,\n value2,\n onChange,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nCurrent value | \nnumber | [number, number] | \n0 | \n
max | \nMax value | \nnumber | string | \n100 | \n
min | \nMin value | \nnumber | string | \n0 | \n
step | \nStep size | \nnumber | string | \n1 | \n
bar-height | \nHeight of bar | \nnumber | string | \n2px | \n
button-size | \nButton size | \nnumber | string | \n24px | \n
active-color | \nActive color of bar | \nstring | \n#1989fa | \n
inactive-color | \nInactive color of bar | \nstring | \n#e5e5e5 | \n
range | \nWhether to enable dual thumb mode | \nboolean | \nfalse | \n
reverse | \nWhether to reverse slider | \nboolean | \nfalse | \n
disabled | \nWhether to disable slider | \nboolean | \nfalse | \n
readonly | \nWhether to be readonly | \nboolean | \nfalse | \n
vertical | \nWhether to display slider vertically | \nboolean | \nfalse | \n
Event | \nDescription | \nArguments | \n
---|---|---|
update:model-value | \nEmitted when value is changing | \nvalue: number | \n
change | \nEmitted after value changed | \nvalue: number | \n
drag-start | \nEmitted when start dragging | \nevent: TouchEvent | \n
drag-end | \nEmitted when end dragging | \nevent: TouchEvent | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
button | \nCustom button | \n{ value: number, dragging: boolean } | \n
left-button | \nCustom left button in range mode | \n{ value: number, dragging: boolean, dragIndex?: number } | \n
right-button | \nCustom right button in range mode | \n{ value: number, dragging: boolean, dragIndex?: number } | \n
The component exports the following type definitions:
\nimport type { SliderProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-slider-active-background | \nvar(--van-primary-color) | \n- | \n
--van-slider-inactive-background | \nvar(--van-gray-3) | \n- | \n
--van-slider-disabled-opacity | \nvar(--van-disabled-opacity) | \n- | \n
--van-slider-bar-height | \n2px | \n- | \n
--van-slider-button-width | \n24px | \n- | \n
--van-slider-button-height | \n24px | \n- | \n
--van-slider-button-radius | \n50% | \n- | \n
--van-slider-button-background | \nvar(--van-white) | \n- | \n
--van-slider-button-shadow | \n0 1px 2px rgba(0, 0, 0, 0.5) | \n- | \n
\u8F7B\u91CF\u3001\u53EF\u5B9A\u5236\u7684\u79FB\u52A8\u7AEF Vue \u7EC4\u4EF6\u5E93
\nVant \u662F\u4E00\u4E2A\u8F7B\u91CF\u3001\u53EF\u5B9A\u5236\u7684\u79FB\u52A8\u7AEF\u7EC4\u4EF6\u5E93\uFF0C\u4E8E 2017 \u5E74\u5F00\u6E90\u3002
\n\u76EE\u524D Vant \u5B98\u65B9\u63D0\u4F9B\u4E86 Vue 2 \u7248\u672C\u3001Vue 3 \u7248\u672C\u548C\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7248\u672C\uFF0C\u5E76\u7531\u793E\u533A\u56E2\u961F\u7EF4\u62A4 React \u7248\u672C\u548C\u652F\u4ED8\u5B9D\u5C0F\u7A0B\u5E8F\u7248\u672C\u3002
\n\u4F60\u5F53\u524D\u6D4F\u89C8\u7684\u662F Vant 4.x \u7248\u672C \u7684\u6587\u6863\uFF0C\u9002\u7528\u4E8E Vue 3 \u5F00\u53D1\u3002\u5982\u679C\u4F60\u5728\u4F7F\u7528 Vue 2\uFF0C\u8BF7\u6D4F\u89C8 Vant 2 \u6587\u6863\u3002
\n\u63A8\u8350\u4F7F\u7528 Rsbuild \u6765\u521B\u5EFA\u4E00\u4E2A\u811A\u624B\u67B6\u9879\u76EE\u3002
\nRsbuild \u662F\u57FA\u4E8E Rspack \u7684\u6784\u5EFA\u5DE5\u5177\uFF0C\u7531 Vant \u4F5C\u8005\u5F00\u53D1\uFF0C\u5177\u5907\u4E00\u6D41\u7684\u6784\u5EFA\u901F\u5EA6\u548C\u5F00\u53D1\u4F53\u9A8C\uFF0C\u5BF9 Vant \u63D0\u4F9B\u7B2C\u4E00\u4F18\u5148\u7EA7\u652F\u6301\u3002
\n\u4F60\u53EF\u4EE5\u901A\u8FC7\u4EE5\u4E0B\u547D\u4EE4\u521B\u5EFA\u4E00\u4E2A Rsbuild \u9879\u76EE\uFF1A
\nnpm create rsbuild@latest\n
\n\u8BF7\u8BBF\u95EE Rsbuild \u4ED3\u5E93 \u4E86\u89E3\u66F4\u591A\u4FE1\u606F\u3002
\n\u8BF7\u9605\u8BFB\u5FEB\u901F\u4E0A\u624B\u7AE0\u8282\uFF0C\u901A\u8FC7\u8BE5\u7AE0\u8282\u4F60\u53EF\u4EE5\u4E86\u89E3\u5230 Vant \u7684\u5B89\u88C5\u65B9\u6CD5\u548C\u57FA\u672C\u4F7F\u7528\u59FF\u52BF\u3002
\nVant 2 \u652F\u6301\u73B0\u4EE3\u6D4F\u89C8\u5668\u4EE5\u53CA Android >= 4.0\u3001iOS >= 8.0\u3002
\nVant 3/4 \u652F\u6301\u73B0\u4EE3\u6D4F\u89C8\u5668\u4EE5\u53CA Chrome >= 51\u3001iOS >= 10.0\uFF08\u4E0E Vue 3 \u4E00\u81F4\uFF09\u3002
\n\u76EE\u524D Vant \u5404\u4E2A\u7248\u672C\u7684\u7EF4\u62A4\u72B6\u6001\u5982\u4E0B\uFF1A
\n\u540D\u79F0 | \n\u6846\u67B6 | \n\u53D1\u5E03\u65F6\u95F4 | \n\u6700\u65B0\u7248 | \n\u7EF4\u62A4\u72B6\u6001 | \n
---|---|---|---|---|
Vant 4 | \nVue 3 | \n2022.12 | \n\n | \u6301\u7EED\u8FED\u4EE3\u65B0\u529F\u80FD | \n
Vant 3 | \nVue 3 | \n2020.12 | \n\n | \u505C\u6B62\u8FED\u4EE3\u65B0\u529F\u80FD\uFF0Cbug \u4F1A\u88AB\u5904\u7406\u548C\u4FEE\u590D | \n
Vant 2 | \nVue 2 | \n2019.06 | \n\n | \u505C\u6B62\u8FED\u4EE3\u65B0\u529F\u80FD\uFF0C\u91CD\u8981 bug \u4F1A\u88AB\u5904\u7406\u548C\u4FEE\u590D | \n
Vant 1 | \nVue 2 | \n2018.03 | \n\n | \u505C\u6B62\u7EF4\u62A4\uFF0C\u4E0D\u518D\u63A5\u53D7 PR | \n
\u7531 Vant \u5B98\u65B9\u56E2\u961F\u7EF4\u62A4\u7684\u9879\u76EE\u5982\u4E0B\uFF1A
\n\u9879\u76EE | \n\u63CF\u8FF0 | \n
---|---|
vant-weapp | \nVant \u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7248 | \n
vant-demo | \nVant \u5B98\u65B9\u793A\u4F8B\u5408\u96C6 | \n
vant-cli | \n\u5F00\u7BB1\u5373\u7528\u7684\u7EC4\u4EF6\u5E93\u642D\u5EFA\u5DE5\u5177 | \n
vant-icons | \nVant \u56FE\u6807\u5E93 | \n
vant-touch-emulator | \n\u5728\u684C\u9762\u7AEF\u4F7F\u7528 Vant \u7684\u8F85\u52A9\u5E93 | \n
vant-nuxt | \n\u4E3A Nuxt \u51C6\u5907\u7684\u6A21\u5757 | \n
\u7531\u793E\u533A\u7EF4\u62A4\u7684\u9879\u76EE\u5982\u4E0B\uFF0C\u6B22\u8FCE\u8865\u5145\uFF1A
\n\u9879\u76EE | \n\u63CF\u8FF0 | \n
---|---|
3lang3/react-vant | \n\u53C2\u7167 Vant \u6253\u9020\u7684 React \u79FB\u52A8\u7AEF\u7EC4\u4EF6\u5E93 | \n
vant-aliapp | \nVant \u652F\u4ED8\u5B9D\u5C0F\u7A0B\u5E8F\u7248 | \n
taroify | \nVant Taro \u7248 | \n
vant-theme | \nVant \u5728\u7EBF\u4E3B\u9898\u9884\u89C8\u5DE5\u5177 | \n
@antmjs/vantui | \n\u57FA\u4E8E Vant Weapp \u5F00\u53D1\u7684\u591A\u7AEF\u7EC4\u4EF6\u5E93\uFF0C\u540C\u65F6\u652F\u6301 Taro \u548C React | \n
vant-playground | \nVant Playground | \n
sfc-playground-vant | \nVant Playground | \n
vue3-h5-template | \n\u57FA\u4E8E Vant \u7684\u79FB\u52A8\u7AEF\u9879\u76EE\u6A21\u677F | \n
vue3-vant-mobile | \n\u57FA\u4E8E Vant \u7684\u79FB\u52A8\u7AEF\u9879\u76EE\u6A21\u677F | \n
\u4EE5\u4E0B\u662F Vant \u548C Vant Weapp \u7684\u6838\u5FC3\u8D21\u732E\u8005\u4EEC\uFF1A
\n\n | \n | \n | \n | \n | \n |
---|---|---|---|---|---|
chenjiahan | \ncookfront | \nwangnaiyi | \npangxie | \nrex-zsd | \nnemo-shen | \n
\n | \n | \n | \n | \n | \n |
---|---|---|---|---|---|
Lindysen | \nJakeLaoyu | \nlandluck | \nwjw-gavin | \ninottn | \nzhousg | \n
\u611F\u8C22\u4EE5\u4E0B\u5C0F\u4F19\u4F34\u4EEC\u4E3A Vant \u53D1\u5C55\u505A\u51FA\u7684\u8D21\u732E\uFF1A
\n\n \n\n\u8D21\u732E\u4EE3\u7801\u8BF7\u9605\u8BFB\u6211\u4EEC\u7684\u8D21\u732E\u6307\u5357\u3002
\n\u4F7F\u7528\u8FC7\u7A0B\u4E2D\u53D1\u73B0\u4EFB\u4F55\u95EE\u9898\u90FD\u53EF\u4EE5\u63D0 Issue \u7ED9\u6211\u4EEC\uFF0C\u5F53\u7136\uFF0C\u6211\u4EEC\u4E5F\u975E\u5E38\u6B22\u8FCE\u4F60\u7ED9\u6211\u4EEC\u53D1 PR\u3002
\n\u672C\u9879\u76EE\u57FA\u4E8E MIT \u534F\u8BAE\uFF0C\u8BF7\u81EA\u7531\u5730\u4EAB\u53D7\u548C\u53C2\u4E0E\u5F00\u6E90\u3002
\n\u8F7B\u91CF\u3001\u53EF\u5B9A\u5236\u7684\u79FB\u52A8\u7AEF Vue \u7EC4\u4EF6\u5E93
\nVant \u662F\u4E00\u4E2A\u8F7B\u91CF\u3001\u53EF\u5B9A\u5236\u7684\u79FB\u52A8\u7AEF\u7EC4\u4EF6\u5E93\uFF0C\u4E8E 2017 \u5E74\u5F00\u6E90\u3002
\n\u76EE\u524D Vant \u5B98\u65B9\u63D0\u4F9B\u4E86 Vue 2 \u7248\u672C\u3001Vue 3 \u7248\u672C\u548C\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7248\u672C\uFF0C\u5E76\u7531\u793E\u533A\u56E2\u961F\u7EF4\u62A4 React \u7248\u672C\u548C\u652F\u4ED8\u5B9D\u5C0F\u7A0B\u5E8F\u7248\u672C\u3002
\n\u4F60\u5F53\u524D\u6D4F\u89C8\u7684\u662F Vant 4.x \u7248\u672C \u7684\u6587\u6863\uFF0C\u9002\u7528\u4E8E Vue 3 \u5F00\u53D1\u3002\u5982\u679C\u4F60\u5728\u4F7F\u7528 Vue 2\uFF0C\u8BF7\u6D4F\u89C8 Vant 2 \u6587\u6863\u3002
\n\u63A8\u8350\u4F7F\u7528 Rsbuild \u6765\u521B\u5EFA\u4E00\u4E2A\u811A\u624B\u67B6\u9879\u76EE\u3002
\nRsbuild \u662F\u57FA\u4E8E Rspack \u7684\u6784\u5EFA\u5DE5\u5177\uFF0C\u7531 Vant \u4F5C\u8005\u5F00\u53D1\uFF0C\u5177\u5907\u4E00\u6D41\u7684\u6784\u5EFA\u901F\u5EA6\u548C\u5F00\u53D1\u4F53\u9A8C\uFF0C\u5BF9 Vant \u63D0\u4F9B\u7B2C\u4E00\u4F18\u5148\u7EA7\u652F\u6301\u3002
\n\u4F60\u53EF\u4EE5\u901A\u8FC7\u4EE5\u4E0B\u547D\u4EE4\u521B\u5EFA\u4E00\u4E2A Rsbuild \u9879\u76EE\uFF1A
\nnpm create rsbuild@latest\n
\n\u8BF7\u8BBF\u95EE Rsbuild \u4ED3\u5E93 \u4E86\u89E3\u66F4\u591A\u4FE1\u606F\u3002
\n\u8BF7\u9605\u8BFB\u5FEB\u901F\u4E0A\u624B\u7AE0\u8282\uFF0C\u901A\u8FC7\u8BE5\u7AE0\u8282\u4F60\u53EF\u4EE5\u4E86\u89E3\u5230 Vant \u7684\u5B89\u88C5\u65B9\u6CD5\u548C\u57FA\u672C\u4F7F\u7528\u59FF\u52BF\u3002
\nVant 2 \u652F\u6301\u73B0\u4EE3\u6D4F\u89C8\u5668\u4EE5\u53CA Android >= 4.0\u3001iOS >= 8.0\u3002
\nVant 3/4 \u652F\u6301\u73B0\u4EE3\u6D4F\u89C8\u5668\u4EE5\u53CA Chrome >= 51\u3001iOS >= 10.0\uFF08\u4E0E Vue 3 \u4E00\u81F4\uFF09\u3002
\n\u76EE\u524D Vant \u5404\u4E2A\u7248\u672C\u7684\u7EF4\u62A4\u72B6\u6001\u5982\u4E0B\uFF1A
\n\u540D\u79F0 | \n\u6846\u67B6 | \n\u53D1\u5E03\u65F6\u95F4 | \n\u6700\u65B0\u7248 | \n\u7EF4\u62A4\u72B6\u6001 | \n
---|---|---|---|---|
Vant 4 | \nVue 3 | \n2022.12 | \n\n | \u6301\u7EED\u8FED\u4EE3\u65B0\u529F\u80FD | \n
Vant 3 | \nVue 3 | \n2020.12 | \n\n | \u505C\u6B62\u8FED\u4EE3\u65B0\u529F\u80FD\uFF0Cbug \u4F1A\u88AB\u5904\u7406\u548C\u4FEE\u590D | \n
Vant 2 | \nVue 2 | \n2019.06 | \n\n | \u505C\u6B62\u8FED\u4EE3\u65B0\u529F\u80FD\uFF0C\u91CD\u8981 bug \u4F1A\u88AB\u5904\u7406\u548C\u4FEE\u590D | \n
Vant 1 | \nVue 2 | \n2018.03 | \n\n | \u505C\u6B62\u7EF4\u62A4\uFF0C\u4E0D\u518D\u63A5\u53D7 PR | \n
\u7531 Vant \u5B98\u65B9\u56E2\u961F\u7EF4\u62A4\u7684\u9879\u76EE\u5982\u4E0B\uFF1A
\n\u9879\u76EE | \n\u63CF\u8FF0 | \n
---|---|
vant-weapp | \nVant \u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7248 | \n
vant-demo | \nVant \u5B98\u65B9\u793A\u4F8B\u5408\u96C6 | \n
vant-cli | \n\u5F00\u7BB1\u5373\u7528\u7684\u7EC4\u4EF6\u5E93\u642D\u5EFA\u5DE5\u5177 | \n
vant-icons | \nVant \u56FE\u6807\u5E93 | \n
vant-touch-emulator | \n\u5728\u684C\u9762\u7AEF\u4F7F\u7528 Vant \u7684\u8F85\u52A9\u5E93 | \n
vant-nuxt | \n\u4E3A Nuxt \u51C6\u5907\u7684\u6A21\u5757 | \n
\u7531\u793E\u533A\u7EF4\u62A4\u7684\u9879\u76EE\u5982\u4E0B\uFF0C\u6B22\u8FCE\u8865\u5145\uFF1A
\n\u9879\u76EE | \n\u63CF\u8FF0 | \n
---|---|
3lang3/react-vant | \n\u53C2\u7167 Vant \u6253\u9020\u7684 React \u79FB\u52A8\u7AEF\u7EC4\u4EF6\u5E93 | \n
vant-aliapp | \nVant \u652F\u4ED8\u5B9D\u5C0F\u7A0B\u5E8F\u7248 | \n
taroify | \nVant Taro \u7248 | \n
vant-theme | \nVant \u5728\u7EBF\u4E3B\u9898\u9884\u89C8\u5DE5\u5177 | \n
@antmjs/vantui | \n\u57FA\u4E8E Vant Weapp \u5F00\u53D1\u7684\u591A\u7AEF\u7EC4\u4EF6\u5E93\uFF0C\u540C\u65F6\u652F\u6301 Taro \u548C React | \n
vant-playground | \nVant Playground | \n
sfc-playground-vant | \nVant Playground | \n
vue3-h5-template | \n\u57FA\u4E8E Vant \u7684\u79FB\u52A8\u7AEF\u9879\u76EE\u6A21\u677F | \n
vue3-vant-mobile | \n\u57FA\u4E8E Vant \u7684\u79FB\u52A8\u7AEF\u9879\u76EE\u6A21\u677F | \n
\u4EE5\u4E0B\u662F Vant \u548C Vant Weapp \u7684\u6838\u5FC3\u8D21\u732E\u8005\u4EEC\uFF1A
\n\n | \n | \n | \n | \n | \n |
---|---|---|---|---|---|
chenjiahan | \ncookfront | \nwangnaiyi | \npangxie | \nrex-zsd | \nnemo-shen | \n
\n | \n | \n | \n | \n | \n |
---|---|---|---|---|---|
Lindysen | \nJakeLaoyu | \nlandluck | \nwjw-gavin | \ninottn | \nzhousg | \n
\u611F\u8C22\u4EE5\u4E0B\u5C0F\u4F19\u4F34\u4EEC\u4E3A Vant \u53D1\u5C55\u505A\u51FA\u7684\u8D21\u732E\uFF1A
\n\n \n\n\u8D21\u732E\u4EE3\u7801\u8BF7\u9605\u8BFB\u6211\u4EEC\u7684\u8D21\u732E\u6307\u5357\u3002
\n\u4F7F\u7528\u8FC7\u7A0B\u4E2D\u53D1\u73B0\u4EFB\u4F55\u95EE\u9898\u90FD\u53EF\u4EE5\u63D0 Issue \u7ED9\u6211\u4EEC\uFF0C\u5F53\u7136\uFF0C\u6211\u4EEC\u4E5F\u975E\u5E38\u6B22\u8FCE\u4F60\u7ED9\u6211\u4EEC\u53D1 PR\u3002
\n\u672C\u9879\u76EE\u57FA\u4E8E MIT \u534F\u8BAE\uFF0C\u8BF7\u81EA\u7531\u5730\u4EAB\u53D7\u548C\u53C2\u4E0E\u5F00\u6E90\u3002
\n\u672C\u9875\u9762\u63D0\u4F9B Vant \u7684\u8BBE\u8BA1\u8D44\u6E90\u4E0B\u8F7D\u3002
\n\u5305\u542B Sketch \u683C\u5F0F\u7684\u8272\u5F69\u89C4\u8303\u3001\u5B57\u4F53\u89C4\u8303\u3001\u7EC4\u4EF6\u8BBE\u8BA1\u89C4\u8303\u3002
\n\u5305\u542B Sketch \u683C\u5F0F\u7684\u56FE\u6807\u5E93\u8D44\u6E90\u3002
\n\n\nVant \u7684\u6240\u6709\u56FE\u6807\u90FD\u6258\u7BA1\u5728 iconfont.cn \u4E0A\uFF0C\u70B9\u6B64\u67E5\u770B\uFF1AVant \u56FE\u6807\u5E93\u3002
\nAxure \u5143\u4EF6\u5E93\uFF0C\u7531\u793E\u533A\u7684 @axure-tczy \u540C\u5B66\u8D21\u732E\u3002
\n\n\n\u672C\u9875\u9762\u63D0\u4F9B Vant \u7684\u8BBE\u8BA1\u8D44\u6E90\u4E0B\u8F7D\u3002
\n\u5305\u542B Sketch \u683C\u5F0F\u7684\u8272\u5F69\u89C4\u8303\u3001\u5B57\u4F53\u89C4\u8303\u3001\u7EC4\u4EF6\u8BBE\u8BA1\u89C4\u8303\u3002
\n\u5305\u542B Sketch \u683C\u5F0F\u7684\u56FE\u6807\u5E93\u8D44\u6E90\u3002
\n\n\nVant \u7684\u6240\u6709\u56FE\u6807\u90FD\u6258\u7BA1\u5728 iconfont.cn \u4E0A\uFF0C\u70B9\u6B64\u67E5\u770B\uFF1AVant \u56FE\u6807\u5E93\u3002
\nAxure \u5143\u4EF6\u5E93\uFF0C\u7531\u793E\u533A\u7684 @axure-tczy \u540C\u5B66\u8D21\u732E\u3002
\n\n\nA group of options for multiple choices.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Checkbox, CheckboxGroup } from 'vant';\n\nconst app = createApp();\napp.use(Checkbox);\napp.use(CheckboxGroup);\n
\n<van-checkbox v-model="checked">Checkbox</van-checkbox>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(true);\n return {\n checked,\n };\n },\n};\n
\n<van-checkbox v-model="checked" disabled>Checkbox</van-checkbox>\n
\n<van-checkbox-group v-model="checked" shape="square">\n <van-checkbox name="a">\u590D\u9009\u6846 a</van-checkbox>\n <van-checkbox name="b">\u590D\u9009\u6846 b</van-checkbox>\n</van-checkbox-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(['a', 'b']);\n return { checked };\n },\n};\n
\n<van-checkbox v-model="checked" checked-color="#ee0a24">Checkbox</van-checkbox>\n
\n<van-checkbox v-model="checked" icon-size="24px">Checkbox</van-checkbox>\n
\nUse icon slot to custom icon.
\n<van-checkbox v-model="checked">\n customize icon\n <template #icon="props">\n <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />\n </template>\n</van-checkbox>\n\n<style>\n .img-icon {\n height: 20px;\n }\n</style>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(true);\n return {\n checked,\n activeIcon:\n 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',\n inactiveIcon:\n 'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',\n };\n },\n};\n
\nSet label-position
prop to \'left\'
to adjust the label position to the left of the Checkbox.
<van-checkbox v-model="checked" label-position="left">Checkbox</van-checkbox>\n
\n<van-checkbox v-model="checked" label-disabled>Checkbox</van-checkbox>\n
\nWhen Checkboxes are inside a CheckboxGroup, the checked checkboxes\'s name is an array and bound with CheckboxGroup by v-model.
\n<van-checkbox-group v-model="checked">\n <van-checkbox name="a">Checkbox a</van-checkbox>\n <van-checkbox name="b">Checkbox b</van-checkbox>\n</van-checkbox-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(['a', 'b']);\n return { checked };\n },\n};\n
\n<van-checkbox-group v-model="checked" direction="horizontal">\n <van-checkbox name="a">Checkbox a</van-checkbox>\n <van-checkbox name="b">Checkbox b</van-checkbox>\n</van-checkbox-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref([]);\n return { checked };\n },\n};\n
\n<van-checkbox-group v-model="checked" :max="2">\n <van-checkbox name="a">Checkbox a</van-checkbox>\n <van-checkbox name="b">Checkbox b</van-checkbox>\n <van-checkbox name="c">Checkbox c</van-checkbox>\n</van-checkbox-group>\n
\n<van-checkbox-group v-model="checked" ref="checkboxGroup">\n <van-checkbox name="a">Checkbox a</van-checkbox>\n <van-checkbox name="b">Checkbox b</van-checkbox>\n <van-checkbox name="c">Checkbox c</van-checkbox>\n</van-checkbox-group>\n\n<van-button type="primary" @click="checkAll">Check All</van-button>\n<van-button type="primary" @click="toggleAll">Toggle All</van-button>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref([]);\n const checkboxGroup = ref(null);\n\n const checkAll = () => {\n checkboxGroup.value.toggleAll(true);\n }\n const toggleAll = () => {\n checkboxGroup.value.toggleAll();\n },\n\n return {\n checked,\n checkAll,\n toggleAll,\n checkboxGroup,\n };\n },\n};\n
\n<van-checkbox-group v-model="checked">\n <van-cell-group inset>\n <van-cell\n v-for="(item, index) in list"\n clickable\n :key="item"\n :title="`Checkbox ${item}`"\n @click="toggle(index)"\n >\n <template #right-icon>\n <van-checkbox\n :name="item"\n :ref="el => checkboxRefs[index] = el"\n @click.stop\n />\n </template>\n </van-cell>\n </van-cell-group>\n</van-checkbox-group>\n
\nimport { ref, onBeforeUpdate } from 'vue';\n\nexport default {\n setup() {\n const checked = ref([]);\n const checkboxRefs = ref([]);\n const toggle = (index) => {\n checkboxRefs.value[index].toggle();\n };\n\n onBeforeUpdate(() => {\n checkboxRefs.value = [];\n });\n\n return {\n list: ['a', 'b'],\n toggle,\n checked,\n checkboxRefs,\n };\n },\n};\n
\n<van-checkbox\n v-model="isCheckAll"\n :indeterminate="isIndeterminate"\n @change="checkAllChange"\n>\n Check All\n</van-checkbox>\n\n<van-checkbox-group v-model="checkedResult" @change="checkedResultChange">\n <van-checkbox v-for="item in list" :key="item" :name="item">\n Checkbox {{ item }}\n </van-checkbox>\n</van-checkbox-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const list = ['a', 'b', 'c', 'd']\n\n const isCheckAll = ref(false);\n const checkedResult = ref(['a', 'b', 'd']);\n const isIndeterminate = ref(true);\n\n const checkAllChange = (val: boolean) => {\n checkedResult.value = val ? list : []\n isIndeterminate.value = false\n }\n\n const checkedResultChange = (value: string[]) => {\n const checkedCount = value.length\n isCheckAll.value = checkedCount === list.length\n isIndeterminate.value = checkedCount > 0 && checkedCount < list.length\n }\n\n return {\n list,\n isCheckAll,\n checkedResult,\n checkAllChange,\n isIndeterminate,\n checkedResultChange\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nCheck status | \nboolean | \nfalse | \n
name | \nCheckbox name, usually a unique string or number | \nany | \n- | \n
shape | \nCan be set to square | \nstring | \nround | \n
disabled | \nDisable checkbox | \nboolean | \nfalse | \n
label-disabled | \nWhether to disable label click | \nboolean | \nfalse | \n
label-position | \nCan be set to left | \nstring | \nright | \n
icon-size | \nIcon size | \nnumber | string | \n20px | \n
checked-color | \nChecked color | \nstring | \n#1989fa | \n
bind-group | \nWhether to bind with CheckboxGroup | \nboolean | \ntrue | \n
indeterminate | \nWhether indeterminate status | \nboolean | \nfalse | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nNames of all checked checkboxes | \nany[] | \n- | \n
disabled | \nWhether to disable all checkboxes | \nboolean | \nfalse | \n
max | \nMaximum amount of checked options | \nnumber | string | \n0 (Unlimited) | \n
direction | \nDirection, can be set to horizontal | \nstring | \nvertical | \n
icon-size | \nIcon size of all checkboxes | \nnumber | string | \n20px | \n
checked-color | \nChecked color of all checkboxes | \nstring | \n#1989fa | \n
shape v4.6.3 | \nCan be set to square | \nstring | \nround | \n
Event | \nDescription | \nParameters | \n
---|---|---|
change | \nEmitted when value changed | \nchecked: boolean | \n
click | \nEmitted when the checkbox is clicked | \nevent: MouseEvent | \n
Event | \nDescription | \nParameters | \n
---|---|---|
change | \nEmitted when value changed | \nnames: any[] | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
default | \nCustom label | \n{ checked: boolean, disabled: boolean } | \n
icon | \nCustom icon | \n{ checked: boolean, disabled: boolean } | \n
Use ref to get CheckboxGroup instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
toggleAll | \nToggle check status of all checkboxes | \noptions?: boolean | object | \n- | \n
import { ref } from 'vue';\nimport type { CheckboxGroupInstance } from 'vant';\n\nconst checkboxGroupRef = ref<CheckboxGroupInstance>();\n\n// Toggle all\ncheckboxGroup.value?.toggleAll();\n// Select all\ncheckboxGroup.value?.toggleAll(true);\n// Unselect all\ncheckboxGroup.value?.toggleAll(false);\n\n// Toggle all, skip disabled\ncheckboxGroup.value?.toggleAll({\n skipDisabled: true,\n});\n// Select all, skip disabled\ncheckboxGroup.value?.toggleAll({\n checked: true,\n skipDisabled: true,\n});\n
\nUse ref to get Checkbox instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
toggle | \nToggle check status | \nchecked?: boolean | \n- | \n
The component exports the following type definitions:
\nimport type {\n CheckboxProps,\n CheckboxShape,\n CheckboxInstance,\n CheckboxLabelPosition,\n CheckboxGroupProps,\n CheckboxGroupInstance,\n CheckboxGroupDirection,\n CheckboxGroupToggleAllOptions,\n} from 'vant';\n
\nCheckboxInstance
and CheckboxGroupInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { CheckboxInstance, CheckboxGroupInstance } from 'vant';\n\nconst checkboxRef = ref<CheckboxInstance>();\nconst checkboxGroupRef = ref<CheckboxGroupInstance>();\n\ncheckboxRef.value?.toggle();\ncheckboxGroupRef.value?.toggleAll();\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-checkbox-size | \n20px | \n- | \n
--van-checkbox-border-color | \nvar(--van-gray-5) | \n- | \n
--van-checkbox-duration | \nvar(--van-duration-fast) | \n- | \n
--van-checkbox-label-margin | \nvar(--van-padding-xs) | \n- | \n
--van-checkbox-label-color | \nvar(--van-text-color) | \n- | \n
--van-checkbox-checked-icon-color | \nvar(--van-primary-color) | \n- | \n
--van-checkbox-disabled-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-checkbox-disabled-label-color | \nvar(--van-text-color-3) | \n- | \n
--van-checkbox-disabled-background | \nvar(--van-border-color) | \n- | \n
A group of options for multiple choices.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Checkbox, CheckboxGroup } from 'vant';\n\nconst app = createApp();\napp.use(Checkbox);\napp.use(CheckboxGroup);\n
\n<van-checkbox v-model="checked">Checkbox</van-checkbox>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(true);\n return {\n checked,\n };\n },\n};\n
\n<van-checkbox v-model="checked" disabled>Checkbox</van-checkbox>\n
\n<van-checkbox-group v-model="checked" shape="square">\n <van-checkbox name="a">\u590D\u9009\u6846 a</van-checkbox>\n <van-checkbox name="b">\u590D\u9009\u6846 b</van-checkbox>\n</van-checkbox-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(['a', 'b']);\n return { checked };\n },\n};\n
\n<van-checkbox v-model="checked" checked-color="#ee0a24">Checkbox</van-checkbox>\n
\n<van-checkbox v-model="checked" icon-size="24px">Checkbox</van-checkbox>\n
\nUse icon slot to custom icon.
\n<van-checkbox v-model="checked">\n customize icon\n <template #icon="props">\n <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />\n </template>\n</van-checkbox>\n\n<style>\n .img-icon {\n height: 20px;\n }\n</style>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(true);\n return {\n checked,\n activeIcon:\n 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',\n inactiveIcon:\n 'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',\n };\n },\n};\n
\nSet label-position
prop to \'left\'
to adjust the label position to the left of the Checkbox.
<van-checkbox v-model="checked" label-position="left">Checkbox</van-checkbox>\n
\n<van-checkbox v-model="checked" label-disabled>Checkbox</van-checkbox>\n
\nWhen Checkboxes are inside a CheckboxGroup, the checked checkboxes\'s name is an array and bound with CheckboxGroup by v-model.
\n<van-checkbox-group v-model="checked">\n <van-checkbox name="a">Checkbox a</van-checkbox>\n <van-checkbox name="b">Checkbox b</van-checkbox>\n</van-checkbox-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(['a', 'b']);\n return { checked };\n },\n};\n
\n<van-checkbox-group v-model="checked" direction="horizontal">\n <van-checkbox name="a">Checkbox a</van-checkbox>\n <van-checkbox name="b">Checkbox b</van-checkbox>\n</van-checkbox-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref([]);\n return { checked };\n },\n};\n
\n<van-checkbox-group v-model="checked" :max="2">\n <van-checkbox name="a">Checkbox a</van-checkbox>\n <van-checkbox name="b">Checkbox b</van-checkbox>\n <van-checkbox name="c">Checkbox c</van-checkbox>\n</van-checkbox-group>\n
\n<van-checkbox-group v-model="checked" ref="checkboxGroup">\n <van-checkbox name="a">Checkbox a</van-checkbox>\n <van-checkbox name="b">Checkbox b</van-checkbox>\n <van-checkbox name="c">Checkbox c</van-checkbox>\n</van-checkbox-group>\n\n<van-button type="primary" @click="checkAll">Check All</van-button>\n<van-button type="primary" @click="toggleAll">Toggle All</van-button>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref([]);\n const checkboxGroup = ref(null);\n\n const checkAll = () => {\n checkboxGroup.value.toggleAll(true);\n }\n const toggleAll = () => {\n checkboxGroup.value.toggleAll();\n },\n\n return {\n checked,\n checkAll,\n toggleAll,\n checkboxGroup,\n };\n },\n};\n
\n<van-checkbox-group v-model="checked">\n <van-cell-group inset>\n <van-cell\n v-for="(item, index) in list"\n clickable\n :key="item"\n :title="`Checkbox ${item}`"\n @click="toggle(index)"\n >\n <template #right-icon>\n <van-checkbox\n :name="item"\n :ref="el => checkboxRefs[index] = el"\n @click.stop\n />\n </template>\n </van-cell>\n </van-cell-group>\n</van-checkbox-group>\n
\nimport { ref, onBeforeUpdate } from 'vue';\n\nexport default {\n setup() {\n const checked = ref([]);\n const checkboxRefs = ref([]);\n const toggle = (index) => {\n checkboxRefs.value[index].toggle();\n };\n\n onBeforeUpdate(() => {\n checkboxRefs.value = [];\n });\n\n return {\n list: ['a', 'b'],\n toggle,\n checked,\n checkboxRefs,\n };\n },\n};\n
\n<van-checkbox\n v-model="isCheckAll"\n :indeterminate="isIndeterminate"\n @change="checkAllChange"\n>\n Check All\n</van-checkbox>\n\n<van-checkbox-group v-model="checkedResult" @change="checkedResultChange">\n <van-checkbox v-for="item in list" :key="item" :name="item">\n Checkbox {{ item }}\n </van-checkbox>\n</van-checkbox-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const list = ['a', 'b', 'c', 'd']\n\n const isCheckAll = ref(false);\n const checkedResult = ref(['a', 'b', 'd']);\n const isIndeterminate = ref(true);\n\n const checkAllChange = (val: boolean) => {\n checkedResult.value = val ? list : []\n isIndeterminate.value = false\n }\n\n const checkedResultChange = (value: string[]) => {\n const checkedCount = value.length\n isCheckAll.value = checkedCount === list.length\n isIndeterminate.value = checkedCount > 0 && checkedCount < list.length\n }\n\n return {\n list,\n isCheckAll,\n checkedResult,\n checkAllChange,\n isIndeterminate,\n checkedResultChange\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nCheck status | \nboolean | \nfalse | \n
name | \nCheckbox name, usually a unique string or number | \nany | \n- | \n
shape | \nCan be set to square | \nstring | \nround | \n
disabled | \nDisable checkbox | \nboolean | \nfalse | \n
label-disabled | \nWhether to disable label click | \nboolean | \nfalse | \n
label-position | \nCan be set to left | \nstring | \nright | \n
icon-size | \nIcon size | \nnumber | string | \n20px | \n
checked-color | \nChecked color | \nstring | \n#1989fa | \n
bind-group | \nWhether to bind with CheckboxGroup | \nboolean | \ntrue | \n
indeterminate | \nWhether indeterminate status | \nboolean | \nfalse | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nNames of all checked checkboxes | \nany[] | \n- | \n
disabled | \nWhether to disable all checkboxes | \nboolean | \nfalse | \n
max | \nMaximum amount of checked options | \nnumber | string | \n0 (Unlimited) | \n
direction | \nDirection, can be set to horizontal | \nstring | \nvertical | \n
icon-size | \nIcon size of all checkboxes | \nnumber | string | \n20px | \n
checked-color | \nChecked color of all checkboxes | \nstring | \n#1989fa | \n
shape v4.6.3 | \nCan be set to square | \nstring | \nround | \n
Event | \nDescription | \nParameters | \n
---|---|---|
change | \nEmitted when value changed | \nchecked: boolean | \n
click | \nEmitted when the checkbox is clicked | \nevent: MouseEvent | \n
Event | \nDescription | \nParameters | \n
---|---|---|
change | \nEmitted when value changed | \nnames: any[] | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
default | \nCustom label | \n{ checked: boolean, disabled: boolean } | \n
icon | \nCustom icon | \n{ checked: boolean, disabled: boolean } | \n
Use ref to get CheckboxGroup instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
toggleAll | \nToggle check status of all checkboxes | \noptions?: boolean | object | \n- | \n
import { ref } from 'vue';\nimport type { CheckboxGroupInstance } from 'vant';\n\nconst checkboxGroupRef = ref<CheckboxGroupInstance>();\n\n// Toggle all\ncheckboxGroup.value?.toggleAll();\n// Select all\ncheckboxGroup.value?.toggleAll(true);\n// Unselect all\ncheckboxGroup.value?.toggleAll(false);\n\n// Toggle all, skip disabled\ncheckboxGroup.value?.toggleAll({\n skipDisabled: true,\n});\n// Select all, skip disabled\ncheckboxGroup.value?.toggleAll({\n checked: true,\n skipDisabled: true,\n});\n
\nUse ref to get Checkbox instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
toggle | \nToggle check status | \nchecked?: boolean | \n- | \n
The component exports the following type definitions:
\nimport type {\n CheckboxProps,\n CheckboxShape,\n CheckboxInstance,\n CheckboxLabelPosition,\n CheckboxGroupProps,\n CheckboxGroupInstance,\n CheckboxGroupDirection,\n CheckboxGroupToggleAllOptions,\n} from 'vant';\n
\nCheckboxInstance
and CheckboxGroupInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { CheckboxInstance, CheckboxGroupInstance } from 'vant';\n\nconst checkboxRef = ref<CheckboxInstance>();\nconst checkboxGroupRef = ref<CheckboxGroupInstance>();\n\ncheckboxRef.value?.toggle();\ncheckboxGroupRef.value?.toggleAll();\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-checkbox-size | \n20px | \n- | \n
--van-checkbox-border-color | \nvar(--van-gray-5) | \n- | \n
--van-checkbox-duration | \nvar(--van-duration-fast) | \n- | \n
--van-checkbox-label-margin | \nvar(--van-padding-xs) | \n- | \n
--van-checkbox-label-color | \nvar(--van-text-color) | \n- | \n
--van-checkbox-checked-icon-color | \nvar(--van-primary-color) | \n- | \n
--van-checkbox-disabled-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-checkbox-disabled-label-color | \nvar(--van-text-color-3) | \n- | \n
--van-checkbox-disabled-background | \nvar(--van-border-color) | \n- | \n
\u6570\u636E\u91CF\u8FC7\u591A\u65F6\uFF0C\u91C7\u7528\u5206\u9875\u7684\u5F62\u5F0F\u5C06\u6570\u636E\u5206\u9694\uFF0C\u6BCF\u6B21\u53EA\u52A0\u8F7D\u4E00\u4E2A\u9875\u9762\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Pagination } from 'vant';\n\nconst app = createApp();\napp.use(Pagination);\n
\n\u901A\u8FC7 v-model
\u6765\u7ED1\u5B9A\u5F53\u524D\u9875\u7801\u3002
<van-pagination v-model="currentPage" :total-items="24" :items-per-page="5" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentPage = ref(1);\n return { currentPage };\n },\n};\n
\n\u5C06 mode
\u8BBE\u7F6E\u4E3A simple
\u6765\u5207\u6362\u5230\u7B80\u5355\u6A21\u5F0F\uFF0C\u6B64\u65F6\u5206\u9875\u5668\u4E0D\u4F1A\u5C55\u793A\u5177\u4F53\u7684\u9875\u7801\u6309\u94AE\u3002
<van-pagination v-model="currentPage" :page-count="12" mode="simple" />\n
\n\u8BBE\u7F6E force-ellipses
\u540E\u4F1A\u5C55\u793A\u7701\u7565\u53F7\u6309\u94AE\uFF0C\u70B9\u51FB\u540E\u53EF\u4EE5\u5FEB\u901F\u8DF3\u8F6C\u3002
<van-pagination\n v-model="currentPage"\n :total-items="125"\n :show-page-size="3"\n force-ellipses\n/>\n
\n\u901A\u8FC7 prev-text
\u3001next-text
\u7B49\u63D2\u69FD\u6765\u81EA\u5B9A\u4E49\u5206\u9875\u6309\u94AE\u7684\u5185\u5BB9\u3002
<van-pagination v-model="currentPage" :total-items="50" :show-page-size="5">\n <template #prev-text>\n <van-icon name="arrow-left" />\n </template>\n <template #next-text>\n <van-icon name="arrow" />\n </template>\n <template #page="{ text }">{{ text }}</template>\n</van-pagination>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u9875\u7801 | \nnumber | \n- | \n
mode | \n\u663E\u793A\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A simple | \nstring | \nmulti | \n
prev-text | \n\u4E0A\u4E00\u9875\u6309\u94AE\u6587\u5B57 | \nstring | \n\u4E0A\u4E00\u9875 | \n
next-text | \n\u4E0B\u4E00\u9875\u6309\u94AE\u6587\u5B57 | \nstring | \n\u4E0B\u4E00\u9875 | \n
page-count | \n\u603B\u9875\u6570 | \nnumber | string | \n\u6839\u636E\u9875\u6570\u8BA1\u7B97 | \n
total-items | \n\u603B\u8BB0\u5F55\u6570 | \nnumber | string | \n0 | \n
items-per-page | \n\u6BCF\u9875\u8BB0\u5F55\u6570 | \nnumber | string | \n10 | \n
show-page-size | \n\u663E\u793A\u7684\u9875\u7801\u4E2A\u6570 | \nnumber | string | \n5 | \n
force-ellipses | \n\u662F\u5426\u663E\u793A\u7701\u7565\u53F7 | \nboolean | \nfalse | \n
show-prev-button v4.2.1 | \n\u662F\u5426\u5C55\u793A\u4E0A\u4E00\u9875\u6309\u94AE | \nboolean | \ntrue | \n
show-next-button v4.2.1 | \n\u662F\u5426\u5C55\u793A\u4E0B\u4E00\u9875\u6309\u94AE | \nboolean | \ntrue | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u9875\u7801\u6539\u53D8\u65F6\u89E6\u53D1 | \n- | \n
\u540D\u79F0 | \n\u63CF\u8FF0 | \n\u53C2\u6570 | \n
---|---|---|
page | \n\u81EA\u5B9A\u4E49\u9875\u7801 | \n{ number: number, text: string, active: boolean } | \n
prev-text | \n\u81EA\u5B9A\u4E49\u4E0A\u4E00\u9875\u6309\u94AE\u6587\u5B57 | \n- | \n
next-text | \n\u81EA\u5B9A\u4E49\u4E0B\u4E00\u9875\u6309\u94AE\u6587\u5B57 | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { PaginationMode, PaginationProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-pagination-height | \n40px | \n- | \n
--van-pagination-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-pagination-item-width | \n36px | \n- | \n
--van-pagination-item-default-color | \nvar(--van-primary-color) | \n- | \n
--van-pagination-item-disabled-color | \nvar(--van-gray-7) | \n- | \n
--van-pagination-item-disabled-background | \nvar(--van-background) | \n- | \n
--van-pagination-background | \nvar(--van-background-2) | \n- | \n
--van-pagination-desc-color | \nvar(--van-gray-7) | \n- | \n
--van-pagination-disabled-opacity | \nvar(--van-disabled-opacity) | \n- | \n
\u6570\u636E\u91CF\u8FC7\u591A\u65F6\uFF0C\u91C7\u7528\u5206\u9875\u7684\u5F62\u5F0F\u5C06\u6570\u636E\u5206\u9694\uFF0C\u6BCF\u6B21\u53EA\u52A0\u8F7D\u4E00\u4E2A\u9875\u9762\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Pagination } from 'vant';\n\nconst app = createApp();\napp.use(Pagination);\n
\n\u901A\u8FC7 v-model
\u6765\u7ED1\u5B9A\u5F53\u524D\u9875\u7801\u3002
<van-pagination v-model="currentPage" :total-items="24" :items-per-page="5" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentPage = ref(1);\n return { currentPage };\n },\n};\n
\n\u5C06 mode
\u8BBE\u7F6E\u4E3A simple
\u6765\u5207\u6362\u5230\u7B80\u5355\u6A21\u5F0F\uFF0C\u6B64\u65F6\u5206\u9875\u5668\u4E0D\u4F1A\u5C55\u793A\u5177\u4F53\u7684\u9875\u7801\u6309\u94AE\u3002
<van-pagination v-model="currentPage" :page-count="12" mode="simple" />\n
\n\u8BBE\u7F6E force-ellipses
\u540E\u4F1A\u5C55\u793A\u7701\u7565\u53F7\u6309\u94AE\uFF0C\u70B9\u51FB\u540E\u53EF\u4EE5\u5FEB\u901F\u8DF3\u8F6C\u3002
<van-pagination\n v-model="currentPage"\n :total-items="125"\n :show-page-size="3"\n force-ellipses\n/>\n
\n\u901A\u8FC7 prev-text
\u3001next-text
\u7B49\u63D2\u69FD\u6765\u81EA\u5B9A\u4E49\u5206\u9875\u6309\u94AE\u7684\u5185\u5BB9\u3002
<van-pagination v-model="currentPage" :total-items="50" :show-page-size="5">\n <template #prev-text>\n <van-icon name="arrow-left" />\n </template>\n <template #next-text>\n <van-icon name="arrow" />\n </template>\n <template #page="{ text }">{{ text }}</template>\n</van-pagination>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u9875\u7801 | \nnumber | \n- | \n
mode | \n\u663E\u793A\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A simple | \nstring | \nmulti | \n
prev-text | \n\u4E0A\u4E00\u9875\u6309\u94AE\u6587\u5B57 | \nstring | \n\u4E0A\u4E00\u9875 | \n
next-text | \n\u4E0B\u4E00\u9875\u6309\u94AE\u6587\u5B57 | \nstring | \n\u4E0B\u4E00\u9875 | \n
page-count | \n\u603B\u9875\u6570 | \nnumber | string | \n\u6839\u636E\u9875\u6570\u8BA1\u7B97 | \n
total-items | \n\u603B\u8BB0\u5F55\u6570 | \nnumber | string | \n0 | \n
items-per-page | \n\u6BCF\u9875\u8BB0\u5F55\u6570 | \nnumber | string | \n10 | \n
show-page-size | \n\u663E\u793A\u7684\u9875\u7801\u4E2A\u6570 | \nnumber | string | \n5 | \n
force-ellipses | \n\u662F\u5426\u663E\u793A\u7701\u7565\u53F7 | \nboolean | \nfalse | \n
show-prev-button v4.2.1 | \n\u662F\u5426\u5C55\u793A\u4E0A\u4E00\u9875\u6309\u94AE | \nboolean | \ntrue | \n
show-next-button v4.2.1 | \n\u662F\u5426\u5C55\u793A\u4E0B\u4E00\u9875\u6309\u94AE | \nboolean | \ntrue | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u9875\u7801\u6539\u53D8\u65F6\u89E6\u53D1 | \n- | \n
\u540D\u79F0 | \n\u63CF\u8FF0 | \n\u53C2\u6570 | \n
---|---|---|
page | \n\u81EA\u5B9A\u4E49\u9875\u7801 | \n{ number: number, text: string, active: boolean } | \n
prev-text | \n\u81EA\u5B9A\u4E49\u4E0A\u4E00\u9875\u6309\u94AE\u6587\u5B57 | \n- | \n
next-text | \n\u81EA\u5B9A\u4E49\u4E0B\u4E00\u9875\u6309\u94AE\u6587\u5B57 | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { PaginationMode, PaginationProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-pagination-height | \n40px | \n- | \n
--van-pagination-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-pagination-item-width | \n36px | \n- | \n
--van-pagination-item-default-color | \nvar(--van-primary-color) | \n- | \n
--van-pagination-item-disabled-color | \nvar(--van-gray-7) | \n- | \n
--van-pagination-item-disabled-background | \nvar(--van-background) | \n- | \n
--van-pagination-background | \nvar(--van-background-2) | \n- | \n
--van-pagination-desc-color | \nvar(--van-gray-7) | \n- | \n
--van-pagination-disabled-opacity | \nvar(--van-disabled-opacity) | \n- | \n
Get the visible state of the page.
\nimport { watch } from 'vue';\nimport { usePageVisibility } from '@vant/use';\n\nexport default {\n setup() {\n const pageVisibility = usePageVisibility();\n\n watch(pageVisibility, (value) => {\n console.log('visibility: ', value);\n });\n },\n};\n
\ntype VisibilityState = 'visible' | 'hidden';\n\nfunction usePageVisibility(): Ref<VisibilityState>;\n
\nName | \nDescription | \nType | \n
---|---|---|
visibilityState | \nThe current visible state of the page, could be visible or hidden | \nRef<VisibilityState> | \n
Get the visible state of the page.
\nimport { watch } from 'vue';\nimport { usePageVisibility } from '@vant/use';\n\nexport default {\n setup() {\n const pageVisibility = usePageVisibility();\n\n watch(pageVisibility, (value) => {\n console.log('visibility: ', value);\n });\n },\n};\n
\ntype VisibilityState = 'visible' | 'hidden';\n\nfunction usePageVisibility(): Ref<VisibilityState>;\n
\nName | \nDescription | \nType | \n
---|---|---|
visibilityState | \nThe current visible state of the page, could be visible or hidden | \nRef<VisibilityState> | \n
A list component to show items and control loading status.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { List } from 'vant';\n\nconst app = createApp();\napp.use(List);\n
\n<van-list\n v-model:loading="loading"\n :finished="finished"\n finished-text="Finished"\n @load="onLoad"\n>\n <van-cell v-for="item in list" :key="item" :title="item" />\n</van-list>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const list = ref([]);\n const loading = ref(false);\n const finished = ref(false);\n\n const onLoad = () => {\n setTimeout(() => {\n for (let i = 0; i < 10; i++) {\n list.value.push(list.value.length + 1);\n }\n loading.value = false;\n\n if (list.value.length >= 40) {\n finished.value = true;\n }\n }, 1000);\n };\n\n return {\n list,\n onLoad,\n loading,\n finished,\n };\n },\n};\n
\n<van-list\n v-model:loading="loading"\n v-model:error="error"\n error-text="Request failed. Click to reload"\n @load="onLoad"\n>\n <van-cell v-for="item in list" :key="item" :title="item" />\n</van-list>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const list = ref([]);\n const error = ref(false);\n const loading = ref(false);\n const onLoad = () => {\n fetchSomeThing().catch(() => {\n error.value = true;\n });\n };\n\n return {\n list,\n error,\n onLoad,\n loading,\n };\n },\n};\n
\n<van-pull-refresh v-model="refreshing" @refresh="onRefresh">\n <van-list\n v-model:loading="loading"\n :finished="finished"\n finished-text="Finished"\n @load="onLoad"\n >\n <van-cell v-for="item in list" :key="item" :title="item" />\n </van-list>\n</van-pull-refresh>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const list = ref([]);\n const loading = ref(false);\n const finished = ref(false);\n const refreshing = ref(false);\n\n const onLoad = () => {\n setTimeout(() => {\n if (refreshing.value) {\n list.value = [];\n refreshing.value = false;\n }\n\n for (let i = 0; i < 10; i++) {\n list.value.push(list.value.length + 1);\n }\n loading.value = false;\n\n if (list.value.length >= 40) {\n finished.value = true;\n }\n }, 1000);\n };\n\n const onRefresh = () => {\n finished.value = false;\n loading.value = true;\n onLoad();\n };\n\n return {\n list,\n onLoad,\n loading,\n finished,\n onRefresh,\n refreshing,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:loading | \nWhether to show loading info, the load event will not be Emitted when loading | \nboolean | \nfalse | \n
v-model:error | \nWhether loading is error, the load event will be Emitted only when error text clicked | \nboolean | \nfalse | \n
finished | \nWhether loading is finished, the load event will not be Emitted when finished | \nboolean | \nfalse | \n
offset | \nThe load event will be Emitted when the distance between the scrollbar and the bottom is less than offset | \nnumber | string | \n300 | \n
loading-text | \nLoading text | \nstring | \nLoading... | \n
finished-text | \nFinished text | \nstring | \n- | \n
error-text | \nError loaded text | \nstring | \n- | \n
immediate-check | \nWhether to check loading position immediately after mounted | \nboolean | \ntrue | \n
disabled | \nWhether to disable the load event | \nboolean | \nfalse | \n
direction | \nScroll direction, can be set to up | \nstring | \ndown | \n
scroller v4.6.4 | \nSpecifies the node that needs to listen for scroll events, defaults to the nearest parent scroll node | \nElement | \n- | \n
Event | \nDescription | \nArguments | \n
---|---|---|
load | \nEmitted when the distance between the scrollbar and the bottom is less than offset | \n- | \n
Use ref to get List instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
check | \nCheck scroll position | \n- | \n- | \n
The component exports the following type definitions:
\nimport type { ListProps, ListInstance, ListDirection } from 'vant';\n
\nListInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { ListInstance } from 'vant';\n\nconst listRef = ref<ListInstance>();\n\nlistRef.value?.check();\n
\nName | \nDescription | \n
---|---|
default | \nList content | \n
loading | \nCustom loading tips | \n
finished | \nCustom finished tips | \n
error | \nCustom error tips | \n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-list-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-list-text-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-list-text-line-height | \n50px | \n- | \n
--van-list-loading-icon-size | \n16px | \n- | \n
List will listen to the scroll event of the browser and calculate the position. When the distance between the bottom of the list and the visible area is less than offset
, the List component will trigger a load
event.
A load event will be triggered immediately to load the first screen data. This feature can be disabled by the immediate-check
prop.
If the amount of data loaded in one request is too small, the List will continue to trigger the load
event until the content fills the screen or the data is fully loaded.
Therefore, you need to adjust the amount of data per request. Ideally, the amount of data per request should be able to fill the height of one screen.
\nList
has three states, understanding these states will help you use the component:
loading = false
: Not in loading. The component will detect whether to trigger the load
event according to the scroll position (if the content of the list is less than one screen, it will be triggered directly).loading = true
: During loading. Indicating that an request is being sent, and the load
event will not be triggered.finished = true
: Loading is complete. No load
will not be triggered.After each request, you need to manually set loading
to false
, indicating the end of loading.
If you use the float layout on the content, you can add the van-clearfix
class to the container to clear the float, so that the List can get the element position correctly.
<van-list>\n <div class="van-clearfix">\n <div class="float-item" />\n <div class="float-item" />\n <div class="float-item" />\n </div>\n</van-list>\n
\nIf the overflow-x: hidden
style is set on the html and body tags, it will cause the List to always trigger loading.
html,\nbody {\n overflow-x: hidden;\n}\n
\nThe reason is that when an element is styled with overflow-x: hidden
, the element\'s overflow-y
will be set to auto
by the browser, instead of the default value of visible
, causing the List can not determine the scroll container correctly. The workaround is to remove this style, or add the height: 100%
style to the html and body tags.
Setting the direction
prop to up will trigger the loading of the List component when the scrollbar is at the page top.
When using this prop, it is recommended to scroll the scroll bar to the page bottom after each data request is completed.
\nA list component to show items and control loading status.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { List } from 'vant';\n\nconst app = createApp();\napp.use(List);\n
\n<van-list\n v-model:loading="loading"\n :finished="finished"\n finished-text="Finished"\n @load="onLoad"\n>\n <van-cell v-for="item in list" :key="item" :title="item" />\n</van-list>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const list = ref([]);\n const loading = ref(false);\n const finished = ref(false);\n\n const onLoad = () => {\n setTimeout(() => {\n for (let i = 0; i < 10; i++) {\n list.value.push(list.value.length + 1);\n }\n loading.value = false;\n\n if (list.value.length >= 40) {\n finished.value = true;\n }\n }, 1000);\n };\n\n return {\n list,\n onLoad,\n loading,\n finished,\n };\n },\n};\n
\n<van-list\n v-model:loading="loading"\n v-model:error="error"\n error-text="Request failed. Click to reload"\n @load="onLoad"\n>\n <van-cell v-for="item in list" :key="item" :title="item" />\n</van-list>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const list = ref([]);\n const error = ref(false);\n const loading = ref(false);\n const onLoad = () => {\n fetchSomeThing().catch(() => {\n error.value = true;\n });\n };\n\n return {\n list,\n error,\n onLoad,\n loading,\n };\n },\n};\n
\n<van-pull-refresh v-model="refreshing" @refresh="onRefresh">\n <van-list\n v-model:loading="loading"\n :finished="finished"\n finished-text="Finished"\n @load="onLoad"\n >\n <van-cell v-for="item in list" :key="item" :title="item" />\n </van-list>\n</van-pull-refresh>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const list = ref([]);\n const loading = ref(false);\n const finished = ref(false);\n const refreshing = ref(false);\n\n const onLoad = () => {\n setTimeout(() => {\n if (refreshing.value) {\n list.value = [];\n refreshing.value = false;\n }\n\n for (let i = 0; i < 10; i++) {\n list.value.push(list.value.length + 1);\n }\n loading.value = false;\n\n if (list.value.length >= 40) {\n finished.value = true;\n }\n }, 1000);\n };\n\n const onRefresh = () => {\n finished.value = false;\n loading.value = true;\n onLoad();\n };\n\n return {\n list,\n onLoad,\n loading,\n finished,\n onRefresh,\n refreshing,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model:loading | \nWhether to show loading info, the load event will not be Emitted when loading | \nboolean | \nfalse | \n
v-model:error | \nWhether loading is error, the load event will be Emitted only when error text clicked | \nboolean | \nfalse | \n
finished | \nWhether loading is finished, the load event will not be Emitted when finished | \nboolean | \nfalse | \n
offset | \nThe load event will be Emitted when the distance between the scrollbar and the bottom is less than offset | \nnumber | string | \n300 | \n
loading-text | \nLoading text | \nstring | \nLoading... | \n
finished-text | \nFinished text | \nstring | \n- | \n
error-text | \nError loaded text | \nstring | \n- | \n
immediate-check | \nWhether to check loading position immediately after mounted | \nboolean | \ntrue | \n
disabled | \nWhether to disable the load event | \nboolean | \nfalse | \n
direction | \nScroll direction, can be set to up | \nstring | \ndown | \n
scroller v4.6.4 | \nSpecifies the node that needs to listen for scroll events, defaults to the nearest parent scroll node | \nElement | \n- | \n
Event | \nDescription | \nArguments | \n
---|---|---|
load | \nEmitted when the distance between the scrollbar and the bottom is less than offset | \n- | \n
Use ref to get List instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
check | \nCheck scroll position | \n- | \n- | \n
The component exports the following type definitions:
\nimport type { ListProps, ListInstance, ListDirection } from 'vant';\n
\nListInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { ListInstance } from 'vant';\n\nconst listRef = ref<ListInstance>();\n\nlistRef.value?.check();\n
\nName | \nDescription | \n
---|---|
default | \nList content | \n
loading | \nCustom loading tips | \n
finished | \nCustom finished tips | \n
error | \nCustom error tips | \n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-list-text-color | \nvar(--van-text-color-2) | \n- | \n
--van-list-text-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-list-text-line-height | \n50px | \n- | \n
--van-list-loading-icon-size | \n16px | \n- | \n
List will listen to the scroll event of the browser and calculate the position. When the distance between the bottom of the list and the visible area is less than offset
, the List component will trigger a load
event.
A load event will be triggered immediately to load the first screen data. This feature can be disabled by the immediate-check
prop.
If the amount of data loaded in one request is too small, the List will continue to trigger the load
event until the content fills the screen or the data is fully loaded.
Therefore, you need to adjust the amount of data per request. Ideally, the amount of data per request should be able to fill the height of one screen.
\nList
has three states, understanding these states will help you use the component:
loading = false
: Not in loading. The component will detect whether to trigger the load
event according to the scroll position (if the content of the list is less than one screen, it will be triggered directly).loading = true
: During loading. Indicating that an request is being sent, and the load
event will not be triggered.finished = true
: Loading is complete. No load
will not be triggered.After each request, you need to manually set loading
to false
, indicating the end of loading.
If you use the float layout on the content, you can add the van-clearfix
class to the container to clear the float, so that the List can get the element position correctly.
<van-list>\n <div class="van-clearfix">\n <div class="float-item" />\n <div class="float-item" />\n <div class="float-item" />\n </div>\n</van-list>\n
\nIf the overflow-x: hidden
style is set on the html and body tags, it will cause the List to always trigger loading.
html,\nbody {\n overflow-x: hidden;\n}\n
\nThe reason is that when an element is styled with overflow-x: hidden
, the element\'s overflow-y
will be set to auto
by the browser, instead of the default value of visible
, causing the List can not determine the scroll container correctly. The workaround is to remove this style, or add the height: 100%
style to the html and body tags.
Setting the direction
prop to up will trigger the loading of the List component when the scrollbar is at the page top.
When using this prop, it is recommended to scroll the scroll bar to the page bottom after each data request is completed.
\nWhen the amount of data is too much, use pagination to separate the data, and load only one page at a time.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Pagination } from 'vant';\n\nconst app = createApp();\napp.use(Pagination);\n
\n<van-pagination v-model="currentPage" :total-items="24" :items-per-page="5" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentPage = ref(1);\n return { currentPage };\n },\n};\n
\n<van-pagination v-model="currentPage" :page-count="12" mode="simple" />\n
\n<van-pagination\n v-model="currentPage"\n :total-items="125"\n :show-page-size="3"\n force-ellipses\n/>\n
\n<van-pagination v-model="currentPage" :total-items="50" :show-page-size="5">\n <template #prev-text>\n <van-icon name="arrow-left" />\n </template>\n <template #next-text>\n <van-icon name="arrow" />\n </template>\n <template #page="{ text }">{{ text }}</template>\n</van-pagination>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nCurrent page number | \nnumber | \n- | \n
mode | \nMode, can be set to simple multi | \nstring | \nmulti | \n
prev-text | \nPrevious text | \nstring | \nPrevious | \n
next-text | \nNext text | \nstring | \nNext | \n
total-items | \nTotal items | \nnumber | string | \n0 | \n
items-per-page | \nItem number per page | \nnumber | string | \n10 | \n
page-count | \nThe total number of pages, if not set, will be calculated based on total-items and items-per-page | \nnumber | string | \n- | \n
show-page-size | \nCount of page size to show | \nnumber | string | \n5 | \n
force-ellipses | \nWhether to show ellipses | \nboolean | \nfalse | \n
show-prev-button v4.2.1 | \nWhether to show prev button | \nboolean | \ntrue | \n
show-next-button v4.2.1 | \nWhether to show next button | \nboolean | \ntrue | \n
Event | \nDescription | \nArguments | \n
---|---|---|
change | \nEmitted when current page changed | \n- | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
page | \nCustom pagination item | \n{ number: number, text: string, active: boolean } | \n
prev-text | \nCustom prev text | \n- | \n
next-text | \nCustom next text | \n- | \n
The component exports the following type definitions:
\nimport type { PaginationMode, PaginationProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-pagination-height | \n40px | \n- | \n
--van-pagination-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-pagination-item-width | \n36px | \n- | \n
--van-pagination-item-default-color | \nvar(--van-primary-color) | \n- | \n
--van-pagination-item-disabled-color | \nvar(--van-gray-7) | \n- | \n
--van-pagination-item-disabled-background | \nvar(--van-background) | \n- | \n
--van-pagination-background | \nvar(--van-background-2) | \n- | \n
--van-pagination-desc-color | \nvar(--van-gray-7) | \n- | \n
--van-pagination-disabled-opacity | \nvar(--van-disabled-opacity) | \n- | \n
When the amount of data is too much, use pagination to separate the data, and load only one page at a time.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Pagination } from 'vant';\n\nconst app = createApp();\napp.use(Pagination);\n
\n<van-pagination v-model="currentPage" :total-items="24" :items-per-page="5" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentPage = ref(1);\n return { currentPage };\n },\n};\n
\n<van-pagination v-model="currentPage" :page-count="12" mode="simple" />\n
\n<van-pagination\n v-model="currentPage"\n :total-items="125"\n :show-page-size="3"\n force-ellipses\n/>\n
\n<van-pagination v-model="currentPage" :total-items="50" :show-page-size="5">\n <template #prev-text>\n <van-icon name="arrow-left" />\n </template>\n <template #next-text>\n <van-icon name="arrow" />\n </template>\n <template #page="{ text }">{{ text }}</template>\n</van-pagination>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nCurrent page number | \nnumber | \n- | \n
mode | \nMode, can be set to simple multi | \nstring | \nmulti | \n
prev-text | \nPrevious text | \nstring | \nPrevious | \n
next-text | \nNext text | \nstring | \nNext | \n
total-items | \nTotal items | \nnumber | string | \n0 | \n
items-per-page | \nItem number per page | \nnumber | string | \n10 | \n
page-count | \nThe total number of pages, if not set, will be calculated based on total-items and items-per-page | \nnumber | string | \n- | \n
show-page-size | \nCount of page size to show | \nnumber | string | \n5 | \n
force-ellipses | \nWhether to show ellipses | \nboolean | \nfalse | \n
show-prev-button v4.2.1 | \nWhether to show prev button | \nboolean | \ntrue | \n
show-next-button v4.2.1 | \nWhether to show next button | \nboolean | \ntrue | \n
Event | \nDescription | \nArguments | \n
---|---|---|
change | \nEmitted when current page changed | \n- | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
page | \nCustom pagination item | \n{ number: number, text: string, active: boolean } | \n
prev-text | \nCustom prev text | \n- | \n
next-text | \nCustom next text | \n- | \n
The component exports the following type definitions:
\nimport type { PaginationMode, PaginationProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-pagination-height | \n40px | \n- | \n
--van-pagination-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-pagination-item-width | \n36px | \n- | \n
--van-pagination-item-default-color | \nvar(--van-primary-color) | \n- | \n
--van-pagination-item-disabled-color | \nvar(--van-gray-7) | \n- | \n
--van-pagination-item-disabled-background | \nvar(--van-background) | \n- | \n
--van-pagination-background | \nvar(--van-background-2) | \n- | \n
--van-pagination-desc-color | \nvar(--van-gray-7) | \n- | \n
--van-pagination-disabled-opacity | \nvar(--van-disabled-opacity) | \n- | \n
\u672C\u6587\u6863\u63D0\u4F9B\u4E86\u4ECE Vant 2 \u5230 Vant 3 \u7684\u5347\u7EA7\u6307\u5357\u3002
\nVant 3 \u662F\u57FA\u4E8E Vue 3 \u5F00\u53D1\u7684\uFF0C\u5728\u4F7F\u7528 Vant 3 \u524D\uFF0C\u8BF7\u5C06\u9879\u76EE\u4E2D\u7684 Vue \u5347\u7EA7\u5230 3.0 \u4EE5\u4E0A\u7248\u672C\u3002
\nVant 2 \u5230 Vant 3 \u5B58\u5728\u4E00\u4E9B\u4E0D\u517C\u5BB9\u66F4\u65B0\uFF0C\u8BF7\u4ED4\u7EC6\u9605\u8BFB\u4E0B\u65B9\u7684\u4E0D\u517C\u5BB9\u66F4\u65B0\u5185\u5BB9\uFF0C\u5E76\u4F9D\u6B21\u5904\u7406\u3002
\nGoodsAction \u5546\u54C1\u5BFC\u822A\u7EC4\u4EF6\u91CD\u547D\u540D\u4E3A ActionBar \u884C\u52A8\u680F\u3002
\n<!-- Vant 2 -->\n<van-goods-action>\n <van-goods-action-icon text="\u56FE\u6807" />\n <van-goods-action-button text="\u6309\u94AE" />\n</van-goods-action>\n\n<!-- Vant 3 -->\n<van-action-bar>\n <van-action-bar-icon text="\u56FE\u6807" />\n <van-action-bar-button text="\u6309\u94AE" />\n</van-action-bar>\n
\n\u79FB\u9664 SwitchCell \u7EC4\u4EF6\uFF0C\u53EF\u4EE5\u76F4\u63A5\u4F7F\u7528 Cell \u548C Switch \u7EC4\u4EF6\u4EE3\u66FF\u3002
\n<!-- Vant 2 -->\n<van-switch-cell title="\u6807\u9898" v-model="checked" />\n\n<!-- Vant 3 -->\n<van-cell center title="\u6807\u9898">\n <template #right-icon>\n <van-switch v-model="checked" size="24" />\n </template>\n</van-cell>\n
\n\u4E3A\u4E86\u9002\u914D Vue 3 \u7684 v-model API \u7528\u6CD5\u53D8\u66F4\uFF0C\u6240\u6709\u63D0\u4F9B v-model \u5C5E\u6027\u7684\u7EC4\u4EF6\u5728\u7528\u6CD5\u4E0A\u6709\u4E00\u5B9A\u8C03\u6574\u3002\u4EE5\u4E0B\u5F39\u7A97\u7C7B\u7EC4\u4EF6\u7684 v-model
\u88AB\u91CD\u547D\u540D\u4E3A v-model:show
\uFF1A
<!-- Vant 2 -->\n<van-popup v-model="show" />\n\n<!-- Vant 3 -->\n<van-popup v-model:show="show" />\n
\n\u4EE5\u4E0B\u8868\u5355\u578B\u7EC4\u4EF6 v-model \u5BF9\u5E94\u7684 prop \u91CD\u547D\u540D\u4E3A modelValue
\uFF0Cevent \u91CD\u547D\u540D\u4E3A update:modelValue
\uFF1A
<!-- Vant 2 -->\n<van-field :value="value" @input="onInput" />\n\n<!-- Vant 3 -->\n<van-field :model-value="value" @update:model-value="onInput" />\n
\nv-model
\u91CD\u547D\u540D\u4E3A v-model:currentRate
v-model
\u91CD\u547D\u540D\u4E3A v-model:code
v-model
\u91CD\u547D\u540D\u4E3A v-model:loading
\uFF0Cerror.sync
\u91CD\u547D\u540D\u4E3A v-model:error
v-model
\u91CD\u547D\u540D\u4E3A v-model:active
active-id.sync
\u91CD\u547D\u540D\u4E3A v-model:active-id
main-active-index.sync
\u91CD\u547D\u540D\u4E3A v-model:main-active-index
\u5728\u4E4B\u524D\u7684\u7248\u672C\u4E2D\uFF0C\u6211\u4EEC\u901A\u8FC7 info \u5C5E\u6027\u6765\u5C55\u793A\u56FE\u6807\u53F3\u4E0A\u89D2\u7684\u5FBD\u6807\u4FE1\u606F\uFF0C\u4E3A\u4E86\u66F4\u7B26\u5408\u793E\u533A\u7684\u547D\u540D\u4E60\u60EF\uFF0C\u6211\u4EEC\u5C06\u8FD9\u4E2A\u5C5E\u6027\u91CD\u547D\u540D\u4E3A badge\uFF0C\u5F71\u54CD\u4EE5\u4E0B\u7EC4\u4EF6\uFF1A
\n\u540C\u65F6\u5185\u90E8\u4F7F\u7528\u7684 Info \u7EC4\u4EF6\u4E5F\u4F1A\u91CD\u547D\u540D\u4E3A Badge\u3002
\n<!-- Vant 2 -->\n<van-icon info="5" />\n\n<!-- Vant 3 -->\n<van-icon badge="5" />\n
\nVue 3.0 \u4E2D\u589E\u52A0\u4E86 Teleport
\u7EC4\u4EF6\uFF0C\u63D0\u4F9B\u5C06\u7EC4\u4EF6\u6E32\u67D3\u5230\u4EFB\u610F DOM \u4F4D\u7F6E\u7684\u80FD\u529B\uFF0CVant 2 \u4E5F\u901A\u8FC7 get-container
\u5C5E\u6027\u63D0\u4F9B\u4E86\u7C7B\u4F3C\u7684\u80FD\u529B\u3002\u4E3A\u4E86\u4E0E\u5B98\u65B9\u7684 API \u4FDD\u6301\u4E00\u81F4\uFF0CVant \u4E2D\u7684 get-container
\u5C5E\u6027\u5C06\u91CD\u547D\u540D\u4E3A teleport
\u3002
<!-- Vant 2 -->\n<template>\n <van-popup get-container="body" />\n <van-popup :get-container="getContainer" />\n</template>\n<script>\n export default {\n methods: {\n getContainer() {\n return document.querySelector('#container');\n },\n },\n };\n</script>\n\n<!-- Vant 3 -->\n<template>\n <van-popup teleport="body" />\n <van-popup :teleport="container" />\n</template>\n<script>\n export default {\n beforeCreate() {\n this.container = document.querySelector('#container');\n },\n };\n</script>\n
\nchange
\u4E8B\u4EF6\u53C2\u6570\u4E0D\u518D\u4F20\u5165\u7EC4\u4EF6\u5B9E\u4F8Binfo
\u8C03\u6574\u4E3A primary
primary
\u8C03\u6574\u4E3A success
native-type
\u7684\u9ED8\u8BA4\u503C\u7531 submit
\u8C03\u6574\u4E3A button
@click.stop
\u6765\u963B\u6B62\u4E8B\u4EF6\u5192\u6CE1allow-html
\u5C5E\u6027before-close
\u5C5E\u6027\u7528\u6CD5\u8C03\u6574\uFF0C\u4E0D\u518D\u4F20\u5165 done \u51FD\u6570\uFF0C\u800C\u662F\u901A\u8FC7\u8FD4\u56DE Promise \u6765\u63A7\u5236change
\u4E8B\u4EF6\u53C2\u6570\u4E0D\u518D\u4F20\u5165\u7EC4\u4EF6\u5B9E\u4F8Basync-close
\u5C5E\u6027\uFF0C\u53EF\u4EE5\u4F7F\u7528\u65B0\u589E\u7684 before-close
\u5C5E\u6027\u4EE3\u66FFchange
\u4E8B\u4EF6\u53C2\u6570\u4E0D\u518D\u4F20\u5165\u7EC4\u4EF6\u5B9E\u4F8Ballow-html
\u5C5E\u6027show-toolbar
\u5C5E\u6027confirm
\u3001change
\u4E8B\u4EF6\u8FD4\u56DE\u7684\u56DE\u8C03\u53C2\u6570\u5C06\u5305\u542B\u4E3A\u5B8C\u6574\u7684\u9009\u9879\u5BF9\u8C61\u3002trigger
\u5C5E\u6027\u7684\u9ED8\u8BA4\u503C\u8C03\u6574\u4E3A click
async-change
\u5C5E\u6027\u91CD\u547D\u540D\u4E3A before-change
\uFF0C\u5E76\u8C03\u6574\u4F7F\u7528\u65B9\u6CD5open
\u4E8B\u4EF6\u7684 detail
\u53C2\u6570\u91CD\u547D\u540D\u4E3A name
on-close
\u5C5E\u6027\u91CD\u547D\u540D\u4E3A before-close
\uFF0C\u5E76\u8C03\u6574\u53C2\u6570\u7ED3\u6784before-close
\u5C5E\u6027\u4E0D\u518D\u4F20\u5165\u7EC4\u4EF6\u5B9E\u4F8Bmask
\u5C5E\u6027\u91CD\u547D\u540D\u4E3A overlay
navclick
\u4E8B\u4EF6\u91CD\u547D\u540D\u4E3A click-nav
itemclick
\u4E8B\u4EF6\u91CD\u547D\u540D\u4E3A click-item
Vant 2 \u4E2D\u9ED8\u8BA4\u63D0\u4F9B\u4E86 $toast
\u3001$dialog
\u7B49\u5168\u5C40\u65B9\u6CD5\uFF0C\u4F46 Vue 3.0 \u4E0D\u518D\u652F\u6301\u76F4\u63A5\u5728 Vue \u7684\u539F\u578B\u94FE\u4E0A\u6302\u8F7D\u65B9\u6CD5\uFF0C\u56E0\u6B64\u4ECE Vant 3.0 \u5F00\u59CB\uFF0C\u4F7F\u7528\u5168\u5C40\u65B9\u6CD5\u524D\u5FC5\u987B\u5148\u901A\u8FC7 app.use
\u5C06\u7EC4\u4EF6\u6CE8\u518C\u5230\u5BF9\u5E94\u7684 app \u4E0A\u3002
import { Toast, Dialog, Notify } from 'vant';\n\n// \u5C06 Toast \u7B49\u7EC4\u4EF6\u6CE8\u518C\u5230 app \u4E0A\napp.use(Toast);\napp.use(Dialog);\napp.use(Notify);\n\n// app \u5185\u7684\u5B50\u7EC4\u4EF6\u53EF\u4EE5\u76F4\u63A5\u8C03\u7528 $toast \u7B49\u65B9\u6CD5\nexport default {\n mounted() {\n this.$toast('\u63D0\u793A\u6587\u6848');\n },\n};\n
\n\u672C\u6587\u6863\u63D0\u4F9B\u4E86\u4ECE Vant 2 \u5230 Vant 3 \u7684\u5347\u7EA7\u6307\u5357\u3002
\nVant 3 \u662F\u57FA\u4E8E Vue 3 \u5F00\u53D1\u7684\uFF0C\u5728\u4F7F\u7528 Vant 3 \u524D\uFF0C\u8BF7\u5C06\u9879\u76EE\u4E2D\u7684 Vue \u5347\u7EA7\u5230 3.0 \u4EE5\u4E0A\u7248\u672C\u3002
\nVant 2 \u5230 Vant 3 \u5B58\u5728\u4E00\u4E9B\u4E0D\u517C\u5BB9\u66F4\u65B0\uFF0C\u8BF7\u4ED4\u7EC6\u9605\u8BFB\u4E0B\u65B9\u7684\u4E0D\u517C\u5BB9\u66F4\u65B0\u5185\u5BB9\uFF0C\u5E76\u4F9D\u6B21\u5904\u7406\u3002
\nGoodsAction \u5546\u54C1\u5BFC\u822A\u7EC4\u4EF6\u91CD\u547D\u540D\u4E3A ActionBar \u884C\u52A8\u680F\u3002
\n<!-- Vant 2 -->\n<van-goods-action>\n <van-goods-action-icon text="\u56FE\u6807" />\n <van-goods-action-button text="\u6309\u94AE" />\n</van-goods-action>\n\n<!-- Vant 3 -->\n<van-action-bar>\n <van-action-bar-icon text="\u56FE\u6807" />\n <van-action-bar-button text="\u6309\u94AE" />\n</van-action-bar>\n
\n\u79FB\u9664 SwitchCell \u7EC4\u4EF6\uFF0C\u53EF\u4EE5\u76F4\u63A5\u4F7F\u7528 Cell \u548C Switch \u7EC4\u4EF6\u4EE3\u66FF\u3002
\n<!-- Vant 2 -->\n<van-switch-cell title="\u6807\u9898" v-model="checked" />\n\n<!-- Vant 3 -->\n<van-cell center title="\u6807\u9898">\n <template #right-icon>\n <van-switch v-model="checked" size="24" />\n </template>\n</van-cell>\n
\n\u4E3A\u4E86\u9002\u914D Vue 3 \u7684 v-model API \u7528\u6CD5\u53D8\u66F4\uFF0C\u6240\u6709\u63D0\u4F9B v-model \u5C5E\u6027\u7684\u7EC4\u4EF6\u5728\u7528\u6CD5\u4E0A\u6709\u4E00\u5B9A\u8C03\u6574\u3002\u4EE5\u4E0B\u5F39\u7A97\u7C7B\u7EC4\u4EF6\u7684 v-model
\u88AB\u91CD\u547D\u540D\u4E3A v-model:show
\uFF1A
<!-- Vant 2 -->\n<van-popup v-model="show" />\n\n<!-- Vant 3 -->\n<van-popup v-model:show="show" />\n
\n\u4EE5\u4E0B\u8868\u5355\u578B\u7EC4\u4EF6 v-model \u5BF9\u5E94\u7684 prop \u91CD\u547D\u540D\u4E3A modelValue
\uFF0Cevent \u91CD\u547D\u540D\u4E3A update:modelValue
\uFF1A
<!-- Vant 2 -->\n<van-field :value="value" @input="onInput" />\n\n<!-- Vant 3 -->\n<van-field :model-value="value" @update:model-value="onInput" />\n
\nv-model
\u91CD\u547D\u540D\u4E3A v-model:currentRate
v-model
\u91CD\u547D\u540D\u4E3A v-model:code
v-model
\u91CD\u547D\u540D\u4E3A v-model:loading
\uFF0Cerror.sync
\u91CD\u547D\u540D\u4E3A v-model:error
v-model
\u91CD\u547D\u540D\u4E3A v-model:active
active-id.sync
\u91CD\u547D\u540D\u4E3A v-model:active-id
main-active-index.sync
\u91CD\u547D\u540D\u4E3A v-model:main-active-index
\u5728\u4E4B\u524D\u7684\u7248\u672C\u4E2D\uFF0C\u6211\u4EEC\u901A\u8FC7 info \u5C5E\u6027\u6765\u5C55\u793A\u56FE\u6807\u53F3\u4E0A\u89D2\u7684\u5FBD\u6807\u4FE1\u606F\uFF0C\u4E3A\u4E86\u66F4\u7B26\u5408\u793E\u533A\u7684\u547D\u540D\u4E60\u60EF\uFF0C\u6211\u4EEC\u5C06\u8FD9\u4E2A\u5C5E\u6027\u91CD\u547D\u540D\u4E3A badge\uFF0C\u5F71\u54CD\u4EE5\u4E0B\u7EC4\u4EF6\uFF1A
\n\u540C\u65F6\u5185\u90E8\u4F7F\u7528\u7684 Info \u7EC4\u4EF6\u4E5F\u4F1A\u91CD\u547D\u540D\u4E3A Badge\u3002
\n<!-- Vant 2 -->\n<van-icon info="5" />\n\n<!-- Vant 3 -->\n<van-icon badge="5" />\n
\nVue 3.0 \u4E2D\u589E\u52A0\u4E86 Teleport
\u7EC4\u4EF6\uFF0C\u63D0\u4F9B\u5C06\u7EC4\u4EF6\u6E32\u67D3\u5230\u4EFB\u610F DOM \u4F4D\u7F6E\u7684\u80FD\u529B\uFF0CVant 2 \u4E5F\u901A\u8FC7 get-container
\u5C5E\u6027\u63D0\u4F9B\u4E86\u7C7B\u4F3C\u7684\u80FD\u529B\u3002\u4E3A\u4E86\u4E0E\u5B98\u65B9\u7684 API \u4FDD\u6301\u4E00\u81F4\uFF0CVant \u4E2D\u7684 get-container
\u5C5E\u6027\u5C06\u91CD\u547D\u540D\u4E3A teleport
\u3002
<!-- Vant 2 -->\n<template>\n <van-popup get-container="body" />\n <van-popup :get-container="getContainer" />\n</template>\n<script>\n export default {\n methods: {\n getContainer() {\n return document.querySelector('#container');\n },\n },\n };\n</script>\n\n<!-- Vant 3 -->\n<template>\n <van-popup teleport="body" />\n <van-popup :teleport="container" />\n</template>\n<script>\n export default {\n beforeCreate() {\n this.container = document.querySelector('#container');\n },\n };\n</script>\n
\nchange
\u4E8B\u4EF6\u53C2\u6570\u4E0D\u518D\u4F20\u5165\u7EC4\u4EF6\u5B9E\u4F8Binfo
\u8C03\u6574\u4E3A primary
primary
\u8C03\u6574\u4E3A success
native-type
\u7684\u9ED8\u8BA4\u503C\u7531 submit
\u8C03\u6574\u4E3A button
@click.stop
\u6765\u963B\u6B62\u4E8B\u4EF6\u5192\u6CE1allow-html
\u5C5E\u6027before-close
\u5C5E\u6027\u7528\u6CD5\u8C03\u6574\uFF0C\u4E0D\u518D\u4F20\u5165 done \u51FD\u6570\uFF0C\u800C\u662F\u901A\u8FC7\u8FD4\u56DE Promise \u6765\u63A7\u5236change
\u4E8B\u4EF6\u53C2\u6570\u4E0D\u518D\u4F20\u5165\u7EC4\u4EF6\u5B9E\u4F8Basync-close
\u5C5E\u6027\uFF0C\u53EF\u4EE5\u4F7F\u7528\u65B0\u589E\u7684 before-close
\u5C5E\u6027\u4EE3\u66FFchange
\u4E8B\u4EF6\u53C2\u6570\u4E0D\u518D\u4F20\u5165\u7EC4\u4EF6\u5B9E\u4F8Ballow-html
\u5C5E\u6027show-toolbar
\u5C5E\u6027confirm
\u3001change
\u4E8B\u4EF6\u8FD4\u56DE\u7684\u56DE\u8C03\u53C2\u6570\u5C06\u5305\u542B\u4E3A\u5B8C\u6574\u7684\u9009\u9879\u5BF9\u8C61\u3002trigger
\u5C5E\u6027\u7684\u9ED8\u8BA4\u503C\u8C03\u6574\u4E3A click
async-change
\u5C5E\u6027\u91CD\u547D\u540D\u4E3A before-change
\uFF0C\u5E76\u8C03\u6574\u4F7F\u7528\u65B9\u6CD5open
\u4E8B\u4EF6\u7684 detail
\u53C2\u6570\u91CD\u547D\u540D\u4E3A name
on-close
\u5C5E\u6027\u91CD\u547D\u540D\u4E3A before-close
\uFF0C\u5E76\u8C03\u6574\u53C2\u6570\u7ED3\u6784before-close
\u5C5E\u6027\u4E0D\u518D\u4F20\u5165\u7EC4\u4EF6\u5B9E\u4F8Bmask
\u5C5E\u6027\u91CD\u547D\u540D\u4E3A overlay
navclick
\u4E8B\u4EF6\u91CD\u547D\u540D\u4E3A click-nav
itemclick
\u4E8B\u4EF6\u91CD\u547D\u540D\u4E3A click-item
Vant 2 \u4E2D\u9ED8\u8BA4\u63D0\u4F9B\u4E86 $toast
\u3001$dialog
\u7B49\u5168\u5C40\u65B9\u6CD5\uFF0C\u4F46 Vue 3.0 \u4E0D\u518D\u652F\u6301\u76F4\u63A5\u5728 Vue \u7684\u539F\u578B\u94FE\u4E0A\u6302\u8F7D\u65B9\u6CD5\uFF0C\u56E0\u6B64\u4ECE Vant 3.0 \u5F00\u59CB\uFF0C\u4F7F\u7528\u5168\u5C40\u65B9\u6CD5\u524D\u5FC5\u987B\u5148\u901A\u8FC7 app.use
\u5C06\u7EC4\u4EF6\u6CE8\u518C\u5230\u5BF9\u5E94\u7684 app \u4E0A\u3002
import { Toast, Dialog, Notify } from 'vant';\n\n// \u5C06 Toast \u7B49\u7EC4\u4EF6\u6CE8\u518C\u5230 app \u4E0A\napp.use(Toast);\napp.use(Dialog);\napp.use(Notify);\n\n// app \u5185\u7684\u5B50\u7EC4\u4EF6\u53EF\u4EE5\u76F4\u63A5\u8C03\u7528 $toast \u7B49\u65B9\u6CD5\nexport default {\n mounted() {\n this.$toast('\u63D0\u793A\u6587\u6848');\n },\n};\n
\n\u6B65\u8FDB\u5668\u7531\u589E\u52A0\u6309\u94AE\u3001\u51CF\u5C11\u6309\u94AE\u548C\u8F93\u5165\u6846\u7EC4\u6210\uFF0C\u7528\u4E8E\u5728\u4E00\u5B9A\u8303\u56F4\u5185\u8F93\u5165\u3001\u8C03\u6574\u6570\u5B57\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Stepper } from 'vant';\n\nconst app = createApp();\napp.use(Stepper);\n
\n\u901A\u8FC7 v-model
\u7ED1\u5B9A\u8F93\u5165\u503C\uFF0C\u53EF\u4EE5\u901A\u8FC7 change
\u4E8B\u4EF6\u76D1\u542C\u5230\u8F93\u5165\u503C\u7684\u53D8\u5316\u3002
<van-stepper v-model="value" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(1);\n return { value };\n },\n};\n
\n\u901A\u8FC7 step
\u5C5E\u6027\u8BBE\u7F6E\u6BCF\u6B21\u70B9\u51FB\u589E\u52A0\u6216\u51CF\u5C11\u6309\u94AE\u65F6\u53D8\u5316\u7684\u503C\uFF0C\u9ED8\u8BA4\u4E3A 1
\u3002
<van-stepper v-model="value" step="2" />\n
\n\u901A\u8FC7 min
\u548C max
\u5C5E\u6027\u9650\u5236\u8F93\u5165\u503C\u7684\u8303\u56F4\uFF0C\u9ED8\u8BA4\u8D85\u51FA\u8303\u56F4\u540E\u4F1A\u81EA\u52A8\u6821\u6B63\u6700\u5927\u503C\u6216\u6700\u5C0F\u503C\uFF0C\u901A\u8FC7 auto-fixed
\u53EF\u4EE5\u5173\u95ED\u81EA\u52A8\u6821\u6B63\u3002
<van-stepper v-model="value" min="5" max="8" />\n
\n\u8BBE\u7F6E integer
\u5C5E\u6027\u540E\uFF0C\u8F93\u5165\u6846\u5C06\u9650\u5236\u53EA\u80FD\u8F93\u5165\u6574\u6570\u3002
<van-stepper v-model="value" integer />\n
\n\u901A\u8FC7\u8BBE\u7F6E disabled
\u5C5E\u6027\u6765\u7981\u7528\u6B65\u8FDB\u5668\uFF0C\u7981\u7528\u72B6\u6001\u4E0B\u65E0\u6CD5\u70B9\u51FB\u6309\u94AE\u6216\u4FEE\u6539\u8F93\u5165\u6846\u3002
<van-stepper v-model="value" disabled />\n
\n\u901A\u8FC7\u8BBE\u7F6E disable-input
\u5C5E\u6027\u6765\u7981\u7528\u8F93\u5165\u6846\uFF0C\u6B64\u65F6\u6309\u94AE\u4ECD\u7136\u53EF\u4EE5\u70B9\u51FB\u3002
<van-stepper v-model="value" disable-input />\n
\n\u901A\u8FC7\u8BBE\u7F6E decimal-length
\u5C5E\u6027\u53EF\u4EE5\u4FDD\u7559\u56FA\u5B9A\u7684\u5C0F\u6570\u4F4D\u6570\u3002
<van-stepper v-model="value" step="0.2" :decimal-length="1" />\n
\n\u901A\u8FC7 input-width
\u5C5E\u6027\u8BBE\u7F6E\u8F93\u5165\u6846\u5BBD\u5EA6\uFF0C\u901A\u8FC7 button-size
\u5C5E\u6027\u8BBE\u7F6E\u6309\u94AE\u5927\u5C0F\u548C\u8F93\u5165\u6846\u9AD8\u5EA6\u3002
<van-stepper v-model="value" input-width="40px" button-size="32px" />\n
\n\u901A\u8FC7 before-change
\u5C5E\u6027\u53EF\u4EE5\u5728\u8F93\u5165\u503C\u53D8\u5316\u524D\u8FDB\u884C\u6821\u9A8C\u548C\u62E6\u622A\u3002
<van-stepper v-model="value" :before-change="beforeChange" />\n
\nimport { ref } from 'vue';\nimport { closeToast, showLoadingToast } from 'vant';\n\nexport default {\n setup() {\n const value = ref(1);\n\n const beforeChange = (value) => {\n showLoadingToast({ forbidClick: true });\n\n return new Promise((resolve) => {\n setTimeout(() => {\n closeToast();\n // \u5728 resolve \u51FD\u6570\u4E2D\u8FD4\u56DE true \u6216 false\n resolve(true);\n }, 500);\n });\n };\n\n return {\n value,\n beforeChange,\n };\n },\n};\n
\n\u5C06 theme
\u8BBE\u7F6E\u4E3A round
\u6765\u5C55\u793A\u5706\u89D2\u98CE\u683C\u7684\u6B65\u8FDB\u5668\u3002
<van-stepper v-model="value" theme="round" button-size="22" disable-input />\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u8F93\u5165\u7684\u503C | \nnumber | string | \n- | \n
min | \n\u6700\u5C0F\u503C | \nnumber | string | \n1 | \n
max | \n\u6700\u5927\u503C | \nnumber | string | \n- | \n
auto-fixed | \n\u662F\u5426\u81EA\u52A8\u6821\u6B63\u8D85\u51FA\u9650\u5236\u8303\u56F4\u7684\u6570\u503C\uFF0C\u8BBE\u7F6E\u4E3A false \u540E\u8F93\u5165\u8D85\u8FC7\u9650\u5236\u8303\u56F4\u7684\u6570\u503C\u5C06\u4E0D\u4F1A\u81EA\u52A8\u6821\u6B63 | \nboolean | \ntrue | \n
default-value | \n\u521D\u59CB\u503C\uFF0C\u5F53 v-model \u4E3A\u7A7A\u65F6\u751F\u6548 | \nnumber | string | \n1 | \n
step | \n\u6B65\u957F\uFF0C\u6BCF\u6B21\u70B9\u51FB\u65F6\u6539\u53D8\u7684\u503C | \nnumber | string | \n1 | \n
name | \n\u6807\u8BC6\u7B26\uFF0C\u901A\u5E38\u4E3A\u4E00\u4E2A\u552F\u4E00\u7684\u5B57\u7B26\u4E32\u6216\u6570\u5B57\uFF0C\u53EF\u4EE5\u5728 change \u4E8B\u4EF6\u56DE\u8C03\u53C2\u6570\u4E2D\u83B7\u53D6 | \nnumber | string | \n- | \n
input-width | \n\u8F93\u5165\u6846\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n32px | \n
button-size | \n\u6309\u94AE\u5927\u5C0F\u4EE5\u53CA\u8F93\u5165\u6846\u9AD8\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n28px | \n
decimal-length | \n\u56FA\u5B9A\u663E\u793A\u7684\u5C0F\u6570\u4F4D\u6570 | \nnumber | string | \n- | \n
theme | \n\u6837\u5F0F\u98CE\u683C\uFF0C\u53EF\u9009\u503C\u4E3A round | \nstring | \n- | \n
placeholder | \n\u8F93\u5165\u6846\u5360\u4F4D\u63D0\u793A\u6587\u5B57 | \nstring | \n- | \n
integer | \n\u662F\u5426\u53EA\u5141\u8BB8\u8F93\u5165\u6574\u6570 | \nboolean | \nfalse | \n
disabled | \n\u662F\u5426\u7981\u7528\u6B65\u8FDB\u5668 | \nboolean | \nfalse | \n
disable-plus | \n\u662F\u5426\u7981\u7528\u589E\u52A0\u6309\u94AE | \nboolean | \nfalse | \n
disable-minus | \n\u662F\u5426\u7981\u7528\u51CF\u5C11\u6309\u94AE | \nboolean | \nfalse | \n
disable-input | \n\u662F\u5426\u7981\u7528\u8F93\u5165\u6846 | \nboolean | \nfalse | \n
before-change | \n\u8F93\u5165\u503C\u53D8\u5316\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u963B\u6B62\u8F93\u5165\uFF0C\u652F\u6301\u8FD4\u56DE Promise | \n(value: number | string) => boolean | Promise<boolean> | \nfalse | \n
show-plus | \n\u662F\u5426\u663E\u793A\u589E\u52A0\u6309\u94AE | \nboolean | \ntrue | \n
show-minus | \n\u662F\u5426\u663E\u793A\u51CF\u5C11\u6309\u94AE | \nboolean | \ntrue | \n
show-input | \n\u662F\u5426\u663E\u793A\u8F93\u5165\u6846 | \nboolean | \ntrue | \n
long-press | \n\u662F\u5426\u5F00\u542F\u957F\u6309\u624B\u52BF\uFF0C\u5F00\u542F\u540E\u53EF\u4EE5\u957F\u6309\u589E\u52A0\u548C\u51CF\u5C11\u6309\u94AE | \nboolean | \ntrue | \n
allow-empty | \n\u662F\u5426\u5141\u8BB8\u8F93\u5165\u7684\u503C\u4E3A\u7A7A\uFF0C\u8BBE\u7F6E\u4E3A true \u540E\u5141\u8BB8\u4F20\u5165\u7A7A\u5B57\u7B26\u4E32 | \nboolean | \nfalse | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6 | \nvalue: string, detail: { name: string } | \n
overlimit | \n\u70B9\u51FB\u4E0D\u53EF\u7528\u7684\u6309\u94AE\u65F6\u89E6\u53D1 | \n- | \n
plus | \n\u70B9\u51FB\u589E\u52A0\u6309\u94AE\u65F6\u89E6\u53D1 | \n- | \n
minus | \n\u70B9\u51FB\u51CF\u5C11\u6309\u94AE\u65F6\u89E6\u53D1 | \n- | \n
focus | \n\u8F93\u5165\u6846\u805A\u7126\u65F6\u89E6\u53D1 | \nevent: Event | \n
blur | \n\u8F93\u5165\u6846\u5931\u7126\u65F6\u89E6\u53D1 | \nevent: Event | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { StepperTheme, StepperProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-stepper-background | \nvar(--van-active-color) | \n- | \n
--van-stepper-button-icon-color | \nvar(--van-text-color) | \n- | \n
--van-stepper-button-disabled-color | \nvar(--van-background) | \n- | \n
--van-stepper-button-disabled-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-stepper-button-round-theme-color | \nvar(--van-primary-color) | \n- | \n
--van-stepper-input-width | \n32px | \n- | \n
--van-stepper-input-height | \n28px | \n- | \n
--van-stepper-input-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-stepper-input-line-height | \nnormal | \n- | \n
--van-stepper-input-text-color | \nvar(--van-text-color) | \n- | \n
--van-stepper-input-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-stepper-input-disabled-background | \nvar(--van-active-color) | \n- | \n
--van-stepper-radius | \nvar(--van-radius-md) | \n- | \n
\u8FD9\u662F\u56E0\u4E3A\u7528\u6237\u8F93\u5165\u8FC7\u7A0B\u4E2D\u53EF\u80FD\u51FA\u73B0\u5C0F\u6570\u70B9\u6216\u7A7A\u503C\uFF0C\u6BD4\u5982 1.
\uFF0C\u8FD9\u79CD\u60C5\u51B5\u4E0B\u7EC4\u4EF6\u4F1A\u629B\u51FA\u5B57\u7B26\u4E32\u7C7B\u578B\u3002
\u5982\u679C\u5E0C\u671B value \u4FDD\u6301 number \u7C7B\u578B\uFF0C\u53EF\u4EE5\u5728 v-model \u4E0A\u6DFB\u52A0 number
\u4FEE\u9970\u7B26\uFF1A
<van-stepper v-model.number="value" />\n
\n\u6B65\u8FDB\u5668\u7531\u589E\u52A0\u6309\u94AE\u3001\u51CF\u5C11\u6309\u94AE\u548C\u8F93\u5165\u6846\u7EC4\u6210\uFF0C\u7528\u4E8E\u5728\u4E00\u5B9A\u8303\u56F4\u5185\u8F93\u5165\u3001\u8C03\u6574\u6570\u5B57\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Stepper } from 'vant';\n\nconst app = createApp();\napp.use(Stepper);\n
\n\u901A\u8FC7 v-model
\u7ED1\u5B9A\u8F93\u5165\u503C\uFF0C\u53EF\u4EE5\u901A\u8FC7 change
\u4E8B\u4EF6\u76D1\u542C\u5230\u8F93\u5165\u503C\u7684\u53D8\u5316\u3002
<van-stepper v-model="value" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const value = ref(1);\n return { value };\n },\n};\n
\n\u901A\u8FC7 step
\u5C5E\u6027\u8BBE\u7F6E\u6BCF\u6B21\u70B9\u51FB\u589E\u52A0\u6216\u51CF\u5C11\u6309\u94AE\u65F6\u53D8\u5316\u7684\u503C\uFF0C\u9ED8\u8BA4\u4E3A 1
\u3002
<van-stepper v-model="value" step="2" />\n
\n\u901A\u8FC7 min
\u548C max
\u5C5E\u6027\u9650\u5236\u8F93\u5165\u503C\u7684\u8303\u56F4\uFF0C\u9ED8\u8BA4\u8D85\u51FA\u8303\u56F4\u540E\u4F1A\u81EA\u52A8\u6821\u6B63\u6700\u5927\u503C\u6216\u6700\u5C0F\u503C\uFF0C\u901A\u8FC7 auto-fixed
\u53EF\u4EE5\u5173\u95ED\u81EA\u52A8\u6821\u6B63\u3002
<van-stepper v-model="value" min="5" max="8" />\n
\n\u8BBE\u7F6E integer
\u5C5E\u6027\u540E\uFF0C\u8F93\u5165\u6846\u5C06\u9650\u5236\u53EA\u80FD\u8F93\u5165\u6574\u6570\u3002
<van-stepper v-model="value" integer />\n
\n\u901A\u8FC7\u8BBE\u7F6E disabled
\u5C5E\u6027\u6765\u7981\u7528\u6B65\u8FDB\u5668\uFF0C\u7981\u7528\u72B6\u6001\u4E0B\u65E0\u6CD5\u70B9\u51FB\u6309\u94AE\u6216\u4FEE\u6539\u8F93\u5165\u6846\u3002
<van-stepper v-model="value" disabled />\n
\n\u901A\u8FC7\u8BBE\u7F6E disable-input
\u5C5E\u6027\u6765\u7981\u7528\u8F93\u5165\u6846\uFF0C\u6B64\u65F6\u6309\u94AE\u4ECD\u7136\u53EF\u4EE5\u70B9\u51FB\u3002
<van-stepper v-model="value" disable-input />\n
\n\u901A\u8FC7\u8BBE\u7F6E decimal-length
\u5C5E\u6027\u53EF\u4EE5\u4FDD\u7559\u56FA\u5B9A\u7684\u5C0F\u6570\u4F4D\u6570\u3002
<van-stepper v-model="value" step="0.2" :decimal-length="1" />\n
\n\u901A\u8FC7 input-width
\u5C5E\u6027\u8BBE\u7F6E\u8F93\u5165\u6846\u5BBD\u5EA6\uFF0C\u901A\u8FC7 button-size
\u5C5E\u6027\u8BBE\u7F6E\u6309\u94AE\u5927\u5C0F\u548C\u8F93\u5165\u6846\u9AD8\u5EA6\u3002
<van-stepper v-model="value" input-width="40px" button-size="32px" />\n
\n\u901A\u8FC7 before-change
\u5C5E\u6027\u53EF\u4EE5\u5728\u8F93\u5165\u503C\u53D8\u5316\u524D\u8FDB\u884C\u6821\u9A8C\u548C\u62E6\u622A\u3002
<van-stepper v-model="value" :before-change="beforeChange" />\n
\nimport { ref } from 'vue';\nimport { closeToast, showLoadingToast } from 'vant';\n\nexport default {\n setup() {\n const value = ref(1);\n\n const beforeChange = (value) => {\n showLoadingToast({ forbidClick: true });\n\n return new Promise((resolve) => {\n setTimeout(() => {\n closeToast();\n // \u5728 resolve \u51FD\u6570\u4E2D\u8FD4\u56DE true \u6216 false\n resolve(true);\n }, 500);\n });\n };\n\n return {\n value,\n beforeChange,\n };\n },\n};\n
\n\u5C06 theme
\u8BBE\u7F6E\u4E3A round
\u6765\u5C55\u793A\u5706\u89D2\u98CE\u683C\u7684\u6B65\u8FDB\u5668\u3002
<van-stepper v-model="value" theme="round" button-size="22" disable-input />\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model | \n\u5F53\u524D\u8F93\u5165\u7684\u503C | \nnumber | string | \n- | \n
min | \n\u6700\u5C0F\u503C | \nnumber | string | \n1 | \n
max | \n\u6700\u5927\u503C | \nnumber | string | \n- | \n
auto-fixed | \n\u662F\u5426\u81EA\u52A8\u6821\u6B63\u8D85\u51FA\u9650\u5236\u8303\u56F4\u7684\u6570\u503C\uFF0C\u8BBE\u7F6E\u4E3A false \u540E\u8F93\u5165\u8D85\u8FC7\u9650\u5236\u8303\u56F4\u7684\u6570\u503C\u5C06\u4E0D\u4F1A\u81EA\u52A8\u6821\u6B63 | \nboolean | \ntrue | \n
default-value | \n\u521D\u59CB\u503C\uFF0C\u5F53 v-model \u4E3A\u7A7A\u65F6\u751F\u6548 | \nnumber | string | \n1 | \n
step | \n\u6B65\u957F\uFF0C\u6BCF\u6B21\u70B9\u51FB\u65F6\u6539\u53D8\u7684\u503C | \nnumber | string | \n1 | \n
name | \n\u6807\u8BC6\u7B26\uFF0C\u901A\u5E38\u4E3A\u4E00\u4E2A\u552F\u4E00\u7684\u5B57\u7B26\u4E32\u6216\u6570\u5B57\uFF0C\u53EF\u4EE5\u5728 change \u4E8B\u4EF6\u56DE\u8C03\u53C2\u6570\u4E2D\u83B7\u53D6 | \nnumber | string | \n- | \n
input-width | \n\u8F93\u5165\u6846\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n32px | \n
button-size | \n\u6309\u94AE\u5927\u5C0F\u4EE5\u53CA\u8F93\u5165\u6846\u9AD8\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px | \nnumber | string | \n28px | \n
decimal-length | \n\u56FA\u5B9A\u663E\u793A\u7684\u5C0F\u6570\u4F4D\u6570 | \nnumber | string | \n- | \n
theme | \n\u6837\u5F0F\u98CE\u683C\uFF0C\u53EF\u9009\u503C\u4E3A round | \nstring | \n- | \n
placeholder | \n\u8F93\u5165\u6846\u5360\u4F4D\u63D0\u793A\u6587\u5B57 | \nstring | \n- | \n
integer | \n\u662F\u5426\u53EA\u5141\u8BB8\u8F93\u5165\u6574\u6570 | \nboolean | \nfalse | \n
disabled | \n\u662F\u5426\u7981\u7528\u6B65\u8FDB\u5668 | \nboolean | \nfalse | \n
disable-plus | \n\u662F\u5426\u7981\u7528\u589E\u52A0\u6309\u94AE | \nboolean | \nfalse | \n
disable-minus | \n\u662F\u5426\u7981\u7528\u51CF\u5C11\u6309\u94AE | \nboolean | \nfalse | \n
disable-input | \n\u662F\u5426\u7981\u7528\u8F93\u5165\u6846 | \nboolean | \nfalse | \n
before-change | \n\u8F93\u5165\u503C\u53D8\u5316\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u963B\u6B62\u8F93\u5165\uFF0C\u652F\u6301\u8FD4\u56DE Promise | \n(value: number | string) => boolean | Promise<boolean> | \nfalse | \n
show-plus | \n\u662F\u5426\u663E\u793A\u589E\u52A0\u6309\u94AE | \nboolean | \ntrue | \n
show-minus | \n\u662F\u5426\u663E\u793A\u51CF\u5C11\u6309\u94AE | \nboolean | \ntrue | \n
show-input | \n\u662F\u5426\u663E\u793A\u8F93\u5165\u6846 | \nboolean | \ntrue | \n
long-press | \n\u662F\u5426\u5F00\u542F\u957F\u6309\u624B\u52BF\uFF0C\u5F00\u542F\u540E\u53EF\u4EE5\u957F\u6309\u589E\u52A0\u548C\u51CF\u5C11\u6309\u94AE | \nboolean | \ntrue | \n
allow-empty | \n\u662F\u5426\u5141\u8BB8\u8F93\u5165\u7684\u503C\u4E3A\u7A7A\uFF0C\u8BBE\u7F6E\u4E3A true \u540E\u5141\u8BB8\u4F20\u5165\u7A7A\u5B57\u7B26\u4E32 | \nboolean | \nfalse | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
change | \n\u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6 | \nvalue: string, detail: { name: string } | \n
overlimit | \n\u70B9\u51FB\u4E0D\u53EF\u7528\u7684\u6309\u94AE\u65F6\u89E6\u53D1 | \n- | \n
plus | \n\u70B9\u51FB\u589E\u52A0\u6309\u94AE\u65F6\u89E6\u53D1 | \n- | \n
minus | \n\u70B9\u51FB\u51CF\u5C11\u6309\u94AE\u65F6\u89E6\u53D1 | \n- | \n
focus | \n\u8F93\u5165\u6846\u805A\u7126\u65F6\u89E6\u53D1 | \nevent: Event | \n
blur | \n\u8F93\u5165\u6846\u5931\u7126\u65F6\u89E6\u53D1 | \nevent: Event | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { StepperTheme, StepperProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-stepper-background | \nvar(--van-active-color) | \n- | \n
--van-stepper-button-icon-color | \nvar(--van-text-color) | \n- | \n
--van-stepper-button-disabled-color | \nvar(--van-background) | \n- | \n
--van-stepper-button-disabled-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-stepper-button-round-theme-color | \nvar(--van-primary-color) | \n- | \n
--van-stepper-input-width | \n32px | \n- | \n
--van-stepper-input-height | \n28px | \n- | \n
--van-stepper-input-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-stepper-input-line-height | \nnormal | \n- | \n
--van-stepper-input-text-color | \nvar(--van-text-color) | \n- | \n
--van-stepper-input-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-stepper-input-disabled-background | \nvar(--van-active-color) | \n- | \n
--van-stepper-radius | \nvar(--van-radius-md) | \n- | \n
\u8FD9\u662F\u56E0\u4E3A\u7528\u6237\u8F93\u5165\u8FC7\u7A0B\u4E2D\u53EF\u80FD\u51FA\u73B0\u5C0F\u6570\u70B9\u6216\u7A7A\u503C\uFF0C\u6BD4\u5982 1.
\uFF0C\u8FD9\u79CD\u60C5\u51B5\u4E0B\u7EC4\u4EF6\u4F1A\u629B\u51FA\u5B57\u7B26\u4E32\u7C7B\u578B\u3002
\u5982\u679C\u5E0C\u671B value \u4FDD\u6301 number \u7C7B\u578B\uFF0C\u53EF\u4EE5\u5728 v-model \u4E0A\u6DFB\u52A0 number
\u4FEE\u9970\u7B26\uFF1A
<van-stepper v-model.number="value" />\n
\nGet the size of an element and its position relative to the viewport, equivalent to Element.getBoundingClientRect.
\n<div ref="root" />\n
\nimport { ref, onMounted } from 'vue';\nimport { useRect } from '@vant/use';\n\nexport default {\n setup() {\n const root = ref();\n\n onMounted(() => {\n const rect = useRect(root);\n console.log(rect); // -> the size of an element and its position relative to the viewport\n });\n\n return { root };\n },\n};\n
\nfunction useRect(\n element: Element | Window | Ref<Element | Window | undefined>,\n): DOMRect;\n
\nName | \nDescription | \nType | \n
---|---|---|
width | \nWidth of the element | \nnumber | \n
height | \nHeight of the element | \nnumber | \n
top | \nThe distance from the top to the top-left of the viewport | \nnumber | \n
left | \nThe distance from the left to the top-left of the viewport | \nnumber | \n
right | \nThe distance from the right to the top-left of the viewport | \nnumber | \n
bottom | \nThe distance from the bottom to the top-left of the viewport | \nnumber | \n
Get the size of an element and its position relative to the viewport, equivalent to Element.getBoundingClientRect.
\n<div ref="root" />\n
\nimport { ref, onMounted } from 'vue';\nimport { useRect } from '@vant/use';\n\nexport default {\n setup() {\n const root = ref();\n\n onMounted(() => {\n const rect = useRect(root);\n console.log(rect); // -> the size of an element and its position relative to the viewport\n });\n\n return { root };\n },\n};\n
\nfunction useRect(\n element: Element | Window | Ref<Element | Window | undefined>,\n): DOMRect;\n
\nName | \nDescription | \nType | \n
---|---|---|
width | \nWidth of the element | \nnumber | \n
height | \nHeight of the element | \nnumber | \n
top | \nThe distance from the top to the top-left of the viewport | \nnumber | \n
left | \nThe distance from the left to the top-left of the viewport | \nnumber | \n
right | \nThe distance from the right to the top-left of the viewport | \nnumber | \n
bottom | \nThe distance from the bottom to the top-left of the viewport | \nnumber | \n
\u53EF\u4EE5\u5DE6\u53F3\u6ED1\u52A8\u6765\u5C55\u793A\u64CD\u4F5C\u6309\u94AE\u7684\u5355\u5143\u683C\u7EC4\u4EF6\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { SwipeCell } from 'vant';\n\nconst app = createApp();\napp.use(SwipeCell);\n
\nSwipeCell
\u7EC4\u4EF6\u63D0\u4F9B\u4E86 left
\u548C right
\u4E24\u4E2A\u63D2\u69FD\uFF0C\u7528\u4E8E\u5B9A\u4E49\u4E24\u4FA7\u6ED1\u52A8\u533A\u57DF\u7684\u5185\u5BB9\u3002
<van-swipe-cell>\n <template #left>\n <van-button square type="primary" text="\u9009\u62E9" />\n </template>\n <van-cell :border="false" title="\u5355\u5143\u683C" value="\u5185\u5BB9" />\n <template #right>\n <van-button square type="danger" text="\u5220\u9664" />\n <van-button square type="primary" text="\u6536\u85CF" />\n </template>\n</van-swipe-cell>\n
\nSwipeCell
\u53EF\u4EE5\u5D4C\u5957\u4EFB\u610F\u5185\u5BB9\uFF0C\u6BD4\u5982\u5D4C\u5957\u4E00\u4E2A\u5546\u54C1\u5361\u7247\u3002
<van-swipe-cell>\n <van-card\n num="2"\n price="2.00"\n desc="\u63CF\u8FF0\u4FE1\u606F"\n title="\u5546\u54C1\u6807\u9898"\n class="goods-card"\n thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"\n />\n <template #right>\n <van-button square text="\u5220\u9664" type="danger" class="delete-button" />\n </template>\n</van-swipe-cell>\n\n<style>\n .goods-card {\n margin: 0;\n background-color: @white;\n }\n\n .delete-button {\n height: 100%;\n }\n</style>\n
\n\u901A\u8FC7\u4F20\u5165 before-close
\u56DE\u8C03\u51FD\u6570\uFF0C\u53EF\u4EE5\u81EA\u5B9A\u4E49\u4E24\u4FA7\u6ED1\u52A8\u5185\u5BB9\u5173\u95ED\u65F6\u7684\u884C\u4E3A\u3002
<van-swipe-cell :before-close="beforeClose">\n <template #left>\n <van-button square type="primary" text="\u9009\u62E9" />\n </template>\n <van-cell :border="false" title="\u5355\u5143\u683C" value="\u5185\u5BB9" />\n <template #right>\n <van-button square type="danger" text="\u5220\u9664" />\n </template>\n</van-swipe-cell>\n
\nimport { showConfirmDialog } from 'vant';\n\nexport default {\n setup() {\n // position \u4E3A\u5173\u95ED\u65F6\u70B9\u51FB\u7684\u4F4D\u7F6E\n const beforeClose = ({ position }) => {\n switch (position) {\n case 'left':\n case 'cell':\n case 'outside':\n return true;\n case 'right':\n return new Promise((resolve) => {\n showConfirmDialog({\n title: '\u786E\u5B9A\u5220\u9664\u5417\uFF1F',\n })\n .then(() => resolve(true))\n .catch(() => resolve(false));\n });\n }\n };\n\n return { beforeClose };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
name | \n\u6807\u8BC6\u7B26\uFF0C\u901A\u5E38\u4E3A\u4E00\u4E2A\u552F\u4E00\u7684\u5B57\u7B26\u4E32\u6216\u6570\u5B57\uFF0C\u53EF\u4EE5\u5728\u4E8B\u4EF6\u53C2\u6570\u4E2D\u83B7\u53D6\u5230 | \nnumber | string | \n\'\' | \n
left-width | \n\u6307\u5B9A\u5DE6\u4FA7\u6ED1\u52A8\u533A\u57DF\u5BBD\u5EA6\uFF0C\u5355\u4F4D\u4E3A px | \nnumber | string | \nauto | \n
right-width | \n\u6307\u5B9A\u53F3\u4FA7\u6ED1\u52A8\u533A\u57DF\u5BBD\u5EA6\uFF0C\u5355\u4F4D\u4E3A px | \nnumber | string | \nauto | \n
before-close | \n\u5173\u95ED\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u963B\u6B62\u5173\u95ED\uFF0C\u652F\u6301\u8FD4\u56DE Promise | \n(args) => boolean | Promise<boolean> | \n- | \n
disabled | \n\u662F\u5426\u7981\u7528\u6ED1\u52A8 | \nboolean | \nfalse | \n
stop-propagation | \n\u662F\u5426\u963B\u6B62\u6ED1\u52A8\u4E8B\u4EF6\u5192\u6CE1 | \nboolean | \nfalse | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u9ED8\u8BA4\u663E\u793A\u7684\u5185\u5BB9 | \n
left | \n\u5DE6\u4FA7\u6ED1\u52A8\u533A\u57DF\u7684\u5185\u5BB9 | \n
right | \n\u53F3\u4FA7\u6ED1\u52A8\u533A\u57DF\u7684\u5185\u5BB9 | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u65F6\u89E6\u53D1 | \nposition: \'left\' | \'right\' | \'cell\' | \'outside\' | \n
open | \n\u6253\u5F00\u65F6\u89E6\u53D1 | \n{ name: string | number, position: \'left\' | \'right\' } | \n
close | \n\u5173\u95ED\u65F6\u89E6\u53D1 | \n{ name: string | number, position: \'left\' | \'right\' | \'cell\' | \'outside\' } | \n
beforeClose \u7684\u7B2C\u4E00\u4E2A\u53C2\u6570\u4E3A\u5BF9\u8C61\uFF0C\u5BF9\u8C61\u4E2D\u5305\u542B\u4EE5\u4E0B\u5C5E\u6027\uFF1A
\n\u53C2\u6570\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
name | \n\u6807\u8BC6\u7B26 | \nstring | number | \n
position | \n\u5173\u95ED\u65F6\u7684\u70B9\u51FB\u4F4D\u7F6E | \n\'left\' | \'right\' | \'cell\' | \'outside\' | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 SwipeCell \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
open | \n\u6253\u5F00\u5355\u5143\u683C\u4FA7\u8FB9\u680F | \nposition: left | right | \n- | \n
close | \n\u6536\u8D77\u5355\u5143\u683C\u4FA7\u8FB9\u680F | \n- | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n SwipeCellSide,\n SwipeCellProps,\n SwipeCellPosition,\n SwipeCellInstance,\n} from 'vant';\n
\nSwipeCellInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { SwipeCellInstance } from 'vant';\n\nconst swipeCellRef = ref<SwipeCellInstance>();\n\nswipeCellRef.value?.close();\n
\n\u53C2\u89C1\u684C\u9762\u7AEF\u9002\u914D\u3002
\n\u53EF\u4EE5\u5DE6\u53F3\u6ED1\u52A8\u6765\u5C55\u793A\u64CD\u4F5C\u6309\u94AE\u7684\u5355\u5143\u683C\u7EC4\u4EF6\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { SwipeCell } from 'vant';\n\nconst app = createApp();\napp.use(SwipeCell);\n
\nSwipeCell
\u7EC4\u4EF6\u63D0\u4F9B\u4E86 left
\u548C right
\u4E24\u4E2A\u63D2\u69FD\uFF0C\u7528\u4E8E\u5B9A\u4E49\u4E24\u4FA7\u6ED1\u52A8\u533A\u57DF\u7684\u5185\u5BB9\u3002
<van-swipe-cell>\n <template #left>\n <van-button square type="primary" text="\u9009\u62E9" />\n </template>\n <van-cell :border="false" title="\u5355\u5143\u683C" value="\u5185\u5BB9" />\n <template #right>\n <van-button square type="danger" text="\u5220\u9664" />\n <van-button square type="primary" text="\u6536\u85CF" />\n </template>\n</van-swipe-cell>\n
\nSwipeCell
\u53EF\u4EE5\u5D4C\u5957\u4EFB\u610F\u5185\u5BB9\uFF0C\u6BD4\u5982\u5D4C\u5957\u4E00\u4E2A\u5546\u54C1\u5361\u7247\u3002
<van-swipe-cell>\n <van-card\n num="2"\n price="2.00"\n desc="\u63CF\u8FF0\u4FE1\u606F"\n title="\u5546\u54C1\u6807\u9898"\n class="goods-card"\n thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"\n />\n <template #right>\n <van-button square text="\u5220\u9664" type="danger" class="delete-button" />\n </template>\n</van-swipe-cell>\n\n<style>\n .goods-card {\n margin: 0;\n background-color: @white;\n }\n\n .delete-button {\n height: 100%;\n }\n</style>\n
\n\u901A\u8FC7\u4F20\u5165 before-close
\u56DE\u8C03\u51FD\u6570\uFF0C\u53EF\u4EE5\u81EA\u5B9A\u4E49\u4E24\u4FA7\u6ED1\u52A8\u5185\u5BB9\u5173\u95ED\u65F6\u7684\u884C\u4E3A\u3002
<van-swipe-cell :before-close="beforeClose">\n <template #left>\n <van-button square type="primary" text="\u9009\u62E9" />\n </template>\n <van-cell :border="false" title="\u5355\u5143\u683C" value="\u5185\u5BB9" />\n <template #right>\n <van-button square type="danger" text="\u5220\u9664" />\n </template>\n</van-swipe-cell>\n
\nimport { showConfirmDialog } from 'vant';\n\nexport default {\n setup() {\n // position \u4E3A\u5173\u95ED\u65F6\u70B9\u51FB\u7684\u4F4D\u7F6E\n const beforeClose = ({ position }) => {\n switch (position) {\n case 'left':\n case 'cell':\n case 'outside':\n return true;\n case 'right':\n return new Promise((resolve) => {\n showConfirmDialog({\n title: '\u786E\u5B9A\u5220\u9664\u5417\uFF1F',\n })\n .then(() => resolve(true))\n .catch(() => resolve(false));\n });\n }\n };\n\n return { beforeClose };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
name | \n\u6807\u8BC6\u7B26\uFF0C\u901A\u5E38\u4E3A\u4E00\u4E2A\u552F\u4E00\u7684\u5B57\u7B26\u4E32\u6216\u6570\u5B57\uFF0C\u53EF\u4EE5\u5728\u4E8B\u4EF6\u53C2\u6570\u4E2D\u83B7\u53D6\u5230 | \nnumber | string | \n\'\' | \n
left-width | \n\u6307\u5B9A\u5DE6\u4FA7\u6ED1\u52A8\u533A\u57DF\u5BBD\u5EA6\uFF0C\u5355\u4F4D\u4E3A px | \nnumber | string | \nauto | \n
right-width | \n\u6307\u5B9A\u53F3\u4FA7\u6ED1\u52A8\u533A\u57DF\u5BBD\u5EA6\uFF0C\u5355\u4F4D\u4E3A px | \nnumber | string | \nauto | \n
before-close | \n\u5173\u95ED\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u963B\u6B62\u5173\u95ED\uFF0C\u652F\u6301\u8FD4\u56DE Promise | \n(args) => boolean | Promise<boolean> | \n- | \n
disabled | \n\u662F\u5426\u7981\u7528\u6ED1\u52A8 | \nboolean | \nfalse | \n
stop-propagation | \n\u662F\u5426\u963B\u6B62\u6ED1\u52A8\u4E8B\u4EF6\u5192\u6CE1 | \nboolean | \nfalse | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u9ED8\u8BA4\u663E\u793A\u7684\u5185\u5BB9 | \n
left | \n\u5DE6\u4FA7\u6ED1\u52A8\u533A\u57DF\u7684\u5185\u5BB9 | \n
right | \n\u53F3\u4FA7\u6ED1\u52A8\u533A\u57DF\u7684\u5185\u5BB9 | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u65F6\u89E6\u53D1 | \nposition: \'left\' | \'right\' | \'cell\' | \'outside\' | \n
open | \n\u6253\u5F00\u65F6\u89E6\u53D1 | \n{ name: string | number, position: \'left\' | \'right\' } | \n
close | \n\u5173\u95ED\u65F6\u89E6\u53D1 | \n{ name: string | number, position: \'left\' | \'right\' | \'cell\' | \'outside\' } | \n
beforeClose \u7684\u7B2C\u4E00\u4E2A\u53C2\u6570\u4E3A\u5BF9\u8C61\uFF0C\u5BF9\u8C61\u4E2D\u5305\u542B\u4EE5\u4E0B\u5C5E\u6027\uFF1A
\n\u53C2\u6570\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
name | \n\u6807\u8BC6\u7B26 | \nstring | number | \n
position | \n\u5173\u95ED\u65F6\u7684\u70B9\u51FB\u4F4D\u7F6E | \n\'left\' | \'right\' | \'cell\' | \'outside\' | \n
\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 SwipeCell \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002
\n\u65B9\u6CD5\u540D | \n\u8BF4\u660E | \n\u53C2\u6570 | \n\u8FD4\u56DE\u503C | \n
---|---|---|---|
open | \n\u6253\u5F00\u5355\u5143\u683C\u4FA7\u8FB9\u680F | \nposition: left | right | \n- | \n
close | \n\u6536\u8D77\u5355\u5143\u683C\u4FA7\u8FB9\u680F | \n- | \n- | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n SwipeCellSide,\n SwipeCellProps,\n SwipeCellPosition,\n SwipeCellInstance,\n} from 'vant';\n
\nSwipeCellInstance
\u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A
import { ref } from 'vue';\nimport type { SwipeCellInstance } from 'vant';\n\nconst swipeCellRef = ref<SwipeCellInstance>();\n\nswipeCellRef.value?.close();\n
\n\u53C2\u89C1\u684C\u9762\u7AEF\u9002\u914D\u3002
\nProvide navigation function for the page, often used at the top of the page.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { NavBar } from 'vant';\n\nconst app = createApp();\napp.use(NavBar);\n
\n<van-nav-bar title="Title" />\n
\n<van-nav-bar\n title="Title"\n left-text="Back"\n left-arrow\n @click-left="onClickLeft"\n/>\n
\nexport default {\n setup() {\n const onClickLeft = () => history.back();\n return {\n onClickLeft,\n };\n },\n};\n
\n<van-nav-bar\n title="Title"\n left-text="Back"\n right-text="Button"\n left-arrow\n @click-left="onClickLeft"\n @click-right="onClickRight"\n/>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onClickLeft = () => history.back();\n const onClickRight = () => showToast('Button');\n return {\n onClickLeft,\n onClickRight,\n };\n },\n};\n
\n<van-nav-bar title="Title" left-text="Back" left-arrow>\n <template #right>\n <van-icon name="search" />\n </template>\n</van-nav-bar>\n
\nUse the left-disabled
or right-disabled
props to disable the buttons on either side. The prop reduces the opacity of the button and makes it unclickable.
<van-nav-bar\n title="Title"\n left-text="Back"\n right-text="Button"\n left-arrow\n left-disabled\n right-disabled\n/>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
title | \nTitle | \nstring | \n\'\' | \n
left-text | \nLeft Text | \nstring | \n\'\' | \n
right-text | \nRight Text | \nstring | \n\'\' | \n
left-disabled v4.6.8 | \nWhether to disable the left button, decrease opacity and make it unclickable | \nboolean | \nfalse | \n
right-disabled v4.6.8 | \nWhether to disable the right button, decrease opacity and make it unclickable | \nboolean | \nfalse | \n
left-arrow | \nWhether to show left arrow | \nboolean | \nfalse | \n
border | \nWhether to show bottom border | \nboolean | \ntrue | \n
fixed | \nWhether to fixed top | \nboolean | \nfalse | \n
placeholder | \nWhether to generate a placeholder element when fixed | \nboolean | \nfalse | \n
z-index | \nZ-index | \nnumber | string | \n1 | \n
safe-area-inset-top | \nWhether to enable top safe area adaptation | \nboolean | \nfalse | \n
clickable | \nWhether to show click feedback when the left or right content is clicked | \nboolean | \ntrue | \n
Name | \nDescription | \n
---|---|
title | \nCustom title | \n
left | \nCustom left side content | \n
right | \nCustom right side content | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click-left | \nEmitted when the left button is clicked | \nevent: MouseEvent | \n
click-right | \nEmitted when the right button is clicked | \nevent: MouseEvent | \n
The component exports the following type definitions:
\nimport type { NavBarProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-nav-bar-height | \n46px | \n- | \n
--van-nav-bar-background | \nvar(--van-background-2) | \n- | \n
--van-nav-bar-arrow-size | \n16px | \n- | \n
--van-nav-bar-icon-color | \nvar(--van-primary-color) | \n- | \n
--van-nav-bar-text-color | \nvar(--van-primary-color) | \n- | \n
--van-nav-bar-title-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-nav-bar-title-text-color | \nvar(--van-text-color) | \n- | \n
--van-nav-bar-z-index | \n1 | \n- | \n
Provide navigation function for the page, often used at the top of the page.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { NavBar } from 'vant';\n\nconst app = createApp();\napp.use(NavBar);\n
\n<van-nav-bar title="Title" />\n
\n<van-nav-bar\n title="Title"\n left-text="Back"\n left-arrow\n @click-left="onClickLeft"\n/>\n
\nexport default {\n setup() {\n const onClickLeft = () => history.back();\n return {\n onClickLeft,\n };\n },\n};\n
\n<van-nav-bar\n title="Title"\n left-text="Back"\n right-text="Button"\n left-arrow\n @click-left="onClickLeft"\n @click-right="onClickRight"\n/>\n
\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onClickLeft = () => history.back();\n const onClickRight = () => showToast('Button');\n return {\n onClickLeft,\n onClickRight,\n };\n },\n};\n
\n<van-nav-bar title="Title" left-text="Back" left-arrow>\n <template #right>\n <van-icon name="search" />\n </template>\n</van-nav-bar>\n
\nUse the left-disabled
or right-disabled
props to disable the buttons on either side. The prop reduces the opacity of the button and makes it unclickable.
<van-nav-bar\n title="Title"\n left-text="Back"\n right-text="Button"\n left-arrow\n left-disabled\n right-disabled\n/>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
title | \nTitle | \nstring | \n\'\' | \n
left-text | \nLeft Text | \nstring | \n\'\' | \n
right-text | \nRight Text | \nstring | \n\'\' | \n
left-disabled v4.6.8 | \nWhether to disable the left button, decrease opacity and make it unclickable | \nboolean | \nfalse | \n
right-disabled v4.6.8 | \nWhether to disable the right button, decrease opacity and make it unclickable | \nboolean | \nfalse | \n
left-arrow | \nWhether to show left arrow | \nboolean | \nfalse | \n
border | \nWhether to show bottom border | \nboolean | \ntrue | \n
fixed | \nWhether to fixed top | \nboolean | \nfalse | \n
placeholder | \nWhether to generate a placeholder element when fixed | \nboolean | \nfalse | \n
z-index | \nZ-index | \nnumber | string | \n1 | \n
safe-area-inset-top | \nWhether to enable top safe area adaptation | \nboolean | \nfalse | \n
clickable | \nWhether to show click feedback when the left or right content is clicked | \nboolean | \ntrue | \n
Name | \nDescription | \n
---|---|
title | \nCustom title | \n
left | \nCustom left side content | \n
right | \nCustom right side content | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click-left | \nEmitted when the left button is clicked | \nevent: MouseEvent | \n
click-right | \nEmitted when the right button is clicked | \nevent: MouseEvent | \n
The component exports the following type definitions:
\nimport type { NavBarProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-nav-bar-height | \n46px | \n- | \n
--van-nav-bar-background | \nvar(--van-background-2) | \n- | \n
--van-nav-bar-arrow-size | \n16px | \n- | \n
--van-nav-bar-icon-color | \nvar(--van-primary-color) | \n- | \n
--van-nav-bar-text-color | \nvar(--van-primary-color) | \n- | \n
--van-nav-bar-title-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-nav-bar-title-text-color | \nvar(--van-text-color) | \n- | \n
--van-nav-bar-z-index | \n1 | \n- | \n
Get the viewport width and height of the browser window, and update it automatically when the window size changes.
\nimport { watch } from 'vue';\nimport { useWindowSize } from '@vant/use';\n\nexport default {\n setup() {\n const { width, height } = useWindowSize();\n\n console.log(width.value); // -> width of browser window\n console.log(height.value); // -> height of browser window\n\n watch([width, height], () => {\n console.log('window resized');\n });\n },\n};\n
\nfunction useWindowSize(): {\n width: Ref<number>;\n height: Ref<number>;\n};\n
\nName | \nDescription | \nType | \n
---|---|---|
width | \nThe width of browser window | \nRef<number> | \n
height | \nThe height of browser window | \nRef<number> | \n
Get the viewport width and height of the browser window, and update it automatically when the window size changes.
\nimport { watch } from 'vue';\nimport { useWindowSize } from '@vant/use';\n\nexport default {\n setup() {\n const { width, height } = useWindowSize();\n\n console.log(width.value); // -> width of browser window\n console.log(height.value); // -> height of browser window\n\n watch([width, height], () => {\n console.log('window resized');\n });\n },\n};\n
\nfunction useWindowSize(): {\n width: Ref<number>;\n height: Ref<number>;\n};\n
\nName | \nDescription | \nType | \n
---|---|---|
width | \nThe width of browser window | \nRef<number> | \n
height | \nThe height of browser window | \nRef<number> | \n
\u5F39\u51FA\u5C42\u5BB9\u5668\uFF0C\u7528\u4E8E\u5C55\u793A\u5F39\u7A97\u3001\u4FE1\u606F\u63D0\u793A\u7B49\u5185\u5BB9\uFF0C\u652F\u6301\u591A\u4E2A\u5F39\u51FA\u5C42\u53E0\u52A0\u5C55\u793A\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Popup } from 'vant';\n\nconst app = createApp();\napp.use(Popup);\n
\n\u901A\u8FC7 v-model:show
\u63A7\u5236\u5F39\u51FA\u5C42\u662F\u5426\u5C55\u793A\u3002
<van-cell title="\u5C55\u793A\u5F39\u51FA\u5C42" is-link @click="showPopup" />\n<van-popup v-model:show="show" :style="{ padding: '64px' }">\u5185\u5BB9</van-popup>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n const showPopup = () => {\n show.value = true;\n };\n return {\n show,\n showPopup,\n };\n },\n};\n
\n\u901A\u8FC7 position
\u5C5E\u6027\u8BBE\u7F6E\u5F39\u7A97\u7684\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u9ED8\u8BA4\u4E3A\u5C45\u4E2D\u5F39\u51FA\uFF0C\u53EF\u4EE5\u8BBE\u7F6E\u4E3A top
\u3001bottom
\u3001left
\u3001right
\u3002
<!-- \u9876\u90E8\u5F39\u51FA -->\n<van-popup v-model:show="showTop" position="top" :style="{ height: '30%' }" />\n\n<!-- \u5E95\u90E8\u5F39\u51FA -->\n<van-popup\n v-model:show="showBottom"\n position="bottom"\n :style="{ height: '30%' }"\n/>\n\n<!-- \u5DE6\u4FA7\u5F39\u51FA -->\n<van-popup\n v-model:show="showLeft"\n position="left"\n :style="{ width: '30%', height: '100%' }"\n/>\n\n<!-- \u53F3\u4FA7\u5F39\u51FA -->\n<van-popup\n v-model:show="showRight"\n position="right"\n :style="{ width: '30%', height: '100%' }"\n/>\n
\n\u8BBE\u7F6E closeable
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u5F39\u51FA\u5C42\u7684\u53F3\u4E0A\u89D2\u663E\u793A\u5173\u95ED\u56FE\u6807\uFF0C\u5E76\u4E14\u53EF\u4EE5\u901A\u8FC7 close-icon
\u5C5E\u6027\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u4F7F\u7528 close-icon-position
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u56FE\u6807\u4F4D\u7F6E\u3002
<van-popup\n v-model:show="show"\n closeable\n position="bottom"\n :style="{ height: '30%' }"\n/>\n<!-- \u81EA\u5B9A\u4E49\u56FE\u6807 -->\n<van-popup\n v-model:show="show"\n closeable\n close-icon="close"\n position="bottom"\n :style="{ height: '30%' }"\n/>\n<!-- \u56FE\u6807\u4F4D\u7F6E -->\n<van-popup\n v-model:show="show"\n closeable\n close-icon-position="top-left"\n position="bottom"\n :style="{ height: '30%' }"\n/>\n
\n\u8BBE\u7F6E round
\u5C5E\u6027\u540E\uFF0C\u5F39\u7A97\u4F1A\u6839\u636E\u5F39\u51FA\u4F4D\u7F6E\u6DFB\u52A0\u4E0D\u540C\u7684\u5706\u89D2\u6837\u5F0F\u3002
<!-- \u5706\u89D2\u5F39\u7A97\uFF08\u5C45\u4E2D\uFF09 -->\n<van-popup v-model:show="showCenter" round :style="{ padding: '64px' }" />\n\n<!-- \u5706\u89D2\u5F39\u7A97\uFF08\u5E95\u90E8\uFF09 -->\n<van-popup\n v-model:show="showBottom"\n round\n position="bottom"\n :style="{ height: '30%' }"\n/>\n
\nPopup \u652F\u6301\u4EE5\u4E0B\u70B9\u51FB\u4E8B\u4EF6\uFF1A
\nclick
: \u70B9\u51FB\u5F39\u51FA\u5C42\u65F6\u89E6\u53D1\u3002click-overlay
: \u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u89E6\u53D1\u3002click-close-icon
: \u70B9\u51FB\u5173\u95ED\u56FE\u6807\u65F6\u89E6\u53D1\u3002<van-cell title="\u76D1\u542C\u70B9\u51FB\u4E8B\u4EF6" is-link @click="show = true" />\n<van-popup\n v-model:show="show"\n position="bottom"\n :style="{ height: '30%' }"\n closeable\n @click-overlay="onClickOverlay"\n @click-close-icon="onClickCloseIcon"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const show = ref(false);\n const onClickOverlay = () => {\n showToast('click-overlay');\n };\n const onClickCloseIcon = () => {\n showToast('click-close-icon');\n };\n return {\n show,\n onClickOverlay,\n onClickCloseIcon,\n };\n },\n};\n
\n\u5F53 Popup \u88AB\u6253\u5F00\u6216\u5173\u95ED\u65F6\uFF0C\u4F1A\u89E6\u53D1\u4EE5\u4E0B\u4E8B\u4EF6\uFF1A
\nopen
: \u6253\u5F00\u5F39\u51FA\u5C42\u65F6\u7ACB\u5373\u89E6\u53D1\u3002opened
: \u6253\u5F00\u5F39\u51FA\u5C42\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1\u3002close
: \u5173\u95ED\u5F39\u51FA\u5C42\u65F6\u7ACB\u5373\u89E6\u53D1\u3002closed
: \u5173\u95ED\u5F39\u51FA\u5C42\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1\u3002<van-cell title="\u76D1\u542C\u663E\u793A\u4E8B\u4EF6" is-link @click="show = true" />\n<van-popup\n v-model:show="show"\n position="bottom"\n :style="{ height: '30%' }"\n @open="showToast('open')"\n @opened="showToast('opened')"\n @close="showToast('close')"\n @closed="showToast('closed')"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const show = ref(false);\n return {\n show,\n showToast,\n };\n },\n};\n
\n\u5F39\u51FA\u5C42\u9ED8\u8BA4\u6302\u8F7D\u5230\u7EC4\u4EF6\u6807\u7B7E\u6240\u5728\u4F4D\u7F6E\uFF0C\u53EF\u4EE5\u901A\u8FC7 teleport
\u5C5E\u6027\u6307\u5B9A\u6302\u8F7D\u4F4D\u7F6E\u3002
<!-- \u6302\u8F7D\u5230 body \u8282\u70B9\u4E0B -->\n<van-popup v-model:show="show" teleport="body" />\n\n<!-- \u6302\u8F7D\u5230 #app \u8282\u70B9\u4E0B -->\n<van-popup v-model:show="show" teleport="#app" />\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:show | \n\u662F\u5426\u663E\u793A\u5F39\u51FA\u5C42 | \nboolean | \nfalse | \n
overlay | \n\u662F\u5426\u663E\u793A\u906E\u7F69\u5C42 | \nboolean | \ntrue | \n
position | \n\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A top bottom right left | \nstring | \ncenter | \n
overlay-class | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u7C7B\u540D | \nstring | Array | object | \n- | \n
overlay-style | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0F | \nobject | \n- | \n
duration | \n\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u79D2\uFF0C\u8BBE\u7F6E\u4E3A 0 \u53EF\u4EE5\u7981\u7528\u52A8\u753B | \nnumber | string | \n0.3 | \n
z-index | \n\u5C06\u5F39\u7A97\u7684 z-index \u5C42\u7EA7\u8BBE\u7F6E\u4E3A\u4E00\u4E2A\u56FA\u5B9A\u503C | \nnumber | string | \n2000+ | \n
round | \n\u662F\u5426\u663E\u793A\u5706\u89D2 | \nboolean | \nfalse | \n
lock-scroll | \n\u662F\u5426\u9501\u5B9A\u80CC\u666F\u6EDA\u52A8 | \nboolean | \ntrue | \n
lazy-render | \n\u662F\u5426\u5728\u663E\u793A\u5F39\u5C42\u65F6\u624D\u6E32\u67D3\u8282\u70B9 | \nboolean | \ntrue | \n
close-on-popstate | \n\u662F\u5426\u5728\u9875\u9762\u56DE\u9000\u65F6\u81EA\u52A8\u5173\u95ED | \nboolean | \nfalse | \n
close-on-click-overlay | \n\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED | \nboolean | \ntrue | \n
closeable | \n\u662F\u5426\u663E\u793A\u5173\u95ED\u56FE\u6807 | \nboolean | \nfalse | \n
close-icon | \n\u5173\u95ED\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \ncross | \n
close-icon-position | \n\u5173\u95ED\u56FE\u6807\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A top-left bottom-left bottom-right | \nstring | \ntop-right | \n
before-close | \n\u5173\u95ED\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u963B\u6B62\u5173\u95ED\uFF0C\u652F\u6301\u8FD4\u56DE Promise | \n(action: string) => boolean | Promise<boolean> | \n- | \n
icon-prefix | \n\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 | \nstring | \nvan-icon | \n
transition | \n\u52A8\u753B\u7C7B\u540D\uFF0C\u7B49\u4EF7\u4E8E transition \u7684 name \u5C5E\u6027 | \nstring | \n- | \n
transition-appear | \n\u662F\u5426\u5728\u521D\u59CB\u6E32\u67D3\u65F6\u542F\u7528\u8FC7\u6E21\u52A8\u753B | \nboolean | \nfalse | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \n- | \n
safe-area-inset-top | \n\u662F\u5426\u5F00\u542F\u9876\u90E8\u5B89\u5168\u533A\u9002\u914D | \nboolean | \nfalse | \n
safe-area-inset-bottom | \n\u662F\u5426\u5F00\u542F\u5E95\u90E8\u5B89\u5168\u533A\u9002\u914D | \nboolean | \nfalse | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u5F39\u51FA\u5C42\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
click-overlay | \n\u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
click-close-icon | \n\u70B9\u51FB\u5173\u95ED\u56FE\u6807\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
open | \n\u6253\u5F00\u5F39\u51FA\u5C42\u65F6\u7ACB\u5373\u89E6\u53D1 | \n- | \n
close | \n\u5173\u95ED\u5F39\u51FA\u5C42\u65F6\u7ACB\u5373\u89E6\u53D1 | \n- | \n
opened | \n\u6253\u5F00\u5F39\u51FA\u5C42\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
closed | \n\u5173\u95ED\u5F39\u51FA\u5C42\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u5F39\u7A97\u5185\u5BB9 | \n
overlay-content | \n\u906E\u7F69\u5C42\u7684\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n PopupProps,\n PopupPosition,\n PopupInstance,\n PopupCloseIconPosition,\n} from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-popup-background | \nvar(--van-background-2) | \n- | \n
--van-popup-transition | \ntransform var(--van-duration-base) | \n- | \n
--van-popup-round-radius | \n16px | \n- | \n
--van-popup-close-icon-size | \n22px | \n- | \n
--van-popup-close-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-popup-close-icon-margin | \n16px | \n- | \n
--van-popup-close-icon-z-index | \n1 | \n- | \n
\u5F39\u51FA\u5C42\u5BB9\u5668\uFF0C\u7528\u4E8E\u5C55\u793A\u5F39\u7A97\u3001\u4FE1\u606F\u63D0\u793A\u7B49\u5185\u5BB9\uFF0C\u652F\u6301\u591A\u4E2A\u5F39\u51FA\u5C42\u53E0\u52A0\u5C55\u793A\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { Popup } from 'vant';\n\nconst app = createApp();\napp.use(Popup);\n
\n\u901A\u8FC7 v-model:show
\u63A7\u5236\u5F39\u51FA\u5C42\u662F\u5426\u5C55\u793A\u3002
<van-cell title="\u5C55\u793A\u5F39\u51FA\u5C42" is-link @click="showPopup" />\n<van-popup v-model:show="show" :style="{ padding: '64px' }">\u5185\u5BB9</van-popup>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n const showPopup = () => {\n show.value = true;\n };\n return {\n show,\n showPopup,\n };\n },\n};\n
\n\u901A\u8FC7 position
\u5C5E\u6027\u8BBE\u7F6E\u5F39\u7A97\u7684\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u9ED8\u8BA4\u4E3A\u5C45\u4E2D\u5F39\u51FA\uFF0C\u53EF\u4EE5\u8BBE\u7F6E\u4E3A top
\u3001bottom
\u3001left
\u3001right
\u3002
<!-- \u9876\u90E8\u5F39\u51FA -->\n<van-popup v-model:show="showTop" position="top" :style="{ height: '30%' }" />\n\n<!-- \u5E95\u90E8\u5F39\u51FA -->\n<van-popup\n v-model:show="showBottom"\n position="bottom"\n :style="{ height: '30%' }"\n/>\n\n<!-- \u5DE6\u4FA7\u5F39\u51FA -->\n<van-popup\n v-model:show="showLeft"\n position="left"\n :style="{ width: '30%', height: '100%' }"\n/>\n\n<!-- \u53F3\u4FA7\u5F39\u51FA -->\n<van-popup\n v-model:show="showRight"\n position="right"\n :style="{ width: '30%', height: '100%' }"\n/>\n
\n\u8BBE\u7F6E closeable
\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u5F39\u51FA\u5C42\u7684\u53F3\u4E0A\u89D2\u663E\u793A\u5173\u95ED\u56FE\u6807\uFF0C\u5E76\u4E14\u53EF\u4EE5\u901A\u8FC7 close-icon
\u5C5E\u6027\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u4F7F\u7528 close-icon-position
\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u56FE\u6807\u4F4D\u7F6E\u3002
<van-popup\n v-model:show="show"\n closeable\n position="bottom"\n :style="{ height: '30%' }"\n/>\n<!-- \u81EA\u5B9A\u4E49\u56FE\u6807 -->\n<van-popup\n v-model:show="show"\n closeable\n close-icon="close"\n position="bottom"\n :style="{ height: '30%' }"\n/>\n<!-- \u56FE\u6807\u4F4D\u7F6E -->\n<van-popup\n v-model:show="show"\n closeable\n close-icon-position="top-left"\n position="bottom"\n :style="{ height: '30%' }"\n/>\n
\n\u8BBE\u7F6E round
\u5C5E\u6027\u540E\uFF0C\u5F39\u7A97\u4F1A\u6839\u636E\u5F39\u51FA\u4F4D\u7F6E\u6DFB\u52A0\u4E0D\u540C\u7684\u5706\u89D2\u6837\u5F0F\u3002
<!-- \u5706\u89D2\u5F39\u7A97\uFF08\u5C45\u4E2D\uFF09 -->\n<van-popup v-model:show="showCenter" round :style="{ padding: '64px' }" />\n\n<!-- \u5706\u89D2\u5F39\u7A97\uFF08\u5E95\u90E8\uFF09 -->\n<van-popup\n v-model:show="showBottom"\n round\n position="bottom"\n :style="{ height: '30%' }"\n/>\n
\nPopup \u652F\u6301\u4EE5\u4E0B\u70B9\u51FB\u4E8B\u4EF6\uFF1A
\nclick
: \u70B9\u51FB\u5F39\u51FA\u5C42\u65F6\u89E6\u53D1\u3002click-overlay
: \u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u89E6\u53D1\u3002click-close-icon
: \u70B9\u51FB\u5173\u95ED\u56FE\u6807\u65F6\u89E6\u53D1\u3002<van-cell title="\u76D1\u542C\u70B9\u51FB\u4E8B\u4EF6" is-link @click="show = true" />\n<van-popup\n v-model:show="show"\n position="bottom"\n :style="{ height: '30%' }"\n closeable\n @click-overlay="onClickOverlay"\n @click-close-icon="onClickCloseIcon"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const show = ref(false);\n const onClickOverlay = () => {\n showToast('click-overlay');\n };\n const onClickCloseIcon = () => {\n showToast('click-close-icon');\n };\n return {\n show,\n onClickOverlay,\n onClickCloseIcon,\n };\n },\n};\n
\n\u5F53 Popup \u88AB\u6253\u5F00\u6216\u5173\u95ED\u65F6\uFF0C\u4F1A\u89E6\u53D1\u4EE5\u4E0B\u4E8B\u4EF6\uFF1A
\nopen
: \u6253\u5F00\u5F39\u51FA\u5C42\u65F6\u7ACB\u5373\u89E6\u53D1\u3002opened
: \u6253\u5F00\u5F39\u51FA\u5C42\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1\u3002close
: \u5173\u95ED\u5F39\u51FA\u5C42\u65F6\u7ACB\u5373\u89E6\u53D1\u3002closed
: \u5173\u95ED\u5F39\u51FA\u5C42\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1\u3002<van-cell title="\u76D1\u542C\u663E\u793A\u4E8B\u4EF6" is-link @click="show = true" />\n<van-popup\n v-model:show="show"\n position="bottom"\n :style="{ height: '30%' }"\n @open="showToast('open')"\n @opened="showToast('opened')"\n @close="showToast('close')"\n @closed="showToast('closed')"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const show = ref(false);\n return {\n show,\n showToast,\n };\n },\n};\n
\n\u5F39\u51FA\u5C42\u9ED8\u8BA4\u6302\u8F7D\u5230\u7EC4\u4EF6\u6807\u7B7E\u6240\u5728\u4F4D\u7F6E\uFF0C\u53EF\u4EE5\u901A\u8FC7 teleport
\u5C5E\u6027\u6307\u5B9A\u6302\u8F7D\u4F4D\u7F6E\u3002
<!-- \u6302\u8F7D\u5230 body \u8282\u70B9\u4E0B -->\n<van-popup v-model:show="show" teleport="body" />\n\n<!-- \u6302\u8F7D\u5230 #app \u8282\u70B9\u4E0B -->\n<van-popup v-model:show="show" teleport="#app" />\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:show | \n\u662F\u5426\u663E\u793A\u5F39\u51FA\u5C42 | \nboolean | \nfalse | \n
overlay | \n\u662F\u5426\u663E\u793A\u906E\u7F69\u5C42 | \nboolean | \ntrue | \n
position | \n\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A top bottom right left | \nstring | \ncenter | \n
overlay-class | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u7C7B\u540D | \nstring | Array | object | \n- | \n
overlay-style | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0F | \nobject | \n- | \n
duration | \n\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u79D2\uFF0C\u8BBE\u7F6E\u4E3A 0 \u53EF\u4EE5\u7981\u7528\u52A8\u753B | \nnumber | string | \n0.3 | \n
z-index | \n\u5C06\u5F39\u7A97\u7684 z-index \u5C42\u7EA7\u8BBE\u7F6E\u4E3A\u4E00\u4E2A\u56FA\u5B9A\u503C | \nnumber | string | \n2000+ | \n
round | \n\u662F\u5426\u663E\u793A\u5706\u89D2 | \nboolean | \nfalse | \n
lock-scroll | \n\u662F\u5426\u9501\u5B9A\u80CC\u666F\u6EDA\u52A8 | \nboolean | \ntrue | \n
lazy-render | \n\u662F\u5426\u5728\u663E\u793A\u5F39\u5C42\u65F6\u624D\u6E32\u67D3\u8282\u70B9 | \nboolean | \ntrue | \n
close-on-popstate | \n\u662F\u5426\u5728\u9875\u9762\u56DE\u9000\u65F6\u81EA\u52A8\u5173\u95ED | \nboolean | \nfalse | \n
close-on-click-overlay | \n\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED | \nboolean | \ntrue | \n
closeable | \n\u662F\u5426\u663E\u793A\u5173\u95ED\u56FE\u6807 | \nboolean | \nfalse | \n
close-icon | \n\u5173\u95ED\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027 | \nstring | \ncross | \n
close-icon-position | \n\u5173\u95ED\u56FE\u6807\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A top-left bottom-left bottom-right | \nstring | \ntop-right | \n
before-close | \n\u5173\u95ED\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u963B\u6B62\u5173\u95ED\uFF0C\u652F\u6301\u8FD4\u56DE Promise | \n(action: string) => boolean | Promise<boolean> | \n- | \n
icon-prefix | \n\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 | \nstring | \nvan-icon | \n
transition | \n\u52A8\u753B\u7C7B\u540D\uFF0C\u7B49\u4EF7\u4E8E transition \u7684 name \u5C5E\u6027 | \nstring | \n- | \n
transition-appear | \n\u662F\u5426\u5728\u521D\u59CB\u6E32\u67D3\u65F6\u542F\u7528\u8FC7\u6E21\u52A8\u753B | \nboolean | \nfalse | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \n- | \n
safe-area-inset-top | \n\u662F\u5426\u5F00\u542F\u9876\u90E8\u5B89\u5168\u533A\u9002\u914D | \nboolean | \nfalse | \n
safe-area-inset-bottom | \n\u662F\u5426\u5F00\u542F\u5E95\u90E8\u5B89\u5168\u533A\u9002\u914D | \nboolean | \nfalse | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
click | \n\u70B9\u51FB\u5F39\u51FA\u5C42\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
click-overlay | \n\u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
click-close-icon | \n\u70B9\u51FB\u5173\u95ED\u56FE\u6807\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
open | \n\u6253\u5F00\u5F39\u51FA\u5C42\u65F6\u7ACB\u5373\u89E6\u53D1 | \n- | \n
close | \n\u5173\u95ED\u5F39\u51FA\u5C42\u65F6\u7ACB\u5373\u89E6\u53D1 | \n- | \n
opened | \n\u6253\u5F00\u5F39\u51FA\u5C42\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
closed | \n\u5173\u95ED\u5F39\u51FA\u5C42\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
default | \n\u5F39\u7A97\u5185\u5BB9 | \n
overlay-content | \n\u906E\u7F69\u5C42\u7684\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n PopupProps,\n PopupPosition,\n PopupInstance,\n PopupCloseIconPosition,\n} from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-popup-background | \nvar(--van-background-2) | \n- | \n
--van-popup-transition | \ntransform var(--van-duration-base) | \n- | \n
--van-popup-round-radius | \n16px | \n- | \n
--van-popup-close-icon-size | \n22px | \n- | \n
--van-popup-close-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-popup-close-icon-margin | \n16px | \n- | \n
--van-popup-close-icon-z-index | \n1 | \n- | \n
Please refer to Skeleton docs
\n'},null,8,r))}}}]); \ No newline at end of file diff --git a/vant/static/js/async/9419.53a5bd6e.js.LICENSE.txt b/vant/static/js/async/9419.1d763e1b.js.LICENSE.txt similarity index 100% rename from vant/static/js/async/9419.53a5bd6e.js.LICENSE.txt rename to vant/static/js/async/9419.1d763e1b.js.LICENSE.txt diff --git a/vant/static/js/async/9419.53a5bd6e.js b/vant/static/js/async/9419.53a5bd6e.js deleted file mode 100644 index efc2546c..00000000 --- a/vant/static/js/async/9419.53a5bd6e.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 9419.53a5bd6e.js.LICENSE.txt */ -(self.webpackChunk=self.webpackChunk||[]).push([["9419"],{40294:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return l}});var a=t("36840");let r=["innerHTML"];var l={setup:()=>({html:""}),render:()=>((0,a.openBlock)(),(0,a.createElementBlock)("div",{class:"van-doc-markdown-body",innerHTML:'Please refer to Skeleton docs
\n'},null,8,r))}}}]); \ No newline at end of file diff --git a/vant/static/js/async/9456.e485755a.js b/vant/static/js/async/9456.e485755a.js new file mode 100644 index 00000000..b17718c8 --- /dev/null +++ b/vant/static/js/async/9456.e485755a.js @@ -0,0 +1,2 @@ +/*! For license information please see 9456.e485755a.js.LICENSE.txt */ +(self.webpackChunk=self.webpackChunk||[]).push([["9456"],{52238:function(s,n,a){"use strict";a.r(n),a.d(n,{default:function(){return e}});var t=a("69298");let l=["innerHTML"];var e={setup:()=>({html:""}),render:()=>((0,t.openBlock)(),(0,t.createElementBlock)("div",{class:"van-doc-markdown-body",innerHTML:'Used to manage the countdown.
\n<span>Total time\uFF1A{{ current.total }}</span>\n<span>Remain days\uFF1A{{ current.days }}</span>\n<span>Remain hours\uFF1A{{ current.hours }}</span>\n<span>Remain minutes\uFF1A{{ current.minutes }}</span>\n<span>Remain seconds\uFF1A{{ current.seconds }}</span>\n<span>Remain milliseconds\uFF1A{{ current.milliseconds }}</span>\n
\nimport { useCountDown } from '@vant/use';\n\nexport default {\n setup() {\n const countDown = useCountDown({\n time: 24 * 60 * 60 * 1000,\n });\n\n countDown.start();\n\n return {\n current: countDown.current,\n };\n },\n};\n
\nimport { useCountDown } from '@vant/use';\n\nexport default {\n setup() {\n const countDown = useCountDown({\n time: 24 * 60 * 60 * 1000,\n millisecond: true,\n });\n countDown.start();\n\n return {\n current: countDown.current,\n };\n },\n};\n
\ntype CurrentTime = {\n days: number;\n hours: number;\n total: number;\n minutes: number;\n seconds: number;\n milliseconds: number;\n};\n\ntype CountDown = {\n start: () => void;\n pause: () => void;\n reset: (totalTime: number) => void;\n current: ComputedRef<CurrentTime>;\n};\n\ntype UseCountDownOptions = {\n time: number;\n millisecond?: boolean;\n onChange?: (current: CurrentTime) => void;\n onFinish?: () => void;\n};\n\nfunction useCountDown(options: UseCountDownOptions): CountDown;\n
\nName | \nDescription | \nType | \nDefault Value | \n
---|---|---|---|
time | \nTotal time, unit milliseconds | \nnumber | \n- | \n
millisecond | \nWhether to enable millisecond render | \nboolean | \nfalse | \n
onChange | \nTriggered when count down changed | \n(current: CurrentTime) => void | \n- | \n
onFinish | \nTriggered when count down finished | \n() => void | \n- | \n
Name | \nDescription | \nType | \n
---|---|---|
current | \nCurrent remain time | \nCurrentTime | \n
start | \nStart count down | \n() => void | \n
pause | \nPause count down | \n() => void | \n
reset | \nReset count down | \n(time?: number): void | \n
Name | \nDescription | \nType | \n
---|---|---|
total | \nTotal time, unit milliseconds | \nnumber | \n
days | \nRemain days | \nnumber | \n
hours | \nRemain hours | \nnumber | \n
minutes | \nRemain minutes | \nnumber | \n
seconds | \nRemain seconds | \nnumber | \n
milliseconds | \nRemain milliseconds | \nnumber | \n
Used to manage the countdown.
\n<span>Total time\uFF1A{{ current.total }}</span>\n<span>Remain days\uFF1A{{ current.days }}</span>\n<span>Remain hours\uFF1A{{ current.hours }}</span>\n<span>Remain minutes\uFF1A{{ current.minutes }}</span>\n<span>Remain seconds\uFF1A{{ current.seconds }}</span>\n<span>Remain milliseconds\uFF1A{{ current.milliseconds }}</span>\n
\nimport { useCountDown } from '@vant/use';\n\nexport default {\n setup() {\n const countDown = useCountDown({\n time: 24 * 60 * 60 * 1000,\n });\n\n countDown.start();\n\n return {\n current: countDown.current,\n };\n },\n};\n
\nimport { useCountDown } from '@vant/use';\n\nexport default {\n setup() {\n const countDown = useCountDown({\n time: 24 * 60 * 60 * 1000,\n millisecond: true,\n });\n countDown.start();\n\n return {\n current: countDown.current,\n };\n },\n};\n
\ntype CurrentTime = {\n days: number;\n hours: number;\n total: number;\n minutes: number;\n seconds: number;\n milliseconds: number;\n};\n\ntype CountDown = {\n start: () => void;\n pause: () => void;\n reset: (totalTime: number) => void;\n current: ComputedRef<CurrentTime>;\n};\n\ntype UseCountDownOptions = {\n time: number;\n millisecond?: boolean;\n onChange?: (current: CurrentTime) => void;\n onFinish?: () => void;\n};\n\nfunction useCountDown(options: UseCountDownOptions): CountDown;\n
\nName | \nDescription | \nType | \nDefault Value | \n
---|---|---|---|
time | \nTotal time, unit milliseconds | \nnumber | \n- | \n
millisecond | \nWhether to enable millisecond render | \nboolean | \nfalse | \n
onChange | \nTriggered when count down changed | \n(current: CurrentTime) => void | \n- | \n
onFinish | \nTriggered when count down finished | \n() => void | \n- | \n
Name | \nDescription | \nType | \n
---|---|---|
current | \nCurrent remain time | \nCurrentTime | \n
start | \nStart count down | \n() => void | \n
pause | \nPause count down | \n() => void | \n
reset | \nReset count down | \n(time?: number): void | \n
Name | \nDescription | \nType | \n
---|---|---|
total | \nTotal time, unit milliseconds | \nnumber | \n
days | \nRemain days | \nnumber | \n
hours | \nRemain hours | \nnumber | \n
minutes | \nRemain minutes | \nnumber | \n
seconds | \nRemain seconds | \nnumber | \n
milliseconds | \nRemain milliseconds | \nnumber | \n
Using npm
to install:
# install latest Vant for Vue 3 project\nnpm i vant\n\n# install Vant 2 for Vue 2 project\nnpm i vant@latest-v2\n
\nUsing yarn
, pnpm
, or bun
:
# with yarn\nyarn add vant\n\n# with pnpm\npnpm add vant\n\n# with Bun\nbun add vant\n
\nIf you need to create a new project, we recommend using Rsbuild, Vite or Nuxt framework.
\nRsbuild is a build tool based on Rspack, developed by the author of Vant, with first-class build speed and development experience, providing first-priority support for Vant.
\nYou can create a Rsbuild project with the following command:
\nnpm create rsbuild@latest\n
\nPlease visit the Rsbuild repository for more information.
\nHere are the example projects provided by Vant official. You can clone these projects and copy the code.
\nIf you only need to develop a simple HTML page, you can directly include the CDN links in the HTML file. After that, you can access all the components through the global variable vant
.
<!-- import style -->\n<link\n rel="stylesheet"\n href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"\n/>\n\n<!-- import script -->\n<script src="https://fastly.jsdelivr.net/npm/vue@3"></script>\n<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>\n\n<script>\n // Render the Button component\n const app = Vue.createApp({\n template: `<van-button>Button</van-button>`,\n });\n app.use(vant);\n\n // Register Lazyload directive\n app.use(vant.Lazyload);\n\n // Call function component\n vant.showToast('Message');\n\n app.mount('#app');\n</script>\n
\nYou can use Vant through these free CDN services:
\n\nNote: Free CDN is generally used for making prototypes or personal projects. It is not recommended to use free CDN in production environment.
\nFor enterprise developers, we recommend:
\nThe basic usage of Vant components:
\nimport { createApp } from 'vue';\n// 1. Import the components you need\nimport { Button } from 'vant';\n// 2. Import the components style\nimport 'vant/lib/index.css';\n\nconst app = createApp();\n\n// 3. Register the components you need\napp.use(Button);\n
\n\n\nTip: Vant supports Tree Shaking by default, so you don\'t need to configure any plugins, the unused JS code will be removed by Tree Shaking, but CSS styles cannot be optimized by it.
\n
If you are using vite
, webpack
or vue-cli
, you can use unplugin-vue-components, this plugin can help you to auto importing components.
Vant officially wrote an automatic import style parser @vant/auto-import-resolver based on unplugin-vue-components
, both of which are used together.
Compared with conventional usage, this method can introduce the CSS style of components on demand, thus reducing part of the code volume, but it will become more cumbersome to use. If the business\'s volume requirements for CSS are not particularly extreme, we recommend a simpler general usage.
\n# with npm\nnpm i @vant/auto-import-resolver unplugin-vue-components -D\n\n# with yarn\nyarn add @vant/auto-import-resolver unplugin-vue-components -D\n\n# with pnpm\npnpm add @vant/auto-import-resolver unplugin-vue-components -D\n\n# with Bun\nbun add @vant/auto-import-resolver unplugin-vue-components -D\n
\nFor vite
based project\uFF0Cconfigure the plugin in the vite.config.js
file:
import vue from '@vitejs/plugin-vue';\nimport Components from 'unplugin-vue-components/vite';\nimport { VantResolver } from '@vant/auto-import-resolver';\n\nexport default {\n plugins: [\n vue(),\n Components({\n resolvers: [VantResolver()],\n }),\n ],\n};\n
\nFor vue-cli
based project\uFF0Cconfigure the plugin in the vue.config.js
file:
const { VantResolver } = require('@vant/auto-import-resolver');\nconst ComponentsPlugin = require('unplugin-vue-components/webpack');\n\nmodule.exports = {\n configureWebpack: {\n plugins: [\n ComponentsPlugin({ resolvers: [VantResolver()] }), // when the unplugin-vue-components version is less than 0.26.0\n ComponentsPlugin.default({ resolvers: [VantResolver()] }), // when the unplugin-vue-components version is greater than or equal to 0.26.0\n ],\n },\n};\n
\nFor webpack
based project\uFF0Cconfigure the plugin in the webpack.config.js
file:
const { VantResolver } = require('@vant/auto-import-resolver');\nconst ComponentsPlugin = require('unplugin-vue-components/webpack');\n\nmodule.exports = {\n plugins: [\n ComponentsPlugin({ resolvers: [VantResolver()] }), // when the unplugin-vue-components version is less than 0.26.0\n ComponentsPlugin.default({ resolvers: [VantResolver()] }), // when the unplugin-vue-components version is greater than or equal to 0.26.0\n ],\n};\n
\nThen you can using components from Vant in the template, the unplugin-vue-components
will automatically import the corresponding Vant components,@vant/auto-import-resolver
The corresponding component style will be automatically introduced.
<template>\n <van-button type="primary" />\n</template>\n
\nSome components of Vant are provided as function, including Toast
, Dialog
, Notify
and ImagePreview
. When using function components, unplugin-vue-components
cannot parse the automatic registration component, resulting in @vant/auto-import-resolver
unable to parse the style, so the style needs to be introduced manually.
// Toast\nimport { showToast } from 'vant';\nimport 'vant/es/toast/style';\n\n// Dialog\nimport { showDialog } from 'vant';\nimport 'vant/es/dialog/style';\n\n// Notify\nimport { showNotify } from 'vant';\nimport 'vant/es/notify/style';\n\n// ImagePreview\nimport { showImagePreview } from 'vant';\nimport 'vant/es/image-preview/style';\n
\n\n\nTip: "Full Import" and "On-demand Import" should not be used at the same time, otherwise it will lead to problems such as code duplication and style overrides.
\n
"Full Import" and "On-demand Import" should not be used at the same time, otherwise it will lead to problems such as code duplication and style overrides.
\nDuring use, if the component cannot be imported, because unplugin-vue-components
is not a plug-in officially maintained by Vant
, it is recommended to give feedback under the unplugin/unplugin-vue-components repository.
\n\nTips: when the version number of
\nunplugin-vue-components
is >= 0.26.0 or above, forwebpack
,vuecli
,rspack
, you need to useComponentsPlugin.default
to register.
@vant/auto-import-resolver
provides some configuration options. Please refer to the README document for more information.
If it is a similar problem that the style does not take effect, feedback under the Vant
repository.
When using Vant in Nuxt 3, you can use vant-nuxt, this module can help you to auto importing components and reduce CSS file size.
\n# with npm\nnpm i @vant/nuxt -D\n\n# with yarn\nyarn add @vant/nuxt -D\n\n# with pnpm\npnpm add @vant/nuxt -D\n\n# with Bun\nbun add @vant/nuxt -D\n
\nadd the module in the nuxt.config.js
file:
export default defineNuxtConfig({\n modules: ['@vant/nuxt'],\n});\n
\nThen you can using components from Vant in the template, Go to the Nuxt documentation to learn more.
\n<template>\n <van-button type="primary" @click="showToast('toast')">button</van-button>\n <VanButton type="success" @click="showNotify('notify')">button</VanButton>\n <LazyVanButton type="default">lazy button</LazyVanButton>\n</template>\n
\nUsing npm
to install:
# install latest Vant for Vue 3 project\nnpm i vant\n\n# install Vant 2 for Vue 2 project\nnpm i vant@latest-v2\n
\nUsing yarn
, pnpm
, or bun
:
# with yarn\nyarn add vant\n\n# with pnpm\npnpm add vant\n\n# with Bun\nbun add vant\n
\nIf you need to create a new project, we recommend using Rsbuild, Vite or Nuxt framework.
\nRsbuild is a build tool based on Rspack, developed by the author of Vant, with first-class build speed and development experience, providing first-priority support for Vant.
\nYou can create a Rsbuild project with the following command:
\nnpm create rsbuild@latest\n
\nPlease visit the Rsbuild repository for more information.
\nHere are the example projects provided by Vant official. You can clone these projects and copy the code.
\nIf you only need to develop a simple HTML page, you can directly include the CDN links in the HTML file. After that, you can access all the components through the global variable vant
.
<!-- import style -->\n<link\n rel="stylesheet"\n href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"\n/>\n\n<!-- import script -->\n<script src="https://fastly.jsdelivr.net/npm/vue@3"></script>\n<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>\n\n<script>\n // Render the Button component\n const app = Vue.createApp({\n template: `<van-button>Button</van-button>`,\n });\n app.use(vant);\n\n // Register Lazyload directive\n app.use(vant.Lazyload);\n\n // Call function component\n vant.showToast('Message');\n\n app.mount('#app');\n</script>\n
\nYou can use Vant through these free CDN services:
\n\nNote: Free CDN is generally used for making prototypes or personal projects. It is not recommended to use free CDN in production environment.
\nFor enterprise developers, we recommend:
\nThe basic usage of Vant components:
\nimport { createApp } from 'vue';\n// 1. Import the components you need\nimport { Button } from 'vant';\n// 2. Import the components style\nimport 'vant/lib/index.css';\n\nconst app = createApp();\n\n// 3. Register the components you need\napp.use(Button);\n
\n\n\nTip: Vant supports Tree Shaking by default, so you don\'t need to configure any plugins, the unused JS code will be removed by Tree Shaking, but CSS styles cannot be optimized by it.
\n
If you are using vite
, webpack
or vue-cli
, you can use unplugin-vue-components, this plugin can help you to auto importing components.
Vant officially wrote an automatic import style parser @vant/auto-import-resolver based on unplugin-vue-components
, both of which are used together.
Compared with conventional usage, this method can introduce the CSS style of components on demand, thus reducing part of the code volume, but it will become more cumbersome to use. If the business\'s volume requirements for CSS are not particularly extreme, we recommend a simpler general usage.
\n# with npm\nnpm i @vant/auto-import-resolver unplugin-vue-components -D\n\n# with yarn\nyarn add @vant/auto-import-resolver unplugin-vue-components -D\n\n# with pnpm\npnpm add @vant/auto-import-resolver unplugin-vue-components -D\n\n# with Bun\nbun add @vant/auto-import-resolver unplugin-vue-components -D\n
\nFor vite
based project\uFF0Cconfigure the plugin in the vite.config.js
file:
import vue from '@vitejs/plugin-vue';\nimport Components from 'unplugin-vue-components/vite';\nimport { VantResolver } from '@vant/auto-import-resolver';\n\nexport default {\n plugins: [\n vue(),\n Components({\n resolvers: [VantResolver()],\n }),\n ],\n};\n
\nFor vue-cli
based project\uFF0Cconfigure the plugin in the vue.config.js
file:
const { VantResolver } = require('@vant/auto-import-resolver');\nconst ComponentsPlugin = require('unplugin-vue-components/webpack');\n\nmodule.exports = {\n configureWebpack: {\n plugins: [\n ComponentsPlugin({ resolvers: [VantResolver()] }), // when the unplugin-vue-components version is less than 0.26.0\n ComponentsPlugin.default({ resolvers: [VantResolver()] }), // when the unplugin-vue-components version is greater than or equal to 0.26.0\n ],\n },\n};\n
\nFor webpack
based project\uFF0Cconfigure the plugin in the webpack.config.js
file:
const { VantResolver } = require('@vant/auto-import-resolver');\nconst ComponentsPlugin = require('unplugin-vue-components/webpack');\n\nmodule.exports = {\n plugins: [\n ComponentsPlugin({ resolvers: [VantResolver()] }), // when the unplugin-vue-components version is less than 0.26.0\n ComponentsPlugin.default({ resolvers: [VantResolver()] }), // when the unplugin-vue-components version is greater than or equal to 0.26.0\n ],\n};\n
\nThen you can using components from Vant in the template, the unplugin-vue-components
will automatically import the corresponding Vant components,@vant/auto-import-resolver
The corresponding component style will be automatically introduced.
<template>\n <van-button type="primary" />\n</template>\n
\nSome components of Vant are provided as function, including Toast
, Dialog
, Notify
and ImagePreview
. When using function components, unplugin-vue-components
cannot parse the automatic registration component, resulting in @vant/auto-import-resolver
unable to parse the style, so the style needs to be introduced manually.
// Toast\nimport { showToast } from 'vant';\nimport 'vant/es/toast/style';\n\n// Dialog\nimport { showDialog } from 'vant';\nimport 'vant/es/dialog/style';\n\n// Notify\nimport { showNotify } from 'vant';\nimport 'vant/es/notify/style';\n\n// ImagePreview\nimport { showImagePreview } from 'vant';\nimport 'vant/es/image-preview/style';\n
\n\n\nTip: "Full Import" and "On-demand Import" should not be used at the same time, otherwise it will lead to problems such as code duplication and style overrides.
\n
"Full Import" and "On-demand Import" should not be used at the same time, otherwise it will lead to problems such as code duplication and style overrides.
\nDuring use, if the component cannot be imported, because unplugin-vue-components
is not a plug-in officially maintained by Vant
, it is recommended to give feedback under the unplugin/unplugin-vue-components repository.
\n\nTips: when the version number of
\nunplugin-vue-components
is >= 0.26.0 or above, forwebpack
,vuecli
,rspack
, you need to useComponentsPlugin.default
to register.
@vant/auto-import-resolver
provides some configuration options. Please refer to the README document for more information.
If it is a similar problem that the style does not take effect, feedback under the Vant
repository.
When using Vant in Nuxt 3, you can use vant-nuxt, this module can help you to auto importing components and reduce CSS file size.
\n# with npm\nnpm i @vant/nuxt -D\n\n# with yarn\nyarn add @vant/nuxt -D\n\n# with pnpm\npnpm add @vant/nuxt -D\n\n# with Bun\nbun add @vant/nuxt -D\n
\nadd the module in the nuxt.config.js
file:
export default defineNuxtConfig({\n modules: ['@vant/nuxt'],\n});\n
\nThen you can using components from Vant in the template, Go to the Nuxt documentation to learn more.
\n<template>\n <van-button type="primary" @click="showToast('toast')">button</van-button>\n <VanButton type="success" @click="showNotify('notify')">button</VanButton>\n <LazyVanButton type="default">lazy button</LazyVanButton>\n</template>\n
\nSingle selection among multiple options.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { RadioGroup, Radio } from 'vant';\n\nconst app = createApp();\napp.use(Radio);\napp.use(RadioGroup);\n
\nUse v-model
to bind the name of checked radio.
<van-radio-group v-model="checked">\n <van-radio name="1">Radio 1</van-radio>\n <van-radio name="2">Radio 2</van-radio>\n</van-radio-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref('1');\n return { checked };\n },\n};\n
\n<van-radio-group v-model="checked" direction="horizontal">\n <van-radio name="1">Radio 1</van-radio>\n <van-radio name="2">Radio 2</van-radio>\n</van-radio-group>\n
\n<van-radio-group v-model="checked" disabled>\n <van-radio name="1">Radio 1</van-radio>\n <van-radio name="2">Radio 2</van-radio>\n</van-radio-group>\n
\n<van-radio-group v-model="checked" shape="square">\n <van-radio name="1">Radio 1</van-radio>\n <van-radio name="2">Radio 2</van-radio>\n</van-radio-group>\n\n<van-radio-group v-model="checked" shape="dot">\n <van-radio name="1">Radio 1</van-radio>\n <van-radio name="2">Radio 2</van-radio>\n</van-radio-group>\n
\n<van-radio-group v-model="checked">\n <van-radio name="1" checked-color="#ee0a24">Radio 1</van-radio>\n <van-radio name="2" checked-color="#ee0a24">Radio 2</van-radio>\n</van-radio-group>\n
\n<van-radio-group v-model="checked">\n <van-radio name="1" icon-size="24px">Radio 1</van-radio>\n <van-radio name="2" icon-size="24px">Radio 2</van-radio>\n</van-radio-group>\n
\nUse icon slot to custom icon
\n<van-radio-group v-model="checked">\n <van-radio name="1">\n Radio 1\n <template #icon="props">\n <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />\n </template>\n </van-radio>\n <van-radio name="2">\n Radio 2\n <template #icon="props">\n <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />\n </template>\n </van-radio>\n</van-radio-group>\n\n<style>\n .img-icon {\n height: 20px;\n }\n</style>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref('1');\n return {\n checked,\n activeIcon:\n 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',\n inactiveIcon:\n 'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',\n };\n },\n};\n
\nSet label-position
prop to \'left\'
to adjust the label position to the left of the Radio.
<van-radio-group v-model="checked">\n <van-radio name="1" label-position="left">Radio 1</van-radio>\n <van-radio name="2" label-position="left">Radio 2</van-radio>\n</van-radio-group>\n
\n<van-radio-group v-model="checked">\n <van-radio name="1" label-disabled>Radio 1</van-radio>\n <van-radio name="2" label-disabled>Radio 2</van-radio>\n</van-radio-group>\n
\n<van-radio-group v-model="checked">\n <van-cell-group inset>\n <van-cell title="Radio 1" clickable @click="checked = '1'">\n <template #right-icon>\n <van-radio name="1" />\n </template>\n </van-cell>\n <van-cell title="Radio 2" clickable @click="checked = '2'">\n <template #right-icon>\n <van-radio name="2" />\n </template>\n </van-cell>\n </van-cell-group>\n</van-radio-group>\n
\nThe component exports the following type definitions:
\nimport type {\n RadioProps,\n RadioShape,\n RadioGroupProps,\n RadioLabelPosition,\n RadioGroupDirection,\n} from 'vant';\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
name | \nRadio name, usually a unique string or number | \nany | \n- | \n
shape | \nCan be set to square dot | \nstring | \nround | \n
disabled | \nWhether to disable radio | \nboolean | \nfalse | \n
label-disabled | \nWhether to disable label click | \nboolean | \nfalse | \n
label-position | \nCan be set to left | \nstring | \nright | \n
icon-size | \nIcon size | \nnumber | string | \n20px | \n
checked-color | \nChecked color | \nstring | \n#1989fa | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nName of checked radio | \nany | \n- | \n
disabled | \nDisable all radios | \nboolean | \nfalse | \n
direction | \nDirection, can be set to horizontal | \nstring | \nvertical | \n
icon-size | \nIcon size of all radios | \nnumber | string | \n20px | \n
checked-color | \nChecked color of all radios | \nstring | \n#1989fa | \n
shape v4.6.3 | \nCan be set to square dot | \nstring | \nround | \n
Event | \nDescription | \nParameters | \n
---|---|---|
click | \nEmitted when radio is clicked | \nevent: MouseEvent | \n
Event | \nDescription | \nParameters | \n
---|---|---|
change | \nEmitted when value changed | \nname: string | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
default | \nCustom label | \n{ checked: boolean, disabled: boolean } | \n
icon | \nCustom icon | \n{ checked: boolean, disabled: boolean } | \n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-radio-size | \n20px | \n- | \n
--van-radio-dot-size | \n8px | \nThe distance between the dot and the border | \n
--van-radio-border-color | \nvar(--van-gray-5) | \n- | \n
--van-radio-duration | \nvar(--van-duration-fast) | \n- | \n
--van-radio-label-margin | \nvar(--van-padding-xs) | \n- | \n
--van-radio-label-color | \nvar(--van-text-color) | \n- | \n
--van-radio-checked-icon-color | \nvar(--van-primary-color) | \n- | \n
--van-radio-disabled-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-radio-disabled-label-color | \nvar(--van-text-color-3) | \n- | \n
--van-radio-disabled-background | \nvar(--van-border-color) | \n- | \n
Single selection among multiple options.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { RadioGroup, Radio } from 'vant';\n\nconst app = createApp();\napp.use(Radio);\napp.use(RadioGroup);\n
\nUse v-model
to bind the name of checked radio.
<van-radio-group v-model="checked">\n <van-radio name="1">Radio 1</van-radio>\n <van-radio name="2">Radio 2</van-radio>\n</van-radio-group>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref('1');\n return { checked };\n },\n};\n
\n<van-radio-group v-model="checked" direction="horizontal">\n <van-radio name="1">Radio 1</van-radio>\n <van-radio name="2">Radio 2</van-radio>\n</van-radio-group>\n
\n<van-radio-group v-model="checked" disabled>\n <van-radio name="1">Radio 1</van-radio>\n <van-radio name="2">Radio 2</van-radio>\n</van-radio-group>\n
\n<van-radio-group v-model="checked" shape="square">\n <van-radio name="1">Radio 1</van-radio>\n <van-radio name="2">Radio 2</van-radio>\n</van-radio-group>\n\n<van-radio-group v-model="checked" shape="dot">\n <van-radio name="1">Radio 1</van-radio>\n <van-radio name="2">Radio 2</van-radio>\n</van-radio-group>\n
\n<van-radio-group v-model="checked">\n <van-radio name="1" checked-color="#ee0a24">Radio 1</van-radio>\n <van-radio name="2" checked-color="#ee0a24">Radio 2</van-radio>\n</van-radio-group>\n
\n<van-radio-group v-model="checked">\n <van-radio name="1" icon-size="24px">Radio 1</van-radio>\n <van-radio name="2" icon-size="24px">Radio 2</van-radio>\n</van-radio-group>\n
\nUse icon slot to custom icon
\n<van-radio-group v-model="checked">\n <van-radio name="1">\n Radio 1\n <template #icon="props">\n <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />\n </template>\n </van-radio>\n <van-radio name="2">\n Radio 2\n <template #icon="props">\n <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />\n </template>\n </van-radio>\n</van-radio-group>\n\n<style>\n .img-icon {\n height: 20px;\n }\n</style>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref('1');\n return {\n checked,\n activeIcon:\n 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',\n inactiveIcon:\n 'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',\n };\n },\n};\n
\nSet label-position
prop to \'left\'
to adjust the label position to the left of the Radio.
<van-radio-group v-model="checked">\n <van-radio name="1" label-position="left">Radio 1</van-radio>\n <van-radio name="2" label-position="left">Radio 2</van-radio>\n</van-radio-group>\n
\n<van-radio-group v-model="checked">\n <van-radio name="1" label-disabled>Radio 1</van-radio>\n <van-radio name="2" label-disabled>Radio 2</van-radio>\n</van-radio-group>\n
\n<van-radio-group v-model="checked">\n <van-cell-group inset>\n <van-cell title="Radio 1" clickable @click="checked = '1'">\n <template #right-icon>\n <van-radio name="1" />\n </template>\n </van-cell>\n <van-cell title="Radio 2" clickable @click="checked = '2'">\n <template #right-icon>\n <van-radio name="2" />\n </template>\n </van-cell>\n </van-cell-group>\n</van-radio-group>\n
\nThe component exports the following type definitions:
\nimport type {\n RadioProps,\n RadioShape,\n RadioGroupProps,\n RadioLabelPosition,\n RadioGroupDirection,\n} from 'vant';\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
name | \nRadio name, usually a unique string or number | \nany | \n- | \n
shape | \nCan be set to square dot | \nstring | \nround | \n
disabled | \nWhether to disable radio | \nboolean | \nfalse | \n
label-disabled | \nWhether to disable label click | \nboolean | \nfalse | \n
label-position | \nCan be set to left | \nstring | \nright | \n
icon-size | \nIcon size | \nnumber | string | \n20px | \n
checked-color | \nChecked color | \nstring | \n#1989fa | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nName of checked radio | \nany | \n- | \n
disabled | \nDisable all radios | \nboolean | \nfalse | \n
direction | \nDirection, can be set to horizontal | \nstring | \nvertical | \n
icon-size | \nIcon size of all radios | \nnumber | string | \n20px | \n
checked-color | \nChecked color of all radios | \nstring | \n#1989fa | \n
shape v4.6.3 | \nCan be set to square dot | \nstring | \nround | \n
Event | \nDescription | \nParameters | \n
---|---|---|
click | \nEmitted when radio is clicked | \nevent: MouseEvent | \n
Event | \nDescription | \nParameters | \n
---|---|---|
change | \nEmitted when value changed | \nname: string | \n
Name | \nDescription | \nSlotProps | \n
---|---|---|
default | \nCustom label | \n{ checked: boolean, disabled: boolean } | \n
icon | \nCustom icon | \n{ checked: boolean, disabled: boolean } | \n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-radio-size | \n20px | \n- | \n
--van-radio-dot-size | \n8px | \nThe distance between the dot and the border | \n
--van-radio-border-color | \nvar(--van-gray-5) | \n- | \n
--van-radio-duration | \nvar(--van-duration-fast) | \n- | \n
--van-radio-label-margin | \nvar(--van-padding-xs) | \n- | \n
--van-radio-label-color | \nvar(--van-text-color) | \n- | \n
--van-radio-checked-icon-color | \nvar(--van-primary-color) | \n- | \n
--van-radio-disabled-icon-color | \nvar(--van-gray-5) | \n- | \n
--van-radio-disabled-label-color | \nvar(--van-text-color-3) | \n- | \n
--van-radio-disabled-background | \nvar(--van-border-color) | \n- | \n
\u672C\u6587\u6863\u63D0\u4F9B\u4E86\u4ECE Vant 3 \u5230 Vant 4 \u7684\u5347\u7EA7\u6307\u5357\u3002
\n\u9996\u5148\u4F60\u9700\u8981\u5B89\u88C5 Vant 4 \u4EE5\u53CA @vant/compat
\u3002
@vant/compat
\u662F\u4E00\u4E2A\u517C\u5BB9\u5305\uFF0C\u53EF\u4EE5\u5E2E\u52A9\u4F60\u4ECE Vant 3 \u8FC7\u6E21\u5230 Vant 4\u3002
# \u901A\u8FC7 npm \u5B89\u88C5\nnpm add vant@^4 @vant/compat@^1\n\n# \u901A\u8FC7 yarn \u5B89\u88C5\nyarn add vant@^4 @vant/compat@^1\n\n# \u901A\u8FC7 pnpm \u5B89\u88C5\npnpm add vant@^4 @vant/compat@^1\n\n# \u901A\u8FC7 Bun \u5B89\u88C5\nbun add vant@^4 @vant/compat@^1\n
\n\u4F60\u4E5F\u53EF\u4EE5\u76F4\u63A5\u4FEE\u6539 package.json
\u7684 dependencies
\u5B57\u6BB5\u4E2D\u7684\u7248\u672C\u53F7\uFF0C\u4FEE\u6539\u5B8C\u6210\u540E\u9700\u8981\u91CD\u65B0\u5B89\u88C5\u4F9D\u8D56\u3002
{\n "dependencies": {\n- "vant": "^3.0.0",\n+ "vant": "^4.0.0",\n+ "@vant/compat": "^1.0.0",\n }\n}\n
\n\u4ECE Vant 4.0 \u5F00\u59CB\uFF0C\u5C06\u4E0D\u518D\u652F\u6301 babel-plugin-import
\uFF0C\u8BF7\u79FB\u9664\u9879\u76EE\u4E2D\u4F9D\u8D56\u7684 babel-plugin-import
\u63D2\u4EF6\u3002
\u53EA\u9700\u8981\u5220\u9664 babel.config.js
\u4E2D\u7684\u4EE5\u4E0B\u4EE3\u7801\u5373\u53EF\uFF1A
module.exports = {\n plugins: [\n- ['import', {\n- libraryName: 'vant',\n- libraryDirectory: 'es',\n- style: true\n- }, 'vant']\n ]\n};\n
\n\u79FB\u9664 babel-plugin-import
\u4E3B\u8981\u5E26\u6765\u4EE5\u4E0B\u6536\u76CA\uFF1A
babel-plugin-import
\u7684 import \u9650\u5236\uFF0C\u53EF\u4EE5\u4ECE Vant \u4E2D\u5BFC\u5165\u9664\u7EC4\u4EF6\u4EE5\u5916\u7684\u5185\u5BB9\uFF0C\u6BD4\u5982 Vant 4 \u4E2D\u65B0\u589E\u7684 showToast
\u65B9\u6CD5\uFF0C\u6216\u662F buttonProps
\u5BF9\u8C61\uFF1Aimport { showToast, buttonProps } from 'vant';\n
\n\u79FB\u9664 babel-plugin-import
\u5BF9\u9879\u76EE\u7684 JS \u4F53\u79EF\u4E0D\u4F1A\u6709\u5F71\u54CD\uFF0C\u56E0\u4E3A Vant \u9ED8\u8BA4\u652F\u6301\u901A\u8FC7 Tree Shaking \u6765\u79FB\u9664\u4E0D\u9700\u8981\u7684 JS \u4EE3\u7801\u3002
\u800C CSS \u4EE3\u7801\u7684\u5F15\u5165\u65B9\u5F0F\u53EF\u4EE5\u4ECE\u4EE5\u4E0B\u4E24\u79CD\u65B9\u5F0F\u4E2D\u8FDB\u884C\u9009\u62E9\uFF1A
\nimport 'vant/lib/index.css';\n
\n\u5728 Vant 4 \u4E2D\uFF0C\u4E00\u5171\u6709\u4E09\u4E2A\u7EC4\u4EF6\u88AB\u5B8C\u5168\u91CD\u6784\uFF0C\u5B83\u4EEC\u662F\uFF1A
\nArea
Picker
DatetimePicker
\u8FD9\u4E09\u4E2A\u7EC4\u4EF6\u4E4B\u6240\u4EE5\u88AB\u91CD\u6784\uFF0C\u662F\u56E0\u4E3A\u5728\u4E4B\u524D\u7684\u7248\u672C\u4E2D\uFF0CPicker
\u7EC4\u4EF6\u7684 API \u8BBE\u8BA1\u5B58\u5728\u4E00\u4E9B\u4E0D\u5408\u7406\u7684\u8BBE\u8BA1\uFF0C\u5BFC\u81F4\u5927\u5BB6\u5728\u4F7F\u7528\u65F6\u7ECF\u5E38\u9047\u5230\u95EE\u9898\uFF0C\u6BD4\u5982\uFF1A
\u4E3A\u4E86\u89E3\u51B3\u4E0A\u8FF0\u95EE\u9898\uFF0C\u6211\u4EEC\u5728 v4 \u7248\u672C\u4E2D\u5BF9 Picker
\u7EC4\u4EF6\u8FDB\u884C\u4E86\u91CD\u6784\uFF0C\u540C\u65F6\u4E5F\u91CD\u6784\u4E86\u57FA\u4E8E Picker
\u6D3E\u751F\u51FA\u7684 Area
\u548C DatetimePicker
\u7EC4\u4EF6\u3002\u5982\u679C\u4F60\u7684\u9879\u76EE\u4E2D\u4F7F\u7528\u4E86\u8FD9\u4E09\u4E2A\u7EC4\u4EF6\uFF0C\u8BF7\u4ED4\u7EC6\u9605\u8BFB\u6587\u6863\u5E76\u8FDB\u884C\u5347\u7EA7\u3002
v-model
\u7ED1\u5B9A\u5F53\u524D\u9009\u4E2D\u7684\u503C\uFF0C\u79FB\u9664 default-index
\u5C5E\u6027columns
\u5C5E\u6027\u7684\u7ED3\u6784confirm
\u65B9\u6CD5getSelectedOptions
\u5B9E\u4F8B\u65B9\u6CD5confirm
\u3001cancel
\u3001change
\u4E8B\u4EF6\u7684\u53C2\u6570item-height
\u5C5E\u6027\u4E3A option-height
visible-item-count
\u5C5E\u6027\u4E3A visible-option-num
\n\n\u8BE6\u7EC6\u7528\u6CD5\u8BF7\u53C2\u89C1 Picker \u7EC4\u4EF6\u6587\u6863\u3002
\n
DatetimePicker \u7EC4\u4EF6\u88AB\u62C6\u5206\u4E3A\u4E09\u4E2A\u5B50\u7EC4\u4EF6\uFF1A
\n\u540C\u65F6\uFF0CTimePicker \u548C DatePicker \u7EC4\u4EF6\u4E5F\u57FA\u4E8E\u65B0\u7248 Picker \u7EC4\u4EF6\u8FDB\u884C\u91CD\u6784\uFF0C\u5E76\u4F18\u5316\u4E86\u90E8\u5206 API \u8BBE\u8BA1\u3002
\n\u4EE5\u4E0B\u662F TimePicker \u548C DatePicker \u7684\u4E3B\u8981 API \u53D8\u5316\uFF0C\u66F4\u591A\u7EC6\u8282\u8BF7\u53C2\u8003 TimePicker \u548C DatePicker \u6587\u6863\u3002
\nv-model
\u7ED1\u5B9A\u7684\u503C\u8C03\u6574\u4E3A\u6570\u7EC4\u683C\u5F0Fcolumns-type
\u5C5E\u6027\uFF0C\u7528\u4E8E\u63A7\u5236\u9009\u9879\u7C7B\u578B\u548C\u987A\u5E8Ftype
\u5C5E\u6027\u548C columns-order
\u5C5E\u6027getPicker
\u65B9\u6CD5confirm
\u3001cancel
\u3001change
\u4E8B\u4EF6\u7684\u53C2\u6570\uFF0C\u4E0E Picker \u7EC4\u4EF6\u4FDD\u6301\u4E00\u81F4\n\nVant 4 \u4E0D\u518D\u63D0\u4F9B\u65E7\u7248\u7684 DatetimePicker \u7EC4\u4EF6\uFF0C\u4F7F\u7528 PickerGroup \u7EC4\u4EF6\u53EF\u4EE5\u5B9E\u73B0\u66F4\u7075\u6D3B\u3001\u66F4\u4E30\u5BCC\u7684\u4EA4\u4E92\u6548\u679C\uFF0C\u5177\u4F53\u7528\u6CD5\u8BF7\u53C2\u8003 PickerGroup \u7EC4\u4EF6\u6587\u6863\u3002
\n
Area \u7EC4\u4EF6\u662F\u57FA\u4E8E Picker \u7EC4\u4EF6\u8FDB\u884C\u5C01\u88C5\u7684\uFF0C\u56E0\u6B64\u672C\u6B21\u5347\u7EA7\u4E5F\u5BF9 Area \u7EC4\u4EF6\u8FDB\u884C\u4E86\u5185\u90E8\u903B\u8F91\u7684\u91CD\u6784\uFF0C\u5E76\u4F18\u5316\u4E86\u90E8\u5206 API\u3002
\nv-model
\u7ED1\u5B9A\u5F53\u524D\u9009\u4E2D\u7684\u503Creset
\u65B9\u6CD5\uFF0C\u73B0\u5728\u53EF\u4EE5\u901A\u8FC7\u4FEE\u6539 v-model
\u6765\u8FDB\u884C\u91CD\u7F6Eis-oversea-code
\u5C5E\u6027confirm
\u3001cancel
\u3001change
\u4E8B\u4EF6\u7684\u53C2\u6570\uFF0C\u4E0E Picker \u7EC4\u4EF6\u4FDD\u6301\u4E00\u81F4value
\u5C5E\u6027\u4E3A modelValue
item-height
\u5C5E\u6027\u4E3A option-height
visible-item-count
\u5C5E\u6027\u4E3A visible-option-num
\n\n\u8BE6\u7EC6\u7528\u6CD5\u8BF7\u53C2\u89C1 Area \u7EC4\u4EF6\u6587\u6863\u3002
\n
\u5728 Vant 3 \u4E2D\uFF0CDialog
\u662F\u4E00\u4E2A\u51FD\u6570\uFF0C\u8C03\u7528\u51FD\u6570\u53EF\u4EE5\u5FEB\u901F\u5524\u8D77\u5168\u5C40\u7684\u5F39\u7A97\u7EC4\u4EF6\uFF0C\u800C Dialog.Component
\u624D\u662F Dialog
\u7EC4\u4EF6\u5BF9\u8C61\uFF0C\u8FD9\u4E0E\u5927\u90E8\u5206\u7EC4\u4EF6\u7684\u7528\u6CD5\u5B58\u5728\u5DEE\u5F02\uFF0C\u5BB9\u6613\u5BFC\u81F4\u4F7F\u7528\u9519\u8BEF\u3002
\u4E3A\u4E86\u66F4\u7B26\u5408\u76F4\u89C9\uFF0C\u6211\u4EEC\u5728 Vant 4 \u4E2D\u8C03\u6574\u4E86 Dialog
\u7684\u8C03\u7528\u65B9\u5F0F\uFF0C\u5C06 Dialog()
\u51FD\u6570\u91CD\u547D\u540D\u4E3A showDialog()
\uFF0C\u5E76\u8BA9 Dialog
\u76F4\u63A5\u6307\u5411\u7EC4\u4EF6\u5BF9\u8C61\u3002
// Vant 3\nDialog(); // \u51FD\u6570\u8C03\u7528\nDialog.Component; // \u7EC4\u4EF6\u5BF9\u8C61\n\n// Vant 4\nshowDialog(); // \u51FD\u6570\u8C03\u7528\nDialog; // \u7EC4\u4EF6\u5BF9\u8C61\n
\n\u7531\u4E8E Dialog
\u53D8\u4E3A\u4E86\u7EC4\u4EF6\u5BF9\u8C61\uFF0CDialog
\u4E0A\u6302\u8F7D\u7684\u5176\u4ED6\u65B9\u6CD5\u4E5F\u8FDB\u884C\u4E86\u91CD\u547D\u540D\uFF0C\u65B0\u65E7 API \u7684\u6620\u5C04\u5173\u7CFB\u5982\u4E0B\uFF1A
Dialog(); // -> showDialog()\nDialog.alert(); // -> showDialog()\nDialog.confirm(); // -> showConfirmDialog()\nDialog.close(); // -> closeDialog();\nDialog.setDefaultOptions(); // -> setDialogDefaultOptions()\nDialog.resetDefaultOptions(); // -> resetDialogDefaultOptions()\n
\n\u4E3A\u4E86\u4FBF\u4E8E\u65E7\u7248\u672C\u4EE3\u7801\u8FC1\u79FB\u81F3 v4\uFF0C\u6211\u4EEC\u63D0\u4F9B\u4E86\u517C\u5BB9\u65B9\u6848\uFF0C\u4F60\u53EF\u4EE5\u4F7F\u7528 @vant/compat
\u4E2D\u5BFC\u51FA\u7684 Dialog
\u5BF9\u8C61\u6765\u517C\u5BB9\u539F\u6709\u4EE3\u7801\u3002
\u4ECE @vant/compat
\u4E2D\u5F15\u7528 Dialog
\u65B9\u6CD5\uFF1A
import { Dialog } from '@vant/compat';\n\nDialog();\nDialog.close();\n
\n@vant/compat
\u4E2D\u5BFC\u51FA\u7684 Dialog
\u4E0E Vant 3 \u4E2D\u7684 Dialog
\u62E5\u6709\u5B8C\u5168\u4E00\u81F4\u7684 API \u548C\u884C\u4E3A\uFF0C\u56E0\u6B64\u4F60\u53EA\u9700\u8981\u4FEE\u6539 Dialog
\u7684\u5F15\u7528\u8DEF\u5F84\uFF0C\u5176\u4ED6\u4EE3\u7801\u53EF\u4EE5\u4FDD\u6301\u4E0D\u53D8\u3002
\u5728\u9879\u76EE\u5B8C\u6210\u5347\u7EA7\u5230 Vant v4 \u540E\uFF0C\u5EFA\u8BAE\u5728\u8FED\u4EE3\u4E2D\u9010\u6B65\u66FF\u6362\u4E3A\u65B0\u7684 showDialog
\u7B49\u65B9\u6CD5\uFF0C\u5E76\u79FB\u9664 @vant/compat
\u5305\u3002
Vant 4 \u4E2D\uFF0CToast
\u7EC4\u4EF6\u7684\u8C03\u7528\u65B9\u5F0F\u4E5F\u8FDB\u884C\u4E86\u8C03\u6574\uFF0C\u4E0E Dialog
\u7EC4\u4EF6\u7684\u6539\u52A8\u4E00\u81F4\uFF1A
// Vant 3\nToast(); // \u51FD\u6570\u8C03\u7528\n\n// Vant 4\nshowToast(); // \u51FD\u6570\u8C03\u7528\nToast; // \u7EC4\u4EF6\u5BF9\u8C61\n
\nToast
\u4E0A\u6302\u8F7D\u7684\u5176\u4ED6\u65B9\u6CD5\u4E5F\u8FDB\u884C\u4E86\u91CD\u547D\u540D\uFF0C\u65B0\u65E7 API \u7684\u6620\u5C04\u5173\u7CFB\u5982\u4E0B\uFF1A
Toast(); // -> showToast()\nToast.fail(); // -> showFailToast()\nToast.success(); // -> showSuccessToast()\nToast.loading(); // -> showLoadingToast()\nToast.clear(); // -> closeToast()\nToast.setDefaultOptions(); // -> setToastDefaultOptions()\nToast.resetDefaultOptions(); // -> resetToastDefaultOptions()\n
\n\u540C\u65F6\uFF0CVant 4 \u5C06\u4E0D\u518D\u5728 this
\u5BF9\u8C61\u4E0A\u5168\u5C40\u6CE8\u518C $toast
\u65B9\u6CD5\uFF0C\u8FD9\u610F\u5473\u7740 this
\u5BF9\u8C61\u4E0A\u5C06\u65E0\u6CD5\u8BBF\u95EE\u5230 $toast
\u3002
\u4E3A\u4E86\u4FBF\u4E8E\u4EE3\u7801\u8FC1\u79FB\uFF0C\u6211\u4EEC\u63D0\u4F9B\u4E86\u517C\u5BB9\u65B9\u6848\uFF0C\u4F60\u53EF\u4EE5\u4F7F\u7528 @vant/compat
\u4E2D\u5BFC\u51FA\u7684 Toast
\u5BF9\u8C61\u6765\u517C\u5BB9\u539F\u6709\u4EE3\u7801\u3002
import { Toast } from '@vant/compat';\n\nToast();\nToast.clear();\n
\n@vant/compat
\u4E2D\u5BFC\u51FA\u7684 Toast
\u4E0E Vant 3 \u4E2D\u7684 Toast
\u62E5\u6709\u5B8C\u5168\u4E00\u81F4\u7684 API \u548C\u884C\u4E3A\uFF0C\u56E0\u6B64\u4F60\u53EA\u9700\u8981\u4FEE\u6539 Toast
\u7684\u5F15\u7528\u8DEF\u5F84\uFF0C\u5176\u4ED6\u4EE3\u7801\u53EF\u4EE5\u4FDD\u6301\u4E0D\u53D8\u3002
Vant 4 \u4E2D\uFF0CNotify
\u7EC4\u4EF6\u7684\u8C03\u7528\u65B9\u5F0F\u4E5F\u8FDB\u884C\u4E86\u8C03\u6574\uFF0C\u4E0E Dialog
\u7EC4\u4EF6\u7684\u6539\u52A8\u4E00\u81F4\uFF1A
// Vant 3\nNotify(); // \u51FD\u6570\u8C03\u7528\nNotify.Component; // \u7EC4\u4EF6\u5BF9\u8C61\n\n// Vant 4\nshowNotify(); // \u51FD\u6570\u8C03\u7528\nNotify; // \u7EC4\u4EF6\u5BF9\u8C61\n
\nNotify
\u4E0A\u6302\u8F7D\u7684\u5176\u4ED6\u65B9\u6CD5\u4E5F\u8FDB\u884C\u4E86\u91CD\u547D\u540D\uFF0C\u65B0\u65E7 API \u7684\u6620\u5C04\u5173\u7CFB\u5982\u4E0B\uFF1A
Notify(); // -> showNotify()\nNotify.clear(); // -> closeNotify()\nNotify.setDefaultOptions(); // -> setNotifyDefaultOptions()\nNotify.resetDefaultOptions(); // -> resetNotifyDefaultOptions()\n
\n\u540C\u65F6\uFF0CVant 4 \u5C06\u4E0D\u518D\u5728 this
\u5BF9\u8C61\u4E0A\u5168\u5C40\u6CE8\u518C $notify
\u65B9\u6CD5\uFF0C\u8FD9\u610F\u5473\u7740 this
\u5BF9\u8C61\u4E0A\u5C06\u65E0\u6CD5\u8BBF\u95EE\u5230 $notify
\u3002
\u4E3A\u4E86\u4FBF\u4E8E\u4EE3\u7801\u8FC1\u79FB\uFF0C\u6211\u4EEC\u63D0\u4F9B\u4E86\u517C\u5BB9\u65B9\u6848\uFF0C\u4F60\u53EF\u4EE5\u4F7F\u7528 @vant/compat
\u4E2D\u5BFC\u51FA\u7684 Notify
\u5BF9\u8C61\u6765\u517C\u5BB9\u539F\u6709\u4EE3\u7801\u3002
import { Notify } from '@vant/compat';\n\nNotify();\nNotify.clear();\n
\n@vant/compat
\u4E2D\u5BFC\u51FA\u7684 Notify
\u4E0E Vant 3 \u4E2D\u7684 Notify
\u62E5\u6709\u5B8C\u5168\u4E00\u81F4\u7684 API \u548C\u884C\u4E3A\uFF0C\u56E0\u6B64\u4F60\u53EA\u9700\u8981\u4FEE\u6539 Notify
\u7684\u5F15\u7528\u8DEF\u5F84\uFF0C\u5176\u4ED6\u4EE3\u7801\u53EF\u4EE5\u4FDD\u6301\u4E0D\u53D8\u3002
Vant 4 \u4E2D\uFF0CImagePreview
\u7EC4\u4EF6\u7684\u8C03\u7528\u65B9\u5F0F\u4E5F\u8FDB\u884C\u4E86\u8C03\u6574\uFF0C\u4E0E Dialog
\u7EC4\u4EF6\u7684\u6539\u52A8\u4E00\u81F4\uFF1A
// Vant 3\nImagePreview(); // \u51FD\u6570\u8C03\u7528\nImagePreview.Component; // \u7EC4\u4EF6\u5BF9\u8C61\n\n// Vant 4\nshowImagePreview(); // \u51FD\u6570\u8C03\u7528\nImagePreview; // \u7EC4\u4EF6\u5BF9\u8C61\n
\n\u4E3A\u4E86\u4FBF\u4E8E\u4EE3\u7801\u8FC1\u79FB\uFF0C\u6211\u4EEC\u63D0\u4F9B\u4E86\u517C\u5BB9\u65B9\u6848\uFF0C\u4F60\u53EF\u4EE5\u4F7F\u7528 @vant/compat
\u4E2D\u5BFC\u51FA\u7684 ImagePreview
\u5BF9\u8C61\u6765\u517C\u5BB9\u539F\u6709\u4EE3\u7801\u3002
import { ImagePreview } from '@vant/compat';\n\nImagePreview();\n
\n@vant/compat
\u4E2D\u5BFC\u51FA\u7684 ImagePreview
\u4E0E Vant 3 \u4E2D\u7684 ImagePreview
\u62E5\u6709\u5B8C\u5168\u4E00\u81F4\u7684 API \u548C\u884C\u4E3A\uFF0C\u56E0\u6B64\u4F60\u53EA\u9700\u8981\u4FEE\u6539 ImagePreview
\u7684\u5F15\u7528\u8DEF\u5F84\uFF0C\u5176\u4ED6\u4EE3\u7801\u53EF\u4EE5\u4FDD\u6301\u4E0D\u53D8\u3002
\u4ECE Vant 4 \u5F00\u59CB\uFF0C\u6240\u6709\u7684\u4E8B\u4EF6\u5747\u91C7\u7528 Vue \u5B98\u65B9\u63A8\u8350\u7684\u9A7C\u5CF0\u683C\u5F0F\u8FDB\u884C\u547D\u540D\u3002
\n// Vant 3\nemit('click-input');\n\n// Vant 4\nemit('clickInput');\n
\n\u8FD9\u9879\u6539\u52A8\u4E0D\u5F71\u54CD\u539F\u6709\u7684\u6A21\u677F\u4EE3\u7801\uFF0CVue \u4F1A\u81EA\u52A8\u5728\u6A21\u677F\u4E2D\u5BF9\u4E8B\u4EF6\u540D\u8FDB\u884C\u683C\u5F0F\u8F6C\u6362\uFF0C\u56E0\u6B64\u4F60\u65E0\u987B\u505A\u4EFB\u4F55\u66F4\u6539\u3002
\n<!-- \u4EE5\u4E0B\u4EE3\u7801\u53EF\u4EE5\u7167\u5E38\u8FD0\u884C\uFF0C\u65E0\u987B\u505A\u4EFB\u4F55\u66F4\u6539 -->\n<van-field @click-input="onClick" />\n
\n\u5982\u679C\u4F60\u5728 JSX \u4E2D\u4F7F\u7528 Vant \u7EC4\u4EF6\uFF0C\u9700\u8981\u5C06\u76D1\u542C\u7684\u4E8B\u4EF6\u540D\u8C03\u6574\u4E3A\u9A7C\u5CF0\u683C\u5F0F\uFF0C\u539F\u6709\u7684\u4E2D\u5212\u7EBF\u683C\u5F0F\u5C06\u4E0D\u518D\u751F\u6548\uFF0C\u65B0\u7684\u76D1\u542C\u65B9\u5F0F\u66F4\u52A0\u7B26\u5408 JSX \u672C\u8EAB\u7684\u89C4\u8303\uFF1A
\n// Vant 3\n<Field onClick-input={onClick} />\n\n// Vant 4\n<Field onClickInput={onClick} />\n
\n\u5728 Vant 4.0 \u7248\u672C\u4E2D\uFF0C\u4EE5\u4E0B API \u8FDB\u884C\u4E86\u4E0D\u517C\u5BB9\u66F4\u65B0\uFF1A
\nshow-postal
\u5C5E\u6027postal-validator
\u5C5E\u6027change-area
\u4E8B\u4EF6\u7684\u53C2\u6570\u8C03\u6574\u4E3A PickerOption[]
\u7C7B\u578BgetArea
\u5B9E\u4F8B\u65B9\u6CD5Popup \u7684 CSS \u6837\u5F0F\u8FDB\u884C\u4E86\u4E00\u5B9A\u8C03\u6574\uFF0C\u5982\u679C\u4F60\u5728 Popup \u7EC4\u4EF6\u4E0A\u6DFB\u52A0\u4E86\u4E00\u4E9B\u81EA\u5B9A\u4E49\u7684 CSS \u6837\u5F0F\uFF0C\u8BF7\u786E\u8BA4\u672C\u6B21\u5347\u7EA7\u662F\u5426\u5BF9\u9879\u76EE\u4E2D\u7684 UI \u4EA7\u751F\u5F71\u54CD\u3002
\nbox-sizing: border-box
\u6837\u5F0Fposition="center"
\u65F6\u7684\u6C34\u5E73\u5C45\u4E2D\u65B9\u5F0F\uFF0C\u4EE5\u89E3\u51B3\u5F39\u7A97\u5BBD\u5EA6\u65E0\u6CD5\u6B63\u786E\u81EA\u9002\u5E94\u7684\u95EE\u9898\uFF1A// Vant 3\n.van-popup--center {\n left: 50%;\n transform: translate3d(-50%, -50%, 0);\n}\n\n// Vant 4\n.van-popup--center {\n left: 0;\n right: 0;\n width: fit-content;\n max-width: calc(100vw - var(--van-padding-md) * 2);\n margin: 0 auto;\n transform: translateY(-50%);\n}\n
\nclick
\u548C disabled
\u4E8B\u4EF6\uFF0C\u8BF7\u4F7F\u7528 click-tab
\u4E8B\u4EF6\u4EE3\u66FF\u5728\u4E4B\u524D\u7684\u7248\u672C\u4E2D\uFF0CVant \u7EC4\u4EF6\u6709\u4E24\u79CD\u4E3B\u8272\u8C03\uFF0C\u90E8\u5206\u7EC4\u4EF6\u91C7\u7528\u84DD\u8272\uFF08#1989fa\uFF09\u4F5C\u4E3A\u4E3B\u8272\u8C03\uFF0C\u53E6\u4E00\u90E8\u5206\u5219\u91C7\u7528\u7EA2\u8272\uFF08#ee0a24\uFF09\u3002
\n\u4E3A\u4E86\u4FDD\u6301\u8272\u5F69\u89C4\u8303\u7684\u4E00\u81F4\u6027\uFF0C\u6211\u4EEC\u5728 Vant 4 \u4E2D\u5BF9\u4E3B\u8272\u8C03\u8FDB\u884C\u7EDF\u4E00\uFF0C\u6240\u6709\u7EC4\u4EF6\u5747\u91C7\u7528\u84DD\u8272\u4F5C\u4E3A\u4E3B\u8272\u8C03\u3002
\n\u4EE5\u4E0B\u7EC4\u4EF6\u7684\u4E3B\u8272\u8C03\u7531\u7EA2\u8272\u8C03\u6574\u4E3A\u84DD\u8272\uFF1A
\n\u76EE\u524D Vant \u5DF2\u7ECF\u652F\u6301\u4E86\u57FA\u4E8E CSS \u53D8\u91CF\u7684\u4E3B\u9898\u5B9A\u5236\u80FD\u529B\uFF0C\u76F8\u8F83\u4E8E Less \u5B9A\u5236\u66F4\u52A0\u7075\u6D3B\u3002\u56E0\u6B64\uFF0CVant 4 \u5C06\u4E0D\u518D\u63D0\u4F9B\u57FA\u4E8E Less \u7684\u4E3B\u9898\u5B9A\u5236\u65B9\u5F0F\u3002
\n\u8FD9\u610F\u5473\u7740 Vant \u7684 npm \u5305\u4E2D\u5C06\u4E0D\u518D\u4F1A\u5305\u542B .less
\u6837\u5F0F\u6E90\u6587\u4EF6\uFF0C\u53EA\u4F1A\u63D0\u4F9B\u7F16\u8BD1\u540E\u7684 .css
\u6837\u5F0F\u6587\u4EF6\u3002
\u5982\u679C\u4F60\u7684\u9879\u76EE\u6B63\u5728\u4F7F\u7528\u65E7\u7248\u7684 Less \u4E3B\u9898\u5B9A\u5236\uFF0C\u8BF7\u4F7F\u7528 ConfigProvider \u5168\u5C40\u914D\u7F6E \u7EC4\u4EF6\u8FDB\u884C\u66FF\u6362\u3002
\n\u8003\u8651\u5230 \u4EE3\u7801\u4F53\u79EF \u548C \u4F7F\u7528\u4FBF\u6377\u6027\uFF0C\u6211\u4EEC\u5BF9\u90E8\u5206 CSS \u53D8\u91CF\u7684\u540D\u79F0\u8FDB\u884C\u4E86\u7B80\u5316\uFF0C\u5728\u53D8\u91CF\u540D\u4E2D\u4F7F\u7528\u4E86\u66F4\u7B80\u77ED\u7684\u5355\u8BCD\uFF0C\u4EE5\u51CF\u5C0F\u4EE3\u7801\u4F53\u79EF\u3002
\n\u672C\u6B21\u5347\u7EA7\u6D89\u53CA\u4EE5\u4E0B\u53D8\u91CF\u540D\u53D8\u66F4\uFF1A
\nanimation-duration -> duration\nanimation-timing-function-enter -> ease-out\nanimation-timing-function-leave -> ease-in\nbackground-color -> background\nbackground-color-light -> background-2\nborder-radius -> radius\nborder-width-base -> border-width\nbox-shadow -> shadow\nfont-family -> font\nfont-weight-bold -> font-bold\nprice-integer-font -> price-font\ntext-link -> link\ntransition-duration -> duration\n
\n\u7531\u4E8E\u6D89\u53CA\u7684 CSS \u53D8\u91CF\u8F83\u591A\uFF0C\u5EFA\u8BAE\u5728\u4EE3\u7801\u4ED3\u5E93\u4E2D\u8FDB\u884C\u5168\u5C40\u5339\u914D\u548C\u66FF\u6362\u3002
\n\u5BF9\u4E8E ConfigProvider
\u7EC4\u4EF6\uFF0C\u6211\u4EEC\u65B0\u589E\u4E86 ConfigProviderThemeVars
\u7C7B\u578B\u5B9A\u4E49\uFF0C\u63D0\u4F9B\u5B8C\u6574\u7684\u7C7B\u578B\u63D0\u793A\u3002\u5728 TypeScript \u4EE3\u7801\u4E2D\uFF0C\u4F60\u53EF\u4EE5\u901A\u8FC7\u7C7B\u578B\u63D0\u793A\u6765\u786E\u4FDD\u4E3B\u9898\u53D8\u91CF\u88AB\u6B63\u786E\u66FF\u6362\u3002
import type { ConfigProviderThemeVars } from 'vant';\n\nconst themeVars: ConfigProviderThemeVars = {\n sliderBarHeight: '4px',\n};\n
\n\u672C\u6587\u6863\u63D0\u4F9B\u4E86\u4ECE Vant 3 \u5230 Vant 4 \u7684\u5347\u7EA7\u6307\u5357\u3002
\n\u9996\u5148\u4F60\u9700\u8981\u5B89\u88C5 Vant 4 \u4EE5\u53CA @vant/compat
\u3002
@vant/compat
\u662F\u4E00\u4E2A\u517C\u5BB9\u5305\uFF0C\u53EF\u4EE5\u5E2E\u52A9\u4F60\u4ECE Vant 3 \u8FC7\u6E21\u5230 Vant 4\u3002
# \u901A\u8FC7 npm \u5B89\u88C5\nnpm add vant@^4 @vant/compat@^1\n\n# \u901A\u8FC7 yarn \u5B89\u88C5\nyarn add vant@^4 @vant/compat@^1\n\n# \u901A\u8FC7 pnpm \u5B89\u88C5\npnpm add vant@^4 @vant/compat@^1\n\n# \u901A\u8FC7 Bun \u5B89\u88C5\nbun add vant@^4 @vant/compat@^1\n
\n\u4F60\u4E5F\u53EF\u4EE5\u76F4\u63A5\u4FEE\u6539 package.json
\u7684 dependencies
\u5B57\u6BB5\u4E2D\u7684\u7248\u672C\u53F7\uFF0C\u4FEE\u6539\u5B8C\u6210\u540E\u9700\u8981\u91CD\u65B0\u5B89\u88C5\u4F9D\u8D56\u3002
{\n "dependencies": {\n- "vant": "^3.0.0",\n+ "vant": "^4.0.0",\n+ "@vant/compat": "^1.0.0",\n }\n}\n
\n\u4ECE Vant 4.0 \u5F00\u59CB\uFF0C\u5C06\u4E0D\u518D\u652F\u6301 babel-plugin-import
\uFF0C\u8BF7\u79FB\u9664\u9879\u76EE\u4E2D\u4F9D\u8D56\u7684 babel-plugin-import
\u63D2\u4EF6\u3002
\u53EA\u9700\u8981\u5220\u9664 babel.config.js
\u4E2D\u7684\u4EE5\u4E0B\u4EE3\u7801\u5373\u53EF\uFF1A
module.exports = {\n plugins: [\n- ['import', {\n- libraryName: 'vant',\n- libraryDirectory: 'es',\n- style: true\n- }, 'vant']\n ]\n};\n
\n\u79FB\u9664 babel-plugin-import
\u4E3B\u8981\u5E26\u6765\u4EE5\u4E0B\u6536\u76CA\uFF1A
babel-plugin-import
\u7684 import \u9650\u5236\uFF0C\u53EF\u4EE5\u4ECE Vant \u4E2D\u5BFC\u5165\u9664\u7EC4\u4EF6\u4EE5\u5916\u7684\u5185\u5BB9\uFF0C\u6BD4\u5982 Vant 4 \u4E2D\u65B0\u589E\u7684 showToast
\u65B9\u6CD5\uFF0C\u6216\u662F buttonProps
\u5BF9\u8C61\uFF1Aimport { showToast, buttonProps } from 'vant';\n
\n\u79FB\u9664 babel-plugin-import
\u5BF9\u9879\u76EE\u7684 JS \u4F53\u79EF\u4E0D\u4F1A\u6709\u5F71\u54CD\uFF0C\u56E0\u4E3A Vant \u9ED8\u8BA4\u652F\u6301\u901A\u8FC7 Tree Shaking \u6765\u79FB\u9664\u4E0D\u9700\u8981\u7684 JS \u4EE3\u7801\u3002
\u800C CSS \u4EE3\u7801\u7684\u5F15\u5165\u65B9\u5F0F\u53EF\u4EE5\u4ECE\u4EE5\u4E0B\u4E24\u79CD\u65B9\u5F0F\u4E2D\u8FDB\u884C\u9009\u62E9\uFF1A
\nimport 'vant/lib/index.css';\n
\n\u5728 Vant 4 \u4E2D\uFF0C\u4E00\u5171\u6709\u4E09\u4E2A\u7EC4\u4EF6\u88AB\u5B8C\u5168\u91CD\u6784\uFF0C\u5B83\u4EEC\u662F\uFF1A
\nArea
Picker
DatetimePicker
\u8FD9\u4E09\u4E2A\u7EC4\u4EF6\u4E4B\u6240\u4EE5\u88AB\u91CD\u6784\uFF0C\u662F\u56E0\u4E3A\u5728\u4E4B\u524D\u7684\u7248\u672C\u4E2D\uFF0CPicker
\u7EC4\u4EF6\u7684 API \u8BBE\u8BA1\u5B58\u5728\u4E00\u4E9B\u4E0D\u5408\u7406\u7684\u8BBE\u8BA1\uFF0C\u5BFC\u81F4\u5927\u5BB6\u5728\u4F7F\u7528\u65F6\u7ECF\u5E38\u9047\u5230\u95EE\u9898\uFF0C\u6BD4\u5982\uFF1A
\u4E3A\u4E86\u89E3\u51B3\u4E0A\u8FF0\u95EE\u9898\uFF0C\u6211\u4EEC\u5728 v4 \u7248\u672C\u4E2D\u5BF9 Picker
\u7EC4\u4EF6\u8FDB\u884C\u4E86\u91CD\u6784\uFF0C\u540C\u65F6\u4E5F\u91CD\u6784\u4E86\u57FA\u4E8E Picker
\u6D3E\u751F\u51FA\u7684 Area
\u548C DatetimePicker
\u7EC4\u4EF6\u3002\u5982\u679C\u4F60\u7684\u9879\u76EE\u4E2D\u4F7F\u7528\u4E86\u8FD9\u4E09\u4E2A\u7EC4\u4EF6\uFF0C\u8BF7\u4ED4\u7EC6\u9605\u8BFB\u6587\u6863\u5E76\u8FDB\u884C\u5347\u7EA7\u3002
v-model
\u7ED1\u5B9A\u5F53\u524D\u9009\u4E2D\u7684\u503C\uFF0C\u79FB\u9664 default-index
\u5C5E\u6027columns
\u5C5E\u6027\u7684\u7ED3\u6784confirm
\u65B9\u6CD5getSelectedOptions
\u5B9E\u4F8B\u65B9\u6CD5confirm
\u3001cancel
\u3001change
\u4E8B\u4EF6\u7684\u53C2\u6570item-height
\u5C5E\u6027\u4E3A option-height
visible-item-count
\u5C5E\u6027\u4E3A visible-option-num
\n\n\u8BE6\u7EC6\u7528\u6CD5\u8BF7\u53C2\u89C1 Picker \u7EC4\u4EF6\u6587\u6863\u3002
\n
DatetimePicker \u7EC4\u4EF6\u88AB\u62C6\u5206\u4E3A\u4E09\u4E2A\u5B50\u7EC4\u4EF6\uFF1A
\n\u540C\u65F6\uFF0CTimePicker \u548C DatePicker \u7EC4\u4EF6\u4E5F\u57FA\u4E8E\u65B0\u7248 Picker \u7EC4\u4EF6\u8FDB\u884C\u91CD\u6784\uFF0C\u5E76\u4F18\u5316\u4E86\u90E8\u5206 API \u8BBE\u8BA1\u3002
\n\u4EE5\u4E0B\u662F TimePicker \u548C DatePicker \u7684\u4E3B\u8981 API \u53D8\u5316\uFF0C\u66F4\u591A\u7EC6\u8282\u8BF7\u53C2\u8003 TimePicker \u548C DatePicker \u6587\u6863\u3002
\nv-model
\u7ED1\u5B9A\u7684\u503C\u8C03\u6574\u4E3A\u6570\u7EC4\u683C\u5F0Fcolumns-type
\u5C5E\u6027\uFF0C\u7528\u4E8E\u63A7\u5236\u9009\u9879\u7C7B\u578B\u548C\u987A\u5E8Ftype
\u5C5E\u6027\u548C columns-order
\u5C5E\u6027getPicker
\u65B9\u6CD5confirm
\u3001cancel
\u3001change
\u4E8B\u4EF6\u7684\u53C2\u6570\uFF0C\u4E0E Picker \u7EC4\u4EF6\u4FDD\u6301\u4E00\u81F4\n\nVant 4 \u4E0D\u518D\u63D0\u4F9B\u65E7\u7248\u7684 DatetimePicker \u7EC4\u4EF6\uFF0C\u4F7F\u7528 PickerGroup \u7EC4\u4EF6\u53EF\u4EE5\u5B9E\u73B0\u66F4\u7075\u6D3B\u3001\u66F4\u4E30\u5BCC\u7684\u4EA4\u4E92\u6548\u679C\uFF0C\u5177\u4F53\u7528\u6CD5\u8BF7\u53C2\u8003 PickerGroup \u7EC4\u4EF6\u6587\u6863\u3002
\n
Area \u7EC4\u4EF6\u662F\u57FA\u4E8E Picker \u7EC4\u4EF6\u8FDB\u884C\u5C01\u88C5\u7684\uFF0C\u56E0\u6B64\u672C\u6B21\u5347\u7EA7\u4E5F\u5BF9 Area \u7EC4\u4EF6\u8FDB\u884C\u4E86\u5185\u90E8\u903B\u8F91\u7684\u91CD\u6784\uFF0C\u5E76\u4F18\u5316\u4E86\u90E8\u5206 API\u3002
\nv-model
\u7ED1\u5B9A\u5F53\u524D\u9009\u4E2D\u7684\u503Creset
\u65B9\u6CD5\uFF0C\u73B0\u5728\u53EF\u4EE5\u901A\u8FC7\u4FEE\u6539 v-model
\u6765\u8FDB\u884C\u91CD\u7F6Eis-oversea-code
\u5C5E\u6027confirm
\u3001cancel
\u3001change
\u4E8B\u4EF6\u7684\u53C2\u6570\uFF0C\u4E0E Picker \u7EC4\u4EF6\u4FDD\u6301\u4E00\u81F4value
\u5C5E\u6027\u4E3A modelValue
item-height
\u5C5E\u6027\u4E3A option-height
visible-item-count
\u5C5E\u6027\u4E3A visible-option-num
\n\n\u8BE6\u7EC6\u7528\u6CD5\u8BF7\u53C2\u89C1 Area \u7EC4\u4EF6\u6587\u6863\u3002
\n
\u5728 Vant 3 \u4E2D\uFF0CDialog
\u662F\u4E00\u4E2A\u51FD\u6570\uFF0C\u8C03\u7528\u51FD\u6570\u53EF\u4EE5\u5FEB\u901F\u5524\u8D77\u5168\u5C40\u7684\u5F39\u7A97\u7EC4\u4EF6\uFF0C\u800C Dialog.Component
\u624D\u662F Dialog
\u7EC4\u4EF6\u5BF9\u8C61\uFF0C\u8FD9\u4E0E\u5927\u90E8\u5206\u7EC4\u4EF6\u7684\u7528\u6CD5\u5B58\u5728\u5DEE\u5F02\uFF0C\u5BB9\u6613\u5BFC\u81F4\u4F7F\u7528\u9519\u8BEF\u3002
\u4E3A\u4E86\u66F4\u7B26\u5408\u76F4\u89C9\uFF0C\u6211\u4EEC\u5728 Vant 4 \u4E2D\u8C03\u6574\u4E86 Dialog
\u7684\u8C03\u7528\u65B9\u5F0F\uFF0C\u5C06 Dialog()
\u51FD\u6570\u91CD\u547D\u540D\u4E3A showDialog()
\uFF0C\u5E76\u8BA9 Dialog
\u76F4\u63A5\u6307\u5411\u7EC4\u4EF6\u5BF9\u8C61\u3002
// Vant 3\nDialog(); // \u51FD\u6570\u8C03\u7528\nDialog.Component; // \u7EC4\u4EF6\u5BF9\u8C61\n\n// Vant 4\nshowDialog(); // \u51FD\u6570\u8C03\u7528\nDialog; // \u7EC4\u4EF6\u5BF9\u8C61\n
\n\u7531\u4E8E Dialog
\u53D8\u4E3A\u4E86\u7EC4\u4EF6\u5BF9\u8C61\uFF0CDialog
\u4E0A\u6302\u8F7D\u7684\u5176\u4ED6\u65B9\u6CD5\u4E5F\u8FDB\u884C\u4E86\u91CD\u547D\u540D\uFF0C\u65B0\u65E7 API \u7684\u6620\u5C04\u5173\u7CFB\u5982\u4E0B\uFF1A
Dialog(); // -> showDialog()\nDialog.alert(); // -> showDialog()\nDialog.confirm(); // -> showConfirmDialog()\nDialog.close(); // -> closeDialog();\nDialog.setDefaultOptions(); // -> setDialogDefaultOptions()\nDialog.resetDefaultOptions(); // -> resetDialogDefaultOptions()\n
\n\u4E3A\u4E86\u4FBF\u4E8E\u65E7\u7248\u672C\u4EE3\u7801\u8FC1\u79FB\u81F3 v4\uFF0C\u6211\u4EEC\u63D0\u4F9B\u4E86\u517C\u5BB9\u65B9\u6848\uFF0C\u4F60\u53EF\u4EE5\u4F7F\u7528 @vant/compat
\u4E2D\u5BFC\u51FA\u7684 Dialog
\u5BF9\u8C61\u6765\u517C\u5BB9\u539F\u6709\u4EE3\u7801\u3002
\u4ECE @vant/compat
\u4E2D\u5F15\u7528 Dialog
\u65B9\u6CD5\uFF1A
import { Dialog } from '@vant/compat';\n\nDialog();\nDialog.close();\n
\n@vant/compat
\u4E2D\u5BFC\u51FA\u7684 Dialog
\u4E0E Vant 3 \u4E2D\u7684 Dialog
\u62E5\u6709\u5B8C\u5168\u4E00\u81F4\u7684 API \u548C\u884C\u4E3A\uFF0C\u56E0\u6B64\u4F60\u53EA\u9700\u8981\u4FEE\u6539 Dialog
\u7684\u5F15\u7528\u8DEF\u5F84\uFF0C\u5176\u4ED6\u4EE3\u7801\u53EF\u4EE5\u4FDD\u6301\u4E0D\u53D8\u3002
\u5728\u9879\u76EE\u5B8C\u6210\u5347\u7EA7\u5230 Vant v4 \u540E\uFF0C\u5EFA\u8BAE\u5728\u8FED\u4EE3\u4E2D\u9010\u6B65\u66FF\u6362\u4E3A\u65B0\u7684 showDialog
\u7B49\u65B9\u6CD5\uFF0C\u5E76\u79FB\u9664 @vant/compat
\u5305\u3002
Vant 4 \u4E2D\uFF0CToast
\u7EC4\u4EF6\u7684\u8C03\u7528\u65B9\u5F0F\u4E5F\u8FDB\u884C\u4E86\u8C03\u6574\uFF0C\u4E0E Dialog
\u7EC4\u4EF6\u7684\u6539\u52A8\u4E00\u81F4\uFF1A
// Vant 3\nToast(); // \u51FD\u6570\u8C03\u7528\n\n// Vant 4\nshowToast(); // \u51FD\u6570\u8C03\u7528\nToast; // \u7EC4\u4EF6\u5BF9\u8C61\n
\nToast
\u4E0A\u6302\u8F7D\u7684\u5176\u4ED6\u65B9\u6CD5\u4E5F\u8FDB\u884C\u4E86\u91CD\u547D\u540D\uFF0C\u65B0\u65E7 API \u7684\u6620\u5C04\u5173\u7CFB\u5982\u4E0B\uFF1A
Toast(); // -> showToast()\nToast.fail(); // -> showFailToast()\nToast.success(); // -> showSuccessToast()\nToast.loading(); // -> showLoadingToast()\nToast.clear(); // -> closeToast()\nToast.setDefaultOptions(); // -> setToastDefaultOptions()\nToast.resetDefaultOptions(); // -> resetToastDefaultOptions()\n
\n\u540C\u65F6\uFF0CVant 4 \u5C06\u4E0D\u518D\u5728 this
\u5BF9\u8C61\u4E0A\u5168\u5C40\u6CE8\u518C $toast
\u65B9\u6CD5\uFF0C\u8FD9\u610F\u5473\u7740 this
\u5BF9\u8C61\u4E0A\u5C06\u65E0\u6CD5\u8BBF\u95EE\u5230 $toast
\u3002
\u4E3A\u4E86\u4FBF\u4E8E\u4EE3\u7801\u8FC1\u79FB\uFF0C\u6211\u4EEC\u63D0\u4F9B\u4E86\u517C\u5BB9\u65B9\u6848\uFF0C\u4F60\u53EF\u4EE5\u4F7F\u7528 @vant/compat
\u4E2D\u5BFC\u51FA\u7684 Toast
\u5BF9\u8C61\u6765\u517C\u5BB9\u539F\u6709\u4EE3\u7801\u3002
import { Toast } from '@vant/compat';\n\nToast();\nToast.clear();\n
\n@vant/compat
\u4E2D\u5BFC\u51FA\u7684 Toast
\u4E0E Vant 3 \u4E2D\u7684 Toast
\u62E5\u6709\u5B8C\u5168\u4E00\u81F4\u7684 API \u548C\u884C\u4E3A\uFF0C\u56E0\u6B64\u4F60\u53EA\u9700\u8981\u4FEE\u6539 Toast
\u7684\u5F15\u7528\u8DEF\u5F84\uFF0C\u5176\u4ED6\u4EE3\u7801\u53EF\u4EE5\u4FDD\u6301\u4E0D\u53D8\u3002
Vant 4 \u4E2D\uFF0CNotify
\u7EC4\u4EF6\u7684\u8C03\u7528\u65B9\u5F0F\u4E5F\u8FDB\u884C\u4E86\u8C03\u6574\uFF0C\u4E0E Dialog
\u7EC4\u4EF6\u7684\u6539\u52A8\u4E00\u81F4\uFF1A
// Vant 3\nNotify(); // \u51FD\u6570\u8C03\u7528\nNotify.Component; // \u7EC4\u4EF6\u5BF9\u8C61\n\n// Vant 4\nshowNotify(); // \u51FD\u6570\u8C03\u7528\nNotify; // \u7EC4\u4EF6\u5BF9\u8C61\n
\nNotify
\u4E0A\u6302\u8F7D\u7684\u5176\u4ED6\u65B9\u6CD5\u4E5F\u8FDB\u884C\u4E86\u91CD\u547D\u540D\uFF0C\u65B0\u65E7 API \u7684\u6620\u5C04\u5173\u7CFB\u5982\u4E0B\uFF1A
Notify(); // -> showNotify()\nNotify.clear(); // -> closeNotify()\nNotify.setDefaultOptions(); // -> setNotifyDefaultOptions()\nNotify.resetDefaultOptions(); // -> resetNotifyDefaultOptions()\n
\n\u540C\u65F6\uFF0CVant 4 \u5C06\u4E0D\u518D\u5728 this
\u5BF9\u8C61\u4E0A\u5168\u5C40\u6CE8\u518C $notify
\u65B9\u6CD5\uFF0C\u8FD9\u610F\u5473\u7740 this
\u5BF9\u8C61\u4E0A\u5C06\u65E0\u6CD5\u8BBF\u95EE\u5230 $notify
\u3002
\u4E3A\u4E86\u4FBF\u4E8E\u4EE3\u7801\u8FC1\u79FB\uFF0C\u6211\u4EEC\u63D0\u4F9B\u4E86\u517C\u5BB9\u65B9\u6848\uFF0C\u4F60\u53EF\u4EE5\u4F7F\u7528 @vant/compat
\u4E2D\u5BFC\u51FA\u7684 Notify
\u5BF9\u8C61\u6765\u517C\u5BB9\u539F\u6709\u4EE3\u7801\u3002
import { Notify } from '@vant/compat';\n\nNotify();\nNotify.clear();\n
\n@vant/compat
\u4E2D\u5BFC\u51FA\u7684 Notify
\u4E0E Vant 3 \u4E2D\u7684 Notify
\u62E5\u6709\u5B8C\u5168\u4E00\u81F4\u7684 API \u548C\u884C\u4E3A\uFF0C\u56E0\u6B64\u4F60\u53EA\u9700\u8981\u4FEE\u6539 Notify
\u7684\u5F15\u7528\u8DEF\u5F84\uFF0C\u5176\u4ED6\u4EE3\u7801\u53EF\u4EE5\u4FDD\u6301\u4E0D\u53D8\u3002
Vant 4 \u4E2D\uFF0CImagePreview
\u7EC4\u4EF6\u7684\u8C03\u7528\u65B9\u5F0F\u4E5F\u8FDB\u884C\u4E86\u8C03\u6574\uFF0C\u4E0E Dialog
\u7EC4\u4EF6\u7684\u6539\u52A8\u4E00\u81F4\uFF1A
// Vant 3\nImagePreview(); // \u51FD\u6570\u8C03\u7528\nImagePreview.Component; // \u7EC4\u4EF6\u5BF9\u8C61\n\n// Vant 4\nshowImagePreview(); // \u51FD\u6570\u8C03\u7528\nImagePreview; // \u7EC4\u4EF6\u5BF9\u8C61\n
\n\u4E3A\u4E86\u4FBF\u4E8E\u4EE3\u7801\u8FC1\u79FB\uFF0C\u6211\u4EEC\u63D0\u4F9B\u4E86\u517C\u5BB9\u65B9\u6848\uFF0C\u4F60\u53EF\u4EE5\u4F7F\u7528 @vant/compat
\u4E2D\u5BFC\u51FA\u7684 ImagePreview
\u5BF9\u8C61\u6765\u517C\u5BB9\u539F\u6709\u4EE3\u7801\u3002
import { ImagePreview } from '@vant/compat';\n\nImagePreview();\n
\n@vant/compat
\u4E2D\u5BFC\u51FA\u7684 ImagePreview
\u4E0E Vant 3 \u4E2D\u7684 ImagePreview
\u62E5\u6709\u5B8C\u5168\u4E00\u81F4\u7684 API \u548C\u884C\u4E3A\uFF0C\u56E0\u6B64\u4F60\u53EA\u9700\u8981\u4FEE\u6539 ImagePreview
\u7684\u5F15\u7528\u8DEF\u5F84\uFF0C\u5176\u4ED6\u4EE3\u7801\u53EF\u4EE5\u4FDD\u6301\u4E0D\u53D8\u3002
\u4ECE Vant 4 \u5F00\u59CB\uFF0C\u6240\u6709\u7684\u4E8B\u4EF6\u5747\u91C7\u7528 Vue \u5B98\u65B9\u63A8\u8350\u7684\u9A7C\u5CF0\u683C\u5F0F\u8FDB\u884C\u547D\u540D\u3002
\n// Vant 3\nemit('click-input');\n\n// Vant 4\nemit('clickInput');\n
\n\u8FD9\u9879\u6539\u52A8\u4E0D\u5F71\u54CD\u539F\u6709\u7684\u6A21\u677F\u4EE3\u7801\uFF0CVue \u4F1A\u81EA\u52A8\u5728\u6A21\u677F\u4E2D\u5BF9\u4E8B\u4EF6\u540D\u8FDB\u884C\u683C\u5F0F\u8F6C\u6362\uFF0C\u56E0\u6B64\u4F60\u65E0\u987B\u505A\u4EFB\u4F55\u66F4\u6539\u3002
\n<!-- \u4EE5\u4E0B\u4EE3\u7801\u53EF\u4EE5\u7167\u5E38\u8FD0\u884C\uFF0C\u65E0\u987B\u505A\u4EFB\u4F55\u66F4\u6539 -->\n<van-field @click-input="onClick" />\n
\n\u5982\u679C\u4F60\u5728 JSX \u4E2D\u4F7F\u7528 Vant \u7EC4\u4EF6\uFF0C\u9700\u8981\u5C06\u76D1\u542C\u7684\u4E8B\u4EF6\u540D\u8C03\u6574\u4E3A\u9A7C\u5CF0\u683C\u5F0F\uFF0C\u539F\u6709\u7684\u4E2D\u5212\u7EBF\u683C\u5F0F\u5C06\u4E0D\u518D\u751F\u6548\uFF0C\u65B0\u7684\u76D1\u542C\u65B9\u5F0F\u66F4\u52A0\u7B26\u5408 JSX \u672C\u8EAB\u7684\u89C4\u8303\uFF1A
\n// Vant 3\n<Field onClick-input={onClick} />\n\n// Vant 4\n<Field onClickInput={onClick} />\n
\n\u5728 Vant 4.0 \u7248\u672C\u4E2D\uFF0C\u4EE5\u4E0B API \u8FDB\u884C\u4E86\u4E0D\u517C\u5BB9\u66F4\u65B0\uFF1A
\nshow-postal
\u5C5E\u6027postal-validator
\u5C5E\u6027change-area
\u4E8B\u4EF6\u7684\u53C2\u6570\u8C03\u6574\u4E3A PickerOption[]
\u7C7B\u578BgetArea
\u5B9E\u4F8B\u65B9\u6CD5Popup \u7684 CSS \u6837\u5F0F\u8FDB\u884C\u4E86\u4E00\u5B9A\u8C03\u6574\uFF0C\u5982\u679C\u4F60\u5728 Popup \u7EC4\u4EF6\u4E0A\u6DFB\u52A0\u4E86\u4E00\u4E9B\u81EA\u5B9A\u4E49\u7684 CSS \u6837\u5F0F\uFF0C\u8BF7\u786E\u8BA4\u672C\u6B21\u5347\u7EA7\u662F\u5426\u5BF9\u9879\u76EE\u4E2D\u7684 UI \u4EA7\u751F\u5F71\u54CD\u3002
\nbox-sizing: border-box
\u6837\u5F0Fposition="center"
\u65F6\u7684\u6C34\u5E73\u5C45\u4E2D\u65B9\u5F0F\uFF0C\u4EE5\u89E3\u51B3\u5F39\u7A97\u5BBD\u5EA6\u65E0\u6CD5\u6B63\u786E\u81EA\u9002\u5E94\u7684\u95EE\u9898\uFF1A// Vant 3\n.van-popup--center {\n left: 50%;\n transform: translate3d(-50%, -50%, 0);\n}\n\n// Vant 4\n.van-popup--center {\n left: 0;\n right: 0;\n width: fit-content;\n max-width: calc(100vw - var(--van-padding-md) * 2);\n margin: 0 auto;\n transform: translateY(-50%);\n}\n
\nclick
\u548C disabled
\u4E8B\u4EF6\uFF0C\u8BF7\u4F7F\u7528 click-tab
\u4E8B\u4EF6\u4EE3\u66FF\u5728\u4E4B\u524D\u7684\u7248\u672C\u4E2D\uFF0CVant \u7EC4\u4EF6\u6709\u4E24\u79CD\u4E3B\u8272\u8C03\uFF0C\u90E8\u5206\u7EC4\u4EF6\u91C7\u7528\u84DD\u8272\uFF08#1989fa\uFF09\u4F5C\u4E3A\u4E3B\u8272\u8C03\uFF0C\u53E6\u4E00\u90E8\u5206\u5219\u91C7\u7528\u7EA2\u8272\uFF08#ee0a24\uFF09\u3002
\n\u4E3A\u4E86\u4FDD\u6301\u8272\u5F69\u89C4\u8303\u7684\u4E00\u81F4\u6027\uFF0C\u6211\u4EEC\u5728 Vant 4 \u4E2D\u5BF9\u4E3B\u8272\u8C03\u8FDB\u884C\u7EDF\u4E00\uFF0C\u6240\u6709\u7EC4\u4EF6\u5747\u91C7\u7528\u84DD\u8272\u4F5C\u4E3A\u4E3B\u8272\u8C03\u3002
\n\u4EE5\u4E0B\u7EC4\u4EF6\u7684\u4E3B\u8272\u8C03\u7531\u7EA2\u8272\u8C03\u6574\u4E3A\u84DD\u8272\uFF1A
\n\u76EE\u524D Vant \u5DF2\u7ECF\u652F\u6301\u4E86\u57FA\u4E8E CSS \u53D8\u91CF\u7684\u4E3B\u9898\u5B9A\u5236\u80FD\u529B\uFF0C\u76F8\u8F83\u4E8E Less \u5B9A\u5236\u66F4\u52A0\u7075\u6D3B\u3002\u56E0\u6B64\uFF0CVant 4 \u5C06\u4E0D\u518D\u63D0\u4F9B\u57FA\u4E8E Less \u7684\u4E3B\u9898\u5B9A\u5236\u65B9\u5F0F\u3002
\n\u8FD9\u610F\u5473\u7740 Vant \u7684 npm \u5305\u4E2D\u5C06\u4E0D\u518D\u4F1A\u5305\u542B .less
\u6837\u5F0F\u6E90\u6587\u4EF6\uFF0C\u53EA\u4F1A\u63D0\u4F9B\u7F16\u8BD1\u540E\u7684 .css
\u6837\u5F0F\u6587\u4EF6\u3002
\u5982\u679C\u4F60\u7684\u9879\u76EE\u6B63\u5728\u4F7F\u7528\u65E7\u7248\u7684 Less \u4E3B\u9898\u5B9A\u5236\uFF0C\u8BF7\u4F7F\u7528 ConfigProvider \u5168\u5C40\u914D\u7F6E \u7EC4\u4EF6\u8FDB\u884C\u66FF\u6362\u3002
\n\u8003\u8651\u5230 \u4EE3\u7801\u4F53\u79EF \u548C \u4F7F\u7528\u4FBF\u6377\u6027\uFF0C\u6211\u4EEC\u5BF9\u90E8\u5206 CSS \u53D8\u91CF\u7684\u540D\u79F0\u8FDB\u884C\u4E86\u7B80\u5316\uFF0C\u5728\u53D8\u91CF\u540D\u4E2D\u4F7F\u7528\u4E86\u66F4\u7B80\u77ED\u7684\u5355\u8BCD\uFF0C\u4EE5\u51CF\u5C0F\u4EE3\u7801\u4F53\u79EF\u3002
\n\u672C\u6B21\u5347\u7EA7\u6D89\u53CA\u4EE5\u4E0B\u53D8\u91CF\u540D\u53D8\u66F4\uFF1A
\nanimation-duration -> duration\nanimation-timing-function-enter -> ease-out\nanimation-timing-function-leave -> ease-in\nbackground-color -> background\nbackground-color-light -> background-2\nborder-radius -> radius\nborder-width-base -> border-width\nbox-shadow -> shadow\nfont-family -> font\nfont-weight-bold -> font-bold\nprice-integer-font -> price-font\ntext-link -> link\ntransition-duration -> duration\n
\n\u7531\u4E8E\u6D89\u53CA\u7684 CSS \u53D8\u91CF\u8F83\u591A\uFF0C\u5EFA\u8BAE\u5728\u4EE3\u7801\u4ED3\u5E93\u4E2D\u8FDB\u884C\u5168\u5C40\u5339\u914D\u548C\u66FF\u6362\u3002
\n\u5BF9\u4E8E ConfigProvider
\u7EC4\u4EF6\uFF0C\u6211\u4EEC\u65B0\u589E\u4E86 ConfigProviderThemeVars
\u7C7B\u578B\u5B9A\u4E49\uFF0C\u63D0\u4F9B\u5B8C\u6574\u7684\u7C7B\u578B\u63D0\u793A\u3002\u5728 TypeScript \u4EE3\u7801\u4E2D\uFF0C\u4F60\u53EF\u4EE5\u901A\u8FC7\u7C7B\u578B\u63D0\u793A\u6765\u786E\u4FDD\u4E3B\u9898\u53D8\u91CF\u88AB\u6B63\u786E\u66FF\u6362\u3002
import type { ConfigProviderThemeVars } from 'vant';\n\nconst themeVars: ConfigProviderThemeVars = {\n sliderBarHeight: '4px',\n};\n
\nUsed to create, update, and delete receiving addresses.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { AddressEdit } from 'vant';\n\nconst app = createApp();\napp.use(AddressEdit);\n
\n<van-address-edit\n :area-list="areaList"\n show-delete\n show-set-default\n show-search-result\n :search-result="searchResult"\n :area-columns-placeholder="['Choose', 'Choose', 'Choose']"\n @save="onSave"\n @delete="onDelete"\n @change-detail="onChangeDetail"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const searchResult = ref([]);\n\n const onSave = () => showToast('save');\n const onDelete = () => showToast('delete');\n const onChangeDetail = (val) => {\n if (val) {\n searchResult.value = [\n {\n name: 'Name1',\n address: 'Address',\n },\n ];\n } else {\n searchResult.value = [];\n }\n };\n\n return {\n onSave,\n onDelete,\n areaList,\n searchResult,\n onChangeDetail,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
area-list | \nArea List | \nobject | \n- | \n
area-columns-placeholder | \nplaceholder of area columns | \nstring[] | \n[] | \n
area-placeholder | \nplaceholder of area input field | \nstring | \nArea | \n
address-info | \nAddress Info | \nAddressEditInfo | \n{} | \n
search-result | \nAddress search result | \nAddressEditSearchItem[] | \n[] | \n
show-delete | \nWhether to show delete button | \nboolean | \nfalse | \n
show-set-default | \nWhether to show default address switch | \nboolean | \nfalse | \n
show-search-result | \nWhether to show address search result | \nboolean | \nfalse | \n
show-area | \nWhether to show area cell | \nboolean | \ntrue | \n
show-detail | \nWhether to show detail field | \nboolean | \ntrue | \n
disable-area | \nWhether to disable area select | \nboolean | \nfalse | \n
save-button-text | \nSave button text | \nstring | \nSave | \n
delete-button-text | \nDelete button text | \nstring | \nDelete | \n
detail-rows | \nDetail input rows | \nnumber | string | \n1 | \n
detail-maxlength | \nDetail maxlength | \nnumber | string | \n200 | \n
is-saving | \nWhether to show save button loading status | \nboolean | \nfalse | \n
is-deleting | \nWhether to show delete button loading status | \nboolean | \nfalse | \n
tel-validator | \nThe method to validate tel | \n(val: string) => boolean | \n- | \n
tel-maxlength | \nTel maxlength | \nnumber | string | \n- | \n
validator | \nCustom validator | \n(key: string, val: string) => string | \n- | \n
Event | \nDescription | \nArguments | \n
---|---|---|
save | \nEmitted when the save button is clicked | \ninfo: AddressEditInfo | \n
focus | \nEmitted when field is focused | \nkey: string | \n
change v4.7.0 | \nEmitted when only the name and tel field are changed | \n{key: string, value: string} | \n
delete | \nEmitted when confirming delete | \ninfo: AddressEditInfo | \n
select-search | \nEmitted when a search result is selected | \nvalue: string | \n
click-area | \nEmitted when the area field is clicked | \n- | \n
change-area | \nEmitted when area changed | \nselectedOptions: PickerOption[] | \n
change-detail | \nEmitted when address detail changed | \nvalue: string | \n
change-default | \nEmitted when switching default address | \nchecked: boolean | \n
Name | \nDescription | \n
---|---|
default | \nCustom content below address detail | \n
Use ref to get AddressEdit instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
setAddressDetail | \nSet address detail | \naddressDetail: string | \n- | \n
setAreaCode | \nSet area code | \ncode: string | \n- | \n
The component exports the following type definitions:
\nimport type {\n AddressEditInfo,\n AddressEditProps,\n AddressEditInstance,\n AddressEditSearchItem,\n} from 'vant';\n
\nAddressEditInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { AddressEditInstance } from 'vant';\n\nconst addressEditRef = ref<AddressEditInstance>();\n\naddressEditRef.value?.setAddressDetail('');\n
\nkey | \nDescription | \nType | \n
---|---|---|
name | \nName | \nstring | \n
tel | \nPhone | \nstring | \n
province | \nProvince | \nstring | \n
city | \nCity | \nstring | \n
county | \nCounty | \nstring | \n
addressDetail | \nDetailed Address | \nstring | \n
areaCode | \nArea code | \nstring | \n
isDefault | \nIs default address | \nboolean | \n
key | \nDescription | \nType | \n
---|---|---|
name | \nName | \nstring | \n
address | \nAddress | \nstring | \n
Please refer to Area component.
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-address-edit-padding | \nvar(--van-padding-sm) | \n- | \n
--van-address-edit-buttons-padding | \nvar(--van-padding-xl) var(--van-padding-base) | \n- | \n
--van-address-edit-button-margin-bottom | \nvar(--van-padding-sm) | \n- | \n
--van-address-edit-button-font-size | \nvar(--van-font-size-lg) | \n- | \n
Used to create, update, and delete receiving addresses.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { AddressEdit } from 'vant';\n\nconst app = createApp();\napp.use(AddressEdit);\n
\n<van-address-edit\n :area-list="areaList"\n show-delete\n show-set-default\n show-search-result\n :search-result="searchResult"\n :area-columns-placeholder="['Choose', 'Choose', 'Choose']"\n @save="onSave"\n @delete="onDelete"\n @change-detail="onChangeDetail"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const searchResult = ref([]);\n\n const onSave = () => showToast('save');\n const onDelete = () => showToast('delete');\n const onChangeDetail = (val) => {\n if (val) {\n searchResult.value = [\n {\n name: 'Name1',\n address: 'Address',\n },\n ];\n } else {\n searchResult.value = [];\n }\n };\n\n return {\n onSave,\n onDelete,\n areaList,\n searchResult,\n onChangeDetail,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
area-list | \nArea List | \nobject | \n- | \n
area-columns-placeholder | \nplaceholder of area columns | \nstring[] | \n[] | \n
area-placeholder | \nplaceholder of area input field | \nstring | \nArea | \n
address-info | \nAddress Info | \nAddressEditInfo | \n{} | \n
search-result | \nAddress search result | \nAddressEditSearchItem[] | \n[] | \n
show-delete | \nWhether to show delete button | \nboolean | \nfalse | \n
show-set-default | \nWhether to show default address switch | \nboolean | \nfalse | \n
show-search-result | \nWhether to show address search result | \nboolean | \nfalse | \n
show-area | \nWhether to show area cell | \nboolean | \ntrue | \n
show-detail | \nWhether to show detail field | \nboolean | \ntrue | \n
disable-area | \nWhether to disable area select | \nboolean | \nfalse | \n
save-button-text | \nSave button text | \nstring | \nSave | \n
delete-button-text | \nDelete button text | \nstring | \nDelete | \n
detail-rows | \nDetail input rows | \nnumber | string | \n1 | \n
detail-maxlength | \nDetail maxlength | \nnumber | string | \n200 | \n
is-saving | \nWhether to show save button loading status | \nboolean | \nfalse | \n
is-deleting | \nWhether to show delete button loading status | \nboolean | \nfalse | \n
tel-validator | \nThe method to validate tel | \n(val: string) => boolean | \n- | \n
tel-maxlength | \nTel maxlength | \nnumber | string | \n- | \n
validator | \nCustom validator | \n(key: string, val: string) => string | \n- | \n
Event | \nDescription | \nArguments | \n
---|---|---|
save | \nEmitted when the save button is clicked | \ninfo: AddressEditInfo | \n
focus | \nEmitted when field is focused | \nkey: string | \n
change v4.7.0 | \nEmitted when only the name and tel field are changed | \n{key: string, value: string} | \n
delete | \nEmitted when confirming delete | \ninfo: AddressEditInfo | \n
select-search | \nEmitted when a search result is selected | \nvalue: string | \n
click-area | \nEmitted when the area field is clicked | \n- | \n
change-area | \nEmitted when area changed | \nselectedOptions: PickerOption[] | \n
change-detail | \nEmitted when address detail changed | \nvalue: string | \n
change-default | \nEmitted when switching default address | \nchecked: boolean | \n
Name | \nDescription | \n
---|---|
default | \nCustom content below address detail | \n
Use ref to get AddressEdit instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
setAddressDetail | \nSet address detail | \naddressDetail: string | \n- | \n
setAreaCode | \nSet area code | \ncode: string | \n- | \n
The component exports the following type definitions:
\nimport type {\n AddressEditInfo,\n AddressEditProps,\n AddressEditInstance,\n AddressEditSearchItem,\n} from 'vant';\n
\nAddressEditInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { AddressEditInstance } from 'vant';\n\nconst addressEditRef = ref<AddressEditInstance>();\n\naddressEditRef.value?.setAddressDetail('');\n
\nkey | \nDescription | \nType | \n
---|---|---|
name | \nName | \nstring | \n
tel | \nPhone | \nstring | \n
province | \nProvince | \nstring | \n
city | \nCity | \nstring | \n
county | \nCounty | \nstring | \n
addressDetail | \nDetailed Address | \nstring | \n
areaCode | \nArea code | \nstring | \n
isDefault | \nIs default address | \nboolean | \n
key | \nDescription | \nType | \n
---|---|---|
name | \nName | \nstring | \n
address | \nAddress | \nstring | \n
Please refer to Area component.
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-address-edit-padding | \nvar(--van-padding-sm) | \n- | \n
--van-address-edit-buttons-padding | \nvar(--van-padding-xl) var(--van-padding-base) | \n- | \n
--van-address-edit-button-margin-bottom | \nvar(--van-padding-sm) | \n- | \n
--van-address-edit-button-font-size | \nvar(--van-font-size-lg) | \n- | \n
A button to back to top.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { BackTop } from 'vant';\n\nconst app = createApp();\napp.use(BackTop);\n
\nPlease scroll the demo page to display the back top button.
\n<van-cell v-for="item in list" :key="item" :title="item" />\n\n<van-back-top />\n
\nexport default {\n setup() {\n const list = [...Array(50).keys()];\n return { list };\n },\n};\n
\nUsing right
and bottom
props to set the position of BackTop component.
<van-cell v-for="item in list" :key="item" :title="item" />\n<van-back-top right="15vw" bottom="10vh" />\n
\nexport default {\n setup() {\n const list = [...Array(50).keys()];\n return { list };\n },\n};\n
\nUsing the default slot to custom content.
\n<van-cell v-for="item in list" :key="item" :title="item" />\n<van-back-top class="custom">Back Top</van-back-top>\n\n<style>\n .custom {\n width: 80px;\n font-size: 14px;\n text-align: center;\n }\n</style>\n
\nexport default {\n setup() {\n const list = [...Array(50).keys()];\n return { list };\n },\n};\n
\n<div class="container">\n <van-cell v-for="item in list" :key="item" :title="item" />\n <van-back-top target=".container" bottom="30vh" />\n</div>\n\n<style>\n .container {\n height: 60vh;\n overflow: auto;\n }\n</style>\n
\nexport default {\n setup() {\n const list = [...Array(50).keys()];\n return { list };\n },\n};\n
\nAdd immediate
prop to scroll to top immediately.
<van-back-top immediate />\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
target | \nCan be a selector or a DOM ELement, default closest parent scrolling container | \nstring | HTMLElement | \n- | \n
right | \nRight distance of the page, the default unit is px | \nnumber | string | \n30 | \n
bottom | \nBottom distance of the page, the default unit is px | \nnumber | string | \n40 | \n
offset | \nThe component will not display until the scroll offset reaches this value | \nnumber | \n200 | \n
teleport | \nSpecifies a target element where BackTop will be mounted | \nstring | Element | \nbody | \n
immediate v4.0.9 | \nWhether to scroll to top immediately | \nboolean | \nfalse | \n
z-index | \nSet the z-index to a fixed value | \nnumber | string | \n100 | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when Component is clicked | \nevent: MouseEvent | \n
Name | \nDescription | \n
---|---|
default | \ncustomize default content | \n
The component exports the following type definitions:
\nimport type { BackTopProps, BackTopThemeVars } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-back-top-size | \n40px | \n- | \n
--van-back-top-icon-size | \n20px | \n- | \n
--van-back-top-right | \n30px | \n- | \n
--van-back-top-bottom | \n40px | \n- | \n
--van-back-top-z-index | \n100 | \n- | \n
--van-back-top-text-color | \n#fff | \n- | \n
--van-back-top-background | \nvar(--van-blue) | \n- | \n
A button to back to top.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { BackTop } from 'vant';\n\nconst app = createApp();\napp.use(BackTop);\n
\nPlease scroll the demo page to display the back top button.
\n<van-cell v-for="item in list" :key="item" :title="item" />\n\n<van-back-top />\n
\nexport default {\n setup() {\n const list = [...Array(50).keys()];\n return { list };\n },\n};\n
\nUsing right
and bottom
props to set the position of BackTop component.
<van-cell v-for="item in list" :key="item" :title="item" />\n<van-back-top right="15vw" bottom="10vh" />\n
\nexport default {\n setup() {\n const list = [...Array(50).keys()];\n return { list };\n },\n};\n
\nUsing the default slot to custom content.
\n<van-cell v-for="item in list" :key="item" :title="item" />\n<van-back-top class="custom">Back Top</van-back-top>\n\n<style>\n .custom {\n width: 80px;\n font-size: 14px;\n text-align: center;\n }\n</style>\n
\nexport default {\n setup() {\n const list = [...Array(50).keys()];\n return { list };\n },\n};\n
\n<div class="container">\n <van-cell v-for="item in list" :key="item" :title="item" />\n <van-back-top target=".container" bottom="30vh" />\n</div>\n\n<style>\n .container {\n height: 60vh;\n overflow: auto;\n }\n</style>\n
\nexport default {\n setup() {\n const list = [...Array(50).keys()];\n return { list };\n },\n};\n
\nAdd immediate
prop to scroll to top immediately.
<van-back-top immediate />\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
target | \nCan be a selector or a DOM ELement, default closest parent scrolling container | \nstring | HTMLElement | \n- | \n
right | \nRight distance of the page, the default unit is px | \nnumber | string | \n30 | \n
bottom | \nBottom distance of the page, the default unit is px | \nnumber | string | \n40 | \n
offset | \nThe component will not display until the scroll offset reaches this value | \nnumber | \n200 | \n
teleport | \nSpecifies a target element where BackTop will be mounted | \nstring | Element | \nbody | \n
immediate v4.0.9 | \nWhether to scroll to top immediately | \nboolean | \nfalse | \n
z-index | \nSet the z-index to a fixed value | \nnumber | string | \n100 | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when Component is clicked | \nevent: MouseEvent | \n
Name | \nDescription | \n
---|---|
default | \ncustomize default content | \n
The component exports the following type definitions:
\nimport type { BackTopProps, BackTopThemeVars } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-back-top-size | \n40px | \n- | \n
--van-back-top-icon-size | \n20px | \n- | \n
--van-back-top-right | \n30px | \n- | \n
--van-back-top-bottom | \n40px | \n- | \n
--van-back-top-z-index | \n100 | \n- | \n
--van-back-top-text-color | \n#fff | \n- | \n
--van-back-top-background | \nvar(--van-blue) | \n- | \n
Quickly and easily create layouts with van-row
and van-col
.
Register component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Col, Row } from 'vant';\n\nconst app = createApp();\napp.use(Col);\napp.use(Row);\n
\nLayout are based on 24-column. The attribute span
in Col
means the number of column the grid spans. Of course, You can use offset
attribute to set number of spacing on the left side of the grid.
<van-row>\n <van-col span="8">span: 8</van-col>\n <van-col span="8">span: 8</van-col>\n <van-col span="8">span: 8</van-col>\n</van-row>\n\n<van-row>\n <van-col span="4">span: 4</van-col>\n <van-col span="10" offset="4">offset: 4, span: 10</van-col>\n <van-col span="6">span: 6</van-col>\n</van-row>\n\n<van-row>\n <van-col offset="12" span="12">offset: 12, span: 12</van-col>\n</van-row>\n
\nSet grid spacing using gutter
attribute. The default value is 0.
<van-row gutter="20">\n <van-col span="8">span: 8</van-col>\n <van-col span="8">span: 8</van-col>\n <van-col span="8">span: 8</van-col>\n</van-row>\n
\nIf you want to set the vertical spacing, you can set [horizontal, vertical]
as an array.
<!-- set the vertical spacing -->\n<van-row :gutter="[20, 20]">\n <van-col span="12">span: 12</van-col>\n <van-col span="12">span: 12</van-col>\n <van-col span="12">span: 12</van-col>\n <van-col span="12">span: 12</van-col>\n</van-row>\n
\n<van-row justify="center">\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n</van-row>\n\n<van-row justify="end">\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n</van-row>\n\n<van-row justify="space-between">\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n</van-row>\n\n<van-row justify="space-around">\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n</van-row>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
gutter | \nGrid spacing\uFF08px\uFF09 | \nnumber | string | Array | \n- | \n
tag | \nCustom element tag | \nstring | \ndiv | \n
justify | \nFlex main axis, can be set to end/center/space-around/space-between | \nstring | \nstart | \n
align | \nFlex cross axis, be set to center/bottom | \nstring | \ntop | \n
wrap | \nWhether to wrap | \nboolean | \ntrue | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
span | \nnumber of column the grid spans | \nnumber | string | \n- | \n
offset | \nnumber of spacing on the left side of the grid | \nnumber | string | \n- | \n
tag | \nCustom element tag | \nstring | \ndiv | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when the row is clicked | \nevent: MouseEvent | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when the col is clicked | \nevent: MouseEvent | \n
The component exports the following type definitions:
\nimport type { ColProps, RowProps, RowAlign, RowJustify } from 'vant';\n
\nQuickly and easily create layouts with van-row
and van-col
.
Register component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Col, Row } from 'vant';\n\nconst app = createApp();\napp.use(Col);\napp.use(Row);\n
\nLayout are based on 24-column. The attribute span
in Col
means the number of column the grid spans. Of course, You can use offset
attribute to set number of spacing on the left side of the grid.
<van-row>\n <van-col span="8">span: 8</van-col>\n <van-col span="8">span: 8</van-col>\n <van-col span="8">span: 8</van-col>\n</van-row>\n\n<van-row>\n <van-col span="4">span: 4</van-col>\n <van-col span="10" offset="4">offset: 4, span: 10</van-col>\n <van-col span="6">span: 6</van-col>\n</van-row>\n\n<van-row>\n <van-col offset="12" span="12">offset: 12, span: 12</van-col>\n</van-row>\n
\nSet grid spacing using gutter
attribute. The default value is 0.
<van-row gutter="20">\n <van-col span="8">span: 8</van-col>\n <van-col span="8">span: 8</van-col>\n <van-col span="8">span: 8</van-col>\n</van-row>\n
\nIf you want to set the vertical spacing, you can set [horizontal, vertical]
as an array.
<!-- set the vertical spacing -->\n<van-row :gutter="[20, 20]">\n <van-col span="12">span: 12</van-col>\n <van-col span="12">span: 12</van-col>\n <van-col span="12">span: 12</van-col>\n <van-col span="12">span: 12</van-col>\n</van-row>\n
\n<van-row justify="center">\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n</van-row>\n\n<van-row justify="end">\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n</van-row>\n\n<van-row justify="space-between">\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n</van-row>\n\n<van-row justify="space-around">\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n <van-col span="6">span: 6</van-col>\n</van-row>\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
gutter | \nGrid spacing\uFF08px\uFF09 | \nnumber | string | Array | \n- | \n
tag | \nCustom element tag | \nstring | \ndiv | \n
justify | \nFlex main axis, can be set to end/center/space-around/space-between | \nstring | \nstart | \n
align | \nFlex cross axis, be set to center/bottom | \nstring | \ntop | \n
wrap | \nWhether to wrap | \nboolean | \ntrue | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
span | \nnumber of column the grid spans | \nnumber | string | \n- | \n
offset | \nnumber of spacing on the left side of the grid | \nnumber | string | \n- | \n
tag | \nCustom element tag | \nstring | \ndiv | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when the row is clicked | \nevent: MouseEvent | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when the col is clicked | \nevent: MouseEvent | \n
The component exports the following type definitions:
\nimport type { ColProps, RowProps, RowAlign, RowJustify } from 'vant';\n
\n\u5E95\u90E8\u5F39\u8D77\u7684\u5206\u4EAB\u9762\u677F\uFF0C\u7528\u4E8E\u5C55\u793A\u5404\u5206\u4EAB\u6E20\u9053\u5BF9\u5E94\u7684\u64CD\u4F5C\u6309\u94AE\uFF0C\u4E0D\u542B\u5177\u4F53\u7684\u5206\u4EAB\u903B\u8F91\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { ShareSheet } from 'vant';\n\nconst app = createApp();\napp.use(ShareSheet);\n
\n\u5206\u4EAB\u9762\u677F\u901A\u8FC7 options
\u5C5E\u6027\u6765\u5B9A\u4E49\u5206\u4EAB\u9009\u9879\uFF0C\u6570\u7EC4\u7684\u6BCF\u4E00\u9879\u662F\u4E00\u4E2A\u5BF9\u8C61\uFF0C\u5BF9\u8C61\u683C\u5F0F\u89C1\u6587\u6863\u4E0B\u65B9\u8868\u683C\u3002
<van-cell title="\u663E\u793A\u5206\u4EAB\u9762\u677F" @click="showShare = true" />\n<van-share-sheet\n v-model:show="showShare"\n title="\u7ACB\u5373\u5206\u4EAB\u7ED9\u597D\u53CB"\n :options="options"\n @select="onSelect"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const showShare = ref(false);\n const options = [\n { name: '\u5FAE\u4FE1', icon: 'wechat' },\n { name: '\u5FAE\u535A', icon: 'weibo' },\n { name: '\u590D\u5236\u94FE\u63A5', icon: 'link' },\n { name: '\u5206\u4EAB\u6D77\u62A5', icon: 'poster' },\n { name: '\u4E8C\u7EF4\u7801', icon: 'qrcode' },\n ];\n\n const onSelect = (option) => {\n showToast(option.name);\n showShare.value = false;\n };\n\n return {\n options,\n onSelect,\n showShare,\n };\n },\n};\n
\n\u5F53\u5206\u4EAB\u9009\u9879\u7684\u6570\u91CF\u8F83\u591A\u65F6\uFF0C\u53EF\u4EE5\u5C06 options
\u5B9A\u4E49\u4E3A\u6570\u7EC4\u5D4C\u5957\u7684\u683C\u5F0F\uFF0C\u6BCF\u4E2A\u5B50\u6570\u7EC4\u4F1A\u4F5C\u4E3A\u4E00\u884C\u9009\u9879\u5C55\u793A\u3002
<van-share-sheet\n v-model:show="showShare"\n title="\u7ACB\u5373\u5206\u4EAB\u7ED9\u597D\u53CB"\n :options="options"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showShare = ref(false);\n const options = [\n [\n { name: '\u5FAE\u4FE1', icon: 'wechat' },\n { name: '\u670B\u53CB\u5708', icon: 'wechat-moments' },\n { name: '\u5FAE\u535A', icon: 'weibo' },\n { name: 'QQ', icon: 'qq' },\n ],\n [\n { name: '\u590D\u5236\u94FE\u63A5', icon: 'link' },\n { name: '\u5206\u4EAB\u6D77\u62A5', icon: 'poster' },\n { name: '\u4E8C\u7EF4\u7801', icon: 'qrcode' },\n { name: '\u5C0F\u7A0B\u5E8F\u7801', icon: 'weapp-qrcode' },\n ],\n ];\n\n return {\n options,\n showShare,\n };\n },\n};\n
\n\u9664\u4E86\u4F7F\u7528\u5185\u7F6E\u7684\u51E0\u79CD\u56FE\u6807\u5916\uFF0C\u53EF\u4EE5\u76F4\u63A5\u5728 icon
\u4E2D\u4F20\u5165\u56FE\u7247 URL \u6765\u4F7F\u7528\u81EA\u5B9A\u4E49\u7684\u56FE\u6807\u3002
<van-share-sheet v-model:show="showShare" :options="options" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showShare = ref(false);\n const options = [\n {\n name: '\u540D\u79F0',\n icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-fire.png',\n },\n {\n name: '\u540D\u79F0',\n icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-light.png',\n },\n {\n name: '\u540D\u79F0',\n icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-water.png',\n },\n ];\n\n return {\n options,\n showShare,\n };\n },\n};\n
\n\u901A\u8FC7 description
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u6807\u9898\u4E0B\u65B9\u7684\u63CF\u8FF0\u6587\u5B57, \u5728 options
\u5185\u8BBE\u7F6E description
\u5C5E\u6027\u53EF\u4EE5\u6DFB\u52A0\u5206\u4EAB\u9009\u9879\u63CF\u8FF0\u3002
<van-share-sheet\n v-model:show="showShare"\n :options="options"\n title="\u7ACB\u5373\u5206\u4EAB\u7ED9\u597D\u53CB"\n description="\u63CF\u8FF0\u4FE1\u606F"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showShare = ref(false);\n const options = [\n { name: '\u5FAE\u4FE1', icon: 'wechat' },\n { name: '\u5FAE\u535A', icon: 'weibo' },\n { name: '\u590D\u5236\u94FE\u63A5', icon: 'link', description: '\u63CF\u8FF0\u4FE1\u606F' },\n { name: '\u5206\u4EAB\u6D77\u62A5', icon: 'poster' },\n { name: '\u4E8C\u7EF4\u7801', icon: 'qrcode' },\n ];\n\n return {\n options,\n showShare,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:show | \n\u662F\u5426\u663E\u793A\u5206\u4EAB\u9762\u677F | \nboolean | \nfalse | \n
options | \n\u5206\u4EAB\u9009\u9879 | \nOption[] | \n[] | \n
title | \n\u9876\u90E8\u6807\u9898 | \nstring | \n- | \n
cancel-text | \n\u53D6\u6D88\u6309\u94AE\u6587\u5B57\uFF0C\u4F20\u5165\u7A7A\u5B57\u7B26\u4E32\u53EF\u4EE5\u9690\u85CF\u6309\u94AE | \nstring | \n\'\u53D6\u6D88\' | \n
description | \n\u6807\u9898\u4E0B\u65B9\u7684\u8F85\u52A9\u63CF\u8FF0\u6587\u5B57 | \nstring | \n- | \n
duration | \n\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u79D2\uFF0C\u8BBE\u7F6E\u4E3A 0 \u53EF\u4EE5\u7981\u7528\u52A8\u753B | \nnumber | string | \n0.3 | \n
z-index | \n\u5C06\u9762\u677F\u7684 z-index \u5C42\u7EA7\u8BBE\u7F6E\u4E3A\u4E00\u4E2A\u56FA\u5B9A\u503C | \nnumber | string | \n2000+ | \n
round | \n\u662F\u5426\u663E\u793A\u5706\u89D2 | \nboolean | \ntrue | \n
overlay | \n\u662F\u5426\u663E\u793A\u906E\u7F69\u5C42 | \nboolean | \ntrue | \n
overlay-class | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u7C7B\u540D | \nstring | Array | object | \n- | \n
overlay-style | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0F | \nobject | \n- | \n
lock-scroll | \n\u662F\u5426\u9501\u5B9A\u80CC\u666F\u6EDA\u52A8 | \nboolean | \ntrue | \n
lazy-render | \n\u662F\u5426\u5728\u663E\u793A\u5F39\u5C42\u65F6\u624D\u6E32\u67D3\u5185\u5BB9 | \nboolean | \ntrue | \n
close-on-popstate | \n\u662F\u5426\u5728\u9875\u9762\u56DE\u9000\u65F6\u81EA\u52A8\u5173\u95ED | \nboolean | \ntrue | \n
close-on-click-overlay | \n\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED | \nboolean | \ntrue | \n
safe-area-inset-bottom | \n\u662F\u5426\u5F00\u542F\u5E95\u90E8\u5B89\u5168\u533A\u9002\u914D | \nboolean | \ntrue | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \n- | \n
before-close | \n\u5173\u95ED\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u963B\u6B62\u5173\u95ED\uFF0C\u652F\u6301\u8FD4\u56DE Promise | \n(action: string) => boolean | Promise<boolean> | \n- | \n
options
\u5C5E\u6027\u4E3A\u4E00\u4E2A\u5BF9\u8C61\u6570\u7EC4\uFF0C\u6570\u7EC4\u4E2D\u7684\u6BCF\u4E2A\u5BF9\u8C61\u914D\u7F6E\u4E00\u5217\uFF0C\u5BF9\u8C61\u53EF\u4EE5\u5305\u542B\u4EE5\u4E0B\u503C\uFF1A
\u952E\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
name | \n\u5206\u4EAB\u6E20\u9053\u540D\u79F0 | \nstring | \n
description | \n\u5206\u4EAB\u9009\u9879\u63CF\u8FF0 | \nstring | \n
icon | \n\u56FE\u6807\uFF0C\u53EF\u9009\u503C\u4E3A wechat weibo qq link qrcode poster weapp-qrcode wechat-moments \uFF0C\u652F\u6301\u4F20\u5165\u56FE\u7247 URL | \nstring | \n
className | \n\u5206\u4EAB\u9009\u9879\u7C7B\u540D | \nstring | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
select | \n\u70B9\u51FB\u5206\u4EAB\u9009\u9879\u65F6\u89E6\u53D1 | \noption: Option, index: number | \n
cancel | \n\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1 | \n- | \n
open | \n\u6253\u5F00\u9762\u677F\u65F6\u89E6\u53D1 | \n- | \n
close | \n\u5173\u95ED\u9762\u677F\u65F6\u89E6\u53D1 | \n- | \n
opened | \n\u6253\u5F00\u9762\u677F\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
closed | \n\u5173\u95ED\u9762\u677F\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
click-overlay | \n\u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
title | \n\u81EA\u5B9A\u4E49\u9876\u90E8\u6807\u9898 | \n
description | \n\u81EA\u5B9A\u4E49\u63CF\u8FF0\u6587\u5B57 | \n
cancel | \n\u81EA\u5B9A\u4E49\u53D6\u6D88\u6309\u94AE\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n ShareSheetProps,\n ShareSheetOption,\n ShareSheetOptions,\n} from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-share-sheet-header-padding | \nvar(--van-padding-sm) var(--van-padding-md) var(--van-padding-base) | \n- | \n
--van-share-sheet-title-color | \nvar(--van-text-color) | \n- | \n
--van-share-sheet-title-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-share-sheet-title-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-share-sheet-description-color | \nvar(--van-text-color-2) | \n- | \n
--van-share-sheet-description-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-share-sheet-description-line-height | \n16px | \n- | \n
--van-share-sheet-icon-size | \n48px | \n- | \n
--van-share-sheet-option-name-color | \nvar(--van-gray-7) | \n- | \n
--van-share-sheet-option-name-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-share-sheet-option-description-color | \nvar(--van-text-color-3) | \n- | \n
--van-share-sheet-option-description-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-share-sheet-cancel-button-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-share-sheet-cancel-button-height | \n48px | \n- | \n
--van-share-sheet-cancel-button-background | \nvar(--van-background-2) | \n- | \n
\u5728\u4E0D\u540C\u7684 App \u6216\u6D4F\u89C8\u5668\u4E2D\uFF0C\u5B58\u5728\u5404\u5F0F\u5404\u6837\u7684\u5206\u4EAB\u63A5\u53E3\u6216\u5206\u4EAB\u65B9\u5F0F\uFF0C\u56E0\u6B64 ShareSheet \u7EC4\u4EF6\u4E0D\u63D0\u4F9B\u5177\u4F53\u7684\u5206\u4EAB\u903B\u8F91\uFF0C\u9700\u8981\u5F00\u53D1\u8005\u6839\u636E\u4E1A\u52A1\u573A\u666F\u81EA\u884C\u5B9E\u73B0\u3002
\n\u7531\u4E8E\u5FAE\u4FE1\u672A\u63D0\u4F9B\u5206\u4EAB\u76F8\u5173\u7684 API\uFF0C\u9700\u8981\u5F15\u5BFC\u7528\u6237\u70B9\u51FB\u53F3\u4E0A\u89D2\u8FDB\u884C\u5206\u4EAB\u3002
\n\u53EF\u4EE5\u901A\u8FC7 JSBridge \u8C03\u7528\u539F\u751F\u5E94\u7528\u7684 SDK \u8FDB\u884C\u5206\u4EAB\u3002
\n\u53EF\u4EE5\u901A\u8FC7 Popup \u7EC4\u4EF6\u4EE5\u5F39\u5C42\u7684\u5F62\u5F0F\u5C55\u793A\u56FE\u7247\uFF0C\u7136\u540E\u5F15\u5BFC\u7528\u6237\u4FDD\u5B58\u56FE\u7247\u8FDB\u884C\u5206\u4EAB\u3002
\n\u5E95\u90E8\u5F39\u8D77\u7684\u5206\u4EAB\u9762\u677F\uFF0C\u7528\u4E8E\u5C55\u793A\u5404\u5206\u4EAB\u6E20\u9053\u5BF9\u5E94\u7684\u64CD\u4F5C\u6309\u94AE\uFF0C\u4E0D\u542B\u5177\u4F53\u7684\u5206\u4EAB\u903B\u8F91\u3002
\n\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { ShareSheet } from 'vant';\n\nconst app = createApp();\napp.use(ShareSheet);\n
\n\u5206\u4EAB\u9762\u677F\u901A\u8FC7 options
\u5C5E\u6027\u6765\u5B9A\u4E49\u5206\u4EAB\u9009\u9879\uFF0C\u6570\u7EC4\u7684\u6BCF\u4E00\u9879\u662F\u4E00\u4E2A\u5BF9\u8C61\uFF0C\u5BF9\u8C61\u683C\u5F0F\u89C1\u6587\u6863\u4E0B\u65B9\u8868\u683C\u3002
<van-cell title="\u663E\u793A\u5206\u4EAB\u9762\u677F" @click="showShare = true" />\n<van-share-sheet\n v-model:show="showShare"\n title="\u7ACB\u5373\u5206\u4EAB\u7ED9\u597D\u53CB"\n :options="options"\n @select="onSelect"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const showShare = ref(false);\n const options = [\n { name: '\u5FAE\u4FE1', icon: 'wechat' },\n { name: '\u5FAE\u535A', icon: 'weibo' },\n { name: '\u590D\u5236\u94FE\u63A5', icon: 'link' },\n { name: '\u5206\u4EAB\u6D77\u62A5', icon: 'poster' },\n { name: '\u4E8C\u7EF4\u7801', icon: 'qrcode' },\n ];\n\n const onSelect = (option) => {\n showToast(option.name);\n showShare.value = false;\n };\n\n return {\n options,\n onSelect,\n showShare,\n };\n },\n};\n
\n\u5F53\u5206\u4EAB\u9009\u9879\u7684\u6570\u91CF\u8F83\u591A\u65F6\uFF0C\u53EF\u4EE5\u5C06 options
\u5B9A\u4E49\u4E3A\u6570\u7EC4\u5D4C\u5957\u7684\u683C\u5F0F\uFF0C\u6BCF\u4E2A\u5B50\u6570\u7EC4\u4F1A\u4F5C\u4E3A\u4E00\u884C\u9009\u9879\u5C55\u793A\u3002
<van-share-sheet\n v-model:show="showShare"\n title="\u7ACB\u5373\u5206\u4EAB\u7ED9\u597D\u53CB"\n :options="options"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showShare = ref(false);\n const options = [\n [\n { name: '\u5FAE\u4FE1', icon: 'wechat' },\n { name: '\u670B\u53CB\u5708', icon: 'wechat-moments' },\n { name: '\u5FAE\u535A', icon: 'weibo' },\n { name: 'QQ', icon: 'qq' },\n ],\n [\n { name: '\u590D\u5236\u94FE\u63A5', icon: 'link' },\n { name: '\u5206\u4EAB\u6D77\u62A5', icon: 'poster' },\n { name: '\u4E8C\u7EF4\u7801', icon: 'qrcode' },\n { name: '\u5C0F\u7A0B\u5E8F\u7801', icon: 'weapp-qrcode' },\n ],\n ];\n\n return {\n options,\n showShare,\n };\n },\n};\n
\n\u9664\u4E86\u4F7F\u7528\u5185\u7F6E\u7684\u51E0\u79CD\u56FE\u6807\u5916\uFF0C\u53EF\u4EE5\u76F4\u63A5\u5728 icon
\u4E2D\u4F20\u5165\u56FE\u7247 URL \u6765\u4F7F\u7528\u81EA\u5B9A\u4E49\u7684\u56FE\u6807\u3002
<van-share-sheet v-model:show="showShare" :options="options" />\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showShare = ref(false);\n const options = [\n {\n name: '\u540D\u79F0',\n icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-fire.png',\n },\n {\n name: '\u540D\u79F0',\n icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-light.png',\n },\n {\n name: '\u540D\u79F0',\n icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-water.png',\n },\n ];\n\n return {\n options,\n showShare,\n };\n },\n};\n
\n\u901A\u8FC7 description
\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u6807\u9898\u4E0B\u65B9\u7684\u63CF\u8FF0\u6587\u5B57, \u5728 options
\u5185\u8BBE\u7F6E description
\u5C5E\u6027\u53EF\u4EE5\u6DFB\u52A0\u5206\u4EAB\u9009\u9879\u63CF\u8FF0\u3002
<van-share-sheet\n v-model:show="showShare"\n :options="options"\n title="\u7ACB\u5373\u5206\u4EAB\u7ED9\u597D\u53CB"\n description="\u63CF\u8FF0\u4FE1\u606F"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const showShare = ref(false);\n const options = [\n { name: '\u5FAE\u4FE1', icon: 'wechat' },\n { name: '\u5FAE\u535A', icon: 'weibo' },\n { name: '\u590D\u5236\u94FE\u63A5', icon: 'link', description: '\u63CF\u8FF0\u4FE1\u606F' },\n { name: '\u5206\u4EAB\u6D77\u62A5', icon: 'poster' },\n { name: '\u4E8C\u7EF4\u7801', icon: 'qrcode' },\n ];\n\n return {\n options,\n showShare,\n };\n },\n};\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:show | \n\u662F\u5426\u663E\u793A\u5206\u4EAB\u9762\u677F | \nboolean | \nfalse | \n
options | \n\u5206\u4EAB\u9009\u9879 | \nOption[] | \n[] | \n
title | \n\u9876\u90E8\u6807\u9898 | \nstring | \n- | \n
cancel-text | \n\u53D6\u6D88\u6309\u94AE\u6587\u5B57\uFF0C\u4F20\u5165\u7A7A\u5B57\u7B26\u4E32\u53EF\u4EE5\u9690\u85CF\u6309\u94AE | \nstring | \n\'\u53D6\u6D88\' | \n
description | \n\u6807\u9898\u4E0B\u65B9\u7684\u8F85\u52A9\u63CF\u8FF0\u6587\u5B57 | \nstring | \n- | \n
duration | \n\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u79D2\uFF0C\u8BBE\u7F6E\u4E3A 0 \u53EF\u4EE5\u7981\u7528\u52A8\u753B | \nnumber | string | \n0.3 | \n
z-index | \n\u5C06\u9762\u677F\u7684 z-index \u5C42\u7EA7\u8BBE\u7F6E\u4E3A\u4E00\u4E2A\u56FA\u5B9A\u503C | \nnumber | string | \n2000+ | \n
round | \n\u662F\u5426\u663E\u793A\u5706\u89D2 | \nboolean | \ntrue | \n
overlay | \n\u662F\u5426\u663E\u793A\u906E\u7F69\u5C42 | \nboolean | \ntrue | \n
overlay-class | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u7C7B\u540D | \nstring | Array | object | \n- | \n
overlay-style | \n\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0F | \nobject | \n- | \n
lock-scroll | \n\u662F\u5426\u9501\u5B9A\u80CC\u666F\u6EDA\u52A8 | \nboolean | \ntrue | \n
lazy-render | \n\u662F\u5426\u5728\u663E\u793A\u5F39\u5C42\u65F6\u624D\u6E32\u67D3\u5185\u5BB9 | \nboolean | \ntrue | \n
close-on-popstate | \n\u662F\u5426\u5728\u9875\u9762\u56DE\u9000\u65F6\u81EA\u52A8\u5173\u95ED | \nboolean | \ntrue | \n
close-on-click-overlay | \n\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED | \nboolean | \ntrue | \n
safe-area-inset-bottom | \n\u662F\u5426\u5F00\u542F\u5E95\u90E8\u5B89\u5168\u533A\u9002\u914D | \nboolean | \ntrue | \n
teleport | \n\u6307\u5B9A\u6302\u8F7D\u7684\u8282\u70B9\uFF0C\u7B49\u540C\u4E8E Teleport \u7EC4\u4EF6\u7684 to \u5C5E\u6027 | \nstring | Element | \n- | \n
before-close | \n\u5173\u95ED\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u963B\u6B62\u5173\u95ED\uFF0C\u652F\u6301\u8FD4\u56DE Promise | \n(action: string) => boolean | Promise<boolean> | \n- | \n
options
\u5C5E\u6027\u4E3A\u4E00\u4E2A\u5BF9\u8C61\u6570\u7EC4\uFF0C\u6570\u7EC4\u4E2D\u7684\u6BCF\u4E2A\u5BF9\u8C61\u914D\u7F6E\u4E00\u5217\uFF0C\u5BF9\u8C61\u53EF\u4EE5\u5305\u542B\u4EE5\u4E0B\u503C\uFF1A
\u952E\u540D | \n\u8BF4\u660E | \n\u7C7B\u578B | \n
---|---|---|
name | \n\u5206\u4EAB\u6E20\u9053\u540D\u79F0 | \nstring | \n
description | \n\u5206\u4EAB\u9009\u9879\u63CF\u8FF0 | \nstring | \n
icon | \n\u56FE\u6807\uFF0C\u53EF\u9009\u503C\u4E3A wechat weibo qq link qrcode poster weapp-qrcode wechat-moments \uFF0C\u652F\u6301\u4F20\u5165\u56FE\u7247 URL | \nstring | \n
className | \n\u5206\u4EAB\u9009\u9879\u7C7B\u540D | \nstring | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
select | \n\u70B9\u51FB\u5206\u4EAB\u9009\u9879\u65F6\u89E6\u53D1 | \noption: Option, index: number | \n
cancel | \n\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1 | \n- | \n
open | \n\u6253\u5F00\u9762\u677F\u65F6\u89E6\u53D1 | \n- | \n
close | \n\u5173\u95ED\u9762\u677F\u65F6\u89E6\u53D1 | \n- | \n
opened | \n\u6253\u5F00\u9762\u677F\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
closed | \n\u5173\u95ED\u9762\u677F\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1 | \n- | \n
click-overlay | \n\u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u89E6\u53D1 | \nevent: MouseEvent | \n
\u540D\u79F0 | \n\u8BF4\u660E | \n
---|---|
title | \n\u81EA\u5B9A\u4E49\u9876\u90E8\u6807\u9898 | \n
description | \n\u81EA\u5B9A\u4E49\u63CF\u8FF0\u6587\u5B57 | \n
cancel | \n\u81EA\u5B9A\u4E49\u53D6\u6D88\u6309\u94AE\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type {\n ShareSheetProps,\n ShareSheetOption,\n ShareSheetOptions,\n} from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\n\u540D\u79F0 | \n\u9ED8\u8BA4\u503C | \n\u63CF\u8FF0 | \n
---|---|---|
--van-share-sheet-header-padding | \nvar(--van-padding-sm) var(--van-padding-md) var(--van-padding-base) | \n- | \n
--van-share-sheet-title-color | \nvar(--van-text-color) | \n- | \n
--van-share-sheet-title-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-share-sheet-title-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-share-sheet-description-color | \nvar(--van-text-color-2) | \n- | \n
--van-share-sheet-description-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-share-sheet-description-line-height | \n16px | \n- | \n
--van-share-sheet-icon-size | \n48px | \n- | \n
--van-share-sheet-option-name-color | \nvar(--van-gray-7) | \n- | \n
--van-share-sheet-option-name-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-share-sheet-option-description-color | \nvar(--van-text-color-3) | \n- | \n
--van-share-sheet-option-description-font-size | \nvar(--van-font-size-sm) | \n- | \n
--van-share-sheet-cancel-button-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-share-sheet-cancel-button-height | \n48px | \n- | \n
--van-share-sheet-cancel-button-background | \nvar(--van-background-2) | \n- | \n
\u5728\u4E0D\u540C\u7684 App \u6216\u6D4F\u89C8\u5668\u4E2D\uFF0C\u5B58\u5728\u5404\u5F0F\u5404\u6837\u7684\u5206\u4EAB\u63A5\u53E3\u6216\u5206\u4EAB\u65B9\u5F0F\uFF0C\u56E0\u6B64 ShareSheet \u7EC4\u4EF6\u4E0D\u63D0\u4F9B\u5177\u4F53\u7684\u5206\u4EAB\u903B\u8F91\uFF0C\u9700\u8981\u5F00\u53D1\u8005\u6839\u636E\u4E1A\u52A1\u573A\u666F\u81EA\u884C\u5B9E\u73B0\u3002
\n\u7531\u4E8E\u5FAE\u4FE1\u672A\u63D0\u4F9B\u5206\u4EAB\u76F8\u5173\u7684 API\uFF0C\u9700\u8981\u5F15\u5BFC\u7528\u6237\u70B9\u51FB\u53F3\u4E0A\u89D2\u8FDB\u884C\u5206\u4EAB\u3002
\n\u53EF\u4EE5\u901A\u8FC7 JSBridge \u8C03\u7528\u539F\u751F\u5E94\u7528\u7684 SDK \u8FDB\u884C\u5206\u4EAB\u3002
\n\u53EF\u4EE5\u901A\u8FC7 Popup \u7EC4\u4EF6\u4EE5\u5F39\u5C42\u7684\u5F62\u5F0F\u5C55\u793A\u56FE\u7247\uFF0C\u7136\u540E\u5F15\u5BFC\u7528\u6237\u4FDD\u5B58\u56FE\u7247\u8FDB\u884C\u5206\u4EAB\u3002
\nA lightweight, customizable Vue UI library for mobile web apps.
\nIt is recommended to use Rsbuild to create a scaffold project.
\nRsbuild is a build tool based on Rspack, developed by the author of Vant, with first-class build speed and development experience, providing first-priority support for Vant.
\nYou can create a Rsbuild project with the following command:
\nnpm create rsbuild@latest\n
\nPlease visit the Rsbuild repository for more information.
\nSee in Quickstart.
\nVant 2 supports modern browsers and Android >= 4.0\u3001iOS >= 8.0.
\nVant 3/4 supports modern browsers and Chrome >= 51\u3001iOS >= 10.0 (same as Vue 3).
\nThe current maintenance status of each version of Vant is as follows:
\nName | \nFramework | \nRelease | \nLatest Version | \nStatus | \n
---|---|---|---|---|
Vant 4 | \nVue 3 | \n2022.12 | \n\n | Under active development | \n
Vant 3 | \nVue 3 | \n2020.12 | \n\n | Bugfix only | \n
Vant 2 | \nVue 2 | \n2019.06 | \n\n | Bugfix only | \n
Vant 1 | \nVue 2 | \n2018.03 | \n\n | End of life | \n
Project | \nDescription | \n
---|---|
vant-weapp | \nWeChat MiniProgram UI | \n
vant-demo | \nCollection of Vant demos | \n
vant-cli | \nScaffold for UI library | \n
vant-icons | \nVant icons | \n
vant-touch-emulator | \nUsing vant in desktop browsers | \n
vant-nuxt | \nVant module for Nuxt | \n
Project | \nDescription | \n
---|---|
3lang3/react-vant | \nReact mobile UI Components based on Vant | \n
vant-aliapp | \nAlipay MiniProgram UI | \n
taroify | \nVant Taro | \n
vant-theme | \nOnline theme preview built on Vant UI | \n
@antmjs/vantui | \nMobile UI Components based on Vant, supporting Taro and React | \n
vant-playground | \nVant Playground | \n
sfc-playground-vant | \nVant Playground | \n
vue3-h5-template | \nMobile project template based on Vant | \n
vue3-vant-mobile | \nMobile project template based on Vant | \n
Core contributors of Vant and Vant Weapp:
\n\n | \n | \n | \n | \n | \n |
---|---|---|---|---|---|
chenjiahan | \ncookfront | \nwangnaiyi | \npangxie | \nrex-zsd | \nnemo-shen | \n
\n | \n | \n | \n | \n | \n |
---|---|---|---|---|---|
Lindysen | \nJakeLaoyu | \nlandluck | \nwjw-gavin | \ninottn | \nzhousg | \n
Please make sure to read the Contributing Guide before making a pull request.
\nMIT.
\nA lightweight, customizable Vue UI library for mobile web apps.
\nIt is recommended to use Rsbuild to create a scaffold project.
\nRsbuild is a build tool based on Rspack, developed by the author of Vant, with first-class build speed and development experience, providing first-priority support for Vant.
\nYou can create a Rsbuild project with the following command:
\nnpm create rsbuild@latest\n
\nPlease visit the Rsbuild repository for more information.
\nSee in Quickstart.
\nVant 2 supports modern browsers and Android >= 4.0\u3001iOS >= 8.0.
\nVant 3/4 supports modern browsers and Chrome >= 51\u3001iOS >= 10.0 (same as Vue 3).
\nThe current maintenance status of each version of Vant is as follows:
\nName | \nFramework | \nRelease | \nLatest Version | \nStatus | \n
---|---|---|---|---|
Vant 4 | \nVue 3 | \n2022.12 | \n\n | Under active development | \n
Vant 3 | \nVue 3 | \n2020.12 | \n\n | Bugfix only | \n
Vant 2 | \nVue 2 | \n2019.06 | \n\n | Bugfix only | \n
Vant 1 | \nVue 2 | \n2018.03 | \n\n | End of life | \n
Project | \nDescription | \n
---|---|
vant-weapp | \nWeChat MiniProgram UI | \n
vant-demo | \nCollection of Vant demos | \n
vant-cli | \nScaffold for UI library | \n
vant-icons | \nVant icons | \n
vant-touch-emulator | \nUsing vant in desktop browsers | \n
vant-nuxt | \nVant module for Nuxt | \n
Project | \nDescription | \n
---|---|
3lang3/react-vant | \nReact mobile UI Components based on Vant | \n
vant-aliapp | \nAlipay MiniProgram UI | \n
taroify | \nVant Taro | \n
vant-theme | \nOnline theme preview built on Vant UI | \n
@antmjs/vantui | \nMobile UI Components based on Vant, supporting Taro and React | \n
vant-playground | \nVant Playground | \n
sfc-playground-vant | \nVant Playground | \n
vue3-h5-template | \nMobile project template based on Vant | \n
vue3-vant-mobile | \nMobile project template based on Vant | \n
Core contributors of Vant and Vant Weapp:
\n\n | \n | \n | \n | \n | \n |
---|---|---|---|---|---|
chenjiahan | \ncookfront | \nwangnaiyi | \npangxie | \nrex-zsd | \nnemo-shen | \n
\n | \n | \n | \n | \n | \n |
---|---|---|---|---|---|
Lindysen | \nJakeLaoyu | \nlandluck | \nwjw-gavin | \ninottn | \nzhousg | \n
Please make sure to read the Contributing Guide before making a pull request.
\nMIT.
\nUsed to configure Vant components globally, providing dark mode, theme customization and other capabilities.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { ConfigProvider } from 'vant';\n\nconst app = createApp();\napp.use(ConfigProvider);\n
\nEnabling dark mode by setting the theme
prop of the ConfigProvider component to dark
.
In takes effect globally, making all Vant components on the page dark.
\n<van-config-provider theme="dark">...</van-config-provider>\n
\nThe theme prop will not change the text-color or background-color of the page, you can set it manually like this:
\n.van-theme-dark body {\n color: #f5f5f5;\n background-color: black;\n}\n
\n\n\nTips: The theme prop will not change the background color of the page, you need to set it manually.
\n
Switching between light and dark theme by dynamically setting the theme
property.
<van-config-provider :theme="theme">...</van-config-provider>\n
\nexport default {\n setup() {\n const theme = ref('light');\n\n setTimeout(() => {\n theme.value = 'dark';\n }, 1000);\n\n return { theme };\n },\n};\n
\nVant organize component styles through CSS Variables, you can custom themes by overriding these CSS Variables.
\nLooking at the style of the Button component, you can see that the following variables exist on the .van-button--primary
class:
.van-button--primary {\n color: var(--van-button-primary-color);\n background-color: var(--van-button-primary-background);\n}\n
\nThe default values of these variables are defined on the :root
node:
:root {\n --van-white: #fff;\n --van-blue: #1989fa;\n --van-button-primary-color: var(--van-white);\n --van-button-primary-background: var(--van-primary-color);\n}\n
\nYou can directly override these CSS variables in the code, and the style of the Button component will change accordingly:
\n/* the Primary Button will turn red */\n:root:root {\n --van-button-primary-background: red;\n}\n
\n\n\nNote: Why write two duplicate
\n:root
?Since the theme variables in vant are also declared under
\n:root
, in some cases they cannot be successfully overwritten due to priority issues. Through:root:root
you can explicitly make the content you write a higher priority to ensure the successful coverage of the theme variables.
The ConfigProvider
component provides the ability to override CSS variables. You need to wrap a ConfigProvider
component at the root node and configure some CSS variables through the theme-vars
property.
<van-config-provider :theme-vars="themeVars">\n <van-form>\n <van-field name="rate" label="Rate">\n <template #input>\n <van-rate v-model="rate" />\n </template>\n </van-field>\n <van-field name="slider" label="Slider">\n <template #input>\n <van-slider v-model="slider" />\n </template>\n </van-field>\n <div style="margin: 16px">\n <van-button round block type="primary" native-type="submit">\n Submit\n </van-button>\n </div>\n </van-form>\n</van-config-provider>\n
\nimport { ref, reactive } from 'vue';\n\nexport default {\n setup() {\n const rate = ref(4);\n const slider = ref(50);\n\n // ThemeVars will be converted to the corresponding CSS variable\n // For example, sliderBarHeight will be converted to `--van-slider-bar-height`\n const themeVars = reactive({\n rateIconFullColor: '#07c160',\n sliderBarHeight: '4px',\n sliderButtonWidth: '20px',\n sliderButtonHeight: '20px',\n sliderActiveBackground: '#07c160',\n buttonPrimaryBackground: '#07c160',\n buttonPrimaryBorderColor: '#07c160',\n });\n\n return {\n rate,\n slider,\n themeVars,\n };\n },\n};\n
\nBy default, the CSS variables generated by themeVars
are applied to the root node of the component, thereby only affecting the styles of its child components and not the entire page.
You can modify the scope of CSS variables using the theme-vars-scope
prop. For example, by setting theme-vars-scope
to global
, the CSS variables generated by themeVars
will be applied to the root node of the HTML and affect all components within the entire page.
<van-config-provider :theme-vars="themeVars" theme-vars-scope="global">\n ...\n</van-config-provider>\n
\nUsing ConfigProviderThemeVars
type to get code intellisense.
import type { ConfigProviderThemeVars } from 'vant';\n\nconst themeVars: ConfigProviderThemeVars = {\n sliderBarHeight: '4px',\n};\n
\nIf you need to define CSS variables for dark mode or light mode separately, you can use the theme-vars-dark
and theme-vars-light
props.
theme-vars-dark
: define CSS variables that only take effect in dark mode, will override the variables defined in theme-vars
.theme-vars-light
: define CSS variables that only take effect in light mode, will override the variables defined in theme-vars
.Take the buttonPrimaryBackground
variable below as an example, the value will be blue
in dark mode, and green
in light mode.
<van-config-provider\n :theme-vars="themeVars"\n :theme-vars-dark="themeVarsDark"\n :theme-vars-light="themeVarsLight"\n>\n ...\n</van-config-provider>\n
\nimport { ref, reactive } from 'vue';\n\nexport default {\n setup() {\n const themeVars = reactive({ buttonPrimaryBackground: 'red' });\n const themeVarsDark = reactive({ buttonPrimaryBackground: 'blue' });\n const themeVarsLight = reactive({ buttonPrimaryBackground: 'green' });\n\n return {\n themeVars,\n themeVarsDark,\n themeVarsLight,\n };\n },\n};\n
\nIn addition, you can also use the class selectors .van-theme-light
and .van-theme-dark
to individually modify the base variables and component variables in the light or dark mode.
.van-theme-light {\n --van-white: white;\n}\n\n.van-theme-dark {\n --van-white: black;\n}\n
\nIn Vant, CSS variables are divided into basic variables and component variables. Component variables inherit from basic variables, so modifying a basic variable will affect all related components.
\nCSS variables have an inheritance relationship, where component variables inherit from the nearest parent basic variable.
\nTherefore, there are certain limitations when modifying basic variables. You need to use the :root
selector or the global mode of the ConfigProvider component to modify basic variables. Otherwise, component variables may not inherit basic variables correctly.
Taking the --van-primary-color
basic variable as an example:
:root
selector::root {\n --van-primary-color: red;\n}\n
\n<van-config-provider\n :theme-vars="{ primaryColor: 'red' }"\n theme-vars-scope="global"\n>\n ...\n</van-config-provider>\n
\nlocal
mode of the ConfigProvider component:<van-config-provider :theme-vars="{ primaryColor: 'red' }">\n ...\n</van-config-provider>\n
\nAs for component variables, there are no such limitations, and you can modify them in any way you want.
\nThere are all Basic Variables below, for component CSS Variables, please refer to the documentation of each component.
\n// Color Palette\n--van-black: #000;\n--van-white: #fff;\n--van-gray-1: #f7f8fa;\n--van-gray-2: #f2f3f5;\n--van-gray-3: #ebedf0;\n--van-gray-4: #dcdee0;\n--van-gray-5: #c8c9cc;\n--van-gray-6: #969799;\n--van-gray-7: #646566;\n--van-gray-8: #323233;\n--van-red: #ee0a24;\n--van-blue: #1989fa;\n--van-orange: #ff976a;\n--van-orange-dark: #ed6a0c;\n--van-orange-light: #fffbe8;\n--van-green: #07c160;\n\n// Gradient Colors\n--van-gradient-red: linear-gradient(to right, #ff6034, #ee0a24);\n--van-gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);\n\n// Component Colors\n--van-primary-color: var(--van-blue);\n--van-success-color: var(--van-green);\n--van-danger-color: var(--van-red);\n--van-warning-color: var(--van-orange);\n--van-text-color: var(--van-gray-8);\n--van-text-color-2: var(--van-gray-6);\n--van-text-color-3: var(--van-gray-5);\n--van-active-color: var(--van-gray-2);\n--van-active-opacity: 0.6;\n--van-disabled-opacity: 0.5;\n--van-background: var(--van-gray-1);\n--van-background-2: var(--van-white);\n\n// Padding\n--van-padding-base: 4px;\n--van-padding-xs: 8px;\n--van-padding-sm: 12px;\n--van-padding-md: 16px;\n--van-padding-lg: 24px;\n--van-padding-xl: 32px;\n\n// Font\n--van-font-size-xs: 10px;\n--van-font-size-sm: 12px;\n--van-font-size-md: 14px;\n--van-font-size-lg: 16px;\n--van-font-bold: 600;\n--van-line-height-xs: 14px;\n--van-line-height-sm: 18px;\n--van-line-height-md: 20px;\n--van-line-height-lg: 22px;\n--van-base-font: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,\n Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',\n sans-serif;\n--van-price-font: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif;\n\n// Animation\n--van-duration-base: 0.3s;\n--van-duration-fast: 0.2s;\n--van-ease-out: ease-out;\n--van-ease-in: ease-in;\n\n// Border\n--van-border-color: var(--van-gray-3);\n--van-border-width: 1px;\n--van-radius-sm: 2px;\n--van-radius-md: 4px;\n--van-radius-lg: 8px;\n--van-radius-max: 999px;\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
theme | \nTheme mode, can be set to dark | \nConfigProviderTheme | \nlight | \n
theme-vars | \nTheme variables | \nobject | \n- | \n
theme-vars-dark | \nTheme variables that work in dark mode\uFF0Cwill override theme-vars | \nobject | \n- | \n
theme-vars-light | \nTheme variables that work in light mode, will override theme-vars | \nobject | \n- | \n
theme-vars-scope | \nby default only affects its child components\uFF0Cset to global for the entire page to take effect | \nConfigProviderThemeVarsScope | \nlocal | \n
z-index | \nSet the z-index of all popup components, this property takes effect globally | \nnumber | \n2000 | \n
tag | \nHTML Tag of root element | \nstring | \ndiv | \n
icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
The component exports the following type definitions:
\nimport type {\n ConfigProviderProps,\n ConfigProviderTheme,\n ConfigProviderThemeVars,\n ConfigProviderThemeVarsScope,\n} from 'vant';\n
\nUsed to configure Vant components globally, providing dark mode, theme customization and other capabilities.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { ConfigProvider } from 'vant';\n\nconst app = createApp();\napp.use(ConfigProvider);\n
\nEnabling dark mode by setting the theme
prop of the ConfigProvider component to dark
.
In takes effect globally, making all Vant components on the page dark.
\n<van-config-provider theme="dark">...</van-config-provider>\n
\nThe theme prop will not change the text-color or background-color of the page, you can set it manually like this:
\n.van-theme-dark body {\n color: #f5f5f5;\n background-color: black;\n}\n
\n\n\nTips: The theme prop will not change the background color of the page, you need to set it manually.
\n
Switching between light and dark theme by dynamically setting the theme
property.
<van-config-provider :theme="theme">...</van-config-provider>\n
\nexport default {\n setup() {\n const theme = ref('light');\n\n setTimeout(() => {\n theme.value = 'dark';\n }, 1000);\n\n return { theme };\n },\n};\n
\nVant organize component styles through CSS Variables, you can custom themes by overriding these CSS Variables.
\nLooking at the style of the Button component, you can see that the following variables exist on the .van-button--primary
class:
.van-button--primary {\n color: var(--van-button-primary-color);\n background-color: var(--van-button-primary-background);\n}\n
\nThe default values of these variables are defined on the :root
node:
:root {\n --van-white: #fff;\n --van-blue: #1989fa;\n --van-button-primary-color: var(--van-white);\n --van-button-primary-background: var(--van-primary-color);\n}\n
\nYou can directly override these CSS variables in the code, and the style of the Button component will change accordingly:
\n/* the Primary Button will turn red */\n:root:root {\n --van-button-primary-background: red;\n}\n
\n\n\nNote: Why write two duplicate
\n:root
?Since the theme variables in vant are also declared under
\n:root
, in some cases they cannot be successfully overwritten due to priority issues. Through:root:root
you can explicitly make the content you write a higher priority to ensure the successful coverage of the theme variables.
The ConfigProvider
component provides the ability to override CSS variables. You need to wrap a ConfigProvider
component at the root node and configure some CSS variables through the theme-vars
property.
<van-config-provider :theme-vars="themeVars">\n <van-form>\n <van-field name="rate" label="Rate">\n <template #input>\n <van-rate v-model="rate" />\n </template>\n </van-field>\n <van-field name="slider" label="Slider">\n <template #input>\n <van-slider v-model="slider" />\n </template>\n </van-field>\n <div style="margin: 16px">\n <van-button round block type="primary" native-type="submit">\n Submit\n </van-button>\n </div>\n </van-form>\n</van-config-provider>\n
\nimport { ref, reactive } from 'vue';\n\nexport default {\n setup() {\n const rate = ref(4);\n const slider = ref(50);\n\n // ThemeVars will be converted to the corresponding CSS variable\n // For example, sliderBarHeight will be converted to `--van-slider-bar-height`\n const themeVars = reactive({\n rateIconFullColor: '#07c160',\n sliderBarHeight: '4px',\n sliderButtonWidth: '20px',\n sliderButtonHeight: '20px',\n sliderActiveBackground: '#07c160',\n buttonPrimaryBackground: '#07c160',\n buttonPrimaryBorderColor: '#07c160',\n });\n\n return {\n rate,\n slider,\n themeVars,\n };\n },\n};\n
\nBy default, the CSS variables generated by themeVars
are applied to the root node of the component, thereby only affecting the styles of its child components and not the entire page.
You can modify the scope of CSS variables using the theme-vars-scope
prop. For example, by setting theme-vars-scope
to global
, the CSS variables generated by themeVars
will be applied to the root node of the HTML and affect all components within the entire page.
<van-config-provider :theme-vars="themeVars" theme-vars-scope="global">\n ...\n</van-config-provider>\n
\nUsing ConfigProviderThemeVars
type to get code intellisense.
import type { ConfigProviderThemeVars } from 'vant';\n\nconst themeVars: ConfigProviderThemeVars = {\n sliderBarHeight: '4px',\n};\n
\nIf you need to define CSS variables for dark mode or light mode separately, you can use the theme-vars-dark
and theme-vars-light
props.
theme-vars-dark
: define CSS variables that only take effect in dark mode, will override the variables defined in theme-vars
.theme-vars-light
: define CSS variables that only take effect in light mode, will override the variables defined in theme-vars
.Take the buttonPrimaryBackground
variable below as an example, the value will be blue
in dark mode, and green
in light mode.
<van-config-provider\n :theme-vars="themeVars"\n :theme-vars-dark="themeVarsDark"\n :theme-vars-light="themeVarsLight"\n>\n ...\n</van-config-provider>\n
\nimport { ref, reactive } from 'vue';\n\nexport default {\n setup() {\n const themeVars = reactive({ buttonPrimaryBackground: 'red' });\n const themeVarsDark = reactive({ buttonPrimaryBackground: 'blue' });\n const themeVarsLight = reactive({ buttonPrimaryBackground: 'green' });\n\n return {\n themeVars,\n themeVarsDark,\n themeVarsLight,\n };\n },\n};\n
\nIn addition, you can also use the class selectors .van-theme-light
and .van-theme-dark
to individually modify the base variables and component variables in the light or dark mode.
.van-theme-light {\n --van-white: white;\n}\n\n.van-theme-dark {\n --van-white: black;\n}\n
\nIn Vant, CSS variables are divided into basic variables and component variables. Component variables inherit from basic variables, so modifying a basic variable will affect all related components.
\nCSS variables have an inheritance relationship, where component variables inherit from the nearest parent basic variable.
\nTherefore, there are certain limitations when modifying basic variables. You need to use the :root
selector or the global mode of the ConfigProvider component to modify basic variables. Otherwise, component variables may not inherit basic variables correctly.
Taking the --van-primary-color
basic variable as an example:
:root
selector::root {\n --van-primary-color: red;\n}\n
\n<van-config-provider\n :theme-vars="{ primaryColor: 'red' }"\n theme-vars-scope="global"\n>\n ...\n</van-config-provider>\n
\nlocal
mode of the ConfigProvider component:<van-config-provider :theme-vars="{ primaryColor: 'red' }">\n ...\n</van-config-provider>\n
\nAs for component variables, there are no such limitations, and you can modify them in any way you want.
\nThere are all Basic Variables below, for component CSS Variables, please refer to the documentation of each component.
\n// Color Palette\n--van-black: #000;\n--van-white: #fff;\n--van-gray-1: #f7f8fa;\n--van-gray-2: #f2f3f5;\n--van-gray-3: #ebedf0;\n--van-gray-4: #dcdee0;\n--van-gray-5: #c8c9cc;\n--van-gray-6: #969799;\n--van-gray-7: #646566;\n--van-gray-8: #323233;\n--van-red: #ee0a24;\n--van-blue: #1989fa;\n--van-orange: #ff976a;\n--van-orange-dark: #ed6a0c;\n--van-orange-light: #fffbe8;\n--van-green: #07c160;\n\n// Gradient Colors\n--van-gradient-red: linear-gradient(to right, #ff6034, #ee0a24);\n--van-gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);\n\n// Component Colors\n--van-primary-color: var(--van-blue);\n--van-success-color: var(--van-green);\n--van-danger-color: var(--van-red);\n--van-warning-color: var(--van-orange);\n--van-text-color: var(--van-gray-8);\n--van-text-color-2: var(--van-gray-6);\n--van-text-color-3: var(--van-gray-5);\n--van-active-color: var(--van-gray-2);\n--van-active-opacity: 0.6;\n--van-disabled-opacity: 0.5;\n--van-background: var(--van-gray-1);\n--van-background-2: var(--van-white);\n\n// Padding\n--van-padding-base: 4px;\n--van-padding-xs: 8px;\n--van-padding-sm: 12px;\n--van-padding-md: 16px;\n--van-padding-lg: 24px;\n--van-padding-xl: 32px;\n\n// Font\n--van-font-size-xs: 10px;\n--van-font-size-sm: 12px;\n--van-font-size-md: 14px;\n--van-font-size-lg: 16px;\n--van-font-bold: 600;\n--van-line-height-xs: 14px;\n--van-line-height-sm: 18px;\n--van-line-height-md: 20px;\n--van-line-height-lg: 22px;\n--van-base-font: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,\n Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',\n sans-serif;\n--van-price-font: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif;\n\n// Animation\n--van-duration-base: 0.3s;\n--van-duration-fast: 0.2s;\n--van-ease-out: ease-out;\n--van-ease-in: ease-in;\n\n// Border\n--van-border-color: var(--van-gray-3);\n--van-border-width: 1px;\n--van-radius-sm: 2px;\n--van-radius-md: 4px;\n--van-radius-lg: 8px;\n--van-radius-max: 999px;\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
theme | \nTheme mode, can be set to dark | \nConfigProviderTheme | \nlight | \n
theme-vars | \nTheme variables | \nobject | \n- | \n
theme-vars-dark | \nTheme variables that work in dark mode\uFF0Cwill override theme-vars | \nobject | \n- | \n
theme-vars-light | \nTheme variables that work in light mode, will override theme-vars | \nobject | \n- | \n
theme-vars-scope | \nby default only affects its child components\uFF0Cset to global for the entire page to take effect | \nConfigProviderThemeVarsScope | \nlocal | \n
z-index | \nSet the z-index of all popup components, this property takes effect globally | \nnumber | \n2000 | \n
tag | \nHTML Tag of root element | \nstring | \ndiv | \n
icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
The component exports the following type definitions:
\nimport type {\n ConfigProviderProps,\n ConfigProviderTheme,\n ConfigProviderThemeVars,\n ConfigProviderThemeVarsScope,\n} from 'vant';\n
\nThe vertically displayed navigation bar is used to switch between different content areas.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Sidebar, SidebarItem } from 'vant';\n\nconst app = createApp();\napp.use(Sidebar);\napp.use(SidebarItem);\n
\n<van-sidebar v-model="active">\n <van-sidebar-item title="Title" />\n <van-sidebar-item title="Title" />\n <van-sidebar-item title="Title" />\n</van-sidebar>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref(0);\n return { active };\n },\n};\n
\n<van-sidebar v-model="active">\n <van-sidebar-item title="Title" dot />\n <van-sidebar-item title="Title" badge="5" />\n <van-sidebar-item title="Title" />\n</van-sidebar>\n
\n<van-sidebar v-model="active">\n <van-sidebar-item title="Title" />\n <van-sidebar-item title="Title" disabled />\n <van-sidebar-item title="Title" />\n</van-sidebar>\n
\n<van-sidebar v-model="active" @change="onChange">\n <van-sidebar-item title="Title 1" />\n <van-sidebar-item title="Title 2" />\n <van-sidebar-item title="Title 3" />\n</van-sidebar>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const active = ref(0);\n const onChange = (index) => showToast(`Title ${index + 1}`);\n return {\n active,\n onChange,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nIndex of chosen item | \nnumber | string | \n0 | \n
Event | \nDescription | \nArguments | \n
---|---|---|
change | \nEmitted when chosen item changed | \nindex: number | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
title | \nContent | \nstring | \n\'\' | \n
dot | \nWhether to show red dot | \nboolean | \nfalse | \n
badge | \nContent of the badge | \nnumber | string | \n\'\' | \n
badge-props | \nProps of Badge, see Badge - props | \nBadgeProps | \n- | \n
disabled | \nWhether to be disabled | \nboolean | \nfalse | \n
url | \nLink | \nstring | \n- | \n
to | \nThe target route should navigate to when clicked on, same as the to prop of Vue Router | \nstring | object | \n- | \n
replace | \nIf true, the navigation will not leave a history record | \nboolean | \nfalse | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when an item is clicked | \nindex: number | \n
Name | \nDescription | \n
---|---|
title | \nCustom item title | \n
The component exports the following type definitions:
\nimport type { SidebarProps, SidebarItemProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-sidebar-width | \n80px | \n- | \n
--van-sidebar-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-sidebar-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-sidebar-text-color | \nvar(--van-text-color) | \n- | \n
--van-sidebar-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-sidebar-padding | \n20px var(--van-padding-sm) | \n- | \n
--van-sidebar-active-color | \nvar(--van-active-color) | \n- | \n
--van-sidebar-background | \nvar(--van-background) | \n- | \n
--van-sidebar-selected-font-weight | \nvar(--van-font-bold) | \n- | \n
--van-sidebar-selected-text-color | \nvar(--van-text-color) | \n- | \n
--van-sidebar-selected-border-width | \n4px | \n- | \n
--van-sidebar-selected-border-height | \n16px | \n- | \n
--van-sidebar-selected-border-color | \nvar(--van-primary-color) | \n- | \n
--van-sidebar-selected-background | \nvar(--van-background-2) | \n- | \n
The vertically displayed navigation bar is used to switch between different content areas.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Sidebar, SidebarItem } from 'vant';\n\nconst app = createApp();\napp.use(Sidebar);\napp.use(SidebarItem);\n
\n<van-sidebar v-model="active">\n <van-sidebar-item title="Title" />\n <van-sidebar-item title="Title" />\n <van-sidebar-item title="Title" />\n</van-sidebar>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref(0);\n return { active };\n },\n};\n
\n<van-sidebar v-model="active">\n <van-sidebar-item title="Title" dot />\n <van-sidebar-item title="Title" badge="5" />\n <van-sidebar-item title="Title" />\n</van-sidebar>\n
\n<van-sidebar v-model="active">\n <van-sidebar-item title="Title" />\n <van-sidebar-item title="Title" disabled />\n <van-sidebar-item title="Title" />\n</van-sidebar>\n
\n<van-sidebar v-model="active" @change="onChange">\n <van-sidebar-item title="Title 1" />\n <van-sidebar-item title="Title 2" />\n <van-sidebar-item title="Title 3" />\n</van-sidebar>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const active = ref(0);\n const onChange = (index) => showToast(`Title ${index + 1}`);\n return {\n active,\n onChange,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nIndex of chosen item | \nnumber | string | \n0 | \n
Event | \nDescription | \nArguments | \n
---|---|---|
change | \nEmitted when chosen item changed | \nindex: number | \n
Attribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
title | \nContent | \nstring | \n\'\' | \n
dot | \nWhether to show red dot | \nboolean | \nfalse | \n
badge | \nContent of the badge | \nnumber | string | \n\'\' | \n
badge-props | \nProps of Badge, see Badge - props | \nBadgeProps | \n- | \n
disabled | \nWhether to be disabled | \nboolean | \nfalse | \n
url | \nLink | \nstring | \n- | \n
to | \nThe target route should navigate to when clicked on, same as the to prop of Vue Router | \nstring | object | \n- | \n
replace | \nIf true, the navigation will not leave a history record | \nboolean | \nfalse | \n
Event | \nDescription | \nArguments | \n
---|---|---|
click | \nEmitted when an item is clicked | \nindex: number | \n
Name | \nDescription | \n
---|---|
title | \nCustom item title | \n
The component exports the following type definitions:
\nimport type { SidebarProps, SidebarItemProps } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-sidebar-width | \n80px | \n- | \n
--van-sidebar-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-sidebar-line-height | \nvar(--van-line-height-md) | \n- | \n
--van-sidebar-text-color | \nvar(--van-text-color) | \n- | \n
--van-sidebar-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
--van-sidebar-padding | \n20px var(--van-padding-sm) | \n- | \n
--van-sidebar-active-color | \nvar(--van-active-color) | \n- | \n
--van-sidebar-background | \nvar(--van-background) | \n- | \n
--van-sidebar-selected-font-weight | \nvar(--van-font-bold) | \n- | \n
--van-sidebar-selected-text-color | \nvar(--van-text-color) | \n- | \n
--van-sidebar-selected-border-width | \n4px | \n- | \n
--van-sidebar-selected-border-height | \n16px | \n- | \n
--van-sidebar-selected-border-color | \nvar(--van-primary-color) | \n- | \n
--van-sidebar-selected-background | \nvar(--van-background-2) | \n- | \n
Component for signature scene, based on Canvas. Please upgrade vant
to >= v4.3.0 before using this component.
Register component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Signature } from 'vant';\n\nconst app = createApp();\napp.use(Signature);\n
\nWhen the confirm button is clicked, the component will emit the submit
event. The first parameter of the event is data
, which contains the following fields:
image
: The image corresponding to the signature, which is in base64 string format. Returns an empty string if the signature is empty.canvas
: The Canvas element.<van-signature @submit="onSubmit" @clear="onClear" />\n<van-image v-if="image" :src="image" />\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const image = ref('');\n const onSubmit = (data) => {\n image.value = data.image;\n };\n const onClear = () => showToast('clear');\n\n return {\n image,\n onSubmit,\n onClear,\n };\n },\n};\n
\nUse pen-color
prop to set the color of the brush stroke.
<van-signature pen-color="#ff0000" @submit="onSubmit" @clear="onClear" />\n
\nUse line-width
prop to set the width of the line.
<van-signature :line-width="6" @submit="onSubmit" @clear="onClear" />\n
\nUse background-color
prop to set the color of the background.
<van-signature background-color="#eee" @submit="onSubmit" @clear="onClear" />\n
\nParameter | \nDescription | \nType | \nDefault | \n
---|---|---|---|
type | \nExport image type | \nstring | \npng | \n
pen-color | \nColor of the brush stroke, default is black | \nstring | \n#000 | \n
line-width | \nWidth of the line | \nnumber | \n3 | \n
background-color | \nBackground color | \nstring | \n- | \n
tips | \nText that appears when Canvas is not supported | \nstring | \n- | \n
clear-button-text | \nClear button text | \nstring | \nClear | \n
confirm-button-text | \nConfirm button text | \nstring | \nConfirm | \n
Event Name | \nDescription | \nCallback Parameters | \n
---|---|---|
start | \nEmitted when signing starts | \n- | \n
end | \nEmitted when signing ends | \n- | \n
signing | \nEmitted when signing | \nevent: TouchEvent | \n
submit | \nEmitted when clicking the confirm button | \ndata: { image: string; canvas: HTMLCanvasElement } | \n
clear | \nEmitted when clicking the cancel button | \n- | \n
Use ref to get Signature instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
resize v4.7.3 | \nResize Signature when container element resized or visibility changed | \n- | \n- | \n
The component exports the following type definitions:
\nimport type { SignatureProps, SignatureInstance } from 'vant';\n
\nSignatureInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { SignatureInstance } from 'vant';\n\nconst signatureRef = ref<SignatureInstance>();\n\nsignatureRef.value?.resize();\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-signature-padding | \nvar(--van-padding-xs) | \n- | \n
--van-signature-content-height | \n200px | \nHeight of the canvas | \n
--van-signature-content-background | \nvar(--van-background-2) | \nBackground color of the canvas | \n
--van-signature-content-border | \n1px dotted #dadada | \nBorder style of the canvas | \n
Component for signature scene, based on Canvas. Please upgrade vant
to >= v4.3.0 before using this component.
Register component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Signature } from 'vant';\n\nconst app = createApp();\napp.use(Signature);\n
\nWhen the confirm button is clicked, the component will emit the submit
event. The first parameter of the event is data
, which contains the following fields:
image
: The image corresponding to the signature, which is in base64 string format. Returns an empty string if the signature is empty.canvas
: The Canvas element.<van-signature @submit="onSubmit" @clear="onClear" />\n<van-image v-if="image" :src="image" />\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const image = ref('');\n const onSubmit = (data) => {\n image.value = data.image;\n };\n const onClear = () => showToast('clear');\n\n return {\n image,\n onSubmit,\n onClear,\n };\n },\n};\n
\nUse pen-color
prop to set the color of the brush stroke.
<van-signature pen-color="#ff0000" @submit="onSubmit" @clear="onClear" />\n
\nUse line-width
prop to set the width of the line.
<van-signature :line-width="6" @submit="onSubmit" @clear="onClear" />\n
\nUse background-color
prop to set the color of the background.
<van-signature background-color="#eee" @submit="onSubmit" @clear="onClear" />\n
\nParameter | \nDescription | \nType | \nDefault | \n
---|---|---|---|
type | \nExport image type | \nstring | \npng | \n
pen-color | \nColor of the brush stroke, default is black | \nstring | \n#000 | \n
line-width | \nWidth of the line | \nnumber | \n3 | \n
background-color | \nBackground color | \nstring | \n- | \n
tips | \nText that appears when Canvas is not supported | \nstring | \n- | \n
clear-button-text | \nClear button text | \nstring | \nClear | \n
confirm-button-text | \nConfirm button text | \nstring | \nConfirm | \n
Event Name | \nDescription | \nCallback Parameters | \n
---|---|---|
start | \nEmitted when signing starts | \n- | \n
end | \nEmitted when signing ends | \n- | \n
signing | \nEmitted when signing | \nevent: TouchEvent | \n
submit | \nEmitted when clicking the confirm button | \ndata: { image: string; canvas: HTMLCanvasElement } | \n
clear | \nEmitted when clicking the cancel button | \n- | \n
Use ref to get Signature instance and call instance methods.
\nName | \nDescription | \nAttribute | \nReturn value | \n
---|---|---|---|
resize v4.7.3 | \nResize Signature when container element resized or visibility changed | \n- | \n- | \n
The component exports the following type definitions:
\nimport type { SignatureProps, SignatureInstance } from 'vant';\n
\nSignatureInstance
is the type of component instance:
import { ref } from 'vue';\nimport type { SignatureInstance } from 'vant';\n\nconst signatureRef = ref<SignatureInstance>();\n\nsignatureRef.value?.resize();\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-signature-padding | \nvar(--van-padding-xs) | \n- | \n
--van-signature-content-height | \n200px | \nHeight of the canvas | \n
--van-signature-content-background | \nvar(--van-background-2) | \nBackground color of the canvas | \n
--van-signature-content-border | \n1px dotted #dadada | \nBorder style of the canvas | \n
The NumberKeyboard component can be used with PasswordInput component or custom input box components.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { NumberKeyboard } from 'vant';\n\nconst app = createApp();\napp.use(NumberKeyboard);\n
\n<van-cell @touchstart.stop="show = true">Show Keyboard</van-cell>\n<van-number-keyboard\n :show="show"\n @blur="show = false"\n @input="onInput"\n @delete="onDelete"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const show = ref(true);\n const onInput = (value) => showToast(value);\n const onDelete = () => showToast('delete');\n\n return {\n show,\n onInput,\n onDelete,\n };\n },\n};\n
\n<van-number-keyboard\n :show="show"\n theme="custom"\n extra-key="."\n close-button-text="Close"\n @blur="show = false"\n @input="onInput"\n @delete="onDelete"\n/>\n
\nUse extra-key
prop to set the content of bottom left button.
<van-cell plain type="primary" @touchstart.stop="show = true">\n Show IdNumber Keyboard\n</van-cell>\n\n<van-number-keyboard\n :show="show"\n extra-key="X"\n close-button-text="Close"\n @blur="show = false"\n @input="onInput"\n @delete="onDelete"\n/>\n
\nUse title
prop to set keyboard title.
<van-cell plain type="primary" @touchstart.stop="show = true">\n Show Keyboard With Title\n</van-cell>\n<van-number-keyboard\n :show="show"\n title="Keyboard Title"\n extra-key="."\n close-button-text="Close"\n @blur="show = false"\n @input="onInput"\n @delete="onDelete"\n/>\n
\n<van-cell plain type="primary" @touchstart.stop="show = true">\n Show Keyboard With Multiple ExtraKey\n</van-cell>\n<van-number-keyboard\n :show="show"\n theme="custom"\n :extra-key="['00', '.']"\n close-button-text="Close"\n @blur="show = false"\n @input="onInput"\n @delete="onDelete"\n/>\n
\nUse random-key-order
prop to shuffle the order of keys.
<van-cell @touchstart.stop="show = true">\n Show Keyboard With Random Key Order\n</van-cell>\n<van-number-keyboard\n :show="show"\n random-key-order\n @blur="show = false"\n @input="onInput"\n @delete="onDelete"\n/>\n
\n<van-field v-model="value" readonly clickable @touchstart.stop="show = true" />\n<van-number-keyboard\n v-model="value"\n :show="show"\n :maxlength="6"\n @blur="show = false"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(true);\n const value = ref('');\n return {\n show,\n value,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nCurrent value | \nstring | \n- | \n
show | \nWhether to show keyboard | \nboolean | \n- | \n
title | \nKeyboard title | \nstring | \n- | \n
theme | \nKeyboard theme, can be set to custom | \nstring | \ndefault | \n
maxlength | \nValue maxlength | \nnumber | string | \nInfinity | \n
transition | \nWhether to show transition animation | \nboolean | \ntrue | \n
z-index | \nKeyboard z-index | \nnumber | string | \n100 | \n
extra-key | \nContent of bottom left key | \nstring | string[] | \n\'\' | \n
close-button-text | \nClose button text | \nstring | \n- | \n
delete-button-text | \nDelete button text | \nstring | \nDelete Icon | \n
close-button-loading | \nWhether to show loading close button in custom theme | \nboolean | \nfalse | \n
show-delete-key | \nWhether to show delete button | \nboolean | \ntrue | \n
blur-on-close | \nWhether to emit blur event when clicking close button | \nboolean | \ntrue | \n
hide-on-click-outside | \nWhether to hide keyboard when outside is clicked | \nboolean | \ntrue | \n
teleport | \nSpecifies a target element where NumberKeyboard will be mounted | \nstring | Element | \n- | \n
safe-area-inset-bottom | \nWhether to enable bottom safe area adaptation | \nboolean | \ntrue | \n
random-key-order | \nWhether to shuffle the order of keys | \nboolean | \nfalse | \n
Event | \nDescription | \nArguments | \n
---|---|---|
input | \nEmitted when a key is pressed | \nkey: string | \n
delete | \nEmitted when the delete key is pressed | \n- | \n
close | \nEmitted when the close button is clicked | \n- | \n
blur | \nEmitted when the close button is clicked or the keyboard is blurred | \n- | \n
show | \nEmitted when keyboard is fully displayed | \n- | \n
hide | \nEmitted when keyboard is fully hidden | \n- | \n
Name | \nDescription | \n
---|---|
delete | \nCustom delete key content | \n
extra-key | \nCustom extra key content | \n
title-left | \nCustom title left content | \n
The component exports the following type definitions:
\nimport type { NumberKeyboardProps, NumberKeyboardTheme } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-number-keyboard-background | \nvar(--van-gray-2) | \n- | \n
--van-number-keyboard-key-height | \n48px | \n- | \n
--van-number-keyboard-key-font-size | \n28px | \n- | \n
--van-number-keyboard-key-active-color | \nvar(--van-gray-3) | \n- | \n
--van-number-keyboard-key-background | \nvar(--van-white) | \n- | \n
--van-number-keyboard-delete-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-number-keyboard-title-color | \nvar(--van-gray-7) | \n- | \n
--van-number-keyboard-title-height | \n34px | \n- | \n
--van-number-keyboard-title-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-number-keyboard-close-padding | \n0 var(--van-padding-md) | \n- | \n
--van-number-keyboard-close-color | \nvar(--van-primary-color) | \n- | \n
--van-number-keyboard-close-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-number-keyboard-button-text-color | \nvar(--van-white) | \n- | \n
--van-number-keyboard-button-background | \nvar(--van-primary-color) | \n- | \n
--van-number-keyboard-z-index | \n100 | \n- | \n
The NumberKeyboard component can be used with PasswordInput component or custom input box components.
\nRegister component globally via app.use
, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { NumberKeyboard } from 'vant';\n\nconst app = createApp();\napp.use(NumberKeyboard);\n
\n<van-cell @touchstart.stop="show = true">Show Keyboard</van-cell>\n<van-number-keyboard\n :show="show"\n @blur="show = false"\n @input="onInput"\n @delete="onDelete"\n/>\n
\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const show = ref(true);\n const onInput = (value) => showToast(value);\n const onDelete = () => showToast('delete');\n\n return {\n show,\n onInput,\n onDelete,\n };\n },\n};\n
\n<van-number-keyboard\n :show="show"\n theme="custom"\n extra-key="."\n close-button-text="Close"\n @blur="show = false"\n @input="onInput"\n @delete="onDelete"\n/>\n
\nUse extra-key
prop to set the content of bottom left button.
<van-cell plain type="primary" @touchstart.stop="show = true">\n Show IdNumber Keyboard\n</van-cell>\n\n<van-number-keyboard\n :show="show"\n extra-key="X"\n close-button-text="Close"\n @blur="show = false"\n @input="onInput"\n @delete="onDelete"\n/>\n
\nUse title
prop to set keyboard title.
<van-cell plain type="primary" @touchstart.stop="show = true">\n Show Keyboard With Title\n</van-cell>\n<van-number-keyboard\n :show="show"\n title="Keyboard Title"\n extra-key="."\n close-button-text="Close"\n @blur="show = false"\n @input="onInput"\n @delete="onDelete"\n/>\n
\n<van-cell plain type="primary" @touchstart.stop="show = true">\n Show Keyboard With Multiple ExtraKey\n</van-cell>\n<van-number-keyboard\n :show="show"\n theme="custom"\n :extra-key="['00', '.']"\n close-button-text="Close"\n @blur="show = false"\n @input="onInput"\n @delete="onDelete"\n/>\n
\nUse random-key-order
prop to shuffle the order of keys.
<van-cell @touchstart.stop="show = true">\n Show Keyboard With Random Key Order\n</van-cell>\n<van-number-keyboard\n :show="show"\n random-key-order\n @blur="show = false"\n @input="onInput"\n @delete="onDelete"\n/>\n
\n<van-field v-model="value" readonly clickable @touchstart.stop="show = true" />\n<van-number-keyboard\n v-model="value"\n :show="show"\n :maxlength="6"\n @blur="show = false"\n/>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(true);\n const value = ref('');\n return {\n show,\n value,\n };\n },\n};\n
\nAttribute | \nDescription | \nType | \nDefault | \n
---|---|---|---|
v-model | \nCurrent value | \nstring | \n- | \n
show | \nWhether to show keyboard | \nboolean | \n- | \n
title | \nKeyboard title | \nstring | \n- | \n
theme | \nKeyboard theme, can be set to custom | \nstring | \ndefault | \n
maxlength | \nValue maxlength | \nnumber | string | \nInfinity | \n
transition | \nWhether to show transition animation | \nboolean | \ntrue | \n
z-index | \nKeyboard z-index | \nnumber | string | \n100 | \n
extra-key | \nContent of bottom left key | \nstring | string[] | \n\'\' | \n
close-button-text | \nClose button text | \nstring | \n- | \n
delete-button-text | \nDelete button text | \nstring | \nDelete Icon | \n
close-button-loading | \nWhether to show loading close button in custom theme | \nboolean | \nfalse | \n
show-delete-key | \nWhether to show delete button | \nboolean | \ntrue | \n
blur-on-close | \nWhether to emit blur event when clicking close button | \nboolean | \ntrue | \n
hide-on-click-outside | \nWhether to hide keyboard when outside is clicked | \nboolean | \ntrue | \n
teleport | \nSpecifies a target element where NumberKeyboard will be mounted | \nstring | Element | \n- | \n
safe-area-inset-bottom | \nWhether to enable bottom safe area adaptation | \nboolean | \ntrue | \n
random-key-order | \nWhether to shuffle the order of keys | \nboolean | \nfalse | \n
Event | \nDescription | \nArguments | \n
---|---|---|
input | \nEmitted when a key is pressed | \nkey: string | \n
delete | \nEmitted when the delete key is pressed | \n- | \n
close | \nEmitted when the close button is clicked | \n- | \n
blur | \nEmitted when the close button is clicked or the keyboard is blurred | \n- | \n
show | \nEmitted when keyboard is fully displayed | \n- | \n
hide | \nEmitted when keyboard is fully hidden | \n- | \n
Name | \nDescription | \n
---|---|
delete | \nCustom delete key content | \n
extra-key | \nCustom extra key content | \n
title-left | \nCustom title left content | \n
The component exports the following type definitions:
\nimport type { NumberKeyboardProps, NumberKeyboardTheme } from 'vant';\n
\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-number-keyboard-background | \nvar(--van-gray-2) | \n- | \n
--van-number-keyboard-key-height | \n48px | \n- | \n
--van-number-keyboard-key-font-size | \n28px | \n- | \n
--van-number-keyboard-key-active-color | \nvar(--van-gray-3) | \n- | \n
--van-number-keyboard-key-background | \nvar(--van-white) | \n- | \n
--van-number-keyboard-delete-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-number-keyboard-title-color | \nvar(--van-gray-7) | \n- | \n
--van-number-keyboard-title-height | \n34px | \n- | \n
--van-number-keyboard-title-font-size | \nvar(--van-font-size-lg) | \n- | \n
--van-number-keyboard-close-padding | \n0 var(--van-padding-md) | \n- | \n
--van-number-keyboard-close-color | \nvar(--van-primary-color) | \n- | \n
--van-number-keyboard-close-font-size | \nvar(--van-font-size-md) | \n- | \n
--van-number-keyboard-button-text-color | \nvar(--van-white) | \n- | \n
--van-number-keyboard-button-background | \nvar(--van-primary-color) | \n- | \n
--van-number-keyboard-z-index | \n100 | \n- | \n
\u6D6E\u52A8\u5728\u9875\u9762\u5E95\u90E8\u7684\u9762\u677F\uFF0C\u53EF\u4EE5\u4E0A\u4E0B\u62D6\u52A8\u6765\u6D4F\u89C8\u5185\u5BB9\uFF0C\u5E38\u7528\u4E8E\u63D0\u4F9B\u989D\u5916\u7684\u529F\u80FD\u6216\u4FE1\u606F\u3002\u8BF7\u5347\u7EA7 vant
\u5230 >= 4.5.0 \u7248\u672C\u6765\u4F7F\u7528\u8BE5\u7EC4\u4EF6\u3002
\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { FloatingPanel } from 'vant';\n\nconst app = createApp();\napp.use(FloatingPanel);\n
\nFloatingPanel \u7684\u9ED8\u8BA4\u9AD8\u5EA6\u4E3A 100px
\uFF0C\u7528\u6237\u53EF\u4EE5\u62D6\u52A8\u6765\u5C55\u5F00\u9762\u677F\uFF0C\u4F7F\u9AD8\u5EA6\u8FBE\u5230 60%
\u7684\u5C4F\u5E55\u9AD8\u5EA6\u3002
<van-floating-panel>\n <van-cell-group>\n <van-cell\n v-for="i in 26"\n :key="i"\n :title="String.fromCharCode(i + 64)"\n size="large"\n />\n </van-cell-group>\n</van-floating-panel>\n
\n\u4F60\u53EF\u4EE5\u901A\u8FC7 anchors
\u5C5E\u6027\u6765\u8BBE\u7F6E FloatingPanel \u7684\u951A\u70B9\u4F4D\u7F6E\uFF0C\u5E76\u901A\u8FC7 v-model:height
\u6765\u63A7\u5236\u5F53\u524D\u9762\u677F\u7684\u663E\u793A\u9AD8\u5EA6\u3002
\u6BD4\u5982\uFF0C\u4F7F\u9762\u677F\u7684\u9AD8\u5EA6\u5728 100px
\u300140% \u5C4F\u5E55\u9AD8\u5EA6\u548C 70% \u5C4F\u5E55\u9AD8\u5EA6\u4E09\u4E2A\u4F4D\u7F6E\u505C\u9760\uFF1A
<van-floating-panel v-model:height="height" :anchors="anchors">\n <div style="text-align: center; padding: 15px">\n <p>\u9762\u677F\u663E\u793A\u9AD8\u5EA6 {{ height.toFixed(0) }} px</p>\n </div>\n</van-floating-panel>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const anchors = [\n 100,\n Math.round(0.4 * window.innerHeight),\n Math.round(0.7 * window.innerHeight),\n ];\n const height = ref(anchors[0]);\n\n return { anchors, height };\n },\n};\n
\n\u9ED8\u8BA4\u60C5\u51B5\u4E0B\uFF0CFloatingPanel \u7684\u5934\u90E8\u533A\u57DF\u548C\u5185\u5BB9\u533A\u57DF\u90FD\u53EF\u4EE5\u88AB\u62D6\u62FD\uFF0C\u4F60\u53EF\u4EE5\u901A\u8FC7 content-draggable
\u5C5E\u6027\u6765\u7981\u7528\u5185\u5BB9\u533A\u57DF\u7684\u62D6\u62FD\u3002
<van-floating-panel :content-draggable="false">\n <div style="text-align: center; padding: 15px">\n <p>\u5185\u5BB9\u4E0D\u53EF\u62D6\u62FD</p>\n </div>\n</van-floating-panel>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:height | \n\u5F53\u524D\u9762\u677F\u7684\u663E\u793A\u9AD8\u5EA6 | \nnumber | string | \n0 | \n
anchors | \n\u8BBE\u7F6E\u81EA\u5B9A\u4E49\u951A\u70B9, \u5355\u4F4D px | \nnumber[] | \n[100, window.innerWidth * 0.6] | \n
duration | \n\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u79D2\uFF0C\u8BBE\u7F6E\u4E3A 0 \u53EF\u4EE5\u7981\u7528\u52A8\u753B | \nnumber | string | \n0.3 | \n
content-draggable | \n\u5141\u8BB8\u62D6\u62FD\u5185\u5BB9\u5BB9\u5668 | \nboolean | \ntrue | \n
lock-scroll v4.6.4 | \n\u5F53\u4E0D\u62D6\u62FD\u65F6\uFF0C\u662F\u5426\u9501\u5B9A\u80CC\u666F\u6EDA\u52A8 | \nboolean | \nfalse | \n
safe-area-inset-bottom | \n\u662F\u5426\u5F00\u542F\u5E95\u90E8\u5B89\u5168\u533A\u9002\u914D | \nboolean | \ntrue | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
height-change | \n\u9762\u677F\u663E\u793A\u9AD8\u5EA6\u6539\u53D8\u4E14\u7ED3\u675F\u62D6\u52A8\u540E\u89E6\u53D1 | \n{ height: number } | \n
Name | \nDescription | \n
---|---|
default | \n\u81EA\u5B9A\u4E49\u9762\u677F\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { FloatingPanelProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-floating-panel-border-radius | \n16px | \n- | \n
--van-floating-panel-header-height | \n30px | \n- | \n
--van-floating-panel-z-index | \n999 | \n- | \n
--van-floating-panel-background | \nvar(--van-background-2) | \n- | \n
--van-floating-panel-bar-width | \n20px | \n- | \n
--van-floating-panel-bar-height | \n3px | \n- | \n
--van-floating-panel-bar-color | \nvar(--van-gray-5) | \n- | \n
\u6D6E\u52A8\u5728\u9875\u9762\u5E95\u90E8\u7684\u9762\u677F\uFF0C\u53EF\u4EE5\u4E0A\u4E0B\u62D6\u52A8\u6765\u6D4F\u89C8\u5185\u5BB9\uFF0C\u5E38\u7528\u4E8E\u63D0\u4F9B\u989D\u5916\u7684\u529F\u80FD\u6216\u4FE1\u606F\u3002\u8BF7\u5347\u7EA7 vant
\u5230 >= 4.5.0 \u7248\u672C\u6765\u4F7F\u7528\u8BE5\u7EC4\u4EF6\u3002
\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
\nimport { createApp } from 'vue';\nimport { FloatingPanel } from 'vant';\n\nconst app = createApp();\napp.use(FloatingPanel);\n
\nFloatingPanel \u7684\u9ED8\u8BA4\u9AD8\u5EA6\u4E3A 100px
\uFF0C\u7528\u6237\u53EF\u4EE5\u62D6\u52A8\u6765\u5C55\u5F00\u9762\u677F\uFF0C\u4F7F\u9AD8\u5EA6\u8FBE\u5230 60%
\u7684\u5C4F\u5E55\u9AD8\u5EA6\u3002
<van-floating-panel>\n <van-cell-group>\n <van-cell\n v-for="i in 26"\n :key="i"\n :title="String.fromCharCode(i + 64)"\n size="large"\n />\n </van-cell-group>\n</van-floating-panel>\n
\n\u4F60\u53EF\u4EE5\u901A\u8FC7 anchors
\u5C5E\u6027\u6765\u8BBE\u7F6E FloatingPanel \u7684\u951A\u70B9\u4F4D\u7F6E\uFF0C\u5E76\u901A\u8FC7 v-model:height
\u6765\u63A7\u5236\u5F53\u524D\u9762\u677F\u7684\u663E\u793A\u9AD8\u5EA6\u3002
\u6BD4\u5982\uFF0C\u4F7F\u9762\u677F\u7684\u9AD8\u5EA6\u5728 100px
\u300140% \u5C4F\u5E55\u9AD8\u5EA6\u548C 70% \u5C4F\u5E55\u9AD8\u5EA6\u4E09\u4E2A\u4F4D\u7F6E\u505C\u9760\uFF1A
<van-floating-panel v-model:height="height" :anchors="anchors">\n <div style="text-align: center; padding: 15px">\n <p>\u9762\u677F\u663E\u793A\u9AD8\u5EA6 {{ height.toFixed(0) }} px</p>\n </div>\n</van-floating-panel>\n
\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const anchors = [\n 100,\n Math.round(0.4 * window.innerHeight),\n Math.round(0.7 * window.innerHeight),\n ];\n const height = ref(anchors[0]);\n\n return { anchors, height };\n },\n};\n
\n\u9ED8\u8BA4\u60C5\u51B5\u4E0B\uFF0CFloatingPanel \u7684\u5934\u90E8\u533A\u57DF\u548C\u5185\u5BB9\u533A\u57DF\u90FD\u53EF\u4EE5\u88AB\u62D6\u62FD\uFF0C\u4F60\u53EF\u4EE5\u901A\u8FC7 content-draggable
\u5C5E\u6027\u6765\u7981\u7528\u5185\u5BB9\u533A\u57DF\u7684\u62D6\u62FD\u3002
<van-floating-panel :content-draggable="false">\n <div style="text-align: center; padding: 15px">\n <p>\u5185\u5BB9\u4E0D\u53EF\u62D6\u62FD</p>\n </div>\n</van-floating-panel>\n
\n\u53C2\u6570 | \n\u8BF4\u660E | \n\u7C7B\u578B | \n\u9ED8\u8BA4\u503C | \n
---|---|---|---|
v-model:height | \n\u5F53\u524D\u9762\u677F\u7684\u663E\u793A\u9AD8\u5EA6 | \nnumber | string | \n0 | \n
anchors | \n\u8BBE\u7F6E\u81EA\u5B9A\u4E49\u951A\u70B9, \u5355\u4F4D px | \nnumber[] | \n[100, window.innerWidth * 0.6] | \n
duration | \n\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u79D2\uFF0C\u8BBE\u7F6E\u4E3A 0 \u53EF\u4EE5\u7981\u7528\u52A8\u753B | \nnumber | string | \n0.3 | \n
content-draggable | \n\u5141\u8BB8\u62D6\u62FD\u5185\u5BB9\u5BB9\u5668 | \nboolean | \ntrue | \n
lock-scroll v4.6.4 | \n\u5F53\u4E0D\u62D6\u62FD\u65F6\uFF0C\u662F\u5426\u9501\u5B9A\u80CC\u666F\u6EDA\u52A8 | \nboolean | \nfalse | \n
safe-area-inset-bottom | \n\u662F\u5426\u5F00\u542F\u5E95\u90E8\u5B89\u5168\u533A\u9002\u914D | \nboolean | \ntrue | \n
\u4E8B\u4EF6\u540D | \n\u8BF4\u660E | \n\u56DE\u8C03\u53C2\u6570 | \n
---|---|---|
height-change | \n\u9762\u677F\u663E\u793A\u9AD8\u5EA6\u6539\u53D8\u4E14\u7ED3\u675F\u62D6\u52A8\u540E\u89E6\u53D1 | \n{ height: number } | \n
Name | \nDescription | \n
---|---|
default | \n\u81EA\u5B9A\u4E49\u9762\u677F\u5185\u5BB9 | \n
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
\nimport type { FloatingPanelProps } from 'vant';\n
\n\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\nName | \nDefault Value | \nDescription | \n
---|---|---|
--van-floating-panel-border-radius | \n16px | \n- | \n
--van-floating-panel-header-height | \n30px | \n- | \n
--van-floating-panel-z-index | \n999 | \n- | \n
--van-floating-panel-background | \nvar(--van-background-2) | \n- | \n
--van-floating-panel-bar-width | \n20px | \n- | \n
--van-floating-panel-bar-height | \n3px | \n- | \n
--van-floating-panel-bar-color | \nvar(--van-gray-5) | \n- | \n