From 11f09906cb0084afe0065b3e9f4f75787bee3108 Mon Sep 17 00:00:00 2001 From: ln1778 <465410291@qq.com> Date: Fri, 6 Sep 2024 18:16:54 +0800 Subject: [PATCH] 22 --- packages/agDatePicker/src/index.vue | 44 ++++++++----- packages/agForm/index.js | 9 +++ packages/agForm/src/index.vue | 96 +++++++++++++++++++++++++++++ packages/agInput/src/index.vue | 9 +-- packages/index.js | 7 ++- src/App.vue | 17 ++++- 6 files changed, 156 insertions(+), 26 deletions(-) create mode 100644 packages/agForm/index.js create mode 100644 packages/agForm/src/index.vue diff --git a/packages/agDatePicker/src/index.vue b/packages/agDatePicker/src/index.vue index dbd09d8..6d2c352 100644 --- a/packages/agDatePicker/src/index.vue +++ b/packages/agDatePicker/src/index.vue @@ -6,6 +6,7 @@ v-model="dateArr" v-bind="attrs" v-on="Listeners" + :value="value" :type="datetype" @mouseenter.native="mousetrue = true" @mouseleave.native="mousetrue = false" @@ -28,7 +29,9 @@ export default { default: "date", }, value: { - default: null||[], + default:()=>{ + return null||[] + }, }, }, data() { @@ -59,9 +62,9 @@ export default { let config = {}; if (this.range) { config = { - "start-placeholder": "开始日期", - "end-placeholder": "结束日期", - "range-separator": "-", + "start-placeholder":this.$attrs.startplaceholder||"开始日期", + "end-placeholder":this.$attrs.endplaceholder|| "结束日期", + "range-separator":this.$attrs.rangeseparator||"-", "picker-options": { disabledDate(time) { return ( @@ -130,7 +133,7 @@ export default { } else { config = { align: "right", - placeholder: "选择日期", + placeholder: this.$attrs.placeholder||"选择日期", "picker-options": { disabledDate(time) { return time.getTime() > Date.now(); @@ -174,15 +177,20 @@ export default { }; }, // 所有父级事件 - Listeners() { + Listeners() { return Object.assign({}, this.$listeners, { input: (value) => { if (this.range) { - if (!isEmpty(value) && value.length === 2 && value[0] && value[1]) { - this.$emit("change", [ - `${value[0]} 00:00:00`, + if (!isEmpty(value) && value.length === 2 && value[0] && value[1]) { + if(this.showTime){ + this.$emit("change", value); + }else{ + this.$emit("change", [ + `${value[0]} 00:00:00`, `${value[1]} 23:59:59`, ]); + } + } else { this.$emit("change", []); } @@ -192,20 +200,26 @@ export default { }, }); }, - iconClass() { - + iconClass() { return this.mousetrue ? "ag-icon-prefix-hide" : "ag-icon-prefix-show"; }, }, + mounted() { + console.log(this.value,'this.value',this.$attrs); + if (Array.isArray(this.value)&&this.range){ + this.dateArr = [this.value[0] || "", this.value[1] || ""]; + } else { + this.dateArr = this.value; + } + }, watch: { value: { handler(newVal) { - if (Array.isArray(newVal)&&this.range){ - - const [date1, date2] = newVal.slice(0, 2); - this.dateArr = [date1 || "", date2 || ""]; + console.log(newVal,'datevalue'); + if (Array.isArray(newVal)&&this.range){ + this.dateArr = [newVal[0] || "", newVal[1] || ""]; } else { this.dateArr = newVal; } diff --git a/packages/agForm/index.js b/packages/agForm/index.js new file mode 100644 index 0000000..b7ab3fe --- /dev/null +++ b/packages/agForm/index.js @@ -0,0 +1,9 @@ +import agForm from './src' + +// 为组件提供 install 安装方法,供按需引入 +agForm.install = function (Vue) { + Vue.component(agForm.name, agForm) +} + +// 导出组件 +export default agForm; diff --git a/packages/agForm/src/index.vue b/packages/agForm/src/index.vue new file mode 100644 index 0000000..0efa287 --- /dev/null +++ b/packages/agForm/src/index.vue @@ -0,0 +1,96 @@ + + + + diff --git a/packages/agInput/src/index.vue b/packages/agInput/src/index.vue index bd05e53..741c806 100644 --- a/packages/agInput/src/index.vue +++ b/packages/agInput/src/index.vue @@ -23,14 +23,7 @@ export default { type: Boolean, default: false, }, - }, - - watch:{ - $attrs:function(val){ - console.log(val,'attrsattrs'); - }, - }, - + }, mounted(){ if(this.$refs.apinputref){ for(const key in this.$refs.apinputref){ diff --git a/packages/index.js b/packages/index.js index b95dbeb..ab59737 100644 --- a/packages/index.js +++ b/packages/index.js @@ -2,6 +2,7 @@ import agInput from './agInput/index'; import agSelect from './agSelect/index'; import agUpdate from './agUpload'; + import agForm from './agForm'; // 注册组件 @@ -9,7 +10,8 @@ const components = [ agInput, agSelect, - agUpdate + agUpdate, + agForm ] // 定义 install 方法,接收 Vue 作为参数(使用 use 注册插件,那么所有的组件都会被注册) @@ -33,5 +35,6 @@ // 以下是具体的组件列表 agInput, agSelect, - agUpdate + agUpdate, + agForm } \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index 4e50ae5..809a77a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -50,6 +50,9 @@
只能上传jpg/png文件,且不超过500kb
+ + +