配置pc端模版

• 编辑页
• 列表页
• 统计页
• 弹窗
• 抽屉

1、 打开vscode
2、

• mac 电脑 按下 shift + command + p
• window电脑 按下 shift + ctrl + p

3、 在输入框 搜索 代码片段 再选择 首选项:配置用户代码片段
4、 选择 新建全局代码片段
5、 输入代码片段储存文件名称 pc-vue-tpl 按回车确定。
6、 把以下内容复制到文件 （下面代码区域右上角，点击按钮可快捷复制）

::: demo

{
  "pc-vue-edit": {
    "prefix": "<template",
    "body": [
      "<template>",
      "  <div>",
      "    <!-- -->",
      "    $2",
      "  </div>",
      "</template>",
      "<script>",
      "export default {",
      "  data() {",
      "    return {",
      "      formData: {}",
      "    };",
      "  },",
      "}",
      "</script>",
    ],
    "description": "vue的pc端编辑页模版"
  },
  "pc-vue-dialog": {
    "prefix": "<template",
    "body": [
      "<template>",
      "  <div v-loading=\"isLoading\" element-loading-text=\"加载中\" element-loading-spinner=\"el-icon-loading\">",
      "    <div style=\"width: 100%;height: 300px;\">",
      "      <el-scrollbar style=\"height: 300px;\">",
      "      ...弹窗内容",
      "    $2",
      "      </el-scrollbar>",
      "    </div>",
      "    <div style=\"padding: 10px 20px 0 0; text-align: right; box-sizing: border-box\">",
      "      <cv-btn-base @click=\"handleClose\">取 消</cv-btn-base>",
      "      <cv-btn-base type=\"primary\" @click=\"handleOK\" autoLoading>确 定</cv-btn-base>",
      "    </div>",
      "  </div>",
      "</template>",
      " ",
      "<script>",
      "export default {",
      "  props: {",
      "    ",
      "  },",
      "  data() {",
      "    return {",
      "      isLoading: true,",
      "    };",
      "  },",
      "  created() {",
      "    this.initData();",
      "  },",
      "  methods: {",
      "    initData() {",
      "      // 这边模拟请求数据",
      "      setTimeout(() => {",
      "        this.isLoading = false;",
      "      }, 800);",
      "    },",
      "    // 保存前校验",
      "    handleOK(callClose) {",
      "      this.\\$refs['refFormBase'].validate((valid) => {",
      "        if (!valid) {",
      "          callClose();",
      "          return false;",
      "        }",
      "        this.\\$emit('close');",
      "      });",
      "    },",
      "    handleClose() {",
      "      this.\\$emit('close');",
      "    },",
      "  },",
      "}",
      "</script>",
    ],
    "description": "vue的pc端弹窗子体模版"
  },
  "pc-vue-drawer": {
    "prefix": "<template",
    "body": [
      "<template>",
      "  <div v-loading=\"isLoading\" element-loading-text=\"加载中\" element-loading-spinner=\"el-icon-loading\" style=\"height: 100%\">",
      "    <div style=\"width: 100%;height: calc(100% - 40px);\">",
      "      <el-scrollbar style=\"height: 100%;\">",
      "      ...弹窗内容",
      "    $2",
      "      </el-scrollbar>",
      "    </div>",
      "    <div style=\"padding: 10px 20px 0 0; text-align: right; box-sizing: border-box\">",
      "      <cv-btn-base @click=\"handleClose\">取 消</cv-btn-base>",
      "      <cv-btn-base type=\"primary\" @click=\"handleOK\" autoLoading>确 定</cv-btn-base>",
      "    </div>",
      "  </div>",
      "</template>",
      " ",
      "<script>",
      "export default {",
      "  props: {",
      "    ",
      "  },",
      "  data() {",
      "    return {",
      "      isLoading: true,",
      "    };",
      "  },",
      "  created() {",
      "    this.initData();",
      "  },",
      "  methods: {",
      "    initData() {",
      "      // 这边模拟请求数据",
      "      setTimeout(() => {",
      "        this.isLoading = false;",
      "      }, 800);",
      "    },",
      "    // 保存前校验",
      "    handleOK(callClose) {",
      "      this.\\$refs['refFormBase'].validate((valid) => {",
      "        if (!valid) {",
      "          callClose();",
      "          return false;",
      "        }",
      "        this.\\$emit('close');",
      "      });",
      "    },",
      "    handleClose() {",
      "      this.\\$emit('close');",
      "    },",
      "  },",
      "}",
      "</script>",
    ],
    "description": "vue的pc端弹窗子体模版"
  }
}

:::