ok

layouts/basic.vue

@@ -10,9 +10,9 @@
                             <Icon type="ios-keypad"></Icon>
                             树形
                         </MenuItem>
-                        <MenuItem name="3">
+                        <MenuItem name="3" to="/go/color">
                             <Icon type="ios-analytics"></Icon>
-                            Item 3
+                            色彩
                         </MenuItem>
                         <MenuItem name="4">
                             <Icon type="ios-paper"></Icon>

pages/go/color.vue

+<template>
+ <div id="color">
+<div>
+     <ColorPicker v-model="color" @on-change="change" format="rgb"/>
+</div>
+<h3>
+    {{bgcolor}}
+</h3>
+<div v-bg-color="bgcolor" class="item">
+    <h2 v-color="color">这是一行文字</h2>
+</div>
+ </div>
+</template>
+
+<script>
+ export default {
+     layout:"basic",
+   data () {
+     return {
+         color:"#000000",
+         bgcolor:"red"
+     }
+   },
+   methods:{
+       change(v){
+           console.log(v)
+           let rgb=(v.replace("rgba(","").replace(")")).split(",");
+           this.bgcolor= `rgba(${255-rgb[0]},${255-rgb[1]},${255-rgb[2]},1)`
+       }
+   },
+   components: {
+
+   }
+ }
+</script>
+
+<style lang="less">
+
+ #color{
+     .item{
+         margin: 20px 0;
+         padding: 10px;
+         line-height: 300%;
+         border: 1px solid #eee;
+     }
+ }
+</style>