update files

static/js/components/dynamic-item/dynamic-item.html

@@ -0,0 +1,16 @@
+<ul>
+  <li v-for="(index, item) in items">
+    <span :title="item.name">{{ item.name }}</span>&nbsp;
+    <span :title="item.value">{{ item.value }}</span>
+    <i @click="remove(index)" title="删除" class="icon-trash"></i>
+  </li>
+  <li class="ui-action-bar">
+    <input type="text" :placeholder="nameLabel" v-model="name" lazy @focus="focus('nameError')"/>&nbsp;
+    <input type="text" :placeholder="valueLabel" v-model="value" lazy @focus="focus('valueError')"/>&nbsp;
+    <input type="button" class="ui-button" @click="add" value="添加"/>
+  </li>
+  <li v-show="nameError || valueError" class="ui-item-error">
+    <span :class="nameError ? '' : 'fn-invisible'"><i class="icon-expand"></i>{{ nameLabel }}{{ nameError }}</span>&nbsp;
+    <span :class="valueError ? '' : 'fn-invisible'"><i class="icon-expand"></i>{{ valueLabel }}{{ valueError }}</span>
+  </li>
+</ul>

static/js/components/dynamic-item/index.js

@@ -0,0 +1,90 @@
+/**
+ * Created by nuintun on 2015/11/17.
+ */
+
+'use strict';
+
+var fs = require('fs');
+var path = require('path');
+var Vue = require('../../vue/vue');
+
+module.exports = Vue.component('dynamic-item', {
+  // camelCase in JavaScript
+  props: {
+    nameLabel: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    valueLabel: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    items: {
+      type: Array,
+      default: function (){
+        return [];
+      }
+    }
+  },
+  template: fs.readFileSync(path.join(__dirname, 'dynamic-item.html')).toString(),
+  data: function (){
+    return {
+      name: '',
+      value: '',
+      _cached: {},
+      nameError: '',
+      valueError: ''
+    };
+  },
+  methods: {
+    add: function (){
+      // trim value
+      this.name = this.name.trim();
+      this.value = this.value.trim();
+
+      // name error
+      if (!this.name) {
+        this.nameError = '不能为空';
+      } else if (this.$data._cached[this.name]) {
+        this.nameError = ' ' + this.name + ' 已存在';
+      } else {
+        this.nameError = '';
+      }
+
+      // value error
+      if (!this.value) {
+        this.valueError = '不能为空';
+      } else {
+        this.valueError = '';
+      }
+
+      // add item
+      if (this.name && this.value && !this.$data._cached[this.name]) {
+        // cache name
+        this.$data._cached[this.name] = true;
+        // add item
+        this.items.push({ name: this.name, value: this.value });
+
+        // clean input
+        this.name = '';
+        this.value = '';
+      }
+    },
+    focus: function (key){
+      this[key] = '';
+    },
+    remove: function (index){
+      var item = this.items[index];
+
+      this.items.splice(index, 1);
+      delete this.$data._cached[item.name];
+    }
+  },
+  created: function (){
+    this.items.forEach(function (item){
+      this.$data._cached[item.name] = true;
+    }, this);
+  }
+});