公告项目2020/10/13

红太狼 2022-12-14 03:59 10阅读 0赞

## 重点难点： ##

![在这里插入图片描述][20201013105249271.png_pic_center]

1.  上传附件：在发布公告的时候需要上传附件：思路是将文件上传到一个新的接口中，得到返回的路径以及id，将id在发布公告的时候传给后台（此处后台会根据id进行关联，在查看这一条公告的时候通过这条公告的id重新请求这条公告的详情，在详情中会返回刚刚上传的附件）。（后台设计的这种模式并不是很好）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5X3lhbg_size_16_color_FFFFFF_t_70_pic_center]

1.  富文本框的编辑： 经历千难万险终于实现了富文本框的图片上传功能，下边附上代码，我是将富文本框抽离成了一个组件，在要使用的页面引入，其中就是配置比较麻烦 ，官网的介绍代码比较不全，引入的方法有些模糊，思路就是先注册tinymce然后通过自己的key来引入这tinymce，再配置自己想要的功能，最快的方法就是先实现一个完整的功能再去添加一些无关紧要的功能（即：先使用复杂的功能），比如我先实现了图片上传功能，再去添加文字格式化、对齐等等。

<template>
      <editor
        apiKey="自己官网注册tinymce的key值"
        initialValue="<p></p>"
         placeholder="在此输入内容"
        :init="inits"
        v-model="tinyContent"
        ref="fileObj"
      >
      </editor>
    </template>
    <script>
    import Editor from '@tinymce/tinymce-vue'
    
    export default { 
      name: 'app',
      components: { 
        editor: Editor
      },
      data() { 
        return { 
          tinyContent: '',
          inits: Object.freeze({ 
            height: 450,
            language: 'zh_CN',
            selector: 'textarea#local-upload',
            plugins: 'image code link',
            toolbar: 'undo redo | code|undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist checklist | forecolor backcolor casechange formatpainter removeformat | rotateleft rotateright | flipv fliph | editimage imageoptions| link image ',
            image_title: true,
            toolbar_mode: 'sliding',
            file_picker_types: 'image',
            file_picker_callback: (cb, value, meta) => { 
              let _this = this
              var input = document.createElement('input')
              input.setAttribute('type', 'file')
              input.setAttribute('accept', 'image/*')
    
              input.onchange = function () { 
                var file = this.files[0]
                var formData = new FormData()
                formData.append("file", file)
                let params = { 
                  type: 2
                }
                _this.$api.announce
                  .upload(formData, params)
                  .then((res) => { 
                    console.log(res)
                    if (res) { 
                      cb(res.fileAddress, {  title: file.name })
                      success(res.fileAddress)
                    }
                  })
                  .catch((err) => { 
                    _this.$message.error(err.$message)
                  })
              }
    
              input.click()
            },
            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
          })
        }
      },
      methods: { 
      }
    }
    </script>

在引入的页面

<TinymceEditor ref="tiny" />
     import TinymceEditor from './tinymce-editor'

1.  css:overflow：auto
2.  发布新公告提交之后表单要重新置空这个发布公告页面，此时如果贸然的用 this.form = \{\} 那么会触发表单的校验，再次进入你的页面你的页面就会飘红如下图所示，所以最简单的方法就是重置表单（重置表单可以移除校验，此时就不会触发校验）。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5X3lhbg_size_16_color_FFFFFF_t_70_pic_center 1]

// 取消
        resetForm(formName) { 
          this.$refs[formName].resetFields()
          this.$emit('close')
        },

待解决问题：  
table中某一个cell文字超长我想用超过的部分…隐藏，会导致table的布局错乱。如果所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5X3lhbg_size_16_color_FFFFFF_t_70_pic_center 2]

css样式也没什么问题

.border /deep/ .el-table { 
      .el-table__body-wrapper { 
        .cell { 
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #666666;
          line-height: 1;
        }
      }
    }

7.关于正则也使不熟练  
例如 文本框 只能输入文字

<el-input
              type="textarea"
              v-model="form.summary"
              maxlength="300"
              :rows="4"
              placeholder="只能输入文字内容 字数不超过300"
              onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"
            >
              ></el-input
            >

[20201013105249271.png_pic_center]: /images/20221123/cdb64154f5b6475a9a53380d3d8fd25a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5X3lhbg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/da9080715d944d0b96673d783d85ce88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5X3lhbg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/3e571fa9cba643e593ec23582f984aaf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5X3lhbg_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/4bb07079083e442bad3e7642a100ad98.png