帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

轻量级可拖动Vue模态对话框组件

帝国模板之家 2022-03-02 网页特效 评论

描述:

Vue轻量级、响应式、可定制、可调整大小和可拖动的模态窗口和对话框组件。

使用:

1.导入并注册模态组件。

import VModal from 'vue-js-modal'
Vue.use(VModal)

2. 创建静态模态。

<template>
  <modal name="my--modal">
    This Is A Modal Window
  </modal>
</template>
export default {
  name: 'MyComponent',
  methods: {
    show () {
        this.$modal.show('my-modal');
    },
    hide () {
        this.$modal.hide('my-modal');
    }
  },
  mount () {
    this.show()
  }
}

3. 创建自定义对话框。

// register
Vue.use(VModal, { 
  dialog: true 
})
// in your app
<v-dialog />
this.$modal.show('dialog', {
  title: 'A Confirm Dialog',
  text: 'Confirm Dialog Message',
  buttons: [
    {
      title: 'Cancel',
      handler: () => {
        this.$modal.hide('dialog')
      }
    },
    {
      title: 'Confirm',
      handler: () => {
        alert('Like action')
      }
    },
    {
      title: 'Repost',
      handler: () => {
        alert('Repost action')
      }
    }
  ]
})

4. 模态组件默认配置选项。

name: {
  required: true,
  type: String
},
resizable: {
  type: Boolean,
  default: false
},
resizeEdges: {
  default: () => ['r', 'br', 'b', 'bl', 'l', 'tl', 't', 'tr'],
  validator: val =>
    ['r', 'br', 'b', 'bl', 'l', 'tl', 't', 'tr'].filter(
      value => val.indexOf(value) !== -1
    ).length === val.length,
  type: Array
},
centerResize: {
  type: Boolean,
  default: true
},
resizeIndicator: {
  type: Boolean,
  default: true
},
adaptive: {
  type: Boolean,
  default: false
},
draggable: {
  type: [Boolean, String],
  default: false
},
scrollable: {
  type: Boolean,
  default: false
},
focusTrap: {
  type: Boolean,
  default: false
},
reset: {
  type: Boolean,
  default: false
},
overlayTransition: {
  type: String,
  default: 'vm-transition--overlay'
},
transition: {
  type: String,
  default: 'vm-transition--modal'
},
clickToClose: {
  type: Boolean,
  default: true
},
classes: {
  type: [String, Array],
  default: () => []
},
styles: {
  type: [String, Array, Object]
},
minWidth: {
  type: Number,
  default: 0,
  validator(value) {
    return value >= 0
  }
},
minHeight: {
  type: Number,
  default: 0,
  validator(value) {
    return value >= 0
  }
},
maxWidth: {
  type: Number,
  default: Number.MAX_SAFE_INTEGER
},
maxHeight: {
  type: Number,
  default: Number.MAX_SAFE_INTEGER
},
width: {
  type: [Number, String],
  default: 600,
  validator(value) {
    return value === 'auto' || validateNumber(value)
  }
},
height: {
  type: [Number, String],
  default: 300,
  validator(value) {
    return value === 'auto' || validateNumber(value)
  }
},
shiftX: {
  type: Number,
  default: 0.5,
  validator(value) {
    return value >= 0 && value <= 1
  }
},
shiftY: {
  type: Number,
  default: 0.5,
  validator(value) {
    return value >= 0 && value <= 1
  }
}

5. 对话组件默认配置选项。

width: {
  type: [Number, String],
  default: 400
},
clickToClose: {
  type: Boolean,
  default: true
},
transition: {
  type: String
}

6. Event handlers.

  • @before-open
  • @opened
  • @before-close
  • @closed
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言