Element组件使用--自定义样式

1.前言：

1.Element是应用与vue中的组件库

组件 | Element

2.自定义样式

在获取组件后，我们可以进行css对其进行进一步的修饰。

方法如下：

1.el-input的修改

这里我使用了输入框与搜索框

1.可以从17行与22行看出，我们可以给目标一个class属性。然后就可以在相应的class的属性进行修改了。

2.但el-input 无法通过custom-input直接对其块长度进行修改。如果使用class设定width，变化的只会是选框。

所以要添加div将input包裹，这样对div的width就可以反应到input上了

2.el-nav修改

参数说明：

router：开启路由功能,没有添加默认为false

index：就是路由跳转的路径

3.icon的使用

效果：

对于icon的设置：

通过font-size设置其大小

完整代码

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <Nav />
    <div class="container">
      <div class="logo">
        <img
          :src="imagesrc"
          alt="图片"
        >
      </div>
      <div class="search">
        <div class="searchinput">
          <el-input
            v-model="input2"
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            class="custom-input"
          />
        </div>

        <el-button
          type="primary"
          icon="el-icon-search"
          class="custom-search"
        >
          搜索
        </el-button>

        <div class="shopping-icon">
          <i class="el-icon-s-goods" />
          <span>{{ itemNumber }}</span>
          <p>我的购物车</p>
        </div>
      </div>

      <div class="container">
        <div class="left" />
        <div class="right" />
      </div>


      <div class="tips" />
    </div>
  </div>
</template>

<script>
import Nav from "../../components/nav.vue";
export default {
  components: {
    Nav,
  },
  data() {
    return {
      imagesrc: require("../../assets/logp.jpg"),
      input2: "",
      itemNumber:"0",
    };
  },
};
</script>

<style>
.container {
  display: flex;
}

.logo {
  width: 30%;
  height: 150px;
}

.logo img {
  width: 100px;
  height: 100px;
  position: relative;
  left: 40%;
  top: 40%;
}

.search {
  width: 60%;
  height: 200px;
  display: flex;
  align-items: center;
}

.searchinput {
  width: 450px;
}

.custom-input{
  width: 100px;
}
.custom-search {
  width: 100px;
}

.custom-input {
  margin-right: 10px;
}

.shopping-icon{
  position: relative;
  display: flex;
  margin-left: 40px;
  width: 130px;
  height: 40px;
  align-items: center;
  border-width: 3px;
  border-style: solid;
  border-color: rgba(0, 0, 0, .12);
}

.shopping-icon span{
  width: 16px;
  height: 16px;
  background-color: gray;
  border-radius: 50px 50px 0 0;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  left: 20px;
  top: -1px;
  font-size: 10px;
}

.shopping-icon p{
  font-size: 16px;
  position: relative;
  /* top: 10px; */
}

.el-icon-s-goods{
  font-size: 35px;
}
</style>