vue
叫我官人_
皮。。。。
展开
-
vant 图片上传
afterRead (event) { //console.log(event) event.status = 'uploading'; event.message = '上传中...'; if (/\/(?:jpeg|png)/i.test(event.file.type) && event.file.size > 500000) { // 创建Canvas对象(画布) let canvas =...原创 2021-05-07 16:31:50 · 520 阅读 · 0 评论 -
vue 移动端底部被键盘顶起
这个问题相信做移动端开发的童鞋会有深刻体会,以前用jq开发时就很头疼这个问题,每次底部footer部分需要用position:fixed,如果页面内容不是很长,没有超出屏幕范围,那就还好,没有问题;一旦超出屏幕范围,当你点击输入框,弹出键盘时,底部固定定位的footer部分就会被顶起来,很丑!有木有。 在键盘弹起时,页面高度变小,底部固定定位上升,所以我们只需要在页面高度变小时,隐藏底部footer部分,当键盘消失时再显示底部footer部分就可以解决问题了。 解决方法:检测浏览器的resize事件,当高度原创 2021-04-21 16:06:34 · 755 阅读 · 0 评论 -
el-tree 结构使用
<template> <div> <el-tree :data="datas" show-checkbox node-key="id" ref="tree" default-expand-all :default-checked-keys="['01','022']" :...原创 2019-09-16 06:24:52 · 7772 阅读 · 2 评论 -
vue 登录注册验证
<template> <div class="page"> <div class="login-box"> <p data-v-032893be class="title">欢迎登录</p> <el-tabs v-model="activeName"> <el-tab...原创 2019-06-05 17:14:34 · 4118 阅读 · 0 评论 -
vue 引入svg
创建SvgIcon组件 <template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg> </template> <script> export default { ...转载 2019-05-08 17:16:36 · 5936 阅读 · 1 评论 -
vue关于路由懒加载方案(改进)
路由懒加载 当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。 结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。如: const Foo = () => import('./Foo.vue') 当你觉得你的页面热...转载 2019-03-20 17:03:32 · 1433 阅读 · 0 评论 -
vuex封装
vuex的使用 1.组件中通过dispatch事件触发actions eg: methods: { 事件名: function() { this.$store.dispatch("键值名", 需要存储的值); }, } 2.通过actions进行commit提交给mutation eg:action.js ...原创 2019-01-25 15:55:28 · 2014 阅读 · 0 评论 -
vue3.0快速创建项目
https://blog.csdn.net/xuqipeter/article/details/80452271转载 2018-10-26 11:31:35 · 1857 阅读 · 0 评论 -
vuex一个demo轻松理解
1.安装vuex $ npm install vuex --save 2.在src目录下新建store文件和store.js 3.store.js // store.js import Vue from 'vue' import VueX from 'Vuex' Vue.use(VueX); const store = new VueX.Store({ //state属性...原创 2018-09-12 14:58:32 · 215 阅读 · 0 评论 -
vue项目中如何实现国际化
一、实现国际 首先,我开发是以 vue 为技术栈,所以如题用的国际化插件是 vue-i18n,附上 github 传送门。 1、我们得先有开发环境,先有项目跑起来,我推荐如果是喜欢用 vue 的小伙伴,可以尝试 vue-cli 官方脚手架。这边有我整理的一个脚手架 demo ,有助于你快速的进行 vue 模块化开发。 2、我们需要安装 vue-i18n, 推荐 npm 包依赖:...原创 2018-09-06 16:30:48 · 3447 阅读 · 0 评论 -
Vue history/hash模式打包页面空白处理
相信很多新手在history/hash模式下被坑的很惨,处理history模式下页面打包空白,经测试ok 一、vue项目携带一个#会对开发造成一定的影响: 1、微信三方登录回调地址,有#号时,接收不到code参数 2、微信H5支付的回调地址,不允许有# 3、App分享,处理特殊字符时,可能会对#进行编译 4、有点影响美观 现在网站大多有三方登录,支付等功能,存在#,项目开发就存在很大...原创 2018-09-06 11:10:03 · 5236 阅读 · 1 评论 -
vue使用socket.io做到数据长链接
vue中使用socket协议 vue-cli 脚手架目录结构 1.参照vue-socket.io的git地址说明文档进行安装 npm install vue-socket.io 2.main.js里面注册一下。vue.use 里面的链接是后台的提供给你的socket地址 // socket import VueSocketio from 'vue-socket.io'; Vue.use...原创 2018-09-06 10:49:25 · 3533 阅读 · 0 评论 -
vue 吸顶导航
<!-- 吸顶 --> <template> <div class="scroll"> <div class="header">header</div> <div class="nav" :class="navBarFixed == tru原创 2018-08-20 16:00:57 · 2296 阅读 · 2 评论 -
vue+vuex+axios做登录、注册页权限拦截
在GitHub上有很多写好的模板,这个项目也是基于模板做的。 现在记录一下我做的过程 1、修改config文件夹里的dev.env.js里的BASE_API,把地址改成请求后端的公共部分 BASE_API: '"http://192.168.xx.xx"', 2、接下来就是操作src文件,先在 views里写好vue组件(login.vue,regist.vue),写好到rou...转载 2018-08-08 12:01:35 · 1381 阅读 · 0 评论 -
vue进阶面试题
1、active-class是哪个组件的属性?嵌套路由怎么定义? 答:vue-router模块的router-link组件。 2、怎么定义vue-router的动态路由?怎么获取传过来的动态参数? 答:在router目录下的index.js文件中,对path属性加上/:id。 使用router对象的params.id 3、vue-router有哪几种导航钩子? 答:三种,一...原创 2018-08-02 11:05:56 · 7022 阅读 · 0 评论 -
vue移动端心得
1、position:absolute: 定位的时候不同手机的浏览器版本不一样,存在兼容性问题,所以要修改为fixed,然后使用left: calc(50% - 1rem )进行定位; 2、event.touches[0].pageY:移动端事件touchstart,touchmove,touchend,在vue中的手指滑动的对象是要传入$event才可以使用event.touches[0].p...转载 2018-05-11 22:34:31 · 1520 阅读 · 0 评论