README

包

通过 composer 安装包

composer require jensramakers/laravel-input-components

发布国家翻译

php artisan vendor:publish --provider="Jensramakers\LaravelInputComponents\LaravelInputComponentsServiceProvider"

将所有导入放在 APP.JS 中，并将其他代码放在不同的文件中

要更改颜色，如果输入字段使用 input_color 变量，请在 tailwind.config.js 中更改

module.exports = {
    content: [
        './vendor/jensramakers/**/*.blade.php',
    ],
    theme: {
        extend: {
            colors: {
                "input_color": "yellow",
            },
        },
    },
};

支持深色模式

例如，在加载组件（如 select2）之后，将此代码添加到您的javascript中

if (document.documentElement.classList.contains('dark')) {
    try {setSelectDarkMode()} catch ($e) {}
    try {setSelectDarkModeCountry()} catch ($e) {}
    try {setSelectDarkModePhone()} catch ($e) {}
    try {setSelectDarkModeSelectArray()} catch ($e) {}
    try {setSelectDarkModeSelectModel()} catch ($e) {}
    try {setSelectDarkModeSelectMultiple()} catch ($e) {}
}

安装 jQuery

npm i jquery

WEBPACK

window.$ = window.jQuery = require('jquery');

VITE

import $ from 'jquery';
window.$ = $;

flowbite | 帮助弹出

要使用帮助信息弹出，请安装 flowbite
https://flowbite.com/docs/getting-started/quickstart/

select2 | 下拉菜单

要最佳使用选择器和标签输入，请安装 select2

npm i select2

在javascript中导入

require('select2');

在css中导入

@import '~select2/dist/css/select2';

并添加此javascript以使标签和 select2 成为可能

$(".tag-multiple-creation-delimeter-comma-space").select2({
    tags: true,
    tokenSeparators: [',', ' ']
})
$(".option-multiple").select2()

matchStart = function(params, data) {
    if ($.trim(params.term) === '') {
        return data;
    }
    if (typeof data.text === 'undefined') {
        return null;
    }
    if (data.text.toUpperCase().indexOf(params.term.toUpperCase()) > -1) {
        return $.extend({}, data, true);
    }

    return null;
}

$(".option-search").select2({
    matcher: matchStart
});

Spatie-tags | 标签输入

标签输入只接受此包中的标签
https://spatie.be/docs/laravel-tags/v4/installation-and-setup

国家选择器

对于国家输入安装

npm i country-select-js

导入javascript

require('country-select-js');

$(".country-input").countrySelect({
    defaultCountry: 'nl',
    preferredCountries: ['nl', 'be', 'de', 'lu'],
    responsiveDropdown: false,
});

导入css

@import "~country-select-js/build/css/countrySelect.min.css";

电话输入

对于电话输入安装 npm 包

npm i intl-tel-input

并使用此段javascript代码！将此放入独立脚本文件！

import intlTelInput from 'intl-tel-input';
require('intl-tel-input/build/js/utils')

let iti = null;
const initializePhoneNumberInput = function () {
    const input = document.querySelector("#phone"),
        errorMsg = document.querySelector("#error-msg"),
        validMsg = document.querySelector("#valid-msg");

    if (input) {
        // here, the index maps to the error code returned from getValidationError - see readme
        const errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];

        // initialise plugin
        iti = intlTelInput(input, {
            preferredCountries: ['nl', 'be', 'de', 'lu'],
            hiddenInput: "full",
            formatOnDisplay: false,
        });

        iti.setCountry($('#defaultPhoneCountryRegion').val().toLowerCase())

        const reset = function() {
            let el = document.getElementById('phone_number_region');
                el.value = iti.getSelectedCountryData().iso2;
                el.dispatchEvent(new Event('input'));

            input.classList.remove("error");
            errorMsg.innerHTML = "";
            errorMsg.classList.add("hidden");
            validMsg.classList.add("hidden");
        };

        // on blur: validate
        input.addEventListener('blur', function() {
            reset();
            if (input.value.trim()) {
                if (iti.isValidNumber()) {
                    validMsg.classList.remove("hidden");
                } else {
                    input.classList.add("error");
                    let errorCode = iti.getValidationError();
                    errorMsg.innerHTML = errorMap[errorCode];
                    errorMsg.classList.remove("hidden");
                }
            }
        });

        // on keyup / change flag: reset
        input.addEventListener('change', reset);
        input.addEventListener('keyup', reset);
        input.addEventListener("countrychange", reset);
    }
}
initializePhoneNumberInput();

window.addEventListener('reinitialize', () => {
    initializePhoneNumberInput();
});

导入css

@import "~intl-tel-input";

重要：id "phone" 是保留的
重要：当前页面上的多个电话输入将不会工作

CKEditor

将以下两个文件直接放在 public 文件夹中，它们已经被压缩

为 CKEditor 添加此 JS 文件
https://drive.google.com/file/d/1ICjjAnDuqqJl7PwrdVAMcFuzH5TrhqJy/view?usp=share_link
为 CKEditor 添加此 CSS 文件
https://drive.google.com/file/d/14zMeVnjHwLLGBPigJuOXtT1XN8RDMZNt/view?usp=share_link

以及此段代码

document.querySelectorAll('.editor').forEach(function (item) {
    ClassicEditor.create(item, {
        licenseKey: '',
    })
    .then(newEditor => {
    newEditor.editing.view.change( writer => {
        writer.setStyle('min-width', '1000px', newEditor.editing.view.document.getRoot());
    } );
    })
    .catch(error => {
        console.error('Error CKEditor');
        console.error(error);
    });
})

使用方法

以下是一些这些输入的使用示例

<x-input-text name="name" label="name" help="jkl;adjfkl" default="jklsdjfdjk" :required="false" />
<x-input-checkbox name="checkbox" label="checkbox" help="jkl;adjfkl" :default="true" :required="false" />
<x-input-select-multiple name="multicordde" label="select multiple model" :options="Product::all()" :default="Product::whereIn('id', [5,2])->get()" :required="false" />
<x-input-select-multiple name="multicore" label="select multipelele array" :options="['jksdf',234,23]" :default="[0,2]" :required="false" />
<x-input-select-array name="selct_array_input" label="select array" :options="['jksdf',234,23]" :default="1" :required="false" />
<x-input-select-model name="laptop" label="laptop" option-label="name" :options="Product::all()" :default="11" :required="false" />
<x-input-textarea name="customtextarea" label="kald" :required="false" />
<x-input-tags name="tags" label="tags" :options="\Spatie\Tags\Tag::all()" :default="\Spatie\Tags\Tag::where('id', 1)->get()" option-label="name" :required="false" />
<x-input-tags name="laptops" label="tags" :options="\Spatie\Tags\Tag::all()" :default="\Spatie\Tags\Tag::where('id', 2)->get()" option-label="name" :required="false" />
<x-input-country name="country" label="land" :required="false" />
<x-input-country name="country2" label="land" default="Croatia (Hrvatska)" :required="false" />
<x-input-phone name="telefoonnummer" label="telefooooonnummer" />
<x-input-ckeditor name="bescrijving" label="descriptie" />
<x-input-ckeditor name="intro" label="intro" :required="false" />

jensramakers / laravel-input-components

维护者

详细信息