vuejs:vue3:form_utils

Vue.js 3.x Form 用の JS ライブラリ

FormUtils.js
export function appendScript(src, integrity, crossorigin, onLoad) {
  const el = document.createElement('script');
  el.src = src;
  if (integrity)   el.integrity   = integrity;
  if (crossorigin) el.crossorigin = crossorigin;
  el.addEventListener('load', onLoad, {once: true});
  document.body.appendChild(el);
}
 
export function appendCss(URL) {
  const el = document.createElement('link');
  el.href = URL;
  el.rel = 'stylesheet';
  el.type = 'text/css';
  document.getElementsByTagName('head')[0].appendChild(el);
}
 
/**
 * エラーがある場合、エラークラスをマージしたクラスを返す.
 * @param {array} errors - エラーメッセージ配列.
 * @param {array} classes - その他のクラス文字列の配列.
 * @param {array} errorClass - エラー時に指定するクラス.
 * @return {string} エラークラスをマージしたクラス文字列.
 */
export const getWrapClass = (errors, classes, errorClass) => {
  let _classes = []
  if (errors.length) {
    classes.push(errorClass)
    _classes = classes
  } else if (classes instanceof Array === true) {
    _classes = classes.filter((c) => {
      return c !== errorClass
    })
  }
  return _classes.join(' ')
}
 
/**
 * 選択肢の形式を汎用化する.
 * @param {array} options - 選択肢の配列.
 * @return {string} 汎用化した選択肢を返す.
 */
export const generalizeOptions = (options) => {
  return options.map(opt => {
    if (opt instanceof Object) {
      return opt
    } else {
      return {title: opt, value: opt}
    }
  })
}
 
/**
 * ユニーク文字列を返す.
 * @return {string}
 */
export const getUniqStr = () => {
  return new Date().getTime().toString(16) + Math.floor(100000 * Math.random()).toString(16)
}

  • vuejs/vue3/form_utils.txt
  • 最終更新: 2021/02/24 22:32
  • by admin