el-input 里面插入图片
时间: 2023-11-06 22:54:36 浏览: 157
在el-input中插入图片需要使用CSS样式来实现。你可以使用background属性来设置背景图像,并通过设置background-position来控制图像的位置。在给el-input添加类名后,你可以使用该类名来定义样式,例如设置背景图像的位置和大小。下面是一个示例代码:
```css
.username .el-input__inner {
background: url(../img/user.png) no-repeat 10px center;
padding: 0px 50px;
width: 534px;
height: 66px;
font-size: 23px;
color: #dadada;
}
.password .el-input__inner {
background: url(../img/pass.png) no-repeat 10px center;
padding: 0px 50px;
width: 534px;
height: 66px;
font-size: 23px;
color: #dadada;
}
```
请注意,这只是一个示例代码,你需要根据你自己的项目路径和图片路径进行相应的修改。
相关问题
element el-input输入框插入文本
你可以使用 `el-input` 组件提供的 `prepend` 和 `append` 插槽来在输入框中插入文本或其他元素。下面是一个示例:
```html
<template>
<el-input v-model="inputValue" placeholder="请输入内容">
<template slot="prepend">http://</template>
<template slot="append">.com</template>
</el-input>
</template>
<script>
export default {
data() {
return {
inputValue: ''
}
}
}
</script>
```
上面的例子中,我们在 `el-input` 组件中使用了 `prepend` 和 `append` 插槽,并在插槽中分别插入了 `http://` 和 `.com`。这样,最终渲染出来的输入框会在左侧显示 `http://`,右侧显示 `.com`。当用户在输入框中输入内容时,`v-model` 绑定的 `inputValue` 会自动更新。
你也可以在 `prepend` 和 `append` 插槽中插入其他元素,例如图标、按钮等。只需要在插槽中添加相应的 HTML 元素即可。
鼠标放在el-input上面显示el-input里面的内容
可以使用element-ui提供的tooltip组件来实现鼠标悬停显示el-input里面的内容。具体实现方法如下:
1. 给el-input添加一个ref属性,方便后面获取该组件的值。
```html
<el-input ref="input" v-model="inputValue"></el-input>
```
2. 在template中添加tooltip组件,并设置为悬停时显示el-input的值。
```html
<el-tooltip effect="light" :content="inputValue" placement="top">
<el-input ref="input" v-model="inputValue"></el-input>
</el-tooltip>
```
3. 在script中定义inputValue变量,并在mounted生命周期中获取el-input的值。
```javascript
export default {
data() {
return {
inputValue: ''
}
},
mounted() {
this.inputValue = this.$refs.input.$el.querySelector('input').value
}
}
```
这样,当鼠标悬停在el-input上时,就会显示该输入框中的值。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)