@kuanhuayu/custom-components v0.2.54
常用 組件
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')
9 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago