Qu'est-ce que le transfert de code
Dans Vue, le transfert de code consiste à transférer une certaine partie du code de la balise de modèle de Vue vers un emplacement spécifié, qui se trouve généralement sous la balise body. Lorsque vous utilisez Vue pour écrire l'interface, nous écrivons tous un div dans le corps de html, puis spécifions un identifiant, puis écrivons notre code d'interface dans le modèle de l'instance de Vue, puis laissons Vue nous aider à convertir le dom dans le modèle Les éléments sont rendus sur l'interface. Comme suit:
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
template:
`
<div>
...界面描述
</div>
`
});
const vm = app.mount('#root');
</script>
À partir du code ci-dessus, nous pouvons voir que les éléments dom que nous rendons dans la balise de modèle de l'instance de Vue seront montés sous la div dont l'id est root dans le corps, comme indiqué dans la figure ci-dessous : Cela peut déjà compléter la plupart des exigences de description de l'interface, mais il y a une sorte
de La scène a besoin de nous pour résoudre, c'est-à-dire que lorsque nous supprimons un contenu, afin d'empêcher l'utilisateur de toucher accidentellement, une boîte de dialogue apparaîtra, puis il y aura un masque couvrant toute la fenêtre derrière la boîte de dialogue. En supposant que notre div d'affichage est très petit, le masque ne peut être affiché que dans notre div actuel, comme le montre la figure ci-dessous :
Après avoir cliqué sur le bouton pour afficher le masque :
Nous avons constaté que ce masque ne peut pas couvrir toutes les zones de la fenêtre, ce qui ne répond évidemment pas aux exigences, car tous nos codes d'interface seront montés dans le div avec id="root" dans la balise body, si le div sous ce div Si la taille de l'interface est fixe, alors la taille de la couche de masque sera limitée. Il est préférable de mettre la couche de masque dans la balise body, afin que la couche de masque ne soit pas limitée par la taille du DIV parent. Ensuite notre code est écrit dans le template, comment le transférer dans la balise body, c'est le contenu de cet article teleport.
Exemple d'analyse
Pour montrer un exemple de téléportation Vue, nous avons écrit un bloc vert au centre de l'interface, représentant notre interface utilisateur, avec un bouton qui affiche le masque lorsqu'il est cliqué. Comme indiqué ci-dessous:
Cette exigence peut être réalisée en utilisant la technologie de transmission de code, le code est le suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>传送门</title>
<style>
.area{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 300px;
background: green;
}
.mask{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #000;
opacity: 0.5;
color: #ffff;
font-size: 100px;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<div id="hello"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return{
show:false,
message:'hello world'
}
},
methods:{
handleClick(){
this.show = !this.show;
}
},
template:
`
<div class="area">
<button @click="handleClick">点击显示蒙层</button>
<teleport to="#hello">
<div class="mask" v-show="show">
{
{message}}
<div>海塔灯</div>
</div>
</teleport>
</div>
`
});
const vm = app.mount('#root');
</script>
Résultats en cours :
nous pouvons voir que le code de masque défini sous le modèle est transféré dans la balise body, et la mise en œuvre du code transféré est également très simple, c'est-à-dire, utilisez
<teleport to="#hello">要传送的内容</teleport>
Sur la balise de téléportation, vous pouvez utiliser to="label or id". Si vous voulez l'envoyer au corps, utilisez to="body". Si vous voulez l'envoyer à la div correspondant à l'id spécifié, utilisez to ="#id nom "formulaire