Vue ElementUI如何制作还款日字母提示弹窗？
摘要：1、业务背景 还款业务，设置每月还款日，选每月几号扣款，不需要29、30、31，因为不是每个月都有这三天的 2、预期效果图 3、代码实现 3.1 初始化vue项目 地址：https:cn.vuejs.orgguideintroduc
1、业务背景
还款业务，设置每月还款日，选每月几号扣款，不需要29、30、31，因为不是每个月都有这三天的
2、预期效果图
3、代码实现
3.1 初始化vue项目
地址：https://cn.vuejs.org/guide/introduction.html
3.2 在项目中应用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">点击调用获取还款日组件方法</button>
<el-dialog
title="设置还款日"
append-to-body
:visible.sync="showDialog"
width="350px">
<number-select ref="numberSelect" :showDialog="showDialog" @hideModal="hideModal" />
</el-dialog>
<div>设置还款日期为{{this.sendNum}}</div>
</div>
</template>
4、实际效果图
5、完整代码
5.1 设置还款日组件页面 NumberSelect.vue
<!-- 设置还款日组件页面 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.leng