general-basic-form 1.0.15 → 1.0.16

package/README.md

@@ -57,6 +57,11 @@
               message: "请输入正确的Invoice单号"
             }
           ],
+          template: {
+            suffix: () => {
+              return <svg-icon icon-class="baifenbi" />;
+            },
+          },
           maxlength: "3000"},
         {
           label: "二次工艺",
@@ -143,8 +148,15 @@
         },
       ],
       //分别支持input输入框，select单选框，date-picker日期选择器，cascader层级选择器 四种组件
+      
       //date-picker可以传入'start-placeholder'和'end-placeholder'，其他组件支持placeholder传入
+
       //rules为表单校验规则，每个组件都可以传入
 
+      //input支持template,支持以下几个属性：
+      //prefix	输入框头部内容，只对 type="text"（默认） 有效
+      //suffix	输入框尾部内容，只对 type="text" 有效
+      //prepend	输入框前置内容，只对 type="text" 有效
+      //append	输入框后置内容，只对 type="text" 有效
 安装：npm i general-basic-form<br/>
 install: npm i general-basic-form

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "general-basic-form",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "",
   "main": "./src/index.js",
   "scripts": {

package/src/GeneralBasicForm.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: 陈德立*******419287484@qq.com
  * @Date: 2021-08-20 17:14:53
- * @LastEditTime: 2021-10-16 15:06:06
+ * @LastEditTime: 2021-10-19 19:23:15
  * @LastEditors: 陈德立*******419287484@qq.com
  * @Github: https://github.com/Alan1034
  * @Description: 
@@ -35,7 +35,19 @@
         v-bind="inputSetting"
         :placeholder="item.placeholder || inputSetting.placeholder"
         :maxlength="item.maxlength"
-      ></el-input>
+      >
+        <template
+          v-for="(templateEle, name) in item.template"
+          :key="name"
+          #[name]
+        >
+          <component
+            v-if="templateEle"
+            :is="currentInputComponent()"
+            :templateEle="templateEle"
+          />
+        </template>
+      </el-input>
       <el-select
         filterable
         v-else-if="item.type === 'select'"
@@ -93,6 +105,12 @@
 <script>
 export default {
   name: "GeneralBasicForm",
+  components: {
+    InputArchive: (props) => {
+      const { templateEle } = props;
+      return templateEle();
+    },
+  },
   props: {
     showSearch: {
       // 是否展示所有元素
@@ -209,6 +227,9 @@ export default {
       }
       this.handleQuery();
     },
+    currentInputComponent() {
+      return "input-archive";
+    },
   },
 };
 </script>