需求:

全幅横栏,点击确认后隐藏

文案:我们想使用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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