文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue对话框组件使用方法详解

2024-04-02 19:55

关注

本文实例为大家分享了Vue对话框组件的使用,供大家参考,具体内容如下

效果如下图所示:(整体样式模仿ant-design-vue Modal样式,同时阴影覆盖浏览器窗口)

①创建组件Dialog.vue:

<template>
  <div class="m-dialog-mask">
    <div class="m-modal">
      <div class="m-modal-content">
        <div @click="onClose" class="u-close">&#10006;</div>
        <div class="m-modal-header">
          <div class="u-head">{{ title }}</div>
        </div>
        <div class="m-modal-body">
          <p>{{ content }}</p>
        </div>
        <div class="m-modal-footer" v-show="footer">
          <button class="u-cancel" @click="onCancel">{{ cancelText }}</button>
          <button class="u-confirm" @click="onConfirm">{{ okText }}</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Dialog',
  props: {
    title: { // 
      type: String,
      default: '提示'
    },
    content: { // 内容
      type: String,
      default: ''
    },
    cancelText: { // 取消按钮文字
      type: String,
      default: '取消'
    },
    okText: { // 确认按钮文字
      type: String,
      default: '确定'
    },
    footer: { // 是否显示底部按钮,默认显示
      type: Boolean,
      default: true
    }
  },
  methods: {
    onClose () {
      this.$emit('close')
    },
    onCancel () {
      this.$emit('cancel')
    },
    onConfirm () {
      this.$emit('ok')
    }
  }
}
</script>
<style lang="less" scoped>
.m-dialog-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000000;
  background: rgba(0,0,0,0.45);
  .m-modal {
    width: 720px;
    position: relative;
    top: calc(50% - 240px);
    margin: 0 auto;
    .m-modal-content {
      position: relative;
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 4px 12px rgba(0,0,0,.1);
      .u-close {
        position: absolute;
        top: 16px;
        right: 24px;
        color: rgba(0,0,0,.45);
        font-size: 18px;
        line-height: 22px;
        cursor: pointer;
        transition: color .3s;
        &:hover {
          color: rgba(0,0,0,.75);
        }
      }
      .m-modal-header {
        height: 22px;
        padding: 16px 24px;
        color: rgba(0,0,0,.65);
        border-radius: 4px 4px 0 0;
        border-bottom: 1px solid #e8e8e8;
        .u-head {
          margin: 0;
          color: rgba(0,0,0,.85);
          font-weight: 500;
          font-size: 16px;
          line-height: 22px;
          word-wrap: break-word;
        }
      }
      .m-modal-body {
        height: 324px;
        padding: 24px;
        font-size: 16px;
        line-height: 1.5;
        word-wrap: break-word;
      }
      .m-modal-footer {
        padding: 10px 16px;
        text-align: right;
        border-top: 1px solid #e8e8e8;
        .u-cancel {
          height: 32px;
          line-height: 32px;
          padding: 0 15px;
          font-size: 16px;
          border-radius: 4px;
          color: rgba(0,0,0,.65);
          background: #fff;
          border: 1px solid #d9d9d9;
          cursor: pointer;
          transition: all .3s cubic-bezier(.645,.045,.355,1);
          &:hover {
            color: #40a9ff;
            border-color: #40a9ff;
          }
        }
        .u-confirm {
          margin-left: 8px;
          height: 32px;
          line-height: 32px;
          padding: 0 15px;
          font-size: 16px;
          border-radius: 4px;
          background: #1890ff;
          border: 1px solid #1890ff;
          color: #fff;
          transition: all .3s cubic-bezier(.645,.045,.355,1);
          cursor: pointer;
          &:hover {
            color: #fff;
            background: #40a9ff;
            border-color: #40a9ff;
          }
        }
      }
    }
  }
}
</style>

②使用Dialog组件弹出对话框:

<Dialog
      title="Title"
      :content="content"
      :footer="true"
      cancelText="取消"
      okText="确认"
      @close="onClose"
      @cancel="onCancel"
      @ok="onConfirm"
      v-show="showDialog"
      />
 
import Dialog from '@/components/Dialog'
components: {
    Dialog
},
data () {
    return {
        showDialog: false,
     content: '',
    }
},
methods: {
    onDialog (content) { // 调用Dialog弹出对话框
      this.content = 'Content of the modal ...'
      this.showDialog = true
    },
    onClose () { // 关闭dialog
      this.showDialog = false
    },
    onCancel () { // “取消”按钮回调
      this.showDialog = false
    },
    onConfirm () { // “确定”按钮回调
      this.showDialog = false
    }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