iView的Modal的简单使用

iView的Modal的简单使用

iView的Modal官网地址

部分属性、方法说明，更多请上官网查看【来源官网截图】

直接代码

<template>
  <div style="height: 1000px">
     <!-- 第一个对话框（普通的） -->
    <Button @click="modal11 = true">普通版本</Button>
    <Modal
      v-model="modal11"
      title="信息提示"
      ok-text="你点不点确定"
      @on-ok="ok"
      @on-cancel="Cancel"
    >
      <div>普通提示框 1</div>
      <div>你可以选择确定或取消</div>
    </Modal>
	<!-- 第一种基础用法，通过控制属性`value`来显示 / 隐藏对话框。使用 v-model 实现双向绑定。当点击按钮时对v-modal绑定的数据进行改变，使对话框显示。 
        ok-text：改变确认按钮文字
        cancel-text：改变取消按钮文字--> 

	<!-- 第二个对话框（改版的） -->
	<Button @click="modal12 = true">变形改版</Button>
    <Modal
      ref="modal"
      v-model="modal12"
      draggable
      sticky
      scrollable
      title="Modal 2"
    >
      <div>变形改版 2</div>
      <div>你发现确认和取消位置改变了吗，还有什么不一样的呢</div>
      <div slot="footer">
        <Button type="primary" size="large" @click="submitOK">确定</Button>
        <Button type="text" size="large" @click="submitCancel">取消</Button>
      </div>
    </Modal>
	<!-- 第二种改版也是同第一种，通过控制属性`value`来显示 / 隐藏对话框。使用 v-model 实现双向绑定。当点击按钮时对v-modal绑定的数据进行改变，使对话框显示。 
        但是添加了draggable：修改弹窗是否可以拖拽移动
        sticky：拖拽时，是否吸附屏幕边缘 
        scrollable：页面是否可以滚动 
        自定义页脚内容，div 添加slot="footer" ，添加的页脚按钮需要写方法关闭弹窗 -->

	<!-- 第三个对话框（实例化的确认对话框） -->
    <Button @click="handleModal">你点我呀</Button>
	<!-- 实例以隐式创建 Vue 组件的方式在全局创建一个对话框，并在消失时移除，所以同时只能操作一个对话框。  -->

	<!-- 第四个对话框（实例化的） -->
    <Button @click="instance('info')">你点我呀Info</Button>
    <Button @click="instance('success')">你点我呀Success</Button>
    <Button @click="instance('warning')">你点我呀Warning</Button>
    <Button @click="instance('error')">点我点我Error</Button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      modal11: false,
      modal12: false,
    };
  },
  methods: {
    ok() {
      this.$Message.info('点击了确认');
    },
    Cancel() {
      this.$Message.info('点击了取消');
    },
    submitOK() {
      this.$Message.info('点击了确定');
      this.$refs.modal.close();
    },
    submitCancel() {
      this.$Message.info('点击了取消');
      this.$refs.modal.close();
    },
    handleModal() {
      this.$Modal.confirm({
        title: "确认对话框",
        content: "是否删除操作？",
        onOk: async () => {
          this.$Message.info('点击了确认');
        },
        onCancel: async () => {
          this.$Message.info('点击了取消');
        },
      });
    },
    instance(type) {
      const title = "Title";
      const content = "<p>你点我了呀</p>";
      switch (type) {
        case "info":
          this.$Modal.info({
            title: title,
            content: content,
          });
          break;
        case "success":
          this.$Modal.success({
            title: title,
            content: content,
          });
          break;
        case "warning":
          this.$Modal.warning({
            title: title,
            content: content,
          });
          break;
        case "error":
          this.$Modal.error({
            title: title,
            content: content,
          });
          break;
      }
    },
  },
};
</script>

复制代码改改看 ~_~

后续有更多发现会继续补充