vue.jsvuejs3element-uielement-plus

How can I change the content of an element plus vuejs component?


I need to change the content of element plus components.

I tried using <template> and <slot>, but without success.

<ElInput v-model="form.name" placeholder="Nome">
  <template>
    <input class="intro-x login__input form-control py-3 px-4 block"
      type="text"
      autocomplete="off"
      tabindex="0"
      placeholder="Nome"
    >
  </template>
</ElInput>

Solution

  • If you want to pass some specific style to your component, you will need to use input-style as shown here. There is nothing similar to input-class so far, so you're stuck with something like this

    <template>
      <el-input
        v-model="form.name"
        :input-style="{ backgroundColor: 'red', height: '4rem' }"
        type="text"
        autocomplete="off"
        tabindex="0"
        placeholder="Nome"
      >
        <template>
          <input />
        </template>
      </el-input>
    </template>
    

    There are no other slots related.

    Meanwhile you can always hack the whole thing and style it with your own CSS as like this

    <style scoped>
    :deep(.el-input__inner) {
      background-color: teal;
      border: 2px solid coral;
    }
    </style>