1、業(yè)務(wù)背景

還款業(yè)務(wù)，設(shè)置每月還款日，選每月幾號扣款，不需要29、30、31，因為不是每個月都有這三天的

2、預(yù)期效果圖

3、代碼實現(xiàn)

3.1 初始化vue項目

地址：https://cn.vuejs.org/guide/introduction.html

3.2 在項目中應(yīng)用elementUI

地址：https://element.eleme.io/#/zh-CN/component/installation

3.3 在main.js中引用

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'

Vue.use(ElementUI)

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

3.4 編寫字母按鈕組件(完整代碼在最后)

<template>
  <div class='box'>
    <span
      class='inner'
      @click='selectClick(index, item)'
      :class="'list_'+index"
      v-for='(item, index) in numberArr'
      :key='index'
      >{{ item }}</span
    >
  </div>
</template>

3.5 引用字母按鈕組件(完整代碼在最后)

<template>
  <div id="app">
    <button @click="handleNumberClick">點擊調(diào)用獲取還款日組件方法</button>
    <el-dialog
      title="設(shè)置還款日"
      append-to-body
      :visible.sync="showDialog"
      width="350px">
      <number-select ref="numberSelect" :showDialog="showDialog" @hideModal="hideModal" />
    </el-dialog>
    <div>設(shè)置還款日期為{{this.sendNum}}</div>
  </div>
</template>

4、實際效果圖

5、完整代碼

5.1 設(shè)置還款日組件頁面 NumberSelect.vue

<!-- 設(shè)置還款日組件頁面 NumberSelect.vue -->
<template>
  <div class='box'>
    <span
      class='inner'
      @click='selectClick(index, item)'
      :class="'list_'+index"
      v-for='(item, index) in numberArr'
      :key='index'
      >{{ item }}</span
    >
  </div>
</template>

<script>
export default {
  props: {
    sendNumber: Number,
    showDialog: {
      type: Boolean,
      default: false,
      required: true // 必傳遞
    }
  },
  name: 'numberSelect',
  data () {
    return {
      numberArr: [],
      index: 0
    }
  },
  methods: {
    // 選擇按鈕
    selectClick (idx, item) {
      this.sendNum = item
      var len = this.numberArr.length
      for (var i = 0; i < len; i++) {
        if (i === idx) {
          document.getElementsByClassName(
            'list_' + i
          )[0].style.backgroundColor = 'skyblue'
        } else {
          document.getElementsByClassName(
            'list_' + i
          )[0].style.backgroundColor = ''
        }
      }
      this.$emit('hideModal')
    }
  },
  // 創(chuàng)建28個字母按鈕數(shù)組
  created () {
    for (var i = 1; i <= 28; i++) {
      this.numberArr.push(i)
    }
  }
}
</script>

<style>
.box {
  margin: 0 auto;
  background-color: #fff;
  width: 300px;
  height: 240px;
  display: flex;
  flex-wrap: wrap;
}
.inner {
  margin-left: 10px;
  margin-top: 10px;
  text-align: center;
  line-height: 30px;
  width: 30px;
  height: 30px;
  border: 1px solid #000;
  border-radius: 50%;
  background-color: #fff;
  display: inline-block;
  cursor: pointer;
}
</style>

5.2 設(shè)置還款日組件頁面 NumberSelect.vue

<template>
  <div id="app">
    <button @click="handleNumberClick">點擊調(diào)用獲取還款日組件方法</button>
    <el-dialog
      title="設(shè)置還款日"
      append-to-body
      :visible.sync="showDialog"
      width="350px">
      <number-select ref="numberSelect" :showDialog="showDialog" @hideModal="hideModal" />
    </el-dialog>
    <div>設(shè)置還款日期為{{this.sendNum}}</div>
  </div>
</template>

<script>
import NumberSelect from './components/NumberSelect.vue'
export default {
  components: { NumberSelect },
  name: 'App',
  data () {
    return {
      showDialog: false, // 是否顯示還款日組件
      sendNum: 0 // 還款日組件選中的值
    }
  },
  methods: {
    // 點擊設(shè)置還款日按鈕
    handleNumberClick () {
      this.showDialog = true
    },
    // 關(guān)閉彈窗
    hideModal () {
      this.showDialog = false
      console.log('確認(rèn)的數(shù)字為：' + this.$refs.numberSelect.sendNum)
      this.sendNum = this.$refs.numberSelect.sendNum
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

若本文有幫助到閱讀本文的同學(xué)，歡迎點贊、關(guān)注、收藏，互相學(xué)習(xí)交流。