All Projects → mjixiang → vue-dialog

mjixiang / vue-dialog

Licence: other
A drag-able dialog for Vue.js

Programming Languages

Vue
7211 projects

Projects that are alternatives of or similar to vue-dialog

plain-modal
The simple library for customizable modal window.
Stars: ✭ 21 (+0%)
Mutual labels:  drag, dialog, popup
Popmodal
jquery plugin for showing tooltips, titles, modal dialogs and etc
Stars: ✭ 149 (+609.52%)
Mutual labels:  dialog, popup
react-spring-bottom-sheet
Accessible ♿️, Delightful ✨, & Fast 🚀
Stars: ✭ 604 (+2776.19%)
Mutual labels:  dialog, popup
Pmalertcontroller
PMAlertController is a great and customizable alert that can substitute UIAlertController
Stars: ✭ 2,397 (+11314.29%)
Mutual labels:  dialog, popup
Svelte Simple Modal
A simple, small, and content-agnostic modal for Svelte v3
Stars: ✭ 130 (+519.05%)
Mutual labels:  dialog, popup
Jquery Confirm
A multipurpose plugin for alert, confirm & dialog, with extended features.
Stars: ✭ 1,776 (+8357.14%)
Mutual labels:  dialog, popup
Sweetalert2
A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.
Stars: ✭ 13,929 (+66228.57%)
Mutual labels:  dialog, popup
Jbox
jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.
Stars: ✭ 1,251 (+5857.14%)
Mutual labels:  dialog, popup
vue-modal
A customizable, stackable, and lightweight modal component for Vue.
Stars: ✭ 96 (+357.14%)
Mutual labels:  dialog, popup
Nativepopup
Clone of Apple iOS App's feedback popup, and easily customizable.
Stars: ✭ 247 (+1076.19%)
Mutual labels:  dialog, popup
Jxpopupview
一个轻量级的自定义视图弹出框架
Stars: ✭ 117 (+457.14%)
Mutual labels:  dialog, popup
LSDialogViewController
Custom Dialog for iOS written in Swift
Stars: ✭ 74 (+252.38%)
Mutual labels:  dialog, popup
React Native Push Notification Popup
A <NotificationPopup/> component for presenting your own push notification in react-native app
Stars: ✭ 111 (+428.57%)
Mutual labels:  dialog, popup
Aiforms.dialogs
AiForms.Dialogs for Xamarin.Forms
Stars: ✭ 143 (+580.95%)
Mutual labels:  dialog, popup
Customalertviewdialogue
Custom AlertView Dialogue is the world's most advanced alert view library. Custom AlertView Dialogue includes simple message popups, confirmation alerts, selector popups, action sheet bottom menus, and input/feedback contact forms.
Stars: ✭ 100 (+376.19%)
Mutual labels:  dialog, popup
Alerttoast
Create Apple-like alerts & toasts using SwiftUI
Stars: ✭ 151 (+619.05%)
Mutual labels:  dialog, popup
React Poppop
A mobile support and multi-directional modal for ReactJS
Stars: ✭ 78 (+271.43%)
Mutual labels:  dialog, popup
Alertjs
Dialog Builder allows you to create fully customisable dialogs and popups in Dynamics 365.
Stars: ✭ 80 (+280.95%)
Mutual labels:  dialog, popup
React Native Simple Dialogs
⚛ Cross-platform React Native dialogs based on the Modal component
Stars: ✭ 218 (+938.1%)
Mutual labels:  dialog, popup
Zhpopupcontroller
Help you pop up custom views easily. and support pop-up animation, layout position, mask effect and gesture interaction etc.
Stars: ✭ 1,481 (+6952.38%)
Mutual labels:  drag, popup

vue-dialog

A drag-able dialog for Vue.js

基于Vue.js V2的弹框组件

查看jquery版本

example

地址:https://mjixiang.github.io/vue-dialog

props

<dialog 
	v-model="dialog.show" 
	:title="dialog.title"
	:buttons="dialog.buttons"
	@cancel="onCancel"
	@onbtnclick="onDialogBtnClick">
	<!--窗体主体内容-->
</dialog>

title:Object | String 弹框标题,需要,自定义弹框标题和样式

buttons:Array 按钮,可选,自定义弹框下方按钮样式、文本、事件

data

data: {
	dialog:{
		show:false,
		title:{
			text:'这个是标题(可拖拽)',
			className:'xa-bg-red'	//标题样式类名,包含`background`、`color`即可
		},
		buttons:[
			/**
				`@text`:按钮文字
				`@className`:按钮样式类名,包含`background`、`color`即可(内置一部分)
				`@clickEvent`:按钮点击事件后监听的事件名
			*/
			{text:'关闭',className:'xa-bg-red-click',clickEvent:'cancel'},
			{text:'确定',className:'xa-bg-blue-click',clickEvent:'confirm'}
		]
	}
}

methods

methods:{
	//buttons中定义的所有的`clickEvent`
	//可单独监听每个 buttons[i].clickEvent  或 监听 @onbtnclick 统一处理,第一个参数buttons[i]
	cancel () {
  		this.dialog.show = false;
	},
	onDialogBtnClick(btn){
		//do something
	}
}
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].