From b74f63375e9a4e9d64beca0292dd9b89689f4e43 Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Wed, 18 Jun 2025 17:29:18 +0800
Subject: [PATCH 1/3] =?UTF-8?q?input=E7=BB=84=E4=BB=B6=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=BF=85=E8=BE=93=E6=A0=87=E8=AF=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/GuipInput.vue |  4 ++--
 src/views/elementGroups.vue  | 14 ++++++++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/GuipInput.vue b/src/components/GuipInput.vue
index 404ecce..3907c3f 100644
--- a/src/components/GuipInput.vue
+++ b/src/components/GuipInput.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-form-item :style="{ height: height, ...styleObject }"
+  <el-form-item :style="{ height: height, ...styleObject }" :required="required"
     :class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, 'form-item']" :label="label"
     :prop="prop" :rules="rules">
     <p v-if="desc" class="desc_right">{{ desc }}</p>
@@ -36,7 +36,7 @@
 <script>
 export default {
   name: 'GuipInput',
-  props: ['value', 'styleObject', 'disabled', 'defaultValue', 'placeholder',
+  props: ['value', 'styleObject', 'disabled', 'defaultValue', 'placeholder','required',
     'maxlength', 'minLength', 'clear', 'width', 'height', 'showWordLimit',
     'label', 'type', 'prop', 'rules', 'column', 'addClass', 'desc', 'unit'],
   data() {
diff --git a/src/views/elementGroups.vue b/src/views/elementGroups.vue
index f0bd2f3..a5bcf4f 100644
--- a/src/views/elementGroups.vue
+++ b/src/views/elementGroups.vue
@@ -11,7 +11,7 @@
                 </div>
                 <div class="ele-item">
                     <label for="">下拉框：</label>
-                    <GuipSelect width="600px" v-model="form.card" label="卡片" prop="card" :options="options"
+                    <GuipSelect width="600px" v-model="form.card" label="卡片" :default-value="form.card" prop="card" :options="options"  valueKey="id1"  labelKey="id2"
                         defaultValue="选项1" />
                 </div>
                 <div>
@@ -263,7 +263,7 @@
 
                 <div style="width: 800px;height: 150px;">
                     <h3>表单上下布局 (宽度 510 388 用的最多 已有这2种宽度类名设置)</h3>
-                    <GuipInput ref="GuipInput" column="column" addClass="w510" label="age" desc="这是是右侧文案"
+                    <GuipInput ref="GuipInput" column="column" addClass="w510" required label="age" desc="这是是右侧文案"
                         v-model="form.age" prop="age" placeholder="这是自定义默认提示语" />
                 </div>
 
@@ -640,21 +640,31 @@ export default {
             options: [{
                 value: '选项1',
                 label1: '黄金hhhhhh',
+                id1:'1',
+                id2:'啊11哈哈',
                 label: '黄金糕'
             }, {
                 value: '选项2',
+                id1:'12',
+                id2:'啊22哈哈',
                 label1: '双皮奶hhhhhhhhh',
                 label: '双皮奶'
             }, {
                 value: '选项3',
+                id1:'13',
+                id2:'啊33哈哈',
                 label1: '蚵仔煎hhhhhhhhh',
                 label: '蚵仔煎'
             }, {
                 value: '选项4',
+                id1:'14',
+                id2:'啊444哈哈',
                 label1: '双皮奶hhhhhhhhh',
                 label: '龙须面'
             }, {
                 value: '选项5',
+                id1:'155',
+                id2:'啊55哈哈',
                 label1: '双皮奶hhhhhhhhh',
                 label: '北京烤鸭'
             }],

From 9b495393cdce6583791959bd8062cd18891d21a1 Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Wed, 18 Jun 2025 17:41:10 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=BE=93=E5=85=A5?=
 =?UTF-8?q?=E6=A1=86=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/GuipInput.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/GuipInput.vue b/src/components/GuipInput.vue
index 3907c3f..adbad6a 100644
--- a/src/components/GuipInput.vue
+++ b/src/components/GuipInput.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-form-item :style="{ height: height, ...styleObject }" :required="required"
+  <el-form-item :style="{ ...styleObject }" :required="required"
     :class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, 'form-item']" :label="label"
     :prop="prop" :rules="rules">
     <p v-if="desc" class="desc_right">{{ desc }}</p>

From 8c33b2b2f3bf20f385c001c56f861831e8ce4510 Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Thu, 19 Jun 2025 11:42:43 +0800
Subject: [PATCH 3/3] =?UTF-8?q?radio=E3=80=81select=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=BF=85=E8=BE=93=E6=A0=87=E8=AF=86=EF=BC=9B?=
 =?UTF-8?q?loading=E7=BB=84=E4=BB=B6=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/GlobalLoading1.vue | 106 ++++++++++++------------
 src/components/GuipRadio.vue      | 166 +++++++++++++++++++-------------------
 src/components/GuipSelect.vue     |   3 +-
 3 files changed, 139 insertions(+), 136 deletions(-)

diff --git a/src/components/GlobalLoading1.vue b/src/components/GlobalLoading1.vue
index 50e8cdc..0b632f3 100644
--- a/src/components/GlobalLoading1.vue
+++ b/src/components/GlobalLoading1.vue
@@ -1,67 +1,69 @@
 <template>
-    <div class="content-loading-overlay" v-if="isLoading">
-        <div class="loading-content">
-            <div ref="animationContainer" class="animation-container"></div>
+    <div>
+        <div class="content-loading-overlay" v-show="isLoading">
+            <div class="loading-content">
+                <div ref="animationContainer" class="animation-container"></div>
+            </div>
+        </div>
+        <div  v-show="!isLoading">
+            <slot></slot>
         </div>
-    </div>
-    <div v-else style="height: 100%;">
-        <slot></slot>
     </div>
 </template>
-
 <script>
 import lottie from 'lottie-web'
 import { mapState } from 'vuex'
-import defaultAnimation from '@/assets/loadingAni.json' // 导入JSON文件
+import defaultAnimation from '@/assets/loadingAni.json'
 
 export default {
-    name: 'Loading',
-    data() {
-        return {
-            anim: null
-        }
-    },
-    computed: {
-        ...mapState(['isLoading', 'loadingText'])
-    },
-    watch: {
-        isLoading(newVal) {
-            if (newVal) {
-                this.$nextTick(()=>{
-                    this.playAnimation()
-                })
-            } else {
-                this.stopAnimation()
-            }
-        }
-    },
-    mounted() {
-        if (this.isLoading) {
-            this.playAnimation()
+  name: 'Loading',
+  data() {
+    return {
+      anim: null
+    }
+  },
+  computed: {
+    ...mapState(['isLoading', 'loadingText'])
+  },
+  watch: {
+    isLoading(newVal) {
+      this.$nextTick(() => {
+        if (newVal) {
+          this.playAnimation()
+        } else {
+          this.stopAnimation()
         }
+      })
+    }
+  },
+  methods: {
+    playAnimation() {
+      // 销毁旧实例（可选，根据需求）
+      if (this.anim) {
+        this.anim.destroy()
+        this.anim = null
+      }
+      
+      console.log('执行动画')
+      this.anim = lottie.loadAnimation({
+        container: this.$refs.animationContainer,
+        renderer: 'svg',
+        loop: true,
+        autoplay: true,
+        animationData: defaultAnimation
+      })
     },
-    beforeDestroy() {
-        this.stopAnimation()
-    },
-    methods: {
-        playAnimation() {
-            this.anim = lottie.loadAnimation({
-                container: this.$refs.animationContainer,
-                renderer: 'svg',
-                loop: true,
-                autoplay: true,
-                animationData: defaultAnimation // 你的JSON动画路径
-            })
-            if (this.anim) {
-                this.anim.play()
-            }
-        },
-        stopAnimation() {
-            if (this.anim) {
-                this.anim.stop()
-            }
-        }
+    stopAnimation() {
+      if (this.anim) {
+        this.anim.stop()
+      }
+    }
+  },
+  beforeDestroy() {
+    if (this.anim) {
+      this.anim.destroy() // 组件销毁时彻底清理
     }
+  }
 }
 </script>
 
diff --git a/src/components/GuipRadio.vue b/src/components/GuipRadio.vue
index bfbdb64..b31d6cb 100644
--- a/src/components/GuipRadio.vue
+++ b/src/components/GuipRadio.vue
@@ -1,88 +1,88 @@
-   <template>
-    <el-form-item
-    :class="[{'column':column},'form-item']"
-    :label="label" :prop="prop" :rules="rules">
-      <el-radio-group
-        v-model="selectedValue"
-        v-bind="$attrs"
-        @change="handleChange"
+<template>
+  <el-form-item
+  :class="[{'column':column},'form-item']"
+  :label="label" :prop="prop" :rules="rules" :required="required">
+    <el-radio-group
+      v-model="selectedValue"
+      v-bind="$attrs"
+      @change="handleChange"
+    >
+      <el-radio
+        v-for="option in options"
+        :key="option.value"
+        :label="option.value"
+        :disabled="option.disabled"
       >
-        <el-radio
-          v-for="option in options"
-          :key="option.value"
-          :label="option.value"
-          :disabled="option.disabled"
-        >
-        <!-- 默认展示和选中显示 不同文案 -->
-          {{ selectedValue === option.value ? option.selectedLabel : option.label }}
-          <!-- 自定义 选中图标 -->
-          <!-- <template #label>
-            <span><img src="../assets/radio_checked.svg" alt="custom icon" style="width: 16px; height: 16px;"> {{ text }}</span>
-          </template> -->
-        </el-radio>
-      </el-radio-group>
-    </el-form-item>
-  </template>
-  
-  <script>
-  export default {
-    name: 'MyRadioGroup',
-    props: {
-      // 是否是纵向排列
-      column:{
-        type:Boolean,
-        default:false
-      },
-      // 选项列表，格式为 [{ label: '显示文本', value: '值', disabled: false }]
-      options: {
-        type: Array,
-        required: true,
-      },
-      // 当前选中的值，使用 v-model 绑定
-      value: {
-        type: [String, Number, Boolean],
-        default: '',
-      },
-      // 表单项的 label
-      label: {
-        type: String,
-        default: '',
-      },
-      // 表单项的 prop（用于表单校验）
-      prop: {
-        type: String,
-        default: '',
-      },
-      // 校验规则
-      rules: {
-        type: Array,
-        default: () => [],
-      },
+      <!-- 默认展示和选中显示 不同文案 -->
+        {{( selectedValue === option.value ) ? (option.selectedLabel ? option.selectedLabel : option.label) :option.label }}
+      </el-radio>
+    </el-radio-group>
+  </el-form-item>
+</template>
+
+<script>
+export default {
+  name: 'MyRadioGroup',
+  props: {
+    // 是否是纵向排列
+    column:{
+      type:String,
+      default:''
     },
-    data() {
-      return {
-        selectedValue: this.value, // 内部维护的选中值
-      };
+    required:{
+      type:Boolean,
+      default:false
     },
-    watch: {
-      // 监听外部传入的 value 变化，更新内部 selectedValue
-      value(newVal) {
-        this.selectedValue = newVal;
-      },
+    // 选项列表，格式为 [{ label: '显示文本', value: '值', disabled: false }]
+    options: {
+      type: Array,
+      required: true,
     },
-    methods: {
-      // 选中值变化时触发
-      handleChange(value) {
-        this.$emit('input', value); // 更新 v-model
-        this.$emit('change', value); // 触发 change 事件
-      },
+    // 当前选中的值，使用 v-model 绑定
+    value: {
+      type: [String, Number, Boolean],
+      default: '',
     },
-  };
-  </script>
-  
-  <style scoped>
-  /* 自定义样式 */
-  .el-radio-group {
-    margin: 10px 0;
-  }
-  </style>
\ No newline at end of file
+    // 表单项的 label
+    label: {
+      type: String,
+      default: '',
+    },
+    // 表单项的 prop（用于表单校验）
+    prop: {
+      type: String,
+      default: '',
+    },
+    // 校验规则
+    rules: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      selectedValue: this.value, // 内部维护的选中值
+    };
+  },
+  watch: {
+    // 监听外部传入的 value 变化，更新内部 selectedValue
+    value(newVal) {
+      this.selectedValue = newVal;
+    },
+  },
+  methods: {
+    // 选中值变化时触发
+    handleChange(value) {
+      this.$emit('input', value); // 更新 v-model
+      this.$emit('change', value); // 触发 change 事件
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* 自定义样式 */
+.el-radio-group {
+  margin: 10px 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/GuipSelect.vue b/src/components/GuipSelect.vue
index 7de9967..0c30538 100644
--- a/src/components/GuipSelect.vue
+++ b/src/components/GuipSelect.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-form-item :style="{ ...style, height: height, ...styleObject }"
+  <el-form-item :style="{ ...style, height: height, ...styleObject }" :required="required"
     :class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, 'form-item']"
     :label="label" :prop="prop" :rules="rules">
     <p v-if="desc" class="desc_right">{{ desc }}</p>
@@ -32,6 +32,7 @@ export default {
     },
     styleObject: Object,
     disabled: Boolean,
+    required: Boolean,
     defaultValue: [String, Number, Array],
     placeholder: String,
     width: String,