服务器域名已有做网站,wordpress 去除评论框,网站建设 源美设计,中国网络营销论坛目录
设置title
插槽显示
控制宽高
关闭对话框
transition实现动画
引入深度选择器 同样创建组件dialogue.vue后全局注册
dialogue模版#xff1a;
template!-- 对话框的遮罩 --div classmiao-dialog_wrapper!-- 真的对话框 …目录
设置title
插槽显示
控制宽高
关闭对话框
transition实现动画
引入深度选择器 同样创建组件dialogue.vue后全局注册
dialogue模版
template!-- 对话框的遮罩 --div classmiao-dialog_wrapper!-- 真的对话框 --div classmiao-dialogdiv classmiao-dialog_headerspan classmiao-dialog_title提示/spanbutton classmiao-dialog_headerbtni classmiao-icon-close/i/button/divdiv classmiao-dialog_bodyspan这是一段信息/span/divdiv classmiao-dialog_footermiao-button取消/miao-buttonmiao-button typeprimary确定/miao-button/div/div/div
/template
设置title
第一步设置title为传入的参数
app.vue里
miao-dialog title温馨提示/miao-dialog
dialogue.vue里
props:{title:{type:String,default:提示}
}
插槽显示
第二步用插槽显示
这在dialogue.vue里
slot nametitlespan classmiao-dialog_title{{ title }}/span/slot!-- 把这个class包在插槽里意思是有插槽显示插槽没插槽显示里面的title文字 --
在app.vue里
miao-dialogtemplate v-slot:titleh3我是变化/h3/template
/miao-dialog
这样如果title啥都不传显示默认值并且通过slot可以设置传入是h3还是h2等格式
控制宽高
通过style里的width和top控制dialog的宽度和距离顶部的距离
app.vue
miao-dialog width40% top10px/miao-dialogdialog.vue
div classmiao-dialog :style{width:width,marginTop:top}
然后设置
width:{type: String,default: 50%},top:{type: String,default: 15vh// 类似于15%}
然后通过插槽控制body部分
app.vue
miao-dialog width40% top10pxulli1/lili2/li/ul/miao-dialogdialog.vue
div classmiao-dialog_body!-- 默认插槽 --slot/slot/div
接下来控制footerfooter里显示两个按钮但是底部两个按钮也是想传才传
所以也添加slot控制
app.vue里
miao-dialog width40% top10pxulli1/lili2/li/ultemplate v-slot:footermiao-button typeprimary确定/miao-buttonmiao-button取消/miao-button/template/miao-dialog
关闭对话框
dialog.vue里
关闭部分
除了按钮之外点击对话框的icon❎也应该关闭他
button classmiao-dialog_headerbtn clickhandleClosei classmiao-icon-close/i/button
点击子组件dialogue.vue不能直接修改父组件数据
所以在函数handleclose里触发父组件
methods:{handleClose(){// this.visiblefalse,不行避免直接修改props//得让父组件改应该触发事件this.$emit(close,false)}
}
在app.vue里
miao-dialog width40% top10px :visiblevisible closecloseulli1/lili2/li/ultemplate v-slot:footermiao-button typeprimary clickvisiblefalse确定/miao-buttonmiao-button clickvisiblefalse取消/miao-button/template/miao-dialog closeclose
close(value){
this.visiblevalue
},这样点击该icon就能关闭对话框了
此外需要点击遮罩层也能关闭对话框但是对话框内部也包括在遮罩层里所以通过click.self 阻止冒泡
或者通过sync语法糖子组件希望修改父组件的visible
使用方法
在子组件里
demo.vue
button clickfnaaa/button
methods:{fn(){this.$emit(update:money,30)this.$emit(update:visible, true)}}
父组件里 demo :visible.syncvisible :money.syncmoney/demo
不用再写函数注册事件了比如省去了
update:money(value){this.moneyvalue}
没有改变单向数据流只是让父组件使用更简单
transition实现动画
通过transition实现动画千万记得.5s
transition nameaadiv v-showvisible我是文本/div/transition
第一种写动画的css方式
.aa-enter{opacity: 0;
}
// aa对应name属性enter显示前to显示后active显示中
.aa-enter-to{opacity: 1;
}
.aa-enter-active{transition: all .5s;
}// 离开同样三个类名
.aa-leave{opacity: 1;
}
.aa-leave-to{opacity: 0;
}.aa-leave-active{transition: all .5s
}第二种写动画的方式采用
.aa-enter{opacity: 0;
}
// aa对应name属性enter显示前to显示后active显示中
.aa-enter-to{opacity: 1;
}
.aa-enter-active{transition: all .5s;
}// 离开同样三个类名
.aa-leave{opacity: 1;
}
.aa-leave-to{opacity: 0;
}.aa-leave-active{transition: all .5s
}css里前面那个aa是变化的根据name来后面的是固定的 接下来让整个dialogue有动画
.dialog-fade-enter-active {animation: fade .3s;
}.dialog-fade-leave-active {animation: fade .3s reverse;
}keyframes fade {0% {opacity: 0;transform: translateY(-20px);// 负值向上移动}100% {opacity: 1;transform: translateY(0);}
}
.miao-button{margin-left:8px
}
scoped会给当前组件的模版中的所有元素都添加一个随机的属性
scoped会给当前组件中所有样式也添加一个对应的属性选择器
引入深度选择器
当写了style scoped时候不会有随机属性选择器
深度选择器 scss里 ::v-deep less里 /deep/ css 官网链接
Scoped CSS | Vue Loader
详细代码
GitHub - Alicca-miao/component-library-vue-ui-Contribute to Alicca-miao/component-library-vue-ui- development by creating an account on GitHub.https://github.com/Alicca-miao/component-library-vue-ui-
