vue에서 모달박스 구현(일반 작성방법)

이제 Vue에서 모달 상자를 구현하기 위한 일반적인 작성 권장 사항을 공유하겠습니다. 이는 좋은 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

요소 컴포넌트의 소스 코드를 살펴본 후, 모든 모달 상자가 실제로 유사한 방식으로 구현되었으며 주로 컴포넌트화에서 Vue의 양방향 바인딩을 사용하는 것을 발견했습니다. 코드:

<!--查看槽点对话框-->
<template lang="html">
 <transition name="el-fade-in-linear">
  <p draggable="true" @drag="mouseDrag" @dragend="mouseDragend" :style="dialogStyle" class="g-dialog-wrapper" v-show="myVisible">
   <p class="g-dialog-header">
    <p class="left">
     模态框
    </p>
    <p class="right">
     <i class="g-times-icon fa fa-times" @click="myVisible=false" aria-hidden="true"></i>
    </p>
   </p>
   <p class="g-dialog-container">
   </p>
  </p>
 </transition>
</template>
<script>
 export default {
  props: {
   visible: Boolean
  },
  created() {
  },
  data() {
   return {
    myVisible: this.visible,
  },
  computed: {},
  methods: {
  },
  components: {},
  watch: {
   myVisible: function (val) {
    this.$emit(&#39;update:visible&#39;, val)
   },
   visible: function (val) {
    this.myVisible = val
   }
  }
 }
</script>
<style lang="css" scoped>
</style>

위 코드의 주요 부분은 데이터 변경 사항을 모니터링하고 시간에 맞춰 업데이트하는 watch의 코드입니다. 그래서 사용하기가 매우 편리합니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vue 페이지 새로 고침 또는 이전 매개변수 손실 문제에 대한 해결 방법

vue 페이지를 떠난 후 함수 실행 인스턴스

vue 캐러셀 차트 플러그인 vue-concise- 사용 슬라이더

위 내용은 vue에서 모달박스 구현(일반 작성방법)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!