Vue3版本的Vant使用遇到的问题及解决办法
使用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>
更多推荐
已为社区贡献6条内容
所有评论(0)