el-form-renderer-vue3 1.0.5 → 1.0.7

package/femessage/components/render-form-item.vue

@@ -1,98 +1,100 @@
 <template>
-  <div>
-    <!-- 绑定显示，校验匹配规则字段，label，rules校验规则，attrs（原生属性）， -->
-    <el-form-item
-      v-if="_show"
-      :prop="prop"
-      :label="typeof data.label === 'string' ? data.label : ''"
-      :rules="!readonly && Array.isArray(data.rules) ? data.rules : undefined"
-      v-bind="data.attrs"
-      class="render-form-item"
-    >
-      <!-- label插槽 -->
-      <template #label>
-        <v-node v-if="data.label !== 'string'" :content="data.label" />
-      </template>
-      <!-- 处理之只读input select -->
-      <template v-if="readonly && hasReadonlyContent">
-        <el-input
-          v-if="data.type === 'input'"
-          v-bind="componentProps"
-          :modelValue="itemValue"
-          readonly
-          v-on="listeners"
-        />
-
-        <div v-else-if="data.type === 'select'">
-          {{ multipleValue }}
-        </div>
-      </template>
-      <!-- 处理 date-picker,cascader,动态渲染不显示文字 bug-->
-      <component
-        v-else-if="data.type === 'date-picker' || data.type === 'cascader'"
-        ref="customComponent"
-        v-bind:is="data.component || `el-${data.type || 'input'}`"
-        v-bind="componentProps"
-        :modelValue="itemValue"
-        :disabled="disabled || componentProps.disabled || readonly"
-        v-on="listeners"
-        :loading="loading"
-        :remote-method="data.remoteMethod || componentProps.remoteMethod || remoteMethod"
-      >
-      </component>
-      <!-- 绑定 模板引用 动态组件 props value值 是否禁用 事件 lodding 远端搜索方法 -->
-      <component
-        v-else
-        ref="customComponent"
-        v-bind:is="data.component || `el-${data.type || 'input'}`"
+  <!-- 绑定显示，校验匹配规则字段，label，rules校验规则，attrs（原生属性）， -->
+  <el-form-item
+    v-if="_show"
+    :prop="prop"
+    :label="typeof data.label === 'string' ? data.label : ''"
+    :rules="!readonly && Array.isArray(data.rules) ? data.rules : undefined"
+    v-bind="data.attrs"
+    class="render-form-item"
+  >
+    <!-- label插槽 -->
+    <template #label>
+      <v-node v-if="data.label !== 'string'" :content="data.label" />
+    </template>
+    <!-- 处理之只读input select -->
+    <template v-if="readonly && hasReadonlyContent">
+      <el-input
+        v-if="data.type === 'input'"
         v-bind="componentProps"
         :modelValue="itemValue"
-        :disabled="disabled || componentProps.disabled || readonly"
+        readonly
         v-on="listeners"
