小知识点

1，es6里面箭头函数和forEach循环

图片.png

2，vue里面给数据赋值 -响应式

图片.png
图片.png

3，every

 var rel ,
     arr = [true,true,true,true];    //数组有一个是false的话  rel的值就为false
     rel = arr.every(function(x){
            return x    //这里可以返回一个表达式的判断 结果也是一个 true  或者 false 的值
     })
     rel

4， vue里面的计算属性值

图片.png
图片.png
图片.png
图片.png
图片.png
图片.png

5，判断元素属性是否存在的写法

图片.png

6， v-show 的使用

图片.png

7，vue路由传值

   //传值
   this.$router.push({path:'/searchresult',query:{gamebaglist:gamebagdata}})

图片.png

  //获取值
  this.getgamebag = this.$route.query.gamebaglist

图片.png

8，图片上传

1）页面结构

图片.png
图片.png

          upimg(){
                var $picture = $("#picture"),
                    current_pic = $picture[0].files[0],
                    _this = this,
                    
                    var form = new FormData(),
                        url = this.addoriginimg

                        form.append("uploadfile", current_pic)

                        var settings = {
                            "async": true,
                            "crossDomain": true,
                            "url": url,
                            "method": "POST",
                            "processData": false,
                            "contentType": false,
                            "mimeType": "multipart/form-data",
                            "data": form
                        }


                        axios(settings).then(res => {
                            var dataobj = res.data.Data
                            _this.origingame.Link.push(dataobj)
                        })
            }

9，富文本

1） 安装wangeditor

 npm i wangeditor

2） 导入wangeditor资源

 import E from 'wangeditor'  

3）页面结构

图片.png

4）执行代码（vue）

实例化一个富文本+ 配置图片上传 + 得到编辑内容

     seteditor(){
            var editor = new E('#editor')
     
            editor.customConfig.uploadFileName = 'uploadfile'
            editor.customConfig.uploadImgServer = url.uploadimg

            editor.customConfig.uploadImgHooks = {
                customInsert: function (insertImg, result, editor) {
                            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
                    
                            // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                            var url =result.Data
                            insertImg(url)
                    
                            // result 必须是一个 JSON 格式字符串！！！否则报错
                        }
                    }

            editor.customConfig.debug=true
            editor.customConfig.onchange = (html) => {
                this.gwmodifyInfos.content = html
            }
            editor.create()

            //把editor挂载到data上面
            this.Oeditor = editor
        }    

图片.png

5）显示编辑的富文本

从后端传回的数据是字符串 不能直接显示在页面上 那么 通过「 html() 设置 」

图片.png
图片.png

beforeUpdate() {
        this.$nextTick(function () {
            var $content = $(".game-description")

            for (var i = 0; i < this.origingamelist.length; i++) {
                $content.eq(i).html(this.origingamelist[i].Description)

                var ele = $content.eq(i)[0],
                    obj = ele.getElementsByTagName('*')

                for (var j = 0; j < obj.length; j++) {
                    obj[j].style.fontSize = '';
                    obj[j].style.lineHeight = '1.3';
                }
            }
        })
    }