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://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) + +### 閲囩敤鑷�傚簲缁勪欢鏂瑰紡锛� + +### 婊氬姩璁剧疆锛岃嚜閫傚簲璁剧疆 + +椤圭洰涓彲浠ヨ繘琛屾粴鍔ㄩ厤缃紝鍐呭鏄惁婊氬姩 + +鐐瑰嚮鍙充笂瑙掕缃寜閽� + + + + +鍙互杩涜浠ヤ笅閰嶇疆锛屽彲浠ヨ嚜琛屼唬鐮佷腑杩涜淇敼鎴栧鍔犻厤缃� + + + +. - -### 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缇や簩缁寸爜锛� + + + -- Gitblit v1.8.0