效果图:

思路就是冒泡原理,把数据放到一个空数组,对其进行排序, 单选框用到的是iview 。

具体实现代码:

 <div v-for="item in singledLists" :key="item.index" >   // 数组singledLists
<Checkbox @on-change="checkSingle" :disabled="isDisabled" v-model="item.isRight" class="mb10" >
<Input :value="item.content" v-model="item.content" style="width: 300px;marginLeft:.4rem;" /> // item.content 动态设置input
</Checkbox>
<span style="cursor:pointer;" @click="moveUp(item)">上移</span>
<span style="cursor:pointer;" @click="moveDown(item)">下移</span>
<span style="cursor:pointer;" @click="singleAnswerDelete(item)">删除</span>
</div>
<div class="ml30"><Button class='newColor' @click="addSingleAnswer" :class="{'hideButton':isShow}" type="primary">添加选项</Button></div>  // hideButton{dispaly:none} 控制显示和隐藏 ,isShow:false ;

// 添加

// 添加答案选项
addSingleAnswer() {
let _this = this;
_this.singledLists.push({}); // 置空
if (_this.questionStyle === "single") {
if (_this.singledLists.length >= 4) {
_this.isShow = true; //隐藏按钮添加选项
_this.$Message.info("单选题最多添加四个选项!");
}
} else if (_this.questionStyle === "multi") {
if (_this.singledLists.length >= 6) {
_this.isShow = true; //隐藏按钮添加选项
_this.$Message.info("多选题最多添加六个选项!");
}
}
},

// 以B为基点上移 (根据index值)
moveUp(item) {
console.log(item)
console.log(this.singledLists)
let index = this.singledLists.indexOf(item); // 获取的index。或者通过v-for 遍历传过的index,可以简化此步骤。
if (this.singledLists.length > 1 && index !== 0) {
var temp = this.singledLists[index - 1].content; // 这三行的含义可见上面示意图
this.singledLists[index - 1].content = this.singledLists[index].content;
this.singledLists[index].content = temp;
}
},
      
// 下移
moveDown(item) {
let index = this.singledLists.indexOf(item);
if( this.singledLists.length > 1 && index != this.singledLists.length - 1 ) {
var temp = this.singledLists[index + 1].content; // 以c为基点
this.singledLists[index + 1].content = this.singledLists[index].content;
this.singledLists[index].content = temp;
}
},
// 删除
singleAnswerDelete(item) {
this.isShow = false;
let index = this.singledLists.indexOf(item);
if (index > -1) {
this.singledLists.splice(index, 1);
}
},

最新文章

  1. MongoDB 优化器MongoDB Database Profiler(12)
  2. 攻城狮在路上(陆)-- hadoop分布式环境搭建(HA模式)
  3. 响应式web布局中iframe的自适应
  4. 第六章 大数据,6.3 突破传统,4k大屏的沉浸式体验(作者: 彦川、小丛)
  5. web app上传图片
  6. http国际化模拟请求
  7. javaURL中文乱码的问题
  8. 黑马程序员_Java基本数据的自动拆装箱及享元设计模式视频学习笔记
  9. ngx_cdecl
  10. Nodejs v4.x.0API文档学习(2)Assert断言测试模块
  11. WPF之插件开发
  12. 老oj3999孤独一生
  13. HTML5画布(图像)
  14. ubuntu server 11.10 mysql 自动备份脚本
  15. 关于Java中继承多接口同名方法的问题
  16. Nessus更新到8.3.0
  17. Calling Circles(UVa 247)(Floyd 算法)
  18. 了解AutoCAD对象层次结构 —— 4 —— 符号表
  19. 如何在Linux中tomcat下运行一个web项目
  20. java学习3创建学生属性:学号、姓名、电话 完全实现对象集合的增删改查。(控制台来做)

热门文章

  1. Codeforces Fix a Tree
  2. linux mysql数据库安装
  3. SQL数据库—&lt;10&gt;--查询练习题
  4. SQL数据库—&lt;8&gt;触发器
  5. 团队作业Bata冲刺-第二天
  6. 西里尔字 俄语 - Cyrillic
  7. 深入理解TCP协议及其源代码
  8. Struts2中Action类的三种写法
  9. python 发送请求
  10. shell倒计时下班时间