2018-08-14 20:59:38 gaojun15173 阅读数 12567
  • BootstrapVue快速上手教程

    本系列课程以Bootstrap官方资料为基础,全面透彻解析了Bootstrap的各个方面的知识;通过专业化的分析转化,把晦涩难懂的理论转化为简单的语言和直观的实例,让大家在边看边学边练中掌握Bootstrap的使用。Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的渐进式框架。Vue 只关注视图层, 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    1887 人正在学习 去看看 李强

问题描述:用户充值功能,使用模态框填写充值信息。充值确定后,第二次打开模态框里面展示的是上一次填写的信息。(vue部分在下面)

网上搜索了清空模态框的方法,如下这种。试了 没用!不好使!好气哦!

$('body').on('hidden.bs.modal', '.modal', function () {
     $(this).removeData('bs.modal'); 
});

然后就寻思着手动清空,这种能实现效果,如果表单内容很多的话就有点鸡肋了。。

$('#modal-recharge').on('click','.btn-success', function (e) {
	$('#userId').val("");
	$('#amount').val("");
	$('#modal-stackable-modifystate').modal('hide');
});

最终版方案,由于模态框里面使用form表单提交数据,可以使用form的reset方法实现表单重置。

$('#modal-recharge').on('hidden.bs.modal', function (){
	document.getElementById("contentForm").reset();
});

补充部分:vue+ElementUI中的el-dialog关闭时清空当前对话框的方法:

在关闭对话框的方法中加入以下代码:

      this.$refs['refForm'].resetFields(); // 清空表单
      Object.assign(this.$data, this.$options.data.call(this)); // 清空data

 

2020-01-20 17:39:28 qq_42345237 阅读数 116
  • BootstrapVue快速上手教程

    本系列课程以Bootstrap官方资料为基础,全面透彻解析了Bootstrap的各个方面的知识;通过专业化的分析转化,把晦涩难懂的理论转化为简单的语言和直观的实例,让大家在边看边学边练中掌握Bootstrap的使用。Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的渐进式框架。Vue 只关注视图层, 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    1887 人正在学习 去看看 李强

因为是MVC的项目,所以虽然用了vue,但不是我们平常写的SPA,而是在页面中去单独引用。

那么当我们在vue中去调用bootstrap中的模态框时,怎么去监听模态框的显示和隐藏呢?

首先,对于bootstrap中的模态框显示隐藏的监听,bootstrap本身是有一套方法的。

事件类型 描述
show.bs.modal show方法调用之后立即触发该方法。如果是通过点击某个作为触发器的元素,则此元素可以通过事件的relatedTarget属性进行访问。
shown.bs.modal 此事件在模态框已经显示出来(并且同时在CSS过渡效果完成)之后触发。如果是通过点击某个作为触发器的元素,则此元素可以通过事件的relatedTarget属性进行访问。
hide.bs.modal hide方法调用之后立即触发事件。
hidden.bs.modal 此事件在模态框被隐藏(并且同时在CSS过渡效果完成)之后被触发。
loaded.bs.modal 远端的数据源加载完数据之后触发该事件。
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

那么我们说如果是使用上述方法,一般情况下是可以正常监听到事件的,但是对于一些特殊场景,就显得有些low了,比如在vue中去调用了bootstrap的模态框,但是你又使用了上述的方法,你会发现,这个js并没有监听到模态框的状态。

这是因为js代码是单线程自上而下执行的,而当这段代码执行的时候,vue里的代码还没有执行,所以你根本监听不到元素,那么这个时候我们应该怎么写呢?

$("document").on("show.bs.modal", ".modal", function(e) {
    // do something...
})

这样写的好处是,即使是动态创建的元素在该选择器中范围内也是能触发回调函数的。那这里就是应用了事件委托的原理。

2019-12-29 12:39:44 weixin_42917830 阅读数 546
  • BootstrapVue快速上手教程

    本系列课程以Bootstrap官方资料为基础,全面透彻解析了Bootstrap的各个方面的知识;通过专业化的分析转化,把晦涩难懂的理论转化为简单的语言和直观的实例,让大家在边看边学边练中掌握Bootstrap的使用。Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的渐进式框架。Vue 只关注视图层, 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    1887 人正在学习 去看看 李强

引入

在写这篇文章前,我先说明我是一位高中生,对标题相关名词的使用及文章的粗陋,请见谅。写下这篇文章是为了记录我的喜悦,并分享一些个人经验。(好久没写文章了…)

这篇文章我要做以下的事:相信大家都用过经典样式库bootstrap,里的modal组件。必须承认,bootstrap好看,简单,能用,但是每次需要用到modal组件,都必须要在html里写冗长的代码,而且在需要复用组件时,都需要修改标题,内容,最后然后调用jquery的show函数展示模态框,这在高度组件化,高度复用的场景中是不优雅的。

