之前在公司实习时，主要从事于前端开发。公司当时主要是在开发一个管理系统，关于金融方面的。
前端开发技术主要是用到了vue全家桶、elementUI，以及vue相关的插件等。当时公司是IDEA进行开发，但我推荐用VSCode进行开发，具体还是要按照公司的要求来。
首先说一说验证码计时功能
<el-button v-bind:class="{grey:isGrey,blue:!isGrey}" v-bind:disabled="dis" type="primary" @click="getCode"> <span v-if="show">发送验证码</span> <span v-else>重新发送({{count}}s)</span> </el-button>
v-bind是vue.js的指令用于绑定数据和元素属性，想具体了解可以去官网查看，这里是用来控制按钮的css样式。
JS代码（基于vue2.0）；
<script> export default { data() { return { dis: false, show: true, isGrey: false, //按钮样式 timer: null, //设置计时器, count: "" }; }, methods: { getCode() { let TIME_COUNT = 60; if (!this.timer) { this.count = TIME_COUNT; this.isGrey = true; this.show = false; this.dis = true; this.timer = setInterval(() => { if (this.count > 0 && this.count <= TIME_COUNT) { this.count--; } else { this.dis = false; this.isGrey = false; this.show = true; clearInterval(this.timer); this.timer = null; } }, 1000); } } } }; </script>
CSS代码：
.grey{ background-color: #EDEEF1; border-color: #EDEEF1; color:#666; width: 30%; } .blue{ background-color: #64A0DD; border-color: #64A0DD; }
