双击可编辑文本组件以及音乐播放组件
最近项目中遇到了各种各样的问题,真让人头大鸭~
双击可编辑文本组件
组件的功能
- 双击文本,光标定位到文字后
- 根据可编辑的 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.
音乐组件
组件的功能
- 上传音乐
- 获取本地地址进行播放
- 播放进度条
功能展示
实现过程
部分代码,获取本地的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...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。