脚本宝典收集整理的这篇文章主要介绍了

cartcontrol.vue购物车操作按钮

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0">html代码</h2> <p>知识点:</p> <ul> <li> <p>使用了vue2的动画实现方式-transition,这里主要在css上设计来配合vue2</p> </li> <li> <p>cartcontrol这个模块主要通过三个小模块实现,删除按钮,显示数量块,增加按钮</p> </li> <li> <p>删除按钮和增加按钮都带有一个click方法,并且都有v-show来根据food的数量来控制显示,而显示数量块就只是单纯显示food的数量</p> </li> </ul> <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 class=&quot;cartcontrol&quot;> <!--外层动画--><br /> <transition name=&quot;move&quot;> <div class=&quot;cart-decrease&quot; v-show=&quot;food.count>0&quot; @click=&quot;decreaseCart&quot;><br /> <!--内层动画--><br /> <span class=&quot;inner icon-remove_circle_outline&quot;></span> </div> </transition> <div class=&quot;cart-count&quot; v-show=&quot;food.count>0&quot;>{{food.count}}</div> <div class=&quot;cart-add icon-add_circle&quot; @click=&quot;addCart&quot;></div> </p></div> <p></template>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><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">class</span>=<span class="hljs-string">"cartcontrol"</span>&gt;</span> <span class="hljs-comment">&lt;!--外层动画--&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">transition</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"move"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"cart-decrease"</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">"food.count&gt;0"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"decreaseCart"</span>&gt;</span> <span class="hljs-comment">&lt;!--内层动画--&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"inner icon-remove_circle_outline"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</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">transition</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"cart-count"</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">"food.count&gt;0"</span>&gt;</span>{{food.count}}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"cart-add icon-add_circle"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"addCart"</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></code></pre> <h2 id="articleHeader1">js代码</h2> <p>知识点:</p> <ul> <li> <p>引入vue模块,因为需要使用<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.set方法</p> </li> <li> <p>接收来自goods.vue的food数据,然后使用</p> </li> <li> <p>有2个方法,一个是addCart,一个是decreaseCart,分别对应html代码中的@click</p> </li> <li> <p>addCart方法,默认会传入event原生dom事件</p> <ul> <li> <p>鉴于bsscrol插件的原因,需要return掉非bscrol的事件</p> </li> <li> <p>需要注意的是这里的food并没有count属性,所需要手动设置,虽然之前goods会将有count属性的food做自动处理,但是最开始的时候,所有food都没有count属性,并且cartcontrol是最开始触发对food的count属性进行添加的(点击一次就会对count++,增加一个food)</p> </li> <li> <p>food数据是从父组件goods.vue传入的,所以对这个数据的修改,也能够反应到父组件,而这里使用<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.set直接对vue的data进行对象数据写入,对food数据添加了一个count的属性,用来控制每一个food的被选中的数量,也因为shopcart.vue的数据也是从父组件goods.vue传入的,使用同一个food数据,从而关联到[shopcart.vue购物车]()的food的购买数量统计</p> </li> </ul> </li> <li> <p>decreaseCart方法,同上</p> </li> </ul> <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="<script> import <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> from 'vue';</p> <p> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default{ props: { food: { type: Object } }, methods: { addCart(event){ if (!event._<a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a>ructed) { return false; } if (!<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.food.count) { Vue.set(<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.food, 'count', 1); //遇到没有这个属性的,会强行添加一个 } else { <a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>.food.count++; } this.$emit('add', event.target); }, decreaseCart(event){ if (!event._<a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a>ructed) { return false; } if (this.food.count) { this.food.count--; } } } }; </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">&lt;script&gt; <span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>; <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>{ <span class="hljs-attr">props</span>: { <span class="hljs-attr">food</span>: { <span class="hljs-attr">type</span>: <span class="hljs-built_in">Object</span> } }, <span class="hljs-attr">methods</span>: { addCart(event){ <span class="hljs-keyword">if</span> (!event._<a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a>ructed) { <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>; } <span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.food.count) { Vue.set(<span class="hljs-keyword">this</span>.food, <span class="hljs-string">'count'</span>, <span class="hljs-number">1</span>); <span class="hljs-comment">//遇到没有这个属性的,会强行添加一个</span> } <span class="hljs-keyword">else</span> { <span class="hljs-keyword">this</span>.food.count++; } <span class="hljs-keyword">this</span>.$emit(<span class="hljs-string">'add'</span>, event.target); }, decreaseCart(event){ <span class="hljs-keyword">if</span> (!event._constructed) { <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>; } <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.food.count) { <span class="hljs-keyword">this</span>.food.count--; } } } }; <span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span></code></pre> <h2 id="articleHeader2">css代码</h2> <p>知识点:</p> <ul> <li> <p>vue2的动画</p> <ul> <li> <p>Vue 提供了 transition 的封装组件,就是之前的&lt;transition&gt;</p> </li> <li> <p>这个动画是一个滚动淡入和淡出的效果</p> </li> <li> <p>首先,定义了这个动画效果的名字为move(<code>&lt;transition name="move"&gt;</code>),并且将需要这个效果的内容用一个dom的<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a>包裹起来,这个效果分2层,外层和内层inner(外层和内层用class来区分,通过增加一个内层class inner来区分)</p> </li> <li> <p>然后,设置原始的动画状态(外层和内层)</p> <ul> <li> <p>外层设置了透明度为1和transform变形的3d位置</p> </li> <li> <p>内层设置了滚动角度和淡入淡出效果</p> </li> </ul> </li> <li> <p>然后,设置vue的动画过渡属性</p> <ul> <li> <p>move-enter-active和move-leave-active</p> <ul> <li> <p>这里设置匀速过渡效果是为了在动画进入过渡的结束状态和动画离开过渡的结束状态都是匀速过渡的变化效果,至于变化成什么效果需要看move-enter和move-leave-active</p> </li> </ul> </li> <li> <p>move-enter和move-leave-active</p> <ul> <li> <p>这里设置外层的透明度为0(内层会继承)和变形的3d位置</p> </li> <li> <p>这里设置了内层滚动角度</p> </li> <li> <p>这么做实现了动画在进入过渡后和离开过渡后都会内外层,并且会出现内层一边滚动到指定位置然后消失的效果</p> </li> </ul> </li> </ul> </li> </ul> </li> <li> <p>font-size的使用</p> <ul> <li> <p>因为使用行内元素,所以需要通过设置font-size为0来取消间隙</p> </li> </ul> </li> <li> <p>对于一些设计上的图标过小(操作区域太小)影响用户操作体验的情况,需要增加一个padding来实现增大操作区域的目的</p> </li> </ul> <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=" <style lang=&quot;stylus&quot; rel=&quot;stylesheet/stylus&quot;> .cartcontrol font-size: 0 .cart-decrease //外层动画原始状态 display: inline-block padding: 6px opacity: 1 transform: translate3d(0, 0, 0) .inner //内层动画原始状态 display: inline-block line-height: 24px font-size: 24px color: rgb(0, 160, 220) transition: all 0.4s linear transform: rotate(0) &amp;.move-enter-active, &amp;.move-leave-active //vue动画过渡属性 transition: all 0.4s linear &amp;.move-enter, &amp;.move-leave-active //vue动画过渡属性 opacity: 0 transform: translate3d(24px, 0, 0) .inner transform: rotate(180deg) .cart-count display: inline-block vertical-align: top width: 12px padding-top: 6px line-height: 24px text-align: center font-size: 10px color: rgb(147, 153, 159) .cart-add display: inline-block padding: 6px line-height: 24px font-size: 24px color: rgb(0, 160, 220) </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">&lt;style lang=<span class="hljs-string">"stylus"</span> rel=<span class="hljs-string">"stylesheet/stylus"</span>&gt; .cartcontrol font-size: <span class="hljs-number">0</span> .cart-decrease <span class="hljs-comment">//外层动画原始状态</span> display: inline-block padding: <span class="hljs-number">6</span>px opacity: <span class="hljs-number">1</span> transform: translate3d(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>) .inner <span class="hljs-comment">//内层动画原始状态</span> display: inline-block line-height: <span class="hljs-number">24</span>px font-size: <span class="hljs-number">24</span>px color: rgb(<span class="hljs-number">0</span>, <span class="hljs-number">160</span>, <span class="hljs-number">220</span>) transition: all <span class="hljs-number">0.4</span>s linear transform: rotate(<span class="hljs-number">0</span>) &amp;.move-enter-active, &amp;.move-leave-active <span class="hljs-comment">//vue动画过渡属性 </span> transition: all <span class="hljs-number">0.4</span>s linear &amp;.move-enter, &amp;.move-leave-active <span class="hljs-comment">//vue动画过渡属性</span> opacity: <span class="hljs-number">0</span> transform: translate3d(<span class="hljs-number">24</span>px, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>) .inner transform: rotate(<span class="hljs-number">180</span>deg) .cart-count display: inline-block vertical-align: top width: <span class="hljs-number">12</span>px padding-top: <span class="hljs-number">6</span>px line-height: <span class="hljs-number">24</span>px text-align: center font-size: <span class="hljs-number">10</span>px color: rgb(<span class="hljs-number">147</span>, <span class="hljs-number">153</span>, <span class="hljs-number">159</span>) .cart-add display: inline-block padding: <span class="hljs-number">6</span>px line-height: <span class="hljs-number">24</span>px font-size: <span class="hljs-number">24</span>px color: rgb(<span class="hljs-number">0</span>, <span class="hljs-number">160</span>, <span class="hljs-number">220</span>) &lt;<span class="hljs-regexp">/style&gt;</span></code></pre> <p></code></p>

总结

以上是脚本宝典为你收集整理的

cartcontrol.vue购物车操作按钮

全部内容,希望文章能够帮你解决

cartcontrol.vue购物车操作按钮

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过