vue
小白 猿
这个作者很懒,什么都没留下…
展开
-
better-scroll 滚动BUG,某些时候设置scrollY后,只能上滑不能下滑,例如某些组件设置了其他挂载节点的时候,不能下滑。
说明:作用:move 事件通常会绑定到 document 上而不是滚动的容器上,当移动的过程中光标或手指离开滚动的容器滚动仍然会继续,这通常是期望的。当然你也可以把 move 事件绑定到滚动的容器上,bindToWrapper 设置为 true 即可,这样一旦移动的过程中光标或手指离开滚动的容器,滚动会立刻停止。解决办法:使用 :stop-propagation=“false” 阻止轮播图滑动事件冒泡,使轮播图只执行better-scroll派发的点击事件。例如某些组件设置了其他挂载节点的时候,不能下滑。原创 2022-06-23 18:02:35 · 413 阅读 · 0 评论 -
vue3 使用计算属性代替 filter 过滤器实现时间格式化操作
由于vue3没有了 filter 过滤器,所以我尝试了用计算属性代替它去格式化时间方法如下:1、在页面按需引用import formatDate from '../assets/js/FormatDate'// computed 与setup同级computed: { formatDate() { return formatDate; },},2、在页面使用formatDate('2021.3.6', "hh:mm dd/MM/yyyy")ps: 以下为完原创 2021-09-02 16:14:40 · 2636 阅读 · 4 评论 -
vue 接入 facebook 登录的方法(需要翻墙),使用vue-facebook-signin-button插件
tips:首先需要在facebook官网注册开发者账号,并创建应用,拿到应用编号appidfacebook开发者登录平台1、在index.html中加入这个 sdk, appid换成 你的应用编号:<!--appId 写上开发者--><script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v3.3&appId=原创 2021-09-02 16:03:34 · 3409 阅读 · 1 评论 -
vue 接入paydollar支付功能
tips:需要先在官网申请开发者(一)、前端使用方法<form name="payForm" method="post" ref="form" action="https://test.paydollar.com/b2cDemo/eng/payment/payForm.jsp"> <!-- 商户ID --> <input type="hidden" name="merchantId" value="你申请的商户ID" /> <!-- 支付金额 -->原创 2021-09-02 15:49:39 · 483 阅读 · 0 评论 -
vue3使用侦听器监听路由的变化,实现浏览器回退pc侧边栏高亮改变
这样就可以得到想要的效果了,刷新页面会保留上一次访问的页面和高亮。2、监听路由变化,当路由变化时执行 “getPath” 方法。原创 2021-09-02 15:29:18 · 1195 阅读 · 0 评论 -
vue + vue-print-nb 实现pc端打印功能,包含vue2和vue3两种引用方式
参考vue-print-nb官方文档(https://github.com/Power-kxLee/vue-print-nb#print-preview)(一)、引入方法vue21)、安装 npm install vue-print-nb --save2)、main.js引入import Print from 'vue-print-nb'Vue.use(Print);vue31)、安装 npm install vue3-print-nb --save2)、main.js 引入i原创 2021-09-02 15:19:04 · 6527 阅读 · 1 评论 -
van-uploader上传图片文件的方法(使用base64上传或使用文件路径)
van-uploader上传图片文件的方法(使用base64上传或使用文件路径)<van-uploader :after-read="afterUploaderimg" :before-read="beforeUploaderimg" type="file" accept=".jpg,.png" mutiple="mutiple" capture="imag原创 2021-06-09 13:41:58 · 3561 阅读 · 0 评论 -
解决使用 user-scalable=no 设置禁止用户缩放,在苹果浏览器下不生效的问题
解决使用 user-scalable=no 设置禁止用户缩放,在苹果浏览器下不生效的问题window.onload = function () { // 阻止双击放大 var lastTouchEnd = 0; document.addEventListener('touchstart', function (event) { if (event.touches.length > 1) { event.preventDefault();原创 2021-06-08 14:28:01 · 1873 阅读 · 0 评论 -
vue + apicloud 实现极光推送
vue + apicloud 实现极光推送在极光推送官网申请appkey,并绑定应用包名在apicloud上添加极光推送模块,配置config.xml文件在index.html页面初始化ajpush注意:apicloud代码需要写在apiready = function () {} 里面注意:apicloud代码需要写在apiready = function () {} 里面点击推送消息后跳转相对应的页面PushOnClick() //监听极光推送点击 //点击推送接收回调事件处原创 2021-06-08 14:26:42 · 763 阅读 · 0 评论 -
判断访问项目的设备是安卓还是苹果
判断访问项目的设备是安卓还是苹果const u = navigator.userAgent;const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if (isiOS) { console.log("ios"); } else { console.log("andriod"); }原创 2021-06-08 14:21:14 · 202 阅读 · 0 评论 -
vue项目使用router.replace后需要返回两次的解决方案
vue项目使用router.replace后需要返回两次的解决方案问题所在:a页面 push到 b页面, b页面 push到 c页面,c页面 replace到 b页面,这时候点击按钮(router.go(-1)),没有效果,需点击两次才能返回到a页面中!分析:页面跳转流程: a => b => c => b路由栈:a => b => b就路由栈说明:栈中b页面替代了c页面,所以路由栈中不存在c路由,因此在我们在点击第一次返回后,其实是从一个b页面返回到另一个b页面原创 2021-06-08 14:18:44 · 3766 阅读 · 0 评论 -
vue-cli4.x 配置pc端px转rem
vue-cli4.x 配置pc端px转rem安装依赖并在main.js中引入该依赖npm i amfe-flexiblenpm i postcss-px2remimport "amfe-flexible"在package.json中配置 "postcss": { "plugins": { "autoprefixer": {}, "postcss-px2rem": { "remUnit": 192 //设计稿的除以10得到适配范围 } } }原创 2021-06-08 11:54:13 · 278 阅读 · 0 评论 -
vue 使用 html2canvas 截图插件
vue 使用 html2canvas 截图插件npm install html2canvas在main.js引入 import html2canvas from 'html2canvas';document.body即节点,options即配置html2canvas(document.body,options).then(function(canvas) { document.body.appendChild(canvas);});Ps:页面渲染的图片不能出现在截图上,要配原创 2021-06-08 11:50:15 · 518 阅读 · 0 评论 -
vue 获取客户端唯一标识
【代码】vue 获取客户端唯一标识。原创 2021-06-08 11:46:13 · 4557 阅读 · 0 评论 -
组件(子页面)给App.vue(Main.vue)全局传值(使用vue-bus)
标题组件(子页面)给App.vue(Main.vue)全局传值安装依赖 npm install vue-busmain.js引入import VueBus from 'vue-bus'Vue.use(VueBus)组件(子页面)getHouse(e){ this.$bus.emit("bload",e);}App.vue ( Main.vue )mounted(){ //通过on监听事件,回调方法获取数据 this.$bus.on(原创 2021-06-08 11:41:37 · 1877 阅读 · 0 评论 -
vue 使用 i18n 国际化语言插件小结
vue 使用i18n国际化语言插件小结先安装依赖 npm install vue-i18n新建一个文件夹,存放你的index文件和需要的语言包,我这里需要三种语言,我就创建了三个语言包配置你的index.js,引入国际化插件,我这里设置了用户如果没选选择语言就默认是中文繁体。silentTranslationWarn: true, 作用是去除黄色警告然后在main.js文件中全局引用i18n在页面中的两种引用方式:切换语言时,写在data里面的数据不会重新渲染原创 2021-06-08 11:33:07 · 213 阅读 · 0 评论 -
成功引入element plus ui库 (使用vue3.x,vue-cli 4.5)
成功引入element plus ui库 (使用vue3.x,vue-cli 4.5)由于公司需要开发一个pc网站,所以引用了这个适用于vue3.0的ui库,顺便做个记录1,先安装npm install element-plus --save2,按需引入npm install babel-plugin-component -D3、修改babel.config.jsmodule.exports = { "presets": [["@babel/preset-env", { "modules"原创 2021-01-29 11:22:22 · 1670 阅读 · 0 评论