팝업 및 대화 상자 (Vue)
Wijmo에서 Popup 컨트롤을 사용하면 대화 상자를 만들 수 있습니다. 대화 상자에는 소유자 요소가 없습니다. 이 샘플은 아래의 각 버튼에 대해 Popup 컨트롤을 사용하는 대화 상자를 표시합니다.
Input 컨트롤 알아보기 | Popup Dialog Documentation | Popup API Reference
이 데모는 Vue를 기반으로합니다.
app.vue
index.html
<template>
<div class="container-fluid">
<button class="btn btn-primary btn-space" @click="frmLoginPopup.show(true)">
Log In
</button>
<button class="btn btn-primary btn-space" @click="frmCreateAccountPopup.show(true)">
Create Account
</button>
<button class="btn btn-primary" @click="frmEditAccountPopup.show(true)">
Edit Account
</button>
<!-- Log In form -->
<wj-popup id="frmLoginPopup" :initialized="initLoginPopup">
<form @submit.prevent="onSubmit(frmLoginPopup)">
<h4 class="modal-header">
Log in
<button type="button" tabindex="-1" class="close wj-hide">×</button>
</h4>
<div class="modal-body">
<label>
Email:
<input class="form-control" required type="email" />
</label>
<br />
<label>
Password:
<input class="form-control" type="password" required pattern=".{4,}"
title="Please enter 4 characters or more." />
</label>
<br />
<label>
Remember Me
<input class="remember" type="checkbox" v-model="isRemember" />
</label>
<br />
<a href="" class="wj-hide-create" @click="frmCreateAccountPopup.show(true)">Don't have an account
yet?</a>
</div>
<div class="modal-footer">
<button class="btn btn-primary">
Log in
</button>
</div>
</form>
</wj-popup>
<!-- Create Account form -->
<wj-popup id="frmCreateAccountPopup" :initialized="initCreateAccountPopup">
<form @submit.prevent="onSubmit(frmCreateAccountPopup)">
<h4 class="modal-header">
Create Account
<button type="button" tabindex="-1" class="close wj-hide">×</button>
</h4>
<div class="modal-body">
<label>
Name:
<input class="form-control" required pattern=".{2,}"
title="Please enter 2 characters or more." />
</label>
<br />
<label>
Email:
<input class="form-control" type="email" required />
</label>
<br />
<label>
Password:
<input name="pswdFrmCreate" class="form-control" type="password" required pattern=".{4,}"
v-model="pw1" title="Please enter 4 characters or more." />
</label>
<br />
<label>
Confirm Password:
<input class="form-control" name="cnfrmPswdFrmCreate" v-model="pw2" type="password" required
validateEqual="pswdFrmCreate" />
<small :hidden="cnfrmPswdFrmCreateValid">
Passwords don't match.
</small>
</label>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="submit">
Create Account
</button>
</div>
</form>
</wj-popup>
<!-- Edit Account form -->
<wj-popup id="frmEditAccountPopup" :initialized="initEditAccountPopup">
<form @submit.prevent="onSubmit(frmEditAccountPopup)">
<h4 class="modal-header">
Edit Account
<button type="button" tabindex="-1" class="close wj-hide">×</button>
</h4>
<div class="modal-body">
<label>
Email:
<input class="form-control" required type="email" />
</label>
<br />
<label>
Current Password:
<input class="form-control" type="password" required pattern=".{4,}"
title="Please enter 4 characters or more." />
</label>
<br />
<label>
New Name:
<input class="form-control" required pattern=".{2,}"
title="Please enter 2 characters or more." />
</label>
<br />
<label>
New Password:
<input name="pswdFrmEdit" v-model="pw3" class="form-control" type="password" required
pattern=".{4,}" title="Please enter 4 characters or more." />
</label>
<br />
<label>
Confirm New Password:
<input class="form-control" name="cnfrmPswdFrmEdit" v-model="pw4" type="password" required
validateEqual="pswdFrmEdit" />
<small :hidden="cnfrmPswdFrmEditValid">
Passwords don't match.
</small>
</label>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="submit">
Update Account
</button>
</div>
</form>
</wj-popup>
</div>
</template>
<script setup>
import { ref, watch } from "vue";
const pw1 = ref("");
const pw2 = ref("");
const pw3 = ref("");
const pw4 = ref("");
const isRemember = ref(false);
const frmLoginPopup = ref({});
const frmCreateAccountPopup = ref({});
const frmEditAccountPopup = ref({});
const cnfrmPswdFrmEditValid = ref(true);
const cnfrmPswdFrmCreateValid = ref(true);
watch(pw2, (newPw2) => {
cnfrmPswdFrmCreateValid.value = newPw2 === pw1.value;
});
watch(pw4, (newPw4) => {
cnfrmPswdFrmEditValid.value = newPw4 === pw3.value;
});
function initLoginPopup(popup) {
frmLoginPopup.value = popup;
}
function initCreateAccountPopup (popup) {
frmCreateAccountPopup.value = popup;
}
function initEditAccountPopup (popup) {
frmEditAccountPopup.value = popup;
}
function onSubmit(popup) {
alert("form submitted");
popup.hide();
}
</script>
<style>
.modal-body {
min-width: 300px;
}
input:invalid {
border-color: red;
}
body {
margin-bottom: 24pt;
}
.btn-space {
margin-right: 5px !important;
}
</style>