<p><code></p> <p><strong> 核心代码是 <code>getCookie()</code>部分,控制弹框的显示隐藏则在 <code>created()</code>中。 </strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div v-if=&quot;isShow&quot;> <!--最外层背景--></p> <div class=&quot;popup_container&quot;> <!--居中的容器--><br /> <img @click=&quot;noPopup&quot; src=&quot;delete.png&quot; alt=&quot;&quot;> <!--关闭弹框--></p> <div class=&quot;popup_text&quot;> <!--内容部分--><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, atque ea eveniet laudantium magni, maiores nam nihil non numquam odio pariatur perferendis placeat quas quasi sit soluta, sunt ullam voluptatibus. </div> </p></div> </p></div> <p></template><br /> <script> export default { data(){ return{ isShow: true, } }, created(){ if (this.getCookie('popped') == ''){ //cookie 中没有 popped 则赋给他一个值(此时弹框显示) document.cookie = &quot;popped = yes&quot;; }else{ this.isShow = false; //若cookie 中已经有 popped 值,则弹框再不会显示 } }, methods: { noPopup(){ this.isShow = false; }, getCookie(Name) { //cookie var search = Name + &quot;=&quot;; var returnValue = &quot;&quot;; if (document.cookie.length > 0) { var offset = document.cookie.indexOf(search); if (offset !== -1) { offset += search.length; var end = document.cookie.indexOf(&quot;;&quot;, offset); if (end == -1){ end = document.cookie.length; } returnValue = decodeURIComponent(document.cookie.substring(offset, end)); } } return returnValue; }, }, } </script></p> <style scoped> /*样式部分*/ </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"isShow"</span>&gt;</span> <span class="hljs-comment">&lt;!--最外层背景--&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"popup_container"</span>&gt;</span> <span class="hljs-comment">&lt;!--居中的容器--&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">img</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"noPopup"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"de<a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a>e.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">""</span>&gt;</span> <span class="hljs-comment">&lt;!--关闭弹框--&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"popup_text"</span>&gt;</span> <span class="hljs-comment">&lt;!--内容部分--&gt;</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, atque ea eveniet laudantium magni, maiores nam nihil non numquam odio pariatur perferendis placeat quas quasi sit soluta, sunt ullam voluptatibus. <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { data(){ <span class="hljs-keyword">return</span>{ <span class="hljs-attr">isShow</span>: <span class="hljs-literal">true</span>, } }, created(){ <span class="hljs-keyword">if</span> (<span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.getCookie(<span class="hljs-string">'popped'</span>) == <span class="hljs-string">''</span>){ <span class="hljs-comment">//cookie 中没有 popped 则赋给他一个值(此时弹框显示)</span> <span class="hljs-built_in">document</span>.cookie = <span class="hljs-string">"popped = yes"</span>; }<span class="hljs-keyword">else</span>{ <span class="hljs-keyword">this</span>.isShow = <span class="hljs-literal">false</span>; <span class="hljs-comment">//若cookie 中已经有 popped 值,则弹框再不会显示</span> } }, <span class="hljs-attr">methods</span>: { noPopup(){ <span class="hljs-keyword">this</span>.isShow = <span class="hljs-literal">false</span>; }, getCookie(Name) { <span class="hljs-comment">//cookie</span> <span class="hljs-keyword">var</span> search = Name + <span class="hljs-string">"="</span>; <span class="hljs-keyword">var</span> returnValue = <span class="hljs-string">""</span>; <span class="hljs-keyword">if</span> (<span class="hljs-built_in">document</span>.cookie.length &gt; <span class="hljs-number">0</span>) { <span class="hljs-keyword">var</span> offset = <span class="hljs-built_in">document</span>.cookie.indexOf(search); <span class="hljs-keyword">if</span> (offset !== <span class="hljs-number">-1</span>) { offset += search.length; <span class="hljs-keyword">var</span> end = <span class="hljs-built_in">document</span>.cookie.indexOf(<span class="hljs-string">";"</span>, offset); <span class="hljs-keyword">if</span> (end == <span class="hljs-number">-1</span>){ end = <span class="hljs-built_in">document</span>.cookie.length; } returnValue = <span class="hljs-built_in">decodeURIComponent</span>(<span class="hljs-built_in">document</span>.cookie.substring(offset, end)); } } <span class="hljs-keyword">return</span> returnValue; }, }, } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="css"> <span class="hljs-comment">/*样式部分*/</span> </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></pre> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_26991.html