标签输入

能够自定义实现动态的规格属性输入，可以自行设定数据列，支持鼠标拖动排序。

基础用法

效果

代码

<div 
data-toggle="property-input" 
data-name="property" 
>{$row.property|raw|htmlspecialchars_decode|default=''}</div>

注意，系统默认开启了过滤函数，输出需要将实体转为代码。

自定义列用法

代码

<div 
data-toggle="property-input" 
data-name="property_static" 
data-field='{memory_size:"内存",disk_size:"硬盘",cpu_nums:"CPU核心数"}'
>{$row.property_static|raw|default=''}</div>

效果

参数

• name
  form表单提交的名称

• field
  自定义列的参数，支持json和js对象的写法。以下两种写法都是可以的：

js对象：

{memory_size:"内存",disk_size:"硬盘",cpu_nums:"CPU核心数"}

JSON字符串：

{"memory_size":"内存","disk_size":"硬盘","cpu_nums":"CPU核心数"}

实践

动态设置

该组件使用vue2实现，组件会实现一个input用来同步form的提交值，可以先定位该input，再通过组件类名.property-input-container找到组件dom，其中vue实例已挂在到dom上。之后所有的vue合法的操作都支持，具体支持的方法和数据绑定，请参考源码。

以下例子中实现了点击加载模板参数。

var appElem = $('input[name="type_info"]').closest('.property-input-container')
var app = appElem[0].__vue__;
$('.load-info-tpl').click(function () {
    app.listItem = [
        {
            name: 'appid',
            value: '',
        },
        {
            name: 'appsecret',
            value: '',
        },
    ];
})