all files / src/message/ message.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2×
 
 
 
 
 
 
 
 
2×
 
 
 
 
 
 
 
 
 
 
 
4×
 
 
 
 
 
2×
2×
 
 
 
2×
 
 
1×
1×
 
 
1×
1×
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<template>
  <transition name="fade">
    <div class="am-mask am-message-wrapper" :style="{'z-index': zIndex}" v-if="visible">
      <div class="am-message-content">
        <div class="am-message-head" v-if="title!==''">{{title}}</div>
        <div class="am-message-body">
          <div v-if="enableHtml" v-html="$slots.default[0]"></div>
          <slot v-else></slot>
        </div>
        <div class="am-message-foot">
          <div class="am-message-btn" @click="onClose" v-if="cancelButton.text">{{cancelButton.text}}</div>
          <div class="am-message-btn" @click="onConfirm" v-if="confirmButton.text">
            {{confirmButton.text}}
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
 
<script>
export default {
  name: "amDialog",
  props: {
    title: {
      type: String,
      default: "标题"
    },
    enableHtml: {
      type: Boolean,
      default: false
    },
    cancelButton: {
      type: Object,
      default: () => {
        return {
          text: "取消",
          callback: undefined
        };
      }
    },
    confirmButton: {
      type: Object,
      default: () => {
        return {
          text: "确定",
          callback: undefined
        };
      }
    },
    zIndex: {
      type: [String, Number],
      default: 100
    }
  },
  data() {
    return {
      visible: false
    };
  },
  methods: {
    callback(name) {
      Eif (this[name] && typeof this[name].callback === "function") {
        this[name].callback(this); // this === message
      }
    },
    close() {
      this.visible = false;
    },
    onClose() {
      this.callback("cancelButton");
      this.close();
    },
    onConfirm() {
      this.callback("confirmButton");
      this.close();
    }
  }
};
</script>
 
<style lang="scss" scoped>
@import "var";
.am-message {
  &-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    min-width: 30%;
    background: $mask-bg;
    border-radius: $border-radius;
    background: #ffffff;
    box-shadow: 0 1px 3px 0 $box-shadow;
    z-index: 100;
  }
  &-head {
    padding: 0 0.5em;
    @include sc(18px, $color);
    font-weight: 700;
    line-height: $button-height;
  }
  &-body {
    padding: 0.5em;
    min-height: 100px;
  }
  &-foot {
    display: flex;
    border-top: 1px solid $border-color;
  }
  &-btn {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    &:last-child {
      color: $blue;
    }
  }
  &-btn + &-btn {
    border-left: 1px solid $border-color;
  }
}
</style>