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) }
<html><style>
h2.page-header {
font-weight: 600; font-size: 2.4rem; position: relative; padding: 10px 0 10px 16px; margin-top: 3rem !important; margin-bottom: 2rem !important;
}
h2:before {
content: ""; position: absolute; top: 0; left: 0; width: 6px; height: 100%; background: #ccc;
}
div#disqus__thread {
width: 100% !important;
}
</style></html>