mirrors/element
1
0
Fork 0
mirror of https://github.com/ElemeFE/element.git synced 2025-12-19 12:04:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

update message box prompt style

Browse Source
This commit is contained in:
Leopoldthecoder
2016-09-02 13:56:47 +08:00
parent f6dd3cf7bc
commit 07a0943d6b
34 changed files with 247 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/message-box/src/main.vue
View File

@@ -10,7 +10,7 @@
<div class="el-message-box__status" :class="[ typeClass ]"></div>
<div class="el-message-box__message" :style="{ 'margin-left': typeClass ? '50px' : '0' }"><p>{{ message }}</p></div>
<div class="el-message-box__input" v-show="showInput">
<input type="text" v-model="inputValue" :placeholder="inputPlaceholder" ref="input" />
<el-input v-model="inputValue" :placeholder="inputPlaceholder" ref="input"></el-input>
<div class="el-message-box__errormsg" :style="{ visibility: !!editorErrorMessage ? 'visible' : 'hidden' }">{{ editorErrorMessage }}</div>
</div>
</div>
@@ -34,6 +34,7 @@
};
import Popup from 'vue-popup';
import ElInput from 'packages/input/index.js';
export default {
mixins: [ Popup ],
@@ -54,6 +55,10 @@
}
},
components: {
ElInput
},
computed: {
typeClass() {
return this.type && typeMap[this.type] ? `el-icon-${ typeMap[this.type] }` : '';
@@ -98,6 +103,7 @@
var inputPattern = this.inputPattern;
if (inputPattern && !inputPattern.test(this.inputValue || '')) {
this.editorErrorMessage = this.inputErrorMessage || '输入的数据不合法!';
this.$refs.input.$el.querySelector('input').classList.add('invalid');
return false;
}
var inputValidator = this.inputValidator;
@@ -105,6 +111,7 @@
var validateResult = inputValidator(this.inputValue);
if (validateResult === false) {
this.editorErrorMessage = this.inputErrorMessage || '输入的数据不合法!';
this.$refs.input.$el.querySelector('input').classList.add('invalid');
return false;
}
if (typeof validateResult === 'string') {
@@ -114,6 +121,7 @@
}
}
this.editorErrorMessage = '';
this.$refs.input.$el.querySelector('input').classList.remove('invalid');
return true;
}
},
@@ -128,8 +136,8 @@
value(val) {
if (val && this.$type === 'prompt') {
setTimeout(() => {
if (this.$refs.input) {
this.$refs.input.focus();
if (this.$refs.input && this.$refs.input.$el) {
this.$refs.input.$el.querySelector('input').focus();
}
}, 500);
}