element-plus输入框显示图标

最新推荐文章于 2024-08-20 14:24:16 发布

可爱小仙子

最新推荐文章于 2024-08-20 14:24:16 发布

阅读量3k

点赞数 2

分类专栏： vue 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/qq_42661587/article/details/122983164

版权

vue 专栏收录该内容

40 篇文章 4 订阅

订阅专栏

本文档展示了如何安装和使用Element Plus Icons-Vue库来创建一个带有搜索图标和输入框的组件。在Vue应用中，导入了Search图标并将其用作输入框的前缀，提供了一个基本的页面布局和样式。通过NPM、Yarn或pnpm进行安装，并在模板和脚本部分进行了详细展示。

摘要由CSDN通过智能技术生成

先安装icon

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

<template>
  <div class="page">
    <!--标题-->
    <lstitle title="基础设置" enTitle="Installation location"></lstitle>
    <!-- 条件框 -->
    <div class="conddiv">
      <el-input v-model="positioninp" class="w-50 m-2" placeholder="位置搜索" :prefix-icon="Search" style="width:200px;">
        <template #prefix>
          <el-icon class="el-icon--left">
            <Search />
          </el-icon>
        </template>
      </el-input>
    </div>
  </div>
</template>

<script>
import { Search } from '@element-plus/icons-vue'
export default {
  components: {
    Search
  },
  data() {
    return {
      positioninp: "",//位置
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  padding: 20px;
}
</style>