解决markdown高度问题标签创建后自动选择删除选择的标签

58958f9d · 高浩杰 · 4c6c0896 · 58958f9d · 58958f9d
Commit 58958f9d authored Feb 09, 2020 by 高浩杰
Show whitespace changes
Inline Side-by-side

Showing with 83 additions and 22 deletions

components/pc/select/selectCard.vue
+12 -14

pages/project/release/index.vue
+71 -8

No files found.
--- a/components/pc/select/selectCard.vue
+++ b/components/pc/select/selectCard.vue
 <template>
  <div>
-    <div class="select-container" v-if="selectType === '1'" style="height: 100px;">
+    <div class="select-container" v-if="selectType === '1'" style="min-height: 100px;width: 354px;">
      <div class="select-container__input-box">
        <div>
          <!--@focus="handleShow"-->
@@ -9,8 +9,8 @@
            @blur="isShow=false"
            @keyup.enter="handleSearch"
            v-model="value.tag"
+            ref="tag"
          >
-          <span>{{list.length ? list.length : 0}}</span>
          <transition name="fade">
            <div class="label-list__wrap" v-if="isShow || isShow2" @mouseleave="isShow2=false">
              <div class="label-list">
@@ -41,9 +41,9 @@
        ></label-wrap>
      </div>
    </div>
-    <div class="select-container" v-if="selectType === '2'" style="width: 196px">
+    <div class="select-container" v-if="selectType === '2'" style="width: 196px" @mouseleave="isShow=false">
      <div class="input-box" @click="handleShow">
-        <input type="text" v-model="value.tag" disabled="true" :placeholder="placeholder">
+        <input type="text" v-model="value.tag" :placeholder="placeholder" ref="select">
        <div class="icon-box">
          <yun-icon name="down_arrow" size="10px" color="#999"></yun-icon>
        </div>
@@ -82,7 +82,6 @@ export default {
        tag: 'web'
      }],
      searchList: [],
