双击可编辑文本组件以及音乐播放组件

双击可编辑文本组件以及音乐播放组件

最近项目中遇到了各种各样的问题，真让人头大鸭~

双击可编辑文本组件

组件的功能

1. 双击文本，光标定位到文字后
2. 根据可编辑的 div 动态的改变展示 div 的高度

功能展示

实现过程

第一次实现时，使用了一个展示的div, 一个输入的input,双击时隐藏div，显示input.但是input没有办法换行输入....
第二次实现时，使用了可编辑的div输入，但是双击时，光标总是定位在文字最前面...

     dbClick(event) {
        this.showDiv = false  // 显示文字的 div 隐藏
        let textDiv = document.getElementById('editText')
        let selection = window.getSelection()  // 表示用户选择的文本范围或光标的当前位置
        let range = document.createRange() // 创建一个 range对象，range对象表示文档的连续范围区域
        range.selectNodeContents(textDiv) // 设置 range 使其包含一个 node 的内容。
        range.collapse(false) // 表示把range 折叠到结束位置
        selection.removeAllRanges()// 将用户当前选取的所有内容设定为非选取状态
        selection.addRange(range) // 最后在将这个文本区域添加到文本选区
        setTimeout(() => {
            document.getElementById('editText').focus()
        }, 200)
    },

可编辑的 div 的高度需要设置为 height: auto ,每一次失焦时，获取可编辑的 div 的高度，赋值给展示 div.

音乐组件

组件的功能

1. 上传音乐
2. 获取本地地址进行播放
3. 播放进度条

功能展示

实现过程

部分代码，获取本地的url

     getObjectURL(file) {
        let url = null
        var binaryData = []
        binaryData.push(file)
        if (window.createObjectURL != undefined) { // basic  
          url = window.createObjectURL(new Blob(binaryData, {
            type: 'application/zip'
          }))
        } else if (window.URL != undefined) { // mozilla(firefox)  
          url = window.URL.createObjectURL(new Blob(binaryData, {
            type: 'application/zip'
          }))
        } else if (window.webkitURL != undefined) { // webkit or chrome  
          url = window.webkitURL.createObjectURL(new Blob(binaryData, {
            type: 'application/zip'
          }))
        }
        return url
      }

后续补上两个组件的地址...

补充：

Q1 ：前后端分离开发，使用 axios 的 get 请求传递参数时没有出现任何问题，但是使用 post 请求传递参数时，后端没有接收到数据并且浏览器中也没有任何参数提示？
A1： 后端接受的数据格式不是JSON格式，而是form数据。可以使用qs库的 qs.stringify(params)将一个参数对象格式化为一个字符串。
Q2：html() 和 text() 和 val()的区别
A2： html() 方法返回或设置被选元素的内容 (inner HTML)，包括标签。val() 方法返回或设置被选元素的值。元素的值是通过 value 属性设置的。该方法大多用于 input 元素。text()只输出标签内的文本内容，和js的innerText方法一样
Q3：获取 div 的高度的方法？
A3：offsetHeight的值包括元素内容+内边距+边框，而clientHeight的值等于元素内容+内边距。区别就在于有没有边框.直接利用style属性获取元素高度,style属性只能获取元素标签style属性里的值。getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象。
Q4：click.native 的使用场景？
A4：.native - 监听组件根元素的原生事件。native - 主要是给自定义的组件添加原生事件。例如ui 组件库的组件上的点击事件
Q5：爷爷组件和孙子组件之前传值?
A5：可以不使用 $emit 进行传值，可以使用 eventBus 来分发事件

参考文献

Javascript标准DOM Range操作 http://www.cnblogs.com/rainma...