Jacinda

Appearance

On this page
🎨 作者：Jacinda 📔 阅读量：

July ​

7月25日 ​

placeholder 样式修改 (elment-ui) ​

  • ❓ 问题描述

页面需求，由于用到 select 组件，需要把它的背景色全部换成透明，边框也去掉。以至于 输入框里的 placeholder 颜色修改不了

  • 💡 解决

placeholder 样式模板修改

css
.el-input__inner::placeholder {
    color: #fff;
    text-align:center;
}
    /* 谷歌 */
.el-input__inner::-webkit-input-placeholder {
    color: #fff;
    text-align:center;
}
    /* 火狐 */
.el-input__inner:-moz-placeholder {
    color: #fff;
    text-align:center;
}
    /*ie*/
.el-input__inner:-ms-input-placeholder {
    color: #fff;
    text-align:center;
}

H5页面左右晃动 ​

  • ❓ 问题描述

写H5页面时，把页面往左往右滑动，页面会晃动，拉出一大片空白，不固定。

举例，首页有轮播图，当把轮播图触碰向左滑动时，会带动整个页面进行晃动

  • 💡 解决

文件路径： /public/index.html

placeholder 样式模板修改

css
/* 禁止页面左右滑动 */
html {
    overflow: hidden;
    height: 100%;
    position: relative;
    overflow-y: auto;
}

判断数组对象中，所有属性，是否有值为空 ​

  • ❓ 问题描述

由于uniapp动态表单验证，涉及到数组部分过于复杂，以至于数组里每一个对象里的属性值要另外来判断

  • 💡 解决
javascript
// 判断对象里的属性是否为空 此方法可以单独使用
judgeObjectComplete(ObjectValue) {
    let flag = new Boolean()
    flag = true
    for (let key in ObjectValue) {
        if (ObjectValue[key]) {} else {
            flag = false;
            showToast('请把记录信息填写完整')
        }
    }
    if (!flag) {
        return false
    } else {
        return true
    }
},

// 用于传入需要判断的数组，调用上面的方法，返回 true/false
judgeListComplete(list) {
    let isNotComplete = list.findIndex(item => {
        return this.judgeObjectComplete(item) === false
    })
    if (isNotComplete > -1) {
        return false
    } else {
        return true
    }
},

// 表单提交
handleSubmit() {
    // 记录flag
    let fertilizeRecFlag = this.judgeListComplete(this.params.fertilizeRec.recorders)

    // 如果为 true，说明验证通过，属性里有值。
    if(fertilizeRecFlag) {
        // 与后端接口进行交互
    }
}

Copyright © 2023-present Jacinda