picker-color 颜色选择器

使用方式:

script 中引用组件
import pickerColor from "@/components/helang-pickerColor/helang-pickerColor.vue"
export default {
    components: {
        "picker-color":pickerColor,
    },
    data() {
        return {
            buttonColor:"#0099FF",
            showPickerColor:false,
            bottomPickerColor:0
        }
    },
    methods: {
        /* 显示获取颜色选择弹窗 */
        showPickerColorPop(){
            this.showPickerColor=true;
        },
        /* 获取颜色选择回调 */
        getPickerColor(color){
            /* 隐藏弹窗 */
            this.showPickerColor=false;
            /* 判断颜色值是否有效 */
            if(color){
                this.buttonColor=color;
                console.log('选择的颜色值是:'+color);
            }
        }
    }
}
template 中添加组件
<picker-color :isShow="showPickerColor" :bottom="0"  @callback='getPickerColor' />

属性说明:

属性名 类型 默认值 说明
isShow Boolean false 是否显示选择弹窗
bottom Number 0 弹窗距离窗口底部的距离 为兼容iphoneX和H5端使用,H5端口默认导航高度为50px

事件说明:

事件名 说明
@callback 确定选择颜色的回调函数,为减少事件和点击遮罩能关闭,在点击遮罩时也会触发,颜色值为 '' 请做好判断处理

源码示例请下载 插件使用示例工程 快速上手。PS:在当前页面的上部靠右位置,有个 [下载示例项目ZIP] 按钮

隐私、权限及商业化声明

1. 本插件需要申请的手机端权限列表:

2. 本插件采集的手机端数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问