这篇文章给大家分享的是有关vue怎么实现模态框的通用写法推荐的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
为什么要使用vue vue是一款友好的,多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML, CSS, JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。
在看了元素组件的源码后发现,所有模态框其实实现方法都差不多,主要用到vue在了组件化上的双向绑定。代码:
& lt; !——查看槽点对话框——比;
& lt; template lang=癶tml"祝辞
,& lt; transition name=癳l-fade-in-linear"比;
& lt;才能div 可拖动的=皌rue", @drag=癿ouseDrag", @dragend=癿ouseDragend",:,类=癵-dialog-wrapper", v-show=癿yVisible"比;
,,& lt; div 类=癵-dialog-header"比;
,,,& lt; div 类=發eft"比;
,,,,模态框
,,,& lt;/div>
,,,& lt; div 类=皉ight"比;
,,,,& lt;小姐:类=癵-times-icon fa fa-times", @click=癿yVisible=false", aria-hidden=皌rue"祝辞& lt;/i>
,,,& lt;/div>
,,& lt;/div>
,,& lt; div 类=癵-dialog-container"比;
,,& lt;/div>
& lt;才能/div>
,& lt;/transition>
& lt;/template>
& lt; script>
,export default {
,,道具:{
,,可见:布尔
,,},
()创建的才能,{
,,},
数据才能(),{
,,return {
,,,myVisible:, this.visible,
,,},
计算才能:{},
方法:才能,{
,,},
,,组件:{},
,,看:{
,,,myVisible: function (val), {
,,,这个。美元发出(& # 39;更新:可见# 39;,,val)
,,},
,,,可见:function (val), {
,,,this.myVisible =瓦尔
,,}
,,}
,}
& lt;/script>
& lt; style lang=癱ss", scoped>
& lt;/style> 上面代码主要的部分是手表里面的代码,实现监听数据变化,及时更新。所以在使用的时候就很方便的了,在组件注册组件之后:
& lt; g-key-dialog : visible.sync=発eyDialogVisible"祝辞& lt;/g-key-dialog> 注:这里必须使用同步,要不是无法双向绑定的
感谢各位的阅读!关于“vue怎么实现模态框的通用写法推荐”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
