完善原子组件

src/components/scMini/scStatusIndicator.vue

@@ -21,7 +21,7 @@
 </script>
 
 <style scoped>
-	.sc-state {display: inline-block;background: #000;width: 10px;height: 10px;border-radius: 50%;vertical-align: middle;}
+	.sc-state {display: inline-block;background: #000;width: 8px;height: 8px;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;}
 

src/components/scMini/scTrend.vue

@@ -9,11 +9,11 @@
 
 <template>
 	<span class="sc-trend" :class="'sc-trend--'+type">
-		<el-icon v-if="type=='P'" class="sc-trend-icon"><el-icon-top /></el-icon>
+		<el-icon v-if="iconType=='P'" class="sc-trend-icon"><el-icon-top /></el-icon>
-		<el-icon v-if="type=='N'" class="sc-trend-icon"><el-icon-bottom /></el-icon>
+		<el-icon v-if="iconType=='N'" class="sc-trend-icon"><el-icon-bottom /></el-icon>
-		<el-icon v-if="type=='Z'" class="sc-trend-icon"><el-icon-right /></el-icon>
+		<el-icon v-if="iconType=='Z'" class="sc-trend-icon"><el-icon-right /></el-icon>
 		<em class="sc-trend-prefix">{{prefix}}</em>
-		<em class="sc-trend-value">{{absValue}}</em>
+		<em class="sc-trend-value">{{modelValue}}</em>
 		<em class="sc-trend-suffix">{{suffix}}</em>
 	</span>
 </template>
@@ -30,13 +30,23 @@
 			absValue(){
 				return Math.abs(this.modelValue);
 			},
+			iconType(v){
+				if(this.modelValue == 0){
+					v = 'Z'
+				}else if(this.modelValue < 0){
+					v = 'N'
+				}else if(this.modelValue > 0){
+					v = 'P'
+				}
+				return v
+			},
 			type(v){
 				if(this.modelValue == 0){
 					v = 'Z'
 				}else if(this.modelValue < 0){
-					v =  this.reverse?'N':'P'
+					v =  this.reverse?'P':'N'
 				}else if(this.modelValue > 0){
-					v =   this.reverse?'P':'N'
+					v =   this.reverse?'N':'P'
 				}
 				return v
 			}

src/views/home/work/components/myapp.vue

@@ -3,17 +3,17 @@
 		<ul class="myMods">
 			<li v-for="mod in myMods" :key="mod.path" :style="{background:mod.meta.color||'#909399'}">
 				<a v-if="mod.meta.type=='link'" :href="mod.path" target="_blank">
-					<i :class="mod.meta.icon||'el-icon-menu'"></i>
+					<el-icon><component :is="mod.meta.icon||el-icon-menu" /></el-icon>
 					<p>{{ mod.meta.title }}</p>
 				</a>
 				<router-link v-else :to="{ path: mod.path }">
-					<i :class="mod.meta.icon||'el-icon-menu'"></i>
+					<el-icon><component :is="mod.meta.icon||el-icon-menu" /></el-icon>
 					<p>{{ mod.meta.title }}</p>
 				</router-link>
 			</li>
 			<li class="modItem-add" @click="addMods">
 				<a href="javascript:void(0)">
-					<i class="el-icon-plus"></i>
+					<el-icon><el-icon-plus /></el-icon>
 				</a>
 			</li>
 		</ul>
@@ -27,7 +27,7 @@
 							<draggable tag="ul" v-model="myMods" animation="200" item-key="path" group="people">
 								<template #item="{ element }">
 									<li :style="{background:element.meta.color||'#909399'}">
-										<i :class="element.meta.icon||'el-icon-menu'"></i>
+										<el-icon><component :is="element.meta.icon||el-icon-menu" /></el-icon>
 										<p>{{element.meta.title}}</p>
 									</li>
 								</template>
@@ -38,7 +38,7 @@
 							<draggable tag="ul" v-model="filterMods" animation="200" item-key="path" :sort="false" group="people">
 								<template #item="{ element }">
 									<li :style="{background:element.meta.color||'#909399'}">
-										<i :class="element.meta.icon||'el-icon-menu'"></i>
+										<el-icon><component :is="element.meta.icon||el-icon-menu" /></el-icon>
 										<p>{{element.meta.title}}</p>
 									</li>
 								</template>

src/views/vab/mini.vue

@@ -21,7 +21,7 @@
 						<sc-trend v-model="trendValue3" suffix="%"></sc-trend>
 					</el-space>
 
-					<p style="margin-top: 15px;color: #999;">金融行业可设置reverse反转颜色。</p>
+					<p style="margin-top: 15px;color: #999;">设置reverse可反转颜色。</p>
 				</el-card>
 			</el-col>
 			<el-col :lg="8">
@@ -30,7 +30,7 @@
 						<h2>持续更新中...</h2>
 						<p>非常欢迎提交Issue/PR完善和补充更多好玩的原子组件</p>
 						<p>原子组件库位置：@/components/scMini/*</p>
-						<el-button type="text">提交想法</el-button>
+						<el-button type="text" @click="goIssue">提交想法</el-button>
 					</div>
 				</el-card>
 			</el-col>
@@ -52,7 +52,9 @@
 
 		},
 		methods: {
-
+			goIssue(){
+				window.open("https://gitee.com/lolicode/scui/issues")
+			}
 		}
 	}
 </script>