VUE框架中同意使用cookie弹框,第一次进入网站展示,点击同意后不再显示
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
需求:
全幅横栏,点击确认后隐藏
文案:我们想使用cookie以便更好了解您对本网站的使用情况。这将有助于改善您今后访问本网站的体验。关于cookie的使用,以及如何撤回或管理您的同意,请详见我们的隐私政策。如您点击右侧确认按钮,将视为您同意cookie的使用。
---------------------------------------------------------------------------------------------------------------------------------
html部分和css部分
<!-- cookie声明 -->
<div class="cookieDiv" v-if="cookieDivOr">
<span>我们想使用cookie以便更好了解您对本网站的使用情况。这将有助于改善您今后访问本网站的体验。关于cookie的使用,以及如何撤回或管理您的同意,请详见我们的<a href="##">隐私政策</a>。如您点击右侧确认按钮,将视为您同意cookie的使用。</span>
<div class="aDiv">
<a href="##" style="margin-left:2.16em;" @click="closeDiv">确定</a>
</div>
</div>
.cookieDiv {
width: 100%;
background: #000;
height: 60px;
position: fixed;
bottom:0px;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
margin:0 auto;
}
.cookieDiv span {
color: #f0f3fb;
font-size: 16px;
margin-left:20px;
}
.cookieDiv a {
color: red;
}
.cookieDiv .aDiv a {
height: 60px;
width:100px;
background: red;
color: white;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
用的是vue框架,下面是方法methods中的内容:
// cookie
getCookie: function (cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
console.log(c , 'c')
while (c.charAt(0) == ' ') c = c.substring(1);
if (c.indexOf(name) != -1){
return c.substring(name.length, c.length);
}
}
return "";
},
setCookie: function (cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
console.info(cname + "=" + cvalue + "; " + expires);
document.cookie = cname + "=" + cvalue + "; " + expires;
console.log(document.cookie);
},
clearCookie: function () {
this.setCookie("传给cookie的值 可以自定义", "", -1000);//设置天数
},
checkCookie: function () {
var user = this.getCookie("传给cookie的值 可以自定义");
if (user != "") {
this.cookieDivOr=false
// console.log(1111)
} else {
// console.log(2222)
this.cookieDivOr=true
}
},
closeDiv(){
// console.log('123123');
this.setCookie('传给cookie的值 可以自定义','1',1000)//设置天数
this.cookieDivOr = false
},
在return内部要写上:
export default {
data() {
return {
//隐私证明显示
cookieDivOr: true,
}
}
}
和方法methods平级再建立一个created:
created(){
this.checkCookie()
}
最终可以实现:
第一次进入网站时,显示该弹框,在点击‘同意’后再次进入不再显示该弹框,但在清除cookie后刷新页面依然可以显示该弹框。
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)