vue大屏自适应终极解决方案 |
您所在的位置:网站首页 › vue画板字体自适应 › vue大屏自适应终极解决方案 |
v-scale-screen
v-scale-screen是一个大屏自适应组件,在实际业务中,我们常用图表来做数据统计,数据展示,数据可视化等比较直观的方式来达到一目了然的数据查看,但在大屏开发过程中,常会因为适配不同屏幕而感到困扰,下面我们使用v-scale-screen来解决一下这个难题 效果废话不多说,先上图 可以看到,我们通过等比例缩放的方式,实现了自适应,同时我们也为此发布了vue组件v-scale-screen 组件v-scale-screen使用css属性transform实现缩放效果,进行等比例计算,达到等比例缩放的效果,同时我们也支持铺满全屏,宽度等比,高度等比,等自适应方案 使用 安装依赖注:vue2请使用[email protected]版本,vue3请使用[email protected]版本 npm install v-scale-screen -save # or yarn add v-scale-screen 在main.js中引入vue2中使用插件导入,vue3以组件导入 vue2 // main.js import VScaleScreen from 'v-scale-screen' Vue.use(VScaleScreen) vue3 .... .... .... .... .... import VScaleScreen from 'v-scale-screen' export default { components:{ VScaleScreen } } 在组件中使用 .... .... .... .... .... 版本更新在 v-scale-screen^2.2.0 以上的版本中,我们同时支持 vue2.7 和 vue3 版本,如果您是 vue2.6 及以下的版本,请使用 v-scale-screen^1.x 演示地址如果您在使用过程中有什么疑问,请参考演示代码进行使用 Vue2演示地址 Vue3演示地址 链接 v-scale-screen r-scale-screen v-form-antd注:如有朋友喜欢一起做开源的,可以联系我 +v:yuanfang0353,拉你进群 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |