Vue2.6곳에서 장서를 사용하지 않고 모드 창을 만들어 보세요🎓
모드 창 및?
요소를 클릭하면 화면 중앙에 창이 표시되며 창 이외의 배경을 어둡게 표시함으로써 사용자가 표시하고자 하는 창의 내용을 강조하는 기술입니다.알림 외에 간단한 페이지 프로그램 등에서도 모드 창을 입력 형식으로 사용할 수 있다.웹의 세계에서 다양한 곳에서 이용되기 때문에 시뮬레이터 창이라는 단어를 모르는 사람도 이 기술을 접해본 적이 없는 사람은 없겠죠.영어에서는 모달이라는 단어를 사용하기 때문에 검색할 때 모달과 검색을 통해 정보를 찾을 수 있다.
이번 참고 사이트
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>modalをcomponentで作る</title>
</head>
<style>
#content{
z-index:10;
width:50%;
padding: 1em;
background:#fff;
}
#overlay{
/* 要素を重ねた時の順番 */
z-index:1;
/* 画面全体を覆う設定 */
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
/* 画面の中央に要素を表示させる設定 */
display: flex;
align-items: center;
justify-content: center;
}
</style>
<body>
<div id="app">
<button v-on:click="openModal">Click</button>
<open-modal v-show="showContent" v-on:from-child="closeModal">slotからモーダルウィンドウへ</open-modal>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('open-modal',{
template : `
<div id="overlay" v-on:click="clickEvent">
<div id="content" v-on:click="stopEvent">
<p><slot></slot></p>
<button v-on:click="clickEvent">close</button>
</div>
</div>
`,
methods :{
clickEvent: function(){
this.$emit('from-child')
},
stopEvent: function(){
event.stopPropagation()
}
}
})
new Vue({
el: '#app',
data: {
showContent: false
},
methods:{
openModal: function(){
this.showContent = true
},
closeModal: function(){
this.showContent = false
},
}
})
</script>
</body>
</html>
slot은 부모의 구성 요소 측면에서 하위 구성 요소의 템플릿을 삽입하는 기능입니다.
VueCli는 이렇게 썼어요.
<HelloWorld />
멋스러운 UI를 쉽게 만들고 싶어요.🤔
Vue.js는 일본어 정보가 많아서 배우기 쉬워요.UI 프레임워크의 Vuetify는 새로운 개발에서 자주 사용된다.
Bootstrap 5 안 쓴 것 같은데?자기 회사 개발만.😅
Vuetify 문서
최후
웹학과로 전직하기로 한 회사에서 UI를 만들려면 어떻게 하면 좋을까? CSS 디자인이 고민이다🤔
React의 소재 UIVue3는 tailwindscss.Vue2라면 아마 Vuetify겠죠?
SCSS는 현장에서도 많이 사용하는 것 같아요.
간편한 모바일 UI😅
CSS는 반드시 상세한 좌표를 지정해야 합니다. 매우 번거롭습니다...
웹 클래스보다 이동성 향상😵💫
Reference
이 문제에 관하여(Vue2.6곳에서 장서를 사용하지 않고 모드 창을 만들어 보세요🎓), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/joo_hashi/articles/f92813874da7b3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
