vue+Element实现登录随机验证码

验证码验证只是前端，无需后台交互
首先，创建一个identify.vue页面，用于写各种：随机数字/字母，随机颜色，干扰点/线

identify.vue

 
 <template>
 <div class="s-canvas">
  <canvas id="s-canvas" :width="contentWidth" :height="contentHeight">
  </canvas>
 </div>
</template>
<script>
 export default {
  name: 'SIdentify',
  props: {
   identifyCode: {
    type: String,
    default: '1234'
   },
   fontSizeMin: {
    type: Number,
    default: 16
   },
   fontSizeMax: {
    type: Number,
    default: 40
   },
   backgroundColorMin: {
    type: Number,
    default: 180
   },
   backgroundColorMax: {
    type: Number,
    default: 240
   },
   colorMin: {
    type: Number,
    default: 50
   },
   colorMax: {
    type: Number,
    default: 160
   },
   lineColorMin: {
    type: Number,
    default: 40
   },
   lineColorMax: {
    type: Number,
    default: 180
   },
   dotColorMin: {
    type: Number,
    default: 0
   },
   dotColorMax: {
    type: Number,
    default: 255
   },
   contentWidth: {
    type: Number,
    default: 112
   },
   contentHeight: {
    type: Number,
    default: 38
   }
  },
  methods: { // 生成一个随机数    
   randomNum(min, max) {