alfred-skyblue / v-scale-screen Goto Github PK

View Code? Open in Web Editor NEW

931.0 7.0 99.0 122.55 MB

Vue large screen adaptive component vue大屏自适应组件

License: MIT License

TypeScript 92.02% Vue 3.36% HTML 4.61%

vue echarts screen vue3 typescript css3 scale

v-scale-screen's Introduction

🤺 About Me

Vue & VueUse team member

👋 Hi, I'm 丶远方, an ordinary frontend programmer who enjoys exploring various exciting things, sharing knowledge, and engaging in discussions.
Every bug is an opportunity for you to become a better developer. Don't be afraid of making mistakes; instead, learn from them and extract valuable lessons.

🤾‍♂️ My Open Source Projects

vue-draggable-plus - A draggable component compatible with both Vue 2 and Vue 3. It supports features such as drag-and-drop sorting, copying, deleting, adding, moving, animations, and event handling.
v-scale-screen - A responsive solution for large screens compatible with Vue 2 and Vue 3. It offers customization options for scaling ratio, scaling center, scaling animations, animation duration, and animation curves.

🛠 Technology Stack

☎️ Contact Me

Email
VX: yuanfang0353 (备注GitHub)

🏆 Github Status

v-scale-screen's People

Contributors

Stargazers

Watchers

Forkers

jimdev5277 szchenrong sanrixue xiyanglove miazzy bowe9527 supertigery pandaqihappy moyandev powave daidaibg monsterdove owen800q lk15964 axl234 arkbreeze cgb-vue xiaowen9527 15803458384 baymintwo qwe104 xiqiuqiu gitlapple wujingquan poor-bird xiang0308 yyyyh 957525929 xingwei528 haogram 1519059197 xuanyi-1 han-jun donghuzi1 haoyuedada jiang263 yg015 zhaoyuanmeng kukupigs jackson-zl twoke945 llxsimple ivigne siakam niebiguang sanplee superfoam zhdlxy yanbowe rebornjiang zhangyifan0016 vgri-z yanhaijun89 avengit zhangqh22 jwdiao isrun bluesyoung-web peijunpeng166 chenlaoda andychenan zhougangnb mianmalife yunxingluaaron lizhiwei99 lemonwong xiaolingis xu-aurora likakaa warjudge laogong5i0-2 xcom1057136457 benjaminccg gyg15534771322 zb666-ux csdjl88 szwjbczq wdnmd-afk fsskay curryz miyaliunian byronogis instanceofs eiis jiraiyachen alreadycat fairyworld xz9688 shushi1010 doit008 jack-7788 pengge easonfang bkvito githublmy caihuattkl 481617494

v-scale-screen's Issues

效果难以接受啊，弃坑了

<script setup lang="ts">
import { availableParallelism } from 'os';
import VScaleScreen from '../package/component'
</script>

<template>
  <VScaleScreen id="vsalescreen" style="background-color: transparent;">
    <div class="left"></div>
    <div class="right"></div>
    <!-- <img src="./assets/img.png" alt="" /> -->
  </VScaleScreen>
</template>

<style>
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: transparent;
  overflow: hidden;
}
#vsalescreen{
  background-color: transparent;
}

.left {
      width: 25%;
      height: 100%;
      background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0));
      float: left;
    }

    .right {
      width: 25%;
      height: 100vh;
      background: linear-gradient(to left, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0));
      float: right;
    }

</style>

我做的大屏是3d 可视化平台的那种我要他垂直铺满高度，水平两边靠边，结果随便改动下容器，两边留白

描述

你好，我测试时候发现，当初始化加载得时候必然出现地图变形得情况，画面其它元素都正常显示；只有当窗口尺寸变化时（比如按F11全屏）画面就正常了；我自己觉得是在init的时候会变形，而在update的时候地图显示就能正常。想请问下这个情况有可能问题出在哪里？

环境

地图组件使用antvL7
V-scale-screen使用的是VUE2
页面初始尺寸是1920*1080

期望

实际

高德地图maker点mouseover和mouseout事件无法触发

在25601440分辨率无法触发，在19801080正常，麻烦问下这个怎么回事

使用视口宽高可能不会满足需求

比如说我有顶部导航栏，或者侧边导航栏，大屏只在内容区展示，这时候计算的宽高可能会忽略了导航栏的宽度。能否加多一个extendWidth或extendHeight用于开发者追加宽高，并入计算

麻烦大佬帮忙看看，el-dialog没有收到scale属性的影响，还是正常缩放，配置信息如下
"devDependencies": {
"less": "^4.1.3",
"v-scale-screen": "1.0.2",
"vite": "2.9.15",
"vite-plugin-vue2": "^1.9.3"
},
"dependencies": {
"@riophae/vue-treeselect": "^0.4.0",
"axios": "^0.27.2",
"cad-project": "^1.2.7",
"core-js": "3.23.4",
"echarts": "^4.8.0",
"element-ui": "^2.15.6",
"less-loader": "7.3.0",
"moment": "^2.29.4",
"vue": "2.6.10",
"vue-router": "^3.2.0",
"vue-template-compiler": "2.6.10"
}