vue项目中Toast字体过小,没有边距的解决方案

更新时间：2022年04月09日 15:54:13 作者：小六：

这篇文章主要介绍了vue项目中Toast字体过小，没有边距的解决方案。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue Toast字体过小,没有边距

1、前段时间在写项目的时候使用 vant 组件库比较多，在使用vant中Toast时，在Chrome中手机模拟中测试正常，但是当网页放到手机中时字体显示特别小，但是你在vue文件中怎么添加样式都没有用；

2、问题的原因可能是我之前写的那种rem适配方案的问题；

解决办法

在项目 App.vue 文件中添加样式，在Elements中找到toast的类名。为其添加样式，把字体的大小扩大；并添加边距就可以了；

样式一定要写在App.vue里面才会生效；

vue使用Toast最简单方式

使用过Mint-ui组件库的小伙伴都应该知道Toast这个玩意。小编刚刚用的时候，觉得一切的逻辑都是十分完美，但是就是不出来。下面看看具体的使用步骤

1.安装并引入mint-ui

① 安装方式

npm i mint-ui -S

② 引入方式

引入的方式主要有两种，一种是全局引入，一种是按需引入。一般推荐按需引入。因为全局引入时会引入很多不必要的代码，使性能降低。

import { Toast } from 'mint-ui';
Vue.use(Toast)

2.引入Toast

尽管在前面的main.js文件引入了一次Toast之后，在使用的组件中也需要再次引用Toast，并且为了和用户实现交互，需要引入index.js文件和style.css文件

<script>
import { Toast } from 'mint-ui';
import '../../assets/js/index.js'
</script>

<style>
@import '../../assets/css/book/style.css';
</style>

3.使用Toast

① 绑定事件

为触发Toast显示消息提示框，需要通过 @click 增加点击事件

② 配置Toast参数

Toast的参数主要有三个：

message：消息提示框提示的内容
position：消息提示框出现的位置
duration：消息提示框存在的时间，一般以毫秒为单位。

① 在html结构中绑定点击事件

<button @click="showToast">加入购物车</button>

② 在组件的methods中配置Toast的参数

methods:{
        showToast(){
            Toast({
                message: "加入购物车成功",
                position: 'center',
                duration: 1000
            })
        }
    }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue调用高德地图实例代码
本篇文章主要介绍了vue调用高德地图实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04
vue中 router.beforeEach() 的用法示例代码
导航守卫主要是通过跳转或取消的方式守卫导航,本文通过示例代码讲解vue中 router.beforeEach() 的用法,感兴趣的朋友跟随小编一起看看吧
2023-12-12
vue之字符串、数组之间的相互转换方式
这篇文章主要介绍了vue之字符串、数组之间的相互转换方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
Vue-Router路由守卫详的细用法教程
在Vue.js应用中,Vue-Router是一个非常重要的插件,它允许我们实现页面间的导航,然而,仅仅实现导航是不够的,我们还需要在导航的不同阶段进行各种操作,本文将结合实际案例,详细介绍Vue-Router路由守卫的用法,需要的朋友可以参考下
2024-12-12
Vue3中创建异步组件的流程步骤
在现代前端开发中,组件的重用性和异步加载是提升用户体验和优化性能的关键因素,在Vue 3中,创建异步组件变得更为便利,本文将探讨如何在Vue 3中使用setup语法糖来创建异步组件,感兴趣的小伙伴跟着小编一起来看看吧
2024-09-09
VueJS组件之间通过props交互及验证的方式
本篇文章主要介绍了VueJS组件之间通过props交互及验证的方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-09-09
vue如何解决axios请求前端跨域问题
vue项目中,前端使用axios与后台进行数据请求或者提交的时候,如果后台没有设置跨域,浏览器做数据请求的时候就会报错,这篇文章主要给大家介绍了关于vue如何解决axios请求前端跨域问题的相关资料,需要的朋友可以参考下
2021-10-10
vue中使用WX-JSSDK的两种方法(推荐)
这篇文章主要介绍了vue中使用WX-JSSDK的两种方法,每种方法通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-01-01
vue中选项卡点击切换且能滑动切换功能的实现代码
本文通过实例代码给大家介绍了vue中选项卡点击切换且能滑动切换功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下
2018-11-11
vue3实现长列表虚拟滚动的示例代码
本文主要介绍了vue3实现长列表虚拟滚动的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2025-01-01