iice-vue v1.0.15

iice-vue

Vue components

Install

npm i iice-vue

iice-dialogsuccess iice-dialogconfirm iice-dialogwarning iice-fileselector iice-inputsuggest iice-multiselector iice-pagination iice-dropdownsearch iice-tagsinput iice-textarearows iice-treeview iice-treedropdown

iice-dialogsuccess

Vue

import { iice_dialogsuccess } from 'iice-vue'

Props

v-model: { type: Boolean, default: false } ** หากเป็น true แสดง dialog 3 วินาที หากเป็น false ซ่อน dialog

message: { type: String, default: "Saved successfully" } ** ข้อความสำหรับแสดงใน dialog

iice-dialogconfirm

Vue

import { iice_dialogconfirm } from 'iice-vue'

Props

v-model: { type: Boolean, default: false } ** หากเป็น true แสดง dialog หากเป็น false ซ่อน dialog

message: { type: String, default: "" } ** ข้อความสำหรับแสดงใน dialog

Events

confirm ** กดปุ่มยืนยัน

iice-dialogwarning

Vue

import { iice_dialogwarning } from 'iice-vue'

Props

v-model: { type: Boolean, default: false } ** หากเป็น true แสดง dialog หากเป็น false ซ่อน dialog

message: { type: String, default: "" } ** ข้อความสำหรับแสดงใน dialog

iice-fileselector

Vue

import { iice_fileselector } from 'iice-vue'

Props

v-model: { type: FileList, default: () => [] }, ** ไฟล์ทั้งหมด

caption: { type: String, default: "เลือกไฟล์" }, ** ข้อความ

accept: { type: String, default: "" }, * ประเภทไฟล์ เช่น video/, image/png, image/jpeg

multiple: { type: Boolean, default: false }, ** เลือกได้หลายไฟล์หรือไม่

maxsize: { type: Number, default: 0 } ** ขนาดไฟล์สูงสุด

iice-inputsuggest

Vue

import { iice_inputsuggest } from 'iice-vue'

Props

min: { type: Number, min: 1 }, ** จำนวนตัวอักษรน้อยที่สุด

max: { type: Number, default: 200 }, ** จำนวนตัวอักษรมากที่สุด

placeholder: { type: String, Number }, ** คำแนะนำ

list: { type: Array, default: () => [] }, ** รายการคำแนะนำ

v-model: { type: String, Number, default: "" }, ** คำที่ได้จากการคีย์คำใหม่หรือเลือกจากรายการแนะนำ

iice-multiselector

Vue

import { iice_multiselector } from 'iice-vue'

Props

v-model: { type: Array, default: () => [] }, ** ค่าของทุกรายการที่เลือก

sourceList: { type: Array, default: () => [] }, ** รายการที่เลือกได้ อยู่ในรูปแบบ { value: "", text: "" }

valueField: { type: String, required: true }, ** ชื่อฟิลล์สำหรับระบุค่า

displayField: { type: String, required: true } ** ชื่อฟิลล์สำหรับแสดงผล

iice-pagination

Vue

import { iice_pagination } from 'iice-vue'

Props

v-model: { type: Number, default: 1 }, ** เลขหน้า

totalPage: { type: Number, default: 1 }, ** จำนวนหน้าทั้งหมด

showPage: { type: Number, default: 10 } ** จำนวนหน้าที่แสดงตัวเลข หน้ารอบข้างแสดงเป็น "..."

iice-dropdownsearch

Vue

import { iice_dropdownsearch } from 'iice-vue'

Props

v-model: { type: String, default: "" }, ** ค่าของทุกรายการที่เลือก

sourceList: { type: Array, default: () => [] }, ** รายการที่เลือกได้ อยู่ในรูปแบบ { value: "", text: "" }

valueField: { type: String, required: true }, ** ชื่อฟิลล์สำหรับระบุค่า

displayField: { type: String, required: true } ** ชื่อฟิลล์สำหรับแสดงผล

iice-tagsinput

Vue

import { iice_tagsinput } from 'iice-vue'

Props

min: { type: Number, min: 1 }, ** จำนวนตัวอักษรน้อยที่สุด

max: { type: Number, default: 200 }, ** จำนวนตัวอักษรมากที่สุด

placeholder: { type: String, Number }, ** คำแนะนำ

list: { type: Array, default: () => [] }, ** รายการคำแนะนำ

v-model: { type: Array, default: () => [] }, ** คำที่ได้จากการคีย์คำใหม่หรือเลือกจากรายการแนะนำ

iice-textarearows

Vue

import { iice_textarearows } from 'iice-vue'

Props

v-model: { type: String, default: "", }, ** ค่าของ input

rows: { type: Number, String, default: 3 } ** จำนวนแถวเริ่มต้น

Note

กรณีที่ textarearows ไม่ได้แสดงทันทีเช่น อยู่ในแท็บที่ 2 ตอนเลือกแท็บที่ 2 ให้ใส่โค๊ดตามนี้ const customEvent = new Event("resize", { "bubbles": true, "cancelable": false }); document.dispatchEvent(customEvent);

iice-treeview

Vue

import { iice_treeview } from 'iice-vue'

Props

sourceList: { type: Array, default: () => [] }, ** รายการที่เลือกได้ อยู่ในรูปแบบ { label: "", value: "", expand: false, checked: 0, children: [] }

Events

checkChange ส่งค่ารายการที่เลือกเป็น Array of String.

iice-treedropdown

Vue

import { iice_treedropdown } from 'iice-vue'

Props

sourceList: { type: Array, default: () => [] }, ** รายการที่เลือกได้ อยู่ในรูปแบบ { label: "", value: "", expand: false, checked: 0, children: [] }

Events

valueChange ส่งค่ารายการที่เลือกเป็น Array of String.