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

本文介绍了Vue Element Admin后台前端解决方案,它基于Vue和Element-UI。此外,还展示了如何在项目中使用ColorPicker颜色选择器,并提供了一个示例代码,演示如何获取选中的颜色值并将其传递给后端。推荐使用eladmin-web作为简化版后台管理系统。
摘要由CSDN通过智能技术生成
写在前面的而一些啰嗦的话:

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/

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


推荐使用,简化版

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

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

ColorPicker 颜色选择器: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>

问题:
如何获取选中的颜色的值,并且将颜色的值传给后端?

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

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


在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值