精华内容
下载资源
问答
  • Vue封装dialog组件基础

    2020-10-10 12:51:18
    1.父组件中注册组件 @reValue为自定义接收子组件的返回值 <template> <div id="app"> {{ message }} <com :msg="array" ref="compo" @reValue="fatherClick($event)"> <template> ...

     1.父组件中注册组件  @reValue为自定义接收子组件的返回值

    <template>
      <div id="app">
        {{ message }}
        <com :msg="array" ref="compo" @reValue="fatherClick($event)">
          <template>
            插槽
          </template>
        </com>
      </div>
    </template>
    <script>
    import com from "../views/components";
    export default {
      components: {
        com: com
      },
      mounted() {
        console.log(this.$refs.compo);
      },
      data() {
        return {
          message: "父组件",
          array: [1, 2, 3, 4]
        };
      },
      methods: {
        fatherClick(event) {
          console.log(event);
        }
      }
    };
    </script>
    <style lang="less" scoped></style>
    

    2.子组件进行一些操作返回给父组件

     

    <template>
      <div class="slot_class">
        {{ message }}
        <div v-for="(item, index) in msg" :key="index">{{ item }}</div>
        <slot ></slot>
        <button :data-click="ok" @click="click($event)">確定</button>
        <button :data-click="cancel" @click="click($event)">取消</button>
      </div>
    </template>
    <script>
    export default {
      props: {
        msg: Array
      },
      data() {
        return {
          message: "子组件",
          ok: "OK",
          cancel: "Cancel"
        };
      },
      methods: {
        click(e) {
          const clickType = e.target.getAttribute("data-click");
          console.log(clickType);
          const type = {
            clickType: clickType,
            clickMessage: this.message
          };
          this.$emit("reValue", type);
        },
        Val() {
          this.$emit("reValue", true);
        }
      }
    };
    </script>
    <style lang="less" scoped>
    .slot_class {
      display: flex;
      flex-direction: column;
    }
    </style>
    

    通过$emit将想要返回的属性返回到父组件中,再在父组件中进行一些逻辑操作

    展开全文
  • vue封装dialog弹框组件

    千次阅读 2020-05-31 22:51:07
    vue封装dialog弹框组件 dialog.vue <template> <div class="dialog" v-show="showMask"> <div class="dialog-container"> <div class="dialog-title">{{title}}</div> <div ...

    vue封装dialog弹框组件

    dialog.vue

    <template>
        <div class="dialog" v-show="showMask">
            <div class="dialog-container">
                <div class="dialog-title">{{title}}</div>
                <div class="content" v-html="content"></div>
                <div class="btns">
                    <div v-if="type != 'confirm'" class="default-btn" @click="closeBtn">
                        {{cancelText}}
                    </div>
                    <div v-if="type == 'danger'" class="danger-btn" @click="dangerBtn">
                        {{dangerText}}
                    </div>
                    <div v-if="type == 'confirm'" class="confirm-btn" @click="confirmBtn">
                        {{confirmText}}
                    </div>
                </div>
                <div class="close-btn" @click="closeMask"><i class="iconfont icon-close"></i></div>
            </div>
            
        </div>
    </template>
    <script>
    export default {
        props: {
            value: {},
            // 类型包括 defalut 默认, danger 危险, confirm 确认,
            type:{
                type: String,
                default: 'default'
            },
            content: {
                type: String,
                default: ''
            },
            title: {
                type: String,
                default: ''
            },
            cancelText: {
                type: String,
                default: '取消'
            },
            dangerText: {
                type: String,
                default: '删除'
            },
            confirmText: {
                type: String,
                default: '确认'
            },
        },
        data(){
            return{
                showMask: false,
            }
        },
        methods:{
            closeMask(){
                this.showMask = false;
            },
            closeBtn(){
                this.$emit('cancel');
                this.closeMask();
            },
            dangerBtn(){
                this.$emit('danger');
                this.closeMask();
            },
            confirmBtn(){
                this.$emit('confirm');
                this.closeMask();
            }
        },
        mounted(){
            this.showMask = this.value;
        },
        watch:{
            value(newVal, oldVal){
                this.showMask = newVal;
                console.log(oldVal)
            },
            showMask(val) {
                this.$emit('input', val);
            }
        },
    }
    </script>
    <style lang="less" scoped>
        .dialog{
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 9999;
            .dialog-container{
                width: 300px;
                height: 280px;
                background: #ffffff;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                border-radius: 8px;
                position: relative;
                .dialog-title{
                    width: 100%;
                    height: 60px;
                    font-size: 18px;
                    color: #696969;
                    font-weight: 600;
                    padding: 16px 50px 0 20px;
                    box-sizing: border-box;
                }
                .content{
                    color: #797979;
                    line-height: 26px;
                    padding: 0 20px;
                    box-sizing: border-box;
                }
                .inp{
                    margin: 10px 0 0 20px;
                    width: 200px;
                    height: 40px;
                    padding-left: 4px;
                    border-radius: 4px;
                    border: none;
                    background: #efefef;
                    outline: none;
                    &:focus{
                        border: 1px solid #509EE3;
                    }
                }
                .btns{
                    width: 100%;
                    height: 60px;
                    // line-height: 60px;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    text-align: right;
                    padding: 0 16px;
                    box-sizing: border-box;
                    & > div{
                        display: inline-block;
                        height: 40px;
                        line-height: 40px;
                        padding: 0 14px;
                        color: #ffffff;
                        background: #f1f1f1;
                        border-radius: 8px;
                        margin-right: 12px;
                        cursor: pointer;
                    }
                    .default-btn{
                        color: #787878;
                        &:hover{
                            color: #509EE3; 
                        }
                    }
                    .danger-btn{
                        background: #EF8C8C;
                        &:hover{
                            background: rgb(224, 135, 135);
                        }
                        &:active{
                            background: #EF8C8C;
                        }
                    }
                    .confirm-btn{
                        color: #ffffff;
                        background: #509EE3;
                        &:hover{
                            background: #6FB0EB;
                        }
                    }
                }
                .close-btn{
                    position: absolute;
                    top: 16px;
                    right: 16px;
                    width: 30px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    font-size: 18px;
                    cursor: pointer;
                    &:hover{
                        font-weight: 600;
                    }
                }
            }
        }
    </style>
    
    

    home.vue 里面使用

    <template>
      <div class="home">
        <button >点击</button>
       <div @click="openMask">打开弹窗</div>
            <dialog-bar v-model="sendVal" type="danger" title="我是标题" content="我是内容" :cancel="clickCancel()" @danger="clickDanger()" @confirm="clickConfirm()" dangerText="Delete"></dialog-bar>
        
      </div>
    </template>
    <script>
    // import popUp from '../components/tanKuang/popUp'
    import dialog from '../components/dialog/dislog';
    export default {
      components: {
        // Eject
        // popUp
         'dialog-bar': dialog,
      },
      data() {
        return {
          sendVal: false,
        };
      },
      methods: {
         openMask(){
                this.sendVal = true;
            },
            clickCancel(){
                console.log('点击了取消');
            },
            clickDanger(){
                console.log('这里是danger回调')
            },
            clickConfirm(){
                console.log('点击了confirm');
            }
        
     
      }
    };
    </script>
      
    <style scoped>
    .home {
      width: 100%;
      height: 0vh;
      background-color: pink;
    }
    </style>
    
    
    展开全文
  • 三种思路封装dialog组件 封装dialog组件需要知识有 1.插槽【匿名插槽,具名插槽】 2.transition动画,以及CSS3的动画【因为用到了CSS3所以会有兼容性的问题】如果考虑兼容就需要另想动画效果的方案。 3.props传参 4....

    三种思路封装dialog组件

    封装dialog组件需要知识有
    1.插槽【匿名插槽,具名插槽】
    2.transition动画,以及CSS3的动画【因为用到了CSS3所以会有兼容性的问题】如果考虑兼容就需要另想动画效果的方案。
    3.props传参
    4.style标签当中的scope的用法以及详细解释【深度选择器方面的知识】
    .5方案的三种写法其实就是子组件控制父组件的三种方案【后来又多想到了一个方案就是子传父的】
    然后又想到了VueX(多方案无非就是子父传参的多总方式,还有事件总线等等等等)
    1.sync修饰符的巧用
    2.emit触发父组件的自定义函数并且传参给父组件
    3.this.$parent.visible = false(找父组件的属性并且赋值)
    zy-dialog.vue代码如下

    <template>
    <!--zy-dialog__wrapper是我们对话框的遮罩
    click事件有个修饰符click.self表示点击的如果是自己本身才触发这个函数,即是通过事件冒泡的形式的点击不会触发这个时间
    -->
    <!--transition标签可以用来做动画 name属性如果设置了就在下面样式里要用.➕你设置的name去写样式-->
    <transition name="dialog-fade">
        <div class="zy-dialog__wrapper" v-show="visible" @click.self="handleClose()">
            <div class="zy-dialog" :style="{width:width,marginTop:top}">
                <div class="zy-dialog__header">
                    <!--给一个具名插槽去确定左上角的提示提示信息-->
                    <slot name="title">
                        <span class="zy-dialog__title">{{title}}</span>
                    </slot>
                    <button class="zy-dialog__headerbtn" @click="handleClose()">
                        <i class="zy-icon-close">×</i>
                    </button>
                </div>
                <div class="zy-dialog__body">
                    <!--默认插槽→用来写中间部分的内容-->
                    <slot>
                        <span>这儿填写内容</span>
                    </slot>
                </div>
                <!--$slots.footer配合v-if通过具名插槽去判断,$slots.footer是判断是否有写插槽如果写了那就是true,如果没写就是false-->
                <div class="zy-dialog__footer" v-if="$slots.footer">
                    <slot name="footer"></slot>
                </div>
            </div>
        </div>
    </transition>
    </template>
    
    <script>
    export default {
        name: "zyDialog",
        props: {
            // 属性为title属性
            title: {
                type: String,
                default: "提示"
            },
            width: {
                type: String,
                default: "50%"
            },
            top: {
                type: String,
                default: "15vh"
            },
            visible: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {}
        },
    
        components: {},
    
        methods: {
            handleClose() {
                // 点遮罩让dialog消失方案一是通过$emit方法去传参触发父组件的事件让其隐藏
                // 方案二是通过this.$parent.visible去控制父组件的布尔值的改变
                // this.$emit("close", false)
                // 瓤子租金的visible变成false
                // this.$parent.visible = false
                this.$emit("update:visible", false)
            }
        }
    }
    </script>
    
    <!--加了scope表示样式只用在内部组件上,注意一般封装UI组件库的时候style都是不加scope因为
    外部通过插槽引进来的标签或者组件通常都是需要加样式控制组件或插槽标签的位置的
    如果我们加了scope的话在内部无法设置样式给外部引入的组件或者插槽
    如果加了scope还要给组件外部引进来的组件设置样式,那么要使用深度选择器scss中就要在写样式前加上::v-deep
    例如
    ::v-deep .zy-button:first-child{
        margin-right:20px
    }
    
    在less当中深度选择器是   /deep/ 
    如果你写的是纯css那么深度选择器是  >>>
    -->
    
    <style lang="scss">
    // 引入的动画fade 表示引入动画→从0%到100%
    .dialog-fade-enter-active {
        animation: fade 0.4s;
    }
    
    //引入的动画fade reverse表示反转动画 表示引入动画→从100%到0%
    .dialog-fade-leave-active {
        animation: fade 0.4s reverse;
    }
    
    // 下面代码是定义一个动画,名叫fade
    @keyframes fade {
        0% {
            opacity: 0;
            transform: translateY(-20px);
        }
    
        100% {
            opacity: 1;
            transform: translateY(0px);
        }
    }
    
    .zy-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);
    
        .zy-dialog {
            position: relative;
            margin: 15vh auto 50px;
            background-color: #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;
    
                .zy-dialog__title {
                    line-height: 24px;
                    font-size: 18px;
                    color: #303133;
                }
    
                .zy-dialog__headerbtn {
                    position: absolute;
                    top: 20px;
                    right: 20px;
                    padding: 0;
                    background: transparent;
                    border: none;
                    outline: none;
                    cursor: pointer;
                    font-size: 16px;
    
                    .el-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;
    
                .zy-button:first-child {
                    margin-right: 20px;
                }
            }
        }
    }
    </style>
    
    展开全文
  • 封装dialog组件 组件参数及事件 参数支持: 参数名 参数描述 参数类型 默认值 title 对话框标题 string 提示 width 宽度 string 50% top 与顶部的距离 ...

    封装dialog组件

    组件参数及事件

    参数支持:

    参数名 参数描述 参数类型 默认值
    title 对话框标题 string

    提示

    width 宽度 string

    50%

    top 与顶部的距离 string 15vh
    visible 是否显示dialog(支持sync修饰符) boolean false

    事件支持:

    事件名 事件描述
    opened 模态框显示事件
    closed 模态框关闭事件

    插槽说明:

    插槽名称 插槽描述
    default dialog的内容
    title dialog的标题
    footer dialog的底部操作区

    基本结构

    在components目录下创建dialog.vue,内容如下:

    <template>
      <div class="g-dialog">对话框</div>
    </template>
    
    <script>
    export default {
      name: 'GDialog'
    }
    </script>
    
    <style>
    </style>
    

    然后布局基本内容,其中一个dialog基本分为三部分:头部(header)、内容(body)和底部(footer)

    <template>
      <div class="g-dialog_wrapper">
        <div class="g-dialog">
          <!-- dialog的头部header -->
          <div class="g-dialog_header">
            <span class="g-dialog_title">提示</span>
            <g-button class="g-dialog_headerbtn">
              <i class="g-icon">X</i>
            </g-button>
          </div>
          <!-- dialog的内容body -->
          <div class="g-dialog_body">
            <span>这是一段信息</span>
          </div>
          <!-- dialog的底部footer -->
          <div class="g-dialog_footer">
            <g-button>取消</g-button>
            <g-button type="primary">确定</g-button>
          </div>
        </div>
      </div>
    </template>

    其样式为

    <style lang="scss" scoped>
    .g-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);
      .g-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;
          }
          .g-dialog_headerbtn{
            position: absolute;
            top: 20px;
            right: 20px;
            padding: 0;
            background: transparent;
            border: none;
            outline: none;
            cursor: pointer;
            font-size: 16px;
            .g-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>

    在main.js中注册,然后在app.vue中引用

    title属性

    将标题span标签放到slot插槽下,这样便于控制span的内容和样式

    <template>
      <div class="g-dialog_wrapper">
        <div class="g-dialog">
          <!-- dialog的头部header -->
          <div class="g-dialog_header">
            <slot name="title">
              <!-- 将span放到slot内,这样不仅可以定义title文本,还可以定义样式等 -->
              <span class="g-dialog_title">
                {{title}}
              </span>
            </slot>
            <g-button class="g-dialog_headerbtn">
              <i class="g-icon">X</i>
            </g-button>
          </div>
          <!-- dialog的内容body -->
          <div class="g-dialog_body">
            <span>这是一段信息</span>
          </div>
          <!-- dialog的底部footer -->
          <div class="g-dialog_footer">
            <g-button>取消</g-button>
            <g-button type="primary">确定</g-button>
          </div>
        </div>
      </div>
    </template>

    通过父组件传值及通过slot指定组件自定义title内容和样式

    <template>
      <div id="app">
        <g-dialog>
          <!-- 使用v-slot指定插槽进行编辑 -->
          <template v-slot:title>
            <h3 style="color:red">标题</h3>
          </template>
        </g-dialog>
      </div>
    </template>

    在子组件接收参数

    效果如下:

    width属性和top属性

    第一步:父组件传值

    第二步:子组件接收值

    第三步:绑定属性

    第四步:查看效果

    dialog内容

    body内容可能是除span以外的其他内容,比如列表等,所以在这里使用插,并且在这里使用匿名插槽,使用匿名插槽的好处就是在使用时不需要使用template标签指定内容,直接在组件标签下编写内容即可。

    第一步:使用插槽

    第二步:父组件布局

    第三步:浏览器查看效果

    底部内容

    footer中使用slot具名插槽,在父组件中的定义底部内容。

    第一步:子组件中使用具名插槽,如果有footer内容则显示,没有则不显示,通过v-if来设置

    第二步:父组件中自定义footer插槽内容

    第三步:浏览器查看

    dialog的显示与隐藏

    第一步:父组件传值

    其中在对话框按钮中通过点击事件来显示对话框,同时“确定”按钮和“取消”按钮控制对话框的关闭通过点击事件。

    :visible="visible"是向子组件中传值,传visible值是否显示。

    第二步:子组件接收值

    子组件在props中接收一个布尔值。

    第三步:绑定属性

    为子组件绑定visible属性,控制对话框的显示与隐藏

    第四步:浏览器查看效果

    通过点击“对话框”按钮弹出对话框,并可以使用“确定”按钮和“取消”按钮关闭对话框。

    但是却不能通过点击“X”号来关闭对话框,因为它属于子组件的按钮,而现在点击发生在父组件。

    下面说通过“X”号和空白区域来达到关闭对话框的功能

    第一步:为按钮注册事件

    this.$emit()向父组件传值,把false传过去,“close”是父组件定义的函数名。

    第二步:父组件接收子组件传值

    在父组件中定义一个close函数,函数内的value参数是从子组件传过来的,控制对话框的关闭事件。

    sync修饰符的使用

    改变子类的handleClose方法内的内容,它的绑定事件源不变

    接着是在父组件中使用sync

    浏览器查看效果,通过点击“X”号和空白可以实现关闭对话框

      使用动画实现过渡效果

    使用transition包裹一个元素后,这个元素就会被自动添加类名,vue官网有动画说明。

    接着设置该动画的效果

    .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);
      }
    }

    完整代码

    子组件dialog.vue
     

    <template>
      <transition name="dialog-fade">
         <!-- self表示只点击自己才触发 -->
        <div class="g-dialog_wrapper" v-show="visible" @click.self="handleClose">
          <div class="g-dialog" :style="{width: width, top: top}">
            <!-- dialog的头部header -->
            <div class="g-dialog_header">
              <slot name="title">
                <span class="g-dialog_title">{{title}}</span>
              </slot>
              <g-button class="g-dialog_headerbtn" @click="handleClose">
                <i class="g-icon">X</i>
              </g-button>
            </div>
            <!-- dialog的内容body -->
            <div class="g-dialog_body">
              <!-- 使用插槽 -->
              <slot></slot>
            </div>
            <!-- dialog的底部footer -->
            <div class="g-dialog_footer" v-if="$slots.footer">
              <slot name="footer"></slot>
            </div>
          </div>
        </div>
      </transition>
    </template>
    
    <script>
    export default {
      name: 'GDialog',
      props: {
        title: {
          type: String,
          default: '提示'
        },
        width: {
          type: String,
          default: '50%'
        },
        top: {
          type: String,
          default: '200px'
        },
        visible: {
          type: Boolean,
          default: false
        }
      },
      methods: {
        handleClose () {
          this.$emit('update:visible', false)
        }
      }
    }
    </script>
    
    <style lang="less">
    .g-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);
      .g-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;
          }
          .g-dialog_headerbtn{
            position: absolute;
            top: 20px;
            right: 20px;
            padding: 0;
            background: transparent;
            border: none;
            outline: none;
            cursor: pointer;
            font-size: 16px;
            .g-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;
          }
        }
      }
    }
    .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);
      }
    }
    </style>
    

    父组件App.vue
     

    <template>
      <div id="app">
        <g-button type="primary" @click="visible = true">对话框</g-button>
        <g-dialog :visible.sync="visible">
          <ul>
            <li>唐僧</li>
            <li>孙悟空</li>
            <li>猪八戒</li>
            <li>沙僧</li>
          </ul>
          <template v-slot:footer>
            <g-button type="primary" @click="visible = false">确定</g-button>
            <g-button @click="visible = false">取消</g-button>
          </template>
        </g-dialog>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          visible: false
        }
      },
      methods: {
      }
    }
    </script>
    
    <style lang="scss" scoped>
    
    </style>
    

    效果

     

     

     

     

    展开全文
  • vue封装dialog

    2020-08-12 20:26:34
    1dialog组件 子组件:templateDialog.vue <template> <div> <el-dialog width="60%" title="模板名称" :visible.sync="dialogVisible" :before-close="handleClose" > <div>{
  • vue中使用element-ui封装dialog组件

    千次阅读 2019-12-11 11:27:54
    使用组件代码 说明: .sync 修饰符(这个地方是一个重点,子组件也会引用到) <wallet-dialog :dialogWallet.sync="dialogWallet"></wallet-dialog> 会被扩展为: <wallet-dialog :dialogWallet=...
  • 这是封装组件 <template> <div class="dialog"> <div class="dialog-box"> // 其调用的组件slot传值问题,没有的话是显示默认值 <slot name="title">如果没传默认title</slot> ...
  • element-ui 封装dialog组件

    千次阅读 2020-03-29 21:25:41
    需要封装一个dialog组件。但是出现一个问题。初始第一次点击某个按钮可以正常弹出。但是后面无论怎么点击都无法出现。 解决办法: 给dialog添加一个v-if。代码如下: 弹窗组件 login.vue ---------------------...
  • vue 封装弹窗组件注意

    2021-02-26 10:02:48
    组件 <template> <div> <p @click="onDelete"> 打开 </p> <!-- 弹框 --> <code-dialog :status.sync="deleteDialogStatus" /> </div> </template> <...
  • 使用 vant 组件封装可复用组件,主要展示Dialog 弹出框。 此只使用父子传值方法,也可使用 vuex 等。 达成目标: 父组件点击按钮触发子组件功能(可复用)。 需求: 1. 可自由传值。 2. 需要避免子组件直接更改...
  • 封装组件代码: <template> <div> <el-dialog title="title" :visible.sync="visible" @close="$emit('update:show', false)" :show="show"> <span>this is a dialog</span&g
  • Vue 中对ElementUI的Dialog组件封装

    千次阅读 2019-12-02 10:20:56
    Vue 中对ElementUI的Dialog组件封装 <el-dialog title="提示" :visible.sync="visible" :close-on-click-modal="false" @close="QualityDialogClose" > <span slot="footer" class="dialog-foo...
  • Vue中的Dialog组件

    2021-04-20 09:39:59
    在最近开发项目中 遇到了一个问题: 父组件: <template> <Dialog v-model="dialogShow" :data="dialogData" > </Dialog> </template>
  • <template> <div> <el-dialog title="title" :visible.sync="visible" @close="$emit('update:show', false)" :show="show" :close-on-click-modal="false" ...
  • 在我们封装组件中加入变量visible与关闭函数 <el-dialog title="文件详情" :visible.sync="visible" :close-on-click-modal="false" @close="dialogClose" > //加入你要编写的内容 </el-dialog>...
  • 前言: 这个问题的现象是当你封装dialog组件时,传入prop去控制他的显示与否,点击关闭按钮关闭不了(更加具体的描述就是,这个dialog窗体会在你关闭之后再次弹出来)的解决方法。 首先这个现象产生的原因应该是...
  • 废话不说了,直接上...1,封装Dialog.vue文件 ** <template> <div class="base-dialog"> <el-dialog :type="type" :width="width" :custom-class="customClass" :fullscreen="fullscreen" :tit
  • 基于VueDialog对话框组件的实现

    千次阅读 2020-02-24 13:59:10
    今天来实现一个基础的对话框组件~ 演示 点击open按钮打开对话框 点击取消在控制台打印出“已取消”,并关闭对话框 点击确定在控制台打印出“已确定”,并关闭对话框 API mask:控制是否展示遮罩 info:对话框显示...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,913
精华内容 765
关键字:

vue封装dialog组件

vue 订阅