插件说明

XT通用代码片段，涵盖通用组件及一些常用代码片段，用于统一代码风格，提升开发效率，配置化开发

用法

插件商店搜索 XT FE PlugIn安装后重启vscode即可使用，输入代码关键字可生成代码片段，按tab键可跳转光标位置

代码片段对照表

组件类

关键词：XTemplate

代码片段：

<template>
</template>
<script>
export default {
  name: "",
  props: {},
  data () {
    return {

    }
  },
  computed: {},
  mounted () {},
  methods: {}
}
</script>
<style lang="less" scoped>
</style>

关键词：XForm

代码片段：

<XForm
  ref="xform"
  v-model=""
  :form-options=""
  :rules=""
  :label-width=""
  :input-width=""
>
</XForm>

关键词：SearchTable

代码片段：

<SearchTable
  ref="searchTable"
  :columns=""
  :search-form=""
  :search-method=""
  :search-options=""
>
</SearchTable>

关键词：DynamicForm

代码片段：

<dynamic-form
  ref=""
  v-model=""  
  :form-definition=""
  :form-props=""
/>

关键词：ApiDataTable

代码片段：

<api-data-table
  ref=""
  :columns=""
  :data-request=""
  :query-params=""
/>

关键词：Modal

代码片段：

<Modal
  :value="visible"
  title=""
  :width=""
  @on-cancel="$emit('update:visible',false)"
>
</Modal>

关键词：EncryptionDataCell-v

v用于区分文件类型，加v片段用于vue文件中使用

代码片段：

<EncryptionDataCell
  :data=" || {}"
  value-path=""
  :vueInstance="$returnSelf()"
/>

关键词：EncryptionDataCell

代码片段

render (h, { row, index }) {
  return <EncryptionDataCell
    data={row. || {}}
    vueInstance={vueInstance}
    valuePath={``}
  />
}

关键词：Uploader

代码片段：

<Uploader
  :params-of-request-body="uploaderParams"
  :limit=""
  :format="['gif', 'jpg', 'jpeg', 'png']"
  @upload-list-change="uploaderChange"
/>

关键词：SelectArr

select组件，options为数组类型

代码片段：

<Select
  v-model=""
  placeholder=""
  clearable
>
  <Option
    v-for="item in options"
    :key="item.value"
    :value="item.value"
    :label="item.label"
  />
</Select>

关键词：SelectObj

select组件，options为对象类型

代码片段：

<Select
  v-model=""
  placeholder=""
  clearable
>
  <Option
    v-for="(value,key) in options"
    :key="key"
    :value="key"
    :label="value"
  />
</Select>

配置类

关键词：columns

代码片段：

export const columns = [
  {
    title: "",
    key: "",
    align: "center"
  },
  {
    title: "",
    key: "",
    align: "center"
  },
  {
    title: "",
    key: "",
    align: "center"
  }
]

关键词：columns-v

代码片段：

columns: [
  {
    title: "",
    key: "",
    align: "center"
  },
  {
    title: "",
    key: "",
    align: "center"
  },
  {
    title: "",
    key: "",
    align: "center"
  }
]

关键词：formOptions

代码片段：

export const formOptions = [
  {
    key: "",
    inputType: "",
    itemLabel: "",
    placeholder: ""
  },
  {
    key: "",
    inputType: "",
    itemLabel: "",
    placeholder: ""
  },
  {
    key: "",
    inputType: "",
    itemLabel: "",
    placeholder: ""
  }
]

关键词：formOptions-v 代码片段：

formOptions: [
  {
    key: "",
    inputType: "",
    itemLabel: "",
    placeholder: ""
  },
  {
    key: "",
    inputType: "",
    itemLabel: "",
    placeholder: ""
  },
  {
    key: "",
    inputType: "",
    itemLabel: "",
    placeholder: ""
  }
]

关键词：searchOptions

代码片段：

export const searchOptions = [
  {
    key: "",
    type: "",
    placeholder: ""
  },
  {
    key: "",
    type: "",
    placeholder: ""
  },
  {
    key: "",
    type: "",
    placeholder: ""
  }
]

关键词：searchOptions-v

代码片段：

searchOptions: [
  {
    key: "",
    type: "",
    placeholder: ""
  },
  {
    key: "",
    type: "",
    placeholder: ""
  },
  {
    key: "",
    type: "",
    placeholder: ""
  }
]

关键词：rules

代码片段：

export const rules = {
  name1: [ 
    { required: true, message: '', trigger: 'blur' }
  ],
  name2: [ 
    { required: true, message: '', trigger: 'blur' }
  ],
  name3: [ 
    { required: true, message: '', trigger: 'blur' }
  ]
}

关键词：rules-v 代码片段：

rules: {
  name1: [ 
    { required: true, message: '', trigger: 'blur' }
  ],
  name2: [ 
    { required: true, message: '', trigger: 'blur' }
  ],
  name3: [ 
    { required: true, message: '', trigger: 'blur' }
  ]
}

关键词：route

{
  path: '',
  name: '',
  component: () => import(''),
  meta: {
    loginCheck: true,
    permissionCheck: true
},

代码类

关键词：log

console.log();

关键词：post

//
//YAPI地址：
export function  (data) {
  return request({
    url: '',
    method: 'post',
    data
  })
}

关键词：get

//
//YAPI地址：
export function  (data) {
  return request({
    url: '',
    method: 'get',
    data
  })
}

关键词：api

const params = {
  
}
API(params).then((res) => {
  if (res){
    
  }
  }).catch((error) => {
    handleMapErrorInfo(error)
})

关键词：asyncApi

const params = {
  
}
const res = await API(params).catch((error) => {
  handleMapErrorInfo(error)
})
if (res) {
  
}

关键词：handleMapError

import { handleMapErrorInfo } from '@/utils/errorMap'

关键词：validate

const valid = await this.$refs.xform.validate()
if(valid) {
  
}

关键词：render

render (h, {row}) {
  return (
    <span></span>
  )
}

关键词：MessageSuccess

this.$Message.success('')

关键词：MessageError

this.$Message.error('')

关键词：MessageWarning

this.$Message.warning('')