Vue+ElementUI之开发中的三个小技巧

技巧一:vue文件中加载背景图片。在vue文件中,如果你将加载背景图片的语句直接用CSS写在代码中,背景图片是显示不出来的,如下:

<code>
/<code>

需这样写:

<code>
/<code>

然后在return中初始化urlBackImg人值:

<code>export default {
\t\tdata() {
\t\t\treturn {
\t\t\t\turlBackImg: "url(" + require('../assets/bg1.jpg') + ")"
\t\t\t}
\t\t}
}/<code>

技巧二:如何修改el-form中的label标签样式。有些时候你需要修改label的样式,但如果你是像下面这样定义label标签的,那么你无论怎么修改样式,都会发现没效果,如下:

<code><el-form-item>/<code>

需要这样写,才可任意定义label的样式,然后你可以在css中任意定义想要的样式:

<code><el-form-item>
姓名
/<el-form-item>/<code>

技巧三:如何刷新验证码。目前的验证码基本都是图片格式的,通过如下方法可任意刷新图片:

<code>src='/api/qcode?v=' + Math.random()/<code>

也就是在验证码接口服务请求中加入版本:?v=Math.random(),这种方式现在应用广泛。


分享到:


相關文章: