当前位置:首页 > 资讯 > 开源软件 > 正文

学习Vue:JS动态创建单vue组件

发表于: 2016-04-12   作者:又是一只毛毛猴   来源:转载   浏览:
摘要: 先看Modal.vue代码         {{ title }}   [隐藏][关闭]         {{{ content }}}       export default { props: { width: String, height: String, title: String, isAutoClose: Boolean, isModal: Boolean, isShow: Bo

先看Modal.vue代码

<template>
  <div draggable="true" class="modal" v-bind:style="{ 'width':width, 'height':height, 'display':none }">
  	<div class="modal-header">
  		<span>{{ title }}</span>
  		<span><a href='#' @click='hide()'>[隐藏]</a><a href='#' v-on:click='close()'>[关闭]</a></span>
  	</div>
  	<div class="modal-content">
  		{{{ content }}}
  	</div>
  </div>
</template>

<script>
	export default {
		props: {
			width: String,
			height: String,
			title: String,
			isAutoClose: Boolean,
			isModal: Boolean,
			isShow: Boolean
		},
		ready () {
			let _$el = this.$el
			let mouseX = 0
			let mouseY = 0
			// 居中计算
			let w = parseInt(this.width)
			let h = parseInt(this.height)
			this.$el.style.top = (window.innerHeight - h) / 2 + 'px'
			this.$el.style.left = (window.innerWidth - w) / 2 + 'px'
			let moveFlag = false
			let header = this.$el.querySelector('.modal-header')
			header.onmousedown = function (e) {
				moveFlag = true
				mouseX = e.clientX
				mouseY = e.clientY
			}
			header.onmousemove = function (e) {
			}
			header.onmouseout = function (e) {
				if (moveFlag) {
					let t = parseFloat(_$el.style.top)
					let l = parseFloat(_$el.style.left)
					_$el.style.top = (t + (e.clientY - mouseY)) + 'px'
					_$el.style.left = (l + (e.clientX - mouseX)) + 'px'
					moveFlag = false
				}
			}
		},
		methods: {
			close: function () {
				this.$el.remove()
				// 分发关闭(close)事件
				this.$dispatch('close')
			},
			show: function () {
				this.$el.style.display = 'block'
			},
			hide: function () {
				this.$el.style.display = 'none'
			}
		},
		data () {
			return {}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	
	.modal{
		min-width: 120px;
		min-height: 100px;
		box-shadow: 3px 3px 5px #333333;
		position: fixed;
		z-index: 9999;
		background: #42B983;
		display: flex;
		flex-flow: column nowrap;
	}
	
	.modal .modal-header{
		line-height: 40px;
		height: 40px;
		border-bottom: 1px solid #FFFFFF;
		color: #FFFFFF;
		display: flex;
		justify-content: space-between;
	}
	.modal .modal-header:hover{
		cursor: move;
	}
	.modal .modal-header > span{
		margin-right: 10px;
		margin-left: 10px;
	}
	.modal .modal-header a{
		color:#FFFFFF;
		text-decoration: none;
	}
	.modal-content{
		height: 100%;
	}
</style>

Modal的实例图:

学习Vue:JS动态创建单vue组件_第1张图片

然后再父组件需要调用的地方引入:

import Vue from 'vue'
import Modal from './components/Modal'


然后再需要创建的地方执行试下代码、可以循环创建

let ModalComponent = Vue.component('modal', Modal)
// 实例化组件
let _modal = new ModalComponent({
    data: function () {
	return {
		width: '400px',
		height: '300px',
		title: param.name,
		content: param.src || param.html
		}
	}
})
_modal.$mount().$appendTo('body')


效果图:

学习Vue:JS动态创建单vue组件_第2张图片


学习Vue:JS动态创建单vue组件

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
一、先创建一张mongo表,右击已创建的数据库test,点击addcollection.. 输入Collection Name,点击o
一、先创建一张mongo表,右击已创建的数据库test,点击addcollection.. 输入Collection Name,点击o
一、先创建一张mongo表,右击已创建的数据库test,点击addcollection.. 输入Collection Name,点击o
转自:http://my.oschina.net/u/1026531/blog/188336 一、先创建一张mongo表,右击已创建的数据库te
众所周知最近几年前端发展非常的迅猛,除各种框架如:backbone、angular、reactjs外,还有模块化开
我是2014年的时候开始了解知道的vue,当时vue还不太成熟,想用但是又怕自己hold不住,况且那时候vue
本文地址:http://blog.csdn.net/sushengmiyan/article/details/39226773 官方例子: http://docs.se
在《Qt Quick 事件处理之信号与槽》一文中介绍自定义信号时,举了一个简单的例子,定义了一个颜色选
在《Qt Quick 事件处理之信号与槽》一文中介绍自定义信号时,举了一个简单的例子,定义了一个颜色选
使用到 Component 的示例 QML 代码如下 import QtQuick 2.0 import QtQuick.Controls 1.1 Rectangle
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号