Mue-Snippet

目录

[TOC]

简介

Mue-Snippet 是mue提供的快速书写代码提示插件，在Sublime,Atom,VSCode, APICloud Studio2 ,Webstorm中集成mue控件及方法的代码提示，为快速开发助力. 里面封装了控件的常用参数及常用方法的语法补全, 版本对应 mue的版本.

1.3.1版本新增 控件名加"-demo" 快速生成控件初始化及结构,只要把结构复制到body对应的位置就行.

安装

方法1: 在应用市场输入 mue-snippet , 安装即可.

方法2: 使用快捷键 mac: command + shift + p , windows: ctrl + shift + p;

• 输入Install from VSIX, 回车 ; 找到 mue-Fast-Snippet-Vscode/mue-fast-0.0.1.vsix 文件安装即可, 再按提示reload.

简单使用示例

html触发结构代码片段的指令格式为: 'ue-控件名'，之后点击Tab键即可进行补全 JS触发代码片段的指令格式为： 'mue-控件名'，之后点击Tab键即可进行补全

注意: 生成代码后, 按Tab会定位在常用的编辑区域, 如果要写另外的控件代码, 要先按 Esc 再重复之前操作.

HTML 快速生成mue控件结构

(在body里面书写) ue-accordion Tab ( 生成折叠菜单结构 )

<dl id="uiAccordion" class="mue-accordion">
  <dt class="mue-btn mue-box">
      <div class="span1"><!--折叠菜单--></div>
      <i class="icon-accordion"></i>
  </dt>
  <dd>
      <!--折叠菜单内容-->
  </dd>
</dl>

注意:如果忘记控件的名字, 输入 <ue- 会有提醒相关的控件 ( 生成的结构记得删掉第一个 < ).

JS 快速生成mue控件初始化

(在script里面书写)

mue-accordion Tab

var uiAccordion = mue.accordion({
  id:"#uiAccordion"
});

JS 快速生成完整demo ( 推荐, 1.3.0 新增 )

(在script里面书写)

mue-list-demo Tab ( 生成list控件的初始化跟html结构 )

需要把html结构剪切到对应的位置去. 更多demo 请查看底部的控件列表

// 列表控件 js 初始化: 

var uiList = mue.list({
  id: "#uiList",
  url: "",
  data: {},             // 数据请求带过去的参数,分页在field配置
  template: listTemplate,
  field: {
      page: "page",     // 分页参数名
      size: "pageSize", // 分页大小参数名
      data: ""          // 数据字段名
  }
});
// 列表模板
function listTemplate (data) {
  var html = "";
  $.each(data,function(index, el) {
      html += '<li class="mue-btn" href="index.html"><i class="icon-facefill"></i>'+el.name+'</li>';
  });

  return html;
}

// 列表控件 html 对应的结构: 

<div id="uiList" class="mue-scroll">
  <div class="mue-scroll-head"></div>
  <div class="mue-scroll-main">
      <ul class="mue-list">
      </ul>
  </div>
  <div class="mue-scroll-foot"></div>
</div>

JS 快速生成mue常用方法

(在script里面书写)

mue-ajax Tab ( 生成请求的方法 )

mue.ajax({
    url: "http://",
    data: {},//接口请求的参数

    // 可选参数
    method: "GET",
    timeout: 20000
}).done(function(result){
    
}).fail(function(result){
    
});

mue JS方法及控件缩写

JS触发代码片段的指令格式为： 'mue-控件名'，之后点击Tab键即可进行补全

控件简单初始化

控件名: mue.accordion 我们只需要输入 mue-accordion-demo Tab 就会生成完整的示例

控件完整demo缩写一览 (推荐 1.3.0新增)

控件名: mue.accordion 我们只需要输入 mue-accordion Tab 就会生成最简单的初始化脚本

mue HTML结构缩写一览

html触发结构代码片段的指令格式为: 'ue-控件名'，之后点击Tab键即可进行补全

控件结构缩写

页面结构缩写

布局结构缩写

表单元素结构缩写

新增结合数据驱动的标签, 1.6.x 从 b-text 改成 ue-b-text