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

스크롤바가 아닌 progress bar 스타일로 현재 컨텐츠의 위치 표시하기 Progress bar로 컨텐츠의 위치 표시 <template> <div class="progress_line"> <input type="range" min="0" step="0.1" max="100" :value="info.val"> </div> </template> <script setup> import { ref } from "vue" // const info = ref({ val: 0,// }) // @input="checkValue" @mousedown="mDown" @mouseup="mUp" // progress bar 에서 클릭드래그 시 컨텐츠 영역이 현재 progress 위치에 맞게 같이 이동되게 할 때 추가 // const mDown = () => { // document.documentElement.classList.add("scrollbehavior_no"); // } // const mUp = () => { // document.documentElement.classList.remove("scrollbehavior_no"); // } // const checkValue = (e) => { // info.value.val = e.target.value; // let scrolheight = document.documentElement.scrollHeight; // let scrolly = Math.floor((scrolheight - window.innerHeight) * info.value.val / 100) // win...

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" ...

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...