From c522ce06468b863350c099dbc2a2e0fce6aec3fe Mon Sep 17 00:00:00 2001
From: yanglbme <szuyanglb@outlook.com>
Date: Tue, 5 Nov 2019 15:16:42 +0800
Subject: [PATCH] feat: add color picker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加颜色选择盘
---
 assets/css/app.css       | 3 ---
 assets/scripts/editor.js | 7 +++++++
 index.html               | 1 +
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index fa49e62..125bb92 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -41,9 +41,6 @@ html, body {
   padding: 10px 20px;
   display: flex;
   align-items: center;
-}
-
-.top {
   margin-right: 20px;
 }
 
diff --git a/assets/scripts/editor.js b/assets/scripts/editor.js
index d2b73be..e15a82b 100644
--- a/assets/scripts/editor.js
+++ b/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))
diff --git a/index.html b/index.html
index 4d391b5..ff24e04 100644
--- a/index.html
+++ b/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>