相思资源网 Design By www.200059.com
本文实例为大家分享了vue购物车插件的具体代码,供大家参考,具体内容如下
先上效果图
下面相关代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" href="../../css/mui.min.css"> <link rel="stylesheet" href="../../css/app.css"> <style> .mui-content>.mui-table-view:first-child{ margin-top: 0.133333rem; } .mui-bar-nav~.mui-content{ padding-top: 1.173333rem; } .mui-content{ padding-bottom: 1.173333rem; } input[type=checkbox] { width: 0.426666rem; height: 0.426666rem; border: 0; outline: 0!important; background-color: transparent; -webkit-appearance: none; } input[type=checkbox]:before { content: '\e411'; } input[type=checkbox]:checked:before { content: '\e441'; } input[type=checkbox]:before { font-family: Muiicons; font-size: 0.426666rem; font-weight: 400; line-height: 1; text-decoration: none; color: #81d8d0; border-radius: 0; background: 0 0; -webkit-font-smoothing: antialiased; } input[type=checkbox]:checked:before { color: #81d8d0; } .allinput[type=checkbox] { width: 0.426666rem; height: 0.426666rem; border: 0; outline: 0!important; background-color: transparent; -webkit-appearance: none; } .allinput[type=checkbox]:before { content: '\e411'; } .allinput[type=checkbox]:checked:before { content: '\e441'; } .allinput[type=checkbox]:before { font-family: Muiicons; font-size: 0.426666rem; font-weight: 400; line-height: 1; text-decoration: none; color: #fff; border-radius: 0; background: 0 0; -webkit-font-smoothing: antialiased; } .allinput[type=checkbox]:checked:before { color: #fff; } .popover_detail_numbtn .mui-numbox{ float: right; border-radius: 0; padding: 0 0.56rem; height: 0.586666rem; width:2rem; } .mui-numbox [class*=btn-numbox], .mui-numbox [class*=numbox-btn] { font-size: 0.4rem; line-height: 0.56rem; width: 0.56rem; height: 0.56rem; color: #707070; background-color: #fff; } .shop_input_num[type=number]{ font-size: 0.266666rem; line-height: 0.56rem; top: 0; } </style> </head> <body id="app" v-cloak> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-pull-left mui_return_back"></a> <h1 class="mui-title">购物车</h1> </header> <div class="mui-content"> <div class="mui_shopcar_list_box" v-for="data in items"> <div class="mui_order_item_title"> <div class="mui_adress_radio"> <input type="checkbox" v-model="data.shopselected" v-on:click="checkShop($index)"> </div> <a href="javascript:;" class="look_shop" v-on:click="LookShop(data.id)"> {{data.shopname}} <img class="order_link" src="/UploadFiles/2021-04-02/order_link.png">vue.js组件学习教程、Vue.js前端组件学习教程进行学习。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无vue购物车插件编写代码的评论...