基于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 方法即可获取当前点击的元素。