vue.js
爱吃排骨
这个作者很懒,什么都没留下…
展开
-
JS输出音频根据分贝波浪显示
效果图如下,这里取巧使用了antd的 Rate组件,只需要传入数值即可自动变化这里使用的API是navigator.mediaDevices.getUserMedia({audio:true}) const [audioNum, setAudiotNum] = useState(0); //获取音频分贝 const getAudio=()=>{ navigator.mediaDevices .getUserMedia({ audio: t...原创 2021-07-06 19:35:27 · 2573 阅读 · 1 评论 -
JS切换扬声器设备
最近有做到检测音视频的功能,记录一下获取扬声器设备也是使用的navigator.mediaDevices.enumerateDevices() 方法1.获取到扬声器设备列表,代码如下 其中audiooutput 就是代表的扬声器设备。 const [audioList, setAudioList] = useState([]); //获取音频列表 const getSpeakerList = () => { navigator.mediaDevices ...原创 2021-07-13 14:29:32 · 4699 阅读 · 5 评论 -
在react 中使用tinyMce富文本编辑器
1.加载缓慢,白屏问题。最开始使用tinyMce的时候发现第一次加载巨慢,查了一下资料后发现一句话,tinyMce在首次加载的时候会在全局查找tinyMce这个变量,如果没有找到就会请求云服务器的tinyMce资源,个人认为应该是这个原因导致的,而导致这个问题的原因是因为开始没有导入import tinyMce from 'tinymce/tinymce';,最开始只导入了import { Editor } from '@tinymce/tinymce-react';在知道这个问题后原创 2021-02-19 11:30:50 · 4975 阅读 · 10 评论 -
ant design input 框去除点击蓝色颜色边框
.ant-input-affix-wrapper { border: none ; background: #f6f6f6; outline: none; width: 95%; box-shadow: none; }原创 2021-01-25 19:21:10 · 4736 阅读 · 0 评论 -
图片90°倍数旋转方法
图片90°倍数旋转方法 rotateBase64Img(src, edg, callback) { var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); var imgW;//图片宽度 var imgH;//图片高度 var size;//canvas初始大小 if (edg % 90.原创 2020-12-31 16:04:30 · 509 阅读 · 3 评论 -
vue 配置通用全局变量文件
1.在项目根目录新建.eslintrc.js,在/static 下创建config.js 文件2..eslintrc.js 文件内容module.exports={ 'rules': { 'no-implicit-globals':0 //关闭不允许属于使用全局变量 }, globals:{ 'config':true //设置全局变量 /static/config.js }}3. config.js文件内容const CY={ name:'测.原创 2020-09-30 09:44:08 · 1017 阅读 · 0 评论 -
js form表单序列化后追加额外参数(分页等)
在form 表单使用serialize()方法序列化后,在想添加自定义的参数只需要这样直接在后面拼接自己想要追加的参数即可!原创 2020-04-28 18:23:58 · 1956 阅读 · 0 评论 -
echarts 饼图默认高亮 离开后再次高亮,中心区显示选中的数据
const roundFun=()=>{ let myChart = echarts.init(document.getElementById('round')); let option=({ legend: { orient: 'vertical', left: 10, data: ['直接访问', '邮件营销', '联盟广告', '视...原创 2020-04-23 19:01:34 · 1250 阅读 · 1 评论 -
vue 基础父子组件传值
1.新建HelloWorld.vue 父组件,挂载子组件,接收父组件参数,调用子组件props 定义的变量<template> <div class="hello" > <chil-den :routerData="childData" ></chil-den> </div></template>s...原创 2020-03-10 22:37:35 · 195 阅读 · 0 评论 -
vue 定义全局变量文件
1.与main.js 同级创建 data.config.jsconst CSDATA={ apiHost:"191.168.0.60"}export default CSDATA2.在main.js 中引入import CSDATA from './data.config'Vue.prototype.CSDATA=CSDATA3.在vue 中使用<t...原创 2020-03-10 20:28:39 · 784 阅读 · 0 评论 -
vue axios 封装 全局调用axios
1.简单的封装了一下Axios 有其他的需求各位在自己拓展一下import axios from "axios"import qs from "qs"axios.defaults.timeout=3000 //响应时间axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;ch...原创 2020-03-10 20:10:05 · 2437 阅读 · 0 评论 -
vue element ui 引入
1. 先通过npm 下载 cnpm i element-ui -s2.在main.js 中引入import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);下面就可以在各个页面里使用element ui 库的样式了...原创 2020-03-08 21:06:30 · 302 阅读 · 0 评论 -
vue 跳转页面
<router-link>组件支持用户在具有路由功能的应用中点击导航。1.在构建一个项目完成后,可以在src目录下面新增一个 page 文件夹 作为项目主页面,而components 专门作为组件存放的文件夹2.在page 里面新创建一个HelloWorld.vue 在里面使用router-link<template> <div class="he...原创 2020-03-08 20:36:04 · 369 阅读 · 0 评论 -
element ui 获取checkbox 选中的表格数据
1.定义一个储存ID变量 multipID:[],2. 使用element ui 表格方法@selection-change="changeFun"<el-table :data="tableData" border style="width: 100%" align="center" @cell-mouse-enter="enter" ref="multipleTa...原创 2020-02-19 16:37:17 · 4787 阅读 · 0 评论 -
vue delimiters作用
VUE 中delimiters的作用是改变我们插值的符号,Vue默认的插值是双大括号{{}},在一些特殊的情况下我们可能会用到其他的方式绑定插值,比如在使用Twig 文件开发时,twig本身也是{{}}绑定数据,这样就与vue 冲突了.现在我们的插值形式就变成了${},代替了{{ }},在页面中就可以使用 ${xxxxx} 绑定对应的值...原创 2019-11-08 11:52:50 · 2475 阅读 · 0 评论 -
element ui 弹框点击 显示tree组件,点击空白区域隐藏tree
在做用户管理中,部门很有可能是一个tree树状图,那就需要点击 input显示 tree组件,点击空白区域隐藏tree图一 是点击输入框的时候,组件显示了出来,图二是点击空白区域组件隐藏.下面看看代码实现吧1. 需要 给 弹框 el-dialog 一个ID值 <el-dialog :title="messages" :visible.sync="dialogVisibl...原创 2019-10-24 16:21:00 · 5159 阅读 · 0 评论 -
element ui 时间控件 今天之后的日期禁用
主要用到了这个 属性picker-optionshtml <el-date-picker v-model="timeData" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd HH:mm" value-form...原创 2019-10-23 15:23:29 · 5595 阅读 · 0 评论 -
element ui border 表单 表头 设置背景颜色
<el-table :data='userList' style="width:100%;" border :header-cell-style="{background:'#F5F7FA',color:'#606266'}">其中:header-cell-style="{background:'#F5F7FA',color:'#606266'}" 就是设置表头背景...原创 2019-10-21 17:49:22 · 9026 阅读 · 2 评论 -
element ui border 表单 表头和内容边框错位问题
在css样式中添加这个样式即可body .el-table th.gutter{ display: table-cell!important;}原创 2019-10-21 17:26:31 · 2565 阅读 · 0 评论 -
element ui dialog 表单点击编辑,再点击添加,数据无法清空问题 解决办法
vue element ui在做编辑和添加时候通常使用一个dialog 弹框,这样就会出现一个问题,点击编辑 再点击添加,这时候数据已经赋值了, 所以this.$refs[formName].resetFields(),无法把数据重置为空[] 这肯定不是我们想要的结果,后面是这样解决的,在点击添加按钮的时候/添加用户addBtn(){ this.dialogVisible=true...原创 2019-10-21 16:03:30 · 3128 阅读 · 0 评论 -
使用axios post 请求数据无法提交的问题
在使用axios post 和put方法时候,提交了数据但是查看数据的时候发现提交的是空的,这里就需要2点地方需要注意1.和后台协商post,put请求方法的请求头设置为Content-Type:application/x-www-form-urlencoded2.在main.js中引入(若引入后报错,那就下载一个npm install qs )import qs from 'qs'...原创 2018-07-19 17:17:10 · 1494 阅读 · 0 评论 -
watch监听
1.watch监听普通变量<div id="app"> <input type="text" v-model='name' /> </div><script> new Vue({ el:'#app', data:{ name:'233', }, watch:{ nam...原创 2018-07-26 15:26:42 · 1931 阅读 · 0 评论 -
Vue 生命周期详解
beforeCreate:组件实例刚被创建,组件计算属性之前,如data属性(el和data都不存在)created:组件实例创建完成,但Dom还未生成,$el属性还不存在(data数据初始化完成,但是Dom还没有渲染,el属性不存在)beforeMount:模板编译/挂载之前(完成了el和data的初始化,Dom已经被渲染)mounted:模板编译/挂载之后(完成挂载)bef...原创 2018-08-21 22:35:46 · 228 阅读 · 0 评论 -
eacharts tooltip 自定义内容
在做项目时有需求 在提示框里面自定义内容,查了文档后可以使用 formatter 来做官方例子中的name 相当于opction.series里面的数据,下面看实例更清晰。在此例子中,我操作的是折线图标接下来查看 series 里面的内容 其中使用的数据是这样的接下里看 console.log(e)里面是什么东西可以看到当鼠标移动到对应的数据小圆点...原创 2018-09-07 16:12:57 · 2695 阅读 · 0 评论 -
echarts map地图自动高亮显示提示框轮播
function mapGeo(data) { var chart = echarts.init(document.getElementById('mapGeo')); var mapUrl = staticsUrl + '/js/echart-map/beijing.json'; $.get(mapUrl, function (mapJs...原创 2019-06-05 11:29:16 · 8950 阅读 · 2 评论 -
vue.js过滤
vue.js过滤器原创 2017-06-06 10:31:09 · 464 阅读 · 0 评论 -
vue webpack开发访问后台接口全局配置
在实际开发中,使用vue 后就是前后端分离开发了,这时候我们就需要访问后台的接口来拿到数据,需要URL,name,password来获取到token才能正常使用接口,下面就来配置。1.找到config文件夹,在prod.env.js中添加一下代码(若没有此JS,自己创建一个就可以了)'use strict'module.exports = { NODE_ENV: '"product...原创 2018-07-19 16:54:22 · 7916 阅读 · 1 评论 -
Vue 配合eiement动态路由,权限验证
1.要实现动态路由,只需要在main.js中将所有路由表先规定好,如下图const routes=[ {path:'/login',component:login},/*登录*/ {path:'/home',component:home},/*首页*/ {path:'/monitor',component:monitor},/*实时监控*/ {path: "/orderQu...原创 2018-07-19 10:50:30 · 803 阅读 · 1 评论 -
Vue 拦截器对token过期处理
最近在做的一个项目,需要每个http请求下 都要添加token,这样无疑是增加了工作量。而vue 拦截器interceptors正好可以解决我们的需求。1. 在vueresource情况下 设置token拦截器。 Vue.http.interceptors.push(function (request, next) { let token = localStorage.g...原创 2018-01-15 11:03:35 · 15107 阅读 · 13 评论 -
vue $http请求服务.
vue $http服务原创 2017-06-01 17:00:26 · 68080 阅读 · 1 评论 -
vue 2.0 用filter做表单搜索
JS部分 search: '', systManage: [ { type: "未知", source: "数据库", operation: "系统管理", content: "查看了系统管理", hot: "192.168.110", time: "2017/12/05" },co原创 2017-12-29 16:29:47 · 1954 阅读 · 1 评论 -
Vue cli+mui 区域滚动
vue cli+mui配合使用达到区域滚到的效果 ,方法如下第一步 引入mui css js@import url("/static/mui.min.css");JSimport mui from '../../../static/mui.min.js';第二步写结构 mui的区域滚动结构是这样的 *写需要滚动的内容下面粘贴我代码的一部分原创 2017-08-21 17:01:32 · 3826 阅读 · 0 评论 -
vue 开发中出现警告问题去除方法
出现这个警告问题的时候 我们可以去main.js中在头部添加这句话:Vue.config.productionTip = false这样即可去除警告原创 2017-08-17 16:23:45 · 5358 阅读 · 0 评论 -
vue.js浅度监听和深度监听
vue.js浅度监听和深度监听原创 2017-06-07 11:19:23 · 6362 阅读 · 0 评论 -
vue快捷键与基础指令
Vue基础指令和简写原创 2017-06-01 14:59:21 · 12888 阅读 · 0 评论 -
vue阻止事件冒泡的两种方法
vue阻止事件冒泡的2种方法原创 2017-06-01 11:33:57 · 13467 阅读 · 0 评论 -
vue v-show点击消失
点击消失new Vue({el:"#app",data:{a:true}})原创 2017-06-01 10:54:11 · 2780 阅读 · 0 评论 -
Vue基础this指向
刚刚学习了一个基础教程是讲vue中this指向,下面用实例说明。点击添加并查看this{{item}}new Vue({el: "#app",data: {list: ["banner", "orange", "apple"]},methods: {on: function() {原创 2017-06-01 10:11:58 · 17099 阅读 · 0 评论 -
vue.js做简易留言板
跟着网上的视频教程做了一个简易的留言板需要的自取,新手多多包涵用户名年龄用户信息表序号姓名年龄操作 {{$index+1}} {{item.name}}原创 2017-05-31 17:22:46 · 4591 阅读 · 2 评论 -
vue form 表单提交后刷新页面
最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据。下面可以这样解决。1。在methods中 定义好一个初始化渲染实例。例如 lnitializationData(){//初始化页面数据 this.$http.get("/permit/specific", { params: { page: this.loca原创 2018-01-15 14:00:15 · 19030 阅读 · 1 评论