-        :loading="loading"
-        :remote-method="data.remoteMethod || componentProps.remoteMethod || remoteMethod"
-      >
-        <!-- 插槽处理  选项-->
-        <template v-for="(opt, index) in options">
-          <el-option
-            v-if="data.type === 'select'"
-            :key="optionKey(opt) || index"
-            v-bind="opt"
-          />
-          <el-checkbox-button
-            v-if="data.type === 'checkbox-group' && data.style === 'button'"
-            :key="opt.value"
-            v-bind="opt"
-            :label="'value' in opt ? opt.value : opt.label"
-          >
-            {{ opt.label }}
-          </el-checkbox-button>
-          <el-checkbox
-            v-else-if="data.type === 'checkbox-group' && data.style !== 'button'"
-            :key="opt.value"
-            v-bind="opt"
-            :label="'value' in opt ? opt.value : opt.label"
-          >
-            {{ opt.label }}
-          </el-checkbox>
-          <el-radio-button
-            v-else-if="data.type === 'radio-group' && data.style === 'button'"
-            :key="opt.label"
-            v-bind="opt"
-            :label="'value' in opt ? opt.value : opt.label"
-            >{{ opt.label }}</el-radio-button
-          >
-          <el-radio
-            v-else-if="data.type === 'radio-group' && data.style !== 'button'"
-            :key="opt.label"
-            v-bind="opt"
-            :label="'value' in opt ? opt.value : opt.label"
-            >{{ opt.label }}</el-radio
-          >
-        </template>
-      </component>
-    </el-form-item>
-  </div>
+      />
+
+      <div v-else-if="data.type === 'select'">
+        {{ multipleValue }}
+      </div>
+    </template>
+    <!-- 处理 date-picker,cascader,动态渲染不显示文字 bug-->
+    <component
+      v-else-if="data.type === 'date-picker' || data.type === 'cascader'"
+      ref="customComponent"
+      v-bind:is="data.component || `el-${data.type || 'input'}`"
+      v-bind="componentProps"
+      :modelValue="itemValue"
+      :disabled="disabled || componentProps.disabled || readonly"
+      v-on="listeners"
+      :loading="loading"
+      :remote-method="
+        data.remoteMethod || componentProps.remoteMethod || remoteMethod
+      "
+    >
+    </component>
+    <!-- 绑定 模板引用 动态组件 props value值 是否禁用 事件 lodding 远端搜索方法 -->
+    <component
+      v-else
+      ref="customComponent"
+      v-bind:is="data.component || `el-${data.type || 'input'}`"
+      v-bind="componentProps"
+      :modelValue="itemValue"
+      :disabled="disabled || componentProps.disabled || readonly"
+      v-on="listeners"
+      :loading="loading"
+      :remote-method="
+        data.remoteMethod || componentProps.remoteMethod || remoteMethod
+      "
+    >
+      <!-- 插槽处理  选项-->
+      <template v-for="(opt, index) in options">
+        <el-option
+          v-if="data.type === 'select'"
+          :key="optionKey(opt) || index"
+          v-bind="opt"
+        />
+        <el-checkbox-button
+          v-if="data.type === 'checkbox-group' && data.style === 'button'"
+          :key="opt.value"
+          v-bind="opt"
+          :label="'value' in opt ? opt.value : opt.label"
+        >
+          {{ opt.label }}
+        </el-checkbox-button>
+        <el-checkbox
+          v-else-if="data.type === 'checkbox-group' && data.style !== 'button'"
+          :key="opt.value"
+          v-bind="opt"
+          :label="'value' in opt ? opt.value : opt.label"
+        >
+          {{ opt.label }}
+        </el-checkbox>
+        <el-radio-button
+          v-else-if="data.type === 'radio-group' && data.style === 'button'"
+          :key="opt.label"
+          v-bind="opt"
+          :label="'value' in opt ? opt.value : opt.label"
+          >{{ opt.label }}</el-radio-button
+        >
+        <el-radio
+          v-else-if="data.type === 'radio-group' && data.style !== 'button'"
+          :key="opt.label"
+          v-bind="opt"
+          :label="'value' in opt ? opt.value : opt.label"
+          >{{ opt.label }}</el-radio
+        >
+      </template>
+    </component>
+  </el-form-item>
 </template>
 
 <script setup>
@@ -107,6 +109,11 @@ import _get from "lodash.get";
 // import CustomComponent from "../util/CustomComponent";
 import VNode from "../util/VNode";
 import axios from "axios";
