localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

input 경고창 추가

Browse Source
This commit is contained in:
ckx6954 2024-12-19 09:38:23 +09:00
parent 71de3b89f0
commit cea58be11a
7 changed files with 113 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
index.html
View File

@ -1,13 +1,7 @@
<!doctype html>
<html
lang=""
class="light-style layout-navbar-fixed layout-menu-fixed layout-compact"
dir="ltr"
data-theme="theme-default"
data-assets-path="/"
data-template="vertical-menu-template"
data-style="light"
>
<html lang="" class="light-style layout-navbar-fixed layout-menu-fixed layout-compact" dir="ltr"
data-theme="theme-default" data-assets-path="/" data-template="vertical-menu-template" data-style="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ -27,10 +21,10 @@
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&amp;display=swap"
rel="stylesheet"
/>
rel="stylesheet" />
<link rel="stylesheet" href="/css/font.css" />
<link rel="stylesheet" href="/css/custom.css" />
<!-- Icons -->
<link rel="stylesheet" href="/vendor/fonts/boxicons.css" />
@ -56,9 +50,11 @@
<script src="/js/config.js"></script>
<!-- Include the highlight.js library -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"
rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
</head>
<body>
<div id="app"></div>
@ -83,4 +79,5 @@
<script type="module" src="/src/main.js"></script>
</body>
</html>

6
public/css/custom.css Normal file
View File

@ -0,0 +1,6 @@
/* 여기에 css 작성 */
.display-block {
display: block !important;
}

5
src/common/msgEnum.ts Normal file
View File

@ -0,0 +1,5 @@
export const enum fileMsg {
FileMaxSizeMsg = '파일 용량은 5MB를 넘을 수 없습니다.',
FileMaxLengthMsg = '최대 5개까지 첨부 할 수 있습니다.',
FileNotTypeMsg = '첨부 할 수 없는 파일유형이 있습니다.',
}

13
src/components/input/FormFile.vue
View File

@ -4,10 +4,14 @@
<div class="col-md-10">
<input class="form-control" type="file" :id="name" @change="changeHandler" multiple />
</div>
<div class="invalid-feedback" :class="isAlert ? 'display-block' : ''">{{ errorMsg }}</div>
</div>
</template>
<script setup>
import { fileMsg } from '@/common/msgEnum';
import { ref } from 'vue';
const prop = defineProps({
title: {
type: String,
@ -19,9 +23,18 @@ const prop = defineProps({
default: 'nameplz',
required: true,
},
isAlert : {
type: Boolean,
default: false,
required: false,
}
});
const emits = defineEmits(['update:data']);
const errorMsg = ref(fileMsg.FileMaxSizeMsg);
//파일 검사 하는거 만들어야겠지...
const changeHandler = (event) => {
const files = Array.from(event.target.files);

6
src/components/input/FormInput.vue
View File

@ -12,6 +12,7 @@
:value="value"
:maxLength="maxlength"
:placeholder="title" />
<div class="invalid-feedback" :class="isAlert ? 'display-block' : ''">{{ title }}을 확인해주세요.</div>
</div>
</div>
</template>
@ -50,6 +51,11 @@ const prop = defineProps({
default: 30,
required: false,
},
isAlert : {
type: Boolean,
default: false,
required: false,
}
});
const emits = defineEmits(['update:data'])

6
src/components/input/FormSelect.vue
View File

@ -9,6 +9,7 @@
<option v-for="(item , i) in data" :key="item" :value="i" :selected="value == i">{{ item }}</option>
</select>
</div>
<div v-if="isAlert" class="invalid-feedback">{{ title }}을 확인해주세요.</div>
</div>
</template>
@ -41,6 +42,11 @@ const props = defineProps({
default: '0',
require: false,
},
isAlert : {
type: Boolean,
default: false,
required: false,
}
});
const emit = defineEmits(['update:data']);

13
src/views/board/BoardWrite.vue
View File

@ -9,7 +9,7 @@
<div class="col-xl-12">
<div class="card-body">
<FormInput title="제목" name="title" :is-essential="true" @update:data="title = $event" />
<FormInput title="제목" name="title" :is-essential="true" :is-alert="titleAlert" @update:data="title = $event" />
<FormSelect title="카테고리" name="cate" :is-essential="true" :data="categoryList" @update:data="category = $event" />
@ -19,15 +19,17 @@
name="pw"
type="password"
:is-essential="true"
:is-alert="passwordAlert"
@update:data="password = $event"
/>
<FormFile title="첨부파일" name="files" @update:data="attachFiles = $event" />
<FormFile title="첨부파일" name="files" :is-alert="attachFilesAlert" @update:data="attachFiles = $event" />
<div class="mb-4">
<label for="html5-tel-input" class="col-md-2 col-form-label">
내용
<span class="text-red">*</span>
<div class="invalid-feedback" :class="contentAlert ? 'display-block' : ''">내용을 확인해주세요.</div>
</label>
<div class="col-md-12">
<!-- <TEditor @update:data="content = $event"/> -->
@ -62,6 +64,13 @@ const category = ref(0);
const content = ref('');
const attachFiles = ref(null);
//input 경고창 관리
const titleAlert = ref(true);
const passwordAlert = ref(false);
const contentAlert = ref(false);
const attachFilesAlert = ref(false);
const goList = () => {
// 목록으로 이동 나중엔 페이지 정보 ,검색 정보도 붙여야됨
router.push('/board');