v-model을 사용하고 vue 팝업 구성 요소 구현을 약속하는 방법-JS 튜토리얼-php.cn

이번에는 v-model 사용 방법과 vue 팝업 컴포넌트 구현을 약속드립니다. v-model 사용 시 주의사항과 vue 팝업 컴포넌트 구현을 약속드립니다. 실제 사례를 살펴보겠습니다.

최근 회사에서 기존 백엔드 시스템에 작성된 백엔드 사업이 있는데, 이 사업을 위해 별도로 새로운 백엔드 시스템을 만들려면 이를 뽑아내야 하므로 Vue 컴포넌트 라이브러리는 기존 백엔드 시스템은 사용할 수 없습니다.(향후 이식 프로젝트에 문제가 발생하지 않도록 향후 시스템이 어떤 구성 요소 라이브러리를 기반으로 할지 모르기 때문입니다.) 내 사업에서는 수동으로 하나만 작성할 수 있었습니다. (비록 팝업 창 구성 요소는 매우 간단하지만 직접 요약하고 싶을 뿐입니다. 실수가 있으면 지적해 주시기 바랍니다.) 저는 전통적인 props와 $emit at을 사용했습니다. 먼저는 취소 콜백과 확인 콜백 2개의 로직이 흩어진 것 같아서 프라미스 2개를 사용했습니다. 콜백 방식은 콜백 2개를 함께 쓰는 것인데, 꼭 아이디어를 제공한다고 볼 수는 없습니다.

1. 개요

최종 호출 방식을 먼저 살펴보겠습니다

props $emit method

<chat-modal ref="chat-modal" v-model="showModal" cancelText="取消" sureText="确认" title="弹窗标题" small @on-ok="onOK" @on-cancel="onCancel">
  <p>slot的东西,想向弹窗中添加自定义的内容</p>
</chat-modal>
methods: {
  display() {
   this.showModal = true;//交互点击手动触发显示弹窗 
  },
  onOK() {},//点击确认的回调
  onCancel() {}//点击取消的回调
}

로그인 후 복사

promise callback method

<chat-modal ref="chat-modal"></chat-modal>
methods: {
  display() {
    this.$refs["chat-modal"].openModal({
      title: "弹窗标题",
      sureText: "确认",
      cancelText: "取消"
    }).then(res => {
      //点击确认的回调
    }, res => {
      //点击取消的回调
    })
  }
}

로그인 후 복사

두 번째 방식의 장점은 모든 로직이 중앙 집중화된다는 것입니다. 방법을 찾아보세요.

2. 컴포넌트의 소스 코드를 살펴보세요

팁: 스타일이 좀 안좋네요...

<template>
  <p>
    <p class="shadow" v-show="showModal"></p>
    <p class="modal" :class="{&#39;smSize&#39;: otherText.small || small}" v-show="showModal">
      <p class="header">{{ otherText.title || title}}</p>
      <p class="body">
        <slot></slot>
      </p>
      <p class="footer">
        <p class="item success" id="sure" ref="sure" @click="makeSure" v-show="otherText.sureText || sureText">{{ otherText.sureText || sureText }}</p>
        <p class="item red" id="cancel" ref="cancel" @click="makeCancel" v-show="otherText.cancelText || cancelText">{{ otherText.cancelText || cancelText }}</p>
      </p>
    </p>
  </p>
</template>
<script>
//此组件提供两种调用方法,可以在组件上v-model一个表示是否显示弹窗的对话框，然后需要的一些值通过props传入，然后$emit在组件上@监听做回调
//第二中方法所有的传值回调都只需要在组件内部的一个方法调用然后在组件外部this.$refs[xxx].open调用然后.then触发回调，比上一种方便些
var initOtherText = {
  sureText: "",
  cancelText: "",
  title: "",
  small: false
};
export default {
  props: {
    title: {
      type: String
    },
    sureText: {
      type: String
    },
    cancelText: {
      type: String
    },
    value: {
      type: Boolean
    },
    small: {
      type: Boolean
    }
  },
  watch: {
    value(newVal) {
      this.showModal = newVal;
    }
  },
  data() {
    return {
      otherText: JSON.parse(JSON.stringify(initOtherText)),
      showModal: this.value
    };
  },
  methods: {
    makeSure() {
      this.$emit("on-ok");
      this.$emit("input", false);
    },
    makeCancel() {
      this.$emit("on-cancel");
      this.$emit("input", false);
    },
    openModal(otherText) {
      this.otherText = { ...otherText };
      this.showModal = true;
      var pms = new Promise((resolve, reject) => {
        this.$refs["sure"].addEventListener("click", () => {
          this.showModal = false;
          resolve("点击了确定");
        });
        this.$refs["cancel"].addEventListener("click", () => {
          this.showModal = false;
          reject("点击了取消");
        });
      });
      return pms;
    }
  }
};
</script>
<style lang="scss" scoped>
.shadow {
  background-color: rgba(0, 0, 0, 0.5);
  display: table;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  transition: opacity 0.3s ease;
  width: 100%;
  z-index: 50;
}
.modal {
  display: table-cell;
  vertical-align: middle;
  overflow-x: hidden;
  position: fixed;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.33) 0px 2px 8px;
  border-radius: 5px;
  outline: 0px;
  overflow: hidden;
  transition: all 0.3s ease;
  width: 600px;
  height: 400px;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -300px;
}
.header {
  align-items: center;
  background-color: #62a39e;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
  color: #fff;
  font-weight: bold;
  display: -ms-flexbox;
  display: flex;
  height: 3.5rem;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}
