uniapp配置element-ui代码块

简介: uniapp配置element-ui代码块

打开HbuildX,工具,代码块设置,vue代码块



在右侧自定义代码块进行编写



可以登录element-ui组件指南中选取你需要的自定义代码块,这里我就给出一些自己整理的常见的组件:


{
    // 注意:本文档仅支持单行注释,并且'//'前不能有任何非空字符!!!
    //
    // HBuilderX使用json扩展代码块,兼容vscode的代码块格式
    // 本文档修改完毕,保存即可生效,无需重启。
    // 本文档用于用户自定义{1}代码块。
    // 每个配置项的说明如下:
    // 'key'    :代码块显示名称,显示在代码助手列表中的名字,以下例子中'console.log'就是一个key。
    // 'prefix' :代码块的触发字符,就是敲什么字母匹配这个代码块。
    // 'body'   :代码块的内容。内容中有如下特殊格式
    //          $1 表示代码块输入后光标的所在位置。如需要多光标,就在多个地方配置$1,如该位置有预置数据,则写法是${1:foo1}。多选项即下拉候选列表使用${1:foo1/foo2/foo3}
    //          $2 表示代码块输入后再次按tab后光标的切换位置tabstops(代码块展开后按tab可以跳到下一个tabstop)
    //          $0代表代码块输入后最终光标的所在位置(也可以按回车直接跳过去)。
    //          双引号使用\\'转义
    //          换行使用多个数组表示,每个行一个数组,用双引号包围,并用逗号分隔
    //          缩进需要用\\t表示,不能直接输入缩进!
    // 'triggerAssist' :为true表示该代码块输入到文档后立即在第一个tabstop上触发代码提示,拉出代码助手,默认为false。
    // 每个代码块以key为主键,多个代码块需要逗号分隔。
    // 如果json语法不合法,底部会弹出错误信息,请注意修正。
    // 例子:
    // "console.log": {
    //  "prefix": "logtwo",
    //  "body": [
    //      "console.log('$1');",
    //      "\tconsole.log('$2');"
    //  ],
    //  "triggerAssist": false,
    //  "description": "Log output to console twice"
    // }
  // element-ui代码提示
  "eRowCol": {
      "body": [
    "<el-row :gutter=\"20\">",
      "\t<el-col :span=\"12\">$1</el-col>",
      "\t<el-col :span=\"12\">$1</el-col>",
    "</el-row>"
      ],
      "prefix": "erowcol",
      "scope": "source.vue.html",
    "triggerAssist":true
  },
  "eCard": {
      "body": [
    "<el-card class=\"box-card\">",
      "\t<div slot=\"header\" class=\"clearfix\">",
      "\t\t<span>卡片名称</span>",
      "\t\t<el-button style=\"float: right; padding: 3px 0\" type=\"text\">操作按钮</el-button>",
      "\t</div>",
      "\t<div class=\"text item\">$1</div>",
    "</el-card>"
      ],
      "prefix": "ecard",
      "scope": "source.vue.html",
    "triggerAssist":true
  },
  "eInput": {
      "body": [
    "<el-input v-model=\"$1\"></el-input>"
      ],
      "prefix": "einput",
      "scope": "source.vue.html",
    "triggerAssist":true
  },
  "eSelect": {
      "body": [
    "<el-select v-model=\"form.region\" placeholder=\"请选择活动区域\">",
      "\t<el-option label=\"区域一\" value=\"shanghai\"></el-option>",
      "\t<el-option label=\"区域二\" value=\"beijing\"></el-option>",
    "</el-select>"
      ],
      "prefix": "eselect",
      "scope": "source.vue.html",
    "triggerAssist":true
  },
  "eDatePicker": {
      "body": [
    "<el-date-picker type=\"date\" placeholder=\"选择日期\" v-model=\"form.date1\" style=\"width: 100%;\"></el-date-picker>"
      ],
      "prefix": "edatepicker",
      "scope": "source.vue.html",
    "triggerAssist":true
  },
  "eSwitch": {
      "body": [
    "<el-switch v-model=\"form.delivery\"></el-switch>"
      ],
      "prefix": "eswitch",
      "scope": "source.vue.html",
    "triggerAssist":true
  },
  "eCheckboxGroup": {
      "body": [
    "<el-checkbox-group v-model=\"form.type\">",
      "\t<el-checkbox label=\"美食/餐厅线上活动\" name=\"type\"></el-checkbox>",
      "\t<el-checkbox label=\"地推活动\" name=\"type\"></el-checkbox>",
    "</el-checkbox-group>"
      ],
      "prefix": "echeckboxgroup",
      "scope": "source.vue.html",
    "triggerAssist":true
  },
  "eRadioGroup": {
      "body": [
    "<el-radio-group v-model=\"form.resource\">",
      "\t<el-radio label=\"线上品牌商赞助\"></el-radio>",
      "\t<el-radio label=\"线下场地免费\"></el-radio>",
    "</el-radio-group>"
      ],
      "prefix": "eradiogroup",
      "scope": "source.vue.html",
    "triggerAssist":true
  },
  "eButton": {
      "body": [
    "<el-button type=\"primary\" @click=\"onSubmit\">立即创建</el-button>"
      ],
      "prefix": "ebutton",
      "scope": "source.vue.html",
    "triggerAssist":true
  },
  "eForm": {
      "body": [
    "<el-form ref=\"form\" :model=\"form\" label-width=\"80px\">",
      "\t<el-form-item label=\"label\">",
      "\t\t$1",
      "\t</el-form-item>",
    "</el-form>"
      ],
      "prefix": "efrom",
      "scope": "source.vue.html",
    "triggerAssist":true
  },
  "eFormItem": {
      "body": [
      "<el-form-item label=\"label\">",
      "\t$1",
      "</el-form-item>"
      ],
      "prefix": "efromitem",
      "scope": "source.vue.html",
    "triggerAssist":true
  },
  "eDialog": {
      "body": [
"<el-dialog title=\"标题\" :visible.sync=\"createModel\">",
  "\t$1",
  "\t<div slot=\"footer\" class=\"dialog-footer\">",
  "\t\t<el-button @click=\"createModel = false\">取 消</el-button>",
  "\t\t<el-button type=\"primary\" @click=\"createModel = false\">确 定</el-button>",
  "\t</div>",
"</el-dialog>"
      ],
      "prefix": "edialog",
      "scope": "source.vue.html",
    "triggerAssist":true
  },
  "eLink": {
      "body": [
          "<el-link type=\"primary\" href=\"#\">$1</el-link>"
      ],
      "prefix": "elink",
      "scope": "source.vue.html"
  },
  "eRow": {
      "body": [
  "<el-row :gutter=\"20\">",
    "\t<el-col :span=\"6\">$1</el-col>",
    "\t<el-col :span=\"6\">$2</el-col>",
    "\t<el-col :span=\"6\">$3</el-col>",
    "\t<el-col :span=\"6\">$4</el-col>",
  "</el-row>"
      ],
      "prefix": "erow",
      "scope": "source.vue.html"
  }
}


