创建新仓库

dist/electron/static/dialog/delField.vue

@@ -0,0 +1,89 @@
+<template>
+<div class="delField">
+  <div class="nav">
+    <span>删除字段</span>
+    <div  @click="close">×</div>
+  </div>
+  <div class="content">
+    <div class="item">
+      <span>字段名称：</span>
+      <select ref="selectField">
+        <option v-for="item in fieldArrs">{{ item }}</option>
+      </select>
+    </div>
+
+
+  </div>
+  <div class="btn">
+    <button @click="cancel">取消</button>
+    <button @click="submit">确定</button>
+  </div>
+</div>
+</template>
+
+<script>
+module.exports = {
+  data: function() {
+    return {
+      fieldArrs:[]
+    }
+  },
+  mounted(){
+    console.log(this.$parent.fieldArr)
+    this.fieldArrs=this.$parent.fieldArr
+  },
+  methods: {
+    init(arr) {
+      this.fieldArrs=arr
+    },
+    close(){
+      this.$parent.delFieldAble=false
+    },
+    cancel(){
+      this.$parent.delFieldAble=false
+    },
+    submit(){
+      console.log("要删除的字段为",this.$refs.selectField.value)
+    }
+  }
+}
+
+</script>
+
+<style scoped>
+.delField{
+  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;
+}
+.delField .nav{
+  background: #656565;
+  display: flex;
+  justify-content: space-between;
+  color: #fff;
+  padding: 1px 10px;
+}
+.delField .nav>div{
+  cursor: pointer;
+}
+.delField .content{
+
+  flex: auto;
+  padding: 1px 10px;
+
+}
+.delField .content .item{}
+.delField  .btn button{
+  margin:0 5px;
+  float: right;
+  width: 50px;
+  cursor: pointer;
+}
+</style>