zydx-plus 1.35.638 → 1.35.640

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.35.638",
+  "version": "1.35.640",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [

package/src/components/tipBox/index.js

@@ -1,3 +1,8 @@
+/**
+ * TipBox 提示弹窗组件入口文件
+ * 动态渲染提示弹窗，支持多种类型：文本提示(text)、图片(img)、单选框(radio)、复选框(checkbox)、输入表单(input)、日历选择(calender)等
+ */
+
 import { createVNode, render } from 'vue'
 import XtxConfirm from './src/main.vue'
 
@@ -8,12 +13,14 @@ render(divNode, document.body)
 const container = divNode.el
 
 // 导出函数可通过调用 Confirm() 函数动态创建 XtxConfirm 组件
+// 参数说明：type（弹窗类型）、title（标题）、promptContent（提示内容）、cancelShow（是否显示取消按钮）、inputArr（输入项数组）、countdown（倒计时）等
 const Confirm = ({ className, type, url ,title,radioArr,checkboxArr,submitText,cancelText,closeShow, promptContent, middle, cancelShow, inputArr, countdown, components, slotProps }) => {
     // 返回 Promise 对象
     return new Promise((resolve, reject) => {
         // 2. 点击确认按钮，触发resolve同时销毁组件
         const submit = () => {
             let val = []
+            // 收集输入框类型的值
             if(type === 'input') {
                 for(let i=0; i< inputArr.length; i++) {
                     if(inputArr[i].type === 'select') {
@@ -26,6 +33,7 @@ const Confirm = ({ className, type, url ,title,radioArr,checkboxArr,submitText,c
                     }
                 }
             }
+            // 收集单选项的值
             if(type === 'radio') {
                 for(let i=0; i< radioArr.length; i++) {
                     if(radioArr[i].checked) {
@@ -33,6 +41,7 @@ const Confirm = ({ className, type, url ,title,radioArr,checkboxArr,submitText,c
                     }
                 }
             }
+            // 收集多选项的值
             if(type === 'checkbox') {
                 for(let i=0; i< checkboxArr.length; i++) {
                     if(checkboxArr[i].checked) {
@@ -48,6 +57,7 @@ const Confirm = ({ className, type, url ,title,radioArr,checkboxArr,submitText,c
             render(null, container)
             reject('点击取消')
         }
+        // 关闭弹窗
         const close = () => {
             render(null, container)
         }

package/src/components/tipBox/src/main.vue

@@ -1,5 +1,12 @@
+/**
+ * TipBox 提示弹窗组件主文件
+ * 致用大学 - 支持多种弹窗类型：文本提示、图片展示、单选框、复选框、表单输入、日历选择、年份选择、文件上传、封面图等
+ * 通过入口文件动态创建该组件实现函数式调用弹窗
+ */
+
 <template>
   <div class="hello">
+    <!-- 弹窗遮罩层 -->
     <div class="tip-popupWindowSearch">
       <div class="tip-box" :class="className">
         <img v-if="closeShow" @click="close" class="close"
@@ -10,13 +17,16 @@
         </div>
         <div class="tip-boxContent" ref="tip-boxContent" :style="overflowShow?'overflow-y: scroll':''">
           <div class="tap-p" ref="tapP">
+            <!-- 插槽类型：渲染自定义组件 -->
             <div v-if="type === 'slot'">
               <component :is="components" v-bind="slotProps"></component>
             </div>
+            <!-- 文本类型提示内容 -->
             <div class="tip-title2" ref="tipTitle" v-if="type === 'text'"
                  :style="{'text-align': (middles)? 'center': 'left', 'text-indent': indent? '2em': '0' }">
               {{ promptContent }} {{ countdown === 0 ? '' : `(${timeo}s)` }}
             </div>
+            <!-- 图片类型提示内容 -->
             <div class="tip-img" v-if="type === 'img'">
               <img :src="url" alt=""/>
             </div>
@@ -41,9 +51,11 @@
               </div>
             </div>
             <div class="tip-img" v-if="type === 'input'">
-              <div class="tip-input" v-for="(item,index) in inputArr" :key="index">
+              <div class="tip-input" v-for="(item,index) in inputArr" :key="index"
+                   ref="inputRefs"
+                   :class="{'is-error': errorIndex.includes(index), 'shake': errorIndex.includes(index) && shaking}">
                 <span v-if="item.name"><em>{{ item.name.replace(/：/g, "").replace(/:/g, "") }}</em><b>:</b><i
-                    v-if="item.required">*</i></span>
+                    v-if="item.required || required">*</i></span>
                 <div v-if="item.type === 'file'" class="file-cont">
                   <em>{{ fileName }}</em>
                   <label>
@@ -56,17 +68,17 @@
                     <input type="number" @keypress="isNumberKey($event,index)"
                            :placeholder="item.placeholder"
                            :maxlength="item.maxlength"
-                           v-model="item.value" :disabled="item.disabled"/>
+                           v-model="item.value" :disabled="item.disabled" @input="clearError(index)"/>
                   </div>
                   <input v-else type="text" :placeholder="item.placeholder" :maxlength="item.maxlength"
-                         v-model="item.value" :disabled="item.disabled"/>
+                         v-model="item.value" :disabled="item.disabled" @input="clearError(index)"/>
                   <b>{{ item.tail }}</b>
                 </div>
                 <div class="input-name" v-if="item.type === 'query'">
                   <div class="number-input">
                     <input type="text"
                            :placeholder="item.placeholder"
-                           v-model="item.value" @input="queryDrop($event,item)" />
+                           v-model="item.value" @input="queryDrop($event,item); clearError(index)" />
                   </div>
                   <div class="drop-down" v-if="dropData.length > 0">
                     <p @click="dropTap(item,item3)" v-for="item3 in dropData">{{ item3[item.column] }}</p>
@@ -86,7 +98,7 @@
                   </div>
                 </div>
                 <div v-if="item.type === 'select'" style="display: inline-block;width: 300px;">
-                  <Select :options="item.option" :readonly="item.disabled" @select="item.select"
+                  <Select :options="item.option" :readonly="item.disabled" @select="(...args) => { item.select && item.select(...args); clearError(index) }"
                           v-model:value="item.selectValue" :placeholder="item.placeholder"></Select>
                 </div>
                 <div class="cal" ref="calenderRefId" v-if="item.type === 'calender'">
@@ -135,8 +147,9 @@
             </div>
           </div>
         </div>
+        <!-- 按钮区域：确定/取消 -->
         <div class="tip-btnBox">
-          <div @click="submit" v-html="submitText"></div>
+          <div @click="submitTap" v-html="submitText"></div>
           <div v-if="cancelShow" @click="cancel" v-html="cancelText"></div>
         </div>
       </div>
@@ -145,10 +158,12 @@
 </template>
 
 <script>
+// 引入子组件
 import Select from '../../select/src/select.vue'
 import Calendar from '../../calendar/src/Calendar'
 import Year from '../../year/src/year'
 import zydxTextarea from '../../textarea'
+// 定时器和实例引用
 let timeStop = null
 let _that = null
 export default {
@@ -156,14 +171,16 @@ export default {
   components: {Select, Calendar, Year,zydxTextarea},
   data() {
     return {
-      tip: false,
-      tipYear: false,
-      fileName: '',
-      middles: this.middle,
-      indent: false,
-      overflowShow: false,
-      timeo: 0,
-      dropData: []
+      tip: false,        // 日历显示状态
+      tipYear: false,     // 年份选择显示状态
+      fileName: '',       // 文件名
+      middles: this.middle, // 文字居中
+      indent: false,      // 文字缩进
+      overflowShow: false, // 是否显示滚动条
+      timeo: 0,           // 倒计时剩余秒数
+      dropData: [],        // 下拉数据
+      errorIndex: [],      // 必填校验未通过的项索引集合
+      shaking: false       // 是否触发抖动动画
     }
   },
   props: {
@@ -207,6 +224,10 @@ export default {
       type: Array,
       default: []
     },
+    required: { // 是否开启必填校验：为 true 时所有输入项均视为必填；单项也可通过 item.required 单独控制
+      type: Boolean,
+      default: false
+    },
     radioArr: { // 单选数据
       type: Array,
       default: []
@@ -251,25 +272,85 @@ export default {
   mounted() {
     _that = this
     this.$nextTick(() => {
+      // 文本内容过长时取消居中，启用缩进
       if (this.type === 'text') {
         if (this.$refs.tapP.offsetHeight > 25) {
           this.middles = false
           this.indent = true
         }
       }
+      // 启动倒计时
       if (this.countdown > 0) {
         this.timeo = this.countdown
         this.countdownFun()
       }
+      // 内容超过600px显示滚动条
       this.overflowShow = this.$refs['tip-boxContent'].scrollHeight>600
     })
   },
   beforeUnmount() {
-    clearInterval(timeStop)
+    clearInterval(timeStop) // 清理倒计时定时器
   },
   methods: {
+    // 点击确认：先校验必填项，全部通过才执行外部 submit
+    submitTap() {
+      if (!this.validateRequired()) return
+      this.submit()
+    },
+    // 判断某项是否必填（组件级 required 或单项 item.required）
+    isRequired(item) {
+      return !!(item.required || this.required)
+    },
+    // 判断某项的值是否为空（不同类型取值字段不同）
+    isItemEmpty(item) {
+      let val
+      switch (item.type) {
+        case 'select': val = item.selectValue; break
+        case 'cover': val = item.url; break
+        default: val = item.value
+      }
+      return val === undefined || val === null || val === '' ||
+        (Array.isArray(val) && val.length === 0)
+    },
+    // 校验必填项，返回是否通过；不通过时记录错误项并触发抖动
+    validateRequired() {
+      const errors = []
+      if (this.type === 'input') {
+        this.inputArr.forEach((item, index) => {
+          if (this.isRequired(item) && this.isItemEmpty(item)) {
+            errors.push(index)
+          }
+        })
+      }
+      this.errorIndex = errors
+      if (errors.length > 0) {
+        // 先移除抖动类，强制 reflow 后再加回，确保每次点击都能重新播放动画
+        this.shaking = false
+        this.$nextTick(() => {
+          // 读取布局属性触发强制重排，使浏览器提交"移除 shake"的中间态，
+          // 否则 nextTick 微任务内移除又加回，动画不会重新触发
+          const refs = this.$refs.inputRefs
+          if (Array.isArray(refs)) refs.forEach(el => el && el.offsetWidth)
+          else if (refs) refs.offsetWidth
+          this.shaking = true
+        })
+        return false
+      }
+      this.shaking = false
+      return true
+    },
+    // 清空指定索引的错误状态（用户开始输入时调用）
+    clearError(index) {
+      const i = this.errorIndex.indexOf(index)
+      if (i > -1) this.errorIndex.splice(i, 1)
+    },
+    // 按项引用清空错误状态
+    clearErrorByItem(item) {
+      const index = this.inputArr.indexOf(item)
+      if (index > -1) this.clearError(index)
+    },
+    // 封面上传：动态创建input选择图片
     uploadImg(index){
-      let that = this
       const inputUpload = document.createElement('input')
       inputUpload.type = 'file'
       inputUpload.multiple = false
@@ -279,6 +360,7 @@ export default {
         that.inputArr[index].value = files[0]
         that.inputArr[index].url = URL.createObjectURL(files[0])
         console.log('inputArr',that.inputArr[index])
+        that.clearError(index)
         that.$forceUpdate()
       })
       inputUpload.click()
@@ -317,6 +399,7 @@ export default {
       let file = event.target.files[0]
       this.fileName = file.name
       this.inputArr[index].value = file
+      this.clearError(index)
     },
     isNumberKey(evt, index) {
       const charCode = (evt.which) ? evt.which : evt.keyCode;
@@ -344,6 +427,7 @@ export default {
     },
     radioTao2(v,n) {
       v.value = n.value
+      this.clearErrorByItem(v)
     },
     radioTao(index) {
       this.radioArr.forEach(item => {
@@ -357,6 +441,7 @@ export default {
     confirmYear(e, data) {
       data.value = e
       this.tipYear = false
+      this.clearErrorByItem(data)
     },
     cancelYear() {
       this.tipYear = false
@@ -369,6 +454,7 @@ export default {
       console.log('e',data)
       data.value = e.start
       this.tip = false
+      this.clearErrorByItem(data)
     },
     emptyCal(e,data) {
       data.value = ''
@@ -436,6 +522,33 @@ export default {
   max-height: 200px !important;
   overflow-y: scroll !important;
 }
+/* 必填项未填写：输入框/选择框变红 */
+.tip-input.is-error .input-name > input,
+.tip-input.is-error .cal > input,
+.tip-input.is-error .number-input > input,
+.tip-input.is-error :deep(.select-css),
+.tip-input.is-error .file-cont > em,
+.tip-input.is-error .cover-img {
+  border-color: #f56c6c !important;
+}
+.tip-input.is-error .input-radio {
+  outline: 1px solid #f56c6c;
+  outline-offset: 2px;
+  border-radius: 3px;
+}
+/* 必填项校验失败时的轻微抖动动画 */
+@keyframes tipShake {
+  0%, 100% { transform: translateX(0); }
+  15% { transform: translateX(-6px); }
+  30% { transform: translateX(6px); }
+  45% { transform: translateX(-5px); }
+  60% { transform: translateX(5px); }
+  75% { transform: translateX(-3px); }
+  90% { transform: translateX(3px); }
+}
+.tip-input.shake {
+  animation: tipShake 0.4s ease;
+}
 </style>
 
 <style scoped src="./zydxStyle.css">

package/src/components/tipBox/src/zydxStyle.css

@@ -28,7 +28,7 @@
     cursor: pointer;
 }
 .tip-box {
-    width: 600px;
+    width: 610px;
     padding: 60px 100px 40px 100px;
     background-color: white;
     border-radius: 5px;
@@ -42,6 +42,8 @@
 
 .tip-boxContent {
     max-height: 600px;
+    padding-left: 10px;
+    box-sizing: border-box;
 }
 
 .tip-boxContent:hover {

package/src/index.js

@@ -87,7 +87,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.35.638',
+    version: '1.35.640',
     install,
     Calendar,
     Message,