在vue2.0中写一个用button按钮，在弹出的messagebox组件中同时实现el-input-number组件和input组件功能、rules验证后进行确认和取消操作的程序

在 Vue 2.0 中实现这个需求，您可以这样实现：

1. 在模板中，定义一个按钮组件。当用户点击按钮时，显示一个消息框组件。

<template>
  <div>
    <el-button @click="showMessageBox = true">显示消息框</el-button>
    <el-message-box
      title="消息框"
      :visible.sync="showMessageBox"
      :before-close="handleBeforeClose"
    >
      <el-input-number v-model="inputNumberValue" />
      <input v-model="inputValue" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="showMessageBox = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-message-box>
  </div>
</template>

2. 在脚本中，定义一个消息框组件的显示状态变量 `showMessageBox`，以及两个输入框的值 `inputNumberValue` 和 `inputValue`。

<script>
export default {
  data() {
    return {
      showMessageBox: false,
      inputNumberValue: 0,
      inputValue: '',
    };
  },
  methods: {
    confirm() {
      // 进行 rules 验证
      // ...
      
      // 如果验证通过，执行确认操作
      // ...
      
      this.showMessageBox = false;
    },
    handleBeforeClose(done) {
      // 取消操作
      // ...
      
      done();
    },
  },
};
</script>

这是一个简单的实现方案，你可以根据实际需要对代码进行扩展和修改。