span标签的使用场景

目录

前言

一、span标签是什么？

二、span常用

1.可以嵌套a标签。

2.直接使用

3.加样式使用

4.加按钮使用

5.加a标签的综合使用

6.跟table结合使用

总结

前言

本篇章主要记录一下开发日常中，所常遇见的使用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的用法进行了简单的总结，主要是如何使用这个标签，以及如何加样式，它才会生效。