答案管理模态框UI展示
选择题
填空题
主要完成的功能是:
支持按两种答案类型:选择、填空,录入答案
全局的操作有:添加和删除
**插播一个具体学科下有具体属性代码解决办法:
在vuex里面的getter.js中,设置获取不同属性的函数**
nonXXXAttr: (state) => {
return ...
}
然后在所需的组件中调用,具体实现:
computed: {
...mapGetters([
xxxAttr
...
]),
attr() {
//根据不同的属性,返回不同的值
答案录入模态框主要是使用elementUI的table组件、tag组件、input框组件、button组件来实现的,利用axios与后台接口进行数据传送。
//通过import模式引入
import { mapGetters } from 'vuex'
import axios from 'axios'
通过watch监听实现id转换后自动执行axios请求
watch: {
isShow () {
if (this.isShow) {
this.initData()
}
}
}
按钮的加载随着函数的执行进行不同的状态转换:
// 首先在el-button里设置:loading="isLoading",然后再data的return里设置
isLoading:false,当执行保存按钮函数时,this.isLoading = true,然后在每个弹出框执行的时候,要记住设置this.isLoading = false,否则按钮将一直执行加载状态直到保存答案成功。
拼接数据
for(let i = 0; i < len; i++) {
data.push({
...
//后台wiki接口文档所对应的各个字段
type:,
order_num:'',
content:,
is_right:
})
}
这里强调一下,因为我的content值是双数组的形式,而后台所需的是Json格式,所以需要进行处理,解决办法如下:
content: spaceContentTags[i].join(',')
具体的axios请求方法:
this.$axios.post('接口地址', {
options: JSON.stringfy(data),
pageId:this.id
}, {
methodType: 1
}).then((res) => {
this.$success()
this.$cancelAnswer()
}).finally(() => {
this.isLoading = false
})
}
然后验证部分特别注意的是选择题内容的验证:
validateSelect (index) {
if (this.answerInput[index] === undefined || this.answerInput[index] == '' || this.answerInput[index].length > 200) {
this.$message({
message: '请输入1-200字符内容',
type: 'warning'
})
}
}
为undeined、为''、以及长度大于200三个条件缺一不可
使用this.$set(this.inputVisible,index,false)
其中在进行数据赋值的过程中,遇到了一种情况,当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新视图上去。
原因是:vue的响应系统,把一个普通的javascript对象传给vue实例来作为它的data选项,vue将遍历它的属性,用object.defineProperty将它们转为getter/setter
解决方法是:(1)通过Vue.set方法设置data属性
(2)使用vm.$set实例方法
this.$set()和Vue.set()本质方法一样,前者可以用在methods中使用
使用set添加数据
Vue.set()不光能修改数据,还能添加数据
例如:
<section v-for="item in list">
<div :class="['xxclass',item.checked?'checked':'']"></div>
</section>
这里通过判断item的本身不存在的checked属性来决定是否增加checked样式类,利用了set使用了对象中本身不存在的cehcked属性来实现想要的功能。
答案录入功能模态框主要基于对选择题和填空题的答案录入,使用el-select来实现,answerType的值为1和2,分别对应选择题和填空题。
<el-select v-model="answerValue" placeholder="" @change="showToggle">
<el-option v-for="item in answerType" :key="item.type :label="item.label" :value="item.value"></el-option>
填空题部分使用elementui tag组件:
<el-table
:data="spaceTableData"
v-show="spaceVisible"
style="width: 100%">
<el-table-column
label="序号"
width="100"
align="center">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.order_num}}</span>
</template>
</el-table-column>
<el-table-column
label="内容"
align="center">
<template slot-scope="scope">
<el-tag
v-for="tag in spaceContentTags[scope.$index]"
closable
:disable-transitions="true"
@close="handleClose(scope.$index, tag)">
{{tag}}
</el-tag>
<el-input
class="input-new-tag"
v-if="inputVisible[scope.$index]"
v-model="inputValues[scope.$index]"
:ref="'saveTagInput' + scope.$index"
size="small"
@keyup.enter.native="$event.target.blur"
@blur="handleInputConfirm(scope.$index)">
</el-input>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
width="200">
<template slot-scope="scope">
<el-button
icon="el-icon-plus"
class="button-new-tag space-button"
size="small"
@click="showAddInput(scope.$index)">
</el-button>
<el-button
class="space-button"
icon="el-icon-close"
size="mini"
@click="spaceHandleDelete(scope.$index, scope.row)">
</el-button>
</template>
</el-table-column>
</el-table>
数据初始化:
for (let i = 0, len = data.length; i < len; i++) {
if (data[i].type == 1) {
// 初始化选择题
_this.selectTableData.push({
order_num: data[i].order_num
})
_this.answerInput.push(data[i].content)
if (data[i].is_right == '1') {
_this.radio = data[i].order_num
}
} else {
// 填空题初始化
_this.spaceTableData.push({
order_num: data[i].order_num
})
_this.spaceContentTags.push(data[i].content.split(','))
}
}
所有评论(0)