vue Toast字体过小没有边距
小六: 人气:0vue 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 }) } }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容