[Frontend] Domine a exibição e ocultação de botões

I. Introdução

No desenvolvimento front-end, exibir e ocultar botões é uma interação comum e importante. Às vezes, precisamos controlar a exibição ou ocultação de botões por meio de alguma lógica. Vamos apresentar alguns métodos de implementação.

2. Quatro maneiras de exibir e ocultar

1. Controle de propriedade CSS

Ao definir as propriedades CSS do botão, podemos controlar facilmente a exibição e ocultação do botão. A maneira específica é usar o atributo display para definir o valor de exibição do botão como nenhum ou bloco.

/* 隐藏按钮 */
.hidden-button {
  display: none;
}

/* 显示按钮 */
.visible-button {
  display: block;
}

Observe que ocultar um botão com CSS não remove o elemento do documento HTML, apenas o torna invisível.

2. Controle de JavaScript

Além de usar CSS, também podemos usar JS para controlar a exibição ou ocultação de botões. Podemos alterar o estilo do botão através do atributo style em JS.

// 隐藏按钮
document.getElementById('hide-button').addEventListener('click', function() {
  document.getElementById('my-button').style.display = 'none';
});

// 显示按钮
document.getElementById('show-button').addEventListener('click', function() {
  document.getElementById('my-button').style.display = 'block';
});

3. Controle responsivo Vue.js

No Vue.js, podemos controlar a exibição ou ocultação de botões por meio de v-if ou v-show. Usar Vue.js será mais conveniente e flexível, especialmente em sites complexos.

v-if: Se a condição for atendida, o elemento será renderizado, caso contrário, não será renderizado.
v-show: Se a condição for atendida, mostre o elemento, caso contrário, oculte-o

<template>
  <div>
    <button v-if="showButton" @click="toggleButton">点击</button>
    <button v-show="showButton">点击我</button>
  </div>
</template>

<script>
export default {
      
      
  data() {
      
      
    return {
      
      
      showButton: true
    };
  },
  methods: {
      
      
    toggleButton() {
      
      
      this.showButton = !this.showButton;
    }
  }
};
</script>

Acima estão várias maneiras de exibir e ocultar botões front-end, CSS, JavaScript e Vue.js. Diferentes maneiras podem ser selecionadas em diferentes situações e realizadas de acordo com necessidades específicas.
A seguir, usamos o método 3 de controle responsivo Vue.js para realizar o caso no projeto

3. Histórico de demanda

Requisitos existentes: Quando o usuário marca a caixa de seleção, os botões liga e desliga serão exibidos; quando o usuário desmarca a caixa de seleção, os botões liga e desliga ficam ocultos.

4. Implementação de código

1. Defina variáveis

//是否显示删除按钮
const buttonShow = ref(true); 

2. Eventos vinculativos

Use v-show="!buttonShow" para controlar

<el-button v-show="!buttonShow" type="primary" round @click="handlerBatchSet()"
  >开启点读功能</el-button
           >
<el-button v-show="!buttonShow" type="primary" round @click="handlerBatchCancel()"
  >关闭点读功能</el-button

3. Acompanhe os alunos selecionados

/*监听选中的学生*/
  watch(selectedStudentName, (val) => {
    
    
    val.length > 0 ? (buttonShow.value = false) : (buttonShow.value = true);
  });

4. retorno retorno

return {
    
    
  buttonShow,
    }

5. O efeito geral

1. Alunos não selecionados

2. Alunos selecionados

6. As vantagens e desvantagens de definir a exibição e ocultação do botão

1. Vantagens

1. Interface limpa: ao ocultar botões desnecessários, você pode manter a interface limpa para não sobrecarregar ou estressar o usuário.

2. Melhorar a usabilidade: ocultar alguns botões de funções complexos ou avançados pode tornar o aplicativo mais fácil de entender e usar para iniciantes.

3. Economize espaço: ocultar alguns botões de função usados ​​com pouca frequência pode economizar espaço na interface, para que mais informações possam ser exibidas na tela.

2. Desvantagens

1. Difícil de encontrar: Se os botões ocultos não estiverem marcados ou posicionados corretamente, os usuários poderão ter dificuldade em encontrar o botão desejado, reduzindo a eficiência de utilização do aplicativo.

2. Esconder demais: se muitos botões estiverem ocultos, os usuários podem se sentir perdidos ou confusos, fazendo com que se perguntem como usar o aplicativo.

3. As funções secundárias não são importantes: Ocultar alguns botões de função secundária pode impedir que os usuários encontrem a função desejada, tornando o aplicativo mais difícil de usar.

7. A diferença entre controle de atributos CSS, controle JavaScript e controle responsivo Vue.js

1. Controle de propriedade CSS

Use a propriedade CSS para controlar a exibição e ocultação do botão, o que pode ser conseguido definindo displaya propriedade como noneou . blockEste método é simples e fácil de usar e é adequado para alguns cenários simples, como ocultar certos elementos em um design responsivo.

2. Controle de JavaScript

Use JavaScript para controlar a exibição e ocultação de botões, geralmente por meio de ouvintes de eventos e operações DOM. Este método é altamente flexível e pode controlar dinamicamente a exibição e ocultação de botões de acordo com uma lógica de negócios específica.Por exemplo, na verificação de formulários, é julgado se um botão de envio precisa ser exibido de acordo com a entrada do usuário.

3. Controle responsivo Vue.js

Use Vue.js para exibir e ocultar botões de controle responsivos, que podem ser implementados por meio de vinculação v-ifou instruções. v-showEste método tem excelente capacidade de resposta, pode monitorar automaticamente as alterações de dados e controlar a exibição e ocultação de botões de acordo com as alterações de dados.Por exemplo, em um aplicativo Vue.js de página única, diferentes botões são exibidos de acordo com a alternância de roteamento.

De modo geral, o controle de propriedades CSS é adequado para alguns cenários simples, o controle JavaScript é adequado para exibir e ocultar botões de controle dinâmico e o controle responsivo Vue.js é adequado para aplicativos de página única altamente responsivos. Escolha diferentes métodos para controlar a exibição e ocultação de botões de acordo com necessidades comerciais específicas e pilhas de tecnologia.

8. Resumo

Através de métodos como propriedades CSS, JavaScript e estruturas front-end, podemos realizar a exibição e ocultação de botões e melhorar a interatividade e a experiência do usuário na interface do usuário. De acordo com os diferentes requisitos do projeto e pilhas de tecnologia, escolha um método apropriado para realizar o controle do botão, tornando a interface do usuário mais flexível e amigável.