vue前端

最新推荐文章于 2024-10-01 18:51:18 发布

阿飞爱写笔记

最新推荐文章于 2024-10-01 18:51:18 发布

阅读量149

点赞数

分类专栏： vue前端文章标签： java elementui

本文链接：https://blog.csdn.net/qq_41657996/article/details/126645880

版权

vue前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

项目场景：

今天开发时遇到这样一个需求，在管理端用户可设置多个html样式的文本文件，然后在前端给用户提供一个dialog对话框根据按钮（要求按钮上加上计数器）依次展示这些文本内容。

需求实现

理论上是需要一个计数的参数，从0到文本文件的个数依次循环展示dialog上的内容。

<div style="alignment: center;width:  100%; text-align:center; ">
              <el-row :span="24">
                <el-button type="primary" icon="el-icon-shopping-cart-full"  @click="startTest()">开始</el-button>
              </el-row>
            </div>
<el-dialog :title="this.scoreAnalysisPayDocTitle"
               append-to-body
               :close-on-click-modal="true"
               :close-on-press-escape="true"
               :show-close="true"
               :visible.sync="isPayMessage"
               :width="width">
      <el-form>
        <div v-html="scoreAnalysisPayDoc">
          {{scoreAnalysisPayDoc}}
        </div>
      </el-form>
      <div style="alignment: center;width:  100%; text-align:center;margin-top: 20px ">
        <el-row :span="24">
          <el-checkbox v-model="selectedValue" @change="changeRadio"><span style="font-weight: bold;">同意</span></el-checkbox>  <el-button :disabled="nextStep" type="primary"   @click="handleSelectDepartment">{{buttonTitle}}</el-button>
        </el-row>
      </div>
    </el-dialog>

data 参数：

data() {
    return {
      isPayMessage:false,
      selectedValue : false,
      scoreAnalysisPayDoc:'',
      scoreAnalysisPayDocTitle:'',
      form: {
        paydocArray: [],
        textarea: "",
      },
      formRow:{
        rowId:0,
        examId:'',
      },
      count: '',
      buttonTitle:'下一步',
      timer: null,
      nextStep:true,
      iDocIndex : 0, 
    }
  },

methods 方法

methods: {
    ShowDocBody(){
      this.scoreAnalysisPayDoc=this.form.paydocArray[this.iDocIndex].docBody;
      this.scoreAnalysisPayDocTitle=this.form.paydocArray[this.iDocIndex].fileTitle;
      this.iDocIndex++;
    },
    countDown() {
      const TIME_COUNT = 20
      if (!this.timer) {
        this.count = TIME_COUNT
        this.nextStep = true
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.buttonTitle = '下一步（'+this.count+'）'
            this.count--
          } else {
            this.nextStep = false
            this.buttonTitle = '下一步'
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
    },
    changeRadio (value) {
      this.selectedValue = value;
    },
    handleSelectDepartment(){ //处理选中的项
      if (this.selectedValue === false) {
        this.$message.warning("请阅读提示信息并进行勾选");
        return;
      }
      if (this.iDocIndex >= this.form.paydocArray.length){
        this.isPayMessage=false;
        this.scoreAnalysisPayDoc='';
        this.scoreAnalysisPayDocTitle='';
        this.toPay();
      } else {
        this.ShowDocBody();
        this.selectedValue = false;
        this.countDown();
      }
    },
    startTest(){
      this.isPayMessage=true;
      getPayDocList().then(res => {
        this.form.paydocArray = res.data.data;
        this.iDocIndex = 0;
        this.scoreAnalysisPayDoc=this.form.paydocArray[this.iDocIndex].docBody;
        this.scoreAnalysisPayDocTitle=this.form.paydocArray[this.iDocIndex].fileTitle;
        this.iDocIndex++;
        this.countDown();
      })
    },
  }