867e1fa8 by 任超

feat:弹框

1 parent eb628dbd
1 <template> 1 <template>
2 <transition name="msgbox-fade"> 2 <transition name="msgbox-fade">
3 <div class="el-message-box__wrapper" tabindex="-1" v-show="visible" @click.self="handleWrapperClick" role="dialog" 3 <div class="el-message-box__wrapper" tabindex="-1"
4 v-show="visible" @click.self="handleWrapperClick" role="dialog"
4 aria-modal="true" :aria-label="title || 'dialog'"> 5 aria-modal="true" :aria-label="title || 'dialog'">
5 <div class="el-message-box" :class="[customClass, center && 'el-message-box--center']"> 6 <div class="el-message-box" :class="[customClass, center && 'el-message-box--center']">
6 <div class="el-message-box__header" v-if="title !== null">
7 <div class="el-message-box__title">
8 <div :class="['el-message-box__status', icon]" v-if="icon && center">
9 </div>
10 <span>{{ title }}</span>
11 </div>
12 <button type="button" class="el-message-box__headerbtn" aria-label="Close" v-if="showClose"
13 @click="handleAction(distinguishCancelAndClose ? 'close' : 'cancel')"
14 @keydown.enter="handleAction(distinguishCancelAndClose ? 'close' : 'cancel')">
15 <i class="el-message-box__close el-icon-close"></i>
16 </button>
17 </div>
18 <div class="el-message-box__content"> 7 <div class="el-message-box__content">
19 <div class="el-message-box__message" v-if="message !== ''"> 8 <slot>
20 <slot> 9 <p>{{ message }}</p>
21 <p>{{ message }}</p> 10 </slot>
22 </slot> 11 </div>
23 </div> 12 <div class="el-message-box__btns">
13 <el-button :loading="cancelButtonLoading" :class="[cancelButtonClasses]" :round="roundButton" size="small"
14 @click.native="handleAction('cancel')" @keydown.enter="handleAction('cancel')">
15 {{ cancelButtonText || t('el.messagebox.cancel') }}
16 </el-button>
24 </div> 17 </div>
25 </div> 18 </div>
26 </div> 19 </div>
...@@ -44,7 +37,6 @@ let typeMap = { ...@@ -44,7 +37,6 @@ let typeMap = {
44 37
45 export default { 38 export default {
46 mixins: [Popup, Locale], 39 mixins: [Popup, Locale],
47
48 props: { 40 props: {
49 modal: { 41 modal: {
50 default: true 42 default: true
...@@ -271,3 +263,15 @@ export default { ...@@ -271,3 +263,15 @@ export default {
271 } 263 }
272 }; 264 };
273 </script> 265 </script>
266 <style scoped lang="scss">
267 .el-message-box__wrapper {
268 background: none;
269 }
270 .el-message-box {
271 border: none;
272 }
273 .el-message-box__content {
274 min-height: 150px;
275 padding-top: 30px;
276 }
277 </style>
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
20 <i class="el-icon-s-unfold pointer"></i> 20 <i class="el-icon-s-unfold pointer"></i>
21 </div> 21 </div>
22 <ul> 22 <ul>
23 <li v-for="(item, index) in notice" :key="index" class="flexst pointer"> 23 <li v-for="(item, index) in notice" :key="index" @click="handleNotice" class="flexst pointer">
24 <p class="list-title">{{ item.title }}</p> 24 <p class="list-title">{{ item.title }}</p>
25 <p class="marginZL15">{{ item.date }}</p> 25 <p class="marginZL15">{{ item.date }}</p>
26 <p>{{ item.state }}</p> 26 <p>{{ item.state }}</p>
...@@ -237,6 +237,9 @@ export default { ...@@ -237,6 +237,9 @@ export default {
237 chart.area().position('year*value').shape('smooth'); 237 chart.area().position('year*value').shape('smooth');
238 chart.line().position('year*value').size(2).shape('smooth'); 238 chart.line().position('year*value').size(2).shape('smooth');
239 chart.render(); 239 chart.render();
240 },
241 handleNotice () {
242 this.$alertMes('9999999999')
240 } 243 }
241 } 244 }
242 } 245 }
......