<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


---------------------------

