![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
韩召华
我很酷的
展开
-
swiper轮播,根据数据分页展示(一页轮播展示多少内容)
swiper轮播,根据数据分页展示原创 2023-03-02 14:17:35 · 452 阅读 · 0 评论 -
get/post(blob)请求导出文件
导出Excel流文件,Blob函数原创 2023-02-22 09:53:57 · 2146 阅读 · 0 评论 -
css:去除滚动条样式(隐藏滚动条)
css:去除滚动条样式(隐藏滚动条)原创 2022-12-17 16:01:03 · 4416 阅读 · 0 评论 -
限制input框只能输入数字和小数点,并且保留小数点后两位
限制input框只能输入数字和小数点,并且保留小数点后两位原创 2022-10-22 09:18:07 · 1849 阅读 · 0 评论 -
vue或css动画实现列表向上无缝滚动
vue或css动画实现列表向上无缝滚动原创 2022-09-20 21:01:36 · 2782 阅读 · 6 评论 -
selectTree单选iview+vue
selectTree原创 2022-07-27 00:17:59 · 780 阅读 · 0 评论 -
CSS绘制标签导航栏
Tab导航原创 2022-06-23 14:32:40 · 267 阅读 · 0 评论 -
使用vue国际化中出现内置的组件无法切换语言(i18n)的问题(element-ui、ivew)
使用vue国际化中出现内置的组件无法切换语言(i18n)的问题(element-ui、ivew)转载 2022-06-23 14:21:34 · 1208 阅读 · 0 评论 -
iview的Upload上传前怎么获取上传文件的路径?
iview的Upload上传前怎么获取上传文件的路径原创 2022-06-20 17:43:00 · 1091 阅读 · 0 评论 -
iview table动态改变表格高度二次封装
table原创 2022-06-18 15:48:11 · 567 阅读 · 0 评论 -
路由传参Query和params的区别?
Query和params的区别?原创 2022-06-09 12:07:51 · 5458 阅读 · 0 评论 -
vue实现浏览器全屏模式展示
1、安装screenfull包yarn add screenfull 或 npm install screenfull --save2、新建ScreenFull组件:ScreenFull.vue<template> <div class="screen-full"> <div v-show="!isFullscreen" @click="handleFullScreen">全屏模式</div> <div .原创 2022-03-22 10:52:41 · 3187 阅读 · 0 评论 -
vue实现在线编辑excel(转)
不支持ie 支持edge 需要ie请换方法vue不再赘述安装x-data-spreadsheetnpm install x-data-spreadsheet<template> <div id="x-spreadsheet-demo"></div></template><script> import Spreadsheet from 'x-data-spreadsheet'; import zhCN原创 2022-03-01 11:31:53 · 1432 阅读 · 0 评论 -
VueX(Vue状态管理模式)
概念: VueX是适用于在Vue项目开发时使用的状态管理工具。试想一下,如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值,一旦项目变得很庞大,管理和维护这些值将是相当棘手的工作。为此,Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中,我们只需要把这些值定义在VueX中,即可在整个Vue项目的组件中使用。step1.由于VueX是在学习VueCli后进行的,所以在下文出现的项目的目录请参照VueCli 2.x构建的目录。以下步骤的原创 2022-01-12 20:39:51 · 121 阅读 · 0 评论 -
js 拖拽功能的实现
元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标。拖拽原理:按下拖拽元素后开始监听文档中鼠标移动事件,然后再监听鼠标松开事件;鼠标移动时,元素div要随着鼠标一起移动,需要计算元素div位移的距离(移动的距离=鼠标离可视窗口的位置 – 鼠标在div中相对于左上角的位置)。然后松开鼠标时,删除移动事件和松开事件,元素完成拖拽代码参考<!DOCTYPE html><html lang="en"><title>拖拽</title><h原创 2022-01-08 14:24:40 · 845 阅读 · 0 评论 -
js实现单击事件和双击事件
一下代码可以解决单击事件和双击事件冲突的问题//单击事件var timeoutID = null;$("#test).on('click',function(e){ clearTimeout(timeoutID); timeoutID = window.setTimeout(function (){ //写单击事件要干的事},300);});//双击事件$("#test).on('dblclick',function(e){undefined clear...原创 2022-01-07 09:29:09 · 510 阅读 · 0 评论 -
JS实现根据数组对象的某一属性排序
一、冒泡排序(先了解冒泡排序机制)以从小到大排序为例,冒泡排序的原理就是通过两层循环把数组中两两相邻的元素进行比较,是的大的元素放到后边,元素交换位置,从而一步步的交换元素的位置,使得最大的元素放到数组的末尾,这样内部的循环就进行了一轮,再根据外部的循环依次再把次大一点的元素放到数组的末尾,从而实现数组的逐步排序。代码如下:// 冒泡排序var arr = [52,3,8,57,75,2,1];for (var i = 0; i<arr.length; i++) { for (va.原创 2021-12-26 18:08:31 · 9256 阅读 · 0 评论 -
Vue,uni-app,在app中动态切换video视频(黑屏)source标签src属性值不起作用问题
调试中看:source标签src属性赋值成功,但浏览器并没有发起请求去获得相应的视频。因此可以推断出来:当video中存在source标签的时候,浏览器渲染之后会自动去获取地址,即便地址改变,浏览器也不会再去获取地址。但是通过动态的插入source标签的方式,可以触发浏览器进行重排,从而去获取相应地址的文件进行播放。那就搞一个computed计算属性吧computed: { // 计算属性的 getter videoSource: function () { // `this`原创 2021-12-22 20:49:24 · 5583 阅读 · 0 评论 -
css制作三角形鼠标悬停三角形旋转
通过对块级元素设置border实现三角形,效果如图,鼠标悬停三角形就旋转(旋转多少度,修改对应数字即可)第二步第一步原理:当width与height为 0px是,该块级元素只留下border(注意width与height要为 0px,不能直接删除这两句代码)源码:width: 0px;height: 0px;border-top: 50px solid pink;border-left: 50px solid skyblue;border-bottom: 50px .原创 2021-12-11 12:19:17 · 718 阅读 · 0 评论 -
vue 自定义侧边栏组件
<template> <div :class="[cusClass]"> <Affix :offset-top="0" :use-capture="true"> <Card class="category mr_10" :bordered="false" dis-hover :padding="0"> <!-- <RadioGroup v-model="vertical" v-for="(item, in.原创 2021-11-11 16:23:57 · 1447 阅读 · 0 评论 -
uni-app项目中request请求封装和使用(promise)
uni-app项目中request请求封装和使用(promise)开发时我们使用本地的请求地址,而在项目上线时会使用线上的地址,并且每个请求所含的参数和请求方式都不大相同,那么在开发时对请求进行封装就是必要的了如图所示,先新建文件夹util,在util下新建js文件api.js1. 请求接口地址请求接口在开发时使用本地接口,而在线上时就是用线上的在线接口,如果不做封装,那么在上线之前就要对每一个请求地址进行修改,降低了工作效率。const BASE_URL="http://loca转载 2021-11-11 09:44:44 · 1418 阅读 · 0 评论 -
手写table表格
<template><div class="table" style="overflow-y: auto; height:15em; width:100%"> //overflow-y控制y轴滚动 <table border="0" width="100%" height="16em" cellpadding="4.8" align="center"> <tr> <th>排名</th> <th>道路名称.转载 2021-11-09 10:22:46 · 2867 阅读 · 0 评论 -
用Vue 做一个当路径列子(要显示之前跳转过来的路由)
new Vue({ name: 'invite-cat', router, beforeMount () { router.beforeResolve((to, from, next) => { let navs = to.matched.map(c=>c.name) console.log('路由走向:', navs.join('/')) next() }) },}).$mount('#app');...原创 2021-11-02 15:13:44 · 104 阅读 · 0 评论 -
vue + Element UI 中国省市区级联数据
写项目的时候遇到省市级联动, 使用的组件库是elementui,在这个组件库中没有直接给我们提供省市级联动的选择, 所以在这里给大家说一下, 如何去做1.安装npm install element-china-area-data --save-dev2.使用import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'ele转载 2021-11-03 09:52:19 · 452 阅读 · 0 评论 -
vue 图片file转Base64编码格式(以及base64转图片文件)
一、1.图片file转Base64编码格式imageToBase64 (file) { var reader = new FileReader() reader.readAsDataURL(file) reader.onload = () => { console.log('file 转 base64结果:' + reader.result) this.iconBase64 = reader.result } ...原创 2021-10-30 16:40:48 · 1175 阅读 · 0 评论 -
vue,上传图片
<template> <div class="upload-list"> <div class="demo-upload-list" v-for="(item,index) in uploadList"> <template class="flex"> <img :src="item.path"/> <div class="demo-upload-list-cover" v-i...原创 2021-10-29 09:07:25 · 275 阅读 · 0 评论 -
vue使用iview的Upload插件进行文件上传, 携带参数, 携带headers信息等
最近接手了一个重构前端页面的项目, 后台只提供api接口, 需要使用前端的vue框架中的Upload进行上传文件, 并携带两个参数, 同时还需要在请求头中设置userId接下来看一下如何使用Upload标签实现点击/拖拽上传如何携带参数, 如何设置headers<template> <div> <Row> <Col> <Upload multiple type="原创 2021-10-28 20:45:01 · 1872 阅读 · 0 评论 -
Vue 规则效验
<template> <div> <cus-modal ref="modal" title="编辑" @on-visible-change="onVisibleChange" @onOk="onOk" width="420"> <Form ref="formValidate" :model="form" :label-width="120"> <Form.原创 2021-10-27 11:19:26 · 523 阅读 · 0 评论 -
VUE+深度克隆
// 深度克隆function deepClone (obj) { // 对常见的“非”值,直接返回原来值 if([null, undefined, NaN, false].includes(obj)) return obj; if(typeof obj !== "object" && typeof obj !== 'function') { //原始类型直接返回 return obj; } var o = isArray(obj) ? [] : {}.原创 2021-10-27 10:28:35 · 535 阅读 · 0 评论 -
vue excel导入导出(封装)
下载数据封装(cus-upload.vue)<template> <Upload action="//jsonplaceholder.typicode.com/posts/" :before-upload="onBeforeUpload" :show-upload-list="false" :maxSize="maxSize" :accept="accept"> <slot>原创 2021-10-21 19:44:56 · 631 阅读 · 0 评论 -
给table表格序号添加子集(主要通过render函数的使用)
<template> <div class="meal-manage"> <div style="display: flex"> <dataType @onSelect="onSelect" :can-edit="false"></dataType> <div style="width: 'calc(100% - 160px)'"> <el-card style="margin.原创 2021-10-14 17:42:50 · 366 阅读 · 0 评论 -
vue中按钮使用v-bind:class动态切换颜色(点击A号button,背景色变化;点击B号button,A号回复原背景色,B变色)
当前Vue项目需要做一个按钮切换的功能(点击A号button,背景色变化;点击B号button,A号回复原背景色,B变色) =====》实现上述功能,最基础的方法就是,动过获取对应的dom,强制改变背景色:<div class="button1" v-on:click="YGDWKGMJ()" ref="ygdwkgmj">开发投资</div><div class="button2" v-on:click="XKGMJ()" ref="xkgmj"...转载 2021-09-12 18:16:19 · 6276 阅读 · 0 评论 -
vue 组件传值
<template> <div class="father"> <input @click="sendMsg" type="button" value="给父组件传递值"> </div></template><script>export default { name: 'father' data () { return { //将msg传递给父.原创 2021-07-22 16:15:22 · 121 阅读 · 0 评论 -
高德地图(卫星地图),固定热力图层不跟随地图缩放,信息窗体,区域线
<!-- 卫星地图 --><template> <div class="app"> <div id="containerMap"></div> </div></template><script>import AMapLoader from "@amap/amap-jsapi-loader";export default { name: "Map", data() { r.原创 2021-07-22 13:42:40 · 768 阅读 · 0 评论