在element-ui控件el-input中前面添加icon图标(通过template #prefix和template #suffix实现)

• 前端

在element-ui控件el-input中前面添加icon图标(通过template #prefix和template #suffix实现

  • 前言
  • 1、vue2中使用
    • 在input中使用属性添加
    • 对没有prefix-icon和suffix-icon属性的标签如：el-select，使用slot方式添加
  • 2、vue3+element-plus中使用

前言

官方文档

在el-input中可以通过 prefix-icon（首部）和 suffix-icon（尾部） 属性在 input 组件增加显示图标，也可以通过 slot 来放置图标。如下图：

在这里插入图片描述

在这里插入图片描述

1、vue2中使用

在input中使用属性添加

  
  
  
  



export default {
  data() {
    return {
      input1: '',
      input2: ''
    }
  }
}

对没有prefix-icon和suffix-icon属性的标签如：el-select，使用slot方式添加

  
    
  
  
    
  



export default {
  data() {
    return {
      input1: '',
      input2: ''
    }
  }
}

2、vue3+element-plus中使用

在这里插入图片描述在这里插入图片描述

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/5a98ae8f66.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