福州网站建设求职简历,定制彩票网站开发,重庆建设工程信息网打不开咋回事,网络营销策划书结构v-scale-screenv-scale-screen是一个大屏自适应组件#xff0c;在实际业务中#xff0c;我们常用图表来做数据统计#xff0c;数据展示#xff0c;数据可视化等比较直观的方式来达到一目了然的数据查看#xff0c;但在大屏开发过程中#xff0c;常会因为适配不同屏幕而感…v-scale-screenv-scale-screen是一个大屏自适应组件在实际业务中我们常用图表来做数据统计数据展示数据可视化等比较直观的方式来达到一目了然的数据查看但在大屏开发过程中常会因为适配不同屏幕而感到困扰下面我们使用v-scale-screen来解决一下这个难题。
效果
废话不多说先上图 可以看到我们通过等比例缩放的方式实现了自适应同时我们也为此发布了vue组件v-scale-screen
组件
v-scale-screen使用css属性transform实现缩放效果进行等比例计算达到等比例缩放的效果同时我们也支持铺满全屏宽度等比高度等比等自适应方案
使用
安装依赖 注vue2请使用v-scale-screen1.0.0版本vue3请使用v-scale-screen2.0.0版本 npm install v-scale-screen -save
# or
yarn add v-scale-screen2. 在main.js中引入 vue2中使用插件导入vue3以组件导入 vue2
// main.js
import VScaleScreen from v-scale-screen
Vue.use(VScaleScreen)vue3
v-scale-screen width1920 height1080divv-chart..../v-chartv-chart..../v-chartv-chart..../v-chartv-chart..../v-chartv-chart..../v-chart/div
/v-scale-screen
script
import VScaleScreen from v-scale-screen
export default {components:{VScaleScreen}
}
/script 3. 在组件中使用
v-scale-screen width1920 height1080divv-chart..../v-chartv-chart..../v-chartv-chart..../v-chartv-chart..../v-chartv-chart..../v-chart/div
/v-scale-screen
