管道基础大数据平台系统开发-【前端】-新系統界面
suerprisePlus
2024-06-05 7d6ab2c59d244de2acb0a3ef920f7a2b7728efbe
src/components/verificationCode.vue
@@ -1,5 +1,13 @@
<!--
 * @Author: 王旭 1377869194@qq.com
 * @Date: 2023-05-08 13:52:20
 * @LastEditors: 王旭 1377869194@qq.com
 * @LastEditTime: 2023-05-08 15:17:22
 * @FilePath: \LFWEB_NEW\src\components\verificationCode.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="ValidCode disabled-select" :style="`width:${width}; height:${height}`" @click="refreshCode">
  <div class="ValidCode disabled-select" :style="``" @click="refreshCode">
    <span v-for="(item, index) in codeList" :key="index" :style="getStyle(item)">{{item.code}}</span>
  </div>
</template>
@@ -57,6 +65,7 @@
      // this.$emit('update:value', codeList.map(item => item.code).join(''))
      this.$emit('sendData', codeList.map(item => item.code).join(''));
      //this.$emit('暴露给父组件的方法名',携带的参数); //记住你命名的这个方法
    },
    // 每个元素生成动态的样式
    getStyle (data) {
@@ -68,9 +77,13 @@
<style scoped lang="less">
  .ValidCode{
    width: 100px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 16px;
    cursor: pointer;
    span{
      display: inline-block;