The modal dialog box based on iview UI 2.0 is re-encapsulated and can be displayed through the v-modal attribute.

document

Attributes	illustrate	type	default value
value	Whether the dialog box is displayed or not, v-model can be used to bind data in two directions.	Boolean	false
center	Whether the text inside the pop-up box is centered	Boolean	crop
width	The width of the popup box	String	400
text	The text displayed inside the pop-up box	String	-

method

event name	illustrate	return value
on-cancel	Click cancel callback	crop
on-ok	Click OK callback	true
on-box	Triggered when display status changes	true / fasle

Encapsulated subcomponent

<style lang="less" scoped>
.p_text{
  padding: 20px 20px;
  font-size: 18px;
}
.p_text_center{
  padding: 20px 45px;
  font-size: 18px;
  text-align: center;
}

</style>

<template>
  <div>
    <Modal footer-hide v-model="visible" :width="modalWidth">
      <Row style="margin-top:20px;">
        <Col>
          <div :class="{'p_text':more,'p_text_center':few}">{
   
   {characters}}</div>
        </Col>
      </Row>
      <Row style="margin-top:20px;">
        <Col offset="8" >
          <Button type="primary" @click="affirm">确认</Button>
          <Button type="primary" style="margin-left:50px;" ghost @click="cancel">取消</Button>        
        </Col>
      </Row>
    </Modal>
  </div>
</template>

<script>
export default {
  props:{
    value:Boolean,
    center:Boolean,
    text:String,
    width:String
  },
  data(){
    return {
      more:!this.center, // 文字不居中
      few:this.center, // 文字居中
      characters:this.text,
      visible:false,
      modalWidth:this.width === undefined ? 400 : this.width
    }  
  },
  watch:{
    visible(newValue){
      this.$emit("on-box",newValue)
    },

    value(newValue){
      this.visible = newValue
    }
  },
  methods:{
    cancel(){
      this.$emit("on-cancel",false)
      this.$emit("update:value", false)
      this.visible = false
    },
    affirm(){
      this.$emit("on-ok",true)
      this.$emit("update:value", true)
      this.visible = false
    },
  }
}
</script>

Quote in the required component: Just set popUp = true when using it, or you can customize other fields.

<bouncedMessage v-model="popUp"  center :width="500" :text="'请确认是否修改？'" 
@on-ok="confirm" @on-cancel="onCancel" @on-box="onBox">
</bouncedMessage>

Note: Since it is registered globally in main.js, it does not need to be introduced separately and can be used directly.

Introduced in main.js

// 封装的组件路径
import bouncedMessage from "@/views/my-components/modal-to/bouncedMessage.vue"
Vue.component("bouncedMessage",bouncedMessage)

Effect: