hd后台项目的代码片段

用于hd公司内部后台管理系统开发常用的代码片段以及初始模板.

有三个类型的内容,全部以a-开头.

初始化vue文件内容

也就是对空vue文件写入模板:

a-vue 创建空内容vue文件

a-HdDialog 创建dialog组件

a-vue-search-form 带有搜索按钮的form表单

a-vue-form-table 带有搜索按钮的form表单 + table表格

a-vue-form-table-pagination 带有搜索按钮的form表单 + table表格 + 分页

a-vue-form-submit 具有rules校验的表单

vue-html 组件代码片段

在<template>标签内使用的组件代码片段

a-btn-p 主要的按钮

<el-button type='primary'></el-button>

a-btn-t 文本的按钮

<el-button type='text'></el-button>

a-form-inline 带搜索的行内表单

<el-form :model='form' inline size='small'>
  <el-form-item label='名字'>
    <el-input v-model='form.name'></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type='primary' :loading='loading' @click='onSearch'
      >筛选</el-button
    >
  </el-form-item>
</el-form>

a-form-submit 带提交按钮的表单

<el-form
  ref='form'
  :model='form'
  :rules='rules'
  size='small'
  hide-required-asterisk
  label-width='75px'
  label-position='left'
>
  <el-form-item label='名字有这' prop='name'>
    <el-input v-model='form.name'></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type='primary' :loading='loading' @click='submit'
      >提 交</el-button
    >
  </el-form-item>
</el-form>

无标签内容,script标签内使用

a-confirm 确定操作

this.$confirm(`是否确认?`, '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning',
  beforeClose: (action, instance, done) => {
    if (action === 'confirm') {
      instance.confirmButtonLoading = true
      PromiseFn()
        .then(() => {
          done()
        })
        .finally(() => (instance.confirmButtonLoading = false))
    } else done()
  }
})

a-form-validate form标签的校验

this.$refs.form.validate((valid) => {
  if (valid) {

  } 
});