vue ColorPicker 颜色选择器，传颜色值的问题

红太狼 2022-09-02 11:59 405阅读 0赞

##### 写在前面的而一些啰嗦的话: #####

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。

Star指数：69.7k  
Github 地址：[https://github.com/PanJiaChen/vue-element-admin][https_github.com_PanJiaChen_vue-element-admin]  
Demo体验：[https://panjiachen.github.io/vue-element-admin/\#/dashboard][https_panjiachen.github.io_vue-element-admin_dashboard]  
官方文档：[https://panjiachen.github.io/vue-element-admin-site/zh/][https_panjiachen.github.io_vue-element-admin-site_zh]

使用建议  
本项目的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。

![4a7cf977667c4c5055f73b2fbdc32174.png][]

--------------------

##### 推荐使用，简化版 #####

使用一下饿了么简化版后台管理系统-eladmin-web  
Github地址：[https://github.com/elunez/eladmin-web][https_github.com_elunez_eladmin-web]

ColorPicker 颜色选择器，传值问题  
将选中的颜色传给后端

ColorPicker 颜色选择器：[https://element.eleme.cn/\#/zh-CN/component/color-picker][https_element.eleme.cn_zh-CN_component_color-picker]

用于颜色选择，支持多种格式。

##### 测试使用demo #####

test.vue

<template>
    <div>
    
    <div class="block">
      <span class="demonstration">有默认值</span>
      <el-color-picker v-model="color1"></el-color-picker>
    </div>
    
    </div>
      
    </template>
    <script>
      export default {
        data() {
          return {
            color1: '#409EFF',
           
          }
        }
      };
    </script>

![0df0869a12860f955d986fa2623f3efe.png][]

问题：  
如何获取选中的颜色的值，并且将颜色的值传给后端？

<template>
      <div>
        <div class="block">
          <span class="demonstration">有默认值</span>
          <el-color-picker v-model="color1"></el-color-picker>
        </div>
        <el-button type="primary" @click="createData()">确定</el-button>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          color1: "#409EFF"
        };
      },
      methods: {
        //添加
        async createData() {
          const params = this.color1;
          alert(JSON.stringify(params));
        }
      }
    };
    </script>

样式暂且忽略不计，主要看功能，将选中的颜色的数值提交即可。

![068e1a31c06efea96311a002c72cc527.png][]

[https_github.com_PanJiaChen_vue-element-admin]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FPanJiaChen%2Fvue-element-admin
[https_panjiachen.github.io_vue-element-admin_dashboard]: https://links.jianshu.com/go?to=https%3A%2F%2Fpanjiachen.github.io%2Fvue-element-admin%2F%23%2Fdashboard
[https_panjiachen.github.io_vue-element-admin-site_zh]: https://links.jianshu.com/go?to=https%3A%2F%2Fpanjiachen.github.io%2Fvue-element-admin-site%2Fzh%2F
[4a7cf977667c4c5055f73b2fbdc32174.png]: /images/20220829/303163dd723f412cbcd4e4e9e6962316.png
[https_github.com_elunez_eladmin-web]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Felunez%2Feladmin-web
[https_element.eleme.cn_zh-CN_component_color-picker]: https://links.jianshu.com/go?to=https%3A%2F%2Felement.eleme.cn%2F%23%2Fzh-CN%2Fcomponent%2Fcolor-picker
[0df0869a12860f955d986fa2623f3efe.png]: /images/20220829/90c3201645ca44cca24c32d5542de863.png
[068e1a31c06efea96311a002c72cc527.png]: /images/20220829/96f9748ab18248e88890638a2d2fe021.png