Vue3版本的Vant使用遇到的问题及解决办法

1、vant中使用全局Toast：

① 在main.ts文件中添加代码：

// 按需引入vant组件
import {
  Toast,
} from "vant";
const app = createApp(App);
app.config.globalProperties.$toast = Toast;

② 在需要使用Toast的组件中写入如下代码：

<script lang="ts">
import {
  defineComponent,
  getCurrentInstance,
  ComponentInternalInstance,
  onMounted,
} from "vue";
export default defineComponent({
  name: "index",
  setup() {
    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
    onMounted(() => {
    	// 使用
    	proxy?.$toast({
          message: "提示框文字",
          className: "tips-toast",  // 自定义的提示框的样式
        });
    });
  },
});
</script>

2、vant中输入框点击清空按钮：

① 在组件中使用输入框中的自定义清空按钮：

<template>
	<van-field
	  type="password"
	  label="密码"
	  v-model.trim="pwd"
	  placeholder="请输入密码"
	  clearable
	/>
</template>

② 点击按钮发现偶尔失效，原因：输入框的层级覆盖住清空图标了。解决办法：

• 设置输入框的padding-right / margin-right，让这个值大于图标的宽度即可。

3、vant动作面板样式更改：在外层套一个样式，做限制

<div class="change-action-sheet-style">
	<van-action-sheet
    v-model:show="sexVisible"
    :actions="sexList"
    @select="onSelectSex"
  />
</div>