.body {
  align-items: center;
  padding: 1.5rem;
}
.footer {
  justify-content: flex-end;
  padding: 1.5rem;
  position: absolute;
  bottom: 0;
  width: 100%;
  float: right;
}
.item {
  color: white;
  text-align: center;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  display: inline-block;
}
.info {
  background-color: #2196f3;
}
.success {
  background-color: #62a39e;
}
.red {
  background-color: #e95358;
}
.smSize {
  height: 200px;
}
</style>

로그인 후 복사

먼저 첫 번째 방법을 분석하세요. 호출자는 변수를 v에 바인딩해야 합니다. - 팝업 창 표시 여부를 나타내기 위해 구성 요소 외부(예: showModal)에 모델을 표시할 때 구성 요소 외부에 this.showModal = true 를 수동으로 설정해야 합니다. 이 값을 value: {type: Boolean } 으로 사용하는 속성을 정의하는 동시에 외부에서 전달된 props 값을 동기화하기 위해 구성 요소 내부에 변수가 선언됩니다. 기본값은 showModal: this.value입니다. 내부적으로 선언된 값은 showModal이라고도 함)이며 동기화 감시에서 모니터링됩니다. watch: { value(newVal) { this.showModal = newVal } } ;그런 다음 구성 요소 내부의 showModal 값을 DOM에 바인딩합니다. 표시하거나 숨겨야 하는 요소입니다. 구성 요소 내부의 확인 및 닫기 버튼을 클릭하면 이벤트가 발생합니다. this.showModal = true ,组件内部props定义一个属性来接这个值为 value: {type: Boolean} ,同时在组件内部在用声明一个变量用来同步外部传进来的props值默认值为 showModal: this.value (内部声明的值也叫了showModal)，在watch中监听进行同步 watch: { value(newVal) { this.showModal = newVal } } ;然后把组件内部的这个showModal值绑定在需要显示或者隐藏的DOM元素上。向外抛出事件的时候是在点击组件内部的确定与关闭按钮时候

makeSure() {
      this.$emit("on-ok");
      this.$emit("input", false);
    },
makeCancel() {
      this.$emit("on-cancel");
      this.$emit("input", false);
    }

로그인 후 복사

this.$emit("on-ok");this.$emit("on-cancel"); 这两句的是向外抛出事件在组件外部@接一下然后写自己需要的回调函数。这时就可以实现弹窗的显示与隐藏了，你可能发现并没有一句代码去设置this.showModal = false;弹窗就隐藏了。主要是因为这几句代码 v-model = 'showModal' 和组件内部的 props: {value: {type: Boolean}} this.$emit("input", false) 。v-model其实是vue的语法糖, <chat-modal v-model="showModal"> 其实可以写为 <chat-modal :value="showModal" @input="showModal = arguments[0]"> 所以要求我们在组件内部必须规定props的名字必须为value, 然后在组件内部触发确定或者取消的时候在组件内部触发 this.$emit("input", false) 这样实现了直接隐藏弹窗而不必打扰用户让用户在组件外部在手动将showModal置为false.

然后来看promise的方式：第一种方式传进来的值都通过props来接的，这种方式通过在组件内部定义了另一个对象来接传进来的值,

var initOtherText = {
  sureText: "",
  cancelText: "",
  title: "",
  small: false
};
otherText: JSON.parse(JSON.stringify(initOtherText)),

로그인 후 복사

然后在menthods里定义了一个名为openModal的方法,然后把传进来的一系列参数赋值给组件内部的对象 this.otherText = { ...otherText }; this.showModal = true; 并且将showModal置为true,然后每次触发的时候新建一个promise对象，里面的异步事件为点击确定和取消的两个点击事件,这里要操作DOM了

