| <template> |
| <div style="padding: 5px;"> |
| <text class="result">{{result}}</text> |
| <div class="row"> |
| <text class="btn" onclick="input">1</text> |
| <text class="btn" onclick="input">2</text> |
| <text class="btn" onclick="input">3</text> |
| <text class="btn btn-operator" onclick="input">+</text> |
| </div> |
| <div class="row"> |
| <text class="btn" onclick="input">4</text> |
| <text class="btn" onclick="input">5</text> |
| <text class="btn" onclick="input">6</text> |
| <text class="btn btn-operator" onclick="input">-</text> |
| </div> |
| <div class="row"> |
| <text class="btn" onclick="input">7</text> |
| <text class="btn" onclick="input">8</text> |
| <text class="btn" onclick="input">9</text> |
| <text class="btn btn-operator" onclick="input">*</text> |
| </div> |
| <div class="row"> |
| <text class="btn" onclick="input">0</text> |
| <text class="btn" onclick="input">.</text> |
| <text class="btn" onclick="clear">AC</text> |
| <text class="btn btn-operator" onclick="calculate">=</text> |
| </div> |
| </div> |
| </template> |
| |
| <style> |
| .row { |
| flex-direction: row; |
| } |
| |
| .result { |
| text-align: right; |
| background-color: #666; |
| font-size: 40px; |
| color: white; |
| } |
| |
| .btn { |
| flex: 1; |
| text-align: center; |
| background-color: #eee; |
| font-size: 36px; |
| } |
| |
| .btn, .result { |
| height: 100px; |
| padding: 30px; |
| margin: 5px; |
| } |
| |
| .btn-operator { |
| background-color: #669; |
| font-size: 40px; |
| color: white; |
| } |
| </style> |
| |
| <script> |
| require('weex-components'); |
| var OP = ['+', '-', '*', '/']; |
| var inputs = []; |
| module.exports = { |
| data: { |
| result: '' |
| }, |
| methods: { |
| input: function(e) { |
| var value = e.target.attr['value']; |
| var lastOne = inputs.length ? inputs[inputs.length - 1] : ''; |
| if (OP.indexOf(lastOne) > -1 && OP.indexOf(value) > -1) { |
| return; |
| } |
| |
| inputs.push(value); |
| var buf = [], char; |
| for (var i = 0; i < inputs.length; i++) { |
| char = inputs[i]; |
| if (OP.indexOf(char) > -1) { |
| char = ' ' + char + ' '; |
| } |
| buf.push(char); |
| } |
| this.result = buf.join(''); |
| }, |
| calculate: function() { |
| var result = eval(this.result); |
| inputs = [result]; |
| this.result = result; |
| }, |
| clear: function() { |
| inputs = []; |
| this.result = ''; |
| } |
| } |
| } |
| </script> |