/*! For license information please see 9094.abedf2f7.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["9094"],{64280:function(s,a,n){"use strict";n.r(a);var l=n("80681");let e=["innerHTML"];a.default={setup:()=>({html:""}),render:()=>((0,l.wg)(),(0,l.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

\u4ECE v2 \u5347\u7EA7\u5230 v3

\n

\u4ECB\u7ECD

\n

\u672C\u6587\u6863\u63D0\u4F9B\u4E86\u4ECE Vant 2 \u5230 Vant 3 \u7684\u5347\u7EA7\u6307\u5357\u3002

\n

\u5347\u7EA7\u6B65\u9AA4

\n

1. \u5347\u7EA7 Vue 3

\n

Vant 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

\n

2. \u5904\u7406\u4E0D\u517C\u5BB9\u66F4\u65B0

\n

Vant 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

\n

\u4E0D\u517C\u5BB9\u66F4\u65B0

\n

\u7EC4\u4EF6\u547D\u540D\u8C03\u6574

\n

GoodsAction \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

\u5E9F\u5F03\u7EC4\u4EF6

\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

\u5F39\u7A97\u578B\u7EC4\u4EF6 v-model \u53D8\u66F4

\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

\n\n
<!-- Vant 2 -->\n<van-popup v-model="show" />\n\n<!-- Vant 3 -->\n<van-popup v-model:show="show" />\n
\n

\u8868\u5355\u578B\u7EC4\u4EF6 v-model \u5185\u90E8\u503C\u53D8\u66F4

\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

\n\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
\n

\u5176\u4ED6 v-model \u8C03\u6574

\n\n

\u5FBD\u6807\u5C5E\u6027\u547D\u540D\u8C03\u6574

\n

\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\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
\n

\u91CD\u547D\u540D get-container \u5C5E\u6027

\n

Vue 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

\n
<!-- 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
\n

API \u8C03\u6574

\n

Area

\n\n

Button

\n\n

Checkbox

\n\n

Dialog

\n\n

DatetimePicker

\n\n

ImagePreview

\n\n

Picker

\n\n

Popover

\n\n

Stepper

\n\n

SwipeCell

\n\n

Toast

\n\n

TreeSelect

\n\n

\u6CE8\u518C\u5168\u5C40\u65B9\u6CD5

\n

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

\n
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
'},null,8,e))}}}]);