VUE简单的手掌指定选择那一只手指录入指纹组件

1.VUE简单的手掌指定选择那一只手指录入指纹组件 

 1.可以获用户选择是右手还是右手

2.可能知道用户选择的是那手指

3.数据分别是右手（拇指、食指、中指、无名指、小指），左手（拇指、食指、中指、无名指、小指）

<template>
  <div>
    <div class="common-hands">
      <div class="hands">
        <div class="finger">
          <div v-for="(item,index) in theLeftHand"
               class="bg"
               :class="[item.className,item.type===currentType&&currentIndex===item.seat?'on':'']"
               :key="index"
               @click="onClick(item)">
          </div>
        </div>
      </div>
      <div class="hands hands-right">
        <div class="finger">
          <div v-for="(item,index) in theRightHand"
               class="bg"
               :class="[item.className,item.type===currentType&&currentIndex===item.seat?'on':'']"
               :key="index"
               @click="onClick(item)">
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">{{ content }}</div>
  </div>
</template>

<script>
  export default {
    name: 'common-hands',
    data () {
      return {
        currentIndex: 1,
        currentType: 1,
        theLeftHand: [{
          title: '左手大拇指', // 拇指、食指、中指、无名指、小指
          type: 1,
          seat: 1,
          className: 'one'
        }, {
          title: '左手食指',
          type: 1,
          seat: 2,
          className: 'two'
        }, {
          title: '左手中指',
          type: 1,
          seat: 3,
          className: 'three'
        }, {
          title: '左手无名指',
          type: 1,
          seat: 4,
          className: 'four'
        }, {
          title: '左手小拇指',
          type: 1,
          seat: 5,
          className: 'five'
        }],
        theRightHand: [{// 拇指、食指、中指、无名指、小指
          title: '右手小拇指',
          type: 2,
          seat: 1,
          className: 'one'
        }, {
          title: '右手无名指',
          type: 2,
          seat: 2,
          className: 'two'
        }, {
          title: '右手中指',
          type: 2,
          seat: 3,
          className: 'three'
        }, {
          title: '右手食指',
          type: 2,
          seat: 4,
          className: 'four'
        }, {
          title: '右手大拇指',
          type: 2,
          seat: 5,
          className: 'five'
        }],
        content: '默认选择左手大拇指'
      }
    },
    props: {
      list: Object,
      default: () => { // 默认值
        return {
          title: '左手大拇指', // 拇指、食指、中指、无名指、小指
          type: 1,
          seat: 1,
          className: 'one'
        }
      }
    },
    methods: {
      onClick (item) {
        this.currentIndex = item.seat
        this.currentType = item.type
        this.content = `您已选了${item.title}`
        this.$emit('confirm', item)
      }
    },
    watch: {
      list: {
        immediate: true,
        handler (val, oleVal) {
          if (val && oleVal) { // 返回数据选中
            this.currentIndex = val.seat
            this.currentType = val.type
            this.content = `您录入指纹${val.title}`
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .common-hands {
    display: flex;
  }

  .hands {
    position: relative;
    width: 300px;
    height: 300px;
    margin-left: 20px;
    background: url("./img/left.png") no-repeat;
    background-size: 100%;

    .finger {
      display: flex;
      padding: 20px;
    }

    .bg {
      display: block;
      border-radius: 20px;
      cursor: pointer;
    }

    .one {
      position: absolute;
      top: 98px;
      left: 25px;
      width: 41px;
      height: 125px;
      transform: rotate(-35deg);
    }

    .two {
      position: absolute;
      top: 2px;
      left: 107px;
      width: 41px;
      height: 125px;
      transform: rotate(2deg);
    }

    .three {
      position: absolute;
      top: -2px;
      left: 159px;
      width: 36px;
      height: 144px;
      transform: rotate(10deg);
    }

    .four {
      position: absolute;
      top: 32px;
      left: 211px;
      width: 35px;
      height: 125px;
      transform: rotate(25deg);
    }

    .five {
      position: absolute;
      top: 106px;
      left: 242px;
      width: 39px;
      height: 117px;
      transform: rotate(49deg);
    }

    &.hands-right {
      margin-left: 50px;
      background: url("./img/right.png") no-repeat;
      background-size: 100%;
    }
  }

  .hands-right {
    margin-left: 50px;
    background: url("./img/right.png") no-repeat;
    background-size: 100%;

    .one {
      position: absolute;
      top: 110px;
      left: 19px;
      width: 39px;
      height: 107px;
      transform: rotate(-44deg);
    }

    .two {
      position: absolute;
      top: 31px;
      left: 50px;
      width: 41px;
      height: 125px;
      transform: rotate(-22deg);
    }

    .three {
      position: absolute;
      top: -2px;
      left: 106px;
      width: 36px;
      height: 144px;
      transform: rotate(-8deg);
    }

    .four {
      position: absolute;
      top: -4px;
      left: 157px;
      width: 35px;
      height: 147px;
      transform: rotate(0deg);
    }

    .five {
      position: absolute;
      top: 98px;
      left: 237px;
      width: 42px;
      height: 117px;
      transform: rotate(37deg);
    }
  }

  .bottom {
    width: 600px;
    padding: 20px;
    text-align: center;
  }

  .on {
    background: url("./img/zw.png") no-repeat;
    background-size: 100%;
  }
</style>

资源图片