코드 저장소, 생활 정보, 공유, 꿀팁

주간 날짜 구하기 html(template) ... <div class="week_txt_line"> <button class="btn_cal left" @click="currentWeek('prev')"> <img src="@/assets/images/icon_arrow_cal.svg" alt=""> </button> <p class="week_txt">{{ showeek }}</p> <button class="btn_cal right" @click="currentWeek('next')"> <img src="@/assets/images/icon_arrow_cal.svg" alt=""> </button> </div> ... javascript <script setup> import { ref, computed } from 'vue' import dayjs from 'dayjs' import isSameOrBefore from 'dayjs/plugin/isSameOrBefore' import isSameOrAfter from 'dayjs/plugin/isSameOrAfter' dayjs.extend(isSameOrBefore) dayjs.extend(isSameOrAfter) // const info = ref({ weeks: [],// 현재 '주'의 날짜들 moveweekno: 0,// ± 이동한 주 }) // 현재 '주'의 날짜구하기(일0 ~ 토6) const selectWeek = (date) =...

router 관련 세팅 /router/index.js or router.js import { createRouter, createWebHistory } from "vue-router" // const alwaysTitle = "브라우저 틀에 항상 보여지는 타이틀" const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), // 라우터 이동 시 이전 화면으로 돌아갈 때 이전 스크롤 위치로 이동할 경우 확인(savedPosition) scrollBehavior(to, from, savedPosition) { console.log('SavedPosition', savedPosition) if (savedPosition) { return savedPosition } return { top: 0, left: 0 } }, routes: [ // { path: "/", redirect: "/directurl" }, { path: "/404", name: "notFound", component: () => import("@/views/NotFound.vue"), meta: { title: "페이지를 찾을 수 없습니다" } }, { path: "/:pathMatch(.*)*", redirect: "/404" }, // 로그인 레이아웃 { path: "/login", name: "loginLayout", component: () =...

