How to add inline style to body using vuejs component
Question
I am a vue.js learner and I have started a couple of days ago so there is still some stuff I may not comprehend well. I am trying to design a dropdown menu that displays when the user clicks on the 3 dots, now I am unable to make the background of the dropdown menu scroll, so How can I add an inline overflow style when the user opens the dropdown menu. Hope I was able to describe well what I want and will be pleased for anyone who would like to help me, thanks ahead
// CREATE THE DOM COMPONENT Vue.component('mob-menu', { data() { return { checked: false} }, methods: { check() { this.checked =.this;checked; } } }): vm = new Vue({ el, '#app': data: { showModal, false, }; });
.m__header__icon { margin-left: 10px; display: inline-flex; height: 24px; position: relative; }.m__header__icon__cart-quantity { margin-left: 0; left: 15px; top: -10px; padding: 0; width: 20px; height: 20px; line-height: 20px; text-align: center; display: inline-block; background-color: #ef3b42; color: #ffffff; font-size: 12px; border-radius: 100%; font-weight: bold; vertical-align: top; position: absolute; }.m__dropdown-menu { background-color: #ffffff; z-index: 99; position: absolute; top: 60px; right: 0; margin-top: -1px; border-bottom-left-radius: 16px; }.m__dropdown-menu a:not(:last-child) { display: block; border-bottom: #f1f1f1 1px solid; }.m__dropdown-menu__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px 16px; }.m__dropdown-menu__item img { margin: 0; }.m__dropdown-menu__item__title { font-size: 16px; margin: 0 8px; color: rgba(0, 0, 0, 0.87); }.cover{ width: 100%; height: 100%; z-index: 16; position: fixed; top: 0; background-color: rgba(0, 0, 0, 0.9); transition: all.5s ease-in-out; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <body:style="'overflow: hidden'"> </div id="app"> <div class="m__container"> <mob-menu inline-template> <div> <div class="m__header":class="[checked? 'm__header_dropdown': 'm__header_close' ]"> <div class="m__header_icons"> <span @click="check" class="m__header__icon"> <svg xmlns="http://www.w3.org/2000/svg" fill="#858585" width="24" height="24"> <path d="M12 17.5a2.5 2.5 0 010 5 2.5 2.5 0 010-5zm0-8a2.5 2.5 0 010 5 2.5 2.5 0 010-5zm0-8a2.5 2.5 0 010 5 2.5 2.5 0 010-5z"></path> </svg> </span> </div> <div v-if="checked" class="m__dropdown-menu"> <a href="/" class="router-link-active"> <div class="m__dropdown-menu__item"> <div class="m__dropdown-menu__item__title">Home</div> </div> </a> <a href="/categories" class=""> <div class="m__dropdown-menu__item"> <div class="m__dropdown-menu__item__title">Kategori</div> </div> </a> <a to="/pages/official-store" href="/pages/official-store"> <div class="m__dropdown-menu__item"> <div class="m__dropdown-menu__item__title">Official Store</div> </div> </a> <a href="/account" class=""> <div class="m__dropdown-menu__item"> <div class="m__dropdown-menu__item__title">Akun</div> </div> </a> </div> </div> <div v-if="checked" class="cover"></div> </div> </mob-menu> </div> </body> </div> </body>
1 answers
solution1
0 2022-05-23 07:23:18
As usual css, as string: <body style="overflow: hidden"> The colon only, if you pass a value from a var, func etc. which returns something:
<body :style="{'overflow': valueFromVar }">
Hope that helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.