✨ 原子组件 状态指示器 趋势标记
This commit is contained in:
sc
parent
9ef3904c51
commit
9fe2a1e521
|
|
@ -4,7 +4,7 @@ import http from "@/utils/request"
|
|||
export default {
|
||||
menu: {
|
||||
myMenus: {
|
||||
url: `${config.API_URL}/system/menu/my/1.3.2`,
|
||||
url: `${config.API_URL}/system/menu/my/1.3.3`,
|
||||
name: "获取我的菜单",
|
||||
get: async function(){
|
||||
return await http.get(this.url);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,47 @@
|
|||
<!--
|
||||
* @Descripttion: 状态指示器
|
||||
* @version: 1.0
|
||||
* @Author: sakuya
|
||||
* @Date: 2021年11月11日09:30:12
|
||||
* @LastEditors:
|
||||
* @LastEditTime:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<span class="sc-state" :class="[{'sc-status-processing':pulse}, 'sc-state-bg--'+type]"></span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
type: { type: String, default: "primary" },
|
||||
pulse: { type: Boolean, default: false }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sc-state {display: inline-block;background: #000;width: 10px;height: 10px;border-radius: 50%;vertical-align: middle;}
|
||||
.sc-status-processing {position: relative;}
|
||||
.sc-status-processing:after {position: absolute;top:0px;left:0px;width: 100%;height: 100%;border-radius: 50%;background: inherit;content: '';animation: warn 1.2s ease-in-out infinite;}
|
||||
|
||||
.sc-state-bg--primary {background: var(--el-color-primary);}
|
||||
.sc-state-bg--success {background: var(--el-color-success);}
|
||||
.sc-state-bg--warning {background: var(--el-color-warning);}
|
||||
.sc-state-bg--danger {background: var(--el-color-danger);}
|
||||
.sc-state-bg--info {background: var(--el-color-info);}
|
||||
|
||||
@keyframes warn {
|
||||
0% {
|
||||
transform: scale(0.5);
|
||||
opacity: 1;
|
||||
}
|
||||
30% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
transform: scale(2.5);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!--
|
||||
* @Descripttion: 趋势标记
|
||||
* @version: 1.0
|
||||
* @Author: sakuya
|
||||
* @Date: 2021年11月11日11:07:10
|
||||
* @LastEditors:
|
||||
* @LastEditTime:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<span class="sc-trend" :class="'sc-trend--'+type">
|
||||
<i v-if="type=='P'" class="sc-trend-icon el-icon-top"></i>
|
||||
<i v-if="type=='N'" class="sc-trend-icon el-icon-bottom"></i>
|
||||
<i v-if="type=='Z'" class="sc-trend-icon el-icon-right"></i>
|
||||
<em class="sc-trend-prefix">{{prefix}}</em>
|
||||
<em class="sc-trend-value">{{absValue}}</em>
|
||||
<em class="sc-trend-suffix">{{suffix}}</em>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
modelValue: { type: Number, default: 0 },
|
||||
prefix: { type: String, default: "" },
|
||||
suffix: { type: String, default: "" },
|
||||
reverse: { type: Boolean, default: false }
|
||||
},
|
||||
computed: {
|
||||
absValue(){
|
||||
return Math.abs(this.modelValue);
|
||||
},
|
||||
type(v){
|
||||
if(this.modelValue == 0){
|
||||
v = 'Z'
|
||||
}else if(this.modelValue < 0){
|
||||
v = this.reverse?'N':'P'
|
||||
}else if(this.modelValue > 0){
|
||||
v = this.reverse?'P':'N'
|
||||
}
|
||||
return v
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sc-trend {}
|
||||
.sc-trend-icon {margin-right: 2px;}
|
||||
.sc-trend em {font-style: normal;}
|
||||
.sc-trend-prefix {margin-right: 2px;}
|
||||
.sc-trend-suffix {margin-left: 2px;}
|
||||
.sc-trend--P {color: #f56c6c;}
|
||||
.sc-trend--N {color: #67c23a;}
|
||||
.sc-trend--Z {color: #555;}
|
||||
</style>
|
||||
|
|
@ -14,6 +14,8 @@ import scSelect from './components/scSelect'
|
|||
import scDialog from './components/scDialog'
|
||||
import scForm from './components/scForm'
|
||||
import scTitle from './components/scTitle'
|
||||
import scStatusIndicator from './components/scMini/scStatusIndicator'
|
||||
import scTrend from './components/scMini/scTrend'
|
||||
import auth from './directives/auth'
|
||||
import role from './directives/role'
|
||||
import time from './directives/time'
|
||||
|
|
@ -42,6 +44,8 @@ export default {
|
|||
app.component('scDialog', scDialog);
|
||||
app.component('scForm', scForm);
|
||||
app.component('scTitle', scTitle);
|
||||
app.component('scStatusIndicator', scStatusIndicator);
|
||||
app.component('scTrend', scTrend);
|
||||
|
||||
//注册全局指令
|
||||
app.directive('auth', auth)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,65 @@
|
|||
|
||||
<template>
|
||||
<el-main>
|
||||
<el-row :gutter="15">
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never" header="脉冲圆点">
|
||||
<el-space wrap :size="15">
|
||||
<sc-status-indicator pulse type="primary"></sc-status-indicator>
|
||||
<sc-status-indicator pulse type="success"></sc-status-indicator>
|
||||
<sc-status-indicator pulse type="warning"></sc-status-indicator>
|
||||
<sc-status-indicator pulse type="danger"></sc-status-indicator>
|
||||
<sc-status-indicator type="info"></sc-status-indicator>
|
||||
</el-space>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never" header="趋势">
|
||||
<el-space wrap :size="15">
|
||||
<sc-trend v-model="trendValue" prefix="¥"></sc-trend>
|
||||
<sc-trend v-model="trendValue2"></sc-trend>
|
||||
<sc-trend v-model="trendValue3" suffix="%"></sc-trend>
|
||||
</el-space>
|
||||
|
||||
<p style="margin-top: 15px;color: #999;">金融行业可设置reverse反转颜色。</p>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never">
|
||||
<div class="up">
|
||||
<h2>持续更新中...</h2>
|
||||
<p>非常欢迎提交Issue/PR完善和补充更多好玩的原子组件</p>
|
||||
<p>原子组件库位置：@/components/scMini/*</p>
|
||||
<el-button type="text">提交想法</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'minivab',
|
||||
data() {
|
||||
return {
|
||||
trendValue: 4.6,
|
||||
trendValue2: 0,
|
||||
trendValue3: -32
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.up {text-align: center;}
|
||||
.up h2 {margin-bottom: 10px;}
|
||||
.up p {color: #999;line-height: 1.5;}
|
||||
.el-card {height:150px;}
|
||||
</style>
|
||||
Loading…
Reference in New Issue