[Tente gravar] Clique no botão e insira o valor do botão na caixa de entrada

Dica: Após a redação do artigo, o índice pode ser gerado automaticamente. Para saber como gerá-lo, consulte o documento de ajuda à direita.

Diretório de artigos


Como um novato no desenvolvimento front-end, registro as idéias e requisitos de desenvolvimento funcional que sinto que preciso anotar durante o desenvolvimento
: clique no botão e passe o valor do botão para a entrada. O estilo do botão muda ( clicado); clique no botão novamente e o botão será O valor do botão é apagado da entrada e o estilo do botão é restaurado (não clicado)

Código aproximado (apenas parte escrita, registre ideias) (botão único):

 <!-- HTML部分 -->
 <!-- 按钮 -->
        <a-button class="commentLabelBtn" type="primary" :class="{active: isActive1}" @click="commentLabel1($event)">
               {
    
    {
    
     value }}
        </a-button>
        <a-input v-model="form.comment">
               {
    
    {
    
     form.comment }}
        </a-input>
 <!-- script部分(ts) -->
 		isActive1 = false;


		commentLabel1(event) {
    
    
        if (this.isActive1 == false) {
    
    
            this.isActive1 = true;
            this.form.comment += event.srcElement.innerText + ';';
        } else {
    
    
            let test = this.form.comment.replace('value', ''); // 需要直接写 value 的值,不能写变量名
            this.form.comment = test;
            this.isActive1 = false;
        }
    }
    
 <!-- CSS部分 -->
 .commentLabelBtn {
    
    
        width: auto;
        height: 28px;
        margin: 8px 8px 8px 0;
        background: #eaeff5;
        color: #000000 !important;
        border-radius: 50px;
        border: none;
    }
.active {
    
    
        background-color: #435bf7;
        color: #fff !important;
    }

Implementar efeitos (vários botões)
Insira a descrição da imagem aqui

Se você tiver alguma dúvida, podemos discuti-la juntos.

Acho que você gosta

Origin blog.csdn.net/weixin_55005618/article/details/124167316
Recomendado
Clasificación