this.$refs["sure"].addEventListener("click", () => {
  this.showModal = false;
  resolve("点击了确定");
});

로그인 후 복사

获取确定按钮的DOM元素绑定点击事件，回调里将showModal置为false并且resolve,

this.$refs["cancel"].addEventListener("click", () => {
  this.showModal = false;
  reject("点击了取消");
});

로그인 후 복사

获取取消按钮的DOM绑定点击事件，回调里reject.

遇到的坑

这之前遇到了一个坑，因为第一次已经绑定了点击事件，第二次resolve和reject就会失败，本想取消一下绑定事件，但是因为将整个弹窗v-show="showModal"

this.showModal = true;
var pms = new Promise((resolve, reject) => {
  this.$refs["sure"].addEventListener.xxx//省略
});
return pms;

로그인 후 복사

this.$emit("on-ok");this.$emit("on-cancel")  code> 이 두 문장은 이벤트를 내보내고 구성요소 외부에서 이를 선택한 다음 필요한 것을 작성하는 것입니다 콜백 기능 🎜. 이때 팝업창을 표시하거나 숨길 수 있습니다. this.showModal = false로 설정하는 코드가 없는 경우도 있습니다. 주로 구성 요소 내부의 v-model = 'showModal' 및 props: {value: {type: Boolean}} this.$emit("input", false) 코드 줄 때문입니다. v-model은 실제로 vue의 구문 설탕입니다. <chat-modal v-model="showModal"> 는 실제로 <chat-modal :value="showModal"로 작성할 수 있습니다. @ input="showModal = 인수[0]"> 따라서 props의 이름이 컴포넌트 내부의 값이어야 함을 지정하고 확인 또는 취소 시 컴포넌트 내부에서 이를 트리거해야 합니다. $emit("input", false) 이 방법을 사용하면 사용자를 방해하지 않고 팝업 창을 직접 숨길 수 있으며 사용자가 구성 요소 외부에서 showModal을 false로 수동으로 설정할 수 있습니다.🎜 🎜다음 promise 메소드를 살펴보세요. 첫 번째 메소드 전달된 값은 모두 props를 통해 수신됩니다. 이런 식으로 전달된 값을 수신하기 위한 또 다른 객체가 구성 요소 내부에 정의됩니다. 🎜this.$refs["chat-modal"].openModal({
  title: "服务小结",
  sureText: "提交并结束",
  cancelText: "取消"
  }).then();
로그인 후 복사
로그인 후 복사
🎜 그런 다음 openModal이라는 메소드는 다음과 같습니다. menthods에서 정의한 다음 this.otherText = { ...otherText }; this.showModal = true 내의 객체에 일련의 매개변수를 할당하고 showModal을 true로 설정합니다. 그런 다음 객체가 트리거될 때마다 새 Promise를 생성합니다. 내부의 비동기 이벤트는 OK 클릭과 취소의 두 클릭 이벤트입니다. 여기서는 클릭 이벤트를 바인딩하기 위해 DOM🎜rrreee🎜OK 버튼의 DOM 요소를 가져와야 합니다. . 콜백에서 showModal을 false로 설정하고 🎜rrreee🎜get 취소 버튼의 DOM에 클릭 이벤트를 바인딩합니다. 거부 콜백에서 발생한 함정.🎜🎜🎜🎜🎜🎜🎜🎜전에 클릭 이벤트가 처음으로 바인딩되었고 두 번째로 해결하고 거부하기 때문에 바인딩 이벤트를 취소하고 싶었지만 전체 팝업 창 v-show="showModal "가 표시되었습니다. 없음; 전체 DOM을 수동으로 바인딩 해제할 필요가 없었습니다. 두 번째는 팝업창을 숨기기 위해 v-if를 사용할지 v-show를 사용할지에 대한 것입니다. 처음에는 v-if를 사용했는데 이 단계에서 알게 되었습니다🎜this.showModal = true;
var pms = new Promise((resolve, reject) => {
  this.$refs["sure"].addEventListener.xxx//省略
});
return pms;
로그인 후 복사
로그인 후 복사
将showModal置为true时然后就去绑定事件这时候还没有DOM还没有解析玩DOM树上还没有,要不就得用this.$nextTick增加了复杂度，最后采用了v-show；
关于优先级问题
如果既在组件上用prop传了值(title,sureText之类的)如 <chat-modal" title="xx" sureText="xxx"></chat-modal> 也在方法里传了
this.$refs["chat-modal"].openModal({
  title: "服务小结",
  sureText: "提交并结束",
  cancelText: "取消"
  }).then();
로그인 후 복사
로그인 후 복사
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
如何使用Vue内父子组件通讯todolist组件

如何使用Vue整合AdminLTE模板