极客观点
项目管理
HarmonyOS
网页在chrom和微信小程序手机端没有问题，只有开发者工具里面有问题
具体问题表现为通过push数组追加上去的标签点不了,input显示与实际位置存在错位（就是点击的时候要往上面一点才能点得到input标签）,可以帮忙解决的+qq2472289148，报酬100rmb一下
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) {
return unescape(r[2]); //返回参数值
} else {
return null;
}
}
var id = getUrlParam('id');
var isLogIn = getUrlParam('isLogIn');
if(isLogIn=="false")isLogIn=false;
if(isLogIn=="true")isLogIn=true;
if(isLogIn)
var skey = getUrlParam('skey');
var vm;
$(function(){
//禁止缓存
if(!window.name){
var str = Math.random().toString(36).substr(2);
var str0=window.location.href;
if(str0.indexOf("?")==-1){
window.location.href = str0 + '?S=' + str;
}else{
window.location.href = str0 + '&S=' + str;
}
window.name = 'isreload';
}
//vue时间到
//注册组件
Vue.component('point', {
props: ['pointId','prompt','title'],
template: `
<div v-bind:data-poid="pointId" class="point-item">
<p>第{{pointId+1}}个要点的标题</p>
<div class="close-div" v-bind:data-poid="pointId"><button type="button" class="btn btn-danger" v-bind:data-poid="pointId">删除本要点</button></div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
是否默认展开 <input v-bind:data-poid="pointId" type="radio" name="isDefault" class="isDefault">
</div>
</div>
<input v-bind:data-poid="pointId" type="text" class="point-item-title-input form-control" v-bind:placeholder="prompt?prompt:'例如:第一步 准备一些杯子'" v-bind:value="title">
</div>
<p>请点击下方撰写第{{pointId+1}}个要点的内容</p>
<textarea class="textarea-point" v-bind:data-poid="pointId"></textarea>
</div>
`
});
Vue.component('action1', {
props: ['taid','tid'],
template: `
<div class="container-fluid teacher-action" v-bind:id="taid">
<div class="close-div-action" v-bind:data-taid="taid" v-bind:data-tid="tid"><button type="button" class="btn btn-danger">删除这个action</button></div>
<div class="row">
<div class="col-6"><input placeholder="函数" class="form-control"></div>
<div class="col-6"><input placeholder="元素选择器" class="form-control"></div>
</div>
<div class="row">
<div class="col-2"><input placeholder="x偏移" class="form-control"></div>
<div class="col-2"><input placeholder="y偏移" class="form-control"></div>
<div class="col-8"><input placeholder="提示信息" class="form-control"></div>
</div>
<div class="row">
<div class="col-9"><input placeholder="回调函数" class="form-control"></div>
<div class="col-3"><input placeholder="时机" class="form-control"></div>
</div>
</div>
`
});
Vue.component('my-alert', {
props: ['myAlertContent'],
template: `
<div class="modal fade" id="myAlert">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">提示</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 模态框主体 -->
<div class="modal-body" v-html="myAlertContent">
</div>
<!-- 模态框底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">我知道了</button>
</div>
</div>
</div>
</div>
`
});
vm = new Vue({
el:'#app0',
data:{
hello:"hello",
appViewIdx:1,
points:[],
pointsBack:[],
defaultPo:-1,
poidCount:1,
teachers:[],
alertContent:""
}
});
mainFunc();
});
function mainFunc(){
$("#nextView").on("click.ui",function(){
vm.appViewIdx++;
});
$("#add-point").on("click.ui",function(){
vm.points.push({poid:vm.points.length,title:"",isVisible:true});
refreshTextarea();
});
$("#app0").on("click.ui",".add-action",function(){
console.log(".add-action");
var tid = parseInt($(this).attr("data-tid"));
vm.teachers[tid].list.push({isVisible:true});
});
$("#add-teacher").on("click.ui",function(){
var tid = parseInt($(this).attr("data-tid"));
vm.teachers.push({list:[],isVisible:true});
});
$("#app0").on("input.ui",".point-item-title-input",function(){
console.log("onchange");
var poid = parseInt($(this).attr("data-poid"));
vm.points[poid].title = $(this).val();
});
$("#app0").on("click.ui",".isDefault",function(){
var poid = parseInt($(this).attr("data-poid"));
vm.defaultPo = poid;
});
$("#app0").on("click.ui",".close-div",function(){
var poid = parseInt($(this).attr("data-poid"));
//设置元素不可见
Vue.set(vm.points[poid], "isVisible", false);
//插入撤回提示条
vm.$nextTick(function(){
withdraw(poid);
});
});
$("#app0").on("click.ui",".withdraw",function(){
var poid = parseInt($(this).attr("data-poid"));
Vue.set(vm.points[poid], "isVisible", true);
$(this).remove();
});
$("#app0").on("click.ui",".close-div-teacher",function(){
if(confirm("确定删除这个teacher吗?")){
var tid = parseInt($(this).attr("data-tid"));
Vue.set(vm.teachers[tid], "isVisible", false);
}
});
$("#app0").on("click.ui",".close-div-action",function(){
if(confirm("确定删除这个action吗?")){
var taid = parseInt($(this).attr("data-taid"));
var tid = parseInt($(this).attr("data-tid"));
Vue.set(vm.teachers[tid].list[taid], "isVisible", false);
}
});
$("#up-btn").on("click.ui",function(){
postFunc();
});
}
function postFunc(){
//收集信息
//大title
var bigTitle = $("#title-title").val();
//文档的每个分段
var parts = [];
for (var i = 0; i < vm.points.length; i++) {
var item = vm.points[i];
if(!item.isVisible)continue;
parts.push({title:item.title,content:tinyMCE.editors[i].getContent()});
}
//teacher信息的收集
var teacherInfo = [];
var tail = 0;
$(".teacher-item").each(function(){
var that = this;
if($(that).is(":hidden")){return;}
teacherInfo.push([]);
var item = teacherInfo[tail++];
$(that).children(".teacher-action").each(function(){
var that2 = this;
if($(that2).is(":hidden")){return;}
var tempArr = new Array();
$(that2).find("input").each(function(){
tempArr.push($(this).val());
});
console.log("tempArr",tempArr);
item.push(tempArr);
});
});
//分类
var pageClass = $("#page-class").val();
console.log("bigTitle",bigTitle,"parts",parts,"teacherInfo",teacherInfo,"pageClass",pageClass);
var url="http://helpPage.yyfai.club/upPage.php";
$.ajax({
type: "POST",
url: url,
data: {
"skey":skey,
"bigTitle":bigTitle,
"pageClass":pageClass,
"parts":JSON.stringify(parts),
"teacherInfo":JSON.stringify(teacherInfo),
"defaultPo":vm.defaultPo.toString()
},
cache: false,
async : false,
dataType: "json",
success: function (data ,textStatus, jqXHR){
vm.alertContent = "发布成功!3秒后自动返回...";
$('#myAlert').modal('show');
setTimeout(function(){
wx.miniProgram.reLaunch({url: '../news/news'});
}, 3000);
},
error:function (XMLHttpRequest, textStatus, errorThrown) {
alert("upPage请求失败！");
console.log(XMLHttpRequest,textStatus,errorThrown);
}
});
}
function withdraw(poid){
var wElement=$(`
<div class="withdraw">
<p>
<a>
点我撤回删除操作<span class="countdown" data-time="5">5</span>秒后本条消失
</a>
</p>
</div>
`);
wElement.attr({'data-poid':poid.toString()});
wElement.find(".countdown").attr({'data-poid':poid.toString()});
if(poid!=0){
$(".point-item").eq(poid-1).after(wElement);
}else{
$("#edit-body>div").eq(1).after(wElement);
}
timeActive(poid);
}
function refreshTextarea(){
vm.$nextTick(function(){
tinymce.init({
selector:'.textarea-point',
language: 'zh_CN',
images_upload_url: 'http://helppage.yyfai.club/upload.php',
automatic_uploads: true
});
});
}
function timeActive(poid){
var targetE = $(".countdown[data-poid='"+poid+"']");
var countdownFlag = setInterval(function(){
var newTime = parseInt(targetE.attr("data-time"))-1;
targetE.text(newTime.toString());
targetE.attr({'data-time':newTime.toString()});
if(newTime==0){
clearInterval(countdownFlag);
var index = $(".countdown").index(targetE);
$(".withdraw").eq(index).remove();
}
},1000);
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html,charset=UTF-8" />
<meta charset="utf8"/>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
<link rel="stylesheet" type="text/css" href="http://test.yyfai.club/repository/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="edit.css" />
</head>
<body>
<div id="app0">
<form>
<div v-if="appViewIdx == 1" id="edit-body">
<div id="title-title-div">标题</div>
<input id="title-title" type="text" placeholder="请在这里输入文档标题" class="form-control"/>
<div>请填写与添加要点，最少有一个要点，最多有一个默认展开的要点</div>
<point v-for="(item,index) in points" v-bind:point-id="index" v-bind:title="item.title" v-show="item.isVisible"></point>
<div id="add-point">
<p>+点击添加要点+</p>
</div>
<!-- 这里双重循环teacher表 -->
<div class="teacher-item" v-for="(item,index) in teachers" v-bind:data-tid="index" v-show="item.isVisible">
<div class="close-div-teacher" v-bind:data-tid="index"><button type="button" class="btn btn-danger">删除这个teacher</button></div>
<action1 v-for="(item2,index2) in item.list" v-bind:taid="index2" v-bind:tid="index" v-show="item2.isVisible"></action1>
<div class="add-action" v-bind:data-tid="index">
<p>+为第{{index}}位老师点击添加action+</p>
</div>
</div>
<div id="add-teacher">
<p>+点击添加teacher+</p>
</div>
<input id="page-class" type="text" placeholder="请在这里输入文档的分类标签" class="form-control"/>
<!--<button id="nextView" class="btn btn-primary">点我进入下一环节1/3</button>-->
</div>
<div v-if="appViewIdx == 2">
<button id="nextView" class="btn btn-primary">点我进入下一环节2/3</button>
</div>
<div v-if="appViewIdx == 3"></div>
</form>
<button id="up-btn" class="btn btn-primary">发布</button>
<my-alert v-bind:my-alert-content="alertContent"></my-alert>
</div>
<!--body结束-->
<script src="http://test.yyfai.club/repository/jquery.js"></script>
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="http://test.yyfai.club/repository/popper.min.js"></script>
<script src="http://test.yyfai.club/repository/bootstrap.min.js"></script>
<script src="http://test.yyfai.club/repository/vue.js"></script>
<script src="http://helppage.yyfai.club/repository/tinymce.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script src="edit.js"></script>
</body>
</html>#add-point,#add-teacher,.add-action{
text-align: center;
background-color: #f99393;
color: #fff;
height: 35px;
line-height: 35px;
vertical-align: middle;
}
.point-item{
position:relative;
}
.close-div,.close-div-teacher{
position: absolute;
right: 20px;
top: 0px;
}
.close-div button{
}
.withdraw{
height: 35px;
background-color: #f99393;
color: red;
text-align: center;
}
.teacher-action .col-1,.teacher-action .col-2,.teacher-action .col-3,
.teacher-action .col-4,.teacher-action .col-5,.teacher-action .col-6,
.teacher-action .col-7,.teacher-action .col-8,.teacher-action .col-9,
.teacher-action .col-10,.teacher-action .col-11,.teacher-action .col-12{
padding:0px;
}
.teacher-item{
position: relative;
}
是不是html,body{height:100%}引起的错位?