vue element-ui 在el-tabs组件 最右侧添加按钮
需求:需要在tabs页签切换栏的最右边添加一个按钮。如图:实现方案:使用CSS来实现,css原理解释:1.如果div的position设置了relative属性,但是没有指定偏移量,则相当于默认的position:static;2.position:static 默认值,没有定位,元素出现在正常的流中;3.position:absolute 绝对定位 相对于定位方式不是static的第一个父元素进
·
需求:
需要在tabs页签切换栏的最右边添加一个按钮。如图:
实现方案:
使用CSS来实现,css原理解释:
1.如果div的position设置了relative属性,但是没有指定偏移量,则相当于默认的position:static;
2.position:static 默认值,没有定位,元素出现在正常的流中;
3.position:absolute 绝对定位 相对于定位方式不是static的第一个父元素进行定位(往上寻找参照元素,一直到根元素为止,即body);
代码如下:
<div style='position: relative;'>
<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
<el-tab-pane label="Tab页签标题1" name="first">Tab页签内容1</el-tab-pane>
<el-tab-pane label="Tab页签标题2" name="second">Tab页签内容2</el-tab-pane>
</el-tabs>
<el-button size='mini' style='position: absolute;right:10px;top:5px;'>右边按钮</el-button>
</div>
更多推荐
所有评论(0)