-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch '3.0' of https://github.com/ex-em/EVUI into 701_3.0_sche…
…duler � Conflicts: � src/main.js
- Loading branch information
Showing
12 changed files
with
713 additions
and
65 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
### Desc | ||
$messagebox 는 `app.config.globalProperties`에 등록되어 있어, 각 컴포넌트에서 아래처럼 사용 가능 | ||
```vue | ||
<template> | ||
<ev-button | ||
@click="showMsg" | ||
> | ||
Show Message | ||
</ev-button> | ||
</template> | ||
<script> | ||
import { getCurrentInstance } from 'vue'; | ||
export default { | ||
setup() { | ||
const { ctx } = getCurrentInstance(); | ||
const showMsg = () => { | ||
ctx.$messagebox({ | ||
message: 'message', | ||
// options | ||
}); | ||
}; | ||
return { | ||
showMsg, | ||
}; | ||
}, | ||
} | ||
</script> | ||
``` | ||
```js | ||
// 메시지만 입력 시, | ||
ctx.$messagebox('message'); | ||
|
||
// 옵션과 사용 시, | ||
ctx.$messagebox({ | ||
message: 'message', | ||
// options | ||
}); | ||
``` | ||
|
||
### Props | ||
|
||
| 이름 | 디폴트 | 타입 | 설명 | 종류 | | ||
| --- | ---- | ----- | ---- | --- | | ||
| type | '' | String | 메시지 스타일. type입력 시 좌측 상단에 타입에 맞는 아이콘 노출됨 | 'info', 'success', 'warning', 'error' | | ||
| message | '' | String | 메시지 창에 띄울 문구 | | | ||
| title | '' | String | 메시지 상단 타이틀 문구 | | | ||
| iconClass | '' | String | 메시지 창 좌측에 띄울 EVUI 아이콘 명 | | | ||
| onClose | null | Function | 메시지 창이 닫힌 후 동작. 매개변수로 클릭한 버튼 타입을 받음(ok, cancel). 닫기 버튼 및 모달 레이어 클릭으로 닫을 시 cancel | | | ||
| showClose | true | Boolean | 닫기 버튼 노출 여부 | true, false | | ||
| showConfirmBtn | true | Boolean | 확인 버튼 노출 여부 | true, false | | ||
| showCancelBtn | true | Boolean | 취소 버튼 노출 여부 | true, false | | ||
| confirmBtnText | 'OK' | String | 확인 버튼 문구 | | | ||
| cancelBtnText | 'Cancel' | String | 취소 버튼 문구 | | | ||
| closeOnClickModal | true | Boolean | 모달 레이어 클릭 시 메시지 창 닫기 여부 | true, false | | ||
| lockScroll | true | Boolean | 메시지 창 노출 시 스크롤 사라짐 여부 | true, false | | ||
| useHTML | false | Boolean | 메시지 창 문구에 HTML 사용 여부. 사용 시 message 속성에 함께 작성 | | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,211 @@ | ||
<template> | ||
<div class="case"> | ||
<p class="case-title">Common</p> | ||
<ev-button | ||
type="info" | ||
@click="showInfo" | ||
> | ||
Show Info | ||
</ev-button> | ||
<ev-button | ||
type="primary" | ||
@click="showSuccess" | ||
> | ||
Show Success | ||
</ev-button> | ||
<ev-button | ||
type="warning" | ||
@click="showWarning" | ||
> | ||
Show Warning | ||
</ev-button> | ||
<ev-button | ||
type="error" | ||
@click="showError" | ||
> | ||
Show Error | ||
</ev-button> | ||
</div> | ||
<div class="case"> | ||
<p class="case-title">Title</p> | ||
<ev-button | ||
@click="showTitle" | ||
> | ||
Show Title | ||
</ev-button> | ||
</div> | ||
<div class="case"> | ||
<p class="case-title">Icon</p> | ||
<ev-button | ||
@click="showIcon" | ||
> | ||
Show Icon | ||
</ev-button> | ||
</div> | ||
<div class="case"> | ||
<p class="case-title">On/Off Element</p> | ||
<ev-button | ||
@click="showConfirm" | ||
> | ||
Hide Cancel | ||
</ev-button> | ||
<ev-button | ||
@click="showCancel" | ||
> | ||
Hide Confirm | ||
</ev-button> | ||
<ev-button | ||
@click="showClose" | ||
> | ||
Hide Close | ||
</ev-button> | ||
</div> | ||
<div class="case"> | ||
<p class="case-title">Custom Button Text</p> | ||
<ev-button | ||
@click="showCustomText" | ||
> | ||
Custom Text | ||
</ev-button> | ||
</div> | ||
<div class="case"> | ||
<p class="case-title">After Closing</p> | ||
<ev-button | ||
@click="showOnClose" | ||
> | ||
Show onClose | ||
</ev-button> | ||
<div class="description"> | ||
<span class="badge"> | ||
After close behavior | ||
</span> | ||
{{ onCloseMsg }} | ||
</div> | ||
</div> | ||
<div class="case"> | ||
<p class="case-title">HTML</p> | ||
<ev-button | ||
@click="showHTML" | ||
> | ||
Show HTML | ||
</ev-button> | ||
</div> | ||
</template> | ||
|
||
<script> | ||
import { ref, getCurrentInstance } from 'vue'; | ||
export default { | ||
setup() { | ||
const { ctx } = getCurrentInstance(); | ||
const showInfo = () => { | ||
ctx.$messagebox({ | ||
message: 'Success! This is an Success type message.', | ||
type: 'info', | ||
}); | ||
}; | ||
const showSuccess = () => { | ||
ctx.$messagebox({ | ||
message: 'Success! This is an Success type message.', | ||
type: 'success', | ||
}); | ||
}; | ||
const showWarning = () => { | ||
ctx.$messagebox({ | ||
message: 'Warning. This is an Warning type message.', | ||
type: 'warning', | ||
}); | ||
}; | ||
const showError = () => { | ||
ctx.$messagebox({ | ||
message: 'Error. This is an Error type message.', | ||
type: 'error', | ||
}); | ||
}; | ||
const showTitle = () => { | ||
ctx.$messagebox({ | ||
title: 'Title!', | ||
message: 'You can enter the title.', | ||
iconClass: 'ev-icon-getmore', | ||
}); | ||
}; | ||
const showIcon = () => { | ||
ctx.$messagebox({ | ||
message: 'You can add an icon.', | ||
iconClass: 'ev-icon-getmore', | ||
}); | ||
}; | ||
const showConfirm = () => { | ||
ctx.$messagebox({ | ||
title: 'On/Off Element', | ||
message: 'Hide cancel button.', | ||
iconClass: 'ev-icon-getmore', | ||
showCancelBtn: false, | ||
}); | ||
}; | ||
const showCancel = () => { | ||
ctx.$messagebox({ | ||
title: 'On/Off Element', | ||
message: 'Hide confirm button.', | ||
iconClass: 'ev-icon-getmore', | ||
showConfirmBtn: false, | ||
}); | ||
}; | ||
const showClose = () => { | ||
ctx.$messagebox({ | ||
title: 'On/Off Element', | ||
message: 'Hide close button.', | ||
iconClass: 'ev-icon-getmore', | ||
showClose: false, | ||
}); | ||
}; | ||
const showCustomText = () => { | ||
ctx.$messagebox({ | ||
title: 'Custom Button Text', | ||
message: 'You can modify the name of the button.', | ||
iconClass: 'ev-icon-getmore', | ||
confirmBtnText: 'Custom Confirm', | ||
cancelBtnText: 'Custom Cancel', | ||
}); | ||
}; | ||
const onCloseMsg = ref(); | ||
const showOnClose = () => { | ||
ctx.$messagebox({ | ||
title: 'After Close Event', | ||
message: 'You can set the behavior after closing.', | ||
onClose: (type) => { | ||
onCloseMsg.value = `[ type = '${type}' ] You can set the behavior after closing!`; | ||
}, | ||
}); | ||
}; | ||
const showHTML = () => { | ||
ctx.$messagebox({ | ||
title: 'Use HTML', | ||
message: 'You <i>can enter</i> your message in <strong>html</strong>.', | ||
useHTML: true, | ||
}); | ||
}; | ||
return { | ||
showInfo, | ||
showSuccess, | ||
showWarning, | ||
showError, | ||
showTitle, | ||
showIcon, | ||
showConfirm, | ||
showCancel, | ||
showClose, | ||
showCustomText, | ||
onCloseMsg, | ||
showOnClose, | ||
showHTML, | ||
}; | ||
}, | ||
}; | ||
</script> | ||
|
||
<style lang="scss" scoped> | ||
.case .ev-button { | ||
margin-right: 10px; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { parseComponent } from 'vue-template-compiler'; | ||
import mdText from '!!raw-loader!./api/messageBox.md'; | ||
import Default from './example/Default'; | ||
import DefaultRaw from '!!raw-loader!./example/Default'; | ||
|
||
export default { | ||
mdText, | ||
components: { | ||
Default: { | ||
description: '사용자 작업에 대한 확인 정보창을 표시할 수 있습니다. (버튼 클릭 시 메시지 창을 확인할 수 있습니다.)', | ||
component: Default, | ||
parsedData: parseComponent(DefaultRaw), | ||
}, | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.