Element ui 修改下拉框 placeholder字体颜色

页面有一个级联选择器,数据是通过接口获取的,在编辑的时候输入框上需要显示选择的名称,因为数据是接口获取的,数据是绑定的id,就导致没有显示上。

这里分享一个简单的方法,那就是可以通过 placeholder这个障眼法来实现

思路:新建时,placeholder显示请选择,编辑的时候来修改placeholder的值就行了,是不是就达到页面上显示的目的了。

又有同学要问了,使用placeholder后,虽然页面显示了需要的数据,但是颜色和别的不一样了,不统一了,还是不完美。呃呃呃呃,那就直接修改placeholder颜色就搞定了。

当是新建的时候就使用默认的颜色,如果是编辑的时候就选择使用另一种颜色,加个判断使用不同的id,来更换颜色

修改placeholder颜色

注意:修改颜色,需要在外层加个id 或 class,不然就影响到别的了

做了下兼容

input:-moz-placeholder {   
    color: #333;   
}   
  
input:-ms-input-placeholder {   
    color: #333;   
}   
  
input::-webkit-input-placeholder {   
    color: #333;   
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
如果你想实现 Element UI框的复制功能,可以通过以下步骤来实现: 1. 安装 clipboard.js 库 ```bash npm install clipboard --save ``` 2. 引入 clipboard.js 库和 Element UI 组件 ```javascript import Clipboard from 'clipboard' import { Select, Option } from 'element-ui' ``` 3. 创建 Select 组件,并在 Option 上绑定复制事件 ```html <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" ref="option"> <span class="copy-btn" @click="copy(item.value)">复制</span> </el-option> </el-select> ``` 这里我们在 Option 组件上绑定了一个 copy 方法,并且在 copy 方法中调用了 clipboard.js 库来实现复制操作。 4. 在组件的 mounted 钩子函数中初始化 clipboard.js ```javascript mounted() { this.clipboard = new Clipboard('.copy-btn', { text: (trigger) => { return trigger.parentNode.querySelector('.el-select-dropdown__item span').textContent } }) }, ``` 这里我们通过初始化 clipboard.js 时,传入了一个 text 函数来指定复制的内容,这里我们获取了当前 Option 组件的文本内容作为复制的内容,可以根据实际需求来更改复制的内容。 5. 在组件的 beforeDestroy 钩子函数中销毁 clipboard.js ```javascript beforeDestroy() { this.clipboard.destroy() } ``` 这里我们在组件销毁前,通过 clipboard.destroy() 方法来销毁 clipboard.js 实例,避免内存泄漏。 这样就可以实现 Element UI框的复制功能了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值