0.2.0 • Published 4 years ago
vue-promise-modal v0.2.0
skb_project
Promise를 이용한 Vue.js Modal Component
2020 SK Broadband Internship Project
기간
- 2020.07.13 ~ 2020.08.28
기술스택
- Vue.js
- HTML
- SCSS
- TypeScript
- ESLint
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Run your unit tests
npm run test:unit
Lints and fixes files
npm run lint
Type
export type SizeType = 'normal' | 'small' | 'big' | 'full';
export type AlignType = 'center' | 'left';
export interface UIOptionType {
size?: SizeType;
align?: AlignType;
negativeMessage?: string;
positiveMessage?: string;
}
Usage
Modal
const uiOption: UIOptionType = {
size: 'normal', // default: normal
align: 'center', // default: center
positiveMessage: '확인', //default: 확인
negativeMessage: '취소',
};
const content: string = 'DESCRIPTION';
const title: string = 'TITLE';
this.$modal.on(uiOption, content, title);
PromiseModal
const uiOption: UIOptionType = {
size: 'normal', // default: normal
align: 'center', // default: center
positiveMessage: '확인', //default: 확인
negativeMessage: '취소',
};
const content: string = 'DESCRIPTION';
const title: string = 'TITLE';
try {
await this.$promiseModal.on(uiOption, content, title);
// resolve - click positive message button
} catch (e) {
// reject - click negative message button
}
MultiPromiseModal
const uiOption: UIOptionType = {
size: 'normal', // default: normal
align: 'center', // default: center
positiveMessage: '확인', //default: 확인
negativeMessage: '취소',
};
const content: string = 'DESCRIPTION';
const title: string = 'TITLE';
const buttons: string[] = ['1', '2', '3'];
try {
const idx = await this.$promiseModal.on(uiOption, content, title, buttons);
// resolve - click positive message button
// idx: index of clicked button
switch (idx) {
case 0: // do 1
break;
case 1: // do 2
break;
case 2: // do 3
break;
default: // do else
}
} catch (e) {
// reject - click negative message button
}
0.2.0
4 years ago
0.1.31
4 years ago
0.1.30
4 years ago
0.1.29
4 years ago
0.1.28
4 years ago
0.1.27
4 years ago
0.1.26
4 years ago
0.1.24
4 years ago
0.1.25
4 years ago
0.1.23
4 years ago
0.1.22
4 years ago
0.1.21
4 years ago
0.1.20
4 years ago
0.1.19
4 years ago
0.1.17
4 years ago
0.1.18
4 years ago
0.1.16
4 years ago
0.1.14
4 years ago
0.1.15
4 years ago
0.1.11
4 years ago
0.1.12
4 years ago
0.1.13
4 years ago
0.1.10
4 years ago
0.1.9
4 years ago
0.1.8
4 years ago
0.1.7
4 years ago
0.1.6
4 years ago
0.1.5
4 years ago
0.1.4
4 years ago
0.1.3
4 years ago
0.1.2
4 years ago
0.1.1
4 years ago
0.1.0
4 years ago