【vue + element ui】ColorPicker 颜色选择器的使用

这篇具有很好参考价值的文章主要介绍了【vue + element ui】ColorPicker 颜色选择器的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

项目场景:

组件提供的ColorPicker 颜色选择器不能满足实际需求,所以在此基础上使用了自定义的方式进行使用

我这边的使用场景是ColorPickerel-input输入框的联动使用,在这里参考了下面博主的文章

https://blog.csdn.net/s1441101265/article/details/109672819

elementui 颜色选择器,vue.js,ui,javascript


使用步骤

1.自定义组件inputColor.vue

2.父组件引入该组件

3.在父组件内需要使用的地方使用该组件

4.我这个地方的使用是在表单里面进行使用,并且需要进行表单不能为空的校验

5.所以这个地方就涉及到了在父组件里面的调用,在最后进行表单验证判断的时候,父组件的验证与子组件的验证都需要全部通过才可以,所以这个地方呢就在子组件内定义了一个是否通过了验证的方法,然后在父组件的验证方法里面调用子组件的是否通过验证的判断方法,只有两个验证都返回true的时候才能进行下一步的操作

6.这里就需要使用到一次性同时验证多个表单验证的方法了,可以参考我之前分享过的博文
vue + element ui 同时提交多个表单的表单验证

使用代码

在这里附上我使用过程的完整代码,供参考

1.inputColor.vue

<template>
  <div class="public-input-color-picker">
    <el-form ref="form" :model="formData" :rules="formRules">
      <el-form-item prop="value2">
        <el-input v-model="formData.value2" :placeholder="placeholder" @input="_change"></el-input>
        <el-color-picker v-model="formData.value2" :show-alpha="showAlpha" :predefine="predefineColors"
          @change="_change"></el-color-picker>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
/**
 * 输入框颜色选择器
 * ps:预定义颜色中,如果颜色不对,将无法选中
 *
 * @showAlpha 是否支持透明度 默认false
 * @predefineColors 预定义颜色
 * @value 默认颜色编码 示例:#ffffff
 * @placeholder 输入框提示文字
 */
export default {
  name: 'public-input-color-picker',
  data() {
    const validateColor = (rule, value, callback) => {
      if (this.formData.value2 === '' || this.formData.value2 === null) {
        callback(new Error('请选择颜色'))
      } else {
        callback()
      }
    }
    return {
      formData: {
        value2: ''
      },
      formRules: {
        value2: [{ required: true, validator: validateColor, trigger: 'blur' }]
      }
    }
  },
  props: {
    showAlpha: { type: Boolean, default: false },
    predefineColors: {
      type: Array,
      default: () => {
        return [
          '#ff4500',
          '#ff8c00',
          '#ffd700',
          '#90ee90',
          '#00ced1',
          '#1e90ff',
          '#c71585',
          '#FF0000'
        ]
      }
    },
    value: { type: String, default: '' },
    placeholder: { type: String, default: '请输入颜色编码' }
  },
  components: {},
  computed: {},
  created() {
  },
  onload() { },
  onShow() { },
  watch: {
    value: {
      handler: function (newVal, oldVal) {
        this.formData.value2 = JSON.parse(JSON.stringify(newVal))
      },
      immediate: true,
      deep: true
    }
  },
  mounted() { },
  methods: {
    _change(val) {
      this.$refs.form.validate((res) => {
        if (res) {
          this.$emit('change', val)
        }
      })
    },
    //这个方法就是用来判断当前组件的表单验证是否通过
    async justify() {
      const res = await this.$refs['form'].validate()
      if (res) {
        return true
      } else {
        return false
      }
    },
  }
}
</script>
<style lang="less" scoped>
@box-width: 200px;

.public-input-color-picker {
  // display: flex;
  // -webkit-box-align: center;
  // -webkit-align-items: center;
  // align-items: center;
  position: relative;
  width: @box-width;

  .el-input {
    width: @box-width;
  }

  .el-color-picker {
    position: absolute;
    right: 0;

    /deep/ .el-color-picker__trigger {
      border: 0;
    }
  }
}
</style>

2.父组件中的调用文章来源地址https://www.toymoban.com/news/detail-765898.html

<template>
    <div>
        <el-form ref="form" :model="formData">
            <el-form-item label="颜色" prop="color" required>
                <template>
                    <inputColor ref="inputColor" :value="formData.color" placeholder="请选择颜色" @change="colorChange"></inputColor>
                </template>
             </el-form-item>
         </el-form>
    </div>
</template>

<script>
import inputColor from './inputColor.vue'
export default {
    components: { inputColor },
    data() {
        return {
            formData:{
               color:''
            }
        }
    },
    created() {
    },
    methods: {
        checkForm(formName) {
            return new Promise((resolve, reject) => {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        resolve()
                    } else reject()
                })
            })
        },
        submit() {
            //调用校验子组件的方法
            let form1 = this.$refs.inputColor.justify()
            let list = [] //这个数组就是一个用来存放所有表单验证结果的集合
            list.push(
                this.checkForm('form'),//绑定的表单1
                form1 //绑定的子组件的表单验证
            )
            Promise.all(list)
                .then(async () => {
                   //这个地方就放我们的逻辑操作代码即可
                   console.log('表单校验通过')
                })
                .catch(() => {
                    console.log('表单校验未通过')
                })
        },
        colorChange(val) {
            this.formData.color = val
        },
}
</script>