-      arr: [],
      result: [],
      value: {
        tagId: '',
@@ -124,6 +123,7 @@ export default {
    // 删除选中的标签
    handleDelete(index){
      this.result.splice(index, 1);
+      this.$emit('handleTag', this.result);
    },
    // 回车后，进行搜索
    async handleSearch(){
@@ -154,9 +154,9 @@ export default {
    },
    // 点击 标签 自动选择
    handleTags(){
-      this.arr.push(this.value);
+      this.result.push(this.value);
      let map = new Map();
-      for (let item of this.arr) {
+      for (let item of this.result) {
        console.log(item);
        if (!map.has(item.tag)) {
          map.set(item.tag, item)
@@ -183,6 +183,11 @@ export default {
            tagType: 0
          }).then(res => {
            if (res.code === 0) {
+              let obj = {
+                tagId: res.data.tagId,
+                tag: res.data.tagName
+              };
+              this.result.push(obj);
              this.$popupbox.close();
              this.$message({
                type: 'success',
@@ -221,13 +226,6 @@ export default {
        background-color: #F4F8FA;
        @include border-radius(4*$length);
      }
-      > span {
-        position: absolute;
-        right: 16*$length;
-        top: 14*$length;
-        @extend %cursorPointer;
-        @include fontStyle(14,19,500,#666,left);
-      }
      .label-list{
        position: absolute;
        top:56*$length;

--- a/pages/project/release/index.vue
+++ b/pages/project/release/index.vue
@@ -23,12 +23,13 @@
          <div class="blog-release__header">
            <div class="header-content">
              <span>*</span>
-              <input type="text" placeholder="请输入项目名称" v-model="name">
+              <input type="text" placeholder="请输入项目名称" v-model="name" ref="name">
            </div>
            <div class="header-content">
              <div class="select__wrap">
                <span>*</span>
                <select-card
+                  ref="license"
                  selectType="2"
                  :class-list="classList"
                  @handleClass="(val) => this.license = val.tag"
@@ -37,6 +38,7 @@
              <div class="select__wrap">
                <span>*</span>
                <select-card
+                  ref="language"
                  selectType="2"
                  :class-list="classList"
                  @handleClass="(val) => this.language = val.tag"
@@ -45,6 +47,7 @@
              <div class="select__wrap">
                <span>*</span>
                <select-card
+                  ref="system"
                  selectType="2"
                  :class-list="classList"
                  @handleClass="(val) => this.system = val.tag"
@@ -54,7 +57,7 @@
            <div class="header-content">
              <div class="header-content__left">
                <span>*</span>
-                <input type="text" placeholder="项目所在地址链接" v-model="addressLink" style="width: 461px;">
+                <input type="text" placeholder="项目所在地址链接" v-model="addressLink" ref="addressLink" style="width: 461px;">
              </div>
              <div class="select__wrap">
                <span>*</span>
@@ -66,6 +69,7 @@
              <div class="select__wrap">
                <span>*</span>
                <select-card
+                  ref="projectClass"
                  selectType="2"
                  :class-list="classList"
                  @handleClass="(val) => this.projectClass = val.tag"
@@ -82,18 +86,19 @@
            </div>
            <div class="header-content">
              <span>*</span>
-              <input type="text" placeholder="请用一句话介绍该项目" v-model="projectDescription">
+              <input type="text" placeholder="请用一句话介绍该项目" ref="projectDescription" v-model="projectDescription">
            </div>
          </div>
          <div class="blog-release__content">
            <span>*</span>
            <div class="editor-container">
              <mavon-editor
+                ref="editor"
                v-model="value"
                :toolbars="markdownOption"
                class="editor"
                :style="{zIndex: zIndex}"
-                placeholder="问题详情...."
+                placeholder="项目详情...."
                @imgAdd="imgAdd"
                @imgDel="imgDel"
                @save="save"
@@ -109,7 +114,7 @@
            </p>
            <div class="footer__right">
              <p>已自动存为草稿</p>
-              <button class="preview" @click="readScreen">预览</button>
+              <button class="preview">预览</button>
              <button class="submit" @click="postProject">提交</button>
            </div>
          </div>
@@ -210,6 +215,13 @@ export default {
      }
    },
    async changeToUploadCover(e) {
+      if (e.target.files[0].size > (8 * Math.pow(2, 20))) {
+        this.$message({
+          type: 'warning',
+          message: '文件大小超过8M，请重新选择文件！'
+        });
+        return
+      }
      let formData = new window.FormData();
      formData.append('file', e.target.files[0]);
      formData.append('type', 2);
@@ -234,6 +246,56 @@ export default {
    },
    // 检测项目必填项是否完成
    checkProject() {
+      // 检测是否在浏览器环境下
+      if (process.browser) {
+        if (this.name === '') {
+          this.$refs.name.focus();
+          this.$message({
+            type: 'warning',
+            message: '请输入请输入项目名称'
+          })
+        }
+        if (this.license === '') {
+          console.log(this.$refs.license);
+          this.$refs.license.handleShow();
+          this.$refs.license.$refs.select.focus();
+          this.$message({
+            type: 'warning',
+            message: '请选择授权协议'
+          })
+        }
+        if (this.language === '') {
+          this.$refs.language.handleShow();
+          this.$refs.language.$refs.select.focus();
+          this.$message({
+            type: 'warning',
+            message: '请选择开发语言'
+          })
+        }
+        if (this.system) {
+          this.$refs.system.handleShow();
+          this.$refs.system.$refs.select.focus();
+          this.$message({
+            type: 'warning',
+            message: '请选择操作系统'
+          })
+        }
+        if (this.addressLink === '') {
+        }
+        if (this.projectClass === '') {
+        }
+        if (this.projectDescription === '') {
+        }
+        if (this.value === '') {
+        }
+        if (this.imgSrc === '') {
+        }
+      } else {
        if (this.name !== '' && this.license !== '' && this.language !== '' && this.system !== ''
          && this.addressLink !== '' && this.projectClass !== '' && this.projectDescription !== ''
          && this.value !== '' && this.imgSrc !== ''
@@ -246,6 +308,7 @@ export default {
          });
          return false
        }
+      }
    },
    // 发布项目
    async postProject() {
@@ -287,8 +350,7 @@ export default {
        }
        console.log(projectRes);
        if (projectRes.code === 0) {
-          // console.log(this.$options.data());
+          this.$router.push('http://localhost:3010/personal-center/home/project');
-          // Object.assign(this.$data, this.$nuxt.$options.data());
          this.$message({
            type: 'success',
            message: '项目发布成功'
@@ -370,10 +432,11 @@ export default {
          .editor-container {
            width: 723*$length;
            height: 230*$length;
            .editor {
              min-height: 230*$length;
              min-width: 723*$length;
+              max-height: 230*$length;
+              max-width: 732*$length;
            }
          }
        }