显示颜色

src/views/Rgb.vue

@@ -19,6 +19,11 @@
                 size="mini"></el-input>
       <span class="ml30">rgb用英文逗号分隔，如 255,255,255</span>
     </div>
+    <div class="mt20">
+      颜色： <span :style="`color:${color1}`">这是颜色</span>
+      <div :style="`background-color:${color1}`"
+           class="color-block ml30"></div>
+    </div>
     <div class="mt20">
       <el-button type="primary"
                  size="mini"
@@ -31,6 +36,7 @@
                  :data-clipboard-text="hex1"
                  @click="copyText('copy-dateStr1')">复制hex</el-button>
     </div>
+    <el-divider></el-divider>
     <div class="mt20">
       hex <i class="el-icon-right"></i> rgb：
       <el-input v-model="hex2"
@@ -47,6 +53,11 @@
                 class="input-box"
                 size="mini"></el-input>
     </div>
+    <div class="mt20">
+      颜色： <span :style="`color:${color2}`">这是颜色</span>
+      <div :style="`background-color:${color2}`"
+           class="color-block ml30"></div>
+    </div>
     <div class="mt20">
       <el-button type="primary"
                  size="mini"
@@ -82,6 +93,8 @@ export default {
       rgb2: "",
       hex1: "",
       hex2: "",
+      color1: "#333",
+      color2: "#333",
     }
   },
   //监听属性 类似于data概念
@@ -126,6 +139,7 @@ export default {
       console.log(r, g, b);
       try {
         this.hex1 = `#${rgbHex(`rgb(${r},${g},${b})`)}`.toLocaleUpperCase();
+        this.color1 = this.hex1;
       } catch (e) {
         console.log(e);
         this.hex1 = "转化异常";
@@ -146,6 +160,7 @@ export default {
         } else {
           this.rgb2 = "转化异常"
         }
+        this.color2 = hex;
       } catch (e) {
         console.log(e);
         this.rgb2 = "转化异常"
@@ -173,6 +188,15 @@ export default {
   margin-left: 20px;
   margin-right: 20px;
 }
+
+.color-block{
+  display: inline-block;
+  width: 80px;
+  height: 40px;
+  vertical-align: middle;
+  border: 1px solid #f0f0f0;
+  border-radius: 3px;
+}
 </style>
 <style>
 </style>

src/views/Timestamp.vue

@@ -21,6 +21,7 @@
                  :data-clipboard-text="dateStr"
                  @click="copyText('copy-dateStr')">复制时间</el-button>
     </div>
+    <el-divider></el-divider>
     <div class="mt20">
       时间戳：
       <el-input v-model="timestamp1"
@@ -49,6 +50,7 @@
                  :data-clipboard-text="dateStr1"
                  @click="copyText('copy-dateStr1')">复制时间</el-button>
     </div>
+    <el-divider></el-divider>
     <div class="mt20">
       时间：
       <el-input v-model="dateStr2"