楠啊#-优快云博客

转载 vue中使用async和await

vue中使用async和await

2022-11-08 09:32:07 641

原创 flv直播流播放视频，websocket响应造成内存泄漏浏览器崩溃

内存泄漏

2022-07-24 10:01:27 3832 13

原创 FLV.js播放报错,及浏览器播放flv缓存内存不足导致黑屏

flv

2022-06-20 09:58:32 5085

原创 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 600

原创 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 2802

原创 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 905 1

原创 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 1983 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 1021

原创如何在组件中监听vuex数据变化

//利用计算属性 computed: { listData() { return this.$store.state.listData; } }, //监听执行 watch: { listData(val) { 写上你需要的东西 } },

2022-02-22 12:03:26 450

原创 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 4216 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 2721

原创 vue监听数据变化 watch

监听数据变化，在Vue中是通过侦听器来实现的，你也可以将它理解为监听器，时刻监听某个数据的变化。watch的基本用法在之前我们在js中添加了data、methods，这一次我们要添加的是watch属性。下面我们先来眼熟一下侦听器的添加位置：<script>export default { name: "app", // 数据 data() { return {}; }, // 方法 methods:{}, // 侦听

2022-01-07 14:12:54 14880

原创 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 1054

原创 vue 嵌套父子组件传值

父组件向子组件传值步骤：在这里先定义一下，相对本案例来说：App.vue是父组件，Second-module.vue是子组件。一、首先，值肯定是定义在父组件中的，供所有子组件共享。所以要在父组件的data中定义值：二、其次，父组件要和子组件有契合点：就是在父组件中调用、注册、引用子组件：调用：　注册：　　引用：三、接下来，就可以在父组件和子组件链接的地方（即引用子组件的标签上），把父组件的值绑定给子组件：这里我绑定了两个值，一个是数组，一个是字符串。2018-03-30 10:15:55

2021-12-27 15:48:10 834

原创 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 862

原创 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 842

原创 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 1070

原创关于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 342

原创 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 11212 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 888

原创 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 290

原创 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.再组件里使用：<!-- 文件描述：无缝滚动组件--&gt

2021-11-04 16:05:53 149

转载 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 317

原创 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 801 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 1885 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 3072

转载 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 193

原创 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 2805 1

转载浏览器刷新恢复Vuex数据

前言：我们在使用Vue框架时，常常会引入Vuex作为跨组件数据与状态管理工具。由于Vuex的数据是存储在内存中的，那么当浏览器刷新时，Vue实例会重新加载，原本存在的Vuex数据将会丢失。这其中可能包含一些必要的认证信息，使得站点需要重新登录，影响用户体验。前言.使用sessionStorage解决sessionStorage是window对象属性，允许在浏览器中存储 key/value 对的数据。sessionStorage 用于临时保存同一窗口(或标签页)的数据，在页面刷新时数据不会删除，但在关

2021-09-17 09:28:11 334

TA关注的人

移动端/仿小米商城/H5页面

js兼容ie8的选项卡.rar

jquery兼容ie8的tabs选项卡插件tabslet

vue使用WebSocket如何在请求头传递参数

vue实现中英文切换

前端播放flv处理延迟手动跳帧后一直转圈圈

vue input框动态绑定数组对象

vue input框动态修改数组对象

前端flv直播流播放视频，websocket响应造成内存泄漏 浏览器崩溃

如何禁用overflow:scroll，键盘空格下拉

ts格式和flv格式的视频，我需要让这个视频在页面上显示并能播放。video标签并不支持这个格式， 前端如何处理，

vue如何拿到v-for循环出来的item的值使它等于一个全局变量

echarts全国地图下到城市怎么用，我cv了别人的代码，key值也换了现在情况这样

vue 使用echarts相同数据为什么报错

vue指令v-for循环video标签后视频无法播放,怎么解决。

vue数组格式如何转换成数组对象形式，

vue中嵌入外部网站 iframe标签

报错：很抱歉，没有启用JavaScript，管理员无法正常工作。请使其继续。

css3 backdrop-filter: blur(20px);为什么不生效，

element ui 时间选择器选中样式能出现字体吗，怎么做

如何修改element ui 里的el-pagination分页下拉框的样式

前端flv直播流播放视频，websocket响应造成内存泄漏浏览器崩溃

ts格式和flv格式的视频，我需要让这个视频在页面上显示并能播放。video标签并不支持这个格式，前端如何处理，