vue.js
haizou
一个正在成长的程序员
展开
-
Echarts — 绘制省级地图
版本:vue@3.0.5 + echarts@5.1.2本文将介绍如何使用 echarts 绘制一个省级地图(以江西省为例)原创 2021-08-28 20:26:03 · 3175 阅读 · 2 评论 -
Vue.js — 拦截页面跳转
本文介绍的是全局前置守卫 `router.beforeEach` ,它常用作登录拦截,该函数会在每次路由跳转前执行,在此期间做一个登录判断,只有登录过后才具有访问路由的权限原创 2021-08-26 22:01:39 · 1992 阅读 · 0 评论 -
vue + ant-design + xlsx 实现导出表格数据
一、安装 xlsxnpm i xlsx --save-dev二、渲染 Table 表格< 1 > 使用 ant-design-vue 写一个基本的表格<template> <div class="container"> <a-button type="primary" @click="exportData" > 导出 </a-button> <a-table :data-source="ta原创 2021-08-26 20:39:59 · 3672 阅读 · 10 评论 -
Vue.js — 自定义组件的双向绑定
首先写一个简单的 radio 组件要实现自定义组件的双向绑定,原理就是父组件将值传递给子组件,子组件监听值的变更然后把值响应出来。在子组件中监听值的变化,然后触发父组件中的自定义事件,变更的值会当做这个自定义组件的返回值<template> <label class="radio" v-for="item in options" :key="item" @click="toggle(item)" >原创 2021-08-22 10:15:49 · 521 阅读 · 0 评论 -
Vue.js — ant-design数组表单验证
一、前言常见的表单验证是对 对象中 单个字段的验证,那如何对数组中的每一项做到验证呢,效果如下:二、实现首先需要准备好 form 数据和 rules 验证规则form: { member: [ { name: "", sex: "", age: "" } ],},rules: { name: { required: true, message: "请输入姓名" }, sex: { required: true, message: "请选择性别"原创 2021-08-21 13:53:50 · 5150 阅读 · 6 评论 -
Vue.js — 教你如何在项目中配置国际化
所谓国际化,就是站点支持多国语言的切换,能够给不同国家的人去使用。本文将教你如何在vue项目中配置国际化。原创 2021-08-15 09:54:05 · 1269 阅读 · 2 评论 -
Vue.js — vuex的基本使用
注意:本文使用的是 vue3.0 + vuex4.0 的写法。一、创建一个 store 文件import { createStore } from 'vuex';// 模拟请求数据function getUserInfo() { return new Promise((resolve) => { resolve({ name: '张三' }) });}const store = createStore({ // 相当于 vue 中的 data,存放.原创 2021-08-07 20:07:34 · 243 阅读 · 0 评论 -
Vue.js — 递归组件 - 树形列表
描述本文介绍的是基于Vue技术实现递归组件的方法。用Vue实现一级列表、二级列表的展示很简单,但是想要实现无限级,光是套上一个又一个的v-for是行不通的,这个时候就需要用到递归的方法,所谓递归,就是不断调用自身,递归组件就是不断调用自身组件来实现无限级列表展示。如下图:代码实现1、tree组件在目录下创建一个 tree.vue 的组件。<!-- tree 树形组件 --><template> <div class="container">原创 2021-07-18 11:24:49 · 855 阅读 · 0 评论