当然我知道有很多vue的组件库可以给我用,可是,项目已经成形,我并不想为了为了一个modal大改前端的样式。


于是,我想将bootstrap的modal模态框,与vue的组件,高度集成起来,使html书写优雅,并可以一条代码触发展示。做成this.modal.show(title,content)的效果。

或实现网络开发技术的跨时代衔接?


大幅的简化,完全原版的效果

submit:function(){
  if (this.canISubmit == false){
	this.modal.show('基础信息检验出错',`请检查各要素是否已经按要求填写准确!`)
	this.isLoading=false
	return false
  }
...

在这里插入图片描述

实操:优雅的html

<body id="vue">
   <modal ref='modal'></modal>
   <!-- 是的真的就一行 -->
</body>

实操:vue组件

var BootModal =  {
	data: function () {
	  return {
	    title: '',
	    content:'',
	  }
	},
	template:`<div class="modal fade" id="submitModal" tabindex="-1" role="dialog">
		  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <h5 class="modal-title" id="exampleModalLabel">{{title}}</h5>
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		        </button>
		      </div>
		      <div class="modal-body">
		      	<p><b> {{content}} </b></p>
		      	<hr>
		      	<p>按下<a href="#" role="button" class="btn btn-dark  btn-sm">ESC</a> 来快捷解散该窗口。</p>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-primary" data-dismiss="modal">我已知晓</button>
		      </div>
		    </div>
		  </div>
		</div>`,
	methods : {
		show:function(title,content){
			this.title = title
			this.content = content
			$('#submitModal').modal('show')
		}
	}
}

vue父组件

var bulk = new Vue({
  el: '#vue',
  components: {
    'modal' : BootModal
  },
  mounted:function(){
  	this.modal = this.$refs.modal
  	this.modal.show('我是标题','我是内容')
  	//优雅调用,优雅展示
})

写在最后

正如前文所说,本人是实实在在的高中生,如果有任何纰漏,请务必联系我修正,多多谅解,谢谢!如果有更好方案,欢迎交流!
本文完全为个人原创,转载请注原处!
在这里插入图片描述

2017-09-09 15:07:43 zhangjing1019 阅读数 2995
  • BootstrapVue快速上手教程

    本系列课程以Bootstrap官方资料为基础,全面透彻解析了Bootstrap的各个方面的知识;通过专业化的分析转化,把晦涩难懂的理论转化为简单的语言和直观的实例,让大家在边看边学边练中掌握Bootstrap的使用。Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的渐进式框架。Vue 只关注视图层, 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    1887 人正在学习 去看看 李强
bootstrap3官网明确指出

千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框,需要自己写额外的代码来实现。

bootstrap.css中,遮罩蓬的z-index是1040,模态框modal的z-index是1050;

所以想要一个模态框上弹出另外一个模态框,只需改变modal的z-index的值,z-index的值大于1050就行;

欢迎关注我的个人技术公众号!javascript艺术

2019-06-29 12:22:41 a871805820 阅读数 1380
  • BootstrapVue快速上手教程

    本系列课程以Bootstrap官方资料为基础,全面透彻解析了Bootstrap的各个方面的知识;通过专业化的分析转化,把晦涩难懂的理论转化为简单的语言和直观的实例,让大家在边看边学边练中掌握Bootstrap的使用。Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的渐进式框架。Vue 只关注视图层, 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    1887 人正在学习 去看看 李强

前阵子做到一个需求是要点击某个按钮弹出个模态框,然后点击模态框的时候模态框还在,点击模态框外部任意区域隐藏模态框,我网上找了下关于这方面的博客很少(也可能是我找的方式不对,哈哈)
首先自己先做好一个模态框的结构,然后给这个结构赋予类名,用一个自定义变量控制这个模态框显示与隐藏

	<div v-if='showBox'>
		<div class='show-parent'>
			<div class="shard">
	          <div class="show-inner">
	            <div>申请次数</div>
	            <div>1天内</div>
	            <div>7天内</div>
	          </div>
	        </div>
		</div>
	</div>

	<span class='show' @click='show'></span>
	export default {
		data() {
			return {
				showBox: false
			}
		},
		methods: {
			show() {
				// 点击的时候显示模态框
				this.showBox = true	
			},
			// 在这里在定义个方法用来监听页面的click事件
			hideBox() {
				document.addEventListener('click', (e) => {
						// 如果当前点击的这个对象是这个模态框的话
					if((e.target).closest('.show-parent')) {
					//  那么这个模态框还是显示的
						this.showBox = true
					} else if(!(e.target).closest('.show')) {
					// 如果当前点击的这个对象是这个show按钮以外的对象,那么这个模态框就隐藏
						this.showBox = false
					}
				})
			}	
		},
		mounted() {
			// 页面加载的时候调用监听
			this.hideBox()
		}
	}

没有更多推荐了,返回首页