Element-UI中slot的用法
程序员文章站
2022-03-16 12:44:03
...
在使用的时候,遇到了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表示在输入框的后方位置放置一个标签或者按钮;
上一篇: 2019年手机假机榜公布:三星W2018苦摘第一名
下一篇: ToDoList删除功能
推荐阅读
-
PHP中header函数的用法及其注意事项详解_php实例
-
CSS中!important的用法和在IE6下的表现_html/css_WEB-ITnose
-
代码实例说明php中switch的用法
-
PHP中的ob_start用法详解_PHP教程
-
详解Python中的循环语句的用法
-
Js中setTimeout()和setInterval() 何时被调用执行的用法_基础知识
-
php5中类属性的用法
-
element-ui 的el-button组件中添加自定义颜色和图标
-
浅谈keras中的目标函数和优化函数MSE用法
-
PHP中call_user_func_array()函数的用法演示_php入门_脚本之家