目录
前言
diglog组件
准备工作：
在diglog.vue中模仿element-ui搭建diglog框架
该组件需要完成的任务：
title
diglog.vue代码：
App.vue代码：
效果：
自定义dialog的宽度和距离顶部的
App.vue代码：
diglog代码：
效果：
自定义body内容
diglog.vue代码：
App.vue代码：
效果：
diglog.vue代码：
App.vue
效果：
dialog的显示与隐藏
.sync
定义与原理
使用场景
使用方法
注意事项
实操
第一步：
第二步：
第三步：
效果
结语
前言
🎈🎈🎈Hello，Hello。这里是Blue，本篇文章我们将在前一篇文章http://t.csdnimg.cn/6atDj的基础上，继续封装组件。该组件为经常用的diglog，让我们来尝试去封装一下吧。希望各位在学习途中可以对组件有更多的理解。🎈🎈🎈
视频推荐：http://【VUE进阶-从0到1搭建UI组件库（1-3）】https://www.bilibili.com/video/BV1nJ411V75n?p=13&vd_source=bb412cc25ca27e171f8e17085daad038
diglog组件
准备工作：
第一步：
我们先创建一个diglog.vue组件，再在App.vue中进行对diglog的使用
第二步：在main.js中去将diglog.vue组件声明为全局
import Diglog from './components/diglog.vue'Vue.component(Diglog.name, Diglog)在diglog.vue中模仿element-ui搭建diglog框架
<template> <div class="one-dialog_wrapper"> <div class="one-dialog"> <div class="one-dialog_header"> <span class="one-dialog_title">提示</span> <button class="one-dialog_headerbtn"> <i class="one-icon-close"></i> </button> </div> <div class="one-dialog_body"> <span>这是一段信息</span> </div> <div class="one-dialog_footer"> <one-button>取消</one-button> <one-button type="primary">确定</one-button> </div> </div> </div></template><style lang="scss" scoped>.one-dialog_wrapper{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; margin: 0; z-index: 2001; background-color: rgba(0,0,0,0.5); .one-dialog{ position: relative; margin: 15vh auto 50px; background: #fff; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.3); box-sizing: border-box; width: 30%; &_header{ padding: 20px 20px 10px; .one-dialog_title{ line-height: 24px; font-size: 18px; color: #303133; } .one-dialog_headerbtn{ position: absolute; top: 20px; right: 20px; padding: 0; background: transparent; border: none; outline: none; cursor: pointer; font-size: 16px; .one-icon-close{ color:909399 } } } &_body{ padding: 30px 20px; color: #606266; font-size: 14px; word-break: break-all; } &_footer{ padding: 10px 20px 20px; text-align: right; box-sizing: border-box; ::v-deep .one-button:first-child{ margin-right: 20px; } } }}</style>效果如下：
该组件需要完成的任务：
| 参数名 | 参数描述 | 参数类型 | 默认值 |
|---|---|---|---|
| title | 对话框标题 | string | 提示 |
| width | 宽度 | string | 50% |
| marginTop | 与顶部的距离 | string | 15vh |
| visible | 是否显示dialog（支持sync修饰符） | boolean | false |
| 事件名 | 事件描述 |
|---|---|
| close | 模态框关闭事件 |
title
-
父子组件传值以及props验证
-
利用{{}}将传入内容渲染上去
diglog.vue代码：
<template> <transition name="ss"> <div class="one-dialog_wrapper" v-show="visible" @click.self="close"> <div class="one-dialog" :style="{width , marginTop}" > <div class="one-dialog_header"> <span class="one-dialog_title">{{ title }}</span> <button class="one-dialog_headerbtn" @click="close"> <i class="iconfont icon-cuowu"></i> </button> </div> <div class="one-dialog_body"> <span>这是一段信息</span> </div> <div class="one-dialog_footer" > <WsButton @click="visible=false">取消</WsButton> <WsButton type="primary" @click="visible=false">确定</WsButton> </div> </div> </div> </transition> </template> export default { name: 'WsDiglog', props: { title: { type: String, default: '提示' }}</script>App.vue代码：
<WsDiglog title="温馨提示"></WsDiglog>效果：
自定义dialog的宽度和距离顶部的
App.vue代码：
<WsDiglog title="温馨提示" width="320px" marginTop="100px"></WsDiglog>diglog代码：
<template> <div class="one-dialog_wrapper"> <div class="one-dialog" :style="{width:width,marginTop:top}"> ··· </div> </div></template><script>export default { name: 'WsDiglog', props: { title: { type: String, default: '提示' }, width: { type: String, default: '200px' }, marginTop: { type: String, default: '30px' }, }}</script>效果：
自定义body内容
body内容可能是除span以外的其他内容，比如列表等，所以在这里使用插，并且在这里使用匿名插槽，使用匿名插槽的好处就是在使用时不需要使用template标签指定内容，直接在组件标签下编写内容即可。
diglog.vue代码：
<div class="one-dialog_body"> <slot></slot></div>App.vue代码：
<WsDiglog title="温馨提示" width="320px" marginTop="100px" @close="close" :visible.sync="visible"> <ui> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ui> <template v-slot:footerslot> <WsButton @click="visible=false">取消</WsButton> <WsButton type="primary" @click="visible=false">确定</WsButton> </template></WsDiglog>效果：
自定义footer内容
footer中使用slot插槽，使其能够根据用户选择来进行是否需要其他东西
diglog.vue代码：
设置footer插槽，如果没有指定footer插槽，则不显示
<div class="one-dialog_footer" v-if="$slots.footerslot"> <slot name="footerslot"></slot> </div>App.vue
<template> <div class="app"><WsDiglog title="温馨提示" width="320px" marginTop="100px"> <ui> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ui> <template v-slot:footerslot> <WsButton>取消</WsButton> <WsButton type="primary">确定</WsButton> </template></WsDiglog></div></template>效果：
dialog的显示与隐藏
dialog组件的显示与隐藏，需要使用到sync语法糖
在前端开发中，特别是在使用Vue.js框架时，.sync修饰符是一个非常重要的概念，它主要用于简化父子组件之间数据的双向绑定过程。以下是对.sync修饰符的详细解释：
.sync
定义与原理
.sync修饰符是Vue.js提供的一种语法糖，用于实现父子组件之间的双向数据绑定。在Vue 2.3.0+版本中引入，用于替代之前版本的.sync修饰符（在Vue 2.0.0中作为组件的一个特殊选项存在，但在Vue 2.3.0+中被移除并重新作为修饰符引入）。
在Vue 3中，.sync修饰符继续存在，但需要注意的是，Vue 3推荐使用v-model的多个参数形式来实现类似的功能，因为v-model在Vue 3中被重新设计以支持自定义组件的双向绑定。不过，.sync修饰符仍然可以作为一种替代方案使用。
使用场景
.sync修饰符通常用于以下场景：
-
当父组件需要向子组件传递一个或多个prop，并希望子组件能够修改这些prop的值时。
-
子组件在修改prop的值后，需要通知父组件进行更新，以保持数据的一致性。
使用方法
在父组件中，使用.sync修饰符绑定prop时，Vue会自动监听子组件触发的update:propName事件，并将接收到的新值赋给绑定的数据项。
<!-- 父组件 --><template> <div> <child-component :some-prop.sync="parentProp"></child-component> </div></template><script>import ChildComponent from './ChildComponent.vue';export default { components: { ChildComponent }, data() { return { parentProp: 'Initial Value' }; }}</script>在子组件中，当需要修改someProp的值时，通过$emit触发update:someProp事件，并传递新的值。
<!-- 子组件 --><template> <div> <input v-model="localProp" @input="updateProp" /> </div></template><script>export default { props: ['someProp'], data() { return { localProp: this.someProp }; }, watch: { someProp(newVal) { this.localProp = newVal; } }, methods: { updateProp() { this.$emit('update:someProp', this.localProp); } }}</script>注意事项
-
.sync修饰符实际上是v-bind的语法糖，它会被扩展为v-bind绑定和v-on监听器的组合。 -
在Vue 3中，虽然
.sync修饰符仍然可用，但推荐使用v-model的多个参数形式来实现双向绑定，因为它提供了更清晰的语义和更灵活的使用方式。 -
使用
.sync修饰符时，需要注意避免在子组件中直接修改prop的值，因为这可能会导致数据流的不清晰和难以追踪的问题。相反，应该通过触发事件来通知父组件进行更新。
综上所述，.sync修饰符是Vue.js中用于简化父子组件之间双向数据绑定的重要工具，但在使用时需要注意其原理和限制条件。
实操
根据上面对于sync语法糖的介绍，我们在dialog显示和隐藏中要进行两种处理
第一步：
控制dialog的显示和隐藏，我们首先在子组件中使用v-show对于组建的显示与隐藏进行控制。
diglog.vue代码：
<div class="one-dialog_wrapper" v-show="visible" @click.self="handleClose"> ···</div>第二步：
在父组件中使用:visible.sync="visible"向子组件进行传值并且接收子组件回调。
App.vue的代码：
<template><WsDiglog title="温馨提示" width="320px" marginTop="100px" @close="close" :visible.sync="visible"> <ui> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ui> <template v-slot:footerslot> <WsButton @click="visible=false">取消</WsButton> <WsButton type="primary" @click="visible=false">确定</WsButton> </template></WsDiglog></div></template><script>export default { data () { return { visible: true } }, methods: { close (value) { this.visible = value } }}</script>第三步：
diglog.vue代码：
<template> <transition name="ss"> <div class="one-dialog_wrapper" v-show="visible" @click.self="close"> <div class="one-dialog" :style="{width , marginTop}" > <div class="one-dialog_header"> <span class="one-dialog_title">{{ title }}</span> <button class="one-dialog_headerbtn" @click="close"> <i class="iconfont icon-cuowu"></i> </button> </div> <div class="one-dialog_body"> <slot></slot> </div> <div class="one-dialog_footer" v-if="$slots.footerslot"> <slot name="footerslot"></slot> </div> </div> </div> </transition> </template><script>export default { name: 'WsDiglog', props: { title: { type: String, default: '提示' }, width: { type: String, default: '200px' }, marginTop: { type: String, default: '30px' }, visible: { type: Boolean, default: true } }, methods: { fn () { this.$emit('unpdate:visible', false) }, close () { this.$emit('close', false) } }}</script>效果
结语
🎈🎈🎈观众老爷们是否学到如何封装diglog组件了嘛？希望本篇文章对观众老爷能起帮助。🎈🎈🎈
