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

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 
      type="text"
      autocomplete="off"
      tabindex="0"
      placeholder="Nome"
    >
  </template>
</ElInput>

CodePudding user response：

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>

CodePudding user response：

You can use <template #prepend> and <template #append>

const app = Vue.createApp({
  data() {
    return {
      input1: 0,
    };
  },
})
app.use(ElementPlus);
app.mount('#demo')

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"/>
<script src="//cdn.jsdelivr.net/npm/vue@3"></script>
<script src="//cdn.jsdelivr.net/npm/element-plus"></script>
<div id="demo">
  <el-input v-model="input1" placeholder="Please input">
    <template #prepend>
      <input 
        type="text"
        autocomplete="off"
        tabindex="0"
        placeholder="Nome"
      >
    </template>
  </el-input>
</div>