vue项目 |
您所在的位置：网站首页 › jq设置图片路径 › vue项目 |
vue项目
|
之前写过一篇文章echarts——实现面积图+柱状图+折线图等——基础积累 echarts——实现面积图+柱状图+折线图等——基础积累:http://t.csdn.cn/GkQbK 里面有关于页面自适应的功能： 如果是vue版本，则需要用下面的方式来处理 1.安装jq插件npm install jquery --save 2.vue.config.js中加入以下内容——chainWebpack在chainWebpack中加入下面的内容 chainWebpack:(config)=>{ config.plugin('provide').use(webpack.ProvidePlugin, [ { $: 'jquery', jquery: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', }, ]); } 3.页面中引入——import $ from 'jquery'; 4.封装的自适应方法如下： screenSize(editorDom) { let screenWidth = $(window).width(); let screenHeight = $(window).height(); let defWidth = 1920; let defHeight = 940; let xScale = screenWidth / defWidth; let yScale = screenHeight / defHeight; $(editorDom).css('transform', 'scale(' + xScale + ', ' + yScale + ')'); $(window).resize(() => { let screenWidth = $(window).width(); let screenHeight = $(window).height(); xScale = screenWidth / defWidth; yScale = screenHeight / defHeight; $(editorDom).css('transform', 'scale(' + xScale + ', ' + yScale + ')'); }); }, 5.自适应方法的调用 mounted() { this.screenSize('.pageBody'); }, 6.html代码 //页面内容完成！！！ |
这个是jq版本【本文地址】
今日新闻 |
推荐新闻 |