Table des matières
1. Qu'est-ce que la balise span ?
2. Travées couramment utilisées
1. Une balise peut être imbriquée.
3. Ajoutez du style à utiliser
4. Ajouter un bouton à utiliser
5. Utilisation complète d'un tag
6. Utilisé en combinaison avec le tableau
Préface
Ce chapitre enregistre principalement les scénarios d'utilisation des balises span qui sont souvent rencontrés dans le développement quotidien.
1. Qu'est-ce que la balise span ?
La balise span est une balise en ligne utilisée pour combiner des éléments en ligne dans le document. Lorsque vous lui appliquez un style, cela crée un changement visuel. Il peut être divisé en plusieurs zones d’utilisation. La balise span est un élément en ligne et n'a pas d'effet de saut de ligne comme les éléments au niveau du bloc.
La balise span peut être définie avec un attribut id ou class, ce qui non seulement augmente la sémantique, mais facilite également l'application des éléments span. .
2. Travées couramment utilisées
1. Une balise peut être imbriquée.
Le code est le suivant (exemple) :
<span id=a></span>
<a href=javascript:setspan(1)>你好</a></br>
<a href=javascript:setspan(2)>hello/a></br>2. Utiliser directement
Le code est le suivant (exemple) :
<span class="highlight">你好呀</span>3. Ajoutez du style à utiliser
Il doit être utilisé en combinaison avec l'affichage. Il peut s'agir d'un bloc ou d'un bloc en ligne.
<span style="width:100px; display:inline-block; text-align:center;">你好呀</span>4. Ajouter un bouton à utiliser
<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. Utilisation complète d'un tag
<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. Utilisé en combinaison avec le tableau
<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>Résumer
Voici un bref résumé de l'utilisation de span, principalement comment utiliser cette balise et comment ajouter des styles pour qu'elle prenne effet.