Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>vscode-magix-snippetsNew to Visual Studio Code? Get it now.
vscode-magix-snippets

vscode-magix-snippets

MMUFE

|
66 installs
| (0) | Free
快速生成magix语法及magix常用组件的代码模版
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

why

  • 弱文档化
  • 提效
  • 一定程度上统一代码风格(最好配合统一的代码规范一起,如eslint,standardJS)

功能

[x] 一键支持magix3常用语法

[x] 对常见的magix-gallery组件使用抽象成代码片段

[x] 对adv,pub自带的一些常用组件抽象成代码片段

API

语法类

html语法标签

快捷键 描述 代码片段
= 输入变量,进行xss转译 {{=}}
! 输入变量,不进行xss转译 {{!}}
@ 插入一个对象的变量 {{@}}
if if模版 {{if}}{{/if}}
ife if esle模版 {{if}}{{else}{{/if}
each each遍历模版 {{each $1 as $2 i}}$3{{/each}}
mx-view 子区块的html代码

js语法模版

⚠️这里的关于路由的语法是基于magix-router的语法,而非magix3自带的router

快捷键 描述 代码片段
mi 初始化出一个magix模版
mu magix更新页面 this.updater.digest()
msu magix更新页面并更新数据 this.updater.set({}).digest()
mf magix的过滤器 filters{", "$1", "},
mx-fetch magix配套的fetch请求方法
muq magix 更新url的query的方法
mq magix获取url的query的方法 const {} = this.route.query
mg magix从updater获取数据的方法 const {} = this.updater.get()
mx-onchange magix常用的onchange模版
mx-onclick magix常用的onclick模版
mx-view magix常用的加载子view方法

magix-gallery

快速生成对应的组件magix-gallery的区块代码,具体文档请移步

组件html代码

快捷键 描述 对应的magix-gallery组件
mx-table 列表的html代码区块代码 mx-table
mx-table-check 带单选框的列表区块代码 mx-table
mx-table-op 操作项在下方的列表区块代码 mx-table
mx-tab 选项卡区块代码 mx-tab
mx-box 盒形选项卡区块代码 mx-tab.box
mx-calendar 时间范围选择器区块代码 mx-calendar.rangepicke
mx-loading 加载态区块代码 mx-loading
mx-search 搜索框代码 mx-search
mx-dropdown 下拉框代码 mx-dropdown
mx-popover 气泡区块代码 mx-popover
mx-dialog 模态框内容代码 mx-dialog
mx-editor 可编辑组件内容代码 mx-editor

组件js代码

快捷键 描述 对应的magix-gallery组件
mx-table 分页器的onchange事件 mx-table
mx-calendar 时间选择器的onchange事件 mx-calendar.rangepicke
mx-onsearch 搜索框的onsearch事件 mx-search
mx-oncheck 单选框的onchange事件 check
mx-dialog 打开模态框 mx-dialog
mx-confirm 打开询问框 mx-confirm
mx-alert 弹出提示框 mx-alert
mx-editor 可编辑组件的onedit事件 mx-editor

gallery-local

快速生成对应的本地组件库gallery-localy的区块代码,具体文档请参考自己项目的文档

组件html代码

快捷键 描述 对应的magix-gallery组件
lg-download 下载按钮的html代码区块 lg-download
lg-snippets.tip 提示文案的html代码区块 lg-snippets.tip
lg-snippets.breadcrumb 面包屑的html代码区块 lg-snippets.breadcrumb
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft