关于Element-UI中slot的用法及说明

Element-UI中slot用法

在使用的时候，遇到了slot的用法，在这里记录一下使用方法：

在使用复合型输入框的时候，我们需要在input输入框的前面或者后面添加一个符号或者button按钮

如何快速的添加文字或按钮并且不用再自己设置样式呢

slot设置了input可前置或后置元素，一般为标签或按钮。

看element-ui的示例

即可：

在图中1、2标注，我们可以看到具体的实现效果

如下：

在这里我们可以很清晰的看出来：

<el-input placeholder="请输入内容" v-model="input1">
    <template slot="prepend">Http://</template>
  </el-input>

prepend表示在输入框的前方位置放置一个标签或者按钮；

<el-input placeholder="请输入内容" v-model="input1">
    <template slot="append">Http://</template>
  </el-input>

append表示在输入框的后方位置放置一个标签或者按钮；

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。