码迷,mamicode.com
首页 > 其他好文 > 详细

自定义 MessageBox 组件

时间:2019-10-15 19:14:22      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:key   dde   css   temp   ping   ola   mode   mon   button   

 效果:

 

技术图片

 

 

 

公共组件页面:

技术图片

 

 

 

 

js部分:

<script>
  export default {
    props: {
      title: {
        type: String,
        default: ‘标题‘
      },
      content: {
        type: String,
        default: ‘这是弹框内容‘
      },
      isShowInput: false,
      inputValue: ‘‘,
      isShowCancelBtn: {
        type: Boolean,
        default: true
      },
      isShowConfimrBtn: {
        type: Boolean,
        default: true
      },
      cancelBtnText: {
        type: String,
        default: ‘取消‘
      },
      confirmBtnText: {
        type: String,
        default: ‘确定‘
      }
    },
    data () {
      return {
        isShowMessageBox: false,
        resolve: ‘‘,
        reject: ‘‘,
        promise: ‘‘ // 保存promise对象
      };
    },
    methods: {
      // 确定,将promise断定为resolve状态
      confirm: function () {
        this.isShowMessageBox = false;
        if (this.isShowInput) {
          this.resolve(this.inputValue);
        } else {
          this.resolve(‘confirm‘);
        }
        this.remove();
      },
      // 取消,将promise断定为reject状态
      cancel: function () {
        this.isShowMessageBox = false;
        this.reject(‘cancel‘);
        this.remove();
      },
      // 弹出messageBox,并创建promise对象
      showMsgBox: function () {
        this.isShowMessageBox = true;
        this.promise = new Promise((resolvereject=> {
          this.resolve = resolve;
          this.reject = reject;
        });
        // 返回promise对象
        return this.promise;
      },
      remove: function () {
        setTimeout(() => {
          this.destroy();
        }, 300);
      },
      destroy: function () {
        this.$destroy();
        document.body.removeChild(this.$el);
      }
    }
  };
</script>

 css部分:

<style lang="less" scoped>
  .message-box {
    positionrelative;
    .mask {
      positionfixed;
      top0;
      left0;
      bottom0;
      right0;
      z-index50000;
      backgroundrgba(0000.5);
    }
    .message-content {
      positionfixed;
      box-sizingborder-box;
      padding1em;
      min-width70%;
      left50%;
      top50%;
      transformtranslate(-50%-50%);
      border-radius0.4em;
      background#fff;
      z-index50001;
      .icon {
        positionabsolute;
        top1em;
        right1em;
        width0.9em;
        height0.9em;
        color#878d99;
        cursorpointer;
        &:hover {
          color#2d8cf0;
        }
      }
      .title {
        // font-size: 1.2em;
        // font-weight: 600;
        margin-bottom1em;
        colorrgba(8080801);
        font-size14px;
        line-height150%;
        font-weightnormal;
      }
      .content {
        // font-size: 1em;
        line-height2em;
        // color: #555;
        colorrgba(1661661661);
        font-size12px;
        line-height150%;
      }
      input {
        width100%;
        margin1em 0;
        background-color#fff;
        border-radius0.4em;
        border1px solid #d8dce5;
        box-sizingborder-box;
        color#5a5e66;
        displayinline-block;
        font-size14px;
        height3em;
        line-height1;
        outlinenone;
        padding0 1em;
        &:focus {
          border-color#2d8cf0;
        }
      }
      .btn-group {
        margin-top1em;
        floatright;
        overflowhidden;
        .btn-default {
          padding0.8em 1.5em;
          font-size1em;
          color#555;
          border1px solid #d8dce5;
          border-radius0.2em;
          cursorpointer;
          background-color#fff;
          outlinenone;
 
          &:hover {
            color#2d8cf0;
            border-color#c6e2ff;
            background-color#ecf5ff;
          }
        }
 
        .btn-primary {
          padding0.8em 1.5em;
          font-size1em;
          color#fff;
          border-radius0.2em;
          cursorpointer;
          border1px solid #2d8cf0;
          background-color#2d8cf0;
          outlinenone;
 
          &:hover {
            opacity.8;
          }
        }
        .btn-confirm {
          margin-left1em;
        }
      }
    }
  }
  .handle_btn{
        positionrelative;
        bottom-20px;
        >ul{
            displayflex;
            justify-contentspace-between;
            text-aligncenter;
            >li{
                width45%;
                span{
                    border-radius6px;
                    font-size14px;
                    line-height150%;
                }
            }
            // >li:first-child{

            // }
        }
  }
</style>

main全局:

技术图片

 

 

 

公共的js设置全局属性

import msgboxVue from ‘./index.vue‘;

// 定义插件对象
const MessageBox = {};
// vue的install方法,用于定义vue插件
MessageBox.install = function(Vueoptions) {
  const MessageBoxInstance = Vue.extend(msgboxVue);
  let currentMsg;
  const initInstance = () => {
    // 实例化vue实例
    currentMsg = new MessageBoxInstance();
    let msgBoxEl = currentMsg.$mount().$el;
    document.body.appendChild(msgBoxEl);
  };
  // 在Vue的原型上添加实例方法,以全局调用
  Vue.prototype.$msgBox = {
    showMsgBox(options) {
      if (!currentMsg) {
        initInstance();
      }
      if (typeof options === ‘string‘) {
        currentMsg.content = options;
      } else if (typeof options === ‘object‘) {
        Object.assign(currentMsgoptions);
      }
      return currentMsg.showMsgBox()
        .then(val => {
          currentMsg = null;
          return Promise.resolve(val);
        })
        .catch(err => {
          currentMsg = null;
          return Promise.reject(err);
        });
    }
  };
};

export default MessageBox;

 

 

<!-- 自定义 MessageBox 组件 -->
<template>
  <div class="message-box" v-show="isShowMessageBox">
    <div class="mask" @click="cancel"></div>
    <div class="message-content">
      <!-- <svg class="icon" aria-hidden="true" @click="cancel"> -->
        <!-- <use xlink:href="#icon-delete"></use> -->
      <!-- </svg> -->
      <h3 class="title">{{ title }}</h3>
      <p class="content">{{ content }}</p>
      <div>
        <input type="text" v-model="inputValuev-if="isShowInputref="input" @keyup.enter="confirm">
      </div>
      <div class="handle_btn">
          <ul>
              <li @click="cancelv-show="isShowCancelBtn"><span style="color: rgba(166, 166, 166, 1);">{{ cancelBtnText }}</span></li>
              <li @click="confirmv-show="isShowConfimrBtn"><span style="color: rgba(254, 100, 98, 1);">{{ confirmBtnText }}</span></li>
          </ul>
      </div>
      <div class="btn-group">
        <!-- <button class="btn-default" @click="cancel" v-show="isShowCancelBtn">{{ cancelBtnText }}</button> -->
        <!-- <button class="btn-primary btn-confirm" @click="confirm" v-show="isShowConfimrBtn">{{ confirmBtnText }}</button> -->
      </div>
    </div>
  </div>
</template>
 
 
 
 
 
调用:
技术图片

 

 

自定义 MessageBox 组件

标签:key   dde   css   temp   ping   ola   mode   mon   button   

原文地址:https://www.cnblogs.com/zzz-knight/p/11679489.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!