增加弹框

.npmignore

@@ -1,8 +1,24 @@
 # 忽略文件
 examples/
+build/
 node_modules/
-*.log
+*.map
-*.md
+*.html
-*.yml
+
-webpack.config.js
+# 本地开发文件
-.gitignore
+.DS_Store
+*.local
+
+# 日志文件
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# 编辑器目录和文件
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app" class="demo-container">
-    <el-form :model="form" :rules="rules" class="el-row demo-ruleForm" ref="formRef">
+    <el-form :model="form" class="el-row demo-ruleForm" ref="formRef">
 
       <!-- 按钮组件示例 -->
       <section class="demo-section">
@@ -129,12 +129,12 @@
         <div class="ele-item">
           <label for="">单选框(对象格式)：</label>
           <GuipRadio v-model="form.language" :options="languageOptions" label="选择语言" prop="language"
-            @change="radioChange" :rules="rules.language" />
+            @change="radioChange"  />
         </div>
         <div class="ele-item">
           <label for="">单选框2（数组格式 + 自定义取值）：</label>
           <GuipRadio v-model="form.language" :options="languageOptions1" label="自定义属性" prop="language"
-            @change="radioChange" :rules="rules.language" label-key="name" :disabledKeys="['1']" value-key="id" />
+            @change="radioChange" label-key="name" :disabledKeys="['1']" value-key="id" />
         </div>
         <div class="ele-item">
           <label for="">单选框：</label>
@@ -842,18 +842,18 @@ export default {
       // this.handleInput('')
       console.log(value, 'value===qinghcu');
     },
-    getList() {
+    // getList() {
-      const dataList = rules();
+    //   const dataList = rules();
-      dataList.forEach((item) => {
+    //   dataList.forEach((item) => {
-        if (item.field === "id") {
+    //     if (item.field === "id") {
-          item.options = this.cities;
+    //       item.options = this.cities;
-        }
+    //     }
-        if (item.field === "id1") {
+    //     if (item.field === "id1") {
-          item.options = this.optionss;
+    //       item.options = this.optionss;
-        }
+    //     }
-      });
+    //   });
-      this.formList = dataList;
+    //   this.formList = dataList;
-    },
+    // },
     save() {
       this.$refs.VabForm.submitForm("ruleForm");
     },

packages/.eslintrc.js

@@ -1,17 +1,22 @@
+// .eslintrc.js
 module.exports = {
-    env: {
+  root: true,
-      browser: true,
+  env: {
-      es2021: true
+    browser: true,
-    },
+    node: true,
-    extends: [
+    es6: true
-      'eslint:recommended',
+  },
-      'plugin:vue/essential'
+  extends: [
-    ],
+    'eslint:recommended',
-    parserOptions: {
+    'plugin:vue/essential'
-      ecmaVersion: 12,
+  ],
-      sourceType: 'module'
+  parserOptions: {
-    },
+    ecmaVersion: 2018,  // 改为 2018（兼容 Vue 2）
-    rules: {
+    sourceType: 'module',
-      'vue/multi-word-component-names': 'off'
+    parser: 'babel-eslint'
-    }
+  },
+  rules: {
+    'vue/multi-word-component-names': 'off',
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
   }
+}

packages/GuipDialog/index.js

@@ -0,0 +1,7 @@
+import GuipDialog from './src/index.vue'
+
+GuipDialog.install = function(Vue) {
+  Vue.component(GuipDialog.name || 'GuipDialog', GuipDialog)
+}
+
+export default GuipDialog

packages/GuipDialog/src/index.vue

