环境,环境变量,自定义组件,demo
parent
c263790378
commit
5f2a5bb71f
@ -0,0 +1,41 @@
|
||||
/**
|
||||
* 将环境变量去掉VITE_APP_后,转换成小驼峰命名规则的属性的对象
|
||||
* export: env,useEnv
|
||||
* env: 转换后的环境变量
|
||||
* useEnv: vue插件,本质将转换后环境变量绑定:app.config.globalProperties.$env
|
||||
* @Author : J.L.Zhou
|
||||
* @EMail : 12020042@qq.com
|
||||
* @Tel : 151 1104 7708
|
||||
* @CreateTime : 2023-05-16 10:44:48
|
||||
* @LastEditos : J.L.Zhou
|
||||
* @LastEditTime : 2023-05-16 10:44:48
|
||||
* @Version : 1.0
|
||||
* Copyright 2023 jlzhou.top Inc. All rights reserved.
|
||||
* Warning: this content is only for internal circulation of the company.
|
||||
* It is forbidden to divulge it or use it for other commercial purposes.
|
||||
*/
|
||||
|
||||
console.debug("原始的环境变量",import.meta.env);
|
||||
const env = {};
|
||||
let name,value;
|
||||
for(name in import.meta.env){
|
||||
if(!name.startsWith("VITE_APP_")){
|
||||
continue;
|
||||
}
|
||||
value = import.meta.env[name];
|
||||
name = name.substr(9).toLowerCase().split(/_+/);
|
||||
for (var i = 1; i < name.length; i++) {
|
||||
name[i]=name[i].substr(0,1).toUpperCase()+name[i].substr(1);
|
||||
}
|
||||
name = name.join("");
|
||||
env[name] = value;
|
||||
}
|
||||
console.debug('转换后的环境变量',env);
|
||||
|
||||
const useEnv = {
|
||||
install(app){
|
||||
app.config.globalProperties.$env=env;
|
||||
}
|
||||
}
|
||||
export {env,useEnv};
|
||||
|
||||
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<view class="w-body">
|
||||
<view>
|
||||
<text class="title">js中获取环境变量:{{ title }}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text class="title">模板中直接使用环境变量:{{ $env.title }}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text class="env">{{ $env }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref,getCurrentInstance} from 'vue'
|
||||
const {proxy} = getCurrentInstance();
|
||||
const title = ref(proxy.$env.title);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.w-body {
|
||||
padding: var(--window-top) var(--window-right) var(--window-bottom) var(--window-right);
|
||||
}
|
||||
</style>
|
||||
@ -1,48 +1,63 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<image class="logo" src="/static/logo.png"></image>
|
||||
<view class="text-area">
|
||||
<text class="title">{{ title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="w-body">
|
||||
<view class="content">
|
||||
<view class="title">{{$env.title}}</view>
|
||||
<navigator url="/pages/demo/demo1" class="demo">demo</navigator>
|
||||
</view>
|
||||
<w-loader title="" opacity="1" height="70vh"></w-loader>
|
||||
<image mode="aspectFit" lazy-load class="wave" src="/static/wave.svg" />
|
||||
<w-footer custom-style=""></w-footer>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'Hello',
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {},
|
||||
}
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
<style lang="scss" scoped>
|
||||
.w-body {
|
||||
position: relative;
|
||||
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
margin-top: 200rpx;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
.content {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
line-height: 2;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 50vh;
|
||||
z-index: 1;
|
||||
color: $uni-text-color-inverse;
|
||||
font-weight: bold;
|
||||
|
||||
.text-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.title {
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: .5rem;
|
||||
text-shadow: .2rem .2rem 0 $uni-text-color;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
}
|
||||
</style>
|
||||
.demo {
|
||||
background-color: #0002;
|
||||
width: 6rem;
|
||||
margin: 1rem auto 0;
|
||||
font-size: 1rem;
|
||||
border-radius: 5rem;
|
||||
cursor: pointer;
|
||||
transition: all .5s;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.wave {
|
||||
background-color: $w-color-1;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
aspect-ratio: 4/1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<view class="w-body">
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onLoad,onShow } from '@dcloudio/uni-app'
|
||||
import { ref } from 'vue'
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.w-body{
|
||||
--navbar-height:44px
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 18 KiB |
@ -0,0 +1,17 @@
|
||||
<svg class="editorial" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 24 150 28" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<path id="gentle-wave" d="M-160
|
||||
44c30 0
|
||||
58-18 88-18s
|
||||
58 18 88 18
|
||||
58-18 88-18
|
||||
58 18 88 18
|
||||
v44h-352z"></path>
|
||||
</defs>
|
||||
<g class="parallax">
|
||||
<use xlink:href="#gentle-wave" x="50" y="6" fill="#ffffff"></use>
|
||||
<use xlink:href="#gentle-wave" x="20" y="3" fill="#ffffff33"></use>
|
||||
<use xlink:href="#gentle-wave" x="80" y="0" fill="#ffffff66"></use>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 639 B |
@ -0,0 +1 @@
|
||||
# 自定义组件库
|
||||
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<view class="w-footer-root" :style="customStyle">
|
||||
{{$env.copy}}
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import wx from '../mixins/mp-weixin.js'
|
||||
export default {
|
||||
mixins:[wx]
|
||||
}
|
||||
</script>
|
||||
<script setup>
|
||||
|
||||
// useMixin(myMixin);
|
||||
const props = defineProps({
|
||||
customStyle:{
|
||||
type:[String,Object],
|
||||
default:""
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.w-footer-root {
|
||||
position: fixed;
|
||||
bottom:var(--window-bottom);
|
||||
left:0;
|
||||
font-size: .75rem;
|
||||
color:$uni-text-color;
|
||||
text-shadow: .1rem .1rem 0 $uni-text-color-inverse;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
padding: .3rem 0;
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<view class="loader-root" :style="{'--opacity':props.opacity,'--height':props.height}">
|
||||
<view class="loader">
|
||||
<view class="face">
|
||||
<view class="circle"></view>
|
||||
</view>
|
||||
<view class="face">
|
||||
<view class="circle"></view>
|
||||
</view>
|
||||
<view class="logo"><img class="img" src="/static/logo.png" loading="lazy"></view>
|
||||
</view>
|
||||
<view v-if="props.title" class="loader-title">{{props.title}}</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import wx from '../mixins/mp-weixin.js'
|
||||
export default {
|
||||
mixins:[wx]
|
||||
}
|
||||
</script>
|
||||
<script setup>
|
||||
import {ref} from 'vue'
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
title:{
|
||||
type:String,
|
||||
default:"加载中..."
|
||||
},
|
||||
opacity: {
|
||||
type:Number,
|
||||
default:1
|
||||
},
|
||||
height: {
|
||||
type:String,
|
||||
default:"100vh"
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.loader {
|
||||
width: 20em;
|
||||
height: 20em;
|
||||
font-size: 1.5vmin;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.loader .face {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
border-style: solid;
|
||||
animation: animate 3s linear infinite;
|
||||
}
|
||||
|
||||
.loader .face:nth-child(1) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #0d9be0;
|
||||
border-color: currentColor transparent transparent currentColor;
|
||||
border-width: 0.2em 0.2em 0em 0em;
|
||||
--deg: -45deg;
|
||||
animation-direction: normal;
|
||||
}
|
||||
|
||||
.loader .face:nth-child(2) {
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
color: #7bc528;
|
||||
border-color: currentColor currentColor transparent transparent;
|
||||
border-width: 0.2em 0em 0em 0.2em;
|
||||
--deg: -135deg;
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
.loader .face .circle {
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 0.1em;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background-color: #0000;
|
||||
transform: rotate(var(--deg));
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
.loader .face .circle::before {
|
||||
position: absolute;
|
||||
top: -.5em;
|
||||
right: -0.45em;
|
||||
content: '';
|
||||
width: .6em;
|
||||
height: .6em;
|
||||
background-color: currentColor;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 .5em .15em currentColor;
|
||||
}
|
||||
|
||||
@keyframes animate {
|
||||
to {
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
.loader-root {
|
||||
width: 100%;
|
||||
height: var(--height,100vh);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
opacity:1;
|
||||
transition: opacity 5s,display 5s / 5s;
|
||||
|
||||
&::before {
|
||||
background-image: radial-gradient(closest-side,$w-color-2,$w-color-1);
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: var(--opacity,1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
.loader-title {
|
||||
margin: 4vmin 0 10vmin;
|
||||
font-size: 3vmin;
|
||||
color:#ccc;
|
||||
text-shadow: .2vmin .2vmin 0 $w-color-1;
|
||||
letter-spacing: .3vmin;
|
||||
position: relative;
|
||||
}
|
||||
.loader .logo .img {
|
||||
width: 17vmin;
|
||||
height: 17vmin;
|
||||
}
|
||||
.loader .logo {
|
||||
background-image: linear-gradient(to bottom,#FFF,#aaa);
|
||||
padding: 3vmin ;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 .5vmin #fff inset, 0 0 2vmin #0006;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue