vue slot嵌套,vue中slot在组件中的作用
这篇文章主要介绍了某视频剪辑软件中的狭槽封装组件弹窗，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
插槽封装组件弹窗某视频剪辑软件组件狭槽入门-弹窗组件插槽的基础使用弹窗组件
slot封装组件弹窗
模板
El-dialog:title= title :可见。sync=对话框可见:width=宽度居中
槽名=内容/槽
/el-dialog
/模板
脚本
导出默认值{
道具：[title ， width ， dialogVisible]，
data() {
return { }；
}
};
/脚本
style lang=less 。el-dialog__header {
填充：20像素20像素10像素
显示：无；
}。el-dialog__body {
填充：0px！重要；
}
/风格
！-弹窗-
对话框模式：width= 552 px :title= 加入黑名单：对话框可见=“居中对话框可见”
div slot=content class=popup
div class=head
加入黑名单
I class= El-icon-close @ click= handelclosemodel()/I
/div
添加确定要讲客户王佳琛加入甄别黑名单？/p
div class=确认
埃尔按钮类型="主要"确定/el-button
埃尔按钮平原取消/el-button
/div
/div
/DialogModal
！-弹窗-
vue组件slot入门---弹窗组件
狭槽即插槽，相当于在子组件的数字正射影像图中留一个位置，父组件如果有需要，就可以在插槽里添加内容。
插槽的基础使用
这里是一个插槽的简单用法。
1.在子组件 Modal.vue 中用 slot 标签预留一个位置，slot 标签中的内容是后备内容，也可以为空：
“模态内容”
狭槽这是个弹框/插槽
div class=页脚
按钮@click=关闭关闭/按钮
按钮@click=确认确认/按钮
/div
/div
后备内容：当父组件不在插槽里添加内容时，插槽显示的内容。
2.在父组件中使用子组件
在父组件中使用子组件，但不向自定义组件的插槽狭槽中添加内容：
模态：可见。sync= visible /Modal
此时如果打开弹框，弹框中显示的是后备内容"这是个弹框":
在父组件中使用子组件，并给插槽加入个性化内容：
Modal :visible.sync=visible 个性化内容/Modal
此时如果打开弹框，弹框中显示的是"个性化内容":
弹窗组件
父App.vue
模板
div id=应用程序
button @ click= visible=true class= BTN 打开"留言"弹框/按钮
button @ click= visible apply=true class= BTN 打开"成为大牛"弹框/按钮
！- "留言"弹框-
情态的
自定义类名= textarea-modal
title=留言
:visible.sync=visible
@confirm=confirm
模板
div class=txt 留下你想告诉我们的话./div
文本区域
name=
id=
cols=30
行数=10
占位符=请写下您的宝贵意见
/textarea
/模板
/Modal
！- "成为大牛"弹框-
情态的
customClassName=apply-modal
title=成为大牛
:visible.sync=visibleApply
@confirm=confirm
模板
div class=txt 留下联系方式，立即成为大牛/div
div class=移动
输入类型=text placeholder=请输入您的手机号码 /
/div
div class=代码
输入类型=text placeholder=请输入验证码 /
按钮class=btn代码获取验证码/按钮
/div
/模板
/Modal
/div
/模板
脚本
//引入组件
从导入模式/组件/模态。vue ；
导出默认值{
名称："应用程序",
//注册组件
组件：{
情态的
},
数据：函数(){
返回{
//控制"留言"弹框
可见：假，
//控制"成为大牛"弹框
visibleApply: false
};
},
方法：{
//自定义函数确认
确认(){
//todo
}
}
};
/脚本
样式lang=scss
#app {
字体系列：《Avenir》，Helvetica，Arial，无衬线；
-WebKit-字体-平滑：抗锯齿；
-moz-osx-font-smoothing:灰度；
文本对齐：居中；
颜色：# 2c3e50
边距-顶部：60px
}。btn {
宽度：适合-内容；
高度：40px
字号：15px
行高：40px
框大小：边框-框；
光标：指针；
边框：无；
背景：# ffffff
边框：1px solid # ebebeb
颜色：# 1b1b1b
填充：0 20像素
右边距：20px
：焦点{
大纲：无；
}
}。textarea-modal {。txt {
文本对齐：左对齐；
padding-top:20px；
字体大小：16px
行高：22px
颜色：# 000000;
}
文本区域{
宽度：355像素
身高：110像素
边框：1px纯色# e6e6e6
字体大小：16px
行高：22px
颜色：# 000000;
填充：14px 20px
框大小：边框-框；
边距-顶部：18px
*占位符{
颜色：rgba(0，0，0，0.2)；
}
：焦点{
大纲：无；
}
}
}。应用-模式{。txt {
文本对齐：左对齐；
padding-top:20px；
字体大小：16px
行高：22px
颜色：# 000000;
边距-底部：18px
}。移动输入，代码输入{
宽度：355像素
高度：50px
背景：# ffffff
边框：1px纯色#咿咿
字体大小：16px
颜色：# 000000;
填充：14px 20px
框大小：边框-框；
*占位符{
颜色：rgba(0，0，0，0.2)；
}
：焦点{
大纲：无；
}
}。代码{
边距-顶部：20px
位置：相对；
输入{
填充-右：120像素
}。按钮代码{
高度：50px
填充：0 20像素
字体大小：14px
行高：50px
颜色：# 2c3744
背景：无；
边框：无；
位置：绝对；
top:0；
右：0;
：焦点{
大纲：无；
}
*之前{
内容："";
显示：块；
宽度：1px
高度：20px
背景：# e5e5e5
位置：绝对；
左：0;
top:15px；
}
}
}
}
/风格
子Modal.vue
模板
div :class=[modal ，customClassName] v-if=visible
“模态内容”
div class=modal-header
div class= title"{ title } }/div
按钮class= BTN-关闭 @ click=关闭/按钮
/div
div class=modal-body
插槽/插槽
/div
div class=模态页脚
按钮 btn-close @click=close 取消/按钮
按钮BTN-确认@click=确认提交/按钮
/div
/div
/div
/模板
脚本
导出默认值{
名称：莫代尔，
//customClassName为自定义类名
//标题为弹框标题
道具：[visible ， title ， customClassName]，
方法：{
close() {
这个. emit(update:visible ，false)；
},
确认(){
console.log(确认);
这个。close()；
}
}
};
/脚本
样式lang=scss 范围。模态{
位置：固定；
top:0；
底部：0;
左：0;
右：0;
背景：rgba(#000，0.5)；
显示器：flex
对齐-项目：居中；
对齐-内容：居中；模态内容{
宽度：415像素
背景：# fff
边框半径：12px
文本对齐：居中；模态标题{
身高：65像素
位置：相对；
字体粗细：500;
字体大小：18px
行高：65像素
颜色：# 000000;
border-bottom:1px solid # f2f2f 2；BTN-关闭{
宽度：16px
高度：16px
背景：网址(https://qgt-文档。中国OSS-。阿里云。P3-5-Vue/5/5-1-1。png)
无重复中心/容器；
位置：绝对；
top:23px；
右：30px
边框：无；
光标：指针；
：焦点{
大纲：无；
}
}
}。模态体{
填充：0 30px
字体大小：0;
}。模式页脚{
填充：30px
显示器：flex
justify-content:space-between；BTN-关闭，BTN-确认{
宽度：125像素
高度：40px
字号：15px
行高：40px
框大小：边框-框；
光标：指针；
边框：无；
：焦点{
大纲：无；
}
}。BTN-关闭{
背景：# ffffff
边框：1px solid # ebebeb
颜色：# 1b1b1b
}。BTN-确认{
背景：# 3ab599
颜色：# fff
}
}
}
}
/风格
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。