@@ -0,0 +1,131 @@
+<template>
+  <el-dialog :visible.sync="dialogShow" :title="title" v-bind="$attrs" append-to-body :width="width"
+    :show-close="showCloseButton" :before-close="handleClose" :class="type == 'center' ? 'center' : 'normal'">
+    <!-- 自定义内容 -->
+    <slot></slot>
+    <!-- 底部按钮 -->
+    <span v-if="showFooterButton" slot="footer"
+      :class="[type == 'center' ? 'dialog-footer-center' : 'dialog-footer-normal', 'flex']"
+      style="justify-content: space-between;">
+      <GuipButton v-if="showCancelButton" @click="handleCancel" type="ignore">{{ cancelText }}</GuipButton>
+      <GuipButton type="primary" @click="handleConfirm">{{ confirmText }}</GuipButton>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import GuipButton from '../../GuipButton/src/index.vue';
+
+export default {
+  name: 'GuipDialog',
+  props: {
+    type: {
+      type: String,
+      default: 'normal'
+    },
+    // 控制弹框显示
+    dialogVisible: {
+      type: Boolean,
+      default: false,
+    },
+    // 弹框标题
+    title: {
+      type: String,
+      default: '提示',
+    },
+    // 弹框宽度
+    width: {
+      type: String,
+      default: '599px',
+    },
+    // 是否显示右上角关闭按钮
+    showCloseButton: {
+      type: Boolean,
+      default: true,
+    },
+    // 是否显示取消按钮
+    showCancelButton: {
+      type: Boolean,
+      default: true,
+    },
+    // 是否显示底部按钮
+    showFooterButton: {
+      type: Boolean,
+      default: true,
+    },
+    // 取消按钮文本
+    cancelText: {
+      type: String,
+      default: '取消',
+    },
+    // 确认按钮文本
+    confirmText: {
+      type: String,
+      default: '确定',
+    },
+  },
+  components: {
+    GuipButton
+  },
+  computed: {
+    dialogShow: {
+      get() {
+        return this.dialogVisible;
+      },
+      set(newVal) {
+        this.$emit('dialogVisibleChange', newVal);
+      }
+    }
+  },
+  data() {
+    return {
+      // 内部维护一个 visible 状态
+      internalVisible: this.visible,
+      // dialogVisible:false,
+    };
+  },
+  watch: {
+    // // 监听 prop 的变化，同步到 internalVisible
+    // visible(newVal) {
+    //     this.internalVisible = newVal;
+    // },
+    // // 监听 internalVisible 的变化，通知父组件
+    // internalVisible(newVal) {
+    //     this.$emit('update:visible', newVal);
+    // },
+  },
+  methods: {
+    // 关闭弹框
+    handleClose(done) {
+      this.$emit('close');
+      this.internalVisible = false; // 关闭弹框
+      if (done) {
+        done();
+      }
+    },
+    // 点击取消按钮
+    handleCancel() {
+      this.$emit('cancel');
+      this.internalVisible = false; // 关闭弹框
+    },
+    // 点击确认按钮
+    handleConfirm() {
+      this.$emit('confirm');
+      this.internalVisible = false; // 关闭弹框
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.el-dialog {
+  /* width: 599px; */
+  // min-height: 344px;
+  // .el-dialog__header{
+  //     padding: 32px 32px 12px;
+  // }
+  // .el-dialog__body{
+  //     padding: 0 32px 32px;
+  // }
+}
+</style>

packages/GuipRadio/src/index.vue

@@ -12,7 +12,7 @@
 
 <script>
 export default {
-  name: 'GuipRadio',
+  name: 'MyRadioGroup',
   props: {
     // 是否是纵向排列
     column: {
@@ -23,6 +23,10 @@ export default {
       type: Boolean,
       default: false
     },
+    selectedLabelKey: {
+      type: String,
+      default: ''
+    },
     // 选项列表，支持多种格式:
     // 1. 数组格式: [{ label: '显示文本', value: '值', disabled: false }]
     // 2. 对象格式: { key1: 'value1', key2: 'value2' }
@@ -131,7 +135,13 @@ export default {
         return option.value;
       }
 
-      return option[this.labelKey] || option;
+      // 当前选项是否选中
+      const isSelected = this.getValue(option) === this.selectedValue;
+      
+      // 选中状态下优先返回selectedLabel，其次返回labelKey指定的属性
+      return isSelected && option[this.selectedLabelKey] 
+        ? option[this.selectedLabelKey] 
+        : option[this.labelKey] || option;
     },
     getValue(option) {
       // 处理对象格式的选项

packages/GuipSelect/src/index.vue

@@ -30,6 +30,11 @@ export default {
       type: String,
       default: 'label'
     },
+     // 新增动态添加项的配置
+    extraItem: {
+      type: Object,
+      default: null
+    },
     styleObject: Object,
     disabled: Boolean,
     required: Boolean,
@@ -55,7 +60,19 @@ export default {
   computed: {
     // 处理options为空的情况
     processedOptions() {
-      return this.options || []
+      let options = this.options || [];
+      // 当extraItem存在且不是空对象时，添加到options数组开头
+      if (this.extraItem && Object.keys(this.extraItem).length > 0) {
+        return [
+          {
+            [this.labelKey]: this.extraItem.label || '',
+            [this.valueKey]: this.extraItem.value || '',
+            disabled: this.extraItem.disabled || false
+          },
+          ...options
+        ];
+      }
+      return options;
     }
   },
   watch: {

packages/index.js

@@ -14,6 +14,7 @@ import GuipRadio from './GuipRadio'
 import GuipSelect from './GuipSelect'
 import GuipFormItem from './GuipFormItem'
 import CustomDropdown from './CustomDropdown'
+import GuipDialog from './GuipDialog'
 import 'element-ui/lib/theme-chalk/index.css' // 如果依赖Element
 import './styles/index.css' // 全局引入
 import './styles/common.scss' // 全局引入
@@ -28,7 +29,8 @@ const components = [
   GuipRadio,
   GuipSelect,
   GuipFormItem,
-  CustomDropdown
+  CustomDropdown,
+  GuipDialog
 ]
 
 const install = function (Vue) {
@@ -36,6 +38,8 @@ const install = function (Vue) {
   Vue.prototype.$eventBus = EventBus
   Vue.prototype.$on = $on
   Vue.prototype.$emit = $emit
+  Vue.prototype.$off = $off
+  Vue.prototype.$once = $once
   Vue.directive('clickaway', clickaway)
   components.forEach(component => {
     if (!component.name) {
@@ -56,5 +60,6 @@ export default {
   GuipRadio,
   GuipSelect,
   GuipFormItem,
-  CustomDropdown
+  CustomDropdown,
+  GuipDialog
 }