- 博客(45)
- 资源 (3)
- 问答 (13)
- 收藏
- 关注
RSS订阅原创 vue禁止浏览器空格下滑滚动条，判断是否是输入框的空格
// 禁止浏览器空格下滑滚动条 document.onkeydown = function(ev) { if (event.target.nodeName == 'TEXTAREA' || event.target.nodeName == 'INPUT') { return; }; var e = ev || event; if (e.keyCode == 32) { return false; } .
2022-05-30 14:47:21
490
原创 js获取文件名和后缀名称
**1.使⽤subtring() 截取字符串，对于⽂件名中会出现多个点的很有⽤，从最后⼀个点的地⽅截取代码如下： var text_name='文件名测试.mp4' // 文件名 var name=text_name.substring(0, text_name.lastIndexOf(".")); // 转码后的后缀名 var txt=text_name.substring(text_name.lastIndexOf('.')+1)
2022-05-20 11:45:48
2673
原创 Vue.filter过滤器存储单位换算按KB 、M、 G显示字节大小
{{ size| | formatbytes}}1.组件里使用在 filters 属性里面：filters: { formatbytes: function (bytes) { if (bytes === 0) return '0 B'; var k = 1000, // or 1024 sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], i = Math.floor(Mat
2022-04-26 17:10:54
773
原创 js从一个数组中筛选出另一个数组中存在的值
let arr1 = ['a', 'b', 'c'] let arr2 = [ { str: 'a', num: 1 }, { str: 'as', num: 2 }, { str: 'b', num: 3 }, { str: 'ca', num: 4 }, { str: 'c', num: 5 }, { str: 'ddd', num: 6 }, ] let arr1 = ['a
2022-03-23 15:51:04
1860
2
原创 vue 搜索框回车键触发 搜索事件
<input type="text" class="address" placeholder="请输入门店名称" v-focus v-model ="searchName" />界面中需要有一个聚焦 v-focus，在回车时才好执行keypresscreated () { let that = this; document.onkeypress = function(e) { var keycode = document.all ? event.key
2022-03-02 09:41:54
938
原创 如何在组件中监听vuex数据变化
//利用计算属性 computed: { listData() { return this.$store.state.listData; } }, //监听执行 watch: { listData(val) { 写上你需要的东西 } },
2022-02-22 12:03:26
404
原创 el-upload上传文件夹
<div class="upload_time"> <el-upload class="upload-demo" ref="upload" multiple action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handleP.
2022-02-09 13:51:31
4004
2
原创 vue使用websocket连接协议和sse使用 长链接
简要描述websocket连接协议连接URIWS协议(使用这种)WSS协议新信息通知{“code”: 200, //状态码 200-监控信息变动“message”: “监控信息变动”, //信息“moduleId”: 1, //变动的模块id“time”: 1642757761000 //当前系统时间(unix毫秒级时间戳)} created() { this.initWebSocket();//webscorket }, destroyed() {
2022-01-24 11:24:47
2521
原创 vue监听数据变化 watch
监听数据变化，在Vue中是通过侦听器来实现的，你也可以将它理解为监听器，时刻监听某个数据的变化。watch的基本用法在之前我们在js中添加了data、methods，这一次我们要添加的是watch属性。下面我们先来眼熟一下侦听器的添加位置：<script>export default { name: "app", // 数据 data() { return {}; }, // 方法 methods:{}, // 侦听
2022-01-07 14:12:54
14617
原创 vue 实现数组对象去重
<template> <div class="hello"> <el-button type="primary" size="medium" @click="quChong()">点击</el-button> </div></template><script>export default { name: 'HelloWorld', data(){ return{ arr:[
2022-01-04 10:22:24
956
原创 vue 嵌套 父子组件传值
父组件向子组件传值步骤：在这里先定义一下，相对本案例来说：App.vue是父组件，Second-module.vue是子组件。一、首先，值肯定是定义在父组件中的，供所有子组件共享。所以要在父组件的data中定义值：二、其次，父组件要和子组件有契合点：就是在父组件中调用、注册、引用子组件：调用： 注册： 引用：三、接下来，就可以在父组件和子组件链接的地方（即引用子组件的标签上），把父组件的值绑定给子组件：这里我绑定了两个值，一个是数组，一个是字符串。2018-03-30 10:15:55
2021-12-27 15:48:10
592
原创 vue js根据对象数组中的时间来排序
dataList:[{id:"1,name:“li”,cretime:‘2019-02-06 :08:30’}]computed: {newdataList: function() {return this.sortKey(this.dataList, “cretime”);}},sortKey(array, key) {return array.sort(function(a, b) {var x = a[key];var y = b[key];return x >
2021-12-27 10:05:19
759
原创 ES6 —— entries()，keys()和values()后端返回字段只有key value值处理
1.ES6 提供三个新的方法 —— entries()，keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象，可以用for…of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。一、一般数组用法for of支持遍历数组、类对象（例如DOM NodeList对象，也称伪数组）、字符串、Map对象、Set对象；for of不支持遍历普通对象，可通过参考下面的Object.keys()搭配使用遍历for (le
2021-12-13 13:51:07
763
原创 vue v-for定时器添加类名 动效
1.通过下标判断 <div class="main_li" v-for="(item,index) in list" :key="index" :class="index == activeIndex ? 'active' : ''" ></div> data(){ return{ activeIndex: "0", } }, created(){
2021-12-03 10:42:08
980
原创 关于ES6 set去重问题
可以利用ES6语法 set方法1 .let arr = [1,2,3,4,5,1,2] let set = new set（arr） console.log(set) set {1,2,3,4,5}2.使用ES6中Array的Array.from静态方法，它将一个类似数组的对象转为一个数组 let arr = [1,2,3,4,5,1,2] let set =Array.form( new set（arr）) console.log(se
2021-11-26 17:15:39
280
原创 vue将数组转换为数组的对象
1.循环这个数组变成数组对象var data = [ "USA", "Denmark", "London"]; var data = [ { "id" : 1, "label": "USA" }, { "id" : 2, "label": "Denmark" }, { "id" : 3, "label": "London" } ];解决方法：1.使用push（）数据阵列 var data = [ "USA", "Denmark", "London"]; var demArray =[]; d
2021-11-26 11:07:57
10656
1
翻译 vue 获取当前时间
<template> <div>{{nowDate}}</div></template><script>export default {data() { return { nowDate: "", // 当前日期 }; }, mounted() { this.currentTime(); },methods: { currentTime() { setInterval(
2021-11-15 17:42:26
822
原创 element ui 走马灯
切换下一屏 <el-carousel :autoplay="false" arrow="never" ref="carousel" height="340px"> <el-carousel-item v-for="(item,index) in num" :key="index" name="index"> <div class="photo animated"> ..
2021-11-12 14:07:50
193
原创 vue 基于vue-seamless-scroll无缝滚动
1、安装vue-seamless-scrollnpm install vue-seamless-scroll --save 2.在main.js里引入import scroll from 'vue-seamless-scroll';Vue.use(scroll);new Vue({ router, store, render: (h) => h(App),}).$mount('#app');3.再组件里使用：<!-- 文件描述：无缝滚动组件-->
2021-11-04 16:05:53
120
转载 vue使用Moment插件格式化时间
1.使用npm命令安装momentnpm install moment --save2.在main.js文件里引用momentimport echarts from 'echarts'//5.x 引用方式为按需引用//希望使用5.x版本的话,需要在package.json中更新版本号,并切换引用方式//import * as echarts from 'echarts'Vue.prototype.$echarts = echartsVue.config.productionTip = fa
2021-11-04 15:49:45
284
原创 vue使用高德地图
**概括：**示例效果：一、注册开发者账号并获得Key1、进入官网https://lbs.amap.com/，注册并登录2、登陆之后，点击控制台进入 [ 应用管理 ] 页面 [ 创建新应用 ]3、获得应用 Key值，[ 服务平台 ]一项选择 [ Web 端 ( JSAPI )或 Web 服务 ]二.安装插件和引入1.在index.html中引用js文件，在头部引入<script type="text/javascript" src="http://webapi.amap.com/map
2021-11-02 11:12:20
723
1
转载 vue 将后台数据时间戳转换成日期格式
前言.不同组件多次复用的话，建议在 src 下新建一个 common 文件夹，创建 date.js 文件，方便多次复用组件中使用：<template> <div> <p>{{ date | formatDate }}</p> <p>{{ date | formatDate2 }}</p> <p>{{ date | formatDate3 }}</p> </div>
2021-10-27 16:33:53
1821
1
转载 vue+ElementUI 日期选择器 获取时间戳
1、 value-format="timestamp" daterange 上面是从ElementUI里面粘过来的:default-time 作用是 限定你选择的时间范围吧 如果你选择5月1日至5月2日 默认 传回来的一个是5月1日 00:00:00 ，另一个是5月2日 00:00:00 不知道是不是我骚错了value-formate=“timestamp” 加上这个属性的作用是 将返回你选择的日期的时间戳获取选择的时间戳 直接 value9 你就
2021-10-27 11:26:11
2551
转载 Vue中子组件向父组件$emit传递一个方法
一个参数子组件向父组件传递一个参数时主要有以下两种方法//子组件this.$emit('itemClick',item)//父组件 <div id="app"> <Child @itemClick="handleItemClick"/> </div> methods:{ handleItemClick(item){ console.log(item) } }...
2021-10-20 15:25:02
146
原创 vue使用sessionStorage存储数据，页面不能实时更新,created里申明两次
1.这个key===的值为你存储sessionStorage声明的key// 只需修改xxxxx值，其余无需修改 Vue.prototype.resetSetItem = function (key, newVal) { if (key === 'roleName') { // 创建一个StorageEvent事件 var newStorageEvent = document.createEvent('StorageEvent'); const storage = { setItem: function
2021-10-20 15:01:28
2583
1
转载 浏览器刷新恢复Vuex数据
前言：我们在使用Vue框架时，常常会引入Vuex作为跨组件数据与状态管理工具。由于Vuex的数据是存储在内存中的，那么当浏览器刷新时，Vue实例会重新加载，原本存在的Vuex数据将会丢失。这其中可能包含一些必要的认证信息，使得站点需要重新登录，影响用户体验。前言.使用sessionStorage解决sessionStorage是window对象属性，允许在浏览器中存储 key/value 对的数据。sessionStorage 用于临时保存同一窗口(或标签页)的数据，在页面刷新时数据不会删除，但在关
2021-09-17 09:28:11
277
转载 vue项目获取浏览器对象“后退”，并监听，触发函数
1、app的根组件定义mounted函数：mounted() { // 监听浏览器的返回按钮 if (window.history && window.history.pushState) { history.pushState(null, null, document.URL); window.addEventListener("popstate", this.onCloseModal, false); } }2、app根组件定义dest
2021-09-17 09:23:01
1256
原创 js-file-download ，转码文件流
1.导出接口安装 js-file-downloadimport fileDownload from ‘js-file-download’;import Axios from ‘axios’import store from ‘@/store’ // 获取token3。download() {var requestUrl = “tcmp/api/devices/model”;var Authorization = store.state.user.token;Axios({method:
2021-08-24 20:24:07
2777
原创 ehcarts点击参数柱状图跳转页面
leftChartOne.on('click',params=>{ console.log('打开组建或者弹出方法')})leftChartOne // ehcarts 名字params // echarts 参数
2021-07-07 10:27:55
821
原创 echarts异步数据加载
1.安装echarts插件命令行：npm install echarts --save2.组件导入echarts如图：<template> <div id="tu"> <div id="lond"></div> </div></template><script>import {lond} from '../api/lond'import * as echarts from 'echarts';
2021-07-05 09:08:45
440
原创 vue使用数字滚动 vue-count-to
1.下载插件命令：npm install vue-count-to2.代码在这里插入代码片 3.插件参数：参数描述startVal开始值endVal结束值duration持续时间，以毫秒为单位autoplay自动播放decimals要显示的小数位数decimal十进制分割sepaeator分隔符prefix前缀suffix后缀useEasing使用缓和功能easingFn缓和回调
2021-06-18 15:14:12
226
原创 vue父组件向子组件传递方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>父组件向子组件传递方法</title> <script src="../../vue/vue-v2.6.11.js"></script></head><body><div id="app"> <
2021-05-27 14:36:03
667
vue使用WebSocket如何在请求头传递参数
2023-05-16
vue实现中英文切换
2023-04-19
前端播放flv处理延迟手动跳帧后一直转圈圈
2022-11-07
vue input框动态绑定数组对象
2022-09-14
vue input框动态修改数组对象
2022-09-14
前端flv直播流播放视频，websocket响应造成内存泄漏 浏览器崩溃
2022-07-24
如何禁用overflow:scroll，键盘空格下拉
2022-05-30
vue如何拿到v-for循环出来的item的值使它等于一个全局变量
2022-01-10
echarts全国地图下到城市怎么用，我cv了别人的代码，key值也换了现在情况这样
2021-12-17
vue 使用echarts相同数据为什么报错
2021-12-13
vue指令v-for循环video标签后视频无法播放,怎么解决。
2021-12-13
vue数组格式如何转换成数组对象形式，
2021-11-23
vue中嵌入外部网站 iframe标签
2021-11-16
报错：很抱歉，没有启用JavaScript，管理员无法正常工作。请使其继续。
2021-11-03
css3 backdrop-filter: blur(20px);为什么不生效，
2021-05-28
element ui 时间选择器选中样式能出现字体吗，怎么做
2021-05-24
如何修改element ui 里的el-pagination分页下拉框的样式
2021-05-24
TA创建的收藏夹 TA关注的收藏夹
TA关注的人