input 경고창 추가
This commit is contained in:
parent
71de3b89f0
commit
cea58be11a
133
index.html
133
index.html
@ -1,86 +1,83 @@
|
||||
<!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"
|
||||
>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<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">
|
||||
|
||||
<!-- favicon -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png" />
|
||||
<link rel="manifest" href="/img/favicon/site.webmanifest" />
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<meta content="" name="description" />
|
||||
<meta content="" name="keywords" />
|
||||
<title>LOCALNET</title>
|
||||
<!-- favicon -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png" />
|
||||
<link rel="manifest" href="/img/favicon/site.webmanifest" />
|
||||
|
||||
<meta content="" name="description" />
|
||||
<meta content="" name="keywords" />
|
||||
<title>LOCALNET</title>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com/" />
|
||||
<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&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
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&display=swap"
|
||||
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" />
|
||||
<link rel="stylesheet" href="/vendor/fonts/fontawesome.css" />
|
||||
<link rel="stylesheet" href="/vendor/fonts/flag-icons.css" />
|
||||
<!-- Icons -->
|
||||
<link rel="stylesheet" href="/vendor/fonts/boxicons.css" />
|
||||
<link rel="stylesheet" href="/vendor/fonts/fontawesome.css" />
|
||||
<link rel="stylesheet" href="/vendor/fonts/flag-icons.css" />
|
||||
|
||||
<!-- Core CSS -->
|
||||
<link rel="stylesheet" href="/vendor/css/rtl/core.css" class="template-customizer-core-css" />
|
||||
<link rel="stylesheet" href="/vendor/css/rtl/theme-default.css" class="template-customizer-theme-css" />
|
||||
<link rel="stylesheet" href="/css/demo.css" />
|
||||
<!-- Core CSS -->
|
||||
<link rel="stylesheet" href="/vendor/css/rtl/core.css" class="template-customizer-core-css" />
|
||||
<link rel="stylesheet" href="/vendor/css/rtl/theme-default.css" class="template-customizer-theme-css" />
|
||||
<link rel="stylesheet" href="/css/demo.css" />
|
||||
|
||||
<!-- Vendors CSS -->
|
||||
<link rel="stylesheet" href="/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
|
||||
<link rel="stylesheet" href="/vendor/libs/typeahead-js/typeahead.css" />
|
||||
<link rel="stylesheet" href="/vendor/libs/apex-charts/apex-charts.css" />
|
||||
<!-- Vendors CSS -->
|
||||
<link rel="stylesheet" href="/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
|
||||
<link rel="stylesheet" href="/vendor/libs/typeahead-js/typeahead.css" />
|
||||
<link rel="stylesheet" href="/vendor/libs/apex-charts/apex-charts.css" />
|
||||
|
||||
<!-- Helpers -->
|
||||
<script src="/vendor/js/helpers.js"></script>
|
||||
<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
|
||||
<!--? Template customizer: To hide customizer set displayCustomizer value false in config.js. -->
|
||||
<!-- <script src="/vendor/js/template-customizer.js"></script> -->
|
||||
<!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. -->
|
||||
<script src="/js/config.js"></script>
|
||||
<!-- Helpers -->
|
||||
<script src="/vendor/js/helpers.js"></script>
|
||||
<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
|
||||
<!--? Template customizer: To hide customizer set displayCustomizer value false in config.js. -->
|
||||
<!-- <script src="/vendor/js/template-customizer.js"></script> -->
|
||||
<!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. -->
|
||||
<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">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<!-- 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">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
||||
</head>
|
||||
|
||||
<!-- Core JS -->
|
||||
<!-- build:js assets/vendor/js/core.js -->
|
||||
<script src="/vendor/libs/jquery/jquery.js"></script>
|
||||
<script src="/vendor/libs/popper/popper.js"></script>
|
||||
<script src="/vendor/js/bootstrap.js"></script>
|
||||
<script src="/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
|
||||
<script src="/vendor/libs/hammer/hammer.js"></script>
|
||||
<script src="/vendor/libs/i18n/i18n.js"></script>
|
||||
<script src="/vendor/libs/typeahead-js/typeahead.js"></script>
|
||||
<!-- <script src="/vendor/js/menu.js"></script> -->
|
||||
<!-- endbuild -->
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
<!-- Vendors JS -->
|
||||
<script src="/vendor/libs/apex-charts/apexcharts.js"></script>
|
||||
<!-- Main JS -->
|
||||
<!-- <script src="/js/main.js"></script> -->
|
||||
<!-- Page JS -->
|
||||
<!-- <script src="/js/dashboards-analytics.js"></script> -->
|
||||
<!-- Core JS -->
|
||||
<!-- build:js assets/vendor/js/core.js -->
|
||||
<script src="/vendor/libs/jquery/jquery.js"></script>
|
||||
<script src="/vendor/libs/popper/popper.js"></script>
|
||||
<script src="/vendor/js/bootstrap.js"></script>
|
||||
<script src="/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
|
||||
<script src="/vendor/libs/hammer/hammer.js"></script>
|
||||
<script src="/vendor/libs/i18n/i18n.js"></script>
|
||||
<script src="/vendor/libs/typeahead-js/typeahead.js"></script>
|
||||
<!-- <script src="/vendor/js/menu.js"></script> -->
|
||||
<!-- endbuild -->
|
||||
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<!-- Vendors JS -->
|
||||
<script src="/vendor/libs/apex-charts/apexcharts.js"></script>
|
||||
<!-- Main JS -->
|
||||
<!-- <script src="/js/main.js"></script> -->
|
||||
<!-- Page JS -->
|
||||
<!-- <script src="/js/dashboards-analytics.js"></script> -->
|
||||
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
6
public/css/custom.css
Normal file
6
public/css/custom.css
Normal file
@ -0,0 +1,6 @@
|
||||
/* 여기에 css 작성 */
|
||||
|
||||
|
||||
.display-block {
|
||||
display: block !important;
|
||||
}
|
||||
5
src/common/msgEnum.ts
Normal file
5
src/common/msgEnum.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export const enum fileMsg {
|
||||
FileMaxSizeMsg = '파일 용량은 5MB를 넘을 수 없습니다.',
|
||||
FileMaxLengthMsg = '최대 5개까지 첨부 할 수 있습니다.',
|
||||
FileNotTypeMsg = '첨부 할 수 없는 파일유형이 있습니다.',
|
||||
}
|
||||
@ -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);
|
||||
|
||||
@ -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'])
|
||||
|
||||
@ -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']);
|
||||
|
||||
@ -9,9 +9,9 @@
|
||||
|
||||
<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" />
|
||||
<FormSelect title="카테고리" name="cate" :is-essential="true" :data="categoryList" @update:data="category = $event" />
|
||||
|
||||
<FormInput
|
||||
v-show="category == 1"
|
||||
@ -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');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user