ant-design-vue中a-input使用keyup删除不如keydown

Posted 2023-05-03

参考技术A 词根校验功能如下：使用div作为一个容器来存放所有的词根，所有的词根使用一个rootList数组进行v-for遍历生成一个个小的div，最后面跟一个input输入框。当输入框输入文本，点击回车或失焦或长时间未输入，将往rootList内push一个新词根。

需求：删除词根，之前只能通过点击每个词根尾部的x号进行删除。新加使用键盘的删除键来进行删除。

解决：input监听删除键事件，当input框内容为空的时候，删除前一个词根，即可达到通过键盘来删除词根的目的。

@keyup.delete实际上对应的是两个键，一个是delete，一个是backspace。其中delete键对input没有任何影响，但backspace键会去删除input中的字符。

或者改写delete键

问题：当input中只剩下一个字符的时候，点击删除键，就会把最后一个字符删除，同时会把前一个词根也删除掉。实际上想要的效果是把input内容删空后再次删才可删前面的词根。

发现：input的change事件和keyup.delete事件，先后顺序是先触发change，然后再触发keyup。这就导致上面的情况的发生，删除最后一个字符的时候，把前一个词根也跟着删了

在input的change事件中，可以通过event.inputType得知当前是添加文本还是删除文本等等。

https://developer.mozilla.org/zh-CN/docs/Web/API/InputEvent/inputType

一个 DOMString 对象，包含所做输入的类型。有许多可能的值，例如insertText、deleteContentBackward、insertFromPaste和formatBold。

当添加文本的时候，是insertText，删除文本的时候是deleteContentBackward

change事件有inputType，keyup没有inputType

判断如果是删除，且删除前是一个字符，删除后是0个字符，在keyup事件中去删除词根，这个想法不行。

最后的解决办法是：统一使用keydown事件，keydown早于keyup，不过要做个专门的判断是backspace键。

ant-design-vue 之form表单中label-col和wrapper-col使用

ant-design-vue 之form表单中label-col和wrapper-col使用

主要代码: 

:label-col="{ span: 5 }" :wrapper-col="{ span: 15 }"

demo:

<template>
    <div>
        <a-form :form="form" >

            <a-form-item label="计划名称" style="width: 100%" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
                <a-textarea placeholder="请输入"/>
            </a-form-item>

        </a-form>
    </div>
</template>
<script>

    /* 这是ant-design-vue */
    import Vue from ‘vue‘
    import Antd, { message,Select } from ‘ant-design-vue‘  //这是ant-design-vue
    import ‘ant-design-vue/dist/antd.css‘
    Vue.use(Antd);
    /* 这是ant-design-vue */


    export default {};
</script>

<style scoped>

</style>