【技术实现步骤摘要】
一种可扩展不同动画效果的弹窗组件的实现方法及装置
[0001]本专利技术属于软件开发
,具体涉及一种可扩展不同动画效果的弹窗组件的实现方法及装置。
技术介绍
[0002]组件,就是对象,在软件编程中,组件是对数据和方法的简单封装,组件可以有自己的属性和方法。弹窗又称为对话框,一般是指在打开网页、软件或手机APP时自动弹出的与用户交互的窗口。弹窗通过组件的形式进行编写,就是弹窗组件,弹窗组件就是在页面中显示弹窗内容的可复用的UI组件。
[0003]传统的弹窗组件要实现动画效果,需要开发人员从头进行代码编码,不断进行弹窗的显示与隐藏的交互,进而来完成动画效果,此种方式仍然需要大量重复工作,不仅耗费开发人员大量精力,不能体现作为组件的可复用性,而且通过这种方式生成的弹窗组件的动画效果用户体验并不好,较为单调和枯燥。
[0004]综上,在软件开发中,组件因为可复用性被广泛使用,但作为与用户交互的非常重要的弹窗组件,在实现动画效果时仍然需要开发人员手动进行窗口的显示与隐藏的代码重复编写,相当耗费精力,并且用户体验效果差。
[0005]因此,针对上述缺陷,提供一种可扩展不同动画效果的弹窗组件的实现方法及装置,是非常有必要的。
技术实现思路
[0006]针对上述组件因为可复用性被广泛使用,但作为与用户交互的非常重要的弹窗组件,在实现动画效果时仍然需要开发人员手动进行窗口的显示与隐藏的代码重复编写,相当耗费精力,并且用户体验效果差的缺陷,本专利技术提供一种可扩展不同动画效果的弹窗组件的实 ...
【技术保护点】
【技术特征摘要】
1.一种可扩展不同动画效果的弹窗组件的实现方法,其特征在于,包括如下步骤:S1.搭建Vue框架,进行Vu s.j s框架工具软件的安装;S2.基于Vue框架创建新的弹窗组件,使用弹窗组件的模板确定弹窗组件的内容和样式,以及引入控制弹窗组件进行显示与隐藏的状态变量;S 3.为弹窗组件引入过渡动画类以及CSS动画库,并将过渡动画类及CSS动画库与状态变量进行绑定;S4.获取弹窗组件的目标动画效果,使用Vue的控制指令结合过渡动画类以及CSS动画库改变状态变量的值,实现按照目标动画效果进行弹窗的显示与隐藏。2.如权利要求1所述的可扩展不同动画效果的弹窗组件的实现方法,其特征在于,步骤S1具体步骤如下:S11.根据功能需求选择对应版本的Vu s.j s框架工具软件并进行安装,完成Vue框架搭建;S12.通过s cript标签方式引入Vu s.j s框架工具软件。3.如权利要求1所述的可扩展不同动画效果的弹窗组件的实现方法,其特征在于,步骤S2具体步骤如下:S21.通过Vu s.j s框架工具软件创建窗口组件的新的vue实例,通过定义对象和方法的方式控制窗口组件是否显示;S22.通过Vu s.j s框架工具软件的创建窗口组件的新的模板,设定窗口组件名称、以对象的形式描述窗口组件以及窗口组件的模板内容,完成窗口组件的内容和样式设定。4.如权利要求3所述的可扩展不同动画效果的弹窗组件的实现方法,其特征在于,步骤S21具体步骤如下:S211.在Vus.j s框架工具软件创建作为父组件的vue实例的应用;S212.定义数据对象对窗口组件是否被显示进行控制;S213.定义方法函数控制打开和关闭窗口组件。5.如权利要求4所述的可扩展不同动画效果的弹窗组件的实现方法,其特征在于,步骤S22具体步骤如下:S221.在Vus.j s框架工具软件使用component函数创建作为子组件的新的窗口组件的模板;S222.判断是否使用窗口组件的模板中弹窗的默认内容和样式;若是,进入步骤S223;若否,进入步骤S224;S223.确定窗口组件的名称,使用窗口组件的模板默认的内容以及默认的窗口组件样式,进入步骤S225;S224.确定窗口组件的名称后,在模板中自定义窗口组件的内容,以及自定义窗口组件的样式;S225.在窗口组件的模板中引入状态变量,将状态变量与打开和关闭窗口组件的方法函数进行绑定,按照模板中窗口组件定义的内容和样式进行窗口组件的显示与隐藏。6.如权利要求1所述的可扩展不同动画效果的弹窗组件的实现方法,其特征在于,步骤S 3具体步骤如下:
S 31.在弹窗组件模板的外层标签添加过渡动画类;S 32.将过渡效果与状态变量进行绑定;S 33.在弹窗组件模板中引入CSS动画库;S 34.选择所需动画效果,在弹窗组件模板的过渡样式中添加所需动画...
【专利技术属性】
技术研发人员:高锋,景皓鑫,朱斌,
申请(专利权)人:浪潮智慧科技有限公司,
类型:发明
国别省市:
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。