- 博客(41)
- 收藏
- 关注
RSS订阅原创 VUE响应式
一、vue2.0 响应式1. Object.definePropertyObject.defineProperty(obj, prop, descriptor)方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。obj——要定义属性的对象；prop——要定义或修改的属性的名称或Symbol；descriptor——要定义或修改的属性描述符。{ value: undefined, // 属性的值 get: undefined, // 获取属性值时触发的方法
2022-05-19 16:14:48
4596
原创 vite 配置cdn导入的包文件，类似webpack的externals
vite 需要安装vite-plugin-resolve-externalsnpm i -D vite-plugin-resolve-externals// vite.config.jsimport resolveExternalsPlugin from 'vite-plugin-resolve-externals'export default defineConfig({ plugins: [ vue(), resolveExternalsPlugin({
2022-03-18 16:00:39
8838
原创 element-plus ElMessageBox引入后样式失效
使用的引入方式是vite里边配置，自动引入但部分样式可以显示，消息弹窗ElMessageBox样式失效。参考网上给出的方案，再引入一遍css// main.jsimport 'element-plus/theme-chalk/index.css'但仍提示未找到相关文件删除element-plus包，再次重新安装解决问题...
2022-03-18 13:27:24
2026
1
原创 vite数据请求报错 Error [ERR_TLS_CERT_ALTNAME_INVALID]: Hostname/IP does not match certificate‘s altnames
新搭建的vite项目，配置的代理如下问题所在：vite对于proxy的封装和vuecli不一样，需要额外增加secure: false绕过https的安全验证才能请求到https的地址解决方案：参考：添http-proxy
2022-03-18 13:20:33
4016
原创 vue 移动端跳页搜索自动获取焦点
需求：点击搜索框跳转新页面然后自动获取焦点弹起键盘。遇到的问题：input的autofocus属性在android上可以，在ios上不兼容，ios为了安全起见，禁掉了。解决方案：使用子路由做新页面子页面撑满全屏，看起来是一个新页面，并且具有前后路由跳转的功能。点击父页面的搜索框，跳转子页面的搜索框！！子页面的路由不能使用懒加载的方式 引入，会使自动获取焦点失效。具体实施部分代码：// router.jsimport { createRouter, createWebHashHisto
2022-03-18 11:41:46
3534
原创 vue 使用pdfjs预览pdf文件
pdf.js官网将官网下载后的代码放在static或public文件下，大概结构如下，我的文件夹名叫pdf，里边有两部分，一部分build，一部分web我们要写的核心代码只有这一行，通过点击a标签跳转到viewer.html这个页面，而这个页面就在web文件夹下，后边拼接的是pdf的路径<a :href="`${publicPath}/pdf/web/viewer.html?file=${encodeURIComponent(pdfUrl)}`">查看</a>分两种情况：
2021-11-23 21:41:10
676
原创 构造函数的返回值和new操作符
构造函数的返回值// 返回值为基础类型function Super () { this.name = 'Super' return 1}const sup = new Super()console.log(sup) // Super {name: 'Super'}// 返回值为引用类型function Super () { this.name = 'Super' return new Set([1, 3, 5])}const sup = new Super()con.
2021-10-27 13:34:57
266
原创 手机端页面滚动，强制显示滚动条
最近做一个需求，一个固定高度的ul，里边多个li，li高度超出了ul，ul也设置了滚动，也可以正常滚动，但是并没有出现滚动条因为滚动区域较小，为了引起用户的注意，需强制显示滚动条所以通过重写滚动条样式，强制展示滚动条&::-webkit-scrollbar { -webkit-appearance: none;}&::-webkit-scrollbar:vertical { // 纵向滚动条 width: .06rem;}&::-webkit-scrollbar
2021-10-21 10:06:30
1706
1
原创 vue中echarts爬坑笔记（三） 雷达图
效果图容器<div id="myChart" :style="{width: '375px', height: '202px'}"></div>// 宽高不能使用百分比，会提示获取不到dom的宽高配置项const option = { color: ['rgba(64, 119, 255, 0.6)', 'rgba(236, 112, 192, 0.6)'], // 雷达图两项圈线的颜色 legend: { // 图例 data: ['A..
2021-09-24 14:22:02
1591
原创 videojs vue微信端踩坑
这里写目录标题踩的坑1. 解决ios系统视频会默认全屏播放2. 视频播放结束后展示黑屏（想展示封面和播放按钮，进度条退回零）3. 播放的按钮样式4. 视频格式5. 路由跳转可能会id报错6. 后续更新基础使用（仅供参考，并非完整代码）videojs官网踩的坑1. 解决ios系统视频会默认全屏播放// video标签中增加该属性webkit-playsinline="true"playsinline="true"2. 视频播放结束后展示黑屏（想展示封面和播放按钮，进度条退回零）this.on
2021-09-09 10:57:11
362
原创 webpack相关面试整理
文章目录webpack与grunt、gulp的不同？与webpack类似的工具还有哪些？谈谈你为什么最终选择（或放弃）使用webpack？有哪些常见的Loader？他们是解决什么问题的？有哪些常见的Plugin？他们是解决什么问题的？webpack 中 loader 和 plugin 的区别是什么webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全是否写过Loader和Plugin？描述一下编写loader或plugin的思路？webpack的热更新是如何做到的？说明其原理？如何利用webp
2021-05-11 14:47:21
128
原创 监听微信页面关闭、跳转、息屏
import { onMounted, onUnmounted } from 'vue'export const pageCloser = (callBack) => { onMounted(() => { window.addEventListener('visibilitychange', visibilitychangeFun, false) window.addEventListener('onbeforeunload', onbeforeunloadFun, f
2021-04-30 10:41:58
797
原创 微信页面用户调整字号引起的排版错乱
// iosbody { // ios不能调整字号 -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; -moz-text-size-adjust: 100% !important;}// android// vue放main.js，加eslint-disable是因为在非微信环境中是没有WeixinJSBridge变量的，会一直报错/* eslint-disable */(
2021-04-30 10:37:13
302
原创 vue首屏加载优化积累
首屏图片使用懒加载使用的组件库中都有一些懒加载的命令，例如vant的v-lazy把一些依赖包通过cdn引入，见少bundle包的大小例：// index.html<script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.min.js"></script><script src="https://cdn.bootcss.com/moment.js/2.20.1/locale/zh-cn.js">.
2021-04-20 11:01:21
84
原创 html2canvas踩坑
setTimeout(() => { const canvas = document.createElement('canvas') // 创建一个canvas节点 const posterBox = this.$refs.posterBoxRef const width = posterBox.offsetWidth // 获取dom 宽度 const height = posterBox.offsetHeight // 获取dom 高度 const scale = 2 // 定
2021-04-19 15:22:26
865
原创 Vue3.0 中切换页面时的过渡动画
<template> <div id="app"> <router-view class="router-view" v-slot="{ Component }"> <transition :name="transitionName"> <component :is="Component" /> </transition> </router-view> <
2021-02-08 10:54:13
2116
4
原创 输入框禁止输入emoji表情
jq中使用$(function () { if(navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1) { //是安卓手机 $('input,textarea').on('keyup',function(){ clearEmoji(this) }) } else { var lock = false
2020-12-04 13:50:01
10778
原创 dijkstra算法 计算最短路径 js整理
从起点到终点的最短权重路径建立三个散列表各个顶点的邻居信息及开销对应表初始化到各个点的开销，未知的按无穷大计算初始化各个顶点的对应的父级，未知的按null算// 记录各个顶点的邻居情况const graph = { S: { A: 5, B: 2 }, A: { C: 4, D: 2 }, B: { A: 8, D: 7 }, C: { F: 3, D: 6 }, D: { F: 1 }, F: {}}// 记录初始情况起点到各个顶点的开销const c.
2020-11-30 16:06:01
359
原创 js 点击按钮复制内容到剪贴板
主要实现的功能是点击复制链接按钮，就会自动复制一个链接，用户可直接到别处粘贴safari直接看下边插件部分直接用js实现（不兼容safari）下边代码是基于vue开发的部分代码，但主要代码是通用的<button class="shareButton" @click="copyLink(item)">复制链接</button><!-- js部分实现需要一个input或者textarea，不可使用display:none或者在元素中设置hidden属性，所以需要通过设置透
2020-11-25 15:07:25
390
原创 腾讯地图 选址组件（地图选点）
腾讯地图组件文档url方式调用url例如：https://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=http://3gimg.qq.com/lightmap/components/locationPicker2/back.html&key=yourkey&referer=myapp配置好key以及其他参数，vue页面中跳转就可以到腾讯地图的页面了遇到的问题：进入后能定位到当前位置，但显示 获取消
2020-11-23 18:51:56
3613
原创 vue开发（八）关于element表单校验的一些总结
form表单校验的基础总结：①<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"></el-form>上边需要加***rules***字段②<el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-it..
2020-08-14 16:41:37
450
原创 npm脚本学习（二）启动:webpack-dev-server --inline --host 0.0.0.0 --progress --config build/webpack.dev.conf.j
一、webpack-dev-serverwebpack-dev-server的官方介绍是：将webpack与提供实时重载的开发服务器一起使用。这仅应用于开发。也就是给我们提供一个可以实时重载的服务器，不需要我们改动代码后手动刷新，当然其中还提供了很多参数配置，有不同的作用。const path=require('path')const webpack=require('webpack') // 启用热更新 第二步module.exports={ entry:path.join(__dirna
2020-06-22 16:13:19
2472
原创 npm脚本学习（一）打包:cross-env NODE_ENV=production env_config=uat node build/build.js
很好奇npm脚本（package.json中的scripts）都是什么意思，然后就开始一点一点去学习，觉得越挖越觉得自己知道的东西太少了，所以记录一下自己学到的一些知识。一、process.envprocess对象是一个node的全局变量，是在node应用程序中始终可用的，在终端中输入node，再输入process.env就可以输出一些用户环境信息，但输入process.env.NODE_ENV显示的的undefined二、process.env.NODE_ENVNODE_ENV属性并不是proc
2020-06-22 15:16:03
9321
原创 vue开发（七）微信JS-SDK入门
以下内容是根据微信公众平台开发者文档及实际项目中代码总结而来一、绑定域名先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。如果你使用了支付类接口，请确保支付目录在该安全域名下，否则将无法完成支付。备注：登录后可在“开发者中心”查看对应的接口权限。二、引入JS①在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js请注意，如果你的页面启用了https，务必引入 https:
2020-06-17 16:29:53
479
原创 vue开发（六）vue.entend写一个全局的组件
前提最近新开了一个项目，所以就整理一些之前项目用到的很顺手的东西。loading和toast、提示框组件等都是在一个项目中使用频率很高的组件，并且可以全局公用一个，所以可以通过vue.extend写一个全局的组件，将方法挂在到vue及vue的原型上，方便使用，不用每次用每次引。文件目录其中Component.vue和message.vue分别是loading和提示窗的组件内容，和平时写的组件没有差别，下边重点讲index.jsindex.js以loading中的为例import V..
2020-06-11 14:34:16
252
原创 vue开发（五）mint ui实现下拉刷新，上拉加载及自定义加载样式
按需引入先安装npm install mint-ui -S // -S表示 --save在文件中：import Vue from 'vue'import 'mint-ui/lib/style.css'import { Loadmore } from 'mint-ui';Vue.component(Loadmore.name, Loadmore);<!...
2020-06-10 16:07:04
624
原创 nuxt笔记（一）nuxt中scss使用并可全局使用变量
1.插件安装：npm install css-loader node-sass postcss-loader sass-loader style-loader --save -dev2.在项目的assets目录下新建一个css目录，然后在该目录下新建一个index.scss文件，用这个文件作为scss的入口文件，在这个文件里引入其他的scss即可，例如：3.nuxt.config.js中...
2019-09-27 10:56:09
3099
原创 微信小程序 || 拓展组件库weui的npm引入
1.首先项目中要先初始化npm得到项目的命令行：npm init2.然后会有一些默认配置，全程回车，最后会得到这3个文件3.安装weui的依赖npm i weui-miniprogram -S --production4.然后再在开发者工具中：工具–构建npm 得到一个新的文件5.设置勾选：6.app.wxss中引入组件的样式@import './miniprogra...
2019-08-02 11:53:59
2877
2
原创 微信小程序 || tab栏
<view class='title'> <view class="{{idx == currentIndex ? 'headerLineSel' : 'headerLineUnsel'}}" wx:for="{{tabTextList}}" wx:for-index="idx" bindtap='titleClick' data-idx='{{idx}}'> ...
2019-07-31 14:11:12
146
原创 固定行和固定列的table——TableLock.js
TableLock的github地址：https://github.com/kjellericson/TableLock使用方法：将文件中的TableLock.js引入项目中<script src="./TableLock.js"></script>或者import "./TableLock.js"其中给出的教程文件中写：初始化方法：TableLock("...
2019-07-15 16:17:39
517
原创 vue开发（四）element的select下拉框设定初值后，不能重新选择的问题
问题描述：用的element的select可多选的下拉选框，在回显后有初始值的情况下，不能修改，也不能再选择如图，明明点击了一般内勤主管，但没有任何反应<el-select v-model="editContent.position" multiple placeholder="请选择"> <el-option v-for="item in po...
2019-05-07 14:28:01
10198
8
原创 vue中echarts爬坑笔记（二） 父组件异步获取的数据给子组件，子组件报错或数据不更新
父组件从后台请求的数据传给echarts所在的子组件遇到的问题：1、父组件数据在没有设置初始值情况下，子组件接受到的数据报错：类似这种：data.count is not a function在子组件的mounted里面打印父组件传递过来的数据，发现是空的。在给父组件赋初始值后，报错消失，说明父组件将初始值传给子组件更新视图是在父组件从后台获取数据之前，从而导致第二个问题2、父组件有初始...
2019-04-11 18:05:58
2974
原创 vue开发（三）vue-scroller实现下拉刷新，上拉加载笔记（包括吸顶效果失效的问题）
项目中要实现下拉刷新，上拉加载，首先想到了vue-scroller，用起来真的太方便了。npm网址：vue-scroller安装依赖：npm install vue-scroller -D引入import Vue from 'vue'import VueScroller from 'vue-scroller'Vue.use(VueScroller)html：<...
2019-04-09 10:37:12
1524
原创 vue开发（一）element的树形结构（默认选中高亮及插槽的使用和兼容）
前期准备：elementUI组件使用命令行安装elementUI：npm i element-ui -S在main.js中引用：import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css' //整体引入Vue.use(ElementUI)代码：html:&amp;lt;el-i...
2019-01-25 16:05:49
5175
原创 sublime使用日记：vue中的style部分无法正常高亮
使用sublime好长时间了，但从接触vue后，出现了一个问题一直困扰着我，找了好多办法仍然无解，我不得不放弃它。最近在家养病，闲来无事，终于解决了这个bug。 sublime安装插件的步骤在这就不赘述了，有太多大神已经写的很详细了，下面直接上问题图： 如上图，我安装了vue的高亮插件Vue Syntax Highlight，模板和js部分的高亮没有问题，但是从script标签开始，高亮部...
2018-08-27 13:13:56
5988
8
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人