前端开发总结

来源:http://www.prospettivedarte.com 作者:计算机教程 人气:88 发布时间:2019-05-11
摘要:编码都是以需求为导向的,所以编码前一定要弄清楚需要的结果是什么,然后再开始编码。 工作总结和经验教训 element ui:div class="form-right" div class="right_btns"转账汇款信息 el-button type="

编码都是以需求为导向的,所以编码前一定要弄清楚需要的结果是什么,然后再开始编码。

工作总结和经验教训

element ui:
<div class="form-right">
                        <div class="right_btns">转账汇款信息
                            <el-button type="primary" @click="addupload" v-if="adduploadShow"> </el-button>
                        </div>
                        <div class="upload_parent" v-if="uploadShow" v-for="(item, index) in datas_upload" :key="index">
                            <div class="defind_img_s">
                                <img :src="item.url" class="defind">
                                <el-upload
                                        :ref='"upload"   index'
                                        name="img_b"
                                        class="upload-demo"
                                        :action="uploadUrl"
                                        :headers="upload_hearder"
                                        :on-remove='handleRemove'
                                        :on-success='uploadSuc'
                                        :file-list='fileList'
                                        :show-file-list="false">
                                    <div @click='getUploadTag(item, index)' class="up_btns">{{item.up_btn}}</div>
                                </el-upload>
                                删除
                            </div>
                        </div>
                    </div>

 data() {
      return {
 // 上传成功后的id
        uploadId: '',
        // 重新上传成功后的id
        resetUploadId: '',
        // upload控件tag
        uploadTag: 0,
        // 上传图片文件列表
        fileList: [],
        upItem: {},
//        所有账号-select
        accVal: '1',
//        图片上传框初始数组
        datas_upload: [{ up_btn: '上传图片', upbtnGroup: false, imgId: '', url: '' }],
//       图片初始id数组
        imgArryid: [],


      }  
},
methods: {

//      点击“ ”按钮生成图片上传框
      addupload() {
        this.datas_upload.push({ up_btn: '上传图片', upbtnGroup: false, imgId: '', url: '' })
      },
//      获取图片id
    getimgId() {
      for (var i = 0; i < this.datas_upload.length; i  ) {
        this.imgArryid.push(this.datas_upload[i].imgId)
      }
      console.log(this.imgArryid, 785)
      return this.imgArryid
    },
//      图片上传
      getUploadTag(item, index) {
//        console.log(response, file, fileList, 564)
        this.uploadTag = index
        console.log(index, 220)
        this.upItem = item
      },
//      图片上传成功
      uploadSuc(response, file, fileList) {
        console.log(1230, response, response.id)
        console.log(file, fileList, 6630)
        // 把图片id添加到 uploadId 数据中
        this.datas_upload[this.uploadTag].imgId = response.id
        this.uploadId = response.id
        this.upItem.up_btn = '重新上传图片'
        this.upItem.upbtnGroup = true
        var imgs = 'imgs'   this.uploadTag
        console.log(this.$refs.imgs, 267)
        this.upItem.url = file.url
      },
      //      上传图片-删除
      delupload(item, index) {
        console.log(index, 562)
        for (var i = 0; i < this.datas_upload.length; i  ) {
          if (i != 0) {
            if (index == i) {
              this.datas_upload.splice(i, 1)
              this.datas_upload[index].imgId = ''
            }
          } else if (i == 0) {
            console.log(index, item, 563)
            this.datas_upload[index].imgId = ''
            this.datas_upload[index].url = ''
            item.up_btn = '上传图片'
            item.upbtnGroup = false
          }
        }
      },
      // 重新上传-success
      resetUploadSuc(response, file, fileList) {
        this.resetUploadId = response.id
        this.conResUploadView = false
        this.conRessubmitView = true
      }

}

在项目刚开始,一个html页面包含多个页面的信息,使用display样式来控制,显得力不从心,以及点击刷新按钮,刷新之后的效果不是刷新之前的页面,而且页面比较多而混乱,特别容易出错,所以使用ejs模板加hash方法,避免上面的问题,页面层次清晰。

图片 1

尝试了使用多个富文框,从ckeditor,wangeditor,到ueditor的使用,要求富文框有上传图片的功能,ckeditor富文框功能还是比较强大,刚开始接触,使用起来还比较生疏,在上传图片那块,可以上传图片,上传图片成功需要插入到编译器中没有实现,暂且先把这个编译器搁置一段时间,等哪次再拿出研究研究,使用wangeditor比较简单,在使用中也没任何问题,考虑到了之后浏览器的兼容性问题,功能也比较单一,使用了ueditor,在小伙伴的推荐下使用了ueditor,刚开始也遇到了上传图片的问题。

现在说下我的代码实现过程:

6.分页插件

注意:像这种可以生成多个数据的,首先想到使用数组的v-for循环遍历来实现,初始化默认有一个图片上传框,那就给数组一个初始化的对象,每当点击按钮就往数组中添加新的对象,利用数据的双向绑定,便能生成相应的dom元素,达到想要的效果。

这个阶段主要完成云市场和后台运营系统的项目,在开发期间,遇到了很多问题,问题分为两种,一种是可以规避的问题,另一种是确实是问题的问题。我将对以下的问题做简单的总结。

 

4.多种富文框使用中遇到的问题

现在简单的说下需求:如下图所示,点击蓝色的“ ”按钮,可以连续生成多个图片上传框,每个图片上传框都是单独上传图片,编辑互不影响。

7.销售规格页面根据数据动态生成表格

实现上传图片的功能上,遇到一些问题,比如不能上传相同图片,IE上上传图片错位的问题,在input的file对象会保存上传图片的信息,在每次使用上传图片之前或者之后,把file文件对象的信息删除,但是这个文件是只读,不能对它进行删除处理,有两种方式进行解决,第一种,删除input节点,第二种,改变input中的type。IE上传图片的问题,IE浏览器的input的上传文件弹出的对话框会阻塞js代码执行,改变change事件和click事件的执行位置就解决了。

1.页面样式布局

在IE浏览器下,select下拉框的默认样式与Google样式不一样,需要统一样式,首先要把默认样式隐藏,有两种方式解决,第一种,用背景图片;第二种,使用字体图标的方式;在input框中,按下enter键的处理,它会寻找页面第一个按钮进行click事件,我增加了一个button按钮,防止IE浏览器中input的enter事件;

本文由皇牌天下投注网发布于计算机教程,转载请注明出处:前端开发总结

关键词:

上一篇:python 作业 编写登陆接口

下一篇:没有了

最火资讯