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(),這種方式現在應用廣泛。


分享到:


相關文章: