VUE DIV模拟input框的基本处理
关键代码
<div class="dialog-main" :contenteditable= "editable"
v-text="noticeContent"
v-if="noDate"
innerHTML.length = "20"
ref="Maincontent"
@input="handleInput"
@compositionstart="handleStart"
@compositionend="handleEnd"
>
/**
* 限制输入长度
* 如10个中文，英文就可以20
*/
validateTextLength (value) {
// 中文、中文标点、全角字符按1长度，英文、英文符号、数字按0.5长度计算
let cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/g
let mat = value.match(cnReg)
let length
if (mat) {
length = (mat.length + (value.length - mat.length) * 0.5)
return length
} else {
return value.length * 0.5
}
},
/**
* @input事件
*/
handleInput (event) {
let text = event.target.innerText
this.valueHandle(event, text)
},
/**
* 处理逻辑
* strVale文本数据
*/
valueHandle (event, strVale) {
let _this = this
let text = strVale
this.sendContent = text
if (this.composing) {
return
}
let len = this.validateTextLength(text)
if (len > 500) {
this.$refs.Maincontent.innerHTML = text.substr(0, 500)
this.$refs.Maincontent.focus()
}
setTimeout(() => {
_this.keepLastIndex(event.target)
}, 5)
// 拓展 如果想要只需要前100位数据
// this.content = this.content.substring(0, 100)
},
/**
* 中文输入开始
*/
handleStart () {
this.composing = true
},
/**
* 中文输入结束
*/
handleEnd ($event) {
this.composing = false
let text = $event.target.innerHTML
// console.log($event.target.innerHTML)
this.valueHandle($event, text)
},
// 编辑
editHandle () {
this.editable = true
this.noDate = true
// let notice = this.NoticeContent
// this.NoticeContent(false)
},
全部代码
<template> <div class="del-confirm" v-if="groupNameStatus">
<div class="group-dialog">
<div class="dialog-content">
<p class="win-top">
<span class="win-txt">群公告</span>
<span class="edit" @click="editHandle" v-if="+userId === +groupCreaterId"><icon-svg name="icon-kaka-compile" icon-style="edit-ico"></icon-svg></span>
<span class="close-icon" @click="closeGroupNameDialog">
<icon-svg name="icon-kaka-close" icon-style="off-ico"></icon-svg>
</span>
</p>
<div class="dialog-main"
:contenteditable= "editable"
v-text="noticeContent"
v-if="noDate"
innerHTML.length = "20"
ref="Maincontent"
@input="handleInput"
@compositionstart="handleStart"
@compositionend="handleEnd"
>
</div>
<!-- <div>{{groupAnnouncement}}</div> -->
<div v-if="!noDate" class="dialog-main">暂无群公告</div>
<div class="name-create-btn" v-if="editable">
<div class="cancel" @click="cancelEdit">取消</div>
<div class="sure" @click="sure">确定</div>
</div>
<div class="edit-tips" v-if="!editable"><p class="tips-main">只有群主才能修改公告</p></div>
</div>
</div>
</div>
</template>
<script>
import api from '@/api/group'
export default {
name: 'notice',
showChatBox: {
type: Boolean,
default: false
},
data () {
return {
groupNameStatus: true,
friendsInfo: this.$store.getters.friendsInfo,
contactList: {},
checkedContact: [],
searchVal: '',
groupName: '',
userId: this.$store.getters.userId,
noticeContent: '',
editable: false,
noDate: false,
sendContent: '',
composing: false
}
},
computed: {
// 群id
groupId () {
return this.$store.state.mainInit.showGroupNoticeId.groupId
},
// 群id
groupCreaterId () {
return this.$store.getters.groupSetInfo.createrId
},
groupAnnouncement () {
return this.$store.getters.groupSetInfo.groupAnnouncement
},
NoticeContent: {
get () {
let groupAnnouncement = this.$store.getters.groupSetInfo.groupAnnouncement
if (groupAnnouncement) {
this.noDate = true
this.noticeContent = groupAnnouncement
}
return groupAnnouncement
},
set (v) {
// 使用vuex中的mutations中定义好的方法来改变
let groupNotice = this.$store.state.mainInit.showGroupNoticeId
let copyMyinfo = Object.assign({}, groupNotice)
copyMyinfo.groupInfo.groupAnnouncement = v
console.log(copyMyinfo)
this.$store.dispatch('showGroupNoticeId', copyMyinfo)
}
}
},
methods: {
/**
* 限制输入长度
* 如10个中文，英文就可以20
*/
validateTextLength (value) {
// 中文、中文标点、全角字符按1长度，英文、英文符号、数字按0.5长度计算
let cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/g
let mat = value.match(cnReg)
let length
if (mat) {
length = (mat.length + (value.length - mat.length) * 0.5)
return length
} else {
return value.length * 0.5
}
},
/**
* @input事件
*/
handleInput (event) {
let text = event.target.innerText
this.valueHandle(event, text)
},
/**
* 处理逻辑
* strVale文本数据
*/
valueHandle (event, strVale) {
let _this = this
let text = strVale
this.sendContent = text
if (this.composing) {
return
}
let len = this.validateTextLength(text)
if (len > 500) {
this.$refs.Maincontent.innerHTML = text.substr(0, 500)
this.$refs.Maincontent.focus()
}
setTimeout(() => {
_this.keepLastIndex(event.target)
}, 5)
// 拓展 如果想要只需要前100位数据
// this.content = this.content.substring(0, 100)
},
/**
* 中文输入开始
*/
handleStart () {
this.composing = true
},
/**
* 中文输入结束
*/
handleEnd ($event) {
this.composing = false
let text = $event.target.innerHTML
// console.log($event.target.innerHTML)
this.valueHandle($event, text)
},
// 编辑
editHandle () {
this.editable = true
this.noDate = true
// let notice = this.NoticeContent
// this.NoticeContent(false)
},
closeCreateGroupWindow () {
this.$electron.ipcRenderer.send('closeCreateGroup')
},
// 取消
cancelEdit () {
this.editable = false
if (this.noticeContent) {
this.noDate = true
} else {
this.noDate = false
}
},
// 关闭
closeGroupNameDialog () {
this.$store.dispatch('showGroupNotice', false)
this.editable = false
},
// 确定保存
sure () {
// console.log(this.noticeContent) 公告接口测试修改
let groupId = this.$store.state.mainInit.showGroupNoticeId.groupId
let params = {
userId: this.$store.getters.userId,
groupId: groupId,
groupAnnouncement: this.sendContent,
devType: 3
}
api.sendAnnouncement(params).then(res => {
console.log(res)
if (res.code === '1') {
this.$store.dispatch('showGroupNotice', false)
// 保存到当前的VUEX
let groupSetInfo = this.$store.getters.groupSetInfo
let copyMyinfo = Object.assign({}, groupSetInfo)
copyMyinfo.groupAnnouncement = this.sendContent
this.$store.dispatch('groupSetInfo', copyMyinfo)
}
this.editable = false
// this.$store.commit('SHOW_HANDLESUCCESS', true)
}).catch(err => {
console.log(err)
})
},
keepLastIndex (obj) {
if (window.getSelection) { // ie11 10 9 ff safari
obj.focus() // 解决ff不获取焦点无法定位问题
let range = window.getSelection() // 创建range
range.selectAllChildren(obj) // range 选择obj下所有子内容
range.collapseToEnd() // 光标移至最后
} else if (document.selection) { // ie10 9 8 7 6 5
let range = document.selection.createRange() // 创建选择对象
// var range = document.body.createTextRange();
range.moveToElementText(obj) // range定位到obj
range.collapse(false) // 光标移至最后
range.select()
}
},
getNoticeData () {
let groupAnnouncement = this.$store.getters.groupSetInfo.groupAnnouncement
if (groupAnnouncement) {
this.noDate = true
this.noticeContent = groupAnnouncement
}
}
},
created () {
// this.dealContactList()
this.getNoticeData()
}
}
</script>
<style scoped lang="scss">
.del-confirm {
position: absolute;
width: 100%;
height: 100%;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color:rgba(0, 0, 0, 0);
z-index: 999;
.win-top {
height: 40px;
background-color: #F5F6F7;
padding-left: 20px;
border-radius: 4px;
// @extend .drag;
.win-txt {
float: left;
font-size: 14px;
color: #252B38;
line-height: 40px;
// @extend .no-drag;
}
.edit{
width: 15px;
height: 14px;
line-height: 40px;
margin-left: 10px;
cursor: pointer;
}
.close-icon {
float: right;
width: 30px;
height: 30px;
margin-top: 5px;
margin-right: 5px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
.iconsvg {
color: #A4A4A7;
font-size: 9px;
}
&:hover {
& > .off-ico {
color: #f45454;
}
}
@extend .no-drag;
}
}
.group-dialog {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: $rgba;
z-index: 1;
.dialog-content {
width: 338px;
height: 440px;
position: absolute;
background-color: #fff;
left: 50%;
top: 50%;
margin-left: -169px;
margin-top: -220px;
box-shadow: 0 2px 10px 2px rgba(0, 0, 0, .19);
border-radius: 4px;
.dialog-main {
height: 350px;
padding: 20px;
overflow: auto;
// -webkit-user-modify: read-write-plaintext-only;
outline: none;
[contenteditable]:empty:not(:focus):before{
content: attr(placeholder)
}
&:focus {
outline: none;
}
}
}
.group-name {
width: 213px;
height: 22px;
border: 1px solid #E2E6E9;
font-size: 12px;
color: #232936;
padding: 0 7px;
display: block;
margin: 22px auto 35px;
&:focus {
outline: none;
}
}
.name-create-btn {
text-align: center;
// height: 30px;
font-size: 0;
.cancel {
display: inline-block;
width: 68px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
background-color: #ffffff;
border: 1px solid #999;
color: #333;
margin-right: 15px;
}
.sure{
display: inline-block;
margin-left: 15px;
width: 68px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
background-color: $btn-confim;
color: #fff;
border: 1px solid $btn-confim;
}
}
.edit-tips {
text-align: center;
height: 30px;
line-height: 30px;
.tips-main{
font-size:10px;
color:rgba(162,164,168,1);
position: relative;
&::after,&::before {
content: '';
width: 20px;
height: 1px;
background:rgba(216,216,216,1);
border-radius: 1px;
position: absolute;
}
&::after {
left: 90px;
top: 15px;
}
&::before {
right: 90px;
top: 15px;
}
}
}
}
}
</style>
以上是 VUE DIV模拟input框的基本处理 的全部内容， 来源链接： utcz.com/z/375432.html
