12 |
13 |
14 |
--------------------------------------------------------------------------------
/vue-edit/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './index.vue'
3 | import '@/assets/css/reset.css'
4 |
5 | new Vue({
6 | render: h => h(App)
7 | }).$mount('#app')
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/vue-edit/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
8 |
35 |
36 |
--------------------------------------------------------------------------------
/vue-edit/src/chooseImg.js:
--------------------------------------------------------------------------------
1 | /**
2 | * 预览函数
3 | *
4 | * @param {*} dataUrl base64字符串
5 | * @param {*} cb 回调函数
6 | */
7 | function toPreviewer (dataUrl, cb) {
8 | cb && cb(dataUrl)
9 | }
10 |
11 | /**
12 | * 图片压缩函数
13 | *
14 | * @param {*} img 图片对象
15 | * @param {*} fileType 图片类型
16 | * @param {*} maxWidth 图片最大宽度
17 | * @returns base64字符串
18 | */
19 | function compress (img, fileType, maxWidth) {
20 | let canvas = document.createElement('canvas')
21 | let ctx = canvas.getContext('2d')
22 |
23 | const proportion = img.width / img.height
24 | const width = maxWidth
25 | const height = maxWidth / proportion
26 |
27 | canvas.width = width
28 | canvas.height = height
29 |
30 | ctx.fillStyle = '#fff'
31 | ctx.fillRect(0, 0, canvas.width, canvas.height)
32 | ctx.drawImage(img, 0, 0, width, height)
33 |
34 | const base64data = canvas.toDataURL(fileType, 0.75)
35 | canvas = ctx = null
36 |
37 | return base64data
38 | }
39 |
40 | /**
41 | * 选择图片函数
42 | *
43 | * @param {*} e input.onchange事件对象
44 | * @param {*} cb 回调函数
45 | * @param {number} [maxsize=200 * 1024] 图片最大体积
46 | */
47 | function chooseImg (e, cb, maxsize = 200 * 1024) {
48 | const file = e.target.files[0]
49 |
50 | if (!file || !/\/(?:jpeg|jpg|png)/i.test(file.type)) {
51 | return
52 | }
53 |
54 | const reader = new FileReader()
55 | reader.onload = function () {
56 | const result = this.result
57 | let img = new Image()
58 |
59 | if (result.length <= maxsize) {
60 | toPreviewer(result, cb)
61 | return
62 | }
63 |
64 | img.onload = function () {
65 | const compressedDataUrl = compress(img, file.type, maxsize / 1024)
66 | toPreviewer(compressedDataUrl, cb)
67 | img = null
68 | }
69 |
70 | img.src = result
71 | }
72 |
73 | reader.readAsDataURL(file)
74 | }
75 |
76 | export default chooseImg
77 |
--------------------------------------------------------------------------------
/vue-edit/src/cursorPosition.js:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * 获取光标位置
4 | * @param {DOMElement} element 输入框的dom节点
5 | * @return {Number} 光标位置
6 | */
7 | export const getCursorPosition = (element) => {
8 | let caretOffset = 0
9 | const doc = element.ownerDocument || element.document
10 | const win = doc.defaultView || doc.parentWindow
11 | const sel = win.getSelection()
12 | if (sel.rangeCount > 0) {
13 | const range = win.getSelection().getRangeAt(0)
14 | const preCaretRange = range.cloneRange()
15 | preCaretRange.selectNodeContents(element)
16 | preCaretRange.setEnd(range.endContainer, range.endOffset)
17 | caretOffset = preCaretRange.toString().length
18 | }
19 | return caretOffset
20 | }
21 |
22 | /**
23 | * 设置光标位置
24 | * @param {DOMElement} element 输入框的dom节点
25 | * @param {Number} cursorPosition 光标位置的值
26 | */
27 | export const setCursorPosition = (element, cursorPosition) => {
28 | const range = document.createRange()
29 | range.setStart(element.firstChild, cursorPosition)
30 | range.setEnd(element.firstChild, cursorPosition)
31 | const sel = window.getSelection()
32 | sel.removeAllRanges()
33 | sel.addRange(range)
34 | }
35 |
--------------------------------------------------------------------------------
/vue-edit/src/emoji.js:
--------------------------------------------------------------------------------
1 | export default {
2 | smiles: '😀 😁 😂 🤣 😃 😄 😅 😆 😉 😊 😋 😎 😍'.split(' ')
3 | }
4 |
--------------------------------------------------------------------------------
/vue-edit/src/paste.js:
--------------------------------------------------------------------------------
1 | import chooseImg from './chooseImg.js'
2 |
3 | const onPaste = (e) => {
4 | if (!(e.clipboardData && e.clipboardData.items)) {
5 | return
6 | }
7 | return new Promise((resolve, reject) => {
8 | for (let i = 0, len = e.clipboardData.items.length; i < len; i++) {
9 | const item = e.clipboardData.items[i]
10 | if (item.kind === 'string') {
11 | item.getAsString((str) => {
12 | resolve(str)
13 | })
14 | } else if (item.kind === 'file') {
15 | const pasteFile = item.getAsFile()
16 | const imgEvent = {
17 | target: {
18 | files: [pasteFile]
19 | }
20 | }
21 | chooseImg(imgEvent, (url) => {
22 | resolve(url)
23 | })
24 | } else {
25 | reject(new Error('Not allow to paste this type!'))
26 | }
27 | }
28 | })
29 | }
30 |
31 | export default onPaste
32 |
--------------------------------------------------------------------------------
/vue-edit/复制图片测试.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
Document
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/聊天底部.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
9 |
将滚动条（scrollbar）保持在最底部的方法 - 滚动条, scrollbar, 页面底部, 聊天窗口,
10 |
11 |
12 |
13 |
14 |
将滚动条（scrollbar）保持在最底部的方法
15 |
16 |
17 |
25 |
请点击“插入一行”按钮，插入最新信息，当出现滚动条时，滚动条将自动保持在底部。
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/聊天底部2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
9 |
将滚动条（scrollbar）保持在最底部的方法 - 滚动条, scrollbar, 页面底部, 聊天窗口,
10 |
11 |
12 |
13 |
14 |
将滚动条（scrollbar）保持在最底部的方法
15 |
16 |
请点击“插入一行”按钮，插入最新信息，当出现滚动条时，滚动条将自动保持在底部。
17 |
21 |
22 |
23 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
70 |
71 | 
4 |
5 | 
6 |
7 | Live Demo & Documentation: https://fritx.github.io/vue-at
8 |
9 | *Docs is powered by [At-UI](https://github.com/AT-UI/at-ui).*
10 |
11 | - [x] Chrome/Firefox/Edge/IE9~IE11
12 | - [x] Plain-text based, no jQuery, no extra nodes
13 | - [x] ContentEditable/Textarea
14 | - [x] Avatars, custom templates
15 | - [x] Vue2/Vue1
16 |
17 | See also: [react-at](https://github.com/fritx/react-at)
18 |
19 | ## Motivation
20 |
21 | [At.js](https://github.com/ichord/At.js) is awesome, but:
22 |
23 | - It is based on jQuery and jQuery-Caret.
24 | - It introduces extra node wrappers.
25 | - It could be unstable on content edit/copy/paste.
26 |
27 | Finally I ended up creating this.
28 |
29 | ```plain
30 | npm i vue-at@2.x # for Vue2 <----
31 | npm i vue-at@1.x # for Vue1 (branch vue1-legacy)
32 | npm i vue1-at # for Vue1 (branch vue1-new)
33 | ```
34 |
35 | ```vue
36 |
37 |