创建新仓库

dist/electron/static/dialog/addField.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="addField">
+    <div class="nav">
+      <span>增加字段</span>
+      <div  @click="close">×</div>
+    </div>
+    <div class="content">
+      <div class="item">
+        <span>字段名称：</span>
+        <input type="text" v-model="field">
+      </div>
+<!--      <div class="item">
+        <span>字段类型：</span>
+      </div>-->
+
+
+    </div>
+    <div class="btn">
+      <button @click="cancel">取消</button>
+      <button @click="submit">确定</button>
+    </div>
+  </div>
+</template>
+
+<script>
+module.exports = {
+  data: function() {
+    return {
+      field:""
+    }
+  },
+  mounted() {
+    this.field=""
+  },
+  methods: {
+    close(){
+      this.$parent.addFieldAble=false
+    },
+    cancel(){
+      this.$parent.addFieldAble=false
+    },
+    submit(){
+      console.log("要增加的字段为",this.field)
+    }
+  }
+}
+
+</script>
+
+<style scoped>
+.addField{
+  position: absolute;
+  width: 300px;
+  height: 150px;
+  transform: translate(-50%,-50%);
+  top: 50%;
+  left: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background: #EEE;
+}
+.addField .nav{
+  background: #656565;
+  display: flex;
+  justify-content: space-between;
+  color: #fff;
+  padding: 1px 10px;
+}
+.addField .nav>div{
+  cursor: pointer;
+}
+.addField .content{
+
+  flex: auto;
+  padding: 1px 10px;
+
+}
+.addField .content .item{}
+.addField  .btn button{
+  margin:0 5px;
+  float: right;
+  width: 50px;
+  cursor: pointer;
+}
+</style>