用vue实现模态框组件
基本上每个项目都需要用到模态框组件，由于在最近的项目中，alert组件和confirm是两套完全不一样的设计，所以我将他们分成了两个组件，本文主要讨论的是confirm组件的实现。
&template&
&div class="modal" v-show="show" transition="fade"&
&div class="modal-dialog"&
&div class="modal-content"&
&!--头部--&
&div class="modal-header"&
&slot name="header"&
&p class="title"&{{modal.title}}&/p&
&a v-touch:tap="close(0)" class="close" href="javascript:void(0)"&&/a&
&!--内容区域--&
&div class="modal-body"&
&slot name="body"&
&p class="notice"&{{modal.text}}&/p&
&!--尾部,操作按钮--&
&div class="modal-footer"&
&slot name="button"&
&a v-if="modal.showCancelButton" href="javascript:void(0)" class="button {{modal.cancelButtonClass}}" v-touch:tap="close(1)"&{{modal.cancelButtonText}}&/a&
&a v-if="modal.showConfirmButton" href="javascript:void(0)" class="button {{modal.confirmButtonClass}}" v-touch:tap="submit"&{{modal.confirmButtonText}}&/a&
&div v-show="show" class="modal-backup" transition="fade"&&/div&
&/template&
模态框结构分为三部分，分别为头部、内部区域和操作区域，都提供了slot，可以根据需要定制。
bottom: 0;
z-index: 1001;
-webkit-overflow-scrolling:
outline: 0;
margin: 30/@
.modal-dialog {
left: 50%;
transform: translate(-50%,0);
width: 690/@
padding: 50/@rate 40/@
background: #
.modal-backup {
bottom: 0;
z-index: 1000;
background: rgba(0, 0, 0, 0.5);
这里只是一些基本样式，没什么好说的，这次项目是在移动端，用了淘宝的，@rate是切稿时候的转换率。
* modal 模态接口参数
* @param {string} modal.title 模态框标题
* @param {string} modal.text 模态框内容
* @param {boolean} modal.showCancelButton 是否显示取消按钮
* @param {string} modal.cancelButtonClass 取消按钮样式
* @param {string} modal.cancelButtonText 取消按钮文字
* @param {string} modal.showConfirmButton 是否显示确定按钮
* @param {string} modal.confirmButtonClass 确定按钮样式
* @param {string} modal.confirmButtonText 确定按钮标文字
props: ['modalOptions'],
computed: {
* 格式化props进来的参数,对参数赋予默认值
let modal = this.modalO
title: modal.title || '提示',
text: modal.text,
showCancelButton: typeof modal.showCancelButton === 'undefined' ? true : modal.showCancelButton,
cancelButtonClass: modal.cancelButtonClass ? modal.showCancelButton : 'btn-default',
cancelButtonText: modal.cancelButtonText ? modal.cancelButtonText : '取消',
showConfirmButton: typeof modal.showConfirmButton === 'undefined' ? true : modal.cancelButtonClass,
confirmButtonClass: modal.confirmButtonClass ? modal.confirmButtonClass : 'btn-active',
confirmButtonText: modal.confirmButtonText ? modal.confirmButtonText : '确定',
这里定义了接口的参数，可以自定义标题、内容、是否显示按钮和按钮的样式，用一个computed来做参数默认值的控制。
模态框内部方法
show: false,
// 是否显示模态框
resolve: '',
reject: '',
promise: '',
// 保存promise对象
methods: {
* 确定,将promise断定为完成态
submit() {
this.resolve('submit');
* 关闭,将promise断定为reject状态
* @param type {number} 关闭的方式 0表示关闭按钮关闭,1表示取消按钮关闭
close(type) {
this.show =
this.reject(type);
* 显示confirm弹出,并创建promise对象
* @returns {Promise}
confirm() {
this.show =
this.promise = new Promise((resolve, reject) =& {
this.resolve =
this.reject =
return this.
//返回promise对象,给父级组件调用
在模态框内部定义了三个方法，最核心部分confirm方法，这是一个定义在模态框内部，但是是给使用模态框的父级组件调用的方法，该方法返回的是一个promise对象，并将resolve和reject存放于modal组件的data中，点击取消按钮时，断定为reject状态，并将模态框关闭掉，点确定按钮时，断定为resolve状态，模态框没有关闭，由调用modal组件的父级组件的回调处理完成后手动控制关闭模态框。
&!-- template --&
&confirm v-ref:dialog :modal-options.sync="modal"&&/confirm&
&!-- methods --&
this.$refs.dialog.confirm().then(() =& {
// 点击确定按钮的回调处理
callback();
this.$refs.dialog.show =
}).catch(() =& {
// 点击取消按钮的回调处理
callback();
用创建一个索引,就很方便拿到模态框组件内部的方法了。这样一个模态框组件就完成了。
其他实现方法
在模态框组件中，比较难实现的应该是点击确定和取消按钮时，父级的回调处理，我在做这个组件时，也参考了一些其实实现方案。
使用事件转发
这个方法是我的同事实现的，用在上一个项目，采用的是dispatch和broadcast来派发或广播事件。
首先在根组件接收dispatch过来的transmit事件，再将transmit事件传递过来的eventName广播下去
* 转发事件
{string} eventName 事件名称
{object} arg
* @return {null}
'transmit': function (eventName, arg) {
this.$broadcast(eventName, arg);
其次是模态框组件内部接收从父级组件传递过来的确定和取消按钮所触发的事件名，点击取消和确定按钮的时候触发
// 接收事件，获得需要取消和确定按钮的事件名
'tip': function(obj) {
this.events = {
cancel: obj.events.cancel,
confirm: obj.events.confirm
// 取消按钮
cancel：function() {
this.$dispatch('transmit',this.events.cancel);
// 确定按钮
submit: function() {
this.$dispatch('transmit',this.events.submit);
在父级组件中调用模态框如下：
this.$dispatch('transmit','tip',{
confirm: 'confirmEvent'
this.$once('confirmEvent',function() {
callback();
先是传递tip事件，将事件名传递给模态框，再用$once监听确定或取消按钮所触发的事件，事件触发后进行回调。
这种方法看起来是不是很晕？所以vue 2.0取消了dispatch和broadcast，我们在最近的项目中虽然还在用1.0，但是也不再用dispatch和broadcast，方便以后的升级。
使用emit来触发
这种方法来自,点击取消和确定按钮的时候分别emit一个事件，直接在组件上监听这个事件，这种做法的好处是事件比较容易追踪。
// 确定按钮
this.$emit('ok');
if (this.closeWhenOK) {
this.show =
// 取消按钮
cancel () {
this.$emit('cancel');
this.show =
&modal title="Modal Title" :show.sync="show" @ok="ok" @cancel="cancel"&
Modal Text
但是我们在使用的时候经常会遇到这样的场景，在一个组件的内部，经常会用到多个对话框，对话框可能只是文字有点区别，回调不同，这时就需要在template中为每个对话框都写一次，有点麻烦。
照例放张公众号的二维码，欢迎关注哈：
没有更多推荐了，模态分析_百度百科
清除历史记录关闭
声明：百科词条人人可编辑，词条创建和修改均免费，绝不存在官方及代理商付费代编，请勿上当受骗。
是研究结构动力特性一种方法，一般应用在工程振动领域。其中，模态是指机械结构的特性，每一个模态都有特定的固有频率、和模态振型。分析这些模态参数的过程称为模态分析。按计算方法，模态分析可分为计算模态分析和试验模态分析。由计算的方法取得——分析；每一阶次对应一个模态，每个阶次都有自己特定的频率、阻尼、模态参数。通过试验将采集的系统输入与输出信号经过参数识别获得——试验模态分析。通常，模态分析都是指试验模态分析。
模态分析模态分析介绍
振动模态是弹性结构固有的、整体的特性。通过模态分析方法搞清楚了结构物在某一易受影响的频率范围内的各阶主要模态的特性，就可以预言结构在此频段内在外部或内部各种振源作用下产生的实际振动响应。因此，模态分析是结构动态设计及设备故障诊断的重要方法。
机器、建筑物、航天航空飞行器、船舶、汽车等的实际振动模态各不相同。模态分析提供了研究各类振动特性的一条有效途径。首先，将结构物在静止状态下进行人为激振，通过测量激振力与响应并进行双通道（FFT）分析，得到任意两点之间的机械导纳函数（传递函数）。用模态分析理论通过对试验导纳函数的，识别出结构物的模态参数，从而建立起结构物的模态模型。根据模态，在已知各种载荷时间历程的情况下，就可以预言结构物的实际振动的响应历程或。
近十多年来，由于计算机技术、FFT分析仪、高速以及振动传感器、激励器等技术的发展，试验模态分析得到了很快的发展，受到了机械、电力、建筑、水利、航空、航天等许多产业部门的高度重视。已有多种档次、各种原理的模态分析硬件与软件问世。
模态分析详细说明
模态分析的经典定义：将振动微分方程组中的物理为，使方程组，成为一组以模态坐标及模态参数描述的独立方程，以便求出系统的模态参数。坐标变换的变换为模态矩阵，其每列为模态。
模态分析的最终目标是识别出系统的模态参数，为结构系统的振动特性分析、振动故障诊断和预报以及结构动力特性的优化设计提供依据。
模态分析技术的应用可归结为以下几个方面：
1) 评价现有结构系统的动态特性；
2) 在新产品设计中进行的预估和优化设计；
3) 诊断及预报结构系统的故障；
4) 控制结构的辐射噪声；
5) 识别结构系统的载荷。
最佳悬挂点
模态试验时，一般希望将悬挂点选择在较小的位置，最佳悬挂点应该是某阶的节点。
最佳激励点
最佳激励点视待测试的振型而定，若单阶，则应选择最大振幅点，若多阶，则激励点处各阶的振幅都不小于某一值。如果是需要许多能量才能激励的结构，可以考虑多选择几个激励点。
最佳测试点
模态试验时测试点所得到的信息要求有尽可能高的信噪比，因此测试点不应该靠近节点。在最佳测试点位置其AD(Average Driving DOF Displacement)值应该较大，一般可用EI(Effective Independance)法确定最佳测试点。
模态参数有：模态频率、模态振型、模态质量、模态向量、模态刚度和模态阻尼等。
主模态主空间主坐标
无的各阶模态称为主模态，各阶模态向量所的空间称为主空间，其相应的称为主坐标。
理想的情况下我们希望得到一个结构的完整的模态集，实际应用中这既不可能也不必要。实际上并非所有的模态对响应的贡献都是相同的。对低频响应来说，高阶模态的影响较小。对实际结构而言，我们感兴趣的往往是它的前几阶或十几阶模态，更高的模态常常被舍弃。这样尽管会造成一点误差，但函数的矩阵阶数会大大减小，使工作量大为减小。这种处理方法称为模态截断。
实模态和复模态
按照模态参数（主要指模态频率及模态向量）是实数还是，模态可以分为实模态和复模态。对于无阻尼或比例系统，其各点的振动相位差为零或180度，其模态是实数，此时为实模态；对于非比例阻尼振动系统，各点除了不同外相位差也不一定为零或180度，这样模态系数就是复数，即形成复模态。
有限元分析
1）利用有限元分析模型确定模态试验的测量点、激励点、支持点（悬挂点），参照计算振型对测试模态参数进行辩识命名，尤其是对于复杂结构很重要。
2）利用试验结果对模型进行修改，以达到行业标准或国家标准要求。
3）利用模型对试验条件所产生的误差进行仿真分析，如边界条件模拟、附加质量、附加所带来的误差及其消除。
4）两套模型频谱一致性和振型。
5）利用有限元模型仿真分析解决实验中出现的问题！
修正有限元分析的结果
用试验模态分析的结果怎么修正有限元分析的结果？
1）结构设计参数的修正，可用优化方法进行。
2）子结构修正。
3）结构矩阵元素修正，包括非零元素和全元素修正两种。
4）刚度矩阵和质量矩阵同时修正
模态分析过程
（1）动态数据的采集及频响函数或分析
1）激励方法。试验模态分析是人为地对结构物施加一定动态激励，采集各点的振动响应信号及激振力信号，根据力及响应信号，用各种参数识别方法获取模态参数。激励方法不同，相应识别方法也不同。目前主要由单输入单输出（SISO）、单输入多输出（SIMO）多输入多输出（MIMO）三种方法。以输入力的信号特征还可分为正弦慢扫描、正弦快扫描、稳态随机（包括白噪声、宽带噪声或伪随机）、激励（包括随机激励）等。
2）数据采集。SISO方法要求同时高速采集输入与输出两个点的信号，用不断移动激励点位置或响应点位置的办法取得振形数据。SIMO及MIMO的方法则要求大量通道数据的高速并行采集，因此要求大量的振动测量传感器或激振器，试验成本较高。
3）时域或频域信号处理。例如、传递函数估计、脉冲响应测量以及滤波、等。
（2）建立结构数学模型 根据已知条件，建立一种描述结构状态及特性的模型，作为计算及识别参数依据。目前一般假定系统为的。由于采用的识别方法不同，也分为频域和时域建模。根据阻尼特性及频率耦合程度分为实模态或复模态模型等。
（3）参数识别 按识别域的不同可分为频域法、时域法和混合域法，后者是指在时域识别复特征值，再回到频域中识别振型，激励方式不同（SISO、SIMO、MIMO），相应的参数识别方法也不尽相同。并非越复杂的方法识别的结果越可靠。 对于目前能够进行的大多数不是十分复杂的结构，只要取得了可靠的数据，即使用较简单的识别方法也可能获得良好的模态参数；反之，即使用最复杂的数学模型、最高级的方法，如果频响测量数据不可靠，则识别的结果一定不会理想。
（4）振形动画 参数识别的结果得到了结构的模态参数模型，即一组固有频率、模态阻尼以及相应各阶模态的振形。由于结构复杂，由许多组成的振形也相当复杂，必须采用动画的方法，将放大了的振形叠加到原始的几何形状上。
以上四个步骤是模态试验及分析的主要过程。而支持这个过程的除了激振拾振装置、双通道FFT分析仪、台式或便携式计算机等硬件外，还要有一个完善的模态分析软件包。通用的模态分析软件包必须适合各种结构物的几何物征，设置多种，划分多个子结构，具有多种方法，并能将结构的模态振动在屏幕上三维实时动画显示。
2.结构动力修改与
结构动力修改（Structure Dynamic Modify——SDM）有两个含义：①如果机器作了某种设计上的修改，它的动力学特性将会有何种变化？这个问题被称为SDM的正问题。②如果要求参数作某种改变，应该对设计作何种修改？这是SDM的反问题。
上述两个问题，如果局限在计算模型内解决，其正问题是比较简单的，即只要改变参数重新计算一次就可以。其反问题就是特征值的反问题，由于结构的复杂性和数学处理的难度较大，目前在理论上还不完善。只有涉及的问题得到了比较完善的解决，相应的力学模型是弹簧质量单向串联系统或杆件经过有限元或离散的系统。此外，特征值反问题的解决要求未修改系统计算的特征值及是精确的。因此，现在通常所指的SDM是指在试验模态分析基础上的。
不论是结构动力修改的正问题还是反问题，都要涉及针对结构进行修改。为了避免修改的盲目性，人们自然要问，如何修改才是最见成效的？换而言之，对一个，是进行质量修改，还是进行刚度修改？质量或刚度修改时，在机械结构上何处修改才是最灵敏部位，使得以较少的修改量得到较大的收获？由此，引出了结构动力修改中的技术。目前较为常见的是基于的灵敏度分析。
模态分析技术从20世纪60年代后期发展至今已趋成熟，它和技术一起成为结构动力学的两大支柱。模态分析作为一种“逆问题”分析方法，是建立在实验基础上的，采用实验与理论相结合的方法来处理工程中的振动问题。
模态分析实例解释
简单地说，模态分析是根据用结构的固有特征，包括频率、阻尼和模态，这些动力学属性去描述结构的过程。那只是一句总结性的语言，现在让我来解释模态分析到底是怎样的一个过程。不涉及太多的技术方面的知识，我经常用一块平板的振动模式来简单地解释模态分析。这个解释过程对于那些振动和模态分析的新手们通常是有用的。
考虑自由支撑的平板，在平板的一角施加一个常力，由静力学可知，一个静态力会引起平板的某种静态变形。但是在这儿我要施加的是一个以方式变化，且频率固定的振荡常力。改变此力的，但是力的保持不变，仅仅是改变力的振动频率。同时在平板另一个角点安装一个加速度传感器，测量由此激励力引起的平板响应。
现在如果我们测量平板的响应，会注意到平板的响应随着激励力的的变化而变化。随着时间的推进，响应幅值在不同的频率处有增也有减。这似乎很怪异，因为我们对此系统仅施加了一个常力，而响应幅值的变化却依赖于激励力的振动频率。具体到现在，当我们施加的激励力的振动频率越来越接近系统的固有频率（或者共振频率）时，响应幅值会越来越大，在激励力的振动频率等于系统的共振频率时达到最大值。想想看，真令人大为惊奇，因为施加的外力始终相同，而仅仅是改变其振动频率。
时域数据提供了非常有用的信息，但是如果用快速傅立叶变换（FFT）将时域数据转换到频域，可以计算出所谓的频响函数（FRF）。这个函数有一些非常有趣的信息值得关注：注意到频响函数的峰值出现在系统的共振频率处，注意到频响函数的这些峰出现在观测到的时域响应信号的达到最大时刻的频率处。
如果我们将频响函数叠加在时域之上，会发现时域波形达到最大值时的激励力振动频率等于频响函数峰值处的频率。因此可以看出，既可以使用时域信号确定系统的固有频率，也可以使用频响函数确定这些固有频率。显然，频响函数更易于估计系统的固有频率。许多人惊奇结构怎么会有这些固有特征，而更让人惊奇的是在不同的固有频率处，结构呈现的变形模式也不同，且这些变形模式依赖于激励力的频率。
现在让我们了解结构在每一个固有频率处的变形模式。在平板上均匀分布45个加速度计，用于测量平板在不同激励频率下的响应。如果激励力在结构的每一个固有频率处驻留，会发现结构本身存在特定的变形模式。这个特征表明激励频率与系统的某一阶固有频率相等时，会导致结构产生相应的变形模式。我们注意到当激励频率在第一阶固有频率处驻留时，平板发生了第1阶弯曲变形，在图中用蓝色表示。在第2阶固有频率处驻留时，平板发生了第2阶，在图中用红色表示。分别在结构的第3和第4阶固有频率处驻留时，平板发生了第3阶弯曲变形，在图中用绿色表示，和第4阶扭转变形，在图中用红紫红色表示。这些变形模式称为结构的模态。（从纯数学角度讲，这种叫法实际上不完全正确，但在这儿作为简单的讨论，从实际应用角度讲，这些变形模式非常接近模态振型。）
我们设计的所有结构都具有各自的固有频率和模态振型。本质上，这些特性取决于确定结构固有频率和模态振型的结构质量和分布。作为一名设计工程师，需要识别这些频率，并且当有外力激励结构时，应知道它们怎样影响结构的响应。理解模态振型和结构怎样振动有助于设计工程师设计更优的结构。模态分析有太多的需要讲解的地方，但这个例子仅仅是一个非常简单的解释。现在我们能更好地理解模态分析主要是研究结构的固有特性。理解固有频率和模态振型（依赖结构的质量和刚度分布）有助于设计噪声和振动应用方面的结构系统。我们使用模态分析有助于设计所有类型的结构，包括机车、航天器，宇宙飞船、计算机、网球拍、高尔夫球杆……这些清单举不胜举。
模态分析结构模态分析
模态向量有一个很重要的特性,即“模态正交性'”。所谓模态分析法，就是利用系统固有的模态的正交性，以系统的各阶模态向量所组成的模态矩阵作为交换矩阵，对通常选取的物理坐标进行线性变换，使得振动系统以物理坐标和物理参数所描述、互相祸合的运动方程组，能够变为一组彼此独立的方程，每个独立方程只含一个独立的模态坐标。这个用模态坐标和模态参数所描述的各个独立方程，称为模态方程。模态分析实质上是一种坐标变换，其目的是为了解除方程的祸合，便于求解由于坐标变换是线性变换，因而系统在原有的物理系统中，对于任意激励的响应，便可视为系统各阶模态的线性组合，故模态分析法，又称模态叠加法。而各阶模态在叠加中所占的比重或加权系数，则取决于各阶的模态坐标响应`。一般来说,高阶模态比低阶模态的加权系数要小得多，通常只需要选取前阶模态进行叠加，即可达到足够的精度。由此可知模态分析的主要优点就在于，它能用较少的运动方程或自由度数，直观、简明而又相当精确的去反映一个比较复杂结构的动态特性，从而大大减小测量、分析及计算的工作量。
模态分析基本假设
模态分析线性假设
假设被实验识别系统是线性的，其物理意义是，结构系统对任一组同时作用的激励的响应是该组内每一激励单独作用时系统的响应的线性叠加。基于这一个假设，我们有可能在实验室内对系统施加容易实现、便于测量的作用力进行激励，并由此提取被测系统的特征参数，而不必施加与工作环境相同的激励。
模态分析时不变假设
系统是定常的，即系统特征参数为常量，满足该假设的系统称之为定常系统。例如，假设系统某特征参数与温度有关，则当温度随时间变化时,系统的特征参数也随之变化，则系统不满足时不变假设，称这样的系统为非时不变系统。如果系统为非时不变系统，那么在不同时刻所测实验数据将不一致，从而得不到稳定的系统特征参数。
模态分析可观测性
对于系统输入、输出的量测量结果应含有足够的信息，以描述该系统适当特性的模型，否则称该系统为不可观测系统。此外还常常假设结构遵从互异性原理，即在点输入所引起的点的响应，等于在点的相同输入所引起的点的响应。此假设使得质量矩阵、刚度矩阵、阻尼矩阵和频响函数矩阵都成了对称矩阵。
马永列. 结构模态分析实现方法的研究[D].浙江大学,2008.
张笑华,任伟新,禹丹江. 结构模态参数识别的随机子空间法[J]. 福州大学学报(自然科学版),2005,(S1):46-49. [].
梁君,赵登峰. 模态分析方法综述[J]. 现代制造工程,9-141. []. DOI：10.16731/j.cnki.06.08.049
陈小悦,管迪华. 模态分析中剩余导纳的处理[J]. 振动与冲击,-44. []. DOI：10.13465/j.cnki.jvs.
于天彪,王学智,关鹏,王宛山. 超高速磨削机床主轴系统模态分析[J]. 机械工程学报,):183-188. [].
本词条认证专家为
副教授审核
西南大学电子信息工程学院
清除历史记录关闭对不起，您要访问的页面暂时没有找到，您可以：