import{o as a,a as n,y as l}from"./vue-libs.b44bc779.js";const e={class:"van-doc-markdown-body"},t=l(`

\u4ECE v2 \u5347\u7EA7

\u4ECB\u7ECD

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

\u5347\u7EA7\u6B65\u9AA4

1. \u5347\u7EA7 Vue 3

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

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

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

\u4E0D\u517C\u5BB9\u66F4\u65B0

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

GoodsAction \u5546\u54C1\u5BFC\u822A\u7EC4\u4EF6\u91CD\u547D\u540D\u4E3A ActionBar \u884C\u52A8\u680F\u3002

<!-- Vant 2 -->
<van-goods-action>
  <van-goods-action-icon text="\u56FE\u6807" />
  <van-goods-action-button text="\u6309\u94AE" />
</van-goods-action>

<!-- Vant 3 -->
<van-action-bar>
  <van-action-bar-icon text="\u56FE\u6807" />
  <van-action-bar-button text="\u6309\u94AE" />
</van-action-bar>

\u5E9F\u5F03\u7EC4\u4EF6

\u79FB\u9664 SwitchCell \u7EC4\u4EF6\uFF0C\u53EF\u4EE5\u76F4\u63A5\u4F7F\u7528 Cell \u548C Switch \u7EC4\u4EF6\u4EE3\u66FF\u3002

<!-- Vant 2 -->
<van-switch-cell title="\u6807\u9898" v-model="checked" />

<!-- Vant 3 -->
<van-cell center title="\u6807\u9898">
  <template #right-icon>
    <van-switch v-model="checked" size="24" />
  </template>
</van-cell>

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

\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 -->
<van-popup v-model="show" />

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

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

\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 -->
<van-field :value="value" @input="onInput" />

<!-- Vant 3 -->
<van-field :model-value="value" @update:model-value="onInput" />

\u5176\u4ED6 v-model \u8C03\u6574

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

\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

\u540C\u65F6\u5185\u90E8\u4F7F\u7528\u7684 Info \u7EC4\u4EF6\u4E5F\u4F1A\u91CD\u547D\u540D\u4E3A Badge\u3002

<!-- Vant 2 -->
<van-icon info="5" />

<!-- Vant 3 -->
<van-icon badge="5" />

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

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

<!-- Vant 2 -->
<template>
  <van-popup get-container="body" />
  <van-popup :get-container="getContainer" />
</template>
<script>
  export default {
    methods: {
      getContainer() {
        return document.querySelector('#container');
      },
    },
  };
</script>

<!-- Vant 3 -->
<template>
  <van-popup teleport="body" />
  <van-popup :teleport="container" />
</template>
<script>
  export default {
    beforeCreate() {
      this.container = document.querySelector('#container');
    },
  };
</script>

API \u8C03\u6574

Area

Button

Checkbox

Dialog

DatetimePicker

ImagePreview

Picker

Popover

Stepper

SwipeCell

Toast

TreeSelect

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

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';

// \u5C06 Toast \u7B49\u7EC4\u4EF6\u6CE8\u518C\u5230 app \u4E0A
app.use(Toast);
app.use(Dialog);
app.use(Notify);

// app \u5185\u7684\u5B50\u7EC4\u4EF6\u53EF\u4EE5\u76F4\u63A5\u8C03\u7528 $toast \u7B49\u65B9\u6CD5
export default {
  mounted() {
    this.$toast('\u63D0\u793A\u6587\u6848');
  },
};
`,13),c=[t],r={__name:"migrate-from-v2.zh-CN",setup(p,{expose:s}){return s({frontmatter:{}}),(i,d)=>(a(),n("div",e,c))}};export{r as default};