基于vue的modal实现（仿monday.com的modal）

基于vue的modal实现（仿monday.com的modal）

写modal要有一个父组件，一个子组件。父组件中点击打开modal，子组件中关闭nodal.
这里通过v-if来实现modal的打开和关闭。

父组件 mondayModal.vue

子组件mondayDialog.vue

实现效果：

要点1 ：(css样式)

modal的背景div和内容的div都要固定定位。

modal的背景：z-index: 999;

.modal-background{
  width: 100%;
  height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   background: #333;
   opacity: 0.9;
   z-index: 999;
   transition: all 2s ease-out;
}

modal的内容：z-index: 1000;

.content{
  width: 720px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%,0);
  padding: 60px 40px 40px;
  text-align: center;
  background: rgb(51, 51, 51);
  z-index: 1000;
  color: rgb(255, 255, 255)
}

右上角的折角效果：

.close-dialog{
  width: 60px;
  height: 60px;
  background: linear-gradient(45deg, rgb(120,120,120) 0%, rgb(120120, 120) 50%, rgb(52, 52, 52) 50%, rgb(34, 34, 34) 61%);
  border-radius: 0 0 0 5px;
  position: absolute;
  top: 0;
  right: 0;
}

重要的是：background: linear-gradient(45deg, rgb(120,120,120) 0%, rgb(120120, 120) 50%, rgb(52, 52, 52) 50%, rgb(34, 34, 34) 61%);

button移上的时候，颜色变暗：

button{
  opacity: 0.7;
}

要点2 ：通过vue的父子组件的通信，控制modal的打开关闭

父组件中

model通过 isShow 的值来确定是否显示，在父组件中点击来打开model.

点击打开dialog

父组件又将isShow的值传递给子组件，子组件中定义一个closeDia的方法，通过this.$emit(‘change’,val),将更改后的值传递给父组件，使model关闭。

  +

props: ['show'],
methods: {
  closeDia () {
    this.show = this.opendialog
    this.opendialog  = false
    this.$emit('change',this.opendialog)
  }
}

在子组件中不能直接更改父组件传递过来的show的值，所以先将show的值赋值给b，更改b的值，将b传递给父组件，在父组件中，再将b的值赋值给show，来关闭model。