@kuanhuayu/custom-components

常用 組件

Install

npm install @kuanhuayu/custom-components

環境

Vue 3.x

物件清單

vkeyboard 虛擬鍵盤
alert 提示框
confirm 詢問框
wait 等待框
dialog 對話框
selectpro 下拉式組合框
calendar 日期時間選擇物件
textareapro 多行文字框

使用方式

import { vkeyboard,alert,... } from "@kuanhuayu/custom-components"

組件說明

vkeyboard

<vkeyboard v-model:show="vkshow" :value="vkvalue" :label="vklabel" @keyChange="vkChange" @close="vkClose"></vkeyboard>

date:{
	vkshow:false or true, //是否顯示鍵盤
	vkvalue: "", //值
	vklabel: "Input" 輸入框前標籤內容
},
methods:{
	//輸入框變更事件
	vkChange(val){
		val //值
		......
	},
	//隱藏鍵盤事件
	vkClose(){
		......
	}
}

alert

<alert :options="opts"></alert>

data:{
	opts:{
		width: "300px", //寬度
		height: "200px", //高度
		title: "通知", //標頭
		html: "", //內容
		show:false //是否顯示
	}
}

confirmOpts

<confirm :options="opts"></confirm>

data:{
	opts:{
		width: "300px", //寬度
		height: "200px", //高度
		title: "通知", //標頭
		html: "", //內容
		show:false, //是否顯示
		button: [ //按鈕設定
			{ text: "是", value: true },
			{ text: "否", value: false },
		],
		result: false,返回值
	}
}

dialog

import {dialog as dialogpanel} from "@kuanhuayu/custom-components";

<dialogpanel :options="opts"></dialogpanel>

data:{
	opts:{
		width: "300px", //寬度
		height: "200px", //高度
		title: "通知", //標頭
		html: "", //內容
		show:false, //是否顯示
		hasDrag: false, //是否可以拖曳
		html: false or Text, //文字內容
		iframeSrc: false or Url,//使用iframe顯示
		component: false or ()=>import(url), //使用組件
		param: {},//傳遞到組件的參數,
		headCloseEvent: false or function(opts) //標頭關閉鈕事件,
	}
}

v-model:returnValue //組件回傳值

showAfter(opts,$el){...} //顯示後事件
closeAfter(opts){...} //關閉後事件

wait

<wait :options="opts"></wait>

data:{
	opts:{
		width: "300px", //寬度
		height: "200px", //高度
		title: "通知", //標頭
		html: "處理中，請稍候！", //內容
		show:false //是否顯示
	}
}

showFinished(){...} //顯示完成事件

selectpro

<selectpro v-model="result" :options="opts" :settings="sets"></selectpro>

data:{
	result:[
		項目值
	]
	opts:[
		{
			value: "", //項目值
			name: "",  //項目說明
			subname: "", //輔助說明
		}
	],
	sets:{
		isMultiple: false, //是否複選
		isFilter: true, //可否過濾項目
		menu: {
			height: 250, //下拉選單高度
		},
		isTools: false, //是否顯示工具列
		toolbar: [
			{
				hasText: true, 是否顯示工具說明
				text: "全選", //工具說明
				class: "select_pro_allselect",
				show: true, //是否顯示該工具
				click: () => { //工具事件
					this.items.forEach((v) => {
						v.selected = true;
					});
				},
			},
			{
				hasText: true,
				text: "取消",
				class: "select_pro_allunselect",
				show: true,
				click: () => {
					this.items.forEach((v) => {
						v.selected = false;
					});
				},
			},
			{
				hasText: true,
				text: "反選",
				class: "select_pro_unselect",
				show: true,
				click: () => {
					this.items.forEach((v) => {
						v.selected = !v.selected;
					});
				},
			},
			{
				hasText: true,
				text: "關閉",
				class: "select_pro_close",
				show: true,
				click: () => {
					this.isMenudown = false;
				},
			},
	}
}

calendar

<calendar v-model="value" :setMode="selMode" :markFunc="markFunc" :customMarks="customMarks" :format="format" :type="type" :sep="sep" :class="myclass" :size="size"></calendar>

selMode: "single" 單選 or "multiple" 複選 or "range" 範圍
markFunc: 日期遮罩函數
	year,month）=>{
		return Promise.resolve({
					"yyyy-mm-dd":{
						type:0 or 1, 類別
						txt: "", 日期說明
						type_desc:"休假" or "工作" 類別說明
					}
		});
	}
customMarks: 日期遮罩陣列
	[
		{
			date:"yyyy-mm-dd"
			type:0 or 1, 類別
			txt: "", 日期說明
			type_desc:"休假" or "工作" 類別說明
		}
	]
format: "YYYY-MM-DD hh:i:ss" 日期時間格式
type: "date" or "datetime" or "time"
sep: "-" 年月日分隔符號
class: CSS Class
size: {
	width: 460, //日期選單寬度
},

calendar

在Components使用時需在main.js中加入

import { createApp } from 'vue'
import App from './App.vue'
import VXETable from 'vxe-table'
import 'xe-utils'
import 'vxe-table/lib/style.css'

createApp(App).use(VXETable).mount('#app')