VUE-color 颜色选择器

最新推荐文章于 2024-03-27 09:47:06 发布

今天你码了吗

最新推荐文章于 2024-03-27 09:47:06 发布

阅读量581

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_50249353/article/details/132140891

版权

import VueColor from "vue-color";
export default {
#有多种类型  可以i自己选择
	 components: {"sketch-picker": VueColor.Sketch,},
}

 <a-form-model-item label="字体颜色">
                            <a-popover v-model="visibleColor" trigger="click">
                                <span slot="content" @click="() =>visibleColor = !visibleColor">
                                      <sketch-picker
                                        v-model="color"
                                        @input="handleUpdate"
                                    ></sketch-picker>
                                </span>
                                <div :style="{'background-color': form.fontColor}" class="color"> 
                                </div>
                            </a-popover>
                           </a-form-model-item>


.color {
  display: inline-block;
  cursor: pointer;
  width: 50px;
  height: 50px;
  box-sizing: content-box;
  padding: 2px;
  border: 1px solid #eee;
  background-clip: content-box;
}