From 796f1fce7951ca1dd4ba5785f25d86bf5ca9dcd5 Mon Sep 17 00:00:00 2001
From: 刘嘉威 <daidaibg@163.com>
Date: 星期四, 27 十月 2022 17:23:27 +0800
Subject: [PATCH] feat:增加无缝轮播组件 增加左下 右下组件
---
README.md | 408 +++++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 302 insertions(+), 106 deletions(-)
diff --git a/README.md b/README.md
index eb858a8..43c5e4b 100644
--- a/README.md
+++ b/README.md
@@ -1,126 +1,322 @@
-<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瀹屽杽 锛屽樊鏃犵紳杞挱
+##
-## directory
+## 椤圭洰鎻忚堪
+[IofTV-Screen](https://gitee.com/daidaibg/IofTV-Screen/tree/main) 鐨� Vue3+vite鐗堟湰锛�
+
+### 涓巚ue2鐗堟湰瀵规瘮
+
+#### 鍔熻兘
+
+鍔熻兘閲囩敤涓巚ue2鐗堟湰鐩稿悓鍔熻兘
+
+鍥犱负瑕佷笌vue2鐗堟湰鐩稿悓鍔熻兘锛屾湁浜涚粍浠朵笉鍏煎vue3鐗堟湰锛屼緥濡傦細鑳跺泭鏌卞浘锛屾暟瀛楁粴鍔ㄧ殕閲嶆柊灏佽涓虹粍浠讹紝鏁翠綋鏉ヨ锛屽姛鑳藉睘瀹炵浉鍚屻�傛牴鎹嚜宸遍渶姹傞�夋嫨[vue2](#vue2鐗堟湰鍦板潃)鐗堟湰涓嶽vue3](#鏈」鐩湴鍧� vue3+vite)鐗堟湰
+
+#### 鏍峰紡
+
+杩涜寰皟锛屾暣浣撶湅鐫�鏇村姞缇庤
+
+
+
+- 椤圭洰闇�瑕佸叏灞忓睍绀猴紙鎸� F11锛夈��
+
+- 椤圭洰閮ㄥ垎鍖哄煙浣跨敤浜嗗叏灞�娉ㄥ唽鏂瑰紡锛屽鍔犱簡鎵撳寘浣撶Н锛屽湪瀹為檯杩愮敤涓浣跨敤 **鎸夐渶寮曞叆**銆�
+
+- 椤圭洰鐜锛歏ite銆丒charts銆丯pm銆丯ode锛宎xios,mock,vue3銆�
+
+- 璇锋媺鍙� 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://www.daidaibg.com/bigscreen-vue3](https://www.daidaibg.com/bigscreen-vue3)
+
+### 椤圭洰浠撳簱鍦板潃
+
+#### 鏈」鐩湴鍧� vue3+vite
+
+**github鍦板潃**
+
+[https://github.com/daidaibg/IofTV-Screen-Vue3](https://github.com/daidaibg/IofTV-Screen-Vue3)
+
+**Gitee鍦板潃**
+
+[https://gitee.com/daidaibg/IofTV-Screen-Vue3](https://gitee.com/daidaibg/IofTV-Screen-Vue3)
+
+#### vue2鐗堟湰鍦板潃
+
+**github鍦板潃**
+
+[https://github.com/daidaibg/IofTV-Screen](https://github.com/daidaibg/IofTV-Screen)
+
+**Gitee鍦板潃**
+
+[https://gitee.com/daidaibg/IofTV-Screen](https://gitee.com/daidaibg/IofTV-Screen)
+
+
+
+### 閲囩敤鑷�傚簲缁勪欢鏂瑰紡锛�
+
+### 婊氬姩璁剧疆锛岃嚜閫傚簲璁剧疆
+
+椤圭洰涓彲浠ヨ繘琛屾粴鍔ㄩ厤缃紝鍐呭鏄惁婊氬姩
+
+鐐瑰嚮鍙充笂瑙掕缃寜閽�
+
+
+
+
+鍙互杩涜浠ヤ笅閰嶇疆锛屽彲浠ヨ嚜琛屼唬鐮佷腑杩涜淇敼鎴栧鍔犻厤缃�
+
+
+
+.
-
-### 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
+灏佽浜嗛櫎闈㈡潯澶栦釜鍒敤鍒扮殑缁勪欢
-```bash
-pnpm run dev
+### 鑷�傚簲缂╂斁缁勪欢
+
+#### 娉ㄦ剰
+
+閲囩敤Scale鏂瑰紡锛屼細鑷姩缁欑粍浠剁埗鍏冪礌娣诲姞overflow:hidden
+
+#### 浣跨敤
+
+```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>
```
-### Build
+#### API
-To build the App, run
+| 灞炴�� | 璇存槑 | 绫诲瀷 | 榛樿鍊� |
+| ------------ | ------------------------------------------------------------ | -------------------------------- | ------ |
+| 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 |
-```bash
-pnpm run build
+
+### 澶栬竟妗�
+
+鍥犱负鎴戠殑椤圭洰澶栬竟妗嗗嚑涔庝竴鏍凤紝杩樻湁title,鎵�浠ュ皝瑁呬簡姝ょ粍浠躲��
+
+鏍规嵁鑷繁闇�姹傛洿鏀癸紝鏇存崲澶栬竟妗嗭紙src\components\item-wrap\item-wrap.vue锛変笅鏇存崲銆�
+
+```vue
+<ItemWrap
+ title="鎴戞槸title"
+ >
+ <div>鎴戞槸璋侊紵</div>
+</ItemWrap>
```
-And you will see the generated file in `dist` that ready to be served.
+| 鍙傛暟 | 鎻忚堪 | 榛樿鍊� | 绫诲瀷 | 鍙�夊�� |
+| :---: | :--: | :----: | :----: | :----: |
+| title | 鏍囧ご | - | string | - |
+
+### CountUp 鏁板瓧婊氬姩
+
+浠ヤ笅灞炴�у悓 coutup.js 閰嶇疆椤癸紙same as countup.js properties锛�
+
+#### Props
+
+| Name | Type | Default | Description |
+| -------- | ---------------- | ------- | ------------------------------------------------------------ |
+| endVal | Number \| String | - | 缁撴潫鍊� |
+| startVal | Number \| String | 0 | 璧峰鍊� |
+| duration | Number | 2.5 | 鍔ㄧ敾鏃堕暱锛屽崟浣嶏細绉� |
+| options | Object | - | [countUp.js](https://github.com/inorganik/countUp.js) options 閰嶇疆椤� |
+
+浠ヤ笅涓虹粍浠剁壒鏈夊睘鎬э紙extension properties锛�
+
+| Name | Type | Default | Description |
+| -------- | ----------------- | ------- | ----------------------------- |
+| autoplay | Boolean | true | 鏄惁鑷姩璁℃暟 |
+| loop | Boolean \| Number | false | 寰幆娆℃暟锛屾湁闄愭鏁� / 鏃犻檺寰幆 |
+| delay | Number | 0 | loop 寰幆鐨勯棿闅旀椂闂达紝鍗曚綅锛氱 |
+
+#### 鎻掓Ы锛坰lots锛�
+
+| Name | Description |
+| ------ | ----------- |
+| prefix | 鍓嶇紑 |
+| suffix | 鍚庣紑 |
+
+#### 浜嬩欢锛圗vents锛�
+
+| Name | Description | return |
+| --------- | -------------------------- | ------------ |
+| @init | CountUp 瀹炰緥鍒濆鍖栧畬鎴愯Е鍙� | CountUp 瀹炰緥 |
+| @finished | 璁℃暟缁撴潫鏃惰Е鍙� | - |
+
+#### countup.js 閰嶇疆椤硅鏄�
+```ts
+interface CountUpOptions {
+ startVal?: number // number to start at (0) 寮�濮嬫暟鍊硷紝榛樿 0
+ decimalPlaces?: number // number of decimal places (0) 灏忔暟鐐� 浣嶆暟
+ duration?: number // animation duration in seconds (2) 鍔ㄧ敾鏃堕暱
+ useGrouping?: boolean // example: 1,000 vs 1000 (true) 鏄惁浣跨敤鍗冨垎浣�
+ useEasing?: boolean // ease animation (true) 鏄惁寮�鍚姩鐢昏繃娓★紝榛樿鍔ㄧ敾鍑芥暟涓篹aseOutExpo
+ smartEasingThreshold?: number // smooth easing for large numbers above this if useEasing (999)
+ smartEasingAmount?: number // amount to be eased for numbers above threshold (333)
+ separator?: string // grouping separator (',') 鍗冨垎浣嶅垎闅旂
+ decimal?: string // decimal ('.') 灏忔暟鐐瑰垎闅旂
+ // easingFn: easing function for animation (easeOutExpo) 鍔ㄧ敾鍑芥暟
+ easingFn?: (t: number, b: number, c: number, d: number) => number
+ formattingFn?: (n: number) => string // this function formats result 鏍煎紡鍖栫粨鏋�
+ prefix?: string // text prepended to result 鏁板�煎墠缂�
+ suffix?: string // text appended to result 鏁板�煎悗缂�
+ numerals?: string[] // numeral glyph substitution 鏁板瓧绗﹀彿鏇挎崲 0 - 9锛屼緥濡傛浛鎹负 [a,b,c,d,e,f,g,h,i,j]
+ enableScrollSpy?: boolean // start animation when target is in view 鍦ㄥ彲瑙嗚寖鍥村唴鎵嶅紑濮嬪姩鐢�
+ scrollSpyDelay?: number // delay (ms) after target comes into view 鐩爣杩涘叆鍙鑼冨洿鍐呭悗鐨勫欢杩熸椂闂�(姣)
+}
+```
+
+### 鑳跺泭鏌卞浘
+
+#### Props
+
+| 灞炴�� | 璇存槑 | 绫诲瀷 | 鍙�夊�� | 榛樿鍊� |
+| :----: | :------: | :-------------: | :-----------------------: | :-----: |
+| data | 鏌辨暟鎹� | `Array<Object>` | [data灞炴�(#data灞炴��) | `[]` |
+| config | 鍩虹閰嶇疆 | Object | [config灞炴�(#config灞炴��) | `false` |
+
+#### config灞炴��
+
+| 灞炴�� | 璇存槑 | 绫诲瀷 | 鍙�夊�� | 榛樿鍊� |
+| :-------: | :------: | :-------------: | :----: | :-----: |
+| unit | 鍗曚綅 | `String` | --- | `''` |
+| colors | 鐜鑹� | `Array<String>` | [1] | [2] |
+| showValue | 鏄剧ず鏁板�� | `Boolean` | --- | `false` |
+
+#### 娉ㄩ噴config娉ㄩ噴
+
+[1] 棰滆壊鏀寔`hex|rgb|rgba|棰滆壊鍏抽敭瀛梎绛夊洓绉嶇被鍨嬨��
+
+[2] 榛樿閰嶈壊涓篳['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']`銆�
+
+#### data灞炴��
+
+| 灞炴�� | 璇存槑 | 绫诲瀷 | 鍙�夊�� | 榛樿鍊� |
+| :---: | :------: | :------: | :----: | :----: |
+| name | 鏌卞悕绉� | `String` | --- | --- |
+| value | 鏌卞搴斿�� | `Number` | --- | --- |
+
+## 涓棿鍦板浘
+
+### 鍗楁捣鏄鹃殣鎺у埗
+
+ 鏍规嵁闇�姹傛潵锛�**淇敼姝ゅ�艰鍒锋柊椤甸潰**
+
+```indexs/center-map.vue``` 鏂囦欢涓璥``isSouthChinaSea```鍙橀噺 榛樿涓嶆樉绀哄崡娴�(false),涓篳``true```鐨勬椂鍊欐樉绀哄崡娴�
+
+```
+isSouthChinaSea:false,//榛樿涓嶆樉绀哄崡娴凤紝鏀逛负true鍙樉绀哄崡娴�
+```
+
+## 鍏ㄥ眬鍙傛暟
+
+### filter
+
+鐩戞祴鏁版嵁椤圭粺涓�杩囨护锛屼繚鐣欎袱浣嶅皬鏁般��
+
+```vue
+{{10.23123|montionFilter }}
+```
+
+## 澶у睆浜ゆ祦鍙嶉锛堥潰鏉＄殑缇わ級
+
+### 澶у睆QQ缇�
+
+QQ缇ゅ彿锛�713105837
+
+### 澶у睆浜岀淮鐮�
+
+QQ缇や簩缁寸爜锛�
+
+
+
--
Gitblit v1.8.0