Tabla de contenido
1. Se puede anidar una etiqueta.
5. Uso integral de una etiqueta
6. Utilizado en combinación con la mesa.
Prefacio
Este capítulo registra principalmente los escenarios de uso de etiquetas span que se encuentran a menudo en el desarrollo diario.
1. ¿Qué es la etiqueta span?
La etiqueta span es una etiqueta en línea que se utiliza para combinar elementos en línea en el documento. Cuando se le aplica un estilo, se crea un cambio visual. Se puede dividir en varias áreas para su uso. La etiqueta span es un elemento en línea y no tiene un efecto de salto de línea como los elementos a nivel de bloque.
La etiqueta span se puede configurar con un atributo id o class, lo que no solo aumenta la semántica, sino que también facilita la aplicación de elementos span. .
2. tramos de uso común
1. Se puede anidar una etiqueta.
El código es el siguiente (ejemplo):
<span id=a></span>
<a href=javascript:setspan(1)>你好</a></br>
<a href=javascript:setspan(2)>hello/a></br>2.Usar directamente
El código es el siguiente (ejemplo):
<span class="highlight">你好呀</span>3. Añade estilo para usar
Debe usarse en combinación con la pantalla y puede ser en bloque o en línea.
<span style="width:100px; display:inline-block; text-align:center;">你好呀</span>4. Agregar botón para usar
<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. Uso integral de una etiqueta
<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. Utilizado en combinación con la mesa.
<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>Resumir
Aquí hay un breve resumen del uso de span, principalmente cómo usar esta etiqueta y cómo agregar estilos para que surta efecto.