Vue颜色选择器实现（两种方法）-阿里云开发者社区

Vue颜色选择器实现（两种方法）

2023-11-27 154

版权

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

简介： Vue颜色选择器实现（两种方法）

前言

本文讲述两种颜色选择器的实现方式。

别划走，最后有完整源代码。

第一种:@input和input[type=color]实现下述效果。

第二种：利用colors颜色数组、:style和v-for实现下列效果。

提示：以下是本篇文章正文内容，下面案例可供参考

一、颜色选择器（input[type=color]实现）

新建html文件并且导入vue.js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <script src="./js/vue.js"></script>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
</script>
</body>
</html>

Vue导入成功测试代码实现

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <script src="./js/vue.js"></script>
  <div id="app">
    {{test}}
  </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el:"#app",
      data:{
        test:"Vue导入成功"
      }
    })
  </script>
<script>
</script>
</body>
</html>

实现过程与代码介绍

结构层

一个div块装颜色效果，一个input[type=color],一个按钮控制input是否消失。如下图所示。

<div id="app">
    <div class="overlay" :style="{backgroundColor:colorSelected}" @click="picker=!picker"></div>
    <div v-show="picker">
      <input type="color" :value="colorSelected" @input="selectColors($event)">
      <button @click="picker=false">ok</button>
    </div>
  </div>

样式层

样式就用到一个，设置div背景宽高

<style>
      .overlay{
        width:100px;
        height:100px;
      }
    </style>

js层

data数据

input颜色选择器需要用到一个参数来保存16进制颜色码

颜色选择器显示隐藏还需要有一个boolean参数做判断用

data:{
        colorSelected:"#000000",
        picker:false
      },

methods方法

输入框显示隐藏也可以用methods方法下实现，在这里我结构层用@click=“picker=！picker”实现的。

唯一的方法实现是用@input实时获取value值得变换并更新到colorSelected数据中，利用的是event.target.value来进行值调用。

methods:{
        selectColors(event){
          this.colorSelected=event.target.value
        }
      }

完整代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .overlay{
        width:100px;
        height:100px;
      }
    </style>
  </head>
  <script src="./js/vue.js"></script>
  <div id="app">
    <div class="overlay" :style="{backgroundColor:colorSelected}" @click="picker=!picker"></div>
    <div v-show="picker">
      <input type="color" :value="colorSelected" @input="selectColors($event)">
      <button @click="picker=false">ok</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el:"#app",
      data:{
        colorSelected:"#000000",
        picker:false
      },
      methods:{
        selectColors(event){
          this.colorSelected=event.target.value
        }
      }
    })
  </script>
<script>
</script>
</body>
</html>

二、颜色选择器（colors数组实现）

1.完整代码

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>颜色选择器</title>
    <style scoped>
    .color-picker {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .color-box {
      width: 100px;
      height: 100px;
      margin-top: 20px;
    }
    .color-options {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 20px;
    }
    .color-option {
      width: 30px;
      height: 30px;
      margin: 5px;
      border-radius:50%;
    }
    .color-option.active {
      border: 2px solid #FFFFFF;
    }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="color-picker">
        <div class="color-box" :style="{ backgroundColor: selectedColor }"></div>
        <div class="color-options">
          <div v-for="(color, index) in colors" :key="index" 
            class="color-option" :style="{ backgroundColor: color }"
            @click="selectColor(color)"
            :class="{ active: color === selectedColor }"></div>
        </div>
      </div>
    </div>
    <script src="../vue.js"></script>
    <script>
      new Vue({
        el:"#app",
        data() {
          return {
            colors: ['#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3',
                     '#03A9F4', '#00BCD4', '#009688', '#4CAF50', '#8BC34A', '#FFEB3B',
                     '#FFC107', '#FF9800', '#FF5722', '#795548', '#9E9E9E', '#607D8B'],
            selectedColor: '#F44336',
          };
        },
        methods: {
          selectColor(color) {
            this.selectedColor = color;
            this.$emit('color-selected', color);
          }
        }
      })
    </script>
  </body>
</html>