基于Vue的Dialog对话框组件的实现

今天来实现一个基础的对话框组件~

演示

  • 点击open按钮打开对话框
  • 点击取消在控制台打印出“已取消”,并关闭对话框
  • 点击确定在控制台打印出“已确定”,并关闭对话框
    基于Vue的Dialog对话框组件的实现_第1张图片

API

  • mask:控制是否展示遮罩
  • info:对话框显示内容
  • icon:对话框提示图标,有success,error,info,question可选
  • cancelText:设置取消按钮文字
  • okText:设置确认按钮文字

事件

  • cancel:取消按钮的回调
  • ok:点击确定回调

基础组件dialog.vue

说明:在dialog组件最外层div上设置@click.stop是为了防止事件冒泡触发上层点击事件。 用require引入图片,否则在编译后是找不到图片的。







应用组件dialog-apply.vue







你可能感兴趣的:(vue,javascript)