做一个案例

好的，我可以为您介绍一个简单的小工具：计算器。

首先，我们可以在项目中创建一个名为 Calculator 的页面。在这个页面中，我们需要添加一个输入框和一些按钮，用于输入和计算数值。代码如下：

<template>
  <view class="container">
    <view class="input-wrapper">
      <input class="input" type="number" placeholder="请输入数字" v-model="inputValue" />
    </view>
    <view class="btn-wrapper">
      <button class="btn" @click="onButtonClick('+')">+</button>
      <button class="btn" @click="onButtonClick('-')">-</button>
      <button class="btn" @click="onButtonClick('*')">*</button>
      <button class="btn" @click="onButtonClick('/')">/</button>
    </view>
    <view class="result-wrapper">
      <text class="result">计算结果：{{result}}</text>
    </view>
  </view>
</template>

在这个页面中，我们使用了一个 input 组件来接收用户输入的数字，使用了一些 button 组件来表示加减乘除等操作，还使用了一个 text 组件来显示计算结果。

接下来，我们需要在页面的 script 区域中添加一些逻辑代码，用于处理用户的输入和计算结果。代码如下：

<script>
export default {
  data() {
    return {
      inputValue: '',
      result: ''
    };
  },
  methods: {
    onButtonClick(operator) {
      const value = parseFloat(this.inputValue);
      if (!isNaN(value)) {
        switch (operator) {
          case '+':
            this.result = value + parseFloat(this.result || 0);
            break;
          case '-':
            this.result = value - parseFloat(this.result || 0);
            break;
          case '*':
            this.result = value * parseFloat(this.result || 1);
            break;
          case '/':
            this.result = value / parseFloat(this.result || 1);
            break;
        }
        this.inputValue = '';
      } else {
        uni.showToast({
          title: '请输入数字',
          icon: 'none'
        });
      }
    }
  }
};
</script>

在这个代码中，我们使用了 data 函数来定义了两个变量：inputValue 和 result，分别表示用户的输入值和计算结果。我们还定义了一个方法 onButtonClick，用于处理用户点击按钮的事件。在这个方法中，我们首先使用 parseFloat 函数将用户输入的字符串转换为数字，然后根据用户选择的操作符来进行计算，最后将计算结果保存在 result 变量中。如果用户输入的不是数字，我们则使用 uni.showToast 函数来显示一个提示框。

最后，我们需要在样式区域中添加一些样式代码，来美化页面的外观。代码如下：

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.input-wrapper {
  margin-bottom: 20px;
}

.input {
  width: 80%;
  font-size: 30px;
  text-align: center;
  border: none;
  border-bottom: 2px solid #ddd;
  outline: none;
}

.btn-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.btn {
  width: 40%;
  height: 60px;
  font-size: 24px;
  color: #fff;
  background-color: #2ecc71;
  border: none;
  border-radius: 10px;
}

.result-wrapper {
  margin-top: 20px;
}

.result {
  font-size: 24px;
  color: #333;
}
</style>

在这个代码中，我们定义了一些样式，用于设置输入框、按钮和计算结果的样式。

完成以上步骤后，我们就成功地创建了一个简单的计算器小工具。用户可以在输入框中输入数字，然后点击加减乘除等按钮进行计算，最后得到计算结果。