From e7e44ac638195038347e0aca73d5192c8d6bd53a Mon Sep 17 00:00:00 2001
From: 刘嘉威 <daidaibg@163.com>
Date: 星期五, 14 十月 2022 17:54:14 +0800
Subject: [PATCH] feat: 增加缩放组件 集成tailwind.css

---
 README.md |  299 ++++++++++++++++++++++++++++++++++++++---------------------
 1 files changed, 193 insertions(+), 106 deletions(-)

diff --git a/README.md b/README.md
index eb858a8..8c017cc 100644
--- a/README.md
+++ b/README.md
@@ -1,126 +1,213 @@
-<div align='center'>
-<h1>Vite-Boot </h1>
-<img src='README.assets/logo.png' alt='Vite-Boot - Opinionated Vite Starter Template' width='344'/>
-</div>
 
-<p align='center'>
-Mocking up web app with <b>Vite-Boot </b><sup><em>(speed)</em></sup><br>
-</p>
-
-<div align='center'>
-<b>English</b> | <a href="README.zh-CN.md">绠�浣撲腑鏂�</a>
-</div>
-
-## Features
-
-- 鈿�  [Vue 3](https://github.com/vuejs/vue-next), [Vite 2](https://github.com/vitejs/vite), [pnpm](https://pnpm.js.org/) - born with fastness
-- 馃挭 [Typescript](https://www.typescriptlang.org/) - of course! necessary
-- 馃敟 Use the [new `<script setup>` syntax](https://github.com/vuejs/rfcs/pull/227)
-- 馃馃徎 [Reactivity Transform](https://vuejs.org/guide/extras/reactivity-transform.html) enabled
-- 馃摝 [Components auto importing](./src/components)
-- 馃摜 [APIs auto importing](https://github.com/antfu/unplugin-auto-import) - use Composition API and others directly
-- 馃挕 [Vue Router v4](https://router.vuejs.org/zh/) - The official router for Vue.js
-- 馃帹 [Tailwind CSS v3](https://tailwindcss.com/docs/configuration) - Rapidly build modern websites without ever leaving your HTML.
-- 馃帀 [NProgress](https://github.com/rstacruz/nprogress) - Page loading progress feedback
-- 馃崓 [State Management via Pinia](https://pinia.esm.dev/) - The Vue Store that you will enjoy using
-- 馃尲 [Daisy](https://daisyui.com/) - The free and open-source Tailwind CSS component library
-
-### First-party plugins needed for Tailwind UI:
-
-- [tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms)
-- [tailwindcss/typography](https://tailwindcss.com/docs/typography-plugin)
-- [tailwindcss/line-clamp](https://github.com/tailwindlabs/tailwindcss-line-clamp)
-- [tailwindcss/aspect-ratio](https://github.com/tailwindlabs/tailwindcss-aspect-ratio)
-
-### Coding Style
-
-- [@kirklin/eslint-config](https://github.com/kirklin/eslint-config)
-
-### Recommended IDE Setup
-
-- [VSCode](https://code.visualstudio.com/)
-- [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
-
-### Performance
-<img src='README.assets/ViteBoot-Lighthouse.png' alt='Vite-Boot Outstanding performance' width='1851'/>
+ ## 寮�鍙戜腑...鍙互鎻恜r瀹屽杽 锛屾鏋跺凡缁忔惌寤哄ソ
+## 寮�鍙戜腑...鍙互鎻恜r瀹屽杽 锛屾鏋跺凡缁忔惌寤哄ソ
+ ##  寮�鍙戜腑...鍙互鎻恜r瀹屽杽 锛屾鏋跺凡缁忔惌寤哄ソ
+## 寮�鍙戜腑...鍙互鎻恜r瀹屽杽 锛屾鏋跺凡缁忔惌寤哄ソ
+##  寮�鍙戜腑...鍙互鎻恜r瀹屽杽 锛屾鏋跺凡缁忔惌寤哄ソ
+## 寮�鍙戜腑...鍙互鎻恜r瀹屽杽 锛屾鏋跺凡缁忔惌寤哄ソ
+##  寮�鍙戜腑...鍙互鎻恜r瀹屽杽 锛屾鏋跺凡缁忔惌寤哄ソ
+##  寮�鍙戜腑...鍙互鎻恜r瀹屽杽 锛屾鏋跺凡缁忔惌寤哄ソ
+##  寮�鍙戜腑...鍙互鎻恜r瀹屽杽 锛屾鏋跺凡缁忔惌寤哄ソ
 
 
-## directory
 
+
+## 椤圭洰鎻忚堪
+
+
+
+[IofTV-Screen](https://gitee.com/daidaibg/IofTV-Screen/tree/main)Vue3+vite鐗堟湰锛屽姛鑳芥牱寮忛噰鐢ㄤ竴鏍�
+
+- 椤圭洰闇�瑕佸叏灞忓睍绀猴紙鎸� F11锛夈��
+
+- 椤圭洰閮ㄥ垎鍖哄煙浣跨敤浜嗗叏灞�娉ㄥ唽鏂瑰紡锛屽鍔犱簡鎵撳寘浣撶Н锛屽湪瀹為檯杩愮敤涓浣跨敤 **鎸夐渶寮曞叆**銆�
+
+- 椤圭洰鐜锛歏ite銆丒charts銆丯pm銆丯ode锛宎xios,mock銆�
+
+- 璇锋媺鍙� master 鍒嗘敮鐨勪唬鐮侊紝鍏朵綑鍒嗘敮鏄紑鍙戝垎鏀��
+
+- 鍦ㄩ」鐩畃ublic鐩綍涓嬪瓨鏀惧湴鍥炬暟鎹悎闆嗭紝鏍规嵁鍦板競缂栧瓨鏀俱��
+
+
+鍙嬫儏閾炬帴锛�
+
+1. [Vue 瀹樻柟鏂囨。](https://cn.vuejs.org/)
+3. [echarts 瀹炰緥](https://gitee.com/link?target=https%3A%2F%2Fecharts.apache.org%2Fexamples%2Fzh%2Findex.html)锛孾echarts API 鏂囨。](https://gitee.com/link?target=https%3A%2F%2Fecharts.apache.org%2Fzh%2Fapi.html%23echarts)
+4. [mock.js瀹樼綉](http://mockjs.com/examples.html)
+5. [axios瀹樼綉](https://axios-http.com/)
+
+**椤圭洰灞曠ず** 
+
+![椤圭洰灞曠ず](https://img-blog.csdnimg.cn/f0b09cd868ae462d80807270b49210bb.png)
+
+### 椤圭洰棰勮鍦板潃
+
+[https://www.daidaibg.com/bigscreen-vue3
+
+[](https://www.daidaibg.com/bigscreen)
+
+### 椤圭洰浠撳簱鍦板潃
+
+**github鍦板潃**
+
+[https://github.com/daidaibg/IofTV-Screen-Vue3](https://github.com/daidaibg/IofTV-Screen)
+
+**Gitee鍦板潃**
+
+[https://gitee.com/daidaibg/IofTV-Screen-Vue3](https://gitee.com/daidaibg/IofTV-Screen)
+
+### 閲囩敤鑷�傚簲缁勪欢鏂瑰紡锛�
+
+###  婊氬姩璁剧疆锛岃嚜閫傚簲璁剧疆 
+
+椤圭洰涓彲浠ヨ繘琛屾粴鍔ㄩ厤缃紝鍐呭鏄惁婊氬姩
+
+鐐瑰嚮鍙充笂瑙掕缃寜閽�
+![璁剧疆](https://img-blog.csdnimg.cn/436e28d054bd475d9edfd41471f88441.png)
+
+
+
+鍙互杩涜浠ヤ笅閰嶇疆锛屽彲浠ヨ嚜琛屼唬鐮佷腑杩涜淇敼鎴栧鍔犻厤缃�
+
+
+
+![鍦ㄨ繖閲屾彃鍏ュ浘鐗囨弿杩癩(https://img-blog.csdnimg.cn/564c304c4b2249b1a525558eeb986497.png)
+
+
+
+##  2銆佷富瑕佹枃浠朵粙缁�
+
+| 鏂囦欢              | 浣滅敤/鍔熻兘                                                    |
+| ----------------- | ------------------------------------------------------------ |
+| main.js           | 涓荤洰褰曟枃浠讹紝寮曞叆 Echart/DataV 绛夋枃浠�                         |
+| utils             | 宸ュ叿鍑芥暟涓� mixins 鍑芥暟绛�                                     |
+| views/ home.vue   | 椤圭洰涓荤粨鏋�                                                   |
+| views/鍏朵綑鏂囦欢    | 鐣岄潰鍚勪釜鍖哄煙缁勪欢锛堟寜鐓т綅缃潵鍛藉悕锛�                           |
+| assets            | 闈欐�佽祫婧愮洰褰曪紝鏀剧疆 logo 涓庤儗鏅浘鐗�                           |
+| assets / css/     | 閫氱敤 CSS 鏂囦欢锛屽叏灞�椤圭洰蹇嵎鏍峰紡璋冭妭                          |
+| components/echart | 鎵�鏈� echart 鍥捐〃锛堟寜鐓т綅缃潵鍛藉悕锛�                           |
+| common/...        | 鍏ㄥ眬灏佽鐨� ECharts 鍜� flexible 鎻掍欢浠g爜锛堥�傞厤灞忓箷灏哄锛屽彲瀹氬埗鍖栦慨鏀癸級 |
+| api/api.js        | 鎺ュ彛灏佽鏂囦欢                                                 |
+| mock              | 妯℃嫙鏁版嵁鎺ュ彛鍦板潃                                             |
+
+###  
+
+## 浣跨敤浠嬬粛
+
+### 瀹夎
+
+```npm
+npm install   
 ```
-# vite-boot
-鈹溾攢鈹� LICENSE
-鈹溾攢鈹� README.assets
-鈹�   鈹斺攢鈹� vite-vue-tailwind.png
-鈹溾攢鈹� README.md
-鈹溾攢鈹� README.zh-CN.md
-鈹溾攢鈹� index.html
-鈹溾攢鈹� node_modules
-鈹溾攢鈹� package.json
-鈹溾攢鈹� pnpm-lock.yaml
-鈹溾攢鈹� postcss.config.js        # tailwind configuration
-鈹溾攢鈹� public
-鈹�   鈹斺攢鈹� favicon.ico
-鈹溾攢鈹� src
-鈹�   鈹溾攢鈹� App.vue
-鈹�   鈹溾攢鈹� api                  # api interface
-鈹�   鈹溾攢鈹� assets               # static resource
-鈹�   鈹�   鈹斺攢鈹� logo.png
-鈹�   鈹溾攢鈹� components           # global component
-鈹�   鈹�   鈹斺攢鈹� Navbar.vue       # Navbar component
-鈹�   鈹溾攢鈹� env.d.ts
-鈹�   鈹溾攢鈹� main.ts
-鈹�   鈹溾攢鈹� router               # Vue router
-鈹�   鈹�   鈹斺攢鈹� index.ts
-鈹�   鈹溾攢鈹� settings.ts          # global configuration
-鈹�   鈹溾攢鈹� store                # Pinia store
-鈹�   鈹�   鈹溾攢鈹� counter.ts
-鈹�   鈹�   鈹斺攢鈹� index.ts
-鈹�   鈹溾攢鈹� styles               # global style
-鈹�   鈹�   鈹溾攢鈹� main.scss
-鈹�   鈹�   鈹溾攢鈹� nprogress.scss   # nprogress style
-鈹�   鈹�   鈹溾攢鈹� tailwind.css
-鈹�   鈹�   鈹斺攢鈹� variables.scss
-鈹�   鈹溾攢鈹� utils                # global public method
-鈹�   鈹�   鈹斺攢鈹� darkMode.ts
-鈹�   鈹斺攢鈹� views                # all pages
-鈹�       鈹斺攢鈹� Index.vue
-鈹溾攢鈹� tailwind.config.js       # tailwind configuration
-鈹溾攢鈹� tsconfig.json            # TS compilation configuration
-鈹斺攢鈹� vite.config.ts           # Vite configuration
+### 鍚姩
 
+```npm
+npm run dev
 ```
 
-## Try it now!
+### 鍙栨秷mock妯℃嫙鏁版嵁
 
-### GitHub Template
-
-[Create a repo from this template on GitHub](https://github.com/kirklin/vite-boot/generate).
-
-### Clone to local
-
-```bash
-npx degit kirklin/vite-boot my-vite-app
-cd my-vite-app
-pnpm i
+```javascript
+// src\main.ts鏂囦欢
+鎶婁笅闈袱琛屼唬鐮佹敞閲婃帀灏卞彲浠ヤ簡銆�
+import { mockXHR } from "@/mock/index";
+mockXHR()
 ```
 
-## Usage
+## 鑷�傚簲缂╂斁缁勪欢
 
-### Development
+### 娉ㄦ剰
 
-Just run and visit http://localhost:8888
+閲囩敤Scale鏂瑰紡锛屼細鑷姩缁欑粍浠剁埗鍏冪礌娣诲姞overflow:hidden 
 
-```bash
-pnpm run dev
+### 浣跨敤
+
+```vue
+<template>
+  <scale-screen width="1920" height="1080">
+    <div>
+   			content
+    </div>
+  </scale-screen>
+</template>
+
+<script>
+import ScaleScreen from 'scale-screen'
+
+export default {
+  name:'Demo',
+  components:{
+    VScaleScreen
+  }
+}
+</script>
+```
+### API
+| 灞炴��         | 璇存槑                                                         | 绫诲瀷                             | 榛樿鍊� |
+| ------------ | ------------------------------------------------------------ | -------------------------------- | ------ |
+| selfAdaption | 鏄惁杩涜鑷�傚簲                                               | Boolean                          | true   |
+| width        | 澶у睆瀹藉害                                                     | `Number` or `String`             | 1920   |
+| height       | 澶у睆楂樺害                                                     | `Number` or `String`             | 1080   |
+| autoScale    | 鑷�傚簲閰嶇疆锛岄厤缃负boolean绫诲瀷鏃讹紝涓哄惎鍔ㄦ垨鑰呭叧闂嚜閫傚簲锛岄厤缃负瀵硅薄鏃讹紝鑻涓簍rue锛寈杞翠骇鐢熻竟璺濓紝y涓簍rue鏃讹紝y杞翠骇鐢熻竟璺濓紝鍚敤fullScreen鏃舵閰嶇疆澶辨晥 | Boolean or {x:boolean,y:boolean} | true   |
+| delay        | 绐楀彛鍙樺寲闃叉姈寤惰繜鏃堕棿                                         | Number                           | 500    |
+| fullScreen   | 鍏ㄥ睆鑷�傚簲锛屽惎鐢ㄦ閰嶇疆椤规椂浼氬瓨鍦ㄦ媺浼告晥鏋滐紝鍚屾椂autoScale澶辨晥锛岄潪蹇呰鎯呭喌涓嬩笉寤鸿寮�鍚� | Boolean                          | false  |
+| boxStyle     | 淇敼瀹瑰櫒鏍峰紡锛屽灞呬腑灞曠ず鏃朵晶杈硅儗鏅壊锛岀鍚圴ue鍙屽悜缁戝畾style鏍囧噯鏍煎紡 | Object                           | null   |
+| wrapperStyle | 淇敼鑷�傚簲鍖哄煙鏍峰紡锛岀鍚圴ue鍙屽悜缁戝畾style鏍囧噯鏍煎紡             | Object                           | null   |
+
+## 鍏敤缁勪欢
+
+灏佽浜嗛櫎闈㈡潯澶栦釜鍒敤鍒扮殑缁勪欢
+
+
+###  澶栬竟妗�
+
+鍥犱负鎴戠殑椤圭洰澶栬竟妗嗗嚑涔庝竴鏍凤紝杩樻湁title,鎵�浠ュ皝瑁呬簡姝ょ粍浠躲��
+
+鏍规嵁鑷繁闇�姹傛洿鏀癸紝鏇存崲澶栬竟妗嗭紙src\components\item-wrap\item-wrap.vue锛変笅鏇存崲銆�
+
+```vue
+<ItemWrap
+    title="鎴戞槸title"
+    >
+       <div>鎴戞槸璋侊紵</div>
+</ItemWrap>
 ```
 
-### Build
+| 鍙傛暟  | 鎻忚堪 | 榛樿鍊� |  绫诲瀷  | 鍙�夊�� |
+| :---: | :--: | :----: | :----: | :----: |
+| title | 鏍囧ご |   -    | string |   -    |
 
-To build the App, run
+## 涓棿鍦板浘
 
-```bash
-pnpm run build
+### 鍗楁捣鏄鹃殣鎺у埗
+
+ 鏍规嵁闇�姹傛潵锛�**淇敼姝ゅ�艰鍒锋柊椤甸潰**
+
+```indexs/center-map.vue``` 鏂囦欢涓璥``isSouthChinaSea```鍙橀噺 榛樿涓嶆樉绀哄崡娴�(false),涓篳``true```鐨勬椂鍊欐樉绀哄崡娴�
+
+```
+isSouthChinaSea:false,//榛樿涓嶆樉绀哄崡娴凤紝鏀逛负true鍙樉绀哄崡娴�
 ```
 
-And you will see the generated file in `dist` that ready to be served.
+## 鍏ㄥ眬鍙傛暟
+
+### filter
+
+鐩戞祴鏁版嵁椤圭粺涓�杩囨护锛屼繚鐣欎袱浣嶅皬鏁般��
+
+```vue
+{{10.23123|montionFilter }}
+```
+
+##  澶у睆浜ゆ祦鍙嶉锛堥潰鏉$殑缇わ級
+
+### 澶у睆QQ缇�
+
+QQ缇ゅ彿锛�713105837
+
+### 澶у睆浜岀淮鐮�
+
+QQ缇や簩缁寸爜锛�
+
+![杈撳叆鍥剧墖璇存槑](https://gitee.com/MTrun/big-screen-vue-datav/raw/master/public/image.png)
+

--
Gitblit v1.8.0