VSCode snippets 自定义Vue3代码片段(持续更新）
{
//fn-> 标准函数格式
"standard function": {
"prefix": "fn",
"body": [
"function ${1:name}(${2:params}){",
" $3",
"}"
],
"description": "standard function"
},
// export arrow functions
"export arrow function": {
"prefix": "exarrf",
"body": [
"export const ${1:fnname} = ($2) =>{",
" $3",
"}"
],
"description": "export arrow function"
},
// arrow functions
"arrow function": {
"prefix": "arrf",
"body": [
"const ${1:fnname} = ($2) =>{",
" $3",
"}"
],
"description": "arrow function"
},
// export interface
"export interface": {
"prefix": "expi",
"body": [
"export interface ${1:name}{",
" $2",
"}"
],
"description": "export interface"
},
// request-get
"request-get": {
"prefix": "reqget",
"body": [
"export const ${1:req} = ($2)=><any,any>(API.$3) "
],
"description": "request-get"
},
//request-post
"request-post": {
"prefix": "reqpost",
"body": [
"export const ${1:req} = ($2)=><any,any>(API.$3,$4) "
],
"description": "request-post"
},
// request result
"requst_result": {
"prefix": "reqresult",
"body": [
"let result = await req$1($2)",
" if ( == 200) {",
" ElMessage({",
" type: \"success\",",
" message: ",
" })",
" } else {",
" ElMessage({",
" type: \"error\",",
" message: ",
" })",
" }"
],
"description": "requst_result"
},
// impr-> 从vue中导入reactive
"import { reactive } from 'vue';": {
"prefix": "impr",
"body": [
"import { reactive } from 'vue';"
],
"description": "import { reactive } from 'vue';"
},
// impv-> 从vue中导入...
"import { } from 'vue';": {
"prefix": "impv",
"body": [
"import { $1 } from 'vue';"
],
"description": "import { } from 'vue';"
},
// livfor-> <li>标签中的v-for
"li v-for": {
"prefix": "livfor",
"body": [
"<li v-for=\"item in $1\" :key=\"item.${2:id}\">",
" {{ ${3:item} }}",
"</li>"
],
"description": "li v-for"
},
//触发自定义事件
"defineEmits": {
"prefix": "emit",
"body": [
"let $$emit = defineEmits(['$1']);"
],
"description": "defineEmits"
},
// <el-form></el-form>
"el-form": {
"prefix": "elf",
"body": [
"<el-form>",
" <el-form-item label=\"$1\">",
" $2",
" </el-form-item>",
"</el-form>"
],
"description": "<el-form>"
},
//<el-form :inline></el-form>
"el-form :inline": {
"prefix": "elfi",
"body": [
"<el-form :inline=\"true\">",
" <el-form-item label=\"$1\">$2</el-form-item>",
"</el-form>"
],
"description": "el-form :inline"
},
//<el-form-item></el-form-item>
"el-form-item": {
"prefix": "elfit",
"body": [
"<el-form-item label=\"$1\">$2</el-form-item>"
],
"description": "el-form-item"
},
// <el-input></el-input>
"el-input": {
"prefix": "eli",
"body": [
"<el-input placeholder=\"$1\"></el-input>"
],
"description": "el-input"
},
"el-table": {
"prefix": "eltable",
"body": [
"<el-table :data=\"$1\" border>",
" <el-table-column label=\"$2\" prop=\"$3\"/>",
"</el-table>"
],
"description": "el-table"
},
//<el-table-column>$1</el-table-column>
"el-table-column": {
"prefix": "eltc",
"body": [
"<el-table-column prop=\"$2\" label=\"$1\"/>"
],
"description": "el-table-column"
},
//<el-select></el-select>
"el-select": {
"prefix": "els",
"body": [
"<el-select>",
" <el-option label=\"$1\"></el-option>",
"</el-select>"
],
"description": "el-select"
},
//<el-option></el-option>
"el-option": {
"prefix": "elo",
"body": [
"<el-option label=\"$1\"></el-option>"
],
"description": "el-option"
},
//<el-button type="primary"></el-button>
"el-button-primary": {
"prefix": "elbp",
"body": [
"<el-button @click=\"\" type=\"primary\">$1</el-button>"
],
"description": "el-button-primary"
},
//<el-button type="success"></el-button>
"el-button-success": {
"prefix": "elbs",
"body": [
"<el-button @click=\"\" type=\"success\">$1</el-button>"
],
"description": "el-button-success"
},
//<el-button type="info"></el-button>
"el-button-info": {
"prefix": "elbi",
"body": [
"<el-button @click=\"\" type=\"info\">$1</el-button>"
],
"description": "el-button-info"
},
//<el-button type="warning"></el-button>
"el-button-warning": {
"prefix": "elbw",
"body": [
"<el-button @click=\"\" type=\"warning\">$1</el-button>"
],
"description": "el-button-warning"
},
//<el-button type="danger"></el-button>
"el-button-danger": {
"prefix": "elbd",
"body": [
"<el-button @click=\"\" type=\"danger\">$1</el-button>"
],
"description": "el-button-danger"
},
//<el-card></el-card>
"el-card": {
"prefix": "elcard",
"body": [
"<el-card>",
" $1",
"</el-card>"
],
"description": "el-card"
},
//<el-dialog></el-dialog>
"el-dialog": {
"prefix": "eldialog",
"body": [
"<el-dialog v-model=\"\" title=\"$1\">",
" $2",
"</el-dialog>"
],
"description": "el-dialog"
},
//<el-pagination>
"el-pagination": {
"prefix": "elpagination",
"body": [
"<el-pagination v-model:current-page=\"pageNo\" v-model:page-size=\"pageSize\" ",
" :page-sizes=\"[10, 20, 30, 50]\"",
" :background=\"true\" ",
" layout=\"jumper, prev, pager, next, ->,sizes,total\" :total=\"total\"",
" @size-change=\"handleSizeChange\"",
" @current-change=\"handleCurrentChange\"/>"
],
"description": "el-pagination"
},
//<el-pagination> var function define
"el-pagination相关变量与函数": {
"prefix": "elpavf",
"body": [
"//分页器相关变量",
"//默认页码",
"let pageNo = ref<number>(1)",
"//每页展示的数据条数",
"let pageSize = ref<number>(10)",
"//需要展示的数据总条数",
"let total = ref<number>(0)",
"//分页器相关函数",
"//@size-change回调函数",
"const handleSizeChange = (val: number) => {",
" ",
"}",
"//@current-change回调函数",
"const handleCurrentChange = (val: number) => {",
" ",
"}"
],
"description": "el-pagination相关变量与函数"
},
//<el-popconfirm></el-popconfirm>
"el-popconfirm": {
"prefix": "elpopconfirm",
"body": [
"<el-popconfirm title=\"$1\">",
" <template #reference>",
" $2",
" </template>",
"</el-popconfirm>"
],
"description": "el-popconfirm"
},
//<template #="{row,index}"></template>
"template #": {
"prefix": "tempr",
"body": [
"<template #=\"{ row, index }\">",
" $1",
"</template>"
],
"description": "template #"
},
// 变量代码折叠
"region define variables": {
"prefix": "regv",
"body": [
"//#region define variables",
"$1",
"//#endregion"
],
"description": "region define variables"
},
// import 代码折叠
"region import": {
"prefix": "regi",
"body": [
"//#region import",
"$1",
"//#endregion import"
],
"description": "region import"
},
// function 代码折叠
"region function": {
"prefix": "regf",
"body": [
"//#region function",
"$1",
"//#endregion function"
],
"description": "region function"
},
//数据验证函数
"validator function": {
"prefix": "validator function",
"body": [
"const validator$1 = (_rule: any, value: any, callback: any) => {",
" $2",
"}"
],
"description": "validator function"
}
}