vue移動端專案vant元件庫之image

2021-10-19 17:46:28 字數 1458 閱讀 2154

main.js

import  from 'vant'

;vue.

use(lazyload)

;

頁面路由元件

"pd30"

>

<

/h3>

style=

"width: 160px; height: 110px"

src=

""/>

/h3>

width=

"100"

height=

"100"

src=

""/>

/h3>

width=

"100"

height=

"100"

fit=

"contain"

src=

""/>

/h3>

<

!-- 通過 round 屬性可以設定變圓,注意當寬高不相等且 fit 為 contain 或 scale-down 時,將無法填充乙個完整的圓形 --

>

round

width=

"100"

height=

"100"

src=

""/>

round

width=

"100"

height=

"100"

fit=

"contain"

src=

""/>

/h3>

<

!-- 設定 lazy-load 屬性來開啟懶載入,需要搭配 lazyload 元件使用。可以自定義loading --

>

width=

"100"

height=

"100"

lazy-load

src=

"">

"spinner" size=

"20"

/>

<

/template>

<

/van-image>

/h3>

"" class=

"vanimage"

>

'error' class=

"error"

>

<

!-- 使用solt的話 需要自行控制樣式 --

>

載入失敗

<

/div>

<

/van-image>

<

/div>

<

/template>

import from "vant"

;export default,}

;<

/script>

Vant 移動端Vue元件庫的使用

1 通過 npm 安裝 2 npm i vant s3 通過 yarn 安裝 4 yarn add vant1 方式一 按需引入 安裝外掛程式 npm i babel plugin import d 先在.babelrc 中新增配置 在babel.config.js檔案裡寫進去下面這些 module...

移動端Vant元件庫REM適配

在頁面布局之前,對rem進行配置,以適配移動端特點。官方參考 vant文件 快速上手 高階用法 rem適配 postcss pxtorem 是一款 postcss 外掛程式,用於將px單位轉化為 rem。使用步驟 安裝 npm i d postcss pxtorem 配置 postcss.confi...

vue 移動端適配vant

下面我們分別將這兩個工具配置到專案中完成 rem 適配。一 使用 lib flexible 動態設定 rem 基準值 html 標籤的字型大小 1 安裝 npm i amfe flexible2 然後在 main.js 中載入執行該模組 import amfe flexible 二 使用 postc...