{"id":112407,"date":"2022-11-09T15:21:24","date_gmt":"2022-11-09T07:21:24","guid":{"rendered":"http:\/\/www.zhushiyao.com\/?p=112407"},"modified":"2022-11-09T15:21:58","modified_gmt":"2022-11-09T07:21:58","slug":"66adfb53e6","status":"publish","type":"post","link":"http:\/\/www.zhushiyao.com\/?p=112407","title":{"rendered":"MUI\u65b0\u624b\u4f7f\u7528\u6559\u7a0b\u8be6\u7ec6"},"content":{"rendered":"
\n

\u524d\u8a00<\/b><\/h2>\n

\u6bcf\u4e2a\u4eba\u90fd\u5728\u4e0d\u65ad\u7684\u5b66\u4e60\uff0c\u4e0d\u65ad\u7684\u8fdb\u6b65\uff0c\u5e0c\u671b\u8fd9\u7bc7\u6587\u7ae0\u80fd\u8bb0\u5f55\u6211\u5728\u516c\u53f8\u5b66\u4e60\u4f7f\u7528MUI\u7684\u8fc7\u7a0b\u548c\u5751\u3002<\/p>\n

mui\u7684\u5b98\u65b9\u6587\u6863 https:\/\/<\/span>dev.dcloud.net.cn\/mui\/u<\/span>til\/<\/span><\/p>\n

\u76ee\u5f55<\/b><\/h2>\n
    \n
  1. \u57fa\u672c\u5de5\u5177<\/li>\n
  2. \u5f00\u53d1\u6d41\u7a0b<\/li>\n
  3. \u600e\u4e48\u5feb\u901f\u505a\u4e00\u4e2a\u7b80\u6d01\u7684\u5217\u8868<\/li>\n
  4. input\u8f93\u5165\u8868\u5355<\/li>\n
  5. \u6d88\u606f\u6846<\/li>\n
  6. \u65e5\u671f\u9009\u62e9\u5668<\/li>\n
  7. \u5173\u95ed\u8be6\u60c5\u9875\u9762\uff0c\u8fd4\u56de\u65f6\uff0c\u5e0c\u671b\u5237\u65b0\u5217\u8868\u754c\u9762<\/li>\n
  8. \u4e8b\u4ef6\u7ed1\u5b9a<\/li>\n
  9. mui\u5faa\u73af \u5408\u5e76\u5bf9\u8c61 \u5ef6\u8fdf\u52a0\u8f7d<\/li>\n<\/ol>\n

    \u57fa\u672c\u5de5\u5177<\/b><\/h2>\n
      \n
    • \u5f00\u53d1\u5de5\u5177 HBuilder1<\/li>\n
    • js\u5f15\u5165\u6587\u4ef6 mui.min.js<\/li>\n
    • css\u5f15\u5165\u6587\u4ef6 mui.min.css<\/li>\n<\/ul>\n

      \u5f00\u53d1\u6d41\u7a0b<\/b><\/h2>\n
        \n
      • \u9996\u5148\u4f60\u8981\u628a\u76f8\u5173js\u6587\u4ef6\u548ccss\u6587\u4ef6\u5f15\u5165\u8fdb\u6765<\/li>\n
      • \u7136\u540e\u4f60\u5728\u65b0\u5efa\u4e00\u4e2ajs\u6587\u4ef6 \u91cc\u9762\u8c03\u7528\n
          \n
        • mui.init() -\u5b98\u65b9\u89e3\u91ca mui\u9875\u9762\u52a0\u8f7d\u65f6\u9700\u8981\u8c03\u7528\u5f88\u591a\u57fa\u7840\u63a7\u4ef6\uff0c\u6bd4\u5982\u76d1\u542c\u8fd4\u56de\u952e\uff0c\u56e0\u6b64\u52a1\u5fc5\u5728\u6bcf\u4e2a\u9875\u9762\u4e2d\u8c03\u7528<\/li>\n
        • mui.plusReady() \u8fd9\u4e2a\u662f\u53ef\u4ee5\u7406\u89e3\u4e3a\u521d\u59cb\u5316 \u5c31\u662f\u9875\u9762\u52a0\u8f7d\u7684\u65f6\u5019\u4f1a\u89e6\u53d1\u4e00\u6b21 \u4ec5\u4ec5\u5728\u79fb\u52a8\u7aef\u8fd0\u884c<\/li>\n
        • mui.ready() \u8fd9\u4e2a\u4e5f\u662f\u521d\u59cb\u5316\uff0c\u4e0d\u8fc7\u5b83\u5728PC\u7aef\u548c\u79fb\u52a8\u7aef\u90fd\u80fd\u8fd0\u884c \u5efa\u8bae\u662f\u5f53\u4f60\u8981\u7528mui\u7684\u65f6\u5019 \u9996\u5148\u628a\u8fd9\u4e09\u4e2a\u90fd\u52a0\u5230js\u91cc\u53bb<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
          \n
          <!DOCTYPE html> <html>  <head>   <meta charset=\"UTF-8\">   <title>MUI\u793a\u4f8b<\/title>   <link rel=\"stylesheet\" href=\"..\/..\/mui\/css\/mui.min.css\"\/>  <\/head>  <body>   <script src=\"..\/..\/mui\/js\/mui.min.js\"><\/script>   <script type=\"text\/javascript\" charset=\"UTF-8\">    mui.init();    mui.plusReady(function(){         });    mui.ready(function(){          });       <\/script>  <\/body> <\/html> <\/code><\/pre>\n<\/div>\n
          \u600e\u4e48\u5feb\u901f\u505a\u4e00\u4e2a\u7b80\u6d01\u7684\u5217\u8868<\/b><\/h2>\n
            \n
          • \u5728\u7236\u8282\u70b9\u52a0.mui-table-view \u5b50\u8282\u70b9\u52a0.mui-table-view-cell \u5c31\u53ef\u4ee5\u5f62\u6210\u8981\u7ed9\u6700\u7b80\u5355\u7684\u5217\u8868<\/li>\n
          • \u52a0.mui-navigate-right \u5c31\u662f\u5728\u53f3\u8fb9\u52a0\u4e00\u4e2a>\u56fe\u6807<\/li>\n
          • \u5982\u679c\u4f60\u60f3\u5728\u5217\u8868\u53f3\u8fb9\u52a0\u4e00\u4e2a\u5220\u9664\u6309\u94ae \u4e5f\u5c31\u662f\u89d2\u6807\n
              \n
            • \u4f60\u53ea\u8981\u52a0\u4e0a.mui-badge mui-badge-primary \u8fd9\u4e2a\u5c31\u597d\u4e86<\/li>\n
            • \u89d2\u6807\u7684\u6838\u5fc3class\u662f.mui-badge \u540e\u9762\u53ef\u4ee5\u52a0\u989c\u8272<\/li>\n
            • mui\u5185\u7f6e\u4e865\u79cd\u989c\u8272<\/li>\n
            • .mui-badge-primary \u84dd\u8272<\/li>\n
            • .mui-badge-success \u7eff\u8272<\/li>\n
            • .mui-badge-warning \u9ec4\u8272<\/li>\n
            • .mui-badge-danger \u7ea2\u8272<\/li>\n
            • .mui-badge-purple \u7d2b\u8272<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
              \n
              <ul class=\"mui-table-view .mui-active\">       <li class=\"mui-table-view-cell\">        <a class=\"mui-navigate-right\">Item 2<\/a>       <\/li>       <li class=\"mui-table-view-cell\">Item 2         <span class=\"mui-badge mui-badge-primary\">11<\/span>       <\/li>       <li class=\"mui-table-view-cell\">Item 3        <span class = \"mui-badge mui-badge-success\">\u5220\u9664<\/span>       <\/li>   <\/ul> <\/code><\/pre>\n<\/div>\n
              \u6548\u679c\uff1a<\/p>\n
              \"MUI\u65b0\u624b\u4f7f\u7528\u6559\u7a0b\u8be6\u7ec6\"<\/figure>\n
              input\u8f93\u5165\u8868\u5355<\/b><\/h2>\n
                \n
              • \u4e3b\u8981class\u53ea\u6709\u4e24\u4e2a\n
                  \n
                • \u7236\u8282\u70b9class\u7528.mui-input-group \u8868\u793a\u5206\u7ec4\u7684\u610f\u601d<\/li>\n
                • \u5b50\u8282\u70b9class\u7528 .mui-input-row \u8868\u793a\u4e00\u884c\u7684\u610f\u601d<\/li>\n
                • \u5728.mui-input-row\u540c\u7ea7\u4e0a\u52a0.mui-search\u5c31\u53ef\u4ee5\u4f7f\u7528\u641c\u7d22\u63a7\u4ef6<\/li>\n
                • .mui-input-clear \u8868\u793a\u5feb\u901f\u5220\u9664input\u7684\u5185\u5bb9<\/li>\n
                • .mui-input-password \u8868\u793a\u663e\u793a\u6216\u9690\u85cf\u5bc6\u7801<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                  \n
                  <form class=\"mui-input-group\">    <div class=\"mui-input-row mui-search\">        <input type=\"search\" class=\"mui-input-clear\" placeholder=\"\">    <\/div>       <div class=\"mui-input-row\">           <label>\u7528\u6237\u540d:<\/label>       <input type=\"text\" class=\"mui-input-clear\" placeholder=\"\u8bf7\u8f93\u5165\u7528\u6237\u540d\">       <\/div>       <div class=\"mui-input-row\">           <label>\u5bc6\u7801:<\/label>           <input type=\"password\" class=\"mui-input-password\" placeholder=\"\u8bf7\u8f93\u5165\u5bc6\u7801\">       <\/div>   <\/form> <\/code><\/pre>\n<\/div>\n
                  \u6548\u679c\uff1a<\/p>\n
                  \"MUI\u65b0\u624b\u4f7f\u7528\u6559\u7a0b\u8be6\u7ec6\"<\/figure>\n
                  \u6d88\u606f\u6846<\/b><\/h2>\n
                    \n
                  • .confirm(message,title,btnValue,callback[,type])\n
                      \n
                    • message\u663e\u793a\u7684\u662f\u6d88\u606f \u5982 “\u8be5\u8bb0\u5f55\u8fd8\u6ca1\u4fdd\u5b58\uff0c\u662f\u5426\u4fdd\u5b58?”<\/li>\n
                    • title \u663e\u793a\u7684\u6807\u9898<\/li>\n
                    • btnValue \u662f\u4e00\u4e2a\u6570\u7ec4 \u4e3b\u8981\u662f\u663e\u793a\u6309\u94ae\u4e0a\u7684\u63d0\u793a \u662for\u5426<\/li>\n
                    • callback \u63d0\u793a\u5bf9\u8bdd\u6846\u4e0a\u5173\u95ed\u540e\u7684\u56de\u8c03\u51fd\u6570<\/li>\n
                    • type \u662f\u5426\u4f7f\u7528h5\u7ed8\u5236\u7684\u5bf9\u8bdd\u6846 \u4e00\u822c\u7528 ‘div’ \u4e5f\u53ef\u4ee5\u4e0d\u5199<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                      \n
                          var btnArray = ['\u662f', '\u5426'];     mui.confirm('\u8be5\u8bb0\u5f55\u8fd8\u6ca1\u4fdd\u5b58\uff0c\u662f\u5426\u4fdd\u5b58\uff1f', '\u63d0\u793a', btnArray, function(e) {       if (e.index == 0) {         \/\/\u5982\u679c\u70b9\u662f\u6267\u884c\u8fd9\u4e2a\u903b\u8f91 \u5426\u5219\u4f1a\u81ea\u52a8\u5173\u95ed\u786e\u8ba4\u6846       }     }); <\/code><\/pre>\n<\/div>\n
                      \u6548\u679c\uff1a<\/p>\n
                      \"MUI\u65b0\u624b\u4f7f\u7528\u6559\u7a0b\u8be6\u7ec6\"<\/figure>\n
                      \u65e5\u671f\u9009\u62e9\u5668<\/b><\/h2>\n
                        \n
                      • \n
                          \n
                        • \u9996\u5148\u60f3\u7528mui\u7684\u65e5\u671f\u9009\u62e9\u5668 \u4f60\u5fc5\u987b\u52a0\u4e0a\n
                            \n
                          • mui.picker.min.css<\/li>\n
                          • mui.picker.min.js<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                              \n
                            • \u5982\u4e0b\u4ee3\u7801\u8bb2\u89e3\n
                                \n
                              • \u9996\u5148\u521b\u5efa\u4e00\u4e2a\u65e5\u671f\u63a7\u4ef6new mui.DtPicker<\/li>\n
                              • \u7ed9\u91cc\u9762\u7684type\u8d4b\u503c\n
                                  \n
                                • datetime \u663e\u793a\u5e74\u6708\u65e5\u65f6\u5206<\/li>\n
                                • date \u663e\u793a\u5e74\u6708\u65e5<\/li>\n
                                • time \u663e\u793a\u65f6\u5206<\/li>\n
                                • month \u663e\u793a\u5e74\u6708<\/li>\n
                                • hour \u663e\u793a\u5e74\u6708\u65e5\u65f6<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                                    \n
                                  • \n
                                      \n
                                    • \u7ed9\u65e5\u671finput\u8bbe\u7f6e\u4e00\u4e2aid<\/li>\n
                                    • js\u540e\u9762\u76d1\u542c\u8fd9\u4e2aid\u70b9\u51fb\u4e8b\u4ef6<\/li>\n
                                    • \u5f53\u65e5\u671f\u88ab\u70b9\u51fb\u7684\u662f\u65f6\u5019 \u663e\u793ashow\u65e5\u671f\u63a7\u4ef6<\/li>\n
                                    • \u628a\u9009\u62e9\u7684\u503c\u653e\u5165\u5230input\u4e2d<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                                      \n
                                      <form class=\"mui-input-group\">    <div class=\"mui-input-row\" >     <label>\u5165\u5e93\u65e5\u671f <span style=\"color:red\">*<\/span><\/label>     <input id=\"in_date\" type=\"text\" class=\"\" placeholder=\"\u65e5\u671f\"\/>    <\/div>   <\/form>  mui.init(); mui.plusReady(function(){  }); mui.ready(function(){   var dtPicker = new mui.DtPicker({     type:'datetime'    });   \/\/ \u76d1\u542c\u65e5\u671f\u9009\u62e9\u70b9\u51fb\u4e8b\u4ef6   tap\u5728mui\u662f\u70b9\u51fb\u4e8b\u4ef6   document.getElementById(\"in_date\").addEventListener('tap', function() {       dtPicker.show(function (selectItems) {       \/\/\u628a\u9009\u4e2d\u7684\u503c\u653e\u5165\u5230input\u65e5\u671f\u91cc         this.value=selectItems.value;       });     }   }); }); <\/code><\/pre>\n<\/div>\n
                                      \u6548\u679c\uff1a<\/p>\n
                                      \"MUI\u65b0\u624b\u4f7f\u7528\u6559\u7a0b\u8be6\u7ec6\"<\/figure>\n
                                      \u5173\u95ed\u8be6\u60c5\u9875\u9762\uff0c\u8fd4\u56de\u65f6\uff0c\u5e0c\u671b\u5237\u65b0\u5217\u8868\u754c\u9762<\/b><\/h2>\n
                                        \n
                                      • \n
                                          \n
                                        • \u89e6\u53d1mui.back()\u9875\u9762\u5173\u95ed\u4e8b\u4ef6\u7684\u4e09\u79cd\u65b9\u5f0f\n
                                            \n
                                          • \u70b9\u51fb\u5305\u542bclass\u5e26\u6709.mui-action-back\u7684\u6807\u7b7e\n
                                              \n
                                            • \u4e0b\u65b9\u4ee3\u7801 \u4f1a\u81ea\u52a8\u751f\u6210\u5e26\u6709\u8fd4\u56de\u5bfc\u822a\u7bad\u5934\u7684\u6807\u9898\u680f\uff0c\u70b9\u51fb\u8fd4\u56de\u7bad\u5934\u53ef\u5173\u95ed\u5f53\u524d\u9875\u9762\uff0c\u539f\u56e0\u5c31\u662f\u56e0\u4e3a\u8be5a\u6807\u7b7eclass\u91cc\u5305\u542b.mui-action-back<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                                                \n
                                              • \n
                                                  \n
                                                • Android\u624b\u673a\u6309\u4e0bback\u6309\u952e\n
                                                    \n
                                                  • Android back\u6309\u952e\u8fd4\u56de\u529f\u80fd\u9ed8\u8ba4\u5f00\u542f\uff0c\u5982\u679c\u60f3\u7981\u7528 \u5219\u987b backbutton: false<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n