Vue中修改Mint UI的Toast默认样式问题 - 字体大小调整

1- 给Toast添加classNameToast({message: '请输入正确的手机号码',duration: 800,className: 'noticeError'});2- 添加样式。注意：取消scope，设为全局样式；添加!importantstylus ，这里就没有加花括号、冒号和分号了。不要在意这些细节.noticeError// font-si...

Amelia Pond

4341人浏览 · 2019-07-11 15:40:58

Amelia Pond · 2019-07-11 15:40:58 发布

1- 给Toast添加className

Toast({
	message: '请输入正确的手机号码',
	duration: 800,
	className: 'noticeError'
});

2- 添加样式。注意：`取消scope`，设为`全局样式`；添加`!important`

stylus ，这里就没有加花括号、冒号和分号了。不要在意这些细节

.noticeError
	// font-size 28px !important
	transform scale(2) !important
	margin-left -.6rem !important

这里，我的本意是放大Toast中的字号。然鹅，设置的font-size并不能生效。
所以转换思路，改为放大整个Toast模块。放大之后，Toast的位置就跑偏了。所以通过marginl-left进行微调。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^