zoukankan      html  css  js  c++  java
  • vue + elementui 中的弹窗组件封装成公共组件

    1. 第一步

    <template>
      <div class="tip">
        <el-dialog title="提示"
                   :visible="dialogVisible"
                   width="30%">
          <span>{{msg}}</span>
          <span slot="footer"
                class="dialog-footer">
            <el-button @click="clear">取 消</el-button>
            <el-button type="primary"
                       @click="sure">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </template>
    <script>
    export default {
      data () {
        return {
        }
      },
      props: {
        dialogVisible: {
          type: Boolean,
          default: false
        },
        msg: {
          type: String,
          default: '是否退出页面'
        }
      },
      methods: {
        clear () {
          this.$emit('clear', false);
        },
        sure () {
          this.$emit('sure', false);
          this.$router.push('/register');
        }
      }
    }
    </script>
    <style lang="scss">
    </style>

    2. 第二步

    import MsgTip from './msgTip.vue';
    const tip = {};
    tip.install = function (vue) {
      vue.component('MsgTip', MsgTip);
    }
    export default tip;

    3. 在全局中导入

     4. 在组件中使用

     

  • 相关阅读:
    分分钟搞定Python之排序与列表
    分分钟搞定Python之排序与列表
    联系我
    联系我
    联系我
    联系表单 1_copy
    联系表单 1_copy
    联系表单 1_copy
    联系表单 1
    联系表单 1
  • 原文地址:https://www.cnblogs.com/big--Bear/p/12462253.html
Copyright © 2011-2022 走看看