![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
vue杂记
祈盼啦啦啦
研究生
展开
-
vue3项目网站自适应大屏幕宽度(width>1920)
vue3项目自适应屏幕宽度安装插件:lib-flexible、postcss-px2rem、px2rem-loadercnpm install lib-flexible --savecnpm install postcss-px2rem --savelib-flexible是来作为移动端适配的解决方案的,postcss-px2rem将代码中px自动转化成对应的rem的一个插件。在main.js中引入import 'lib-flexible'在vue.config.js中引入如下代码m原创 2022-03-03 16:42:42 · 5177 阅读 · 4 评论 -
VUE使用自定义指令对普通 DOM 元素进行底层操作
使用vue的自定义指令来整合某个重复使用的底层操作举个聚焦输入框的例子,如下:当页面加载时,该元素将获得焦点 (注意:autofocus 在移动版 Safari 上不工作)。事实上,只要你在打开这个页面后还没点击过任何内容,这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能:// 在main.js中注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el原创 2022-01-21 20:46:06 · 715 阅读 · 0 评论 -
vue关闭页面或刷新页面触发浏览器关闭提醒
关闭单个页面、整个浏览器、刷新都可以触发mounted() { window.onbeforeunload = e => { e = e || window.event // 兼容IE8和Firefox 4之前的版本 if (e) { e.returnValue = '关闭提示' } // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+ return '关闭提示'}...原创 2022-01-11 19:46:43 · 2045 阅读 · 0 评论 -
vue3 拖拽组件drag-drop
做项目的时候遇到了一个需求,拖拽按钮到指定位置,添加一个输入框。基本思路:基本按钮添加指定位置里面写好需要的输入框,只不过用v-show隐藏起来,拖拽触发条件显示输入框,同时隐藏按钮给按钮加可拖动标签,给指定位置加可放置标签拖动按钮到指定位置,改变显示条件,输入框显示出来,按钮消失首先安装插件 vue-drag-dropcnpm install --save vue-drag-drop然后引入插件import VueDragDrop from 'vue-drag-drop'Vue原创 2021-07-09 19:22:30 · 6559 阅读 · 1 评论 -
js点击按钮获取当前按钮的信息
点击按钮获取按钮信息<el-button id="where" type="primary" plain @click="button($event)">WHERE</el-button>button(event) { // 获取点击对象 var el = event.currentTarget console.log(el) console.log(el.id)} ...原创 2021-07-07 13:12:55 · 2616 阅读 · 0 评论 -
list数组展示在table的一列
转载list数组展示在table的一列转载 2021-07-02 00:10:09 · 492 阅读 · 0 评论 -
vue2中使用 vue-i18n 插件实现页面中英文切换——记录
安装vue脚手架,略安装插件npm install vue-i18n,建议使用cnpm在src文件夹下创建lang文件夹存放中英文的语言包。 en.js是英文包,zh.js是中文包,还可以添加其他的语言包,index.js后面贴图index.js文件中的内容:import Vue from 'vue' // 引入vueimport VueI18n from 'vue-i18n' // 引入i18n模块import elementEnLocale from 'element-u..原创 2021-06-30 00:36:27 · 1169 阅读 · 5 评论 -
vue3安装wot-design步骤
首先把vue项目创建好安装wot-designcnpm i wot-design 我用npm安装报错了。。。见怪不怪了接着在main.js中引入依赖import WotDesign from 'wot-design'import 'wot-design/lib/theme-default/index.css'//全局引入,可以直接在组件中写wot-design官网的标签了Vue.use(WotDesign)wot-deign官网直接在代码块中引入即可看到效果<wd..原创 2021-06-10 17:20:21 · 636 阅读 · 2 评论 -
vue项目打包做app模拟真机测试 无法请求后台服务接口(axios配置)
vue项目打包做app模拟真机测试 无法请求后台服务接口背景:本地的测试使用的是反向代理,可以不用管目标地址问题,但是打包成apk测试却不可以,需要使用目标地址,而且在开发的代码中无法实现跨域,打包后是找不到接口的原本的写法://配置http.js文件import axios from 'axios'const instance = axios.create({ timeout: 60000, headers: { 'Content-Type': 'application/jso原创 2021-04-14 18:25:41 · 1817 阅读 · 0 评论 -
vue项目打包成安卓APP禁用某个页面的物理返回按钮
上一个文章记录了 如何解决使用Hbuilderx打包Vue项目为安卓APP点击物理返回键直接退出应用问题,这篇文章记录一下让某个页面禁用物理返回按钮的问题问题描述上次解决了返回按钮,但是在登录成功之后还是可以返回到登录界面,这明显不合适,只能让用户点退出登录才可以返回到登录页面。即物理按钮禁用,但是不影响页面内的回退跳转。解决思路使用history.pushState()方法向当前浏览器会话的历史堆栈中添加一个状态(state)描述:从某种程度来说, 调用 pushState() 和 window原创 2021-04-06 17:14:46 · 724 阅读 · 0 评论 -
解决使用Hbuilderx打包Vue项目为安卓APP点击物理返回键直接退出应用问题
已解决:使用Hbuilderx打包Vue项目为安卓APP点击物理返回键直接退出应用问题描述解决思路开始操作问题描述使用vue框架写的项目,打包之后用Hbuilderx打包成了apk文件,在安卓手机上测试时发现点击安卓的物理返回按钮时会直接杀死应用。解决思路如果没有上一个路由地址则直接退出应用,如果有则返回到上一个路由地址的页面。开始操作找到文件的index.js文件,在<title></title>代码下面添加一段代码<script> document原创 2021-04-06 16:58:45 · 1269 阅读 · 0 评论 -
vue3.0实现移动端自适应
vue3.0实现移动端自适应项目使用vue3.0编写代码,说要打包成apk文件,在安卓上看,现在需要适配移动端的样式,记录一下,亲测有效。安装插件vue脚手架略过lib-flexible : 会自动在html的head中添加一个<meta name="viewport">的标签,同时会自动设置html的font-size为屏幕宽度除以10,也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px,此时1rem应该等于75px。假如量的某个元素的宽度是150px原创 2021-04-01 14:05:42 · 5998 阅读 · 1 评论