1.设置基础数据 2.获取当前宽高和缩放比例并进行设置 3.页面内容定义 自适应一直就是都是前端开发的大难题,特别是现在越来越多的项目喜欢大屏展示,今天公司给我的项目便是一个可视化大屏的项目,而且宽高只告诉了大概是4000*2000,然后使用的Vue3进行开发,网上找了一下几乎都是Vue2的解决过程,所以小小的记录一下...
vue3 大屏可视化 屏幕自适应(保持设计尺寸比例) 组件代码 <template><slot></slot></template> import{ref,onMounted,defineProps}from'vue'constwidth=ref(null),//设计宽度height=ref(null),//设计高度scale=ref(null)constprops=defineProps({width:{type:String,default:'1920px',},height:{type:String,de...
全面ESM+Vue3+Vite+Bun+TypeScript编写的一款可视化大屏(自适应屏幕). Contribute to pure-admin/vue-pure-visual development by creating an account on GitHub.
🔥响应式可视化数据大屏 1、亲测自适应15.6寸至70寸大屏且占满整个屏幕。 2、自动适应支持电脑不同分辨率,例如:1920x1080,2k,1680x1050等。 3、采用Vue2.0、ElementUI、Axios、ECharts、DataV和Flex布局等技术进行构建。 4、根据适应浏览器大小而进行自适应,自适应Echarts图表,字体和图标。展开收起 ...
import{ref,onMounted,defineProps}from'vue'constwidth=ref(null),//设计宽度height=ref(null),//设计高度scale=ref(null)constprops=defineProps({width:{type:String,default:'1920px',},height:{type:String,default:'1080px',},})constinit=()=>{setScale()window.addEventListener('resize',setScale)}con...
1、亲测自适应15.6寸至70寸大屏自适应且自适应占满整个屏幕。 2、自动适应支持电脑不同分辨率,自适应占满整个屏幕。例如:1920x1080,2k,1680x1050等。 3、采用Vue2.0、ElementUI、Axios、ECharts、DataV和Flex布局等技术进行构建。 4、根据适应浏览器大小而进行自适应,自适应Echarts图表,字体和图标。
🔥响应式可视化数据大屏 1、亲测自适应15.6寸至70寸大屏且占满整个屏幕。 2、自动适应支持电脑不同分辨率,例如:1920x1080,2k,1680x1050等。 3、采用Vue2.0、ElementUI、Axios、ECharts、DataV和Flex布局等技术进行构建。 4、根据适应浏览器大小而进行自适应,自适应Echarts图表,字体和图标。展开收起 ...
vue-pure-visual 是一款开源免费且开箱即用的可视化大屏模版。完全采用 ECMAScript 模块(ESM)规范来编写和组织代码,使用了最新的 Vue3、 Vite、Bun、ECharts、TypeScript、Tailwindcss 等主流技术开发研发理念创新中求稳定,技术中见未来维护者xiaoxian521许可证...