Comment utiliser Vue pour implémenter le composant PopupWindow

Cette fois, je vais vous montrer comment utiliser Vue pour implémenter le composant PopupWindow. Quelles sont les précautions pour utiliser Vue pour implémenter le composant PopupWindow. Voici un cas pratique, jetons un coup d'œil.

J'ai appris la technologie front-end pendant cette période pour réaliser mes propres petits projets. En termes de js, le framework Vue est utilisé. Puisque je voulais obtenir l'effet PopupWindow d'une nouvelle adresse dans le projet, j'ai pensé que je pourrais utiliser certaines fonctionnalités de Vue pour y parvenir.

Fonctionnalités Vue utilisées : composant, accessoiresvaleur, insertion de contenu de slot, animation de transition de transitions, modèle x-templete.

Téléchargez le code directement (le code complet peut être téléchargé dans la fenêtre contextuelle du lien) :

code html (sans style) :

<p id="address-choose">
 <p>
 <button @click="showOneBtnWindow()">显示</button>
  </p>
  <new-address-window 
   v-show="isShowEditWindow" 
   @close="removeEditWindow()" 
   :addressregion="addressRegion">
   <!--使用插槽显示不同的title-->
   <p slot="edit-window-title">
   {{editTitle}}
   </p>
   <p slot="popup-btn-container">
   <button>保存</button> 
   <button>删除</button>
  </p>
  </new-address-window>
 </p>
<!--新建地址popupwindow模板-->
<script type="text/x-template" id="popup-window-address-new">
 <transition name="popup-window-transition">
 <p>
  <slot name="edit-window-title">
  <p>新建收货地址</p>
  </slot> 
 </p>
 <p>
 <p>收货人</p>
 <input type="text" :value="addressregion.name"/>
 </p>
 <p>
 <p>选择地区</p>
 <ul>
  <li>{{addressregion.province}}</li>
  <li>{{addressregion.city}}</li>
  <li>{{addressregion.region}}</li>
 </ul>
 </p>
 <p>
 <p>联系电话</p>
 <input type="text" placeholder="手机号"/>
 </p>
 <p>
  <p>详细地址</p>
  <input type="text" placeholder="如街道、楼层、门牌号等"/>
 </p>
 <p>
 <p>邮政编码</p>
 <input type="text" placeholder="邮政编码(选填)"/>
 </p>
 <p>
 <slot name="popup-btn-container">
  <button class="btn btn-success">保存</button>
  <button class="btn btn-danger">删除</button>
 </slot>
 </p>
 </p>
 </transition>
</script>

code js :

/*
 * 新建与编辑地址Vue组件popupwindow
 * */
var newAddressWindow = Vue.component("new-address-window",{
 props: ['addressregion'],
 template: "#popup-window-address-new"
})
/*
 * 地址popupwindow的Vue实例
 * */
var chooseAddress = new Vue({
 el: "#address-choose",
 data: {
 isShowEditWindow: true,
 isOneButton: false,
 editTitle: "新建收货地址",
 //填入初始地址信息，组件与改数据绑定
 addressRegion: {
 }
 },
 methods: {
 showOneBtnWindow: function(){ //显示新建收货地址对话框（有一个按钮）
  this.isShowEditWindow = true;
  this.isOneButton = false;
  this.editTitle = "新建收货地址";
 }，
 removeEditWindow: function(){ //关闭新建与编辑地址选择对话框
  this.isShowEditWindow = false;
 }
 }
})

À ce stade, un composant popupwindow est terminé. Lors de l'implémentation d'un composant Vue, vous pouvez utiliser un modèle pour implémenter le composant. J'ai utilisé le modèle x-templete pour implémenter le composant. En même temps, vous pouvez également utiliser la fonctionnalité de transition de vue pour ajouter des effets d'animation dans le composant. .

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser jQuery pour obtenir un effet d'horloge électronique

Comment utiliser Vue nextTick

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!