blackteay/ray-template
1
0
Fork 0
mirror of https://github.com/XiaoDaiGua-Ray/ray-template.git synced 2025-04-05 19:42:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

新增 RayIcon 组件

Browse Source
This commit is contained in:
chuan_wuhao 2022-10-27 23:27:48 +08:00
parent e2c892449c
commit db1806e4eb
14 changed files with 136 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

1
.gitignore vendored
View File

@ -1 +1,2 @@
node_modules node_modules
dist

30
dist/production-dist/assets/index.80919b2b.js vendored
View File

File diff suppressed because one or more lines are too long

BIN
dist/production-dist/assets/index.80919b2b.js.gz vendored
View File

Binary file not shown.

1
dist/production-dist/assets/index.ed63c42d.css vendored
View File

@ -1 +0,0 @@
.fade-enter-active,.fade-leave-active{-webkit-transition:opacity .28s var(--r-bezier);-o-transition:opacity .28s var(--r-bezier);transition:opacity .28s var(--r-bezier)}.fade-enter-from,.fade-leave-active{opacity:0;-webkit-transition:all .5s var(--r-bezier);-o-transition:all .5s var(--r-bezier);transition:all .5s var(--r-bezier)}.fade-transform-leave-active,.fade-transform-enter-active{-webkit-transition:all .5s var(--r-bezier);-o-transition:all .5s var(--r-bezier);transition:all .5s var(--r-bezier)}.fade-transform-enter-from{opacity:0;-webkit-transform:translateX(-.8rem);-ms-transform:translateX(-.8rem);transform:translate(-.8rem)}.fade-transform-leave-to{opacity:0;-webkit-transform:translateX(.8rem);-ms-transform:translateX(.8rem);transform:translate(.8rem)}body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}ul,ol,li{list-style:none}fieldset,img{border:0;vertical-align:middle}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

BIN
dist/production-dist/assets/index.ed63c42d.css.gz vendored
View File

Binary file not shown.

4
dist/production-dist/index.html vendored
View File

@ -5,8 +5,8 @@
<link rel="icon" type="image/svg+xml" href="/ray.svg" /> <link rel="icon" type="image/svg+xml" href="/ray.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ray template</title> <title>ray template</title>
<script type="module" crossorigin src="/assets/index.80919b2b.js"></script> <script type="module" crossorigin src="/assets/index.72461785.js"></script>
<link rel="stylesheet" href="/assets/index.ed63c42d.css"> <link rel="stylesheet" href="/assets/index.a8a09008.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

1
package.json
View File

@ -39,6 +39,7 @@
"vite": "^3.0.0", "vite": "^3.0.0",
"vite-plugin-compression": "^0.5.1", "vite-plugin-compression": "^0.5.1",
"vite-plugin-inspect": "^0.6.0", "vite-plugin-inspect": "^0.6.0",
"vite-plugin-svg-icons": "^2.0.1",
"vite-svg-loader": "^3.4.0", "vite-svg-loader": "^3.4.0",
"vue-tsc": "^0.38.4" "vue-tsc": "^0.38.4"
} }

6
src/App.tsx
View File

