![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue小功能案例
文章平均质量分 60
vue、vue-cli
码上暴富
我不懒,还添加了个人简介
展开
-
vue2+vxe-table实现表格增删改查+虚拟滚动
版本:v3.x (vue 2.6 长期维护版)原创 2024-04-23 17:01:45 · 477 阅读 · 1 评论 -
vue2+elementUi的两个el-date-picker日期组件进行联动
【代码】vue2+elementUi的两个el-date-picker日期组件进行联动。原创 2024-04-01 17:19:46 · 473 阅读 · 0 评论 -
vue自定义指令实现按钮只允许点击一次
vue自定义指令实现按钮只允许点击一次这个例子中创建了一个名为 click-once 的自定义指令,通过 bind 钩子函数给元素绑定了一个点击事件,并且利用一个变量 clicked 控制了按钮只能点击一次的行为。在点击后会执行传入指令的方法,并在一定时间后(这里是 1 秒)重新允许点击。记得将代码中的 handleClick 方法替换成你想要执行的实际操作。// 在你的 Vue 文件中原创 2023-12-05 11:05:42 · 784 阅读 · 0 评论 -
el-table双击修改单元格的值(完整代码)
给数据里加一个show属性即可,双击的时候显示true,失去焦点的时候隐藏false。原创 2023-11-30 15:18:39 · 440 阅读 · 0 评论 -
ResizeObserver观察元素宽度的变化
ResizeObserver 构造函数创建一个新的 ResizeObserver 对象,它可以用于监听 Element 内容盒或边框盒或者 SVGElement 边界尺寸的大小。原创 2023-11-20 16:39:27 · 159 阅读 · 0 评论 -
AbortController中止请求通信[模糊搜索案例]
该示例应该渲染的结果是包含1234的模糊搜索,但是结果却是123和1234。问题:由于请求的响应的时间不同,所以快速改变输入框的值会导致界面渲染错误。如果之前的请求响应很快,在下一次请求之前就已经响应了呢,结果会渲染错吗?该案例的中止请求可以用于很多地方,比如取消上传/下载文件等。解决:如果之前的请求还没有响应成功,那么就中止之前的请求。解决之后的运行结果,可以看到之前的请求已经被取消了。答案是,当然不会,因为最后的请求结果会覆盖之前的结果。解决的代码: 很简单,打开注释掉的 3 行代码即可。原创 2023-10-17 15:06:57 · 351 阅读 · 0 评论 -
vue横向滚动条通过鼠标滚动控制
vue横向滚动条通过鼠标滚动控制vue横向滚动条通过鼠标滚动控制vue横向滚动条通过鼠标滚动控制<template> <ul class="scrollX"> <li v-for="(item, i) in 20">{{item}}</li> </ul></template><script>export default { name: "Test01", methods: { //原创 2022-05-19 14:47:06 · 2323 阅读 · 2 评论 -
vue使用vant页面案例(左边下拉右边搜索、下拉和文本组件的样式、选中和删除标签)
vue使用vant页面案例--左边下拉右边搜索、下拉和文本组件的样式、选中和删除标签vue使用vant页面案例(左边下拉右边搜索、下拉和文本组件的样式、选中和删除标签)vue使用vant页面案例(左边下拉右边搜索、下拉和文本组件的样式、选中和删除标签)效果图左边下拉右边搜索下拉和文本组件的样式选中和删除标签<template> <div class="Video"> <van-nav-bar title="场站管理" fixed pla原创 2022-03-28 16:20:32 · 3224 阅读 · 2 评论 -
vue实现高德地图模糊搜索+筛选条件+定位+信息窗(完整案例)
vue实现高德地图模糊搜索+筛选条件+定位+信息窗vue实现高德地图模糊搜索+筛选条件+定位+信息窗(完整案例)vue实现高德地图模糊搜索+筛选条件+定位+信息窗(完整案例)先npm安装高德地图npm i @amap/amap-jsapi-loader --save<template> <div class="StationMap"> <van-nav-bar title="场站地图" fixed placeholder safe-area-inset-原创 2022-03-28 16:00:59 · 3509 阅读 · 5 评论 -
vue实现模糊搜索
vue实现模糊搜索案例<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><div id="app"> <input type="text" v-model='search' />原创 2022-03-25 16:22:29 · 6755 阅读 · 0 评论 -
vue-cli中获取上传文件的原生进度
vue-cli中获取上传文件的原生进度vue-cli中获取上传文件的原生进度vue-cli中获取上传文件的原生进度封装请求export function fileUploadNew(url, params, timeout, onUploadProgress) { return new Promise((resolve, reject) => { axios({ url, method: 'post', data: params, headers: { 'C原创 2021-10-15 14:01:08 · 275 阅读 · 0 评论 -
vue-cli中跳转页面返回顶部
vue-cli中跳转页面返回顶部vue-cli中跳转页面返回顶部vue-cli中跳转页面返回顶部在router文件夹的index中写入以下代码即可JavaScriptconst router = new VueRouter({ routes, // 对于页面跳转,全部都返回到页面顶部。 scrollBehavior(to, from, savedPosition) { return { x: 0, y: 0 }; },});...原创 2021-09-29 10:23:47 · 146 阅读 · 0 评论 -
vue-cli中使用base64上传文件
JavaScript实现base64JavaScript实现base64JavaScript实现base64在vue-cli中getBase64(file) { return new Promise(function (resolve, reject) { let reader = new FileReader(); let imgResult = "";原创 2021-09-09 17:34:34 · 255 阅读 · 0 评论 -
vue-cli实现下载文件而不是打开文件
vue-cli实现下载文件而不是打开文件vue-cli实现下载文件而不是打开文件vue-cli实现下载文件而不是打开文件写一个vue指令,原理就是使用blob实现下载Vue.directive('down', { inserted: (el, binding) => { el.style.cssText = 'cursor: pointer;color:write;' el.addEventListener('click', () => { console.原创 2021-09-09 17:25:16 · 993 阅读 · 0 评论 -
vue-cli创建插件发布npm
vue-cli创建插件发布npmvue-cli创建插件发布npmvue-cli创建插件发布npm1、先去npm官网注册个账号 https://www.npmjs.com/ 如果有账号就直接登录2、根据vue-cli3的官方文档创建一个项目3、开始写toast 插件一般插件都写在一个文件夹里面,什么文件夹放在那里随便~4、在新增的plugin > toast.vue组件中写入以下内容//toast.vue文件代码<template> <d原创 2021-09-03 17:34:47 · 279 阅读 · 0 评论 -
vue-cli+element的树形控件获取选中节点的数据
element的树形控件获取选中节点的数据网上一大堆的改源代码,拼接。其实官方已经给出了方法!!!使用<template> <div> <el-tree @check="currentChecked" :data="testObj" show-checkbox node-key="id"></el-tree> </div></template><script> expo原创 2021-08-07 13:58:41 · 1547 阅读 · 1 评论 -
vue-cli富文本编辑器
vue-cli富文本编辑器富文本编辑器富文本编辑器安装以下教程参考自官方的教程:https://www.wangeditor.com/安装执行以下语句安装:npm i wangeditor --save使用<template> <div> <div class="home"> <div id="demo1"></div> </div>原创 2021-07-27 11:41:39 · 200 阅读 · 0 评论 -
vue-cli树形结构/组织结构
vue-cli树形结构/组织结构树形结构/组织结构树形结构/组织结构安装以下教程参考自官方的教程:https://github.com/tower1229/Vue-Tree-Chart导入执行以下语句安装城市数据:npm i vue-tree-chart --save引用以vue-cli创建的项目为例,在vue文件中的scrit标签内导入数据:import TreeChart from “vue-tree-chart”;使用<template> <原创 2021-07-22 16:48:00 · 569 阅读 · 0 评论 -
vue-cli+elementUI实现三级城市联动
vue-cli+elementUI实现三级城市联动三级城市联动三级城市联动安装以下教程参考自官方的教程:https://www.npmjs.com/package/element-china-area-data导入执行以下语句安装城市数据:npm install element-china-area-data -S引用以vue-cli创建的项目为例,在vue文件中的scrit标签内导入数据:import { regionData, CodeToText } from “elem原创 2021-07-22 09:39:32 · 138 阅读 · 0 评论 -
vue-cli手写tabs选项卡
vue-cli手写tabs选项卡手写tabs选项卡手写tabs选项卡<template> <div class="FinanceProduct"> <div class="top"> <ul> <li :class="[isShowTabs==='one'?'active':'']" @click="clickTabs('one')">全部产品</li>原创 2021-07-21 17:34:35 · 449 阅读 · 0 评论 -
Vue-cli横向滑动列表
Vue-cli横向滑动列表横向滑动列表横向滑动列表使用vue-cli + elementUI + swiper<template> <div class="IndexRanking boxW1280"> <div class="content"> <div class="title"> <div> <i class原创 2021-07-19 15:46:50 · 555 阅读 · 0 评论 -
vue-cli手写弹窗组件
vue-cli手写弹窗组件手写弹窗组件手写弹窗组件<template> <div class="test01"> <el-button @click="openAlertBox" type="danger">click Me</el-button> <div class="alert-box" ref="alertBox"> <div class="box-head">原创 2021-06-24 10:37:11 · 385 阅读 · 0 评论 -
vue_cli轮播图--swiper插件
vue_cli轮播图轮播图--swiper插件轮播图–swiper插件<template> <div class="app-banner"> <!--swiper的bug,如果数据是从网络获取的, 那么自动轮播到最后一页之后就不轮播了--> <!--只需要在swiper组件上面加上v-if="数据.length > 0"--> <!--<swiper :options="swiperOption" class="banne原创 2021-05-05 00:49:06 · 224 阅读 · 0 评论 -
Vue_cli实现抽奖
Vue_cli实现抽奖<template> <div class="test02"> <p>我是test02</p> <div class="prize"> <ul> <li v-for="(item, i) of mapList" :key="i" :class="{active: activeIndex === item.index}" @click="startLuck(it原创 2021-04-24 23:30:57 · 131 阅读 · 0 评论