前言

自定义代码片段可以提高工作效率,只要敲上几个简单的字母,就能生成大段代码.

文档

https://ask.dcloud.net.cn/article/35924

自定义代码片段

步骤： 工具 -> 代码块设置 -> vue代码块

  1. "vue-template": {
  2.         "prefix": "vue-components",
  3.         "body": [
  4.             "<template>",
  5.             "\t<view class=\"container\">",
  6.             "\t\t<view class=\"__header\" :style=\"{height: statusBarHeight + 44 + 'px', paddingTop: statusBarHeight + 'px'}\">",
  7.             "\t\t\t<text class=\"zsdxfont zsdxzuojiantou1\" @click=\"fnNavigateBack()\"></text>",
  8.             "\t\t\t<text class=\"__title\">页面模版</text>",
  9.             "\t\t</view>",
  10.             "\t</view>",
  11.             "</template>",
  12.             " ",
  13.             "<script>",
  14.             "import { mapState } from 'vuex';",
  15.             "export default {",
  16.             "\tcomponents: {",
  17.             "\t},",
  18.             "\tdata() {",
  19.             "\t\treturn {",
  20.             "\t\t\tstatusBarHeight: 0",
  21.             "\t\t};",
  22.             "\t},",
  23.             "\tfilter: {",
  24.             "\t},",
  25.             "\tcomputed: {",
  26.             "\t\t...mapState({",
  27.             "\t\t\tuserInfo: state => state.userinfo.userInfo,",
  28.             "\t\t\thasLogin: state => state.hasLogin",
  29.             "\t\t})",
  30.             "\t},",
  31.             "\twatch: {",
  32.             "\t},",
  33.             "\t\/\/ life cycle start",
  34.             "\tonShow() {",
  35.             "\t\tthis.init()",
  36.             "\t},",
  37.             "\tonLoad(options) {},",
  38.             "\t\/\/ life cycle end",
  39.             "\tmethods: {",
  40.             "\t\tinit(){",
  41.             "\t\t\tthis.statusBarHeight = getApp().globalData.sysInfo.statusBarHeight;",
  42.             "\t\t},",
  43.             "\t\t",
  44.             "\t\t\/\/ 返回上一页",
  45.             "\t\tfnNavigateBack(){",
  46.             "\t\t\tuni.navigateBack()",
  47.             "\t\t},",
  48.             "\t},",
  49.             "",
  50.             "};",
  51.             "</script>",
  52.             " ",
  53.             "<style lang=\"scss\" scoped>",
  54.             ".container{",
  55.             "\twidth:100%;",
  56.             "\theight:100%;",
  57.             "\tbackground-color: #FFFFFF;",
  58.             "\tdisplay: flex;",
  59.             "\tflex-direction: column;",
  60.             "\t.__header{",
  61.             "\t\twidth: 750rpx;",
  62.             "\t\tbox-sizing: border-box;",
  63.             "\t\tdisplay: flex;",
  64.             "\t\talign-items: center;",
  65.             "\t\tbackground-color: #FFFFFF;",
  66.             "\t\t.zsdxzuojiantou1{",
  67.             "\t\t\tcolor: rgba(51, 51, 51, 1);",
  68.             "\t\t\tfont-size: 32rpx;",
  69.             "\t\t\tfont-size: 32rpx;",
  70.             "\t\t\tfont-weight: 500;",
  71.             "\t\t\tmargin-left: 30rpx;",
  72.             "\t\t}",
  73.             "\t\t.__title{",
  74.             "\t\t\tcolor: rgba(51, 51, 51, 1);",
  75.             "\t\t\tfont-size: 32rpx;",
  76.             "\t\t\tfont-weight: 500rpx;",
  77.             "\t\t\tmargin-left: 250rpx;",
  78.             "\t\t\tletter-spacing: 0;",
  79.             "\t\t}",
  80.             "\t}",
  81.             "}",
  82.             "</style> "
  83.         ],
  84.         "description": "自定义vue组件代码段"
  85.     }

使用

只要在编辑及敲上vue就会出现我们定义的代码片段，这样我们就可以将一些常用的方法和api生成代码片段，这样就大大的提高了我们的效率.
image.png