vuejs (3.0)에서 달력 플러그인(flatpickr)을 component로 사용 할 때 시작일, 종료일 지정하기 .vue <flat-pickr class="input_cal trans calStr" placeholder="시작일" readonly v-model="info.sdate" @on-change="stChange" :config="config('st')" /> <flat-pickr class="input_cal trans calEnd" placeholder="종료일" readonly v-model="info.edate" @on-change="edChange" :config="config('ed')" /> <flat-pickr class="input_cal trans calToay" placeholder="오늘" readonly v-model="info.today" :config="configtoday" /> javascript <script setup> import { ref, computed, nextTick } from "vue"; import flatPickr from "vue-flatpickr-component"; import "flatpickr/dist/flatpickr.min.css"; import dayjs from "dayjs"; const info = ref({ sdate:"",// 시작일 edate:"",// 종료일...

Radio component component .vue파일 <template> <div class="m_radio"> <input type="radio" :name="name" :id="idfor" :value="value" :checked="value === selected"> <label :for="idfor">{{ txt }}</label> </div> </template> <script setup> const props = defineProps({ name: { type: String, defatult: undefined }, idfor: { type: String, defatult: undefined }, value: { type: String, defatult: undefined }, txt: { type: String, default: '' }, selected: { type: String, defatult: undefined } }) </script> <style scoped src="./Radio.scss"></style> <!-- // 부모 컴포넌트에서 사용 시 # name : radio name # idfor : radio id = label for # value : radio value # selected : 현재 선택된 radio # txt : label <Radio name="name" idfor="idfor" value="value" ...

배열 두개 비교해서 배열값 추가, 삭제 script 부분 const inf = ref({ arr1: [1, 2, 3, 4, 5], arr2: [1, 2, 3, 4, 5], val: ["ㄱ", "ㄴ", "ㄷ", "ㄹ", "ㅁ"] }) // arr2에서 특정 값 제거. [1, 2, 4, 5] inf.value.arr2.splice(2, 1); // arr2에서 배열 값이 제거되어서 arr1이 더 많을 때 if(inf.value.arr1.length > inf.value.arr2.length) { // arr1과 비교해서 없는 값의 index를 찾고, 대응하는 val에서 값 제거하기 inf.value.arr1.some((ele, idx) => { // arr1에서 arr2에 없는 값 찾기 = false 인거 if(!inf.value.arr2.includes(ele)) { // arr2에 없는 arr1의 값의 index를 이용해 val의 값 제거하기 inf.value.val.splice(idx, 1); console.log(inf.value.val);// val에서 대응하는 값 제거됨. ["ㄱ", "ㄴ", "ㄹ", "ㅁ"] } }) } // const imf = ref({ ar1: [1, 2, 3, 9], ar2: [1, 2, 3, 9], va: ["ㄱ", "ㄴ", "ㄷ", "ㅈ"] }) // ar2에 특정 값 추가. [1, 2, 3, 7, 9] imf.value.ar2.splice(3, 0, 7); // ar2에 배열 값이 추가되어서 ar2가 더 많을 때 if(imf.value.ar2.length > imf.value....

Selectbox component component .vue파일 <template> <div class="m_selectbox_cm"> <button class="multi_del" v-if="info.multiple && info.multitxt.length > 1" @mouseenter="info.multidel = true" @mouseleave="info.multidel = false" @click="multiDel"> <img src="@/assets/images/icon_close.svg" alt=""> </button> <a role="button" tabindex="1" :id="id" class="select" @click="showList" @blur="optionHide" @mouseenter="info.blurbo = false" @mouseleave="info.blurbo = true"> {{ info.multiple ? info.selecmulti : info.selecone }} </a> <div class="optionwrap" v-if="info.showopt"> <div class="optionslist"> <button class="opt" :class...

Checkbox component component .vue파일 <template> <div class="m_checkbox" :class="{ nolabel: txt === '' }"> <input type="checkbox" :name="name" :id="idfor" :value="value" /><label :for="idfor">{{ txt }}</label> </div> </template> <script setup> const props = defineProps({ name: { type: String, defatult: undefined }, idfor: { type: String, defatult: undefined }, value: { type: String, defatult: undefined }, txt: { type: String, default: '' } }) </script> <!-- // 부모 컴포넌트에서 사용 시 # name : checkbox name # idfor : checkbox id = label for # value : checkbox value # txt : label <Checkbox name="name" idfor="idfor" value="value" txt="text" /> ex : <Checkbox name="agreeall" idfor="agreeall" v-model="agree.chec...

Input component component .vue파일 <template> <div class="input_wrap"> <p class="top_title" v-if="inputtxt">{{ txt }}</p> <input :id="id" :type="type" class="box_input" :class="{ on: inputtxt }" :placeholder="txt" :readonly="read" v-model="inputtxt" @input="upInfo(inputtxt = $event.target.value)"> </div> </template> <script setup> import { ref, watch } from "vue"; const props = defineProps({ id: undefined, type: { type: String, defatult: "text" }, txt: { type: String, defatult: undefined }, val: undefined, read: { type: Boolean, default: false }, }) watch(props, (e) => { if(e.val) { inputtxt.value = e.val } }) const inputtxt = ref(); inputtxt.value = props.val; const emit = defineEmits(["model"]); cons...

체크박스 전체 동의,일부만 동의할 때 표시방법 html 부분 <div class="agree_box"> <Checkbox name="agreeall" idfor="agreeall" v-model="agree.checkAll" @change="checkAll($event)" txt="전체 동의" /> <div class="mr"> <Checkbox name="agreecheck" idfor="agree1" value="agr1" v-model="agree.checkNo" @change="checkNo($event, 0)" txt="[필수] 만 14세 이상입니다." /> <Checkbox name="agreecheck" idfor="agree2" value="agr2" v-model="agree.checkNo" @change="checkNo($event, 1)" txt="[필수] 개인정보 수집 및 이용동의" /> <Checkbox name="agreecheck" idfor="agree3" value="agr3" v-model="agree.checkNo" @change="checkNo($event, 2)" txt="[필수] 제3자 정보제공 동의" /> <Checkbox name="agreecheck" idfor="agree4" value="agr4" v-mode...

레이아웃 설정 시, 로그인 구조, 기본 구조, 특수 구조 등 다르게 설정하기 App.vue <template> <RouterView /> </template> <script setup> import { RouterView } from 'vue-router' </script> LoginLayout.vue (로그인용 화면 구조) &lttemplate> &ltRouterView /> &lt/template> &ltscript setup> import { RouterView } from 'vue-router'; &lt/script> &ltstyle lang="scss"> @import "@/assets/scss/login.scss"; &lt/style> DefaultLayout.vue (기본 화면 구조) <template> <Header :menuno="info.menuNo" :subno="info.subNo" /> <RouterView /> </template> <script setup> import { RouterView } from 'vue-router'; import { infoStore } from "@/stores/info"; import Header from "@/components/Header.vue"; const info = infoStore().info;// info.menuNo : 메뉴 위치, info.subNo : 서브 메뉴 위치 </script> <style lang="scss"> @import "@/ass...

props, emit, computed, watch, onBeforeMount 등 사용법 vuejs (computed, watch, onBeforeMount) import { ref, computed, watch, onBeforeMount } from "vue"; import { useRoute } from "vue-router"; // image 경로는 이런식으로 const img_xbtn = new URL("@/assets/images/close.svg", import.meta.url).href; const route = useRoute() // ## computed 관련 const info = ref({ ... showNo: computed(() => { return (no) => { return no + ... } }) }) // 위와 같이 하거나 아래처럼 const info2 = computed(() => { return (member.value.map((member) => { return { no: member?.no ? member.no : "1", ... } }) }) // // ## computed 관련 onBeforeMount(() => { // onBeforeMount 관련 코드 }) watch(route, (value) => { // watch 관련 코드// value?.query?.no }) vuejs (props, emit - component 사용시) <template> <transition name="fade"> <div class="lpop_bg" v-if="showpop"> <div class=...

파일 올릴 때 드래그해서 올리기 html <!-- 파일을 drop하는 영역엔 dragover, dragenter 막아둬야 drop이 된다 --> <!-- <div class="file_box" @drop.prevent="onDrop($event)" @dragover.prevent @dragenter.prevent> --> <div class="file_box" @drop.prevent="onDrop($event)" @dragover.prevent @dragenter.prevent="onEnter($event)" @dragleave.prevent="onLeave($event)"> <p class="file_txt">이곳에 파일을 놓으세요.<br>or</p> <p class="file_btn"> <input type="file" @change="selectFile" accept="image/png"> <span class="fake_btn">파일 선택</span> </p> </div> scss .file_box { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 20rem; text-align: center; background-color: #ddd; border-radius: 2rem; input...

vue 화면에서 특정 input으로 포커스 이동하기 html <div class="m_radio fcolumn"> <input type="radio" name="withdinfo" id="withdinfo1" value="voc" v-model="member.withdchk"> <label for="withdinfo1">VOC</label> <div class="fcoldiv"> <input type="radio" name="withdinfo" id="withdinfo2" value="etc" v-model="member.withdchk" @change="memberwithdcmt.focus()"> <label for="withdinfo2">기타</label> <input type="text" id="withdinfo2" class="etc_ip" :class="{ipno: member.withdchk === 'voc'}" ref="memberwithdcmt" v-model="member.withdcmt"> </div> </div> <!-- 위는 DOM에 직접 설정해서 포커스 이동 ... or... 아래는 스크립트로 포커스 이동 --> <div class="m_radio fcolumn"> <div class="fcoldiv"> <...

vuejs 기본 구조 세팅하기, jquery 처럼 사용 html <div id="app" v-cloak> <h1>페이지 제목</h1> <header> header 내용 <!--<router-link to="/">Home</router-link> <router-link to="/test1">test1</router-link> <router-link to="/test2">test2</router-link> // 아래처럼 components로도 가능 --> <nav-menu mname1="메뉴" @hdclick="clicksample"></nav-menu> <nav> <h2>navigation</h2> </nav> </header> <main> <router-view></router-view> <br> <p>가 높이 : {{ calcHeight(200) }}<p> <p>나 높이 : {{ calcHeight(100) }}<p> ...... ... </main> <footer> footer 내용 </footer> </div> js <script src="js/vue3.min.js"></script> <script src="js/axios.min.js"></script> <script src...

js - 플러그인 사용, 숫자 카운팅, 숫자 올라가기 0,1,2 ~ 999, 1000, 1001 과 같이 특정 숫자까지 카운트 되면서 올라가는 효과, 간단히 CountUp이라는 플러그인으로 적용 가능하다. html <p id="count1">{{ countNo("count1", count1no, count1time) }}</p> <p id="count2">{{ countNo("count2", count2no, count2time) }}</p> js(vue 2.0) <script src="https://cdn.jsdelivr.net/npm/countup@1.8.2/dist/countUp.min.js"></script> ... ...... data: { // 카운트 되는 숫자 count1no: 192830, count2no: 3944, // 각 숫자가 카운트 되는 시간 count1time: 2, // 2초 count2time: 1, // 1초 }, computed: { countNo() { // Tag 영역, 표시되는 숫자, 진행 시간 return (id, maxno, maxtime) => { return this.countNoUp(id, maxno, maxtime) } } }, methods: { countNoUp(id, maxNo, maxTime) { let cno = new CountUp(id, 0, maxNo, 0, maxTime);// Tag영역, 시작 숫자(여기선 0), 마지막 숫자, 소수점 자리(0 = 없음), 진행 시간(초) if (!cno.error) { cno.start(); } else { console.error(cno.error); } } } ....