b-s-adaption 是一个开源的大屏显示插件。支持原生Dom,vue2(mixins),vue3(hooks)
无需繁琐设置大屏内容 无需考虑比率 直接引入插件即可
按需使用,引入后插件会自动计算比率 使用css缩放方式完成,类似于echarts等的可视化数据再也不需要看官方api适应各种屏幕了
仅仅需要传入设计图纸宽高,插件会自动计算
使用npm 安装后 只需引入后传入DOM即可 没有任何繁琐操作
vue2 使用 {useDrawToVue2} from '@yangtaowei/b-s-adaption'
vue3 使用 {useDrawToVue3} from '@yangtaowei/b-s-adaption'
支持esm 和 commonjs 分别在/dist/下
- 安装依赖
npm i @yangtaowei/b-s-adaption --save- 页面内引用
vue2,挂载mixins,传入vueRefName即可
<template>
<div ref='drawDom'>...</div>
</template>
<script>
import {useDrawToVue2} from '@yangtaowei/b-s-adaption/dist/index-esm.js
export default{
mixins:[useDrawToVue2(drawDom(String),options)]
data(){
return{...}
}
}
</script>
vue3,使用hooks,传入组件Ref即可
<template>
<div ref='drawDom'></div>
</template>
<script setup>
import { onMounted, onBeforeUnmount } from 'vue'
import { useDrawToVue3 } from '@yangtaowei/b-s-adaption/dist/index.esm.js'
import { ref } from 'vue'
let drawDom = ref(null)
const { calcRate, resize } = useDrawToVue3(drawDom, { baseWidth: 1920, baseHeight: 1080 })
onMounted(() => {
calcRate()
window.addEventListener('resize', resize, false)
})
onBeforeUnmount(() => window.removeEventListener('resize', resize, false))
</script>
html普通Dom,传入元素id即可
<html>
<body>
<div id='DomIdName'>
...
</div>
<script type='module'>
import {useDrawToDom} from '@yangtaowei/b-s-adaption/dist/index-esm.js'
useDrawToDom(DomIdName(String))
</script>
</body>
</html>
本地开发推荐使用Chrome 80+ 浏览器
支持现代浏览器, 支持 IE