爱意满满的作品展示区。
Terry05

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

  •  
  •   Terry05 ·
    TerryZ · Oct 28, 2019 · 3382 views
    This topic created in 2390 days ago, the information mentioned may be changed or developed.

    更新内容:

    • 使用 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 replies    2019-10-28 15:28:23 +08:00
    deathscythe
        1
    deathscythe  
       Oct 28, 2019
    不觉得放大窗口的按钮跟关闭按钮不水平对齐么?
    Terry05
        2
    Terry05  
    OP
       Oct 28, 2019
    @deathscythe 最大化的图标通常都会在中轴位置偏上,可以观察一下 Windows 窗口最大化的图标
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5546 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 08:23 · PVG 16:23 · LAX 01:23 · JFK 04:23
    ♥ Do have faith in what you're doing.