请参考此Codepen中的工作示例。
如果单击按钮并使用向上/向下箭头键,则按钮填充将增加/减少。
相关的HTML是:
<div class="inline-block {{ highlight_css }}">
<button @click="toggleEditMode"
@keydown.up.prevent="morePadding"
@keydown.down.prevent="lessPadding"
v-bind:style="padding"
class="bgc-hf8f8f8 font-size-1rem line-height-23 bold border-1px-solid-gray border-radius-3">
{{ status_text }}<br>padding: {{ amount }}px;
</button>
</div>
向上箭头键的示例Vue.js方法:
morePadding: function() {
if(this.editable) {
this.amount++;
this.padding = 'padding: ' + this.amount + 'px;';
}
},
一切正常,直到我将<button>
标签更改为<div>
标签。的@click
作品,但关键修饰语似乎坏了。
我阅读了文档,但是找不到说<div>
标签很特殊的东西。
div
元素默认情况下无法聚焦。要使其具有焦点,可以添加一个tabindex
属性。如果您不希望通过顺序导航对元素进行迭代,请使用负值。
new Vue({
el: '#highlight',
data: {
button_text: 'Disabled',
amount: 0,
highlight_css: '',
padding: '',
editable: false
},
methods: {
toggleEditMode: function() {
this.editable = !this.editable;
this.changeText();
this.highlight();
},
changeText: function() {
if(this.editable){
this.button_text = 'Enabled';
}
else {
this.button_text = 'Disabled';
}
},
highlight: function() {
if(this.editable){
this.highlight_css = 'border-2px-solid-orange border-radius-3';
}
else {
this.highlight_css = '';
}
},
morePadding: function() {
if(this.editable) {
this.amount++;
this.padding = 'padding: ' + this.amount + 'px;';
}
},
lessPadding: function() {
if(this.editable && this.amount > 0) {
this.amount--;
this.padding = 'padding: ' + this.amount + 'px;';
}
}
}
});
@import 'https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css';
.inline-block {
display: inline-block
}
.bold {
font-weight: bold
}
.border-5px-solid-orange {
border: 5px solid orange
}
.talign-center {
text-align: center
}
.border-1px-solid-gray {
border: 1px solid gray
}
.bgc-blue {
background-color: blue
}
.border-radius-3 {
border-radius: 0.1875em
}
.display-none {
display: none
}
.white {
color: white
}
.padding-top-50 {
padding-top: 3.125em
}
.padding-5 {
padding: 0.3125em
}
.padding-10 {
padding: 0.625em
}
.padding-top-20 {
padding-top: 1.25em
}
.bgc-hf8f8f8 {
background-color: #f8f8f8
}
.margin-top-30 {
margin-top: 1.875em
}
.border-1px-solid-orange {
border: 1px solid orange
}
.text-align-center {
text-align: center
}
.display-inline {
display: inline
}
.red {
color: red
}
.margin-bottom-20 {
margin-bottom: 1.25em
}
.border-2px-solid-orange {
border: 2px solid orange
}
.line-height-23 {
line-height: 1.4375em
}
.font-size-1rem {
font-size: 1rem
}
.margin-top-50 {
margin-top: 3.125em
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<div id="highlight" class="row padding-top-20">
<div class="large-12 columns large-centered text-align-center margin-top-30">
<!--Editing Container-->
<div class="margin-bottom-20">Click the button.<br>Then use the up and down arrow keys to change button padding.</div>
<div class="inline-block {{ highlight_css }}">
<div tabindex="-1" type="submit" @click="toggleEditMode" @keydown.up.prevent="morePadding" @keydown.down.prevent="lessPadding" v-bind:style="padding" class="bgc-hf8f8f8 font-size-1rem line-height-23 bold border-1px-solid-gray border-radius-3">
{{ button_text }}<br>padding: {{ amount }}px;
</div>
</div>
</div>
<div class="large-12 columns margin-top-50">
<pre>{{ $data | json }}</pre>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句