@yangtaowei/b-s-adaption
Version:
Automatic adjustment of large screen display
99 lines (74 loc) • 2.21 kB
Markdown
<div align="center">
<h1>自适应大屏插件</h1>
</div>
## 简介
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/下
## 安装使用
- 安装依赖
```bash
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
---------------------------