index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue-dialog demo</title>
	<style>
	/*prompt*/
	.xa-popup .layer{position:fixed;left:0;top:0;background:rgba(0,0,0,0.3);width:100%;height:100%;z-index:100;}
	.xa-popup .popup{min-width:300px;background:#fff;z-index:101;position:fixed;left:50%;top:50%;box-shadow:0 0 10px #888;border-radius:5px;overflow:hidden;}
	.xa-popup .popup>.title{width:100%;height:44px;line-height:44px;text-align:center;font-size:16px;cursor:move;position:relative;}
	.xa-popup .popup>.title>.close{height:44px;width:44px;position:absolute;right:0;top:0;cursor:pointer;font-size:30px;}
	.xa-popup .popup>.title>.close:after{content:'×';display:block;}
	.xa-popup .popup>.title>.close:hover{background:rgba(255,255,255,0.1);}
	.xa-popup .popup>.main{overflow-y:auto;overflow-x:hidden;}
	.xa-popup .popup>.buttons{display:flex;justify-content:center;padding:10px 10px;box-shadow:0 0 6px #ccc;}
	.xa-popup .popup>.buttons .button{flex:1;max-width:160px;text-align:center;cursor:pointer;height:36px;line-height:36px;box-shadow:0 0 1px #ccc;margin:0 10px;border-radius:5px;}
	/* theme库 */
	.xa-bg-eee{background:#eee;color:#333;}
	.xa-bg-red,.xa-bg-red-click{background-color:#F33A3A;color:white;}
	.xa-bg-orange,.xa-bg-orange-click{background-color:#FA9E3B;color:white;}
	.xa-bg-yellow,.xa-bg-yellow-click{background-color:#fff600;color:white;}
	.xa-bg-green,.xa-bg-green-click{background-color:#009000;color:white;}
	.xa-bg-blue,.xa-bg-blue-click{background-color:#268dff;color:white;}
	.xa-bg-gray,.xa-bg-gray-click{background-color:#BCBCBC;}
	.xa-bg-white,.xa-bg-white-click{background-color:white;color:#333;}
	.xa-bg-black,.xa-bg-black-click{background-color:black;color:white;}

	.xa-bg-red-click:hover{background-color:#EF4F4F;}
	.xa-bg-orange-click:hover{background-color:#FAAE4B;}
	.xa-bg-yellow-click:hover{background-color:#ffff00;}
	.xa-bg-green-click:hover{background-color:#009900;}
	.xa-bg-blue-click:hover{background-color:#007ae2;}
	.xa-bg-gray-click:hover{background-color:#BCB6BC;}
	.xa-bg-white-click:hover{background-color:#f2f2f2;}
	.xa-bg-black-click:hover{background-color:#333;}
	.xa-click:hover{background:#f2f2f2;}
	</style>

	<script src="vue.min.js"></script>
	<script>
		var drag = (dragBox,moveBox = dragBox) => {
		    dragBox.onmousedown = e => {
		        var disX=e.clientX-moveBox.offsetLeft;
		        var disY=e.clientY-moveBox.offsetTop;
		        document.onmousemove = (e) =>{
		            e.preventDefault();
		            var l=e.clientX-disX;
		            var t=e.clientY-disY;
		            var x = document.documentElement.clientWidth-moveBox.offsetWidth;
		            var y = document.documentElement.clientHeight-moveBox.offsetHeight;
		            l = l < 0 ? 0 : (l > x ? x : l);
		            t = t < 0 ? 0 : (t > y ? y : t);
		            moveBox.style.left=l+'px';
		            moveBox.style.top=t+'px';
		            return false;
		        }
		        document.onmouseup = () => {
		            document.onmousemove = null;    
		            document.onmouseup = null;
		            return false;
		        }
		        return false;
		    }
		}
		//注册全局组件开始
		Vue.component('dialog',{
			template: (`<div v-show="show" class="xa-popup">
			  	<div class="layer"></div>
			  	<div class="popup">
			  		<div :class="title.className || 'xa-bg-eee'" class="title">
			  			<div class="name">{{ title.text || title }}</div>
			  			<div @click="show = false" class="close"></div>
			  		</div>
			  		<div class="main"><slot></slot></div>
					<div v-show="buttons.length" class="buttons">
						<div v-for="btn in buttons" @click="setEvent(btn.clickEvent)" :class="btn.className" class="button">{{ btn.text }}</div>
					</div>
				</div>
			</div>`),
			methods:{
				// 弹框适配屏幕
				autosize(){
					var dom = this.$el.querySelector('.popup');
		            var CHeight = document.documentElement.clientHeight;
		            var CWidth = document.documentElement.clientWidth;
		            var PHeight = dom.offsetHeight;
		            var PWidth = dom.offsetWidth;
		            dom.querySelector(".main").style.maxHeight = CHeight - 100 +'px';
		            dom.style.top = (CHeight>PHeight?(CHeight-PHeight)/2:0) +'px';
		            dom.style.left = (CWidth-PWidth)/2 +'px';
		        },
		        setEvent(eventName){
		        	this.$dispatch(eventName)
		        }
		    },
			props:{
				title:{
					default:''
				},
				show:{
					type:Boolean,
					default:false,
					twoWay:true
				},
				buttons:{
					type:Array,
					default(){
						return []
					}
				}
			},
			watch:{
				show(val){
					val && this.autosize();
				}
			},
			ready() {
				drag(this.$el.querySelector('.title'),this.$el.querySelector('.popup'));
			}
		})
		//注册全局组件开始
	</script>
</head>
<body>
	<div id="app">
		<button @click="dialog.show = true">显示弹框</button>
		<dialog :show.sync="dialog.show" :title="dialog.title" :buttons="dialog.buttons">
			<div style="min-height:450px;width:800px;">
				<div style="text-align:center;padding:50px 0;">
					<strong>点下面自定义按钮窗口切换主题</strong>	
					<p>弹框正文内容</p>
				</div>
			</div>
		</dialog>
	</div>
	<script>
		//示例js
		var buttons = [
			{text:'红色',className:'xa-bg-red-click',clickEvent:'redEvent'},
			{text:'橙色',className:'xa-bg-orange-click',clickEvent:'orangeEvent'},
			{text:'黄色',className:'xa-bg-yellow-click',clickEvent:'yellowEvent'},
			{text:'绿色',className:'xa-bg-green-click',clickEvent:'greenEvent'},
			{text:'蓝色',className:'xa-bg-blue-click',clickEvent:'blueEvent'},
			{text:'灰色',className:'xa-bg-gray-click',clickEvent:'grayEvent'},
			{text:'白色',className:'xa-bg-white-click',clickEvent:'whiteEvent'},
			{text:'下一步',className:'xa-bg-black-click',clickEvent:'blackEvent'},
		]
		new Vue({
  			el:'#app',
  			data: {
				dialog:{
					show:false,
					title:{
						text:'这个是标题（可拖拽）',
						className:'xa-bg-red'
					},
					buttons:buttons
				}
  			},
  			events:{
  				confirmEvent(){
  					this.dialog.show = false;
  				},
  				cancelEvent(){
  					this.dialog.show = false;
  				},
  				redEvent(){
  					this.dialog.title.className = 'xa-bg-red';
  				},
  				orangeEvent(){
  					this.dialog.title.className = 'xa-bg-orange';
  				},
  				yellowEvent(){
  					this.dialog.title.className = 'xa-bg-yellow';
  				},
  				greenEvent(){
  					this.dialog.title.className = 'xa-bg-green';
  				},
  				blueEvent(){
  					this.dialog.title.className = 'xa-bg-blue';
  				},
  				grayEvent(){
  					this.dialog.title.className = 'xa-bg-gray';
  				},
  				whiteEvent(){
  					this.dialog.title.className = 'xa-bg-white';
  				},
  				blackEvent(){
  					this.dialog.title.className = 'xa-bg-black';
  					this.dialog.buttons = [
  						{text:'上一步',className:'xa-bg-orange-click',clickEvent:'preStepEvent'},
  						{text:'关闭',className:'xa-bg-red-click',clickEvent:'cancelEvent'},
						{text:'确定',className:'xa-bg-blue-click',clickEvent:'confirmEvent'}
  					]
  				},
  				//上一步
  				preStepEvent(){
  					this.dialog.buttons = buttons;
  				}
  			}
  		});
	</script>

	<!-- 注解开始 -->
	<br><br><br><br>
	<div style="border-left:5px solid #987654;background:#eee;padding:8px 15px;line-height:40px;">
		<div style="color:red;">注：该示例用了部分es6代码，请用较新版本的chrome或火狐打开,否则无法正常工作</div>
		<div><a href="https://github.com/mjixiang/vue-dialog/blob/master/dialog.vue">dialog.vue</a>为项目中使用组件，本示例为了简化操作将其代码融入index.html</div>
	</div>
	<!-- 注解结束 -->
</body>
</html>