- 博客(20)
- 收藏
- 关注
RSS订阅原创 Element-UI：tree结构 实现懒加载案例
前言在我们实际开发中，由于后端返回的节点数据量庞大，而用户往往没有要看到所有数据的需求，如果在页面加载中，将页面的所有节点数据都加载出来，无疑是浪费用户宝贵的时间。 因此，就有了节点的懒加载的需求，用户想展开哪个节点，我们就给他展示什么数据（异步的从后台发送请求获取当前节点数据然后进行渲染）Demo 逻辑简单介绍：点击当前节点调用后端接口，加载节点的下级数据实现效果：<el-tree :props="props" // 展示你的数据信息
2022-05-24 16:47:54
1288
1
原创 Element-UI：el-table 表头筛选
前言需求：根据表头筛选表格符合条件的数据最终实现效果：情况一：表格没有分页html 部分：在列中设置 filters 和 filter-method 属性即可开启该列的筛选。filters 是一个数组，filter-method 是一个方法，它用于决定某些数据是否显示， 会传入三个参数：value, row 和 column。<el-table-column prop="UploadStatus" label="上传逻辑" width="100" fixed="l
2022-05-17 19:20:00
4342
原创 Vue3.0 + Ts 项目框架搭建六：配置全屏 screenfull
前言全屏插件 screenfull🔍，用于跨浏览器使用 JavaScript Fullscreen API的简单包装器，可让您将页面或任何元素变为全屏。安装npm install screenfull本文使用的是@5.1.0版本。使用import screenfull from 'screenfull';if (screenfull.isEnabled) { screenfull.toggle(); // 开启全屏}其他API：.on（事件，函数）screenfull.on
2022-05-05 11:00:00
1148
4
原创 Vue3.0 + Ts 项目框架搭建五：配置 i18n
前言在src目录下创建 i18n文件夹，该文件下创建 index.ts，zh.ts，en.ts// index.ts 文件内容import { createI18n } from 'vue-i18n'import ZH from './zh'import EN from './en'const message = { zh: { ...ZH }, en: { ...EN }}const getCurrentLanguage = () => {
2022-05-05 10:00:00
1509
原创 前端路由的两种模式：hash模式和 history模式
前端路由实现方式在单页面web网页中, 单纯的浏览器地址改变，网页不会重载，如单纯的hash网址改变网页不会变化，因此我们的路由主要是通过监听事件，并利用js实现动态改变网页内容，有两种实现方式： hash模式：监听浏览器地址hash值变化，执行相应的js切换网页 history模式：利用history API实现url地址改变，网页内容改变hash与history的区别hashhistoryurl显
2022-05-02 19:07:28
6896
原创 Vue3学习之第五节： 组件通信
一、props（父子组件传值）父子组件传值要使用setup函数中的参数来实现。setup 主要有两个参数： 第一个参数：props ：父组件传递过来的属性会被放到props对象中 第二个参数：context：包含3个属性，如下： attrs：所有的非prop的attribute slots：父组件传递过来的插槽 emit：当我们组件内部需要发出事件时会用到emit父组件向子组件传值父组件中：<template>
2022-04-30 19:59:23
233
原创 Vue3学习之第四节：setup()中使用watch、watchEffect 函数
一、watch 监听import { ref, watch, reactive } from 'vue'export default { setup(){ let str = ref('') let msg = ref('你好！') let person = reactive({ name: '王五', age: 100, info: { a: { salary: 20 } } }) // 情况一：监听ref所定义的一个响应
2022-04-26 21:16:39
2788
原创 Vue3学习之第一节：初识setup
介绍一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API的入口。Vue3.0中的一个新的配置项，值为一个函数。组件中所用到的：数据、方法等等，均要配置再setup中。注意点：1.尽量不要与Vue2.x配置混用Vue2.x配置...
2022-04-26 19:35:43
870
原创 Vue3学习之第二节：ref函数、reactive函数
一、ref 函数作用：定义一个响应式的数据。示例：<template> <div>{{ name }}</div></template><script> import { ref } from 'vue' export default { setup() { const name = ref('张三') console.log(name.value) // '张三' // 暴露给模板
2022-04-23 18:19:19
3141
原创 Vue3 组合式Api之customRef实现防抖功能
前言什么是防抖？ 防抖就是对于频繁触发的事件添加一个延时同时设定一个最小触发间隔，如果触发间隔小于设定的间隔，则清除原来的定时，重新设定新的定时；如果触发间隔大于设定间隔，则保留原来的定时，并设置新的定时； 防抖的结果就是频繁的触发转变为触发一次。使用customRef实现防抖作用：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。该函数有两个参数： track 和 trigger 。使用自定义 ref 通过 v-model 实现 防抖 示例：<template>
2022-04-20 22:06:00
504
原创 Vue3学习之第三节：setup()中使用计算属性
vue2的方式写computed：代码片段： data() { return { num1: 0, num2: 0, }; }, computed: { result() { return parseInt(this.num1) + parseInt(this.num2); }, }Ps: num1和num2的和等于result在vue3中我们如何使用computed：代码片段：<template>
2022-04-20 16:54:39
1445
原创 Vue3.0 + Ts 项目使用element-plus 自动按需导入 使用v-loading报错
问题展示：使用v-loading报错 无法找到样式 element-plus/es/components/loading-directive/style/css解决办法：element-plus版本："element-plus": "^2.1.9" "unplugin-auto-import": "^0.7.1", "unplugin-vue-components": "^0.19.3"使用正则表达式，排除loading-directive的样式 exclude: new RegExp(
2022-04-18 23:13:23
2226
5
原创 Vue3.0 + Ts 项目框架搭建四：配置 Svg-Icon、Icon图标
1. 在src文件下，创建components/SvgIcon/index.vue组件<template> <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" :class="className" /> <svg v-else class="svg-icon" :class="className" aria-hidd
2022-04-17 15:11:01
1015
原创 Vue3.0 + Ts 项目框架搭建三：element-plus
一、安装首先进行依赖的安装，这里直接使用npm方式：npm install element-plus --save二、使用提供两种使用方案，根据自己需要，任选其一即可。1. 全局引入注：如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。在main.ts中直接导入：import { createApp } from 'vue'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'
2022-04-17 14:12:54
2001
原创 Vue3.0 + Ts 项目框架搭建二：路由 Router
前言上篇文章我们使用 vue-cli 创建了模板项目，可以看到安装的依赖只有 vue，所以要正常的驱动项目，安装必要的依赖是跑不了。其中Router是控制整个系统的页面路由，是最重要的依赖之一。因为我们使用Vue3.0的框架，所以这里必须使用Router4.0版本。一、安装通过npm安装：npm install vue-router@4 -S注：安装插件 -S 和 -D 区别-S，- -save(保存) ，包名会被注册在package.json的dependencies里面，在生产环境下这
2022-04-17 12:35:52
3303
原创 Vue3.0 + Ts 项目框架搭建一：创建项目
前言本文目的在于记录自己项目框架搭建的过程。一、项目创建vue create vue3_ts_demo接下来是具体选择：注：根据你需要用方向上下键选择对应功能（按 “空格键”选择/取消选择，A键全选/取消全选，I键进行反选）插件介绍：TypeScript // JavaScript的一个超集（添加了可选的静态类型和基于类的面相对象编程）Processive Web App（PWA）Support // 渐进式Web应用程序Router
2022-04-17 11:25:11
2593
1
原创 element-UI：el-table 表格排序
element-UI：el-table 表格排序需求：el-table 需要支持排序，即点击当前列头实现排序。最终实现效果：思路：
2021-07-30 14:01:49
4551
1
原创 Vue登录滑块验证
效果：Vue登录滑块验证，如图：1、引用插件 vue-monoplasty-slide-verify使用命令行安装：npm install --save vue-monoplasty-slide-verify2、在main.js目录下添加代码import Vue from 'vue';// 引入登录滑块验证插件import SlideVerify from 'vue-monoplasty-slide-verify';Vue.use(SlideVerify)3、在页面中使用<sl
2021-06-23 20:53:47
938
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人