颜色选择器,暂存

src/views/chartFrame_manage/components/frameToolBar.vue

@@ -16,12 +16,13 @@
                     <span class="disabled"></span>
                 </span>
             </ToolItem>
-            <!-- 字体 -->
+            <!-- 字体 暂定-->
             <!-- 字号 -->
             <ToolItem tooltip="字号" toolkey="fontSize">
                 <el-dropdown @command="changeStyle" trigger="click">
-                    <span class="el-dropdown-link"> 
+                    <span class="el-dropdown-link tool-item"> 
                         <span>{{node}}</span>
+                        <i class="el-icon-caret-bottom"></i>
                     </span>
                     <el-dropdown-menu slot="dropdown">
                         <el-dropdown-item v-for="item in sizeOptions" 
@@ -30,11 +31,37 @@
                 </el-dropdown>
             </ToolItem>
             <!-- 加粗 -->
+            <ToolItem tooltip="加粗" toolkey="fontWeight">
+                <span class="tool-item">
+                    <span class="item-text">B</span>
+                    <span class="disabled"></span>
+                </span>
+            </ToolItem>
             <!-- 斜体 -->
+            <ToolItem tooltip="斜体" toolkey="fontstyle">
+                <span class="tool-item">
+                    <span style="font-style: italic;" class="item-text">&nbsp;I&nbsp;</span>
+                    <span class="disabled"></span>
+                </span>
+            </ToolItem>
             <!-- 下划线 -->
+            <ToolItem tooltip="下划线" toolkey="textDecoration">
+                <span class="tool-item">
+                    <span style="text-decoration: underline;" class="item-text">U</span>
+                    <span class="disabled"></span>
+                </span>
+            </ToolItem>
             <!-- 字体颜色 -->
-            <!-- 文本行高 -->
-            <!-- 文本对齐 -->
+            <ToolItem tooltip="字体颜色" toolkey="textDecoration">
+                <span class="tool-item">
+                    <!-- <span style="color:red;" class="item-text">T</span> -->
+                    <label for="fontColor" :style="`color:${color}`">T</label>
+                    <input type="color" id="fontColor" style="width: 0;height: 0;visibility: hidden;" @input="valueChange"/>
+                    <!-- <span class="disabled"></span> -->
+                </span>
+            </ToolItem>
+            <!-- 文本行高 暂定-->
+            <!-- 文本对齐 暂定-->
             <!-- 节点颜色填充 -->
             <!-- 节点/线条边框颜色 -->
             <!-- 节点/线条边框宽度 -->
@@ -55,14 +82,24 @@ export default {
     data() {
         this.sizeOptions=sizeOptions
         return {
-            node:''
+            node:14,
+            color:'#333'
         };
     },
     methods: {
         setGraphStyle(){
             console.log('aaa')
+        },
+        valueChange(e){
+            //t.target.value: "#9c3535"
+            //console.log('test',e)
+            if(e.target){
+                this.color = e.target.value
+            }
         }
     },
+    mounted(){
+    },
     
 };
 </script>
@@ -113,6 +150,9 @@ export default {
         .tool-item{
             cursor: pointer;
             position: relative;
+            .item-text{
+                padding:0 2px;
+            }
             .disabled {
                 color: #bbb;
                 background: rgba(0, 0, 0, 0.08);