vue 自定义组件 Alert

无图无真相！！！

一个按钮 两个按钮 没有标题

开发环境

vue2.x

组件 LzAlert.vue

<template>
  <div class="wrapper" @click="cancelable && dismiss()" v-if="visiable">
    <div class="lz-dialog" ref="box" @click.stop="">
      <div v-if="msgData.title != null" class="lz-title">
        {{ msgData.title }}
      </div>
      <div v-if="msgData.msg != null" class="lz-msg">{{ msgData.msg }}</div>
      <div class="lz-btns">
        <div v-if="msgData.left != null" class="btn" v-bind:style="styleLeft" @click="leftAction">{{ msgData.left }}</div>
        <div v-if="msgData.right != null" class="btn" v-bind:style="styleRight" @click="rightAction">{{ msgData.right }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "lz-alert",
  props: {
    title: null,
    msg: null,
    left: null,
    right: null,
    cancelable: {
      type: Boolean,
      default: true,
    },
    visiable: false,
    leftColor: {
        type: String,
        default: "#999999",
    },
    rightColor: {
        type: String,
        default: "#ff00ff",
    }
  },
  data() {
    return {
      msgData: {
        title: this.title,
        msg: this.msg,
        left: this.left,
        right: this.right,
      },
      styleLeft: {
          color: this.leftColor,
      },
      styleRight: {
          color: this.rightColor,
      }
    };
  },
  methods: {
    dismiss() {
      console.log("消失");
      this.$emit("update:visiable", false);
    },
    leftAction() {
        this.dismiss();
        this.$emit("leftAction");
    },
    rightAction() {
        this.dismiss();
        this.$emit("rightAction");
    }
  },
};
</script>

<style >
.wrapper {
  background: #000000ff;
  opacity: 0.8;
  width: 100%;
  height: 100%;
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
}
.lz-dialog {
  display: block;
  background-color: #ffffff;
  border-radius: 5px;
  margin: auto;
  overflow: hidden;
  padding: 10px;
  max-width: 240px;
  min-width: 240px;
}

.lz-title {
  color: #333;
  font-weight: bolder;
}
.lz-msg {
  color: forestgreen;
  margin: 10px;
}
.lz-btns {
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.btn {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: red;
}
</style>

使用方法

<template>
  <div>
    <h1>测试自定义组件 </h1>
    <div @click="showAlert1()">弹1个按钮框</div>
    <lz-alert :visiable.sync="iShow1" :title="iTitle" :msg="iMsg" :left="iLeft" />
    <hr />
    <div @click="showAlert2()">弹2个按钮框</div>
    <lz-alert :visiable.sync="iShow2" :title="iTitle" :msg="iMsg" :left="iLeft" :right="iRight" />
    <hr />
    <div @click="showAlert3()">不含标题</div>
    <lz-alert :visiable.sync="iShow3" :msg="iMsg" :left="iLeft" :right="iRight" :leftAction="leftAct3()" :rightAction="rightAct3()" />

  </div>
</template>


<script>
import LzAlert from '../components/LzAlert.vue';

export default {
  components: {
    LzAlert
  },
  data() {
    return {
      iTitle: "提示信息",
      iMsg: "如果您的个人信息发现异常，请及时修改密码",
      iLeft: "取消",
      iRight: "确定",
      iShow1: false,
      iShow2: false,
      iShow3: false,
    };
  },
  methods: {
      showAlert1() {
        this.iShow1 = true;
      },
      showAlert2() {
        this.iShow2 = true;
      },
      showAlert3() {
        this.iShow3 = true;
      },

      leftAct3() {
        console.log("点击了取消");
      },
      rightAct3() {
        console.log("点击了确定");

      }
  },
};
</script>

<style>
</style>