update 组件
parent
fe7085da07
commit
bfdde738d0
@ -1,5 +1,5 @@
|
||||
VITE_BASE_API='/api'
|
||||
VITE_APP_NAME='测试数据展示大屏'
|
||||
VITE_APP_NAME='智慧能源综合管控平台'
|
||||
VITE_APP_CONTEXT_PATH="/bi/"
|
||||
VITE_DEFAULT_USER="admin"
|
||||
VITE_DEFAULT_PASSWORD="Vy6uPKcsHe3GupRpXZA8tzV9/EDbzkJ8wl6TS0q88POF1jQbm1NLMxU9dYzxva0tWQx7JKOGNOkaAOdFqay5t/aXx2qVaIGCBTb9vuKnJbtxMRZZso5IgEpHbR945Vk65BQyrOopDdNdPEm8nqJGcG6hJUiZbaRcgDCcAC7Q9nY="
|
||||
VITE_DEFAULT_USER="bi"
|
||||
VITE_DEFAULT_PASSWORD="w8N9m8qQ+Z+skmrpPDl11TyJGTLX9hdwiA8DaeGxrS5peXwzcIwLiUUyzGJKUy/+BGZaSF40Y7fzUpjkAHvhwF9a7uZyzZlOhO+XSUUTgyj7bFNQCaYXFqb+ZAFpBWczopm95i/krFDfgiS4AmRv2Bb0wkegV5z071EjiCfOuPA="
|
||||
@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div class="w-code">
|
||||
<w-icon icon-class="clipboard" @click="copy" />
|
||||
<pre><code ref="codeRef" :class="props.language?['language-'+props.language]:[]"><slot></slot></code></pre>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import hljs from 'highlight.js';
|
||||
import 'highlight.js/styles/github.css';
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
import { onMounted } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
language: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const codeRef = ref(null);
|
||||
|
||||
const copy = () => {
|
||||
navigator.clipboard.writeText(codeRef.value.textContent).then(() => {
|
||||
ElMessage.success('复制成功');
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
hljs.highlightElement(codeRef.value);
|
||||
})
|
||||
|
||||
const getCode = () => {
|
||||
return codeRef.value.textContent;
|
||||
}
|
||||
|
||||
const setCode = (code) => {
|
||||
if(props.language){
|
||||
codeRef.value.innerHTML = hljs.highlight(code, { language: props.language }).value;
|
||||
}else{
|
||||
codeRef.value.innerHTML = hljs.highlightAuto(code).value;
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
copy,
|
||||
getCode,
|
||||
setCode,
|
||||
})
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.w-code {
|
||||
|
||||
background-color: var(--w-bg-dark);
|
||||
margin: 1em;
|
||||
padding: 0em;
|
||||
border: solid 1px var(--w-bg-dark-2);
|
||||
border-radius: .5em;
|
||||
position: relative;
|
||||
|
||||
&>:first-child {
|
||||
position: absolute;
|
||||
right: .5em;
|
||||
top: .5em;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: all .3s;
|
||||
|
||||
}
|
||||
|
||||
&:hover>:first-child {
|
||||
opacity: 0.7;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: .85;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hljs {
|
||||
background: #0000 !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.dark {
|
||||
pre code.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 1em
|
||||
}
|
||||
|
||||
code.hljs {
|
||||
padding: 3px 5px
|
||||
}
|
||||
|
||||
/*!
|
||||
Theme: GitHub Dark
|
||||
Description: Dark theme as seen on github.com
|
||||
Author: github.com
|
||||
Maintainer: @Hirse
|
||||
Updated: 2021-05-15
|
||||
|
||||
Outdated base version: https://github.com/primer/github-syntax-dark
|
||||
Current colors taken from GitHub's CSS
|
||||
*/
|
||||
.hljs {
|
||||
color: #c9d1d9;
|
||||
background: #0d1117
|
||||
}
|
||||
|
||||
.hljs-doctag,
|
||||
.hljs-keyword,
|
||||
.hljs-meta .hljs-keyword,
|
||||
.hljs-template-tag,
|
||||
.hljs-template-variable,
|
||||
.hljs-type,
|
||||
.hljs-variable.language_ {
|
||||
/* prettylights-syntax-keyword */
|
||||
color: #ff7b72
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-title.class_,
|
||||
.hljs-title.class_.inherited__,
|
||||
.hljs-title.function_ {
|
||||
/* prettylights-syntax-entity */
|
||||
color: #d2a8ff
|
||||
}
|
||||
|
||||
.hljs-attr,
|
||||
.hljs-attribute,
|
||||
.hljs-literal,
|
||||
.hljs-meta,
|
||||
.hljs-number,
|
||||
.hljs-operator,
|
||||
.hljs-variable,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-id {
|
||||
/* prettylights-syntax-constant */
|
||||
color: #79c0ff
|
||||
}
|
||||
|
||||
.hljs-regexp,
|
||||
.hljs-string,
|
||||
.hljs-meta .hljs-string {
|
||||
/* prettylights-syntax-string */
|
||||
color: #a5d6ff
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-symbol {
|
||||
/* prettylights-syntax-variable */
|
||||
color: #ffa657
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-code,
|
||||
.hljs-formula {
|
||||
/* prettylights-syntax-comment */
|
||||
color: #8b949e
|
||||
}
|
||||
|
||||
.hljs-name,
|
||||
.hljs-quote,
|
||||
.hljs-selector-tag,
|
||||
.hljs-selector-pseudo {
|
||||
/* prettylights-syntax-entity-tag */
|
||||
color: #7ee787
|
||||
}
|
||||
|
||||
.hljs-subst {
|
||||
/* prettylights-syntax-storage-modifier-import */
|
||||
color: #c9d1d9
|
||||
}
|
||||
|
||||
.hljs-section {
|
||||
/* prettylights-syntax-markup-heading */
|
||||
color: #1f6feb;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.hljs-bullet {
|
||||
/* prettylights-syntax-markup-list */
|
||||
color: #f2cc60
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
/* prettylights-syntax-markup-italic */
|
||||
color: #c9d1d9;
|
||||
font-style: italic
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
/* prettylights-syntax-markup-bold */
|
||||
color: #c9d1d9;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
/* prettylights-syntax-markup-inserted */
|
||||
color: #aff5b4;
|
||||
background-color: #033a16
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
/* prettylights-syntax-markup-deleted */
|
||||
color: #ffdcd7;
|
||||
background-color: #67060c
|
||||
}
|
||||
|
||||
.hljs-char.escape_,
|
||||
.hljs-link,
|
||||
.hljs-params,
|
||||
.hljs-property,
|
||||
.hljs-punctuation,
|
||||
.hljs-tag {
|
||||
/* purposely ignored */
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="WEffectLight" :class="{ 'am': props.am }">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { IdGenerator } from "@/util";
|
||||
|
||||
//唯一标识
|
||||
const uid = IdGenerator.next();
|
||||
|
||||
const props = defineProps({
|
||||
am: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@layer {
|
||||
.WEffectLight {
|
||||
--key: brightness(110%);
|
||||
--time: 1.7s;
|
||||
animation: am-WEffectLight var(--time) infinite alternate-reverse;
|
||||
animation-play-state: paused;
|
||||
|
||||
&.am {
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes am-WEffectLight {
|
||||
0% {
|
||||
|
||||
// filter: brightness(100%);
|
||||
}
|
||||
|
||||
40% {
|
||||
filter: var(--key);
|
||||
}
|
||||
|
||||
80% {
|
||||
|
||||
// filter: brightness(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div class="WEffectNoise" ref="WEffectNoiseRef" :class="{ 'am': props.am }" :style="{ filter: 'url(#noiseFilter' + uid + ')' }">
|
||||
<svg style="display: none;">
|
||||
<defs>
|
||||
<filter :id="'noiseFilter' + uid" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox"
|
||||
primitiveUnits="userSpaceOnUse">
|
||||
<feTurbulence type="turbulence" :baseFrequency="`0 ${base}`" numOctaves="2" seed="2" stitchTiles="stitch" x="0%"
|
||||
y="0%" width="100%" height="100%" result="turbulence" />
|
||||
<feDisplacementMap in="SourceGraphic" in2="turbulence" scale="10" xChannelSelector="R" yChannelSelector="B"
|
||||
x="0%" y="0%" width="100%" height="100%" result="displacementMap" />
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, useTemplateRef } from 'vue'
|
||||
import { IdGenerator } from "@/util";
|
||||
|
||||
const props = defineProps({
|
||||
am: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
})
|
||||
|
||||
//唯一标识
|
||||
const uid = IdGenerator.next();
|
||||
|
||||
const noise = useTemplateRef('WEffectNoiseRef');
|
||||
|
||||
const base = ref(0);
|
||||
|
||||
onMounted(() => {
|
||||
const noiseStyle = getComputedStyle(noise.value);
|
||||
const noisePlayer = () => {
|
||||
try {
|
||||
base.value = noiseStyle.getPropertyValue('--noise-base');
|
||||
requestAnimationFrame(noisePlayer);
|
||||
} catch (e) { }
|
||||
}
|
||||
noisePlayer();
|
||||
})
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@layer {
|
||||
@property --noise-base {
|
||||
syntax: '<number>';
|
||||
inherits: true;
|
||||
initial-value: 0;
|
||||
}
|
||||
|
||||
.WEffectNoise {
|
||||
position: relative;
|
||||
inset: 0;
|
||||
--noise-base: 0;
|
||||
animation: none;
|
||||
|
||||
&.am {
|
||||
animation: am-WEffectNoise var(--time, 5s) linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes am-WEffectNoise {
|
||||
0% {
|
||||
--noise-base: 0;
|
||||
}
|
||||
|
||||
10% {
|
||||
--noise-base: 0.1;
|
||||
}
|
||||
|
||||
20% {
|
||||
--noise-base: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div class="WEffectNoiseBg">
|
||||
<svg style="display: none;">
|
||||
<defs>
|
||||
<filter :id="'WEffectNoiseBgFilter' + uid" color-interpolation-filters="linearRGB"
|
||||
filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse">
|
||||
<feTurbulence type="turbulence" :baseFrequency="`${props.base} ${props.base}`" numOctaves="100" seed="100" stitchTiles="stitch" x="-100%"
|
||||
y="-100%" width="300%" height="300%" result="turbulence" />
|
||||
<feDisplacementMap in="SourceGraphic" in2="turbulence" scale="200" xChannelSelector="R" yChannelSelector="A"
|
||||
x="-100%" y="-100%" width="300%" height="300%" result="displacementMap" />
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
<div class="bg">
|
||||
<div :style="{ filter: `url(#WEffectNoiseBgFilter${uid})` }"></div>
|
||||
</div>
|
||||
<div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { IdGenerator } from "@/util";
|
||||
|
||||
//唯一标识
|
||||
const uid = IdGenerator.next();
|
||||
|
||||
const props = defineProps({
|
||||
base: {
|
||||
type: Number,
|
||||
default: 0.05
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@layer {
|
||||
.WEffectNoiseBg {
|
||||
position: relative;
|
||||
inset: 0;
|
||||
background-color: var(--bg, var(--w-main));
|
||||
|
||||
&>div {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
&.bg {
|
||||
overflow: hidden;
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: repeating-linear-gradient(45deg, var(--noise, var(--w-main-dark-1)) 0, var(--noise, var(--w-main-dark-1)) 1em, #0000 1em, #0000 2em);
|
||||
transform: scale(2);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>组件</h1>
|
||||
<el-tabs v-model="tabIndex">
|
||||
|
||||
|
||||
<el-tab-pane label="代码" name="code">
|
||||
<h2>代码高亮显示</h2>
|
||||
<w-code ref="codeRef">{{ `<w-code>//自动识别语言</w-code>
|
||||
<w-code ref="codeRef" language="html">
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
</w-code>
|
||||
<script>
|
||||
codeRef.copy();//执行复制
|
||||
codeRef.getCode();//获取代码
|
||||
codeRef.setCode('new code');//设置代码
|
||||
</script>` }}
|
||||
</w-code>
|
||||
<el-button @click="proxy.$refs.codeRef.copy();">copy</el-button>
|
||||
<el-button @click="ElMessage.info(proxy.$refs.codeRef.getCode())">getCode</el-button>
|
||||
<el-button @click="proxy.$refs.codeRef.setCode(`<div>新代码</div>`)">setCode</el-button>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="杂项">
|
||||
<h2>可切换的logo</h2>
|
||||
<w-logo style="height: 10em;" />
|
||||
<w-code language="html">{{ `<w-logo style="height: 10em;" />` }}</w-code>
|
||||
|
||||
<el-divider />
|
||||
<h2>当前时间</h2>
|
||||
<w-time />
|
||||
<w-code language="html">{{ `<w-time />` }}</w-code>
|
||||
|
||||
<el-divider />
|
||||
<h2>双击可以编辑的主标题</h2>
|
||||
<w-main-title />
|
||||
<w-code language="html">{{ `<w-main-title />` }}</w-code>
|
||||
|
||||
<el-divider />
|
||||
<h2>渐变文字特效</h2>
|
||||
<w-text>第一段文字</w-text>
|
||||
<w-text style="font-size: 2em; color: red; --c:blue; --c-l: #FFF5; --d: 30deg; --move:10em;" am
|
||||
time="10s">第二段很长很长很长很长的文字</w-text>
|
||||
<w-code language="html">{{ `<w-text>第一段文字</w-text>
|
||||
<w-text style="font-size: 2em; color: red; --c:blue; --c-l: #FFF5; --d: 30deg; --move:10em;" am
|
||||
time="10s">第二段很长很长很长很长的文字</w-text>` }}</w-code>
|
||||
<ol>
|
||||
<li>am:是否启动光影特效</li>
|
||||
<li>time: 光影特效执行时间,默认:随机5s-20s</li>
|
||||
<li>--move: 光影移动距离</li>
|
||||
<li>color: 文字颜色</li>
|
||||
<li>--c: 文字渐变颜色</li>
|
||||
<li>--c-l: 光影颜色</li>
|
||||
<li>--d: 文字渐变方向</li>
|
||||
</ol>
|
||||
|
||||
|
||||
|
||||
|
||||
<el-divider />
|
||||
<h2>全屏</h2>
|
||||
<w-fullscreen />
|
||||
<w-code language="html">{{ `<w-fullscreen />` }}</w-code>
|
||||
|
||||
|
||||
|
||||
|
||||
<el-divider />
|
||||
<h2>工具栏</h2>
|
||||
<div style="display: flex; justify-content: flex-end; height: 3em; border: 1px solid var(--w-bg-dark-3);">
|
||||
<w-toolbar /></div>
|
||||
<w-code language="html">{{ `<div
|
||||
style="display: flex; justify-content: flex-end; height: 3em; border: 1px solid var(--w-bg-dark-3);">
|
||||
<w-toolbar /></div>` }}</w-code>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<el-divider />
|
||||
<h2>滚动条</h2>
|
||||
<w-scroll style="height: 10em;--c:red;">
|
||||
<div
|
||||
style="height: 40em; background-image: repeating-linear-gradient(to bottom, #0002 0, #0002 2em, #0001 2em, #0001 4em);">
|
||||
</div>
|
||||
</w-scroll>
|
||||
<w-code language="html">{{ ` <w-scroll style="height: 10em;--c:red;">
|
||||
<div
|
||||
style="height: 40em; background-image: repeating-linear-gradient(to bottom, #0002 0, #0002 2em, #0001 2em, #0001 4em);">
|
||||
</div>
|
||||
</w-scroll>` }}</w-code>
|
||||
|
||||
|
||||
|
||||
|
||||
<el-divider />
|
||||
<h2>变化的数值</h2>
|
||||
<w-num :to="100" /> :
|
||||
<w-num :fixed="1" :time="3000" :to="to" />
|
||||
<el-button @click="to = 1000;">to:1000</el-button>
|
||||
<el-button @click="to = 500;">to:500</el-button>
|
||||
<w-code language="html">{{ ` <w-num :to="100" />
|
||||
<w-num :fixed="1" :time="3000" :to="to" />
|
||||
<el-button @click="to=1000;">to:1000</el-button>
|
||||
<el-button @click="to=500;">to:500</el-button>` }}</w-code>
|
||||
|
||||
|
||||
|
||||
<el-divider />
|
||||
<h2>开关</h2>
|
||||
<w-switch :model-value="true" style="width: 4em; margin: .5em;" />
|
||||
<w-switch :model-value="false" style="width: 4em; margin: .5em;" />
|
||||
<w-switch v-model="switchValue" off-text="关" on-text="开" :disabled="false" style="width: 4em; margin: .5em; --on-color:red; --off-color: #ccc;" />
|
||||
{{ switchValue }}
|
||||
<w-code language="html">{{ ` <w-switch :model-value="true" style="width: 4em; margin: .5em;" />
|
||||
<w-switch :model-value="false" style="width: 4em; margin: .5em;" />
|
||||
<w-switch v-model="switchValue" off-text="关" on-text="开" :disabled="false" style="width: 4em; margin: .5em; --on-color:red; --off-color: #ccc;" />
|
||||
\{\{ switchValue \}\}` }}</w-code>
|
||||
|
||||
|
||||
|
||||
<el-divider />
|
||||
<h2>主题切换</h2>
|
||||
<w-theme/>
|
||||
<w-theme>
|
||||
<template #default="{ isDark }">
|
||||
{{ isDark?'暗黑主题':'明亮主题' }}
|
||||
</template>
|
||||
</w-theme>
|
||||
<w-code language="html">{{ `<w-theme/>
|
||||
<w-theme>
|
||||
<template #default="{ isDark }">
|
||||
\{\{ isDark?'暗黑主题':'明亮主题' \}\}
|
||||
</template>
|
||||
</w-theme>` }}</w-code>
|
||||
|
||||
</el-tab-pane>
|
||||
|
||||
|
||||
|
||||
<el-tab-pane label="隐私显示">
|
||||
<div class="w-flex">手机号码: 15111047708 : <w-sensitive value="15111047708" /></div>
|
||||
<div class="w-flex">手机号码: 15111047708 : <w-sensitive value="15111047708" len="3" /></div>
|
||||
<div class="w-flex">手机号码: 15111047708 : <w-sensitive value="15111047708" len="3" char="X" show/></div>
|
||||
<div class="w-flex">姓名: 张三丰 : <w-sensitive value="张三丰" len="1" char="某" show/></div>
|
||||
<div class="w-flex">ipv4: 127.0.0.1 : <w-sensitive type="ipv4" value="127.0.0.1" char="X" show/></div>
|
||||
<w-code language="html">{{ ` <div class="w-flex">手机号码: 15111047708 : <w-sensitive value="15111047708" /></div>
|
||||
<div class="w-flex">手机号码: 15111047708 : <w-sensitive value="15111047708" len="3" /></div>
|
||||
<div class="w-flex">手机号码: 15111047708 : <w-sensitive value="15111047708" len="3" char="X" show/></div>
|
||||
<div class="w-flex">姓名: 张三丰 : <w-sensitive value="张三丰" len="1" char="某" show/></div>
|
||||
<div class="w-flex">ipv4: 127.0.0.1 : <w-sensitive type="ipv4" value="127.0.0.1" char="X" show/></div>` }}</w-code>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="特效">
|
||||
<h2>杂点背景</h2>
|
||||
<div style="display: flex; flex-wrap: wrap; color: #FFF;">
|
||||
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;">内容</w-effect-noise-bg>
|
||||
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;" :base="0.01">:base="0.01"</w-effect-noise-bg>
|
||||
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;" :base="0.1">:base="0.1"</w-effect-noise-bg>
|
||||
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;" :base="0.5">:base="0.5"</w-effect-noise-bg>
|
||||
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;" :base="1">:base="1"</w-effect-noise-bg>
|
||||
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;--bg:#0d0d0d; --noise: #FFF1;" :base="0.1">:base="0.1"</w-effect-noise-bg>
|
||||
|
||||
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em; background-image: linear-gradient(-15deg, #0d0d0d,#0d0d0d,#3d3d3d,#0d0d0d) ; --noise: #FFF1;" :base="0.2">:base="0.2"</w-effect-noise-bg>
|
||||
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em; background-image: linear-gradient(-15deg, #eee,#fff) ; --noise: #0001;" :base="0.3"><div style="padding: 1em; color: #000;">:base="0.3"</div></w-effect-noise-bg>
|
||||
</div>
|
||||
<ol>
|
||||
<li>base: 杂点值,范围: 0~1, 默认:0.05</li>
|
||||
<li>--bg: 背景颜色</li>
|
||||
<li>--noise: 杂点颜色</li>
|
||||
</ol>
|
||||
<w-code language="html">{{ ` <div style="display: flex; flex-wrap: wrap; color: #FFF;">
|
||||
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;">内容</w-effect-noise-bg>
|
||||
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;" :base="0.01">:base="0.01"</w-effect-noise-bg>
|
||||
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;" :base="0.1">:base="0.1"</w-effect-noise-bg>
|
||||
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;" :base="0.5">:base="0.5"</w-effect-noise-bg>
|
||||
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;" :base="1">:base="1"</w-effect-noise-bg>
|
||||
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;--bg:#0d0d0d; --noise: #FFF1;" :base="0.1">:base="0.1"</w-effect-noise-bg>
|
||||
|
||||
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em; background-image: linear-gradient(-15deg, #0d0d0d,#0d0d0d,#3d3d3d,#0d0d0d) ; --noise: #FFF1;" :base="0.2">:base="0.2"</w-effect-noise-bg>
|
||||
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em; background-image: linear-gradient(-15deg, #eee,#fff) ; --noise: #0001;" :base="0.3"><div style="padding: 1em; color: #000;">:base="0.3"</div></w-effect-noise-bg>
|
||||
</div>` }}</w-code>
|
||||
|
||||
<h2>呼吸灯效果</h2>
|
||||
<w-effect-light><div style="height: 5em; width: 5em; background-color: var(--w-main);"></div></w-effect-light>
|
||||
<w-effect-light :am="am" style="--key: brightness(150%); --time:1s;"><div style="height: 5em; width: 5em; background-color: var(--w-main);"></div></w-effect-light>
|
||||
<el-button @click="am=!am;">{{ am?'暂停':'播放' }}</el-button>
|
||||
<w-code language="html">
|
||||
{{ ` <w-effect-light><div style="height: 5em; width: 5em; background-color: var(--w-main);"></div></w-effect-light>
|
||||
<w-effect-light :am="am" style="--key: brightness(150%); --time:1s;"><div style="height: 5em; width: 5em; background-color: var(--w-main);"></div></w-effect-light>
|
||||
<el-button @click="am=!am;">\{\{ am?'暂停':'播放' \}\}</el-button>` }}
|
||||
</w-code>
|
||||
|
||||
<h2>干扰动画效果</h2>
|
||||
<w-effect-noise :am="am1" style="--time:5s;"><div style="height: 5em; width: 5em; background-color: var(--w-main); border-radius: 10em;"></div></w-effect-noise>
|
||||
<el-button @click="am1=!am1;">{{ am1?'暂停':'播放' }}</el-button>
|
||||
|
||||
<h2>加载动画效果</h2>
|
||||
<div class="w-loading" ></div>
|
||||
<div class="w-loading" style="font-size: 3em; color: red;" ></div>
|
||||
<div class="w-inner-loading" style="width: 10em; height: 3em;">
|
||||
内部加载动画
|
||||
</div>
|
||||
<div class="w-inner-loading" style="width: 10em; height: 5em; margin: 1em 0; --size:2em; --bg-color: #0001; --loading-color: red;">
|
||||
内部加载动画
|
||||
</div>
|
||||
<w-code language="html">{{ ` <div class="w-loading" ></div>
|
||||
<div class="w-loading" style="font-size: 3em; color: red;" ></div>
|
||||
<div class="w-inner-loading" style="width: 10em; height: 3em;">
|
||||
内部加载动画
|
||||
</div>
|
||||
<div class="w-inner-loading" style="width: 10em; height: 5em; margin: 1em 0; --size:2em; --bg-color: #0001; --loading-color: red;">
|
||||
内部加载动画
|
||||
</div>` }}</w-code>
|
||||
|
||||
</el-tab-pane>
|
||||
|
||||
|
||||
</el-tabs>
|
||||
<div style="height: 20vh;"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const tabIndex = ref(localStorage.getItem('componentsTabIndex') || 'code');
|
||||
|
||||
watch(tabIndex, (newValue) => {
|
||||
localStorage.setItem('componentsTabIndex', newValue);
|
||||
});
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const to = ref(100)
|
||||
|
||||
const switchValue = ref(true);
|
||||
|
||||
const am = ref(true);
|
||||
const am1 = ref(true);
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
h2 {
|
||||
margin: 2em 0 1em;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue