1659857400
Cách Sử Dụng Ant Design Với Vue 3
Ant Design là một thư viện mã nguồn mở cho phép bạn tạo các trang web hấp dẫn, đáp ứng. Đó là một lựa chọn tuyệt vời cho dự án tiếp theo của bạn nếu bạn muốn sử dụng một khuôn khổ vừa được kiểm tra tốt vừa dễ học.
Mặt khác, Vue.js là một khung tiến bộ để tạo giao diện người dùng. Nó nhằm mục đích đơn giản để học trong khi linh hoạt và có thể tùy chỉnh. Sử dụng hai thứ này cùng nhau cho phép bạn tạo các trang web đáp ứng nhanh hơn bao giờ hết.
Ant Design và việc bao gồm API thành phần trong Vue 3 giúp việc tạo các ứng dụng đẹp, đáp ứng và có thể mở rộng trở nên đơn giản trong khi viết mã hạn chế.
Trong hướng dẫn ngắn này, chúng ta sẽ xem xét cách sử dụng gói ant-design-vue trong ứng dụng Vue 3 cũng như cách sử dụng hệ thống biểu tượng Ant.
Bắt đầu
Cũng cần nhắc lại rằng tất cả các phương pháp được mô tả ở đây sẽ hoạt động với các dự án Vue 3 được tạo bằng cả Vue CLI và Vite.
Tạo ứng dụng Vue 3 mới
Hãy bắt đầu bằng cách chạy lệnh sau để tạo một ứng dụng Vue 3 mới:
vue create my-app
# OR Vite
npm init vue@3Nếu bạn đang sử dụng Vue CLI, hãy nhớ chọn Vue 3 làm giá trị đặt trước ưa thích của bạn, như thể hiện trong ảnh chụp màn hình bên dưới:
Cài đặt ant-design-vue
Bạn có thể dễ dàng thêm gói ant-design-vue vào dự án Vue 3 của mình bằng lệnh dưới đây:
npm install ant-design-vue
# OR
yarn add ant-design-vueVà khi quá trình cài đặt hoàn tất, chúng ta có thể bắt đầu đăng ký nó trong dự án của mình.
Một cách tiếp cận là đăng ký toàn cầu gói trong dự án của chúng tôi, để chúng tôi có thể tham khảo các thành phần của nó từ bất kỳ đâu. Điều này có thể thực hiện được bằng cách cập nhật src/main.jstệp mục nhập với mã bên dưới:
import { createApp } from "vue";
import App from "./App.vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
const app = createApp(App);
app.use(Antd).mount("#app");Bằng cách này, chúng tôi có thể bắt đầu sử dụng các thành phần của nó trong ứng dụng của mình mà không cần phải nhập thêm bất kỳ thao tác nào:
<!-- components/Sample.vue -->
<template>
<a-button type="primary">Primary Button</a-button>
<a-button>Default Button</a-button>
<a-button type="dashed">Dashed Button</a-button>
</template>Bạn cũng có thể nhập các thành phần riêng lẻ theo yêu cầu:
<!-- components/Sample.vue -->
<template>
<div>
<Button type="primary">Primary Button</Button>
<Button>Default Button</Button>
<Button type="dashed">Dashed Button</Button>
</div>
</template>
<script setup>
import { Button } from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
</script>Như bạn có thể nhận thấy, chúng tôi cũng đã nhập tệp Ant Design CSS vào thành phần tệp duy nhất này và sẽ không có ý nghĩa gì nếu làm như vậy cho tất cả các tệp thành phần của chúng tôi về sau. Để giải quyết vấn đề này, chỉ cần nhập tệp Ant Design CSS vào src/main.jstệp thay thế, sao cho nội dung tệp trông giống như sau:
import { createApp } from "vue";
import App from "./App.vue";
import "ant-design-vue/dist/antd.css";
createApp(App).mount("#app");Để tránh phải nhập thêm, chúng tôi sẽ giả định rằng ant-design-vue đã được đăng ký toàn cầu trong các mẫu mã trước trong bài viết này.
Thành phần thiết kế Ant
Bộ thành phần Ant Design bao gồm một số yếu tố như nút, danh sách, thẻ và nhiều yếu tố khác, tất cả đều có sẵn với các màu sắc và kích thước khác nhau. Các biểu tượng cũng có thể được sử dụng trên giao diện chính cũng như trong các thành phần khác. Tuy nhiên, hãy bắt đầu bằng cách khám phá những điều cơ bản trong khi đính kèm các phương thức Vue tùy chỉnh và dữ liệu phản ứng với chúng:
<template>
<div>
<a-row>
<a-col span="12">
<div v-for="(alert, i) in alerts" :key="i">
<a-alert
:message="alert + ' message'"
description="Lorem ipsum dolor sit amet."
:type="alert"
/>
</div>
</a-col>
<a-col span="12">
<a-button type="primary" @click="message = 'Hello!'">
{{ message }}
</a-button>
<a-skeleton avatar :paragraph="{ rows: 4 }" />
</a-col>
</a-row>
</div>
</template>
<script setup>
import { ref } from "vue";
const alerts = ref(["success", "info", "warning", "error"]);
const message = ref("Click Me!");
</script>Ví dụ mã ở trên trình bày cách sử dụng cú pháp đường thiết lập Vue 3 để thực hiện lặp lại đơn giản cũng như đính kèm các sự kiện tùy chỉnh vào các thành phần ant-design-vue. Chúng tôi đã phát triển một hệ thống lưới hai cột trong đó cột đầu tiên hiển thị một nút và thành phần bộ tải khung, trong khi cột thứ hai về cơ bản lặp lại qua mảng cảnh báo của chúng tôi và sử dụng dữ liệu của chúng để hiển thị các thành phần cảnh báo tùy chỉnh.
Chúng tôi sẽ nhận được kết quả sau nếu chúng tôi chạy ứng dụng của mình:
Xử lý biểu mẫu
Xử lý dữ liệu biểu mẫu là một thao tác cần thiết trong bất kỳ ứng dụng nào. Dưới đây là một ví dụ về cách sử dụng ant-design-vue để tạo một thành phần biểu mẫu cơ bản và xử lý dữ liệu của nó:
<template>
<div>
<a-form
:model="formData"
name="basic"
autocomplete="off"
@finish="onSubmit"
@finishFailed="onError"
>
<a-form-item
label="Username"
name="username"
:rules="[{ required: true, message: 'Please input your username!' }]"
>
<a-input v-model:value="formData.username" />
</a-form-item>
<a-form-item
label="Password"
name="password"
:rules="[{ required: true, message: 'Please input your password!' }]"
>
<a-input-password v-model:value="formData.password" />
</a-form-item>
<a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
<a-checkbox v-model:checked="formData.remember">
Remember me
</a-checkbox>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
<a-button type="primary" html-type="submit">Continue</a-button>
</a-form-item>
</a-form>
</div>
</template>
<script setup>
import { ref } from "vue";
const formData = ref({
username: "",
password: "",
remember: true,
});
const onSubmit = async (_formData) => {
console.log("Form Submitted!:", _formData);
const response = await fetch("https://some.api/process-form", {
method: "POST",
body: _formData,
});
};
const onError = (errorInfo) => {
console.log("Failed:", errorInfo);
};
</script>Trong đoạn mã trên, chúng tôi đã xác định một đối tượng phản ứng formData, với một số chuỗi trống mặc định và chúng tôi cũng sử dụng v-modelliên kết biểu mẫu để liên kết dữ liệu này với các thành phần đầu vào biểu mẫu ant-design-vue của chúng tôi. Chúng tôi cũng đã tạo một hàm tùy chỉnh onSubmitvà đính kèm nó vào thành phần biểu mẫu ant-design-vue của chúng tôi để gửi dữ liệu biểu mẫu của chúng tôi tới một số API tưởng tượng để xử lý, cũng như một onErrorhàm để xử lý bất kỳ lỗi nào xảy ra trong khi xác thực biểu mẫu của chúng tôi.
Ngoài ra, mẫu mã này cho thấy cách các thuộc tính tùy chỉnh được bao gồm trong các thành phần ant-design-vue đơn giản hóa quá trình xác thực biểu mẫu cũng như làm cho chúng có thể truy cập được.
Và đây là kết quả đầu ra của biểu mẫu của chúng tôi sẽ trông như thế nào khi chúng tôi chạy ứng dụng:
Nếu bạn muốn tạo các biểu mẫu phức tạp trong Vue 3, bạn cũng nên đọc bài viết này về mô hình v .
Biểu tượng kiến thiết kế
Các biểu tượng đóng một phần quan trọng trong việc giúp thiết kế ứng dụng trở nên phong phú và hấp dẫn hơn. Và hệ thống Ant Design nhận thức được.
Nhóm thiết kế Ant cũng phát triển một gói bên ngoài cho phép bạn nhanh chóng thêm các biểu tượng phong phú vào ứng dụng của mình, bao gồm các biểu tượng có đường viền, liền khối và thậm chí là hai tông màu.
Bạn có thể dễ dàng cài đặt gói biểu tượng trong dự án Vue của mình với:
npm install @ant-design/icons-vueDưới đây là một ví dụ về cách chúng tôi nhập ba kiểu biểu tượng tên lửa khác nhau:
<template>
<div>
<rocket-outlined />
<rocket-filled />
<rocket-two-tone two-tone-color="#eb2f96" />
</div>
</template>
<script setup>
import {
RocketOutlined,
RocketFilled,
RocketTwoTone,
} from "@ant-design/icons-vue";
</script>Và chạy mã này sẽ tạo ra các kết quả sau:
Để thêm tương tác bổ sung, chúng tôi cũng có thể áp dụng thuộc tính xoay và xoay tùy chỉnh cho bất kỳ biểu tượng nào.
<template>
<div class="center">
<rocket-two-tone two-tone-color="#eb2f96" :rotate="50" />
<reload-outlined spin />
</div>
</template>
<script setup>
import { RocketTwoTone, ReloadOutlined } from "@ant-design/icons-vue";
</script>Kết quả nào trong kết quả sau:
Sự kết luận
Ant Design là một công cụ tuyệt vời để tạo một trang web với nỗ lực tối thiểu. Nó là một khuôn khổ rất dễ thích ứng cho phép bạn tạo các trang web đơn giản với rất nhiều tính linh hoạt. Và trong suốt bài viết này, chúng ta đã xem xét cách sử dụng gói ant-design-vue với Vue 3. Chúng ta cũng đã xem qua cách sử dụng ant-icon cũng như cách xử lý các lần gửi biểu mẫu cơ bản.
Trang tài liệu cho gói ant-design-vue là một điểm khởi đầu tuyệt vời để tìm hiểu về tất cả các thành phần được cung cấp.
1659856740
Como Usar O Ant Design Com O Vue 3
Ant Design é uma biblioteca de código aberto que permite criar sites atraentes e responsivos. É uma excelente escolha para o seu próximo projeto se você quiser usar uma estrutura bem testada e fácil de aprender.
O Vue.js, por outro lado, é uma estrutura progressiva para criar interfaces de usuário. Destina-se a ser simples de aprender, sendo flexível e personalizável. Usar esses dois juntos permite que você crie sites responsivos mais rápido do que nunca.
O Ant Design e a inclusão da API de composição no Vue 3 simplificam a criação de aplicativos bonitos, responsivos e escaláveis ao escrever código limitado.
Neste pequeno guia, veremos como usar o pacote ant-design-vue em um aplicativo Vue 3, bem como usar o sistema de ícones Ant.
Começando
Também vale a pena mencionar que todos os métodos descritos aqui funcionariam com projetos Vue 3 gerados com Vue CLI e Vite.
Criar um novo aplicativo Vue 3
Vamos começar executando o seguinte comando para criar um novo aplicativo Vue 3:
vue create my-app
# OR Vite
npm init vue@3Se você estiver usando o Vue CLI, certifique-se de escolher o Vue 3 como sua predefinição preferida, conforme mostrado na captura de tela abaixo:
Instale o ant-design-vue
Você pode facilmente adicionar o pacote ant-design-vue ao seu projeto Vue 3 com o comando abaixo:
npm install ant-design-vue
# OR
yarn add ant-design-vueE assim que a instalação estiver concluída, podemos começar a registrá-la em nosso projeto.
Uma abordagem é registrar globalmente o pacote em nosso projeto, para que possamos consultar seus componentes de qualquer lugar. Isso é possível atualizando o src/main.jsarquivo de entrada com o código abaixo:
import { createApp } from "vue";
import App from "./App.vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
const app = createApp(App);
app.use(Antd).mount("#app");Dessa forma, podemos começar a usar seus componentes em nossa aplicação sem precisar fazer nenhuma importação extra:
<!-- components/Sample.vue -->
<template>
<a-button type="primary">Primary Button</a-button>
<a-button>Default Button</a-button>
<a-button type="dashed">Dashed Button</a-button>
</template>Você também pode importar componentes individuais sob demanda:
<!-- components/Sample.vue -->
<template>
<div>
<Button type="primary">Primary Button</Button>
<Button>Default Button</Button>
<Button type="dashed">Dashed Button</Button>
</div>
</template>
<script setup>
import { Button } from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
</script>Como você deve ter notado, também importamos o arquivo CSS do Ant Design para esse componente de arquivo único e não faria sentido fazer o mesmo para todos os nossos arquivos de componentes daqui para frente. Para resolver isso, basta importar o arquivo CSS do Ant Design para o src/main.jsarquivo, de modo que o conteúdo do arquivo fique assim:
import { createApp } from "vue";
import App from "./App.vue";
import "ant-design-vue/dist/antd.css";
createApp(App).mount("#app");Para evitar ter que fazer as importações extras, vamos supor que ant-design-vue foi registrado globalmente nos exemplos de código anteriores neste artigo.
Componentes de design de formigas
O kit de componentes Ant Design inclui vários elementos, como botões, listas, cartões e muito mais, todos disponíveis em diferentes cores e tamanhos. Os ícones também podem ser utilizados na interface principal, bem como em outros componentes. No entanto, vamos começar explorando o básico enquanto anexamos métodos Vue personalizados e dados reativos a eles:
<template>
<div>
<a-row>
<a-col span="12">
<div v-for="(alert, i) in alerts" :key="i">
<a-alert
:message="alert + ' message'"
description="Lorem ipsum dolor sit amet."
:type="alert"
/>
</div>
</a-col>
<a-col span="12">
<a-button type="primary" @click="message = 'Hello!'">
{{ message }}
</a-button>
<a-skeleton avatar :paragraph="{ rows: 4 }" />
</a-col>
</a-row>
</div>
</template>
<script setup>
import { ref } from "vue";
const alerts = ref(["success", "info", "warning", "error"]);
const message = ref("Click Me!");
</script>O exemplo de código acima demonstra como usar a sintaxe do açúcar de configuração do Vue 3 para fazer uma iteração simples, bem como anexar eventos personalizados aos componentes ant-design-vue. Desenvolvemos um sistema de grade de duas colunas em que a primeira coluna exibia um botão e um componente de carregamento de esqueleto, enquanto a segunda coluna basicamente iterava em nossa matriz de alertas e usava seus dados para renderizar componentes de alerta personalizados.
Obteremos o seguinte resultado se executarmos nosso aplicativo:
Manipulação de formulários
A manipulação de dados de formulário é uma operação essencial em qualquer aplicativo. Aqui está um exemplo de como usar ant-design-vue para criar um componente de formulário básico e processar seus dados:
<template>
<div>
<a-form
:model="formData"
name="basic"
autocomplete="off"
@finish="onSubmit"
@finishFailed="onError"
>
<a-form-item
label="Username"
name="username"
:rules="[{ required: true, message: 'Please input your username!' }]"
>
<a-input v-model:value="formData.username" />
</a-form-item>
<a-form-item
label="Password"
name="password"
:rules="[{ required: true, message: 'Please input your password!' }]"
>
<a-input-password v-model:value="formData.password" />
</a-form-item>
<a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
<a-checkbox v-model:checked="formData.remember">
Remember me
</a-checkbox>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
<a-button type="primary" html-type="submit">Continue</a-button>
</a-form-item>
</a-form>
</div>
</template>
<script setup>
import { ref } from "vue";
const formData = ref({
username: "",
password: "",
remember: true,
});
const onSubmit = async (_formData) => {
console.log("Form Submitted!:", _formData);
const response = await fetch("https://some.api/process-form", {
method: "POST",
body: _formData,
});
};
const onError = (errorInfo) => {
console.log("Failed:", errorInfo);
};
</script>No código acima, definimos um objeto reativo, formData, com algumas strings vazias padrão, e também usamos a v-modelvinculação de formulário para vincular esses dados aos nossos componentes de entrada de formulário ant-design-vue. Também criamos uma função personalizada onSubmite a anexamos ao nosso componente de formulário ant-design-vue para enviar nosso formData a alguma API imaginária para processamento, bem como uma onErrorfunção para lidar com quaisquer erros ocorridos durante a validação de nosso formulário.
Além disso, este exemplo de código mostra como as propriedades personalizadas incluídas nos componentes ant-design-vue simplificam o processo de validação de formulários, além de torná-los acessíveis.
E aqui está a aparência da saída do nosso formulário quando executamos o aplicativo:
Se você deseja criar formulários complexos no Vue 3, leia também este artigo sobre v-model .
Ícones de design de formigas
Os ícones desempenham um papel importante em tornar o design do aplicativo mais rico e atraente. E o sistema Ant Design está ciente.
A equipe de design do Ant também desenvolveu um pacote externo que permite adicionar ícones ricos rapidamente ao seu aplicativo, incluindo ícones delineados, sólidos e até de dois tons.
Você pode instalar facilmente o pacote de ícones em seu projeto Vue com:
npm install @ant-design/icons-vueAqui está um exemplo de como importamos os três estilos diferentes de ícones de foguetes:
<template>
<div>
<rocket-outlined />
<rocket-filled />
<rocket-two-tone two-tone-color="#eb2f96" />
</div>
</template>
<script setup>
import {
RocketOutlined,
RocketFilled,
RocketTwoTone,
} from "@ant-design/icons-vue";
</script>E a execução desse código produz os seguintes resultados:
Para adicionar interação extra, também podemos aplicar uma propriedade de rotação e rotação personalizada a qualquer ícone.
<template>
<div class="center">
<rocket-two-tone two-tone-color="#eb2f96" :rotate="50" />
<reload-outlined spin />
</div>
</template>
<script setup>
import { RocketTwoTone, ReloadOutlined } from "@ant-design/icons-vue";
</script>O que resulta na seguinte saída:
Conclusão
Ant Design é uma excelente ferramenta para criar um site com o mínimo de esforço. É uma estrutura muito adaptável que permite criar sites simples com muita flexibilidade. E ao longo deste artigo, vimos como usar o pacote ant-design-vue com o Vue 3. Também vimos como usar o ant-icon e também como lidar com envios de formulários básicos.
A página de documentação do pacote ant-design-vue é um excelente ponto de partida para aprender sobre todos os componentes oferecidos.
1659853020
Comment Utiliser Ant Design avec Vue 3
Ant Design est une bibliothèque open source qui vous permet de créer des sites Web attrayants et réactifs. C'est un excellent choix pour votre prochain projet si vous souhaitez utiliser un cadre à la fois bien testé et facile à apprendre.
Vue.js, d'autre part, est un cadre progressif pour la création d'interfaces utilisateur. Il est destiné à être simple à apprendre tout en étant flexible et personnalisable. L'utilisation de ces deux éléments ensemble vous permet de créer des sites Web réactifs plus rapidement que jamais.
Ant Design et l'inclusion de l'API Composition dans Vue 3 simplifient la création d'applications belles, réactives et évolutives tout en écrivant un code limité.
Dans ce petit guide, nous verrons comment utiliser le package ant-design-vue dans une application Vue 3 ainsi que comment utiliser le système d'icônes Ant.
Commencer
Il convient également de mentionner que toutes les méthodes décrites ici fonctionneraient avec les projets Vue 3 générés à la fois avec Vue CLI et Vite.
Créer une nouvelle application Vue 3
Commençons par exécuter la commande suivante pour créer une nouvelle application Vue 3 :
vue create my-app
# OR Vite
npm init vue@3Si vous utilisez Vue CLI, assurez-vous de choisir Vue 3 comme préréglage préféré, comme indiqué dans la capture d'écran ci-dessous :
Installer ant-design-vue
Vous pouvez facilement ajouter le package ant-design-vue à votre projet Vue 3 avec la commande ci-dessous :
npm install ant-design-vue
# OR
yarn add ant-design-vueEt une fois l'installation terminée, nous pouvons commencer à l'enregistrer dans notre projet.
Une approche consiste à enregistrer globalement le package dans notre projet, afin que nous puissions nous référer à ses composants de n'importe où. Ceci est possible en mettant à jour le src/main.jsfichier d'entrée avec le code ci-dessous :
import { createApp } from "vue";
import App from "./App.vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
const app = createApp(App);
app.use(Antd).mount("#app");De cette façon, nous pouvons commencer à utiliser ses composants dans notre application sans avoir à effectuer d'importation supplémentaire :
<!-- components/Sample.vue -->
<template>
<a-button type="primary">Primary Button</a-button>
<a-button>Default Button</a-button>
<a-button type="dashed">Dashed Button</a-button>
</template>Vous pouvez également importer des composants individuels à la demande :
<!-- components/Sample.vue -->
<template>
<div>
<Button type="primary">Primary Button</Button>
<Button>Default Button</Button>
<Button type="dashed">Dashed Button</Button>
</div>
</template>
<script setup>
import { Button } from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
</script>Comme vous l'avez peut-être remarqué, nous avons également importé le fichier CSS Ant Design dans ce composant de fichier unique, et cela n'aurait aucun sens de faire de même pour tous nos fichiers de composants à l'avenir. Pour résoudre ce problème, importez simplement le fichier CSS Ant Design dans le src/main.jsfichier à la place, de sorte que le contenu du fichier ressemble à ceci :
import { createApp } from "vue";
import App from "./App.vue";
import "ant-design-vue/dist/antd.css";
createApp(App).mount("#app");Pour éviter d'avoir à effectuer des importations supplémentaires, nous supposerons que ant-design-vue a été enregistré globalement dans les exemples de code précédents de cet article.
Composants Ant Design
Le kit de composants Ant Design comprend plusieurs éléments tels que des boutons, des listes, des cartes et bien d'autres, qui sont tous disponibles en différentes couleurs et tailles. Les icônes peuvent également être utilisées sur l'interface principale ainsi que dans d'autres composants. Cependant, commençons par explorer les bases tout en leur attachant des méthodes Vue personnalisées et des données réactives :
<template>
<div>
<a-row>
<a-col span="12">
<div v-for="(alert, i) in alerts" :key="i">
<a-alert
:message="alert + ' message'"
description="Lorem ipsum dolor sit amet."
:type="alert"
/>
</div>
</a-col>
<a-col span="12">
<a-button type="primary" @click="message = 'Hello!'">
{{ message }}
</a-button>
<a-skeleton avatar :paragraph="{ rows: 4 }" />
</a-col>
</a-row>
</div>
</template>
<script setup>
import { ref } from "vue";
const alerts = ref(["success", "info", "warning", "error"]);
const message = ref("Click Me!");
</script>L'exemple de code ci-dessus montre comment utiliser la syntaxe sucre de configuration de Vue 3 pour effectuer une itération simple et attacher des événements personnalisés aux composants ant-design-vue. Nous avions développé un système de grille à deux colonnes où la première colonne affichait un bouton et un composant squelette de chargeur, tandis que la deuxième colonne parcourait essentiellement notre tableau d'alertes et utilisait leurs données pour rendre des composants d'alerte personnalisés.
Nous obtiendrons le résultat suivant si nous exécutons notre application :
Gestion des formulaires
La manipulation des données de formulaire est une opération essentielle dans toute application. Voici un exemple d'utilisation de ant-design-vue pour créer un composant de formulaire de base et traiter ses données :
<template>
<div>
<a-form
:model="formData"
name="basic"
autocomplete="off"
@finish="onSubmit"
@finishFailed="onError"
>
<a-form-item
label="Username"
name="username"
:rules="[{ required: true, message: 'Please input your username!' }]"
>
<a-input v-model:value="formData.username" />
</a-form-item>
<a-form-item
label="Password"
name="password"
:rules="[{ required: true, message: 'Please input your password!' }]"
>
<a-input-password v-model:value="formData.password" />
</a-form-item>
<a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
<a-checkbox v-model:checked="formData.remember">
Remember me
</a-checkbox>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
<a-button type="primary" html-type="submit">Continue</a-button>
</a-form-item>
</a-form>
</div>
</template>
<script setup>
import { ref } from "vue";
const formData = ref({
username: "",
password: "",
remember: true,
});
const onSubmit = async (_formData) => {
console.log("Form Submitted!:", _formData);
const response = await fetch("https://some.api/process-form", {
method: "POST",
body: _formData,
});
};
const onError = (errorInfo) => {
console.log("Failed:", errorInfo);
};
</script>Dans le code ci-dessus, nous avons défini un objet réactif, formData, avec des chaînes vides par défaut, et nous avons également utilisé la v-modelliaison de formulaire pour lier ces données à nos composants d'entrée de formulaire ant-design-vue. Nous avons également créé une fonction personnalisée onSubmitet l'avons attachée à notre composant de formulaire ant-design-vue pour soumettre notre formData à une API imaginaire pour traitement, ainsi qu'une onErrorfonction pour gérer les erreurs survenues lors de la validation de notre formulaire.
De plus, cet exemple de code montre comment les propriétés personnalisées incluses dans les composants ant-design-vue simplifient le processus de validation des formulaires et les rendent accessibles.
Et voici à quoi ressemblerait la sortie de notre formulaire lorsque nous exécutons l'application :
Si vous souhaitez créer des formulaires complexes dans Vue 3, vous devriez également lire cet article sur v-model .
Icônes de conception de fourmi
Les icônes jouent un rôle important pour rendre la conception des applications plus riche et attrayante. Et le système Ant Design en est conscient.
L'équipe de conception d'Ant a également développé un package externe qui vous permet d'ajouter rapidement des icônes riches à votre application, y compris des icônes soulignées, pleines et même bicolores.
Vous pouvez facilement installer le package d'icônes dans votre projet Vue avec :
npm install @ant-design/icons-vueVoici un exemple de la façon dont nous avons importé les trois différents styles d'icônes de fusée :
<template>
<div>
<rocket-outlined />
<rocket-filled />
<rocket-two-tone two-tone-color="#eb2f96" />
</div>
</template>
<script setup>
import {
RocketOutlined,
RocketFilled,
RocketTwoTone,
} from "@ant-design/icons-vue";
</script>Et l'exécution de ce code produit les résultats suivants :
Pour ajouter une interaction supplémentaire, nous pouvons également appliquer une propriété de rotation et de rotation personnalisée à n'importe quelle icône.
<template>
<div class="center">
<rocket-two-tone two-tone-color="#eb2f96" :rotate="50" />
<reload-outlined spin />
</div>
</template>
<script setup>
import { RocketTwoTone, ReloadOutlined } from "@ant-design/icons-vue";
</script>Ce qui se traduit par la sortie suivante :
Conclusion
Ant Design est un excellent outil pour créer un site Web avec un minimum d'effort. C'est un cadre très adaptable qui vous permet de créer des sites Web simples avec beaucoup de flexibilité. Et tout au long de cet article, nous avons vu comment utiliser le package ant-design-vue avec Vue 3. Nous avons également expliqué comment utiliser ant-icon ainsi que comment gérer les soumissions de formulaires de base.
La page de documentation du package ant-design-vue est un excellent point de départ pour en savoir plus sur tous les composants proposés.
1659852960
如何在 Vue 3 中使用 Ant Design
Ant Design 是一个开源库，可让您创建吸引人的响应式网站。如果您想使用经过充分测试且易于学习的框架，那么它是您下一个项目的绝佳选择。
另一方面，Vue.js 是一个用于创建用户界面的渐进式框架。它旨在易于学习，同时具有灵活性和可定制性。将这两者结合使用可以让您比以往更快地创建响应式网站。
Ant Design 和 Vue 3 中包含的 Composition API 使得在编写有限代码的同时创建美观、响应迅速且可扩展的应用程序变得简单。
在这个简短的指南中，我们将了解如何在 Vue 3 应用程序中使用 ant-design-vue 包以及如何使用 Ant 图标系统。
入门
还值得一提的是，这里描述的所有方法都适用于使用 Vue CLI 和 Vite 生成的 Vue 3 项目。
创建一个新的 Vue 3 应用程序
让我们开始运行以下命令来创建一个新的 Vue 3 应用程序：
vue create my-app
# OR Vite
npm init vue@3如果您使用的是 Vue CLI，请务必选择 Vue 3 作为您的首选预设，如下面的屏幕截图所示：
安装 ant-design-vue
您可以使用以下命令轻松地将 ant-design-vue 包添加到您的 Vue 3 项目中：
npm install ant-design-vue
# OR
yarn add ant-design-vue一旦安装完成，我们就可以开始在我们的项目中注册它了。
一种方法是在我们的项目中全局注册包，以便我们可以从任何地方引用它的组件。这可以通过src/main.js使用以下代码更新入口文件来实现：
import { createApp } from "vue";
import App from "./App.vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
const app = createApp(App);
app.use(Antd).mount("#app");这样，我们就可以在我们的应用程序中开始使用它的组件，而无需进行任何额外的导入：
<!-- components/Sample.vue -->
<template>
<a-button type="primary">Primary Button</a-button>
<a-button>Default Button</a-button>
<a-button type="dashed">Dashed Button</a-button>
</template>您还可以按需导入单个组件：
<!-- components/Sample.vue -->
<template>
<div>
<Button type="primary">Primary Button</Button>
<Button>Default Button</Button>
<Button type="dashed">Dashed Button</Button>
</div>
</template>
<script setup>
import { Button } from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
</script>您可能已经注意到，我们还将 Ant Design CSS 文件导入到这个单一文件组件中，并且对我们所有的组件文件都做同样的事情是没有意义的。为了解决这个问题，只需将 Ant Design CSS 文件导入到src/main.js文件中，文件内容如下所示：
import { createApp } from "vue";
import App from "./App.vue";
import "ant-design-vue/dist/antd.css";
createApp(App).mount("#app");为避免进行额外的导入，我们假设 ant-design-vue 已在本文前面的代码示例中全局注册。
Ant Design 组件
Ant Design 组件套件包括几个元素，如按钮、列表、卡片等等，它们都有不同的颜色和大小。图标也可以在主界面以及其他组件中使用。但是，让我们开始探索基础知识，同时将自定义 Vue 方法和响应式数据附加到它们：
<template>
<div>
<a-row>
<a-col span="12">
<div v-for="(alert, i) in alerts" :key="i">
<a-alert
:message="alert + ' message'"
description="Lorem ipsum dolor sit amet."
:type="alert"
/>
</div>
</a-col>
<a-col span="12">
<a-button type="primary" @click="message = 'Hello!'">
{{ message }}
</a-button>
<a-skeleton avatar :paragraph="{ rows: 4 }" />
</a-col>
</a-row>
</div>
</template>
<script setup>
import { ref } from "vue";
const alerts = ref(["success", "info", "warning", "error"]);
const message = ref("Click Me!");
</script>上面的代码示例演示了如何使用 Vue 3 设置糖语法进行简单的迭代以及将自定义事件附加到 ant-design-vue 组件。我们开发了一个双列网格系统，其中第一列显示一个按钮和一个骨架加载器组件，而第二列基本上遍历我们的警报数组并使用它们的数据来呈现自定义警报组件。
如果我们运行我们的应用程序，我们将得到以下结果：
表单处理
处理表单数据是任何应用程序中必不可少的操作。下面是一个如何使用 ant-design-vue 创建基本表单组件并处理其数据的示例：
<template>
<div>
<a-form
:model="formData"
name="basic"
autocomplete="off"
@finish="onSubmit"
@finishFailed="onError"
>
<a-form-item
label="Username"
name="username"
:rules="[{ required: true, message: 'Please input your username!' }]"
>
<a-input v-model:value="formData.username" />
</a-form-item>
<a-form-item
label="Password"
name="password"
:rules="[{ required: true, message: 'Please input your password!' }]"
>
<a-input-password v-model:value="formData.password" />
</a-form-item>
<a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
<a-checkbox v-model:checked="formData.remember">
Remember me
</a-checkbox>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
<a-button type="primary" html-type="submit">Continue</a-button>
</a-form-item>
</a-form>
</div>
</template>
<script setup>
import { ref } from "vue";
const formData = ref({
username: "",
password: "",
remember: true,
});
const onSubmit = async (_formData) => {
console.log("Form Submitted!:", _formData);
const response = await fetch("https://some.api/process-form", {
method: "POST",
body: _formData,
});
};
const onError = (errorInfo) => {
console.log("Failed:", errorInfo);
};
</script>在上面的代码中，我们定义了一个响应式对象，formData带有一些默认的空字符串，我们还使用v-model表单绑定将此数据绑定到我们的 ant-design-vue 表单输入组件。我们还创建了一个自定义函数onSubmit并将其附加到我们的 ant-design-vue 表单组件中，以将我们的 formData 提交给一些虚构的 API 进行处理，以及一个onError用于处理在验证表单时发生的任何错误的函数。
此外，此代码示例还展示了 ant-design-vue 组件中包含的自定义属性如何简化表单验证过程并使其可访问。
以下是我们运行应用程序时表单的输出：
如果你想在 Vue 3 中创建复杂的表单，你还应该阅读这篇关于 v-model 的文章。
蚂蚁设计图标
图标在使应用程序设计更加丰富和有吸引力方面发挥着重要作用。Ant Design 系统是有意识的。
Ant 设计团队还开发了一个外部包，可让您快速向应用程序添加丰富的图标，包括轮廓、实体甚至双色调图标。
你可以很容易地在你的 Vue 项目中安装图标包：
npm install @ant-design/icons-vue这是我们如何导入三种不同的火箭图标样式的示例：
<template>
<div>
<rocket-outlined />
<rocket-filled />
<rocket-two-tone two-tone-color="#eb2f96" />
</div>
</template>
<script setup>
import {
RocketOutlined,
RocketFilled,
RocketTwoTone,
} from "@ant-design/icons-vue";
</script>运行此代码会产生以下结果：
要添加额外的交互，我们还可以将自定义旋转和旋转属性应用于任何图标。
<template>
<div class="center">
<rocket-two-tone two-tone-color="#eb2f96" :rotate="50" />
<reload-outlined spin />
</div>
</template>
<script setup>
import { RocketTwoTone, ReloadOutlined } from "@ant-design/icons-vue";
</script>这导致以下输出：
结论
Ant Design 是一款出色的工具，可以轻松创建网站。它是一个适应性很强的框架，允许您创建具有很大灵活性的简单网站。在整篇文章中，我们研究了如何在 Vue 3 中使用 ant-design-vue 包。我们还讨论了如何使用 ant-icon 以及如何处理基本的表单提交。
ant-design-vue 包的文档页面是了解所提供的所有组件的绝佳起点。
1659851040
Vue 3 で Ant Design を使用する方法
Ant Design は、魅力的でレスポンシブな Web サイトを作成できるオープン ソース ライブラリです。十分にテストされ、習得が容易なフレームワークを使用したい場合は、次のプロジェクトに最適です。
一方、Vue.js は、ユーザー インターフェイスを作成するための進歩的なフレームワークです。柔軟でカスタマイズ可能でありながら、簡単に習得できるように設計されています。これら 2 つを一緒に使用すると、レスポンシブ Web サイトをこれまで以上に迅速に作成できます。
Ant Design と Vue 3 に含まれるコンポジション API により、限られたコードを記述しながら、美しく応答性が高くスケーラブルなアプリケーションを簡単に作成できます。
この短いガイドでは、Vue 3 アプリケーションで ant-design-vue パッケージを使用する方法と、Ant アイコン システムを使用する方法について説明します。
入門
ここで説明するすべての方法は、Vue CLI と Vite の両方で生成された Vue 3 プロジェクトで機能することにも言及する価値があります。
新しい Vue 3 アプリを作成する
次のコマンドを実行して、新しい Vue 3 アプリケーションを作成することから始めましょう。
vue create my-app
# OR Vite
npm init vue@3Vue CLI を使用している場合は、以下のスクリーンショットに示すように、優先プリセットとして Vue 3 を選択してください。
ant-design-vue をインストールする
以下のコマンドを使用して、ant-design-vue パッケージを Vue 3 プロジェクトに簡単に追加できます。
npm install ant-design-vue
# OR
yarn add ant-design-vueインストールが完了したら、プロジェクトへの登録を開始できます。
1 つの方法は、パッケージをプロジェクトにグローバルに登録して、そのコンポーネントをどこからでも参照できるようにすることです。これは、エントリsrc/main.jsファイルを次のコードで更新することで可能になります。
import { createApp } from "vue";
import App from "./App.vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
const app = createApp(App);
app.use(Antd).mount("#app");このようにして、追加のインポートを行うことなく、アプリケーションでそのコンポーネントの使用を開始できます。
<!-- components/Sample.vue -->
<template>
<a-button type="primary">Primary Button</a-button>
<a-button>Default Button</a-button>
<a-button type="dashed">Dashed Button</a-button>
</template>個々のコンポーネントをオンデマンドでインポートすることもできます:
<!-- components/Sample.vue -->
<template>
<div>
<Button type="primary">Primary Button</Button>
<Button>Default Button</Button>
<Button type="dashed">Dashed Button</Button>
</div>
</template>
<script setup>
import { Button } from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
</script>お気づきかもしれませんが、Ant Design CSS ファイルもこの 1 つのファイル コンポーネントにインポートしましたが、今後すべてのコンポーネント ファイルに対して同じことを行うのは意味がありません。これに対処するにはsrc/main.js、ファイルの内容が次のようになるように、代わりにAnt Design CSS ファイルをファイルにインポートするだけです。
import { createApp } from "vue";
import App from "./App.vue";
import "ant-design-vue/dist/antd.css";
createApp(App).mount("#app");追加のインポートを行う必要がないように、この記事の前のコード サンプルでは ant-design-vue がグローバルに登録されていると想定します。
Ant Design コンポーネント
Ant Design コンポーネント キットには、ボタン、リスト、カードなど、さまざまな色とサイズのさまざまな要素が含まれています。アイコンは、メイン インターフェイスだけでなく、他のコンポーネント内でも使用できます。ただし、カスタム Vue メソッドとリアクティブ データをそれらにアタッチしながら、基本を調べることから始めましょう。
<template>
<div>
<a-row>
<a-col span="12">
<div v-for="(alert, i) in alerts" :key="i">
<a-alert
:message="alert + ' message'"
description="Lorem ipsum dolor sit amet."
:type="alert"
/>
</div>
</a-col>
<a-col span="12">
<a-button type="primary" @click="message = 'Hello!'">
{{ message }}
</a-button>
<a-skeleton avatar :paragraph="{ rows: 4 }" />
</a-col>
</a-row>
</div>
</template>
<script setup>
import { ref } from "vue";
const alerts = ref(["success", "info", "warning", "error"]);
const message = ref("Click Me!");
</script>上記のコード例は、Vue 3 セットアップ シュガー構文を使用して単純な反復を実行し、カスタム イベントを ant-design-vue コンポーネントにアタッチする方法を示しています。最初の列にボタンとスケルトン ローダー コンポーネントを表示する 2 列のグリッド システムを開発しました。2 番目の列は基本的にアラートの配列を繰り返し処理し、それらのデータを使用してカスタム アラート コンポーネントをレンダリングしました。
アプリケーションを実行すると、次の結果が得られます。
フォーム処理
フォーム データの処理は、どのアプリケーションでも不可欠な操作です。ant-design-vue を使用して基本的なフォーム コンポーネントを作成し、そのデータを処理する方法の例を次に示します。
<template>
<div>
<a-form
:model="formData"
name="basic"
autocomplete="off"
@finish="onSubmit"
@finishFailed="onError"
>
<a-form-item
label="Username"
name="username"
:rules="[{ required: true, message: 'Please input your username!' }]"
>
<a-input v-model:value="formData.username" />
</a-form-item>
<a-form-item
label="Password"
name="password"
:rules="[{ required: true, message: 'Please input your password!' }]"
>
<a-input-password v-model:value="formData.password" />
</a-form-item>
<a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
<a-checkbox v-model:checked="formData.remember">
Remember me
</a-checkbox>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
<a-button type="primary" html-type="submit">Continue</a-button>
</a-form-item>
</a-form>
</div>
</template>
<script setup>
import { ref } from "vue";
const formData = ref({
username: "",
password: "",
remember: true,
});
const onSubmit = async (_formData) => {
console.log("Form Submitted!:", _formData);
const response = await fetch("https://some.api/process-form", {
method: "POST",
body: _formData,
});
};
const onError = (errorInfo) => {
console.log("Failed:", errorInfo);
};
</script>上記のコードでは、リアクティブ オブジェクト をformDataデフォルトの空の文字列で定義し、v-modelフォーム バインディングを使用してこのデータを ant-design-vue フォーム入力コンポーネントに結び付けました。また、カスタム関数onSubmitを作成して ant-design-vue フォーム コンポーネントにアタッチし、処理のために formData を架空の API に送信し、onErrorフォームの検証中に発生したエラーを処理する関数も作成しました。
さらに、このコード サンプルは、ant-design-vue コンポーネントに含まれるカスタム プロパティによって、フォームの検証とアクセス可能化のプロセスがどのように簡素化されるかを示しています。
アプリを実行すると、フォームの出力は次のようになります。
Vue 3 で複雑なフォームを作成したい場合は、 v-model に関するこの記事も読む必要があります。
Ant のデザイン アイコン
アイコンは、アプリケーションのデザインをより豊かで魅力的なものにする上で重要な役割を果たします。そして、Ant Design システムは認識しています。
Ant の設計チームは、アウトライン アイコン、ソリッド アイコン、ツートーン アイコンなど、豊富なアイコンをアプリケーションにすばやく追加できる外部パッケージも開発しました。
以下を使用して、Vue プロジェクトにアイコン パッケージを簡単にインストールできます。
npm install @ant-design/icons-vue3 つの異なるロケット アイコン スタイルをインポートした例を次に示します。
<template>
<div>
<rocket-outlined />
<rocket-filled />
<rocket-two-tone two-tone-color="#eb2f96" />
</div>
</template>
<script setup>
import {
RocketOutlined,
RocketFilled,
RocketTwoTone,
} from "@ant-design/icons-vue";
</script>このコードを実行すると、次の結果が生成されます。
さらに相互作用を追加するために、カスタムのスピンと回転のプロパティを任意のアイコンに適用することもできます。
<template>
<div class="center">
<rocket-two-tone two-tone-color="#eb2f96" :rotate="50" />
<reload-outlined spin />
</div>
</template>
<script setup>
import { RocketTwoTone, ReloadOutlined } from "@ant-design/icons-vue";
</script>次の出力が得られます。
結論
Ant Design は、最小限の労力で Web サイトを作成するための優れたツールです。シンプルなウェブサイトを柔軟に作成できる、非常に適応性の高いフレームワークです。この記事全体を通して、Vue 3 で ant-design-vue パッケージを使用する方法について説明しました。また、ant-icon の使用方法と、基本的なフォーム送信の処理方法についても説明しました。
ant-design-vue パッケージのドキュメント ページは、提供されているすべてのコンポーネントについて学習するための素晴らしい出発点です。
1659850260
Cómo Usar Ant Design con Vue 3
Ant Design es una biblioteca de código abierto que le permite crear sitios web atractivos y receptivos. Es una excelente opción para su próximo proyecto si desea utilizar un marco que esté bien probado y sea fácil de aprender.
Vue.js, por otro lado, es un marco progresivo para crear interfaces de usuario. Está destinado a ser fácil de aprender a la vez que flexible y personalizable. El uso de estos dos juntos le permite crear sitios web receptivos más rápido que nunca.
Ant Design y la inclusión de la API de composición en Vue 3 simplifican la creación de aplicaciones hermosas, receptivas y escalables mientras se escribe código limitado.
En esta breve guía, veremos cómo usar el paquete ant-design-vue en una aplicación Vue 3 y cómo usar el sistema de iconos Ant.
Empezando
También vale la pena mencionar que todos los métodos descritos aquí funcionarían con proyectos de Vue 3 generados con Vue CLI y Vite.
Crear una nueva aplicación Vue 3
Comencemos ejecutando el siguiente comando para crear una nueva aplicación Vue 3:
vue create my-app
# OR Vite
npm init vue@3Si está utilizando Vue CLI, asegúrese de elegir Vue 3 como su ajuste preestablecido preferido, como se muestra en la siguiente captura de pantalla:
Instalar hormiga-diseño-vue
Puede agregar fácilmente el paquete ant-design-vue a su proyecto Vue 3 con el siguiente comando:
npm install ant-design-vue
# OR
yarn add ant-design-vueY una vez completada la instalación, podemos comenzar a registrarlo en nuestro proyecto.
Un enfoque es registrar globalmente el paquete en nuestro proyecto, de modo que podamos hacer referencia a sus componentes desde cualquier lugar. Esto es posible actualizando el src/main.jsarchivo de entrada con el siguiente código:
import { createApp } from "vue";
import App from "./App.vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
const app = createApp(App);
app.use(Antd).mount("#app");De esta manera, podemos comenzar a usar sus componentes en nuestra aplicación sin tener que realizar ninguna importación adicional:
<!-- components/Sample.vue -->
<template>
<a-button type="primary">Primary Button</a-button>
<a-button>Default Button</a-button>
<a-button type="dashed">Dashed Button</a-button>
</template>También puede importar componentes individuales bajo demanda:
<!-- components/Sample.vue -->
<template>
<div>
<Button type="primary">Primary Button</Button>
<Button>Default Button</Button>
<Button type="dashed">Dashed Button</Button>
</div>
</template>
<script setup>
import { Button } from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
</script>Como habrá notado, también importamos el archivo CSS de Ant Design en este componente de archivo único, y no tendría sentido hacer lo mismo para todos nuestros archivos de componentes en el futuro. Para solucionar esto, simplemente importe el archivo CSS de Ant Design en el src/main.jsarchivo, de modo que el contenido del archivo se vea así:
import { createApp } from "vue";
import App from "./App.vue";
import "ant-design-vue/dist/antd.css";
createApp(App).mount("#app");Para evitar tener que realizar importaciones adicionales, supondremos que ant-design-vue se ha registrado globalmente en los ejemplos de código anteriores de este artículo.
Componentes de diseño de hormigas
El kit de componentes de Ant Design incluye varios elementos como botones, listas, tarjetas y muchos más, todos disponibles en diferentes colores y tamaños. Los iconos también se pueden utilizar en la interfaz principal, así como dentro de otros componentes. Sin embargo, comencemos explorando los conceptos básicos mientras les adjuntamos métodos Vue personalizados y datos reactivos:
<template>
<div>
<a-row>
<a-col span="12">
<div v-for="(alert, i) in alerts" :key="i">
<a-alert
:message="alert + ' message'"
description="Lorem ipsum dolor sit amet."
:type="alert"
/>
</div>
</a-col>
<a-col span="12">
<a-button type="primary" @click="message = 'Hello!'">
{{ message }}
</a-button>
<a-skeleton avatar :paragraph="{ rows: 4 }" />
</a-col>
</a-row>
</div>
</template>
<script setup>
import { ref } from "vue";
const alerts = ref(["success", "info", "warning", "error"]);
const message = ref("Click Me!");
</script>El ejemplo de código anterior demuestra cómo usar la sintaxis de azúcar de configuración de Vue 3 para realizar una iteración simple y adjuntar eventos personalizados a los componentes ant-design-vue. Habíamos desarrollado un sistema de cuadrícula de dos columnas donde la primera columna mostraba un botón y un componente de cargador de esqueleto, mientras que la segunda columna básicamente iteraba a través de nuestra matriz de alertas y usaba sus datos para generar componentes de alerta personalizados.
Obtendremos el siguiente resultado si ejecutamos nuestra aplicación:
Manejo de formularios
El manejo de datos de formularios es una operación esencial en cualquier aplicación. Aquí hay un ejemplo de cómo usar ant-design-vue para crear un componente de formulario básico y procesar sus datos:
<template>
<div>
<a-form
:model="formData"
name="basic"
autocomplete="off"
@finish="onSubmit"
@finishFailed="onError"
>
<a-form-item
label="Username"
name="username"
:rules="[{ required: true, message: 'Please input your username!' }]"
>
<a-input v-model:value="formData.username" />
</a-form-item>
<a-form-item
label="Password"
name="password"
:rules="[{ required: true, message: 'Please input your password!' }]"
>
<a-input-password v-model:value="formData.password" />
</a-form-item>
<a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
<a-checkbox v-model:checked="formData.remember">
Remember me
</a-checkbox>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
<a-button type="primary" html-type="submit">Continue</a-button>
</a-form-item>
</a-form>
</div>
</template>
<script setup>
import { ref } from "vue";
const formData = ref({
username: "",
password: "",
remember: true,
});
const onSubmit = async (_formData) => {
console.log("Form Submitted!:", _formData);
const response = await fetch("https://some.api/process-form", {
method: "POST",
body: _formData,
});
};
const onError = (errorInfo) => {
console.log("Failed:", errorInfo);
};
</script>En el código anterior, definimos un objeto reactivo formData, con algunas cadenas vacías predeterminadas, y también usamos el v-modelenlace de formulario para vincular estos datos a nuestros componentes de entrada de formulario ant-design-vue. También creamos una función personalizada onSubmity la adjuntamos a nuestro componente de formulario ant-design-vue para enviar nuestros datos de formulario a alguna API imaginaria para su procesamiento, así como una onErrorfunción para manejar cualquier error que ocurriera al validar nuestro formulario.
Además, este ejemplo de código muestra cómo las propiedades personalizadas incluidas en los componentes ant-design-vue simplifican el proceso de validación de formularios y los hacen accesibles.
Y así es como se vería la salida de nuestro formulario cuando ejecutamos la aplicación:
Si desea crear formularios complejos en Vue 3, también debe leer este artículo sobre v-model .
Iconos de diseño de hormigas
Los íconos juegan un papel importante en hacer que el diseño de la aplicación sea más rico y atractivo. Y el sistema Ant Design es consciente.
El equipo de diseño de Ant también desarrolló un paquete externo que le permite agregar rápidamente íconos enriquecidos a su aplicación, incluidos íconos delineados, sólidos e incluso de dos tonos.
Puede instalar fácilmente el paquete de iconos en su proyecto Vue con:
npm install @ant-design/icons-vueAquí hay un ejemplo de cómo importamos los tres estilos diferentes de íconos de cohetes:
<template>
<div>
<rocket-outlined />
<rocket-filled />
<rocket-two-tone two-tone-color="#eb2f96" />
</div>
</template>
<script setup>
import {
RocketOutlined,
RocketFilled,
RocketTwoTone,
} from "@ant-design/icons-vue";
</script>Y ejecutar este código produce los siguientes resultados:
Para agregar interacción adicional, también podemos aplicar una propiedad personalizada de giro y rotación a cualquier icono.
<template>
<div class="center">
<rocket-two-tone two-tone-color="#eb2f96" :rotate="50" />
<reload-outlined spin />
</div>
</template>
<script setup>
import { RocketTwoTone, ReloadOutlined } from "@ant-design/icons-vue";
</script>Lo que da como resultado la siguiente salida:
Conclusión
Ant Design es una excelente herramienta para crear un sitio web con el mínimo esfuerzo. Es un marco muy adaptable que le permite crear sitios web simples con mucha flexibilidad. Y a lo largo de este artículo, analizamos cómo usar el paquete ant-design-vue con Vue 3. También analizamos cómo usar ant-icon y cómo manejar los envíos de formularios básicos.
La página de documentación del paquete ant-design-vue es un maravilloso punto de partida para conocer todos los componentes que se ofrecen.
1659813720
How to use Ant Design with Vue 3
Ant Design is an open source library that allows you to create appealing, responsive websites. It’s an excellent choice for your next project if you want to use a framework that’s both well-tested and easy to learn.
Vue.js, on the other hand, is a progressive framework for creating user interfaces. It’s intended to be simple to learn while being flexible and customizable. Using these two together allows you to create responsive websites faster than ever before.
Ant Design and the inclusion of the Composition API in Vue 3 make it simple to create beautiful, responsive, and scalable applications while writing limited code.
In this short guide, we’ll look at how to use the ant-design-vue package in a Vue 3 application as well as how to use the Ant icon system.
See more at: https://blog.logrocket.com/use-ant-design-vue-3/
1609065545
How to use Ant Blazor Grid | Ant Design Blazor
https://www.youtube.com/watch?v=wtfkzv_urNI
#antblazor #antdesign #blazor
