test文档
作者：互联网
<template>
<div style="">
<div class="editor" style="width:500px;">
<div id="editorElem" style="text-align:left"></div>
</div>
<ul>
<li
style="width:100px;border:1px solid red;"
v-for="(item,index) in walkingist"
:key="index"
>
<span>{{item.length}}</span>
<marquee behavior direction scrollamount="5" v-if="item.length>10">{{item}}</marquee>
<span v-if="item.length <= 10">{{item}}</span>
</li>
</ul>
<!-- 下拉菜单 -->
<div class="select" v-clickoutside="handleClose">
<el-button @click="manageUser">{{choseOpt}}</el-button>
<ul class="select-box" v-show="selectFlag">
<li
v-for="(item,index) in optList"
:key="index"
@click="optionClick(item)"
>{{item.value}}</li>
</ul>
</div>
<!-- 对应专柜 -->
<div class="select" v-clickshopside="shopClose" v-if="selectedID == 1">
<el-button @click="choseShop">{{shopeName}}</el-button>
<ul class="select-box" v-if="shopeFlag">
<li
v-for="(item,index) in shoppeList"
:key="index"
@click="shopClick(item)"
class="shop-name"
>
<span>{{item.value.length}}</span>
<marquee
behavior
direction
scrollamount="5"
v-if="item.value.length>10"
>{{item.value}}</marquee>
<span v-if="item.value.length <= 10">{{item.value}}</span>
</li>
</ul>
</div>
<!-- vue循环实现多个下拉菜单 -->
<div @click="hideArr">
<ul class="con_ul">
<li
v-for="(testArr,t) in testArrs"
:key="t"
@click.stop="selLi=t"
style="border:1px solid red;width:100px;"
>
<span>{{testArr.title}} ></span>
<ul class="con_small" v-if="selLi==t">
<li
v-for="(con,c) in testArr.cons"
:key="c"
@click.stop="option(t,c)"
>{{con}}</li>
</ul>
</li>
</ul>
</div>
<div @click="checkChanged(0)">
<span :class="[ is_promoted == false? 'chose' : 'chose-act']"></span>
<span>是否推广</span>
</div>
<div @click="checkChanged(1)">
<span :class="[ is_adv == false? 'chose' : 'chose-act']"></span>
<span>是否推广</span>
</div>
<!--循环 获取光标位置 -->
<div style="display:flex;flex-direction:column;">
<div class="el-textarea" v-for="(item,index) in shoppeList" :key="index">
<textarea v-model="item.content" type="textarea" rows="10" autocomplete="off" ref="ttl" :class="`calss${index}`"></textarea>
<!-- <button @click="insertAtCursor(item,index)" type="button" :id="'btn'+index">插入字段</button> -->
<button @click="insertAtCursor(item,index)" type="button" :id="`btn${index}`">插入字段</button>
</div>
</div>
<!-- 单元素获取光标位置 -->
<div class="el-textarea" style="width:150px;">
<textarea v-model="content" id="textarea" type="textarea" rows="2" autocomplete="off" ref="singleText"></textarea>
<button @click="insert('<name>')" type="button">插入会员名</button>
</div>
<!-- elementui 框架表格中使用动态的ref -->
<!-- <el-table :data="shoppeList">
<el-table-column prop="">
<template slot-scope="scope"> -->
<div v-for="(item,index) in shoppeList" :key="index">
<span>{{item}}</span>
<textarea :rows="8" placeholder="请输入内容 " :id="'textareaId'+index" v-model="item.content"></textarea>
<!-- <el-button @click="insertField(scope.$index,scope.row)">点击</el-button> -->
</div>
<!-- </template>
</el-table-column>
</el-table> -->
</div>
</template>
<script>
import E from "wangeditor";
let editor = new E("#editorElem");
export default {
data() {
return {
is_promoted: false,
is_adv: false,
description: "hello word！",
test: ["", "", "3", "", "2"],
walkingist: [
"上海市某某某",
"卜蜂莲花保德店",
"上海市保德路88号. 上海, 上海,",
"卜蜂莲花曹安店",
"上海, 卜蜂莲花川沙店, 上"
],
optList: [
{
id: 1,
value: "天猫"
},
{
id: 2,
value: "专柜"
},
{
id: 3,
value: "线下"
},
{
id: 4,
value: "网络"
},
{
id: 5,
value: "roots官方账号"
},
{
id: 6,
value: "其他"
}
],
selectFlag: false,
choseOpt: "",
selectedID: "", //选中的途径id
// 专柜
shoppeList: [
{
id: 3,
value: "name",
// content:''
},
{
id: 4,
value: "sex",
// content:''
}
],
shopeFlag: false,
shopeName: "",
selLi: -1,
testArrs: [
{
title: "人数",
cons: [
"10人以下",
"10~20人",
"20~30人",
"30~50人",
"50人以上"
]
},
{
title: "年龄",
cons: ["5岁以下", "5~10岁", "10~20岁", "20岁以上"]
},
{
title: "行业领域",
cons: [
"金融",
"地产",
"工程",
"建筑",
"服装",
"机械",
"食品",
"环保",
"餐饮",
"科研机构",
"互联网",
"其他"
]
}
],
// 获取光标位置
content: []
};
},
props: {
richdata: ""
},
mounted() {
// console.log(this.richdata)
this.description = this.richdata;
this.getEditor();
this.getEditors();
this.test = this.test.filter(d => d);
console.log(this.test);
},
directives: {
clickoutside: {
bind: function(el, binding, vnode) {
function documentHandler(e) {
if (el.contains(e.target)) {
return false;
}
if (binding.expression) {
binding.value(e);
}
}
el._vueClickOutSide_ = documentHandler;
document.addEventListener("click", documentHandler);
},
unbind: function(el, binding) {
document.removeEventListener("click", el._vueClickOutSide_);
delete el._vueClickOutSide_;
}
},
clickshopside: {
bind: function(el, binding, vnode) {
function documentHandler(e) {
if (el.contains(e.target)) {
return false;
}
if (binding.expression) {
binding.value(e);
}
}
el._vueClickOutSide_ = documentHandler;
document.addEventListener("click", documentHandler);
},
unbind: function(el, binding) {
document.removeEventListener("click", el._vueClickOutSide_);
delete el._vueClickOutSide_;
}
}
},
methods: {
checkChanged(type) {
if (type == 0) {
this.is_promoted = !this.is_promoted;
this.is_adv = false;
} else if (type == 1) {
this.is_adv = !this.is_adv;
this.is_promoted = false;
}
},
manageUser() {
this.selectFlag = !this.selectFlag;
},
handleClose() {
this.selectFlag = false;
},
optionClick(options) {
console.log(options);
this.selectFlag = false;
this.choseOpt = options.value;
this.selectedID = options.id;
},
choseShop() {
this.shopeFlag = true;
},
shopClose() {
this.shopeFlag = false;
},
shopClick(shopData) {
this.shopeFlag = false;
this.shopeName = shopData.value;
},
getEditor() {
editor.customConfig.menus = [
"bold", // 粗体
"italic", // 斜体
"justify", // 对齐方式
"code", // 插入代码
"foreColor", //字体颜色
"fontSize", //字号
"underline", //下划线
"strikeThrough", //删除线
"fontName" //字体
];
editor.customConfig.onchange = html => {
this.description = html;
};
editor.customConfig.uploadImgShowBase64 = true; // 使用 base64 保存图片
editor.customConfig.showLinkImg = false;
editor.create();
},
// 页面中所用到的各个富文本的数据的回显
getEditors() {
editor.txt.html(this.description);
// editorElems.txt.html(this.coursesInfos.editorElem);
},
//
hideArr() {
this.selLi = -1;
},
option(t, c) {
this.selLi = -1;
this.testArrs[t].title = this.testArrs[t].cons[c];
},
// 获取光标位置
async insertAtCursor(item, index) {
// console.log(document.querySelector('#btn'+index));
// console.log(document.getElementById('btn'+index))
console.log(this.$refs.ttl[index])
this.$set(item , 'content', '');
const myField = this.$refs.ttl[index];
// console.log(item)
// console.log(this.$refs.ttl[index]);
const myValue = item.value;
if (myField.selectionStart || myField.selectionStart === 0) {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
item.content = myField.value.substring(0, startPos) + "{" + item.value + "}" + myField.value.substring(endPos, myField.value.length+2);
await this.$nextTick(); // 这句是重点, 圈起来
myField.focus();
myField.setSelectionRange( endPos + item.value.length+2, endPos + item.value.length+2);
} else {
item.content += "{" + myValue+2 + "}";
}
},
async insert(myValue) {
// const myField = document.querySelector('#textarea');
const myField = this.$refs.singleText
if (myField.selectionStart || myField.selectionStart === 0) {
var startPos = myField.selectionStart
var endPos = myField.selectionEnd
this.content = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length)
await this.$nextTick() // 这句是重点, 圈起来
myField.focus()
myField.setSelectionRange(endPos + myValue.length, endPos + myValue.length)
} else {
this.content += myValue
}
},
insertField(index,item){
console.log(index,item);
console.log(this.$refs['ttl' + index])
}
}
};
</script>
<style lang="scss">
.editor {
width: 500px;
}
.select-box {
// width: 300px;
// border:1px solid red;
.shop-name {
width: 100px;
border: 1px solid black;
}
}
.chose {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #999;
background-color: #fff;
}
.chose-act {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #999;
background-color: red;
}
</style>>
标签：el,false,myField,value,item,文档,test,console 来源： https://blog.csdn.net/Sunny_lxm/article/details/100135908