feat:文件名编辑样式

张含笑

2025-06-10 dfa8d9daa07bdc3be1f570eca84b87a26d7bded7

feat:文件名编辑样式

 src/views/dataCenter/dataCenter.vue

@@ -69,21 +69,22 @@
                dialogDetailList?.filename
              }}</span>
              <el-input
                                            v-else
                                            v-model="dialogDetailList.filename"
                                            @keyup.enter="saveTitle()"
                                            class="title-input"
                                            clearable
                                        />
                v-else
                v-model="dialogDetailList.filename"
                @keyup.enter="saveTitle()"
                class="title-input"
                clearable
              />
            </div>
            <div class="editname" @click="editTitle(dialogDetailList)"
              >
              <span v-if="!dialogDetailList.checkedinput"><el-icon><Edit /></el-icon></span>
            <div class="editname" @click="editTitle(dialogDetailList)">
              <span v-if="!dialogDetailList.checkedinput"
                ><el-icon><Edit /></el-icon
              ></span>
              <div v-else class="suffixBoxEdit">
                                        <div class="editText" @click="submitEditSuffix(item, index)">✔</div>
                                        <div class="editText" @click="cancelEditSuffix(item, index)">✖</div>
                                    </div>
                <div class="editText" @click="submitEditSuffix(item, index)">✔</div>
                <div class="editText" @click="cancelEditSuffix(item, index)">✖</div>
              </div>
            </div>
          </div>
          <div>任务名称：{{ dialogDetailList?.taskname }}</div>
          <div>所属区域：{{ dialogDetailList?.address }}</div>
@@ -191,10 +192,9 @@
  });
};
// 编辑文件名
const editTitle = (val) => {
  console.log('val',val);
  val.checkedinput = !val.checkedinput
  
const editTitle = val => {
  console.log('val', val);
  val.checkedinput = !val.checkedinput;
};
</script>

@@ -252,8 +252,9 @@
        cursor: pointer;
      }
      .inputEdit {
      display: flex;
      align-items: center;}
        display: flex;
        align-items: center;
      }
    }
    div {
      margin-bottom: 20px;
@@ -271,28 +272,32 @@
  }
}
.title-input {
    margin-bottom: 0 !important;
width: 50%;}
    .suffixBoxEdit {
                        display: flex;
                        // align-items: center;
                        justify-content: space-between;
            margin-bottom: 0 !important;
                        font-size: 16px;
                        > .editText {
                            cursor: pointer;
                            margin-right: 6px;
                            &:hover {
                                transform: scale(1.2);
                            }
                        }
                        .editimg {
                            cursor: pointer;
                            width: 15px;
                            height: 15px;
                            &:hover {
                                transform: scale(1.2);
                            }
                        }
                    }
  margin-bottom: 0 !important;
  width: 70%;
}
.editname {
  margin-bottom: 0 !important;
}
.suffixBoxEdit {
  display: flex;
  // align-items: center;
  justify-content: space-between;
  margin-bottom: 0 !important;
  font-size: 16px;
  > .editText {
    cursor: pointer;
    margin-right: 6px;
    &:hover {
      transform: scale(1.2);
    }
  }
  .editimg {
    cursor: pointer;
    width: 15px;
    height: 15px;
    &:hover {
      transform: scale(1.2);
    }
  }
}
</style>