likes
comments
collection
share

基于elementUI封装了基础表单组件

作者站长头像
站长
· 阅读数 78

开头先BB两句

elementUI的表单组件,自带表单验证规则。虽然已经很方便了,但是我还是想封装一下。

通常用到的表单类型,主要包括:Radio 单选框,输入框,下拉框

我封装了一个基础组件。把这些表单数据,放在一个json对象里面,传入封装好的基础组件。然后循环遍历,根据选项类型,展示输入框还是下拉框,等等。

项目中需要用到时,只需要安装,引入,配置json文件即可。

封装好的组件,放在项目中的components文件夹中,作为公共组件引入使用。

跟住,我又将整个基础表单的组件,发布到了npm上面。

封装组件并发布到npm

那么,如何将封装好的组件,发布到npm上呢?

第一步,新建一个vue项目,使用简洁的webapck配置模板,就可以了。

vue init webpack-simple my-project

第二步,在src文件夹下,新建一个components文件夹,放入封装好的BasicForm组件。

第三步,在根目录下新建一个index.js文件。

Vue的插件必须提供一个公开方法 install,该方法会在你使用该插件,也就是 Vue.use(yourPlugin)时被调用。这样也就给 Vue全局注入了你的所有的组件。

import basicForm from './src/components/basicForm/index.vue';
//注册组件
basicForm.install = Vue => Vue.component(basicForm.name, basicForm);
export default basicForm;

第四步,修改配置文件 webpack.config.js entry和output属性

entry: process.env.NODE_ENV == 'development' ? './src/main.js' : './index.js',
output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'basicForm.js',
    library: 'basicForm', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // 指定输出格式
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
},

第五步,修改 package.json 文件

//name就是发布后的包名
"name": "@orzr3/basic-form",
"private": false,
"main": "dist/basicForm.js",

第六步,提交发布

首先,要注册一个npm账号,官网链接在此:

传送门

www.npmjs.com/

PS

如果将镜像设置成了淘宝镜像,先设置回来,否则会报错

npm config set registry http://registry.npmjs.org

注册成功之后,登录npm账号,依次输入用户名,密码,邮箱

npm login

执行发布

npm publish

直接 npm publish 会报错,建议改为 npm publish --access=public

npm publish --access=public

发布成功之后,登录npm官网,点击头像,然后点击profile选项,可以看到已经发布的插件。

安装与使用

安装

npm i @orzr3/basic-form --save

引入

import BasicForm from '@orzr3/basic-form'

报错解决方案

vue报错:Module build failed: TypeError: this.getOptions is not a function

vue-cli构建项目使用sass报错

Module build failed: TypeError: this.getOptions is not a function

www.cnblogs.com/chenjy1225/…

出现问题的原因是安装的sass-loader版本过高,选择安装较低版本的sass-loader即可。

npm install sass-loader@7.3.1 --save-dev

出现问题的原因是安装的sass版本过高,选择安装4.0+版本的sass即可。

npm install node-sass@4.14.1 --save-dev

参考文章

封装组件并发布到npm

传送门

www.cnblogs.com/max-tlp/p/9…

示例代码

不知道我说清楚了没有,最后的最后,贴上安装使用的示例代码。

<template>
  <div class="friends">
    <div class="friend-main">
      <h2>基础组件</h2>
      <div class="info-box">
        <basic-form
          :ref="formModelObject.formName"
          :formModel="formModelObject.formModel"
          :refName="formModelObject.formName + 'RefName'"
          :halfFormFlag="formModelObject.halfFormFlag"
          defaultTextareaWidth="400px"
          @submit="submitForm"
        ></basic-form>
        <div class="btn-list">
          <el-button type="primary" @click="submit">确认修改</el-button>
          <el-button type="default" @click="reset">重新填写</el-button>
        </div>
      </div>
    </div>
  </div>
