HTML页面使用vant控件,如何优雅的使用Vant组件库

安装Vant

npm i vant -S

引入Vant的第一种方法:导入所有组件(不推荐)

在src/main.js进行全局引入。

import Vant from 'vant';

import 'vant/lib/index.css';

Vue.use(Vant);

引入Vant的第二种方法:使用 babel-plugin-import (推荐)

它会在编译过程中将 import 的写法自动转换为按需引入的方式

# 安装 babel-plugin-import 插件

npm i babel-plugin-import -D

在在 babel.config.js 中配置plugins(插件)

module.exports = {

plugins: [

['import', {

libraryName: 'vant',

libraryDirectory: 'es',

style: true,

}, 'vant'],

],

};

在main.js里面引入

import { Button } from 'vant';

Vue.use(Button);

移动端屏幕适配

方法一

//可以理解为320/16 = htmlWidth/设置根元素字体大小

//手机屏幕的宽度

let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;

//html的Dom元素

let htmlDom = document.getElementsByTagName('html')[0];

//设置根元素字体大小

htmlDom.style.fontSize= htmlWidth/20 + 'px';

方法二

!function(n){

var e=n.document,

t=e.documentElement,

i=750,

d=i/100,

o="orientationchange"in n?"orientationchange":"resize",

a=function(){

var n=t.clientWidth||320;n>750&&(n=750);

t.style.fontSize=n/d+"px"

};

e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))

}(window);

//防止用户自己缩放页面大小

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值