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)
Se você tiver alguma dúvida, podemos discuti-la juntos.