Merge pull request #8 from xxapp/master

完成新功能 #4

src/module/widget/bgcolor/bgcolor.css

@@ -1,5 +1,30 @@
 
 .w-bgcolor {
+    height: 40px;
     background: #cef;
     padding: 10px;
+}
+
+.w-bgcolor_color {
+    height: 26px;
+    width: 26px;
+    border: 2px solid #000000;
+    margin: 7px 0 7px 7px;
+    float: left;
+}
+
+.w-bgcolor_selected {
+    transform: scale(1.2);
+    animation: highlight 0.5s;
+}
+@keyframes highlight {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.5);
+    }
+    100% {
+        transform: scale(1.2);
+    }
 }

src/module/widget/bgcolor/bgcolor.html

@@ -1,3 +1,7 @@
 <div class="w-bgcolor">
-    背景色拾取
+    <div class="w-bgcolor_color" 
+        v-for="c in colors" 
+        v-bind:style="{ background: c.rgb }"
+        v-bind:class="{ 'w-bgcolor_selected': color === c.rgb }"
+        @click="onSelect(event, c.rgb)"></div>
 </div>

src/module/widget/bgcolor/bgcolor.js

@@ -2,5 +2,36 @@
 // TODO
 
 module.exports = Vue.extend({
-    template: __inline('bgcolor.html')
+    template: __inline('bgcolor.html'),
+    props: ['color'],
+    data: function() {
+        return {
+            colors: [{
+                rgb: '#E50012'
+            }, {
+                rgb: '#EA5415'
+            }, {
+                rgb: '#F49EC0'
+            }, {
+                rgb: '#F6F08B'
+            }, {
+                rgb: '#C1D540'
+            }, {
+                rgb: '#60C3BA'
+            }, {
+                rgb: '#77CFF0'
+            }, {
+                rgb: '#980C7E'
+            }, {
+                rgb: '#FFFFFF'
+            }]
+        };
+    },
+    methods: {
+        onSelect: function(event, selected) {
+            if (this.color !== selected) {
+                this.color = selected;
+            }
+        }
+    }
 });