Vue项目实现在页面上的实时更改控件、元素颜色属性（简单运用Element的实用组件ColorPicker 颜色选择器）

目录

Vue

易学易用

性能出色

灵活多变

效果 

 寻找添加控件

先打开Element官网

 找到对应组件

查看代码 

添加到项目中 

实现实时更改控件元素颜色属性

传递颜色值

通过事件触发函数

结束

---

Vue

先简单介绍一下vue吧 vue的优点和特点很多  想了解更多的的话可以看看Vue官网详细解释

易学易用

基于标准 HTML、CSS 和 JavaScript 构建，提供容易上手的 API 和一流的文档。

性能出色

经过编译器优化、完全响应式的渲染系统，几乎不需要手动优化。

灵活多变

丰富的、可渐进式集成的生态系统，可以根据应用规模在库和框架间切换自如。

关于Vue简介，百度百科给出的解释是：Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

效果 

我们先看一下最终目的效果

 寻找添加控件

该控件名字为ColorPicker 颜色选择器 是基于vue框架封装起来的一个实用组件 是在Element中封装好的 我们打开Element官网可以直接获取查看相应代码 用法 以及其属性

先打开Element官网

点击组件栏目 左边一列就是各种组件列表 安装npm之后就可以直接使用代码调用

 找到对应组件

目前我需要用到的是ColorPicker 颜色选择器这个组件 从左边栏目下滑可直接找到

查看代码 

点击显示代码查看当前形式组件的代码 然后选取自己需要的部分 复制后粘贴到自己的项目中

<div class="block">
  <span class="demonstration">有默认值</span>
  <el-color-picker v-model="color1"></el-color-picker>
</div>