</template><script>
import BasicForm from '@orzr3/basic-form'
import { BasicInformationMixin } from "@/mixins/BasicInformationMixin";
​
export default {
  name: "Friends",
  mixins: [BasicInformationMixin],
  components: {
    BasicForm,
  },
  data() {
    return {
      url: {
        edit: "/sys/user/updateBaseInfo",
      },
    };
  },
  methods: {
    submit() {
      this.$refs[this.formModelObject.formName].submit();
    },
    submitForm(object) {
      const { refName, formData } = object;
      formData.id = this.userInfo.id;
      let key = this.active;
      let httpurl = this.url.edit;
      let method = "post";
      this.$api.httpAction(httpurl, formData, method).then((res) => {
        this.loading = false;
        if (res.code == 200) {
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    reset() {
      this.$nextTick(() => {
        this.$refs[this.formModelObject.formName].resetFields();
      });
    },
  },
  created() {
  },
};
</script><style scoped>
</style>

mixins文件夹下的BasicInformationMixin.js文件

import {
  validPhone,
  validEmail,
  validIDCard,
  validPwd,
  vaildRealName,
} from "@/utils/validate";
​
export const BasicInformationMixin = {
  data() {
    return {
      formModelObject: {
        formName: "backUp",
        formModel: {
          formList: [
            {
              value: "",
              prop: "roleName",
              label: "我的角色",
              placeHolder: "",
              disabled: true,
              tips: "",
              rules: {
                value: [
                  {
                    required: false,
                    message: "",
                    trigger: "blur",
                  },
                ],
              },
            },
            {
              value: "",
              prop: "loginName",
              label: "登录帐号",
              placeHolder: "",
              disabled: true,
              tips: "不可修改。一般用于后台登入名",
              tipsColor: '#606266',
              rules: {
                value: [
                  {
                    required: false,
                    message: "",
                    trigger: "blur",
                  },
                ],
              },
            },
            {
              value: "",
              prop: "userName",
              label: "用户名",
              placeHolder: "请输入用户名",
              tips: "",
              rules: {
                value: [
                  {
                    required: true,
                    message: "请输入用户名",
                    trigger: "blur",
                  },
                ],
              },
            },
            {
              value: "",
              prop: "sex",
              label: "性别",
              placeHolder: "",
              tips: "",
              type: "radio",
              selectOptions: [
                {
                  value: '0',
                  text: "男",
                },
                {
                  value: '1',
                  text: "女",
                },
              ],
              rules: {
                value: [
                  {
                    required: true,
                    message: "请选择性别",
                    trigger: "blur",
                  },
                ],
              },
            },
            {
              value: "",
              prop: "phone",
              label: "手机",
              placeHolder: "请输入您的手机号码",
              tips: "",
              rules: {
                value: [
                  {
                    required: false,
                    trigger: "change",
                    validator: validPhone,
                  },
                ],
              },
            },
            {
              value: "",
              prop: "email",
              label: "邮箱",
              placeHolder: "请输入您的邮箱",
              tips: "",
              rules: {
                value: [
                  {
                    required: false,
                    trigger: "change",
                    validator: validEmail,
                  },
                ],
              },
            },
            {
              value: "",
              prop: "remark",
              label: "备注",
              placeHolder: "请输入备注",
              type: "textarea",
              rules: {
                value: [
                  {
                    required: false,
                    message: "请输入备注",
                    trigger: "blur",
                  },
                ],
              },
            },
          ],
        },
        halfFormFlag: false,
      }
    }
  },
  methods: {
​
  },
}

utils 文件夹下的validate.js文件

// 手机号验证2020年最新正则表达式
export const phoneReg = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/export const emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
​
export const idcardReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
​
export const nameReg = /^([\u4e00-\u9fa5]{2,20}|[a-zA-Z.\s]{2,20})$/;
/**
 * Created by PanJiaChen on 16/11/18.
 */
/**
 * 邮箱
 * @param {*} s
 */
export function isEmail(s) {
  return /^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
}
​
/**
 * 手机号码
 * @param {*} s
 */
export function isMobile(s) {
  return /^1[0-9]{10}$/.test(s)
}
​
/**
 * 电话号码
 * @param {*} s
 */
export function isPhone(s) {
  return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
}
​
/**
 * URL地址
 * @param {*} s
 */
export function isURL(s) {
  return /^http[s]?:\/\/.*/.test(s)
}
​
/**
 * @param {string} path
 * @returns {Boolean}
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}
​
/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validUsername(str) {
  const valid_map = ['admin', 'editor']
  return valid_map.indexOf(str.trim()) >= 0
}
​
/**
 * 验证邮箱输入
 * @param {验证规则} rule
 * @param {验证的值} value
 * @param {回调函数} callback
 */
export function validPhoneOrEmail(rule, value, callback) {
  if (rule.required && !value) {
    return callback(new Error('请输入手机号/邮箱'));
  }
  if (value === '' || value === null) callback()
  if (phoneReg.test(value) || emailReg.test(value)) {
    callback()
  } else {
    callback(new Error('手机号/邮箱格式输入有误'))
  }
}
export function validPhone(rule, value, callback) {
  if (rule.required && !value) {
    return callback(new Error('请输入手机号码'));
  }
  if (value === '' || value === null) callback()
  if (phoneReg.test(value)) {
    callback()
  } else {
    callback(new Error('手机号格式输入有误'))
  }
}
export function validEmail(rule, value, callback) {
  if (rule.required && !value) {
    return callback(new Error('请输入邮箱'));
  }
  if (value === '' || value === null) callback()
  if (emailReg.test(value)) {
    callback()
  } else {
    callback(new Error('邮箱格式输入有误'))
  }
}
export function validIDCard(rule, value, callback) {
  if (rule.required && !value) {
    return callback(new Error('请输入身份证号码'));
  }
  if (value === '' || value === null) callback()
  if (idcardReg.test(value)) {
    callback()
  } else {
    callback(new Error('身份证号填写有误'))
  }
}
export function vaildRealName(rule, value, callback){
  if (rule.required && !value) {
    return callback(new Error('请输入真实姓名'));
  }
  if (value === '' || value === null) callback()
  if (nameReg.test(value)) {
    callback()
  } else {
    callback(new Error('真实姓名填写有误'))
  }
}
/*
验证密码
*/
export function validPwd(rule, value, callback) {
  if (rule.required && !value) {
    return callback(new Error('请输入密码(密码需大于8位,由数字、字母和特殊符号组成)'));
  }
  if (value === '' || value === null) callback();
  /* js正则校验密码,要求是8-16位 */
  // let rules = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/
  let rules = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/;
  if (rules.test(value)) {
    callback()
  } else {
    callback(new Error('密码由8位数字、字母和特殊符号组成!'))
  }
}
转载自:https://juejin.cn/post/7041096339085590535
评论
请登录