- 博客(31)
- 收藏
- 关注
RSS订阅原创 vue3图片放大缩小插件viewerjs
下载：cnpm run viewerjs --save页面中使用：// 点击图片放大import Viewer from 'viewerjs';import 'viewerjs/dist/viewer.css';onMounted(() => { //在vue中给html元素绑定事件使用window.事件名 = function(){} // 绑定图片放大事件， window.large = function(url) { //一
2022-03-01 00:24:46
1639
原创 vue3中监听滚动条位置，设置滚动条位置
获取滚送条实时高度：onMounted(() => { // 监听滚动条位置 window.addEventListener('scroll', scrollTop, true) } }) // 实时滚动条高度 const scrollTop = () => { let scroll = document.documentElement.scrollTop || document.body.scrollTop; console.log
2022-03-01 00:16:38
7284
7
原创 vue3 父组件调用子组件中的方法
子组件：const getDocument =（）=>{}父组件：<template> <markdownDoc ref="markdownRef"></markdownDoc></template><script>import { ref } from 'vue'export default { components: { markdownDoc }, setup() {
2022-03-01 00:07:35
1017
原创 element-plus菜单递归
父组件中：<el-menu class="el-menu-vertical-demo" :default-active="$route.path" router exact> <tree :docList="docList" ></tree></el-menu>import tree from './components/tree.vue'递归菜单子组件：<div v-for="item in docLis
2022-02-21 23:18:27
1537
原创 element中子菜单高亮，其所有父菜单高亮
element-plus中：// 子菜单高亮时，使其父菜单也高亮.el-menu ::v-deep(.el-sub-menu.is-active > .el-sub-menu__title) { color: #3949AB !important;}element-ui中： 将类名修改为对应的即可
2022-02-21 22:57:54
1343
1
原创 关于锚点跳转
点击的锚点列表 <a href="#标题1">点我跳到标题1</a> <a href="#标题2">点我跳到标题2</a> <a href="#标题3">点我跳到标题3</a>要跳转过去的位置方式一：a 链接可使用name：name的值要与锚点列表的href中#后面的值相对应<a name="标题1" href="#">我是标题1</a>标题1下的内容<a name="标题2" href
2022-02-16 17:01:03
519
原创 关于scss的变量使用，以及js如何动态修改scss中的变量
在main.css中：$headerHeight:64px;在页面中使用：@import ”@/common/css/main.css“//变量需要用 #{ }括起来，才能编译成变量，否则会编译成字符串div{ height: calc(100% - #{$headerHeight});}
2022-01-25 14:43:03
11234
原创 vue3如何使用svg图片
1、下载loadernpm install --save-dev svg-sprite-loader，svgo，svgo-loader2、在vue.config.js中配置const path = require('path')module.exports = { lintOnSave:false, //关闭语法检查 chainWebpack: config => { // 给svg规则增加⼀个排除选项 config.module
2022-01-25 12:56:14
2733
原创 初识websocket（前端）
websocket是window对象自带的，无需下载包前端的简单使用：//引入websocketlet ws = new WebSocket('后端服务器')//监听链接ws.onopen = ()=>{ console.log('连接成功了');}// 监听数据消息ws.onmessage = (msg)=>{ console.log('接收到的消息:'+msg);}// 监听关闭ws.onclose = ()=>{ console.log('连接关闭了
2021-10-22 17:43:19
589
原创 高德地图-微信小程序
1、 申请高德地图key点我查看获取key的步骤2、配置工程点我去查看配置工程的步骤3、使用1、在使用地图的页面引入amap-wx.js文件import amapFile from '../../libs/amap-wx.130.js'2、 简单引入<template> <map class="map" id="map" :longitude="longitude" :latitude="latitude" :scale="scale" show-location="t
2021-10-22 17:42:18
1521
原创 使用uniapp开发微信小程序实现分包、以及在主包和分包中如何使用插件
1、实现分包1、分包文件夹与pages同级2、在page.json中配置分包页面2、使用插件1、在主包中加载使用在manifest.json中声明插件：在主包的页面中使用先要在page,json中对应的页面中style中配置对应平台的usingComponents或usingSwanComponents2、在分包中加载使用：在page.json中的subPackages中声明注意：仅能在这个分包内使用该插件；同一个插件不能被多个分包同时引用；不能从分包外的页面直接跳入分包内
2021-06-29 11:01:44
5428
原创 uniapp中uni.navigateTo()和uni.navigateBack()传递数据
1、数据较少：在url后携带数据即可//页面1：methods:{ uni.navigateTo({ url:'页面2?data1='+data1 })}//页面2：onload(options){ this.event = this.getOpenerEventChannel() //如果需要返回数据就写这一句，如果不需要就不用写 //接收页面1的数据 console.log(options.data1)},methods:{ go_back(){ uni.nav
2021-06-10 18:06:29
2040
原创 初识高德地图-Web
初次使用高德地图，做的小页面。记录一下<!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"&g
2021-06-10 17:37:28
258
原创 vue页面携带参数跳转到html页面
1、vue页面1、用web-view或iframe引入html，src为html页面的路径 <web-view :src="html" ></web-view> //hbuilder中使用web-view <iframe :src="html" ></iframe> 2、vue页面向html页面传参时需要加密（参数直接在路径后面用问号带过去）： this.html = '../../static/html/video.h
2021-05-29 16:12:44
2164
1
原创 给对象响应式添加属性
针对vue中请求数据对象新添加的属性不能响应式（需要立刻更新视图）的解决方法1.需要给对象添加属性时，不能采用传统的obj.属性=值，obj[属性]=值 来添加属性，在vue页面时需要这样使用this.$set(obj,"propertyName","value") 来添加属性 /* obj 要添加属性的对象 propertyName 属性名 value 属性值 */2.同理，在修改属性的时候，在对应的方法中也需要this.$set(obj,“propertyName”,“value
2021-05-29 15:34:53
407
原创 记录找到中文转化为拼音的vue组件
1、下载安装npm install js-pinyin --save或使用淘宝镜像下载npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install js-pinyin --save2、在使用的页面中<script>import pinyin from 'js-pinyin'export default{ data(){ return{} }, mounted(){ this.p
2021-05-29 15:27:19
172
原创 记录element-ui中el-checkbox-group的坑
需求：打开这个dialog时，自动选择已有的选项。在input框中可以搜索问题：在el-checkbox中使用checked来表示默认选中状态。第一次打开正常，在搜索一次之后，清空input框，自动选择所有的选项。解决办法：不必在el-checkbox中设置checked，直接将需要默认选中的选项放到el-checkbox-group中v-model所绑定的数组中即可。...
2021-05-29 10:53:12
1598
3
原创 vue富文本编辑器
1、mavon-editor富文本编辑器（可以识别html）下载安装：npm install mavon-editor--save也可使用淘宝镜像下载npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install mavon-editor--save使用：<template> <div> <mavon-editor @save="saveDoc"
2021-05-26 16:35:03
539
原创 记录使用element-ui中el-upload的坑
报错信息：Error in callback for watcher “fileList”: "TypeError: Cannot create property ‘uid’ on问题根源：在图片上传成功后，存放路径时的问题
2021-05-26 14:27:55
510
原创 关于axios（vue）
1、基础用法下载axios：npm install axios或者使用淘宝镜像下载：npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install axios在main.js中：// 导入axiosimport axios from 'axios'// 配置请求的根路径axios.defaults.baseURL = 'https://www.liulongbin.top:8888/api/priva
2021-05-25 11:18:17
112
原创 关于路由vue-router
1、基础用法下载vue-router：npm install vue-router或者使用淘宝镜像下载：npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install vue-router在main.js中引入：import router from './router'Vue.config.productionTip = falsenew Vue({ router, render: h =&g
2021-05-25 10:45:02
133
原创 数字变化动画
1、下载组件npm install vue-count-to --save也可使用淘宝镜像下载npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install vue-count-to --save2、页面使用<template> <countTo :startVal='startVal' :endVal='endVal' :duration='duration'></coun
2021-05-22 16:45:42
93
原创 antv曲线面积图使用小总结
1、下载安装npm install @antv/g2 --save或者使用淘宝的镜像npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install @antv/g2 --save2、页面使用<template> <div id="container3" style="width:100%;height:93%"></div> </template>
2021-05-21 10:28:21
926
原创 记录uniapp的input框的用法
1、@input 实时查询只要input框中的内容改变，就会触发<template><input type="text" v-model="keywords" @input="search" placeholder="请输入关键字搜索" /></template><script>export default{ data(){ }, methods:{ search(){ } }}</script>2、@confi
2021-05-21 09:58:41
2957
原创 vue滚动组件
1、先下载安装npm install vue-seamless-scroll --save也可使用淘宝镜像下载npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install vue-seamless-scroll --save2、在页面中简单使用<template> <div> <vue-seamless-scroll :data="realtimeStore" cla
2021-05-21 09:08:34
2039
原创 微信小程序获取用户信息wx.getUserProfile
1、使用点击事件获取每次请求都会弹出授权窗口，用户同意后返回 userInfowx.getUserProfile({ desc:'登录', success:(res)=>{ console.log(res.userInfo) }})2、使用open-data组件直接展示<view> <open-data type=" "></open-data></view>//头像设置为圆的...
2021-05-20 12:48:54
1209
1
原创 网页播放器
需求：播放实时监控视频记录关于播放器的坑（播放hls流的视频：后缀名为.m3u8）1、使用videoPlayer首先下载vue-video-playernpm install --save vue-video-player在main.js中引入：import VideoPlayer from 'vue-video-player'require('video.js/dist/video-js.css')require('vue-video-player/src/custom-theme.cs
2021-05-17 22:32:09
1243
原创 git相关操作
常用git操作1、用vscodegit branch （查看所有分支）git checout test（跳到terst分支）git pull（拉取当前分支的代码）git checkout mastergit merge --no–ff test（将test分支的代码合并到当前的分支上）git pullgit push（推到远程）git checkout -b demo（创建一个demo分支）git push1、用uniapp流程：git checkout test
2021-05-15 13:03:29
39
原创 微信小程序简介
微信小程序简介1、微信小程序的出现概念：微信小程序是一种不需要下载安装即可使用的应用，体现了用户 “ 随时可用，用完即走的 ” 理念。微信小程序与APP对比：微信小程序APP成本高低关于使用安装才能使用随用随走，无需下载维护难易小程序本身是不占用手机内存的，就像电脑中的快捷方式一样，不过在使用小程序的时候有些会下载缓存数据，那就会占用一些空间2、申请微信小程序注册并登录小程序：跳转到微信公众平台（一个邮箱只能申请一个小程序，一个微信最多绑定5
2021-05-15 13:00:40
1208
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人