时间:2021-07-01 10:21:17 帮助过:13人阅读
临近毕业,写了个简单个人博客,项目地址是点我访问项目地址(顺便求star),本篇是系列总结第一篇。接下来会一步一步模仿一个低配版的Element 的对话框和弹框组件。
Vue 单文件组件开发
当使用vue-cli初始化一个项目的时候,会发现src/components文件夹下有一个HelloWorld.vue文件,这便是单文件组件的基本开发模式。
接下来,开始写一个dialog组件。
Dialog
目标对话框组件的基本样式如图:
根据目标样式,可以总结出:
dialog组件需要一个titleprops来标示弹窗标题
dialog组件需要在按下确定按钮时发射出确定事件(即告诉父组件确定了)
同理,dialog组件需要发射出取消事件
dialog组件需要提供一个插槽,便于自定义内容
那么,编码如下:
这样便完成了dialog组件的开发,使用方法如下:
这时候发现一个问题,通过使用v-if或者v-show来控制弹窗的展现时,没有动画!!!,看上去很生硬。教练,我想加动画,这时候就该transition组件上场了。使用transition组件结合css能做出很多效果不错的动画。接下来增强dialog组件动画,代码如下:
可以看到transition组件接收了一个nameprops,那么怎么编写css完成动画呢?很简单的方式,写出两个
关键class(css 的 className)样式即可:
就是这么简单就开发出了效果还不错的动效,注意transition组件的name为slide-down,而编写的动画的关键className为slide-down-enter-active和slide-down-leave-active。
封装Dialog做MessageBox
Element的MessageBox的使用方法如下:
看到这段代码,我的感觉就是好神奇好神奇好神奇(惊叹三连)。仔细看看,这个组件其实就是一个封装好的dialog,
接下来,我也要封装一个这样的组件。首先,整理下思路:
Element的使用方法是this.$confirm,这不就是挂到Vue的prototype上就行了
Element的then是确定,catch是取消,promise就可以啦
整理好思路,我就开始编码了:
至此,可能会疑惑怎么callback呢,其实我编写了一个封装好的dialog并将其命名为MessageBox,
它的代码中,有这样两个方法:
没错,就是确定和取消时进行callback。我还想说一说Vue.extend,代码中引入了MessageBox,
我不是直接new MessageBox而是借助new Ctur,因为这样可以定义数据(不仅仅是props),例如:
这时候,页面上其实是还没有MessageBox的,我们需要执行:
如果你直接这样,你可能会发现MessageBox打开的时候没有动画,而关闭的时候有动画。解决方法也很简单,
appendChild的时候让其仍是不可见,然后使用类这样的代码:
这样就有动画了。
通过transition和css实现不错的动画。其中,transition组件的name决定了编写css的两个关键类名为[name]-enter-active和[name]-leave-active
通过Vue.extend继承一个组件的构造函数(不知道怎么说合适,就先这样说),然后通过这个构造函数,便可以实现组件相关属性的自定义(使用场景:js调用组件)
js调用组件时,为了维持组件的动画效果可以先document.body.appendChild 然后Vue.nextTick(() => instance.visible = true)
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
postman+json+springmvc测试批量添加实例
JS和Canvas实现图片的预览压缩和上传功能
Vue单页应用引用单独的样式文件的两种方式
以上就是有关Vue组件开发技巧(详细教程)的详细内容,更多请关注Gxl网其它相关文章!