feat: add color picker

添加颜色选择盘

assets/css/app.css

@@ -41,9 +41,6 @@ html, body {
   padding: 10px 20px;
   display: flex;
   align-items: center;
-}
-
-.top {
   margin-right: 20px;
 }
 

assets/scripts/editor.js

@@ -31,6 +31,9 @@ let app = new Vue({
         { label: '淡绿', value: 'lightgreen', author: '#42B983'},
         { label: '暗青', value: 'darkcyan', author: '#008B8B'}
       ],
+      colorOption: [
+        { label: '淡绿', value: 'rgba(66, 185, 131, 0.9)' },
+      ],
       styleThemes: {
         orange: orangeTheme,
         lightgreen: lightgreenTheme,
@@ -42,6 +45,7 @@ let app = new Vue({
     d.currentFont = d.builtinFonts[0].value;
     d.currentSize = d.sizeOption[0].value;
     d.currentTheme = d.themeOption[1].value;
+    d.currentColor = d.colorOption[0].value;
     return d;
   },
   mounted() {
@@ -112,6 +116,9 @@ let app = new Vue({
       });
       this.refresh()
     },
+    colorChanged: function (color) {
+      // TODO
+    },
     // 刷新右侧预览
     refresh: function () {
       this.output = this.renderWeChat(this.editor.getValue(0))

index.html

@@ -73,6 +73,7 @@
               </el-option>
             </el-select>
           </el-form-item>
+          <el-color-picker v-model="currentColor" size="mini" show-alpha @change="colorChanged"></el-color-picker>
         </el-form>
         <el-button class="about" @click="aboutDialogVisible = true">关于</el-button>
       </el-header>