vue+elementUi自定义select标签样式图标左侧右侧插槽背景图片大小selectoption/deep/::v-deeppositionabsolute

Posted 2022-04-30 web半晨

目录

• 1、HTML
• 2、JavaScript
• 3、css
• 4、相关链接

---

1、html

<template>
  <div id="app">
    <el-select
      class="selsect_box"
      v-model="value"
      placeholder="请选择"
      @change="changeSelectOption"
    >
      <!-- 自定义左侧图标 -->
      <template slot="prefix">
        <i class="el-icon-ice-drink"></i>
      </template>

      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>

---

2、javascript

export default 
  name: "App",
  data() 
    return 
      options: [
        
          value: "1",
          label: "黄金糕",
        ,
        
          value: "2",
          label: "双皮奶",
        ,
        
          value: "3",
          label: "蚵仔煎",
        ,
        
          value: "4",
          label: "龙须面",
        ,
        
          value: "5",
          label: "北京烤鸭",
        ,
      ],
      value: "",
    ;
  ,

  methods: 
    changeSelectOption(val) 
      console.log("val：", val);
      console.log("this.value：", this.value);
    ,
  ,
;

---

3、css

.selsect_box 
  width: 360px;


// 自定义el-input框的一些自定义样式
/deep/ .selsect_box .el-input--small .el-input__inner 
  background-color: #e6f0ff;
  padding-left: 40px;
  height: 50px;
  border-radius: 5px;
  color: #1890ff;
  font-size: 18px;
  border: 1px solid #1890ff;
  font-weight: 600;


// 自定义左侧图标插槽样式
::v-deep .selsect_box .el-input__prefix 
  display: flex;
  justify-content: center;
  align-items: center;


// 替换右侧默认图标
/deep/ .selsect_box .el-icon-arrow-up::before 
  content: "";
  background: url(./assets/icon/upperTriangle.png) center center no-repeat;
  background-size: 37px 37px;
  display: inline-block;
  position: absolute;
  width: 17px;
  height: 17px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px dotted #1890ff;


// placeholder属性的样式
/deep/ .selsect_box .el-input--small input::-webkit-input-placeholder 
  font-size: 16px;
  color: #2881ff;

---

4、相关链接

1、element-ui控件el-select如何在前面添加icon图标
2、Vue ElementUI el-select自定义图标，左右任意自定义加图标