Score
0
Watch 40 Star 133 Fork 35

Banny.Young / vue-qslibTypeScript

Join us
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
基于vue开发的问卷调查组件,主要题型包括:单选题,单选填空题,多选题,段落题,比重题,矩阵多选,矩阵单选,矩阵填空,判断矩阵,排序题,选择排序题 spread retract

  • Vue 88.6%
  • TypeScript 10.5%
  • JavaScript 0.8%
  • Batchfile 0.1%
Clone or download
App.vue 5.20 KB
Copy Edit Web IDE Raw Blame History
<template>
<div id="app">
{{DataType}}
<DataTypeComponent v-model="DataType" />
<OrderByComponent />
<el-button type="info" @click="edit" >编辑</el-button>
<el-button type="info" @click="showData" >show data</el-button>
<h1>富文本编辑器</h1>
{{RichText}}
<EditorComponent v-model="RichText"/>
<h1>单选组件</h1>
<radioSelComponent @mounted="mountedcom" :codenum="10" ref="radioSel" title="this is a title" />
<div>
<h1>多选组件</h1>
<mutiSelComponent/>
</div>
<div>
<h1>段落组件</h1>
<ParagraphComponent/>
</div>
<div>
<h1>填空组件</h1>
<FillBlankComponent/>
</div>
<div>
<h1>开放题组件</h1>
<OpenQuestionComponent/>
</div>
<div>
<h1>矩阵单选组件</h1>
<MatrixRadioSelComponent/>
</div>
<div>
<h1>矩阵多选组件</h1>
<MatrixMutiSelComponent/>
</div>
<div>
<h1>判断矩阵多选组件</h1>
<TureFalseMatrixMutiSelComponent/>
</div>
<div>
<h1>判断矩阵单选组件</h1>
<TureFalseMatrixRadioSelComponent/>
</div>
<div>
<h1>矩阵填空组件</h1>
<MatrixFillBlankComponent/>
</div>
<div>
<h1>排序题</h1>
<RankComponent />
</div>
<div>
<h1>选择排序题</h1>
<RankAfterSelComponent />
</div>
<div>
<h1>比重分配题</h1>
<ProportionComponent />
</div>
<div>
<h1>混合题型</h1>
<!-- 已添加wangEditor富文本框 -->
<MixedQuestionComponent />
</div>
<div>
<h1>图片组件</h1>
<ImageBase64Componet @HasGotImage="getImage" :param='1' />
</div>
<div>
<h1>图片剪切</h1>
<ImageCropper v-model="ImageSrc" />
<img :src="ImageSrc" />
imageSrc: {{ImageSrc}}
</div>
<div>
<h1>树控件</h1>
<TreeComponent v-model="NodeData" v-bind:Url="WebApiUrl" typeid=3 >
</TreeComponent>
</div>
<h1>wangEditor富文本框</h1>
<span v-html="udata" class="tui"></span>
<TuiEditor @getText="settext" :title="udata"></TuiEditor>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import radioSelComponent from './components/radioSelComponent.vue'
import mutiSelComponent from './components/mutiSelComponent.vue'
import EditorComponent from './components/EditorComponent.vue'
import ParagraphComponent from './components/ParagraphComponent.vue'
import DataTypeComponent from './components/DataTypeComponent.vue'
import OrderByComponent from './components/OderByComponent.vue'
import FillBlankComponent from './components/FillBlankComponent.vue'
import OpenQuestionComponent from './components/OpenQuestionComponent.vue'
import MatrixRadioSelComponent from './components/MatrixRadioSelComponent.vue'
import MatrixMutiSelComponent from './components/MatrixMutiSelComponent.vue'
import TureFalseMatrixMutiSelComponent from './components/TrueFalseMatrixMutiSelComponent.vue'
import TureFalseMatrixRadioSelComponent from './components/TureFalseMatrixRadioSelComponent.vue'
import MatrixFillBlankComponent from './components/MatrixFillBlankComponent.vue'
import RankComponent from './components/RankComponent.vue'
import RankAfterSelComponent from './components/RankAfterSelComponent.vue'
import ProportionComponent from './components/ProportionComponent.vue'
import MixedQuestionComponent from './components/MixedQuestionComponent.vue'
import ImageBase64Componet from './components/ImageBase64Componet'
import ImageCropper from './components/ImageCropper'
import TreeComponent from './components/CategoryTreeComponent'
import TuiEditor from './components/TuiEditor'
export default {
name: 'app',
components: {
HelloWorld,radioSelComponent,mutiSelComponent,EditorComponent,ParagraphComponent,DataTypeComponent,
OrderByComponent,FillBlankComponent,OpenQuestionComponent,MatrixRadioSelComponent,MatrixMutiSelComponent
,TureFalseMatrixMutiSelComponent,TureFalseMatrixRadioSelComponent,MatrixFillBlankComponent,RankComponent
,RankAfterSelComponent,ProportionComponent,MixedQuestionComponent,ImageBase64Componet,ImageCropper,TreeComponent,TuiEditor
},
data:function(){
return {Data:'',DataType:0,ImageSrc:'',WebApiUrl:"http://localhost:23511",NodeData:null,RichText:'富文本',udata:''};
},
methods:
{
mountedcom:function(obj)
{
// alert("mounted emitted!");
obj.canEdit=false;
},
edit:function()
{
this.RichText="hello,world";
//this.$refs.radioSel.setEdit();
},
showData:function()
{
this.Data= this.$refs.radioSel.getQuestionData();
},
GetDataType:function(type)
{
},
getImage:function(param,img)
{
this.ImageSrc=img;
console.log('param:'+param);
console.log('image source:'+img);
},
settext(val){
this.udata=val;
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
margin-top: 60px;
}
.tui table tr td {
border: 1px solid #ccc;
}
.tui table tr th {
border: 1px solid #ccc;
}
</style>

Comment ( 0 )

Sign in for post a comment

TypeScript
1
https://gitee.com/hardmantech/vue-qslib.git
git@gitee.com:hardmantech/vue-qslib.git
hardmantech
vue-qslib
vue-qslib
master

Help Search