+import {
+  methodsSymbol,
+  updateFormsSymbol,
+  setOptionsSymbol,
+} from "../util/keys";
 let customComponent = ref();
 
 let props = defineProps({
@@ -134,9 +141,9 @@ const loading = ref(false);
 let dataRef = ref(props.data);
 // 注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。
 // 父组件提供 element ui的方法
-let methods = inject("methods");
+let methods = inject(methodsSymbol);
 //  父组件提供的 更新 options的方法
-let setOptions = inject("setOptions");
+let setOptions = inject(setOptionsSymbol);
 // 是否校验
 const isBlurTrigger =
   props.data.rules &&
@@ -147,7 +154,9 @@ const isBlurTrigger =
 // 计算props
 const componentProps = computed(() => ({ ...props.data.el, ...propsInner }));
 // 计算是否为只读 input select
-const hasReadonlyContent = computed(() => ["input", "select"].includes(props.data.type));
+const hasReadonlyContent = computed(() =>
+  ["input", "select"].includes(props.data.type)
+);
 //执行传入的hidden
 const hiddenStatus = computed(() => {
   const hidden = props.data.hidden || (() => false);
@@ -169,7 +178,7 @@ const listeners = computed(() => {
   const originOnChange = on.change || noop;
   const trim = data.trim !== undefined ? data.trim : true;
 
-  let updateForm = inject("updateForm");
+  let updateForm = inject(updateFormsSymbol);
   return {
     ..._frompairs(
       _topairs(on).map(([eName, handler]) => [
@@ -266,7 +275,8 @@ watch(
     // 现改写成：分开处理 remote.request，remote.url
     // 至于为什么判断新旧值相同则返回，是因为 form 的 content 是响应式的，防止用户直接修改 content 其他内容时，导致 remote.request 重新发请求
 
-    if (!newValue || typeof newValue !== "function" || newValue === oldValue) return;
+    if (!newValue || typeof newValue !== "function" || newValue === oldValue)
+      return;
 
     makingRequest(props.data.remote);
   },
@@ -279,7 +289,8 @@ watch(
     // 第三个判断条件：防止 url 与 request 同时存在时，发送两次请求
     if (!url || url === oldV || (!oldV && props.data.remote.request)) return;
     const request =
-      props.data.remote.request || (() => axios.get(url).then((resp) => resp.data));
+      props.data.remote.request ||
+      (() => axios.get(url).then((resp) => resp.data));
     makingRequest(Object.assign({}, props.data.remote, { request }));
   },
   { immediate: true }

package/femessage/el-form-renderer.vue

@@ -1,32 +1,37 @@
 <template>
-  <div>
-    <el-form ref="myelForm" v-bind="$attrs" :model="value" class="el-form-renderer">
-      <template v-for="item in innerContent" :key="item.id">
-        <slot :name="`id:${item.id}`" />
-        <slot :name="`$id:${item.id}`" />
+  <el-form
+    ref="myelForm"
+    v-bind="$attrs"
+    :model="value"
+    class="el-form-renderer"
+  >
+    <template v-for="item in innerContent" :key="item.id">
+      <slot :name="`id:${item.id}`" />
+      <slot :name="`$id:${item.id}`" />
 
-        <component
-          :is="item.type === GROUP ? RenderFormGroup : RenderFormItem"
-          :ref="
-            (el) => {
-              customComponent[item.id] = el;
-            }
-          "
-          :data="item"
-          :value="value"
-          :item-value="value[item.id]"
-          :disabled="
-            disabled ||
-            (typeof item.disabled === 'function' ? item.disabled(value) : item.disabled)
-          "
-          :readonly="readonly || item.readonly"
-          :options="options[item.id]"
-          @updateValue="updateValue"
-        />
-      </template>
-      <slot />
-    </el-form>
-  </div>
+      <component
+        :is="item.type === GROUP ? RenderFormGroup : RenderFormItem"
+        :ref="
+          (el) => {
+            customComponent[item.id] = el;
+          }
+        "
+        :data="item"
+        :value="value"
+        :item-value="value[item.id]"
+        :disabled="
+          disabled ||
+          (typeof item.disabled === 'function'
+            ? item.disabled(value)
+            : item.disabled)
+        "
+        :readonly="readonly || item.readonly"
+        :options="options[item.id]"
+        @updateValue="updateValue"
+      />
+    </template>
+    <slot />
+  </el-form>
 </template>
 
 <script setup>
@@ -49,6 +54,12 @@ import transformContent from "./util/transform-content";
 import _set from "lodash.set";
 import _isequal from "lodash.isequal";
 import _clonedeep from "lodash.clonedeep";
+
+import {
+  methodsSymbol,
+  updateFormsSymbol,
+  setOptionsSymbol,
+} from "./util/keys";
 import {
   collect,
   mergeValue,
@@ -263,13 +274,14 @@ const getComponentById = (id) => {
   if (!itemContent.groupId) {
     return customComponent.value[id].customComponent;
   } else {
-    const componentRef = customComponent.value[itemContent.groupId].customComponent;
+    const componentRef =
+      customComponent.value[itemContent.groupId].customComponent;
     return componentRef[`formItem-${id}`].customComponent;
   }
 };
-provide("methods", methods);
-provide("updateForm", updateForm);
-provide("setOptions", setOptions);
+provide(methodsSymbol, methods);
+provide(updateFormsSymbol, updateForm);
+provide(setOptionsSymbol, setOptions);
 defineExpose({
   updateValue,
   resetFields,

package/femessage/util/keys.js

@@ -0,0 +1,3 @@
+export const methodsSymbol = Symbol();
+export const updateFormsSymbol = Symbol();
+export const setOptionsSymbol = Symbol();

package/package.json

@@ -1,12 +1,18 @@
 {
   "name": "el-form-renderer-vue3",
-  "version": "1.0.5",
-  "description": "",
+  "version": "1.0.7",
+  "description": "JSON-Rendering-FROM",
   "main": "el-form-renderer-vue3.es.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "keywords": [],
-  "author": "",
+  "keywords": [
+    "vue",
+    "element",
+    "render",
+    "form",
+    "component"
+  ],
+  "author": "https://gitee.com/childe-jia",
   "license": "ISC"
 }