vue ColorPicker 颜色选择器，传颜色值的问题-阿里云开发者社区

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

2023-11-20 51

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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

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

Star指数：69.7k

Github 地址：https://github.com/PanJiaChen/vue-element-admin

Demo体验：https://panjiachen.github.io/vue-element-admin/#/dashboard

官方文档：https://panjiachen.github.io/vue-element-admin-site/zh/使用建议

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

测试使用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>

问题：

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

<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>