- 博客(42)
- 收藏
- 关注
原创 vue flv.js直播流
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l
2022-07-02 17:54:56
191
原创 unicloud微信小程序的重要配置
1.首先在uniapp的manifest.json中微信小程序配置appid2.登录微信公众平台配置小程序服务器域名(我这里用的是阿里云开发的)3.将自己的云数据库表结构全部配置如图4.配置完立即重启uniapp小程序代码!!!...
2022-04-28 18:27:49
1560
原创 uniapp小程序自定义分享按钮
1.代码如下<button class="w100 h100 btn-collection inline-block" open-type="share">分享</button><script> export defafult{ onShareAppMessage(res) { return { title: '我是分享的标题', path: '/pages/index/index'
2022-04-26 17:34:44
1281
原创 uniapp手动实现国际化【中英文】
//这里是点击按钮进行切换中英文<text @click="changeTxt" class="language">{{language}}</text>//这里是具体数据展示 用拼音表示通过translation.js匹配对应的中文或英文 <view class="title"> <text class="tit">{{fy("biaoti")}}</text> </view> export defaul
2022-04-24 11:01:52
594
原创 Vue 内网穿透 invalid host header 问题
在vue-cli版本为2.x的情况下修改webpack.dev.conf.js中的devServer对象加入disableHostCheck: truedevServer: { disableHostCheck: true,}vue-cli版本3.0的情况下修改vue.config.js的配置module.exports = { devServer: { disableHostCheck: true }}以上配置报错的话采用下面配置 devServer: { histor
2022-04-21 11:09:37
856
原创 uniapp实现扫码功能H5+APP+wx小程序
H5 网页扫码1.首先uniapp初始化(需要引入npm包已经初始化就忽略吧)在项目中打开cmd窗口npm init -y根目录会多出一个 package.json 文件。2.终端执行(需要引入vue-qrcode-reader)npm install --save vue-qrcode-reader3 创建一个扫码页面<template> <view> <text>{{ result }}</text> <qrcod
2022-04-21 10:37:10
3103
2
原创 vue使用videojs播放mu38
引入videojs// 安装依赖npm install vue-video-player --savenpm install videojs-contrib-hls --saveimport videojs from "video.js";import "videojs-contrib-hls"; //播放视频 getVideo(url, index) { var video = document.getElementById(`video${index}`);
2022-04-06 13:48:55
1494
原创 钉钉跳转vue网页(实现免登录)
.首先新建个文件夹下载调试工具(此工具其实是个vue项目)安装教程ps:教程第四步 直接进行下面操作 地址是你vue 启动地址(这个地址需要和你企业微应用首页地址一致)ding dev web --targetH5Url http://127.0.0.1:3000 2.你的项目引入 dingtalknpm install dingtalk-jsapi 首页逻辑流程如下<script>import * as dd from "dingtalk-jsapi";ex
2022-03-28 14:50:04
1739
1
原创 vant移动端上滑下拉加载
<van-pull-refresh v-model="isDownLoading" @refresh="onDownRefresh"> <van-list v-model="isUpLoading" :finished="upFinished" :immediate-check="false" :offset="10" :finishe...
2022-02-21 16:16:18
462
原创 vue 引入高德地图显示轨迹
1. 引入vue-amapmain.jsimport VueAMap from 'vue-amap';Vue.use(VueAMap);VueAMap.initAMapApiLoader({ key: '你的key值', plugin: [ "AMap.Autocomplete", // 输入提示插件 "AMap.PlaceSearch", // POI搜索插件 "AMap.Scale", // 右下角缩略图插件 比例尺 "AMap.OverView", //
2021-12-13 12:02:12
1312
原创 vue引入百度地图实现轨迹绘制
引入cnpm i --save vue-baidu-mapmain.jsimport BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { ak: 'U4Bn9fW4tEtgEOtQ29cTpIBm47Ey4LCX'//百度地图密钥});代码实现<baidu-map class="map" :scroll-wheel-zoom="true" :center="map.center" :zoom="map.zoom" @ready
2021-12-10 17:58:45
2765
4
原创 点击链接下载文件
//项目代码仅供参考 downLoad(row) { const a = document.createElement("a"); const url = process.env.VUE_APP_BASE_API + row.fileUrl.slice(4); // 完整的url则直接使用,process.env.VUE_APP_BASE_API是项目地址,链接前缀此处拼接 console.log(url); // 这里是将url转成blo.
2021-11-27 17:15:55
729
原创 echarts柱状图绑定事件
1.首先柱状图绑定事件避免不了要传递参数y轴数据格式为:[{value:'1',name:'张三'},[{value:'2',name:'李四'}]属性value为y轴要显示的数据(必须命名为value)name是你自定义的想传递的属性2.绑定点击事件 //初始化部分代码 let entrustCost = document.querySelector("#entrustCost"); let myChart = echarts.init(entrustCo
2021-11-27 17:10:52
541
原创 前端常用样式设置
富文本页面样式.box{ display: flow-root;/deep/ * { max-width: 100%!important; height: auto!important; }}单行省略 white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all;多行省略 text-overflow: -o-ellipsi
2021-09-30 11:45:05
153
原创 js点击a链接下载图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
2021-09-24 11:28:46
586
原创 数组的20个方法
数组末尾添加元素 let arr = [2, 3, 4, 56,] arr.push(1) console.log(arr); 数组开头添加元素 let arr = [2, 3, 4, 56,] arr.unshift(54) console.log(arr); 删除数组末尾元素 let arr = [2, 3, 4]; arr.pop() console.log(arr); ...
2021-08-06 11:10:29
42
原创 vue 中echarts图表自适应
引入resize.js var EleResize = { _handleResize: function (e) { var ele = e.target || e.srcElement var trigger = ele.__resizeTrigger__ if (trigger) { var handlers = trigger.__z_resizeListeners if (handlers) { var size = han.
2021-08-05 14:58:08
117
原创 vue中tab栏切换echarts
<template> <div> <div class="topBox"> <div class="top"> <div class="title">供应商统计</div> <el-date-picker v-model="value" type="year" placeholder="选择年份"> </el-date-picker>
2021-08-03 16:43:29
673
原创 vue 使用swper组件
cnpm install swiper -S -d封装组件<template> <div> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="
2021-06-23 11:53:47
94
原创 vue中使用webScoket
<template> <div> <button @click="send">发消息</button> </div></template><script>export default { data () { return { path:"ws://192.168.0.200:8005/qrCodePage/ID=1/refreshTime
2021-06-23 11:30:44
126
原创 小程序学习笔记
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、页面适配二、修改data数据三、绑定事件两种方式四、路由跳转前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、页面适配根据750px的设计稿,在小程序375px模拟器下进行开发,因为1px=2rpx所以样式根据设计稿的数值来写,只是单位换成rpx;
2021-06-03 18:24:07
86
原创 js常用正则
密码:(密码必须由6-12位数字加字母组成)/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/ 邮箱:/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/手机号:/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/数量:(正整数)/^[1-9]*[1-9][0-9]*$/身份证:/^(^[1-9]\d{
2021-05-18 16:45:54
66
原创 vue中使用 FullCalendar
1.首先版本如下 "@fullcalendar/core": "^4.3.1", "@fullcalendar/daygrid": "^4.3.0", "@fullcalendar/interaction": "^4.3.0", "@fullcalendar/moment": "^4.3.0", "@fullcalendar/timegrid": "^4.3.0", "@fullcalendar/vue": "^4.3.1",2.代码 <
2021-05-07 15:34:08
1323
原创 解决移动端软盘顶起页面背景问题
<div class="app" :style="{ height: bodyHeight + 'px' }"></div> mounted(){ this.bodyHeight=document.documentElement.clientHeight}
2021-04-15 15:57:26
16
原创 vue 头像上传
<div class="right"> <div class="headerImg"> <input type="file" accept="image/png,image/gif,image/jpeg" @change="changeImage($event)"> <img :src="formInfo.avatarPath" alt=""> </div&g...
2021-03-29 11:58:45
59
原创 px转vw适配页面
vscode安装插件px-to-vw配置px-to-vw(打开设置-如图1920为设计稿尺寸,根据实际适配)3.css用px写好后 Alt+z键来转换为vw
2021-03-13 19:07:45
212
原创 vue项目部署到码云上面
1.首先码云创建一个私有仓库 不要初始化2.将打包好的vue dist放进一个空的文件夹里3.在本文件夹下打开控制台执行如下命令(最后输入码云的账号密码;) 复制dist文件夹到另外新建文件夹中,cd进dist文件夹,运行git命令行 git init git add -A git commit -m '提交信息' git remote add origin 远程仓库地址 git push -u origin master4.点击码云仓库里的服务----开始部署服务
2021-02-03 17:49:23
408
原创 vue请求环境详细配置
1.首先创建开发,测试,生产 对应的环境文件.env.devNODE_ENV='dev'.env.prodNODE_ENV='prod'.env.testNODE_ENV='test'2.创建请求js文件import axios from 'axios';var baseUrl//判断环境if (process.env.NODE_ENV=="development") { baseUrl="http://xxxx:19081"}else if (process.env.
2021-01-26 10:02:22
204
原创 设置footer始终置于底部,随着内容撑开(pc端)
//html布局<template> <div class="page-container"> <header-nav></header-nav> <router-view class="main-layout"></router-view> <footer-nav></footer-nav> </div></template
2021-01-20 10:37:05
186
原创 vue 元素进入可视范围添加动画(自定义指令)
man.js注册自定义指令 //注册'v-class' 当元素出现在可视范围时添加类名出发样式 Vue.directive('class', { inserted: function (el, binding) { // 聚焦元素 binding.addClass = () => { const { top } = el.getBoundingClientRect() const h = document.documentElemen
2021-01-14 09:23:14
485
原创 vue 实现横向滚筒滚动
标题引入 vue-seamless-scroll命令行执行:npm install vue-seamless-scroll --save然后在main.js中引用:import scroll from 'vue-seamless-scroll'Vue.use(scroll)页面内使用<template> <div class="laboratory"> <div class="title"> <span>实验室信
2021-01-13 18:43:22
509
原创 vue按需引入elementui
1.vue add element2.执行完之后刷新项目显示新增引入样式的src/plugins/emement.js文件module.exports = { presets: ["@vue/app"], plugins: [ // element官方教程 [ "component", { libraryName: "element-ui", styleLibraryName: "theme-chalk" }
2021-01-12 09:36:40
64
原创 解决addRoutes后重新登录路由重复警告问题
router.jsconst createRouter = () => new VueRouter({ linkActiveClass: 'active', mode: 'hash', base: './', routes: constantRouterMap});const router = createRouter() //在addRoutes之前重置matcherrouter.matcher = createRouter().matcher;ro
2021-01-07 11:26:09
314
3
原创 vue引入iconfont的方式
这里写目录标题1.通过引入cdn实现2.通过引入静态样式文件实现1.通过引入cdn实现1.加入项目后选择font css2.index.html引入 <link rel="stylesheet" href="//at.alicdn.com/t/font_2174515_1wy2zflzlu9.css">3.页面使用<span class="iconfont icon-zhuye"></span>2.通过引入静态样式文件实现1.浏览器打开上面的链接,复
2020-12-09 18:45:52
1402
原创 面试题
文章目录1、new关键字做了什么2、输入网址到显示页面做了什么3、深拷贝与浅拷贝1、new关键字做了什么1.创建一个新对象2.将新对象的_proto_指向构造函数的prototype对象3.将构造函数的作用域赋值给新对象 (也就是this指向新对象)4.执行构造函数中的代码(为这个新对象添加属性)5.返回新的对象2、输入网址到显示页面做了什么1.浏览器发起DNS请求,解析域名得到ip地址2.封装HTTP请求报文,并发送给服务器3.服务器接收请求并处理请求,封装HTTP响应报发送会浏览器
2020-12-07 11:30:38
107
原创 遍历数组foreach,filter,some,map
这里写目录标题forEach()filter()some()forEach()遍历数组执行操作let arr=[1,2,3,4,5];arr.forEach(function(value,index,array){ console.log("每个数组元素"+value); console.log("每个数组索引号"+index); console.log("数组本身"+array);})filter()array.filter(function(value,index,arr))
2020-11-23 17:11:02
180
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人