新增属性组件

public/static/plugs/lay-module/propertyInput/propertyInput.css

@@ -0,0 +1,8 @@
+.property-input-container .input-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.property-input-container .input-item .input-value {
+  min-width: 240px;
+}

public/static/plugs/lay-module/propertyInput/propertyInput.html

@@ -0,0 +1,19 @@
+<div class="property-input-container" ref="propertyInput">
+    <input type="hidden" :name="setting.name" :value="value" :lay-verify="setting.required == 1?'required':''">
+    <div class="input-list">
+        <div class="input-item" v-for="(item,index) in listItem">
+            <div class="input-name"><input type="text" class="layui-input" placeholder="请输入名称" :value="item.name" @change="onItemNameChange(item,index,$event)"></div>
+            <div class="input-value"><input type="text" class="layui-input" placeholder="请输入数据" :value="item.value" @change="onItemValueChange(item,index,$event)"></div>
+            <div class="input-option">
+                <div class="layui-btn-group">
+                    <div class="layui-btn layui-btn-primary" @click="onItemMoveUp(item,index)"><i class="fa fa-arrow-up"></i></div>
+                    <div class="layui-btn layui-btn-primary" @click="onItemMoveDown(item,index)"><i class="fa fa-arrow-down"></i></div>
+                    <div class="layui-btn layui-btn-primary" @click="onItemDelete(item,index)"><i class="fa fa-close"></i></div>
+                </div>
+            </div>
+        </div>
+        <div class="input-item">
+            <div class="layui-btn layui-btn-primary" @click="onAddItem"><i class="layui-icon layui-icon-add-1"></i></div>
+        </div>
+    </div>
+</div>

public/static/plugs/lay-module/propertyInput/propertyInput.js

@@ -0,0 +1,131 @@
+define(['jquery', 'vue'], function ($, Vue) {
+    const propertyInputCss = '/static/plugs/lay-module/propertyInput/propertyInput.css';
+    const propertyInputHtml = '/static/plugs/lay-module/propertyInput/propertyInput.html';
+
+    var propertyInput = function () {
+        var cssElement = document.createElement('link');
+
+        cssElement.setAttribute('rel', 'stylesheet');
+
+        cssElement.setAttribute('href', propertyInputCss);
+
+        document.body.appendChild(cssElement);
+    };
+    var propertyInputTemplate = '';
+
+    $.ajax({
+        type: "get",
+        url: propertyInputHtml,
+        cache: true,
+        async: false,
+        success: function (template) {
+            propertyInputTemplate = template;
+        }
+
+    });
+
+    propertyInput.prototype.render = function (elem, data) {
+
+        var defaultOption = {
+            placeholder: '请选择',
+            required: ''
+        }
+
+        var options = $.extend(defaultOption, data);
+
+
+
+        app = new Vue({
+            el: elem,
+            data() {
+                return {
+                    setting: options,
+                    value: '',
+                    listItem: [
+                        {
+                            name: '',
+                            value: ''
+                        }
+                    ]
+                }
+            },
+            watch: {
+                listItem: {
+                    handler(newValue, oldValue) {
+                        // 在这里标记页面编辑状态
+                        this.value = JSON.stringify(newValue);
+                    },
+                    // 通过指定deep属性为true, watch会监听对象里面每一个值的变化
+                    deep: true
+                }
+            },
+
+            created() {
+                if (this.setting.value) {
+                    this.listItem = this.setting.value;
+                    this.value = this.setting.value;
+                }
+
+            },
+            mounted() {
+                if (options.required == 1) {
+                    $(this.$refs['propertyInput']).closest('.layui-form-item').children('.layui-form-label').addClass('required');
+                }
+            },
+            template: propertyInputTemplate,
+
+            methods: {
+
+                removeItem(item, index) {
+                    this.listTag.splice(index, 1)
+                },
+                onAddItem() {
+                    this.listItem.push({
+                        name: '',
+                        value: ''
+                    })
+                },
+                onItemNameChange(item, index, event) {
+                    this.listItem[index].name = event.target.value;
+                },
+                onItemValueChange(item, index, event) {
+
+                    this.listItem[index].value = event.target.value;
+                },
+                onItemMoveUp(item, index) {
+                    var arr = this.listItem;
+                    if (index != 0) {
+                        arr[index] = arr.splice(index - 1, 1, arr[index])[0]
+                    } else {
+                        arr.push(arr.shift())
+                    }
+                },
+                onItemMoveDown(item, index) {
+                    var arr = this.listItem;
+                    if (index != arr.length - 1) {
+                        arr[index] = arr.splice(index + 1, 1, arr[index])[0]
+                    } else {
+                        arr.unshift(arr.splice(index, 1)[0])
+                    }
+
+                },
+                onItemDelete(item, index) {
+                    if (this.listItem.length <= 1) {
+                        this.listItem = [
+                            {
+                                name: '',
+                                value: ''
+                            }
+                        ]
+                    } else {
+                        this.listItem.splice(index, 1)
+                    }
+                },
+            }
+        })
+
+        return app;
+    }
+
+    return new propertyInput();
+})

public/static/plugs/lay-module/propertyInput/propertyInput.scss

@@ -0,0 +1,12 @@
+.property-input-container {
+
+    .input-item {
+        display        : flex;
+        align-items    : center;
+        justify-content: flex-start;
+
+        .input-value {
+            min-width: 240px;
+        }
+    }
+}