基于Vue的简易计算器面板

events	value
on-select	item(当前点击元素)

<template>
  <div class="calculator-wrap" @click="clickCell">
    <ul class="symbol-box">
      <li>%</li>
      <li>^</li>
      <li>*</li>
      <li>/</li>
      <li>+</li>
      <li>-</li>
      <li>(</li>
      <li>)</li>
    </ul>
    <ul class="num-box">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>.</li>
      <li>,</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "calculator",
    data() {
      return {

      }
    },
    methods: {
      clickCell(e) {
        if (e.toElement.textContent.length != 1) {
          return ;
        }
        let word = e.toElement.textContent;
        this.$emit('on-select', word);

      }
    }
  }
</script>

<style scoped lang="less">
  ul, li {
    list-style: none;
  }
  .calculator-wrap{
    width: 200px;
    font-size: 0;
    padding: 5px;
    border: 1px solid #eee;
    border-radius: 5px;
    box-shadow: 0 0 5px #eee;

    .symbol-box{
      border-bottom: 1px solid #eee;
      padding-bottom: 5px;
      margin-bottom: 5px;
    }

    li {
      display: inline-block;
      font-size: 14px;
      width: 25%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      vertical-align: middle;
      cursor: pointer;
      transition: all .5s;
      &:hover {
        box-shadow: 0 0 5px #eee;
      }
      &:active {
        box-shadow: 0 0 5px #999;
      }
    }

    &:after {
      content: "";
      display: block;
      clear: both;
    }
  }
</style>

引入改组件后，监听 on-select 方法即可获取当前点击的元素。