span标签的使用场景

目录

前言

一、span标签是什么？

二、span常用

1.可以嵌套a标签。

2.直接使用

3.加样式使用

4.加按钮使用

5.加a标签的综合使用

6.跟table结合使用

总结

扫描二维码关注公众号，回复： 16999233 查看本文章

前言

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