vue
专业前端小白
这个作者很懒,什么都没留下…
展开
-
vue实现一个简单的下拉选择框组件
效果图:组件代码:<template> <div class="select-container"> <div class="input-container"> <input class="input" v-model="searchValue" type="text" :placeholder="placeholder" :readonly="!isSearch" @focus="inputFocus"原创 2021-07-13 17:33:53 · 9763 阅读 · 0 评论 -
vue本地开发微信公众号(测试号)--获取code
在使用vue开发微信公众号的过程中,我们不可避免的需要测试,每次改动一点点就要打包上传服务器?那也太鱼唇了,那么vue怎么在本地测试呢?如何能够做到npm run serve就可以直接进行公众号调试呢?在开始之前需要有一下几个条件:申请一个微信测试号 下载微信开发者工具,(要想获取code换取openid必须使用微信浏览器,微信开发者工具可以调试网页) 使用natapp申请一个免费的内网穿透通道 搭建一个本地服务器(我这里使用的xampp集成环境)下面是我自己整理的详细步骤:1、申请na原创 2020-11-05 15:38:22 · 1903 阅读 · 0 评论 -
vue transition的理解
最近开发的过程中用到了vue的transition组件,写一下自己的心得体会。transition的作用首先我的理解是transition是作为元素切换时的过渡动画,例如在一个div进行v-if,v-show的时候,他的显示与隐藏分别进行怎样的变幻,都可以由transition进行控制。transition的属性v-enter:元素显示/插入前的效果,例如:transform:translateX(-200%); v-active-enter:元素显示/插入的过渡时间和函数,例如:tra.原创 2020-09-09 17:44:55 · 13164 阅读 · 2 评论 -
vue实现局部页面缓存+返回上一页传参
问题说明:在使用vue开发的过程中难免会遇到这种问题:1、当我们需要前往另一个页面去做其他操作后,返回上一个页面,上一个页面的状态会被刷新,我们需要让上一个页面的状态保留。2、当我们返回上一页的时候如何把参数传回上一页。解决思路:1、使用keep-alive:include="caches"来实现页面状态的保留,通过动态修改caches来达到局部页面缓存,include会缓存包含的页面。所以你可以将需要缓存的几个页面放在caches中,当退出这几个页面的时候再取消缓存。2、通过lo.原创 2020-09-02 15:20:59 · 2668 阅读 · 0 评论 -
vue3部署高德地图js api,如何将高德地图infoWindow交互事件挂载到vue实例上
首先要想使用高德地图js api,需要先在高德开放平台注册成为开发者,注册后,可以新建一个应用,获取你应用的key。获得Key之后,我们就可以需要在项目中添加JS API 的入口脚本标签,这里我选择添加到public/index.html中:<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> 添加之后,你就可以在你的组件原创 2020-08-24 17:37:46 · 1765 阅读 · 5 评论 -
vue插件--仿微信小程序showModel实现模态提示窗
效果图:下面是源码:index.jsimport Vue from 'vue';import model from './model.vue';export default { install(Vue) { const defaults = { show: false, mask: true, title: '提示', content: '这是正原创 2020-08-19 11:42:37 · 603 阅读 · 0 评论 -
vue插件--仿微信小程序showToast实现弱提示
效果图:根据参数分别有4种样式:success,info,warning,error,none开发者可以根据自身需要替换对应的图标即可。下面是代码:index.jsimport Vue from 'vue';import toast from './toast.vue';export default { install(Vue) { const defaults = { show:false,原创 2020-08-19 11:31:59 · 1019 阅读 · 3 评论 -
vue+mintUI实现移动端tabbar左右滑动切换
思路使用transition组件实现切换动画,使用watch监听route来实现切换的方向。效果实现方法<template> <div class="layout-container"> <div class="header-layout"> <my-header :title="headerTitle"></my-header> </div> <d原创 2020-05-22 10:54:48 · 2754 阅读 · 0 评论 -
vuex在action中提交commit异步事件问题
在开发过程中遇到一个问题,就是在action中提交的commit执行是异步事件。先看代码:// action.jssign_in({ commit }, user) { // 触发登录状态 commit({ type: 'sigin_in', payload : { user } }); console.log("++++++");},// mutations.jsasync sigin_in原创 2020-05-20 11:41:49 · 3817 阅读 · 0 评论 -
vue封装axios
在VUE开发过程中免不了使用axios,官方的axios使用在项目中使用起来还是不怎么方便的,例如对于异步的处理并不完美、请求参数的加密等。话不多说,直接上代码:import axios from "axios";import store from "store/";import qs from "qs"; // 序列化传参,以&符号连接import md5 from "m...原创 2020-04-28 11:08:26 · 310 阅读 · 0 评论