Hbulider得前端基础_mui框架总结4_卡片视图&&消息框&&复选框

关注

原创最新推荐文章于 2026-07-07 16:40:09 发布 766 阅读 AI 写同款· GEO 优化 ›

mui-card使用方法 <script> import { mapState, mapGetters } from 'vuex' export default { computed: { ...mapState('shopcart', ['buy']), ...mapGetters('shopcart', ['getBuyCount']), }, created() { if (this.$route.params.id) { this.addressId = this. 阅读详情

顺便说一下,这段时间主要是把MUI框架的控件关键代码拿出来看一下,并把每个控件主要用到的地方说一下,

并把js也拿出来看一下,控件了解清楚了,然后写个webservice,就能进行数据交互了,后面的话会做一个项目

1.卡片视图主要用于图文详解一些详情

    <div class="mui-content">
           <div class="mui-card">
               <div class="mui-card-content">
                   <div class="mui-card-content-inner">
                       这是一个最简单的卡片视图控件;卡片视图通常用来显示完整独立的一段信息,比如一篇文章的预览图,作者信息,点赞数量等
                   </div>
               </div>
           </div>
           <div class="mui-card">
               <div class="mui-card-header">页眉</div>
               <div class="mui-card-content">
                   <div class="mui-card-content-inner">
                       包含页眉页脚的卡片,页眉通常用来显示面板标题,页脚通常用来显示额外的信息或者支持的操作(比如点赞,评论)
                   </div>
               </div>
               <div class="mui-card-footer">页脚</div>
           </div>

           <div class="mui-card">
               <div class="mui-card-header mui-card-media" style="height: 40vw;background-image:url(images/timg4.jpg);"></div>
               <div class="mui-card-content">
                   <div class="mui-card-content-inner">
                       <p>Posted on January 18.2016</p>
                       <p style="color: #333;">这里显示文章的摘要,让读者对文章有个初略的概念</p>
                   </div>
               </div>
               <div class="mui-card-footer">
                   <a class="mui-card-link">Like</a>
                   <a class="mui-card-link">Read More</a>
               </div>
           </div>
       </div>

2.消息框(主要是用于显示各种提示信息)

控件代码:

<div class="mui-content">
           <div class="mui-content-padded" style="margin: :5px;text-align: center;">
               <button id="alertBtn" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">警告消息框</button>
               <button id="confirmBtn" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">确认消息框</button>
               <button id="prompBtn" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">输入对话框</button>
               <button id='toastbtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">自动关闭对话框</button>
               <div id="info">
               </div>
           </div>
       </div>

js部分:

//mui初始化
       mui.init({
           swipeBack: true //启用右滑关闭功能
       });
       var info = document.getElementById("info");
       try
       {
           document.getElementById("alertBtn").addEventListener('tap', function() {
               mui.alert('欢迎使用Hello MUI', 'Hello MUI', function() {
                   info.innerText = '你刚关闭了警告框';
               });
           });


           document.getElementById("confirmBtn").addEventListener('tap',function(){
               var btnArray=['是','否'];
               mui.confirm('MUI是个框架,确认?','Hello MUI',btnArray,function(e){
                   if(e.index==0){
                       info.innerHTML='你刚确认MUI是个好框架';
                   }else{
                       info.innerHTML='MUI没有得到你的认可,继续加油';
                   }
               });
           });


           document.getElementById("prompBtn").addEventListener('tap',function(e){
               e.detail.gesture.preventDefault();//修复IOS 8.x平台存在的bug,使用plus.nativeUI.prompt会造成输入法闪一下又没了
               var btnArray=['确定','取消'];
               mui.prompt('请输入你对MUI的评语:','性能好','Hello MUI',btnArray,function(e){
               if(e.index==0)
               {
                   info.innerHTML='谢谢你的评语:'+e.value;
               }
               else
               {
                   info.innerHTML='你点了取消按钮';
               }
               })
           });


           document.getElementById("toastbtn").addEventListener('tap',function(){
               mui.toast('欢迎体验Hello MUI');
           })

       }
       catch(err)
       {
           alert(err);
       }

3.复选框(CheckBox):用于复选多种状况的开发情形中

控件代码:

<div class="mui-content">
           <h5 class="mui-content-padded">图标左对齐</h5>
           <div class="mui-card">
               <form class="mui-input-group">
                   <div class="mui-input-row mui-checkbox mui-left">
                       <label>Checked:false</label>
                       <input name="checkbox" value="Item 1" type="checkbox"/>
                   </div>
                   <div class="mui-input-row mui-checkbox mui-left">
                       <label>checked:true</label>
                       <input name="checkbox" value="Item 2" type="checkbox" checked>
                   </div>
                   <div class="mui-input-row mui-checkbox mui-left mui-disabled">
                       <label>disabled checkbox</label>
                       <input name="checkbox" type="checkbox" disabled="disabled">
                   </div>
               </form>
           </div>
           <h5 class="mui-content-padded">图标右对齐</h5>
           <div class="mui-card">
               <form class="mui-input-group">
                   <div class="mui-input-row mui-checkbox">
                       <label>checked:false</label>
                       <input name="checkbox1" value="Item 3" type="checkbox"/>
                   </div>
                   <div class="mui-input-row mui-checkbox">
                       <label>checked:true</label>
                       <input name="checkbox1" value="Item 3" type="checkbox" checked/>
                   </div>
                   <div class="mui-input-row mui-checkbox mui-disabled">
                       <label>disabled checkbox</label>
                       <input name="checkbox1" type="checkbox" disabled="disabled"/>
                   </div>
               </form>
           </div>
       </div>

js部分:

mui('.mui-input-group').on('change','input',function(){
       var value=this.checked?"true":"false";
       this.previousElementSibling.innerText="checked:"+value;
   })

收录于