@ -3,6 +3,7 @@ import RayTransitionComponent from '@/components/RayTransitionComponent/index.vu
import DraggableComponent from '@/components/DraggableComponent/index.vue' import DraggableComponent from '@/components/DraggableComponent/index.vue'
import RayScrollReveal from '@/components/RayScrollReveal/index' import RayScrollReveal from '@/components/RayScrollReveal/index'
import R from '@/icons/ray.svg' // 使用 vite-svg-loader 作为 svg 使用插件, 故而不需要使用 RayIcon 作为组件引入 import R from '@/icons/ray.svg' // 使用 vite-svg-loader 作为 svg 使用插件, 故而不需要使用 RayIcon 作为组件引入
import RayIcon from '@/components/RayIcon/index'
const App = defineComponent({ const App = defineComponent({
name: 'App', name: 'App',
@ -24,7 +25,10 @@ const App = defineComponent({
class="app-wrapper" class="app-wrapper"
style={`height: ${this.windowHeight}px;font-size: 22px; color: #FDD192;padding: 20px;`} style={`height: ${this.windowHeight}px;font-size: 22px; color: #FDD192;padding: 20px;`}
> >
<R style="width: 24px; height: 24px;" /> 组件形式使用 svg: <R style="width: 24px; height: 24px;" />
<br />
icon componet 形式使用 svg: <RayIcon name="ray" size="24" />
<br />
hello! Welcome to this template! hello! Welcome to this template!
<h1> <h1>
当前鼠标位置: x: {this.x}, y: {this.y} {this.ray('Test')} 当前鼠标位置: x: {this.x}, y: {this.y} {this.ray('Test')}

58
src/components/RayIcon/index.tsx Normal file
View File

@ -0,0 +1,58 @@
import { defineComponent } from 'vue'
const RayIcon = defineComponent({
name: 'RayIcon',
props: {
color: {
type: String,
default: '',
},
prefix: {
type: String,
default: 'icon',
},
name: {
type: String,
required: true,
},
size: {
type: [Number, String],
default: 14,
},
width: {
type: [Number, String],
},
height: {
type: [Number, String],
},
customClassName: {
type: String,
default: '',
},
},
setup(props) {
const modelColor = computed(() => props.color)
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
return {
modelColor,
symbolId,
}
},
render() {
return (
<svg
ariaHidden={true}
class={`ray-icon ${this.customClassName}`}
style={{
width: `${this.width ? this.width : this.size}px`,
height: `${this.height ? this.height : this.size}px`,
}}
>
<use xlink:href={this.symbolId} fill={this.modelColor} />
</svg>
)
},
})
export default RayIcon

1
src/main.ts
View File

@ -3,6 +3,7 @@ import { createApp } from 'vue'
import '@/styles/base.scss' import '@/styles/base.scss'
// import 'amfe-flexible' // 如果为移动端项目, 解开该注释即可 // import 'amfe-flexible' // 如果为移动端项目, 解开该注释即可
import 'virtual:svg-icons-register' // `vite-plugin-svg-icons` 脚本, 如果不使用此插件注释即可
import App from './App' import App from './App'

19
vite-plugin/index.ts
View File

@ -4,11 +4,30 @@ import viteCompression from 'vite-plugin-compression' // 压缩打包
import AutoImport from 'unplugin-auto-import/vite' // 自动导入 import AutoImport from 'unplugin-auto-import/vite' // 自动导入
import ViteComponents from 'unplugin-vue-components/vite' // 自动按需导入 import ViteComponents from 'unplugin-vue-components/vite' // 自动按需导入
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite' // i18n import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite' // i18n
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' // `svg icon`
import type { ComponentResolver, TypeImport } from 'unplugin-vue-components' import type { ComponentResolver, TypeImport } from 'unplugin-vue-components'
import type { VitePluginCompression } from './type' import type { VitePluginCompression } from './type'
import type { ImportsMap, PresetName } from 'unplugin-auto-import/types' import type { ImportsMap, PresetName } from 'unplugin-auto-import/types'
import type { ServerOptions, BuildOptions } from 'vite' import type { ServerOptions, BuildOptions } from 'vite'
import type { ViteSvgIconsPlugin } from 'vite-plugin-svg-icons'
/**
*
* @param options `svg icon` 自定义配置
*
* 使用 `svg` 作为图标
*/
export const useSVGIcon = (options?: ViteSvgIconsPlugin) => {
const defaultOptions = {
iconDirs: [path.resolve(process.cwd(), 'src/icons')],
symbolId: 'icon-[dir]-[name]',
inject: 'body-last',
customDomId: '__svg__icons__dom__',
}
return createSvgIconsPlugin(Object.assign(defaultOptions, options))
}
/** /**
* *

2
vite.config.ts
View File

@ -11,6 +11,7 @@ import {
useViteCompression, useViteCompression,
useVueI18nPlugin, useVueI18nPlugin,
useHTMLTitlePlugin, useHTMLTitlePlugin,
useSVGIcon,
} from './vite-plugin/index' } from './vite-plugin/index'
import vueJsx from '@vitejs/plugin-vue-jsx' import vueJsx from '@vitejs/plugin-vue-jsx'
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite' import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
@ -38,6 +39,7 @@ export default defineConfig(async ({ mode }) => {
viteSvgLoader({ viteSvgLoader({
defaultImport: 'component', // 默认以 `componetn` 形式导入 `svg` defaultImport: 'component', // 默认以 `componetn` 形式导入 `svg`
}), }),
useSVGIcon(),
], ],
optimizeDeps: { optimizeDeps: {
include: ['vue', 'vue-router', 'pinia', 'vue-i18n', '@vueuse/core'], include: ['vue', 'vue-router', 'pinia', 'vue-i18n', '@vueuse/core'],

50
yarn.lock
View File

@ -443,11 +443,23 @@
resolved "https://registry.yarnpkg.com/@types/crypto-js/-/crypto-js-4.1.1.tgz#602859584cecc91894eb23a4892f38cfa927890d" resolved "https://registry.yarnpkg.com/@types/crypto-js/-/crypto-js-4.1.1.tgz#602859584cecc91894eb23a4892f38cfa927890d"
integrity sha512-BG7fQKZ689HIoc5h+6D2Dgq1fABRa0RbBWKBd9SP/MVRVXROflpm5fhwyATX5duFmbStzyzyycPB8qUYKDH3NA== integrity sha512-BG7fQKZ689HIoc5h+6D2Dgq1fABRa0RbBWKBd9SP/MVRVXROflpm5fhwyATX5duFmbStzyzyycPB8qUYKDH3NA==
"@types/node@*":
version "18.11.7"
resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.7.tgz#8ccef136f240770c1379d50100796a6952f01f94"
integrity sha512-LhFTglglr63mNXUSRYD8A+ZAIu5sFqNJ4Y2fPuY7UlrySJH87rRRlhtVmMHplmfk5WkoJGmDjE9oiTfyX94CpQ==
"@types/scrollreveal@^0.0.8": "@types/scrollreveal@^0.0.8":
version "0.0.8" version "0.0.8"
resolved "https://registry.yarnpkg.com/@types/scrollreveal/-/scrollreveal-0.0.8.tgz#d0313ac67b57a32b3beb224e20af63ab13cd2696" resolved "https://registry.yarnpkg.com/@types/scrollreveal/-/scrollreveal-0.0.8.tgz#d0313ac67b57a32b3beb224e20af63ab13cd2696"
integrity sha512-HwD3vSmxjEozI4+uHY7pPxB47gppsv0racBHZreEQFC6K1kBKaIUkCTwUMH6gGFEDmLrgOckfGsTvR/n2yyV6g== integrity sha512-HwD3vSmxjEozI4+uHY7pPxB47gppsv0racBHZreEQFC6K1kBKaIUkCTwUMH6gGFEDmLrgOckfGsTvR/n2yyV6g==
"@types/svgo@^2.6.1":
version "2.6.4"
resolved "https://registry.yarnpkg.com/@types/svgo/-/svgo-2.6.4.tgz#b7298fc1dd687539fd63fc818b00146d96e68836"
integrity sha512-l4cmyPEckf8moNYHdJ+4wkHvFxjyW6ulm9l4YGaOxeyBWPhBOT0gvni1InpFPdzx1dKf/2s62qGITwxNWnPQng==
dependencies:
"@types/node" "*"
"@types/web-bluetooth@^0.0.15": "@types/web-bluetooth@^0.0.15":
version "0.0.15" version "0.0.15"
resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.15.tgz#d60330046a6ed8a13b4a53df3813c44942ebdf72" resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.15.tgz#d60330046a6ed8a13b4a53df3813c44942ebdf72"
@ -978,6 +990,14 @@ copy-descriptor@^0.1.0:
resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d" resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
integrity sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw== integrity sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==
cors@^2.8.5:
version "2.8.5"
resolved "https://registry.yarnpkg.com/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29"
integrity sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==
dependencies:
object-assign "^4"
vary "^1"
crypto-js@^4.1.1: crypto-js@^4.1.1:
version "4.1.1" version "4.1.1"
resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.1.1.tgz#9e485bcf03521041bd85844786b83fb7619736cf" resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.1.1.tgz#9e485bcf03521041bd85844786b83fb7619736cf"
@ -1321,6 +1341,11 @@ estree-walker@^2.0.1, estree-walker@^2.0.2:
resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac" resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w== integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
etag@^1.8.1:
version "1.8.1"
resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
expand-brackets@^2.1.4: expand-brackets@^2.1.4:
version "2.1.4" version "2.1.4"
resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622" resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
@ -2006,7 +2031,7 @@ nth-check@^2.0.1:
dependencies: dependencies:
boolbase "^1.0.0" boolbase "^1.0.0"
object-assign@^4.1.0: object-assign@^4, object-assign@^4.1.0:
version "4.1.1" version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg== integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
@ -2478,7 +2503,7 @@ svg-baker-runtime@^1.4.7:
mitt "1.1.2" mitt "1.1.2"
svg-baker "^1.7.0" svg-baker "^1.7.0"
svg-baker@^1.5.0, svg-baker@^1.7.0: svg-baker@1.7.0, svg-baker@^1.5.0, svg-baker@^1.7.0:
version "1.7.0" version "1.7.0"
resolved "https://registry.yarnpkg.com/svg-baker/-/svg-baker-1.7.0.tgz#8367f78d875550c52fe4756f7303d5c5d7c2e9a7" resolved "https://registry.yarnpkg.com/svg-baker/-/svg-baker-1.7.0.tgz#8367f78d875550c52fe4756f7303d5c5d7c2e9a7"
integrity sha512-nibslMbkXOIkqKVrfcncwha45f97fGuAOn1G99YwnwTj8kF9YiM6XexPcUso97NxOm6GsP0SIvYVIosBis1xLg== integrity sha512-nibslMbkXOIkqKVrfcncwha45f97fGuAOn1G99YwnwTj8kF9YiM6XexPcUso97NxOm6GsP0SIvYVIosBis1xLg==
@ -2516,7 +2541,7 @@ svg-tags@^1.0.0:
resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764" resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
integrity sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA== integrity sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==
svgo@^2.7.0: svgo@^2.7.0, svgo@^2.8.0:
version "2.8.0" version "2.8.0"
resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24" resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24"
integrity sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg== integrity sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==
@ -2706,6 +2731,11 @@ util-deprecate@^1.0.1:
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw== integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
vary@^1:
version "1.1.2"
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
vite-plugin-compression@^0.5.1: vite-plugin-compression@^0.5.1:
version "0.5.1" version "0.5.1"
resolved "https://registry.yarnpkg.com/vite-plugin-compression/-/vite-plugin-compression-0.5.1.tgz#a75b0d8f48357ebb377b65016da9f20885ef39b6" resolved "https://registry.yarnpkg.com/vite-plugin-compression/-/vite-plugin-compression-0.5.1.tgz#a75b0d8f48357ebb377b65016da9f20885ef39b6"
@ -2726,6 +2756,20 @@ vite-plugin-inspect@^0.6.0:
sirv "^2.0.2" sirv "^2.0.2"
ufo "^0.8.5" ufo "^0.8.5"
vite-plugin-svg-icons@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/vite-plugin-svg-icons/-/vite-plugin-svg-icons-2.0.1.tgz#7269a0962593509f371b9e2bb344d469db2c6df9"
integrity sha512-6ktD+DhV6Rz3VtedYvBKKVA2eXF+sAQVaKkKLDSqGUfnhqXl3bj5PPkVTl3VexfTuZy66PmINi8Q6eFnVfRUmA==
dependencies:
"@types/svgo" "^2.6.1"
cors "^2.8.5"
debug "^4.3.3"
etag "^1.8.1"
fs-extra "^10.0.0"
pathe "^0.2.0"
svg-baker "1.7.0"
svgo "^2.8.0"
vite-svg-loader@^3.4.0: vite-svg-loader@^3.4.0:
version "3.4.0" version "3.4.0"
resolved "https://registry.yarnpkg.com/vite-svg-loader/-/vite-svg-loader-3.4.0.tgz#4638827fe86b85ecfcea1ad61dd972c351d5befd" resolved "https://registry.yarnpkg.com/vite-svg-loader/-/vite-svg-loader-3.4.0.tgz#4638827fe86b85ecfcea1ad61dd972c351d5befd"