如何在使用 VueJS(在移动设备上)单击 X 时关闭横幅
Posted
技术标签:
【中文标题】如何在使用 VueJS(在移动设备上)单击 X 时关闭横幅【英文标题】:How to close a banner on clicking X with VueJS (on mobile) 【发布时间】:2021-07-24 21:08:13 【问题描述】:我是 VueJS 的新手。我在这里有一个组件,用于显示在我的页面的移动版本上的横幅。我想在单击 X 图标时关闭它。我怎么能做到这一点?我需要一个按钮吗?
<template>
<div class="mobile-banner">
<div class="container card">
<div class="row">
<div class="column one">
<drag-icon></drag-icon>
</div>
<div class="column two">
<ul>
<li>
Insctructions
</li>
</ul>
</div>
<div class="column three">
<div class="x-icon" />
</div>
</div>
</div>
</div>
</template>
这里还有一些风格:
<style lang="scss" scoped>
.mobile-banner
width: 100%;
position: fixed;
z-index: $mobile-instructions-banner;
background-color: $greyF;
color: $grey0;
.container
display: flex;
justify-content: center;
.x-icon:before
content: "\2715";
</style>
【问题讨论】:
【参考方案1】:您可以通过data、v-if 和v-on:click 实现此目的
1.数据
在 data 选项中创建一个布尔变量并将其值设置为 true。
<script>
export default
name: 'MobileBanner',
data ()
return
isBanner: true
</script>
2。 v-如果
添加 v-if 指令以有条件地呈现横幅:
<div v-if="isBanner" class="mobile-banner">
由于我们在步骤 1 中将 'isBanner' 值设置为 true,因此横幅现在将在组件加载时呈现。
3. v-on:点击
我们现在可以使用 onclick 事件处理程序 v-on:click(或简称为 @click) 将 'isBanner' 值设置为 false,这将销毁/删除横幅:
<div class="x-icon" @click="isBanner = false" />
【讨论】:
【参考方案2】:<div class="mobile-banner" :class=active: bannerStatus>
<div class="container card">
<div class="row">
<div class="column one">
<drag-icon></drag-icon>
</div>
<div class="column two">
<ul>
<li>
Insctructions
</li>
</ul>
</div>
<div class="column three">
<div class="x-icon" @click="bannerStatus = false" />
</div>
</div>
</div>
</div>
<script>
export default
data:() => (
bannerStatus: true;
)
</script>
<style lang="scss" scoped>
.mobile-banner
display:none;
width: 100%;
position: fixed;
z-index: $mobile-instructions-banner;
background-color: $greyF;
color: $grey0;
&.active
display: block;
.container
display: flex;
justify-content: center;
.x-icon:before
content: "\2715";
</style>
bannerStatus 决定横幅的显示/隐藏状态,当你想再次显示时将其更改为 true
【讨论】:
以上是关于如何在使用 VueJS(在移动设备上)单击 X 时关闭横幅的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 JavaScript 单击 Safari 移动设备上的按钮?