V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
Terry05
V2EX  ›  分享创造

v-dialogs v2.1.3,简洁的指令式对话框插件

  •  
  •   Terry05 ·
    TerryZ · 2019-10-28 10:51:28 +08:00 · 2599 次点击
    这是一个创建于 1861 天前的主题,其中的信息可能已经有所发展或是发生改变。

    更新内容:

    • 使用 render 函数的方式完全重构插件
    • 修改 prop dialogCloseButton 名称为 closeButton
    • 修改 prop dialogMaxButton 名称为 maxButton
    • 新增 prop icon,设置是否显示消息类型图标
    • 新增 prop customClass,设置自定义样式的类名
    • 新增 prop shaking,设置对话框外部区域点击时,是否显示抖动的动画
    • 使用 Javascript Standard 语法标准对项目进行格式化

    v-dialogs

    一款基于 Vue2 的干净简洁的指令式对话框组件,它包含了 Modal、Alert、Mask 和 Toast 等功能形态

    实例和文档

    用法

    // include and install in main.js
    import Vue from 'vue'
    import vDialog from 'v-dialogs'
    Vue.use(vDialog)
    
    // in everywhere
    // Modal
    import UserProfile from './UserProfile.vue'
    this.$dlg.modal(UserProfile, {
      width: 400,
      height: 300,
      title: 'User Profile',
      params: {
        userId: 1,
        userName: 'Terry Zeng'
      },
      callback: data => {
        this.$dlg.alert(`Received message: ${data}`)
      }
    })
    
    // Alert
    this.$dlg.alert('message', callback, options)
    
    // Mask
    const key = this.$dlg.mask('Data loading, please hold on a moment...')
    // do some stuff
    job().then(resp => {
      // close mark layer when job done
      this.$dlg.close(key)
    })
    
    // Toast
    this.$dlg.taost('message', callback, options)
    

    modal

    2 条回复    2019-10-28 15:28:23 +08:00
    deathscythe
        1
    deathscythe  
       2019-10-28 14:23:44 +08:00
    不觉得放大窗口的按钮跟关闭按钮不水平对齐么?
    Terry05
        2
    Terry05  
    OP
       2019-10-28 15:28:23 +08:00
    @deathscythe 最大化的图标通常都会在中轴位置偏上,可以观察一下 Windows 窗口最大化的图标
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2595 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 03:52 · PVG 11:52 · LAX 19:52 · JFK 22:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.