<style lang="less" scoped>

</style>

到了这里,关于【vue + element ui】ColorPicker 颜色选择器的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Element Plus 日期选择器的使用和属性

    element plus 日期选择器如果如果没有进行处理 他会返回原有的属性值data格式 如果想要获取选中的日期时间就需要通过以下的代码来实现选中的值 format=\\\"YYYY/MM/DD\\\"  value-format=\\\"YYYY-MM-DD\\\"  看一下加上后的效果: 这个组件还能转换为时间戳的方式,也是需要更改 value-format属性。将

    2024年02月10日
    浏览(40)
  • 【vue组件】使用element-ui 实现三级联动下拉选择

    实现的思路是第一个下拉选择在选择了选项后将该选项的信息传递到接口请求下一个选项的内容,依次类推 然后在清除了上一级选择的选项后要将其次级和子孙级的选项都清除(包括选择里的列表内容) 下面看具体代码: 效果图:

    2024年02月11日
    浏览(62)
  • vue中使用element-ui ,设置级联选择器高度问题

    我本来以为设置elemnt-ui组件样式需要用到深度选择器,然后找了好多关于深度选择器的,比如 /deep/ ::v-deep 后来才明白是权重不够,解决方法如下 1、在全局css中设置 缺点:所有级联选择器的高度都是固定的 结论:只有在所有页面级联选择器都一致的情况下或者只有一个级联

    2024年02月12日
    浏览(47)
  • 【vue】聊一聊Element UI的自定义主题颜色

    Element UI组件库相信大家一定都接触过。但是自定义主题颜色的需求有接触过的应该不多,至少我到今天是没有遇到类似的需求。之所以讲这个需求,是因为在我个人开发的开源项目中有做到这个需求,所以在这里和大家聊一聊我的实现。 在此之前我们需要先了解一下 CSS变量

    2024年02月11日
    浏览(51)
  • vue使用element-ui中日期选择器 (el-date-picker) 出现报错

    一、代码 二、报错 三、原因是 2.15.9这个版本有问题    四、解决办法-----版本降到2.15.8 即可 ① 卸载   npm uninstall element-ui  ②指定版本安装  npm install element-ui@2.15.8 ③ 查看版本即可 npm list  

    2024年02月16日
    浏览(52)
  • vue项目为例解决element ui 时间选择器 picker使用样式穿透不起作用问题

    今天在开发中 需要修改时间选择器弹出的这个组件的样式 但这个东西比较坑爹 首先 不能影响其他组件 就是其他组件用了时间选择器 不能受到我们写的样式的影响 那么 就只好穿透了 但你会发现 这东西是作用与body下的 就很坑 穿透我试了挺久的 不起作用 但官方文档有提供

    2024年02月05日
    浏览(41)
  • vue.js3 setup风格 element-ui 级联选择器clearCheckedNodes使用方法

    Cascader 级联选择器 | Element Plus 官方文档里提到可以清空选中节点,使用 clearCheckedNodes()方法:   具体用法: 1 先了解vue3 setup中怎么获取ref 获取方法非常简单,在需要获取的组件里写ref,在setup里定义同名空ref,就会自动获取了 定义ref: 在setup里定义同名空ref: 然后操作mu

    2024年02月12日
    浏览(41)
  • 记录vue项目使用element-ui中日期选择器 (el-date-picker) 出现报错!!!

    今天在vue项目中使用elementUI 时间组件时候遇到了一个问题 在我使用日期时间选择器时, 控制台报错!!!!!! 一开始我一直以为是我父组件传值到子组件出了问题,但是我这个组件没有传值呀,而且系统流程能真正运行,就是控制台报错了,虽说也不影响什么,但是总是

    2024年02月16日
    浏览(55)
  • ElementUI中的el-date-picker日期选择器的格式转换问题

    使用el-date-picker日期选择器选择的日期是string类型且是箭头所指的这种格式 1、在这个组件后面加上这两个,可以修改格式 2、在后端实体类上加上注解 即使前端的是string类型,但是通过json自带的格式匹配注解工具,将string转换成LocalDateTime类型 用npm下载一个moment.js 1、 2、在

    2024年02月12日
    浏览(57)
  • vue+elementui项目打包后部署到测试环境icon全部丢失【element-ui】大版本升级element-ui后,icon全部丢失

    问题:vue+elementui项目打包后部署到测试环境icon全部丢失【element-ui】大版本升级element-ui后,icon全部丢失 解决办法及原因: elementui在2.12版本中icon数量较之2.4.9版本的扩展2倍不止。原来webpack中对于字体loader的限制是limit10000,就会将字体转换为base64,2.12版本中字节已经超过

    2024年02月16日
    浏览(70)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包