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

Question

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>

score 0 · Accepted Answer · answered Sep 19 '22 at 20:19

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>

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

1 Answers1