目录
前言
本篇章主要记录一下开发日常中,所常遇见的使用span标签的场景。
一、span标签是什么?
span标签是行内标签,被用来组合文档中的行内元素。当对它应用样式时,它会产生视觉上的变化。它可以划分为好几个区域来使用。span标签是内联元素,不像块级元素那样有换行的效果,
span标签可以设置id或class属性,这样不仅能增加语义,还能更方便的对span元素应用。
二、span常用
1.可以嵌套a标签。
代码如下(示例):
<span id=a></span>
<a href=javascript:setspan(1)>你好</a></br>
<a href=javascript:setspan(2)>hello/a></br>
2.直接使用
代码如下(示例):
<span class="highlight">你好呀</span>
3.加样式使用
它是要结合display来使用才行,可以是block,也可以是inline-block。
<span style="width:100px; display:inline-block; text-align:center;">你好呀</span>
4.加按钮使用
<span slot="action" slot-scope="record" >
<a-button type="primary" @click="examin(record)" v-if="record.status==='N'">通过</a-button>
<a-button type="primary" @click="checkDetail(record)">详情1</a-button>
<!-- <a href="javascript:;" @click="reject(record)">详情2</a> -->
</span>
5.加a标签的综合使用
<span slot="action" slot-scope="text,records">
<a-dropdown>
<a class="ant-dropdown-link" @click="e => e.preventDsdefeasefault()">
操作<a-icon type="down" />
</a>
<a-menu slot="overlay">
<a-menu-item >
<a-button type="primary" block icon="play-circle" @click="showPushsInfos(record.orderNo)">查询</a-button>
</a-menu-item>
<a-menu-item v-if="records.status =='970' || records.status =='988'" >
<a-popconfirm okText="确定" cancelText="取消" title="确定恢复?" @confirm="() => resumeOrder(record.orderNo)">
<a-button type="primary" block icon="play-circle">恢复</a-button>
</a-popconfirm>
</a-menu-item>
<a-menu-item v-if="records.status!='922'">
<a-popconfirm okText="确定" cancelText="取消" title="确定更改?" @confirm="() => pausessOrder(records.orderNo)">
<a-button type="primary" block icon="pause-circle">更改</a-button>
</a-popconfirm>
</a-menu-item>
<a-menu-item >
<a-popconfirm okText="确定" cancelText="取消" title="确定取消?" @confirm="() => cancelwrrsfOrder(records.orderNo)">
<a-button type="primary" block icon="pauszfe-circle">取消</a-button>
</a-popconfirm>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
6.跟table结合使用
<a-table border
:size="small"
:columns="columns"
:rowKey="records => records.id"
:dataSource="dataSource"
:pagination="false"
:loading="loading"
:scroll="{ x: 1050}">
<span slot="action" slot-scope="record">
<a-popconfirm okText="放开" v-if="record.mstCustNo" cancelText="取消" title="确定放开?" @confirm="() => removeCust(record)">
<a-button type="danger">放开</a-button>
</a-popconfirm>
<a-button type="primary" v-else @click="setCust(record)">绑定</a-button>
</span>
</a-table>
总结
这里主要针对span的用法进行了简单的总结,主要是如何使用这个标签,以及如何加样式,它才会生效。