Vue.js implements the ability to open and close menus when clicked. In this article, it is implemented in rails6, so if you are stumbling on the introduction, please refer to the "Vue.js introduction" below.
[Vue.js] Implementation of menu function Vue.js introduction rails6 https://qiita.com/AKI3/items/e87203c590322c908946
1.Vue.js 2.html 3.scss
Vue 2.6.12 rails 6.0.0 ruby 2.6.5
Let's implement it ~
app/javascript/packs/menu_vue.js
const app = new Vue({
el: '#app',
data: {
ActiveBtn: false
},
})
Implementing Veu.js itself is easy.
html:app/views/tops/new.html.erb
<div class="top-editor-wrap">
<div id="app">
<!--Menu button-->
<div class="top-editor_btn" v-on:click='ActiveBtn=!ActiveBtn'>← Here is veu.js
<h1>button</h1>
</div>
<!--Side bar-->
<transition name="editor-side">
<div class="editor-side" v-show="ActiveBtn">← Here is veu.js
<div class="editor">
<h3>menu</h3>
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
</div>
</div>
</transition>
</div>
</div>
The description that v-on: click ='ActiveBtn =! ActiveBtn' reverses (inverts) the boolean value of ActiveBtn when the button is clicked.
app/assets/stylesheets/editor.scss
.top-editor_btn {
position: fixed;
top: 30px;
left: 40px;
cursor: pointer;
z-index: 50;
}
.top-editor_btn img {
width: 65px;
}
.editor-side {
position: fixed;
background-color: hsla(0, 0%, 57%, 0.829);
z-index: 30;
width: 325px;
height: 100vh;
top: 0;
}
That's it! !!
The point of this function was ActiveBtn.
Of course it is possible to create the same function only with JS, but the advantage of using Veu.js was that the amount of code was overwhelmingly reduced.
I'm just starting to study, so I'd like to learn more ~
I am a beginner in programming, but I am posting an article in the hope that it will help people who are similarly troubled.
See you next time ~
【official】 https://jp.vuejs.org/v2/guide/
[Vue.js] Implementation of menu function Vue.js introduction https://qiita.com/AKI3/items/e87203c590322c908946
I was very helpful. Thank you very much. https://qiita.com/helloworld193/items/9aed3870be1e739c3ad2
Mr. Taniguchi of Tomosuta https://www.youtube.com/playlist?list=PLh6V6_7fbbo-SZYHHBVFstU2tp0dDZMAW
Recommended Posts