相关文章
|
4月前
uniapp项目实践第四章:如何安装uni-ui组件库
uniapp项目实践第四章:如何安装uni-ui组件库
309 0
|
11月前
|
小程序 开发者
uniapp合法域名配置
uniapp合法域名配置
306 0
|
10天前
|
移动开发 JavaScript 前端开发
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
这篇文章介绍了在UniApp H5项目中处理跨域问题的两种方法:通过修改manifest.json文件配置h5设置,或在项目根目录创建vue.config.js文件进行代理配置,并提供了具体的配置代码示例。
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
|
4月前
uniapp配置tarBar
uniapp配置tarBar
68 0
|
2月前
|
小程序 UED
uniapp 添加分包页面,配置分包预下载
uniapp 添加分包页面,配置分包预下载
35 2
|
2月前
uniapp 安装插件 uView (多平台快速开发的UI框架)
uniapp 安装插件 uView (多平台快速开发的UI框架)
68 0
|
4月前
|
JavaScript
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
这篇文章介绍了在项目中安装和配置Nuxt UI以及TypeScript的步骤。作者在前言中提到考虑了AntDesignVue和Element-Plus,但最终选择了NuxtUI,因为它更适合年轻化的项目,并且与Nuxt兼容。安装Nuxt UI需要执行一系列命令,同时会自动安装一些相关模块。然后,可以在Nuxt应用中使用Nuxt UI的所有组件和可组合函数。此外,还介绍了如何添加图标库和配置TypeScript。
101 0
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
|
11月前
|
小程序 JavaScript 开发者
uniapp小程序订单页面UI
uniapp小程序订单页面UI
412 0
|
11月前
|
小程序 API
【 uniapp - 黑马优购 | 首页】小程序首页全局配置(home、网络请求、轮播图、分类...)
【 uniapp - 黑马优购 | 首页】小程序首页全局配置(home、网络请求、轮播图、分类...)
147 0
|
4月前
|
移动开发 监控 小程序
mPaaS常见问题之uniapp ios端云打包的配置config文件如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
143 0
下一篇
DDNS