Initial commit

2025-12-19 12:04:02 +08:00 · 2016-07-27 14:15:02 +08:00
commit e320f43c2d
352 changed files with 28969 additions and 0 deletions
--- a/packages/message-box/src/main.vue
+++ b/packages/message-box/src/main.vue
@@ -0,0 +1,147 @@
+<template>
+  <div class="el-message-box__wrapper">
+    <div class="el-message-box" v-if="rendered" v-show="visible" transition="msgbox-bounce">
+      <div class="el-message-box__header" v-if="title !== ''">
+        <div class="el-message-box__title">{{ title }}</div>
+        <i class="el-message-box__close el-icon-close" @click="handleAction('cancel')" v-if="showClose"></i>
+      </div>
+      <div class="el-message-box__content" v-if="message !== ''">
+        <div class="el-message-box__status {{ typeClass }}"></div>
+        <div class="el-message-box__message" :style="{ 'margin-left': type ? '50px' : '0' }"><p>{{ message }}</p></div>
+        <div class="el-message-box__input" v-show="showInput">
+          <input type="text" v-model="inputValue" :placeholder="inputPlaceholder" v-el:input />
+          <div class="el-message-box__errormsg" :style="{ visibility: !!editorErrorMessage ? 'visible' : 'hidden' }">{{editorErrorMessage}}</div>
+        </div>
+      </div>
+      <div class="el-message-box__btns">
+        <el-button class="{{ cancelButtonClasses }}" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</el-button>
+        <el-button class="{{ confirmButtonClasses }}" v-show="showConfirmButton" @click="handleAction('confirm')" type="primary">{{ confirmButtonText }}</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/babel">
+  let CONFIRM_TEXT = '确定';
+  let CANCEL_TEXT = '取消';
+  let typeMap = {
+    success: 'circle-check',
+    info: 'information',
+    warning: 'warning',
+    error: 'circle-cross'
+  };
+
+  import Popup from 'vue-popup';
+
+  export default {
+    name: 'el-message-box',
+
+    mixins: [ Popup ],
+
+    props: {
+      modal: {
+        default: true
+      },
+      showClose: {
+        type: Boolean,
+        default: true
+      },
+      closeOnClickModal: {
+        default: true
+      },
+      closeOnPressEscape: {
+        default: true
+      }
+    },
+
+    computed: {
+      typeClass() {
+        return this.type ? `el-icon-${ typeMap[this.type] }` : '';
+      },
+
+      confirmButtonClasses() {
+        return 'el-button el-button-primary ' + this.confirmButtonClass;
+      },
+      cancelButtonClasses() {
+        return 'el-button el-button-default ' + this.cancelButtonClass;
+      }
+    },
+
+    methods: {
+      handleAction(action) {
+        if (this.$type === 'prompt' && action === 'confirm' && !this.validate()) {
+          return;
+        }
+        var callback = this.callback;
+        this.visible = false;
+        callback(action);
+      },
+
+      validate() {
+        if (this.$type === 'prompt') {
+          var inputPattern = this.inputPattern;
+          if (inputPattern && !inputPattern.test(this.inputValue || '')) {
+            this.editorErrorMessage = this.inputErrorMessage || '输入的数据不合法!';
+            return false;
+          }
+          var inputValidator = this.inputValidator;
+          if (typeof inputValidator === 'function') {
+            var validateResult = inputValidator(this.inputValue);
+            if (validateResult === false) {
+              this.editorErrorMessage = this.inputErrorMessage || '输入的数据不合法!';
+              return false;
+            }
+            if (typeof validateResult === 'string') {
+              this.editorErrorMessage = validateResult;
+              return false;
+            }
+          }
+        }
+        this.editorErrorMessage = '';
+        return true;
+      }
+    },
+
+    watch: {
+      inputValue() {
+        if (this.$type === 'prompt') {
+          this.validate();
+        }
+      },
+
+      visible(val) {
+        if (val && this.$type === 'prompt') {
+          setTimeout(() => {
+            if (this.$els.input) {
+              this.$els.input.focus();
+            }
+          }, 500);
+        }
+      }
+    },
+
+    data() {
+      return {
+        title: '',
+        message: '',
+        type: '',
+        showInput: false,
+        inputValue: null,
+        inputPlaceholder: '',
+        inputPattern: null,
+        inputValidator: null,
+        inputErrorMessage: '',
+        showConfirmButton: true,
+        showCancelButton: false,
+        confirmButtonText: CONFIRM_TEXT,
+        cancelButtonText: CANCEL_TEXT,
+        confirmButtonClass: '',
+        confirmButtonDisabled: false,
+        cancelButtonClass: '',
+
+        editorErrorMessage: null,
+        callback: null
+      };
+    }
+  };
+</script>