<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[m0_50832030的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/m0_50832030</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; m0_50832030]]></copyright><item><title><![CDATA[VUE获取PDF文件流在页面中直接掉起打印弹框]]></title><link>https://blog.youkuaiyun.com/m0_50832030/article/details/133028131</link><guid>https://blog.youkuaiyun.com/m0_50832030/article/details/133028131</guid><author>m0_50832030</author><pubDate>Tue, 19 Sep 2023 14:32:58 +0800</pubDate><description><![CDATA[VUE获取PDF文件流在页面中直接掉起打印弹框]]></description><category></category></item><item><title><![CDATA[Vue 编程式路由导航]]></title><link>https://blog.youkuaiyun.com/m0_50832030/article/details/131476870</link><guid>https://blog.youkuaiyun.com/m0_50832030/article/details/131476870</guid><author>m0_50832030</author><pubDate>Fri, 30 Jun 2023 14:55:01 +0800</pubDate><description><![CDATA[1、作用：不借助实现路由跳转，让路由跳转更加灵活。]]></description><category></category></item><item><title><![CDATA[【uniapp小程序】button组件去掉默认样式，转变为灵活的view]]></title><link>https://blog.youkuaiyun.com/m0_50832030/article/details/127927294</link><guid>https://blog.youkuaiyun.com/m0_50832030/article/details/127927294</guid><author>m0_50832030</author><pubDate>Fri, 18 Nov 2022 17:57:53 +0800</pubDate><description><![CDATA[在小程序中需要button来进行开发功能的实现。但是button的默认样式，并不是项目中需要的。]]></description><category></category></item><item><title><![CDATA[Axios:使用Axios实现文件上传/下载 进度显示]]></title><link>https://blog.youkuaiyun.com/m0_50832030/article/details/127551220</link><guid>https://blog.youkuaiyun.com/m0_50832030/article/details/127551220</guid><author>m0_50832030</author><pubDate>Thu, 27 Oct 2022 14:13:14 +0800</pubDate><description><![CDATA[Axios:使用Axios实现文件上传/下载 进度显示]]></description><category></category></item><item><title><![CDATA[Uniapp中分页触底加载实现方式]]></title><link>https://blog.youkuaiyun.com/m0_50832030/article/details/124357073</link><guid>https://blog.youkuaiyun.com/m0_50832030/article/details/124357073</guid><author>m0_50832030</author><pubDate>Fri, 22 Apr 2022 23:09:23 +0800</pubDate><description><![CDATA[使用生命周期中的onReachBottom来实现

(实现触底加载：后端必须要给“总条数”，前端必须要传“当前页数和当前条数”)


&lt;template&gt;
	&lt;view class="dataInfo"&gt;
		&lt;view class="list" v-for="(item,index) in dataList" :key='index'&gt;
			&lt;text&gt;{{index}}&lt;/text&gt;
			&lt;text&gt;{{item}}&lt;/t]]></description><category></category></item><item><title><![CDATA[Uniapp中引入Ucharts统计表的使用]]></title><link>https://blog.youkuaiyun.com/m0_50832030/article/details/124356945</link><guid>https://blog.youkuaiyun.com/m0_50832030/article/details/124356945</guid><author>m0_50832030</author><pubDate>Fri, 22 Apr 2022 23:07:10 +0800</pubDate><description><![CDATA[效果：



实现步骤：

1.在插件市场下载插件，使用hbuilderx导入即可。https://ext.dcloud.net.cn/plugin?id=271







2.新建vue文件，无需引入。

源码：


&lt;template&gt;
    &lt;view class="box"&gt;
        &lt;view class="title"&gt;
            饼图
        &lt;/view&gt;
        &lt;view clas...]]></description><category></category></item><item><title><![CDATA[Uniapp中根据生日计算年龄]]></title><link>https://blog.youkuaiyun.com/m0_50832030/article/details/124356894</link><guid>https://blog.youkuaiyun.com/m0_50832030/article/details/124356894</guid><author>m0_50832030</author><pubDate>Fri, 22 Apr 2022 22:56:30 +0800</pubDate><description><![CDATA[getage() {
      var birthdays = new Date(this.birthday.replace(/-/g, "/"));
      var d = new Date();
      var age =
        d.getFullYear() -
        birthdays.getFullYear() -
        (d.getMonth() &lt; birthdays.getMonth() ||
        (d.getMonth() =...]]></description><category></category></item><item><title><![CDATA[Uniapp点击按钮防抖操作]]></title><link>https://blog.youkuaiyun.com/m0_50832030/article/details/124356793</link><guid>https://blog.youkuaiyun.com/m0_50832030/article/details/124356793</guid><author>m0_50832030</author><pubDate>Fri, 22 Apr 2022 22:53:53 +0800</pubDate><description><![CDATA[一、在根目录下新建common文件并创建common.js文件，输入下面代码


 // 防止处理多次点击
 function noMultipleClicks(methods, info) {
     // methods是需要点击后需要执行的函数， info是点击需要传的参数
     let that = this;
     if (that.noClick) {
         // 第一次点击
         that.noClick= false;
         if(info &a]]></description><category></category></item><item><title><![CDATA[Vue路由守卫]]></title><link>https://blog.youkuaiyun.com/m0_50832030/article/details/123724778</link><guid>https://blog.youkuaiyun.com/m0_50832030/article/details/123724778</guid><author>m0_50832030</author><pubDate>Fri, 25 Mar 2022 22:01:22 +0800</pubDate><description><![CDATA[1、作用：对vue的路由进行权限控制

2、分类：全局守卫、独享守卫、组件内守卫

3、全局守卫


// 全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=&gt;
{
    // to.meta.isAuth 路由中自定义变量
    if(to.meta.isAuth)
    {   //判断当前路由是否需要进行权限控制
        //localStorage.getItem('权限名称') 获取存储在本地的权限变量
     ]]></description><category></category></item><item><title><![CDATA[Vuex模块化+命名空间]]></title><link>https://blog.youkuaiyun.com/m0_50832030/article/details/123591614</link><guid>https://blog.youkuaiyun.com/m0_50832030/article/details/123591614</guid><author>m0_50832030</author><pubDate>Sat, 19 Mar 2022 11:53:59 +0800</pubDate><description><![CDATA[1、目的：让代码更好维护，让多种数据分类更加明确

2.、store.js文件中配置命名空间


const countAbout = {
    namespaced:true,//开启命名空间
    state:{x:1},
    mutations:{ ... },
    actions:{ ... },
    getters:{
        bigSum(state){
            return state.sum*10;
        }
    }
}

const p]]></description><category></category></item><item><title><![CDATA[Vue中的Vuex配置以及使用]]></title><link>https://blog.youkuaiyun.com/m0_50832030/article/details/123580605</link><guid>https://blog.youkuaiyun.com/m0_50832030/article/details/123580605</guid><author>m0_50832030</author><pubDate>Fri, 18 Mar 2022 17:41:43 +0800</pubDate><description><![CDATA[1、初始化数据、配置actions、配置mutations、配置state，来操作文件store.js(创建在src文件下)




//引入Vue核心文件
import Vue from 'vue';

//引入Vuex
import Vuex from 'vuex';
//引用Vuex
Vue.use(Vuex);

const actions = {
    //响应组件中加的动作
    jia(context,value)
    {
        context.commit('JIA',va]]></description><category></category></item><item><title><![CDATA[Vue过度动画]]></title><link>https://blog.youkuaiyun.com/m0_50832030/article/details/123532617</link><guid>https://blog.youkuaiyun.com/m0_50832030/article/details/123532617</guid><author>m0_50832030</author><pubDate>Wed, 16 Mar 2022 18:15:57 +0800</pubDate><description><![CDATA[1、Vue中要加自定义样式的话，只有一个元素加动画效果用(transition)。多个元素加动画效果用(transition-group)，这标签必须加个Key值。





2、Css动画元素样式




// 动画进场
.myheadr-enter-active
{
  // 动画名称：liziteng 动画过渡时间：0.5 动画播放状态：匀速播放（linear）
  animation: liziteng 0.5s linear;
}

// 动画退场
.myheadr-leave-active
{.]]></description><category></category></item><item><title><![CDATA[Vue全局事件总线（兄弟组件之间传值）]]></title><link>https://blog.youkuaiyun.com/m0_50832030/article/details/123509297</link><guid>https://blog.youkuaiyun.com/m0_50832030/article/details/123509297</guid><author>m0_50832030</author><pubDate>Tue, 15 Mar 2022 18:57:48 +0800</pubDate><description><![CDATA[1、安装全局时间总线。在man.js中给这个Vue实例添加一个beforeCreate钩子。在Vue原型对象中添加一个$bus赋值为当前应用的vm(Vue实例)



2、使用事件总线。

一、提供数据的组件：使用$bus的$emit Api去传值给A组件



二、接收数据组件比如：A组件想接受数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件的自身，可以在mounted钩子中接受数据



3、最好在接收数据的组件中的beforeDestroy钩子中，用$bus的$off Api去解绑当前]]></description><category></category></item><item><title><![CDATA[Vue中导入DayJs（时间戳转时间格式）]]></title><link>https://blog.youkuaiyun.com/m0_50832030/article/details/123373653</link><guid>https://blog.youkuaiyun.com/m0_50832030/article/details/123373653</guid><author>m0_50832030</author><pubDate>Wed, 09 Mar 2022 11:44:36 +0800</pubDate><description><![CDATA[1.Npm安装Dayjs


npm install dayjs --save

2.Dayjs写入到Vue原型中


import dayjs from 'dayjs';
Vue.prototype.$dayjs = dayjs;

3.在页面中调用$dayjs，进行时间戳格式化（this.$dayjs()中不传入时间戳就是获取当前时间，format()中可以按照自己需求去传入时间格式）


let time = Date.now();
console.log(this.$dayjs(time).form]]></description><category></category></item><item><title><![CDATA[Js计算账号创建天数]]></title><link>https://blog.youkuaiyun.com/m0_50832030/article/details/122920754</link><guid>https://blog.youkuaiyun.com/m0_50832030/article/details/122920754</guid><author>m0_50832030</author><pubDate>Mon, 14 Feb 2022 11:18:23 +0800</pubDate><description><![CDATA[1.首先在methods写入一个计算天数的方法




SkyNumber(time)
{
	let now = Date.parse(new Date(time)) / 1000;
	let limit = Date.parse(new Date()) / 1000 - now;
	let createTime = Math.floor(limit / 86400) + 1;
	return createTime;
}

2.在行内调用SkyNumber方法，把账号创建时间的天数传进方法中




...]]></description><category></category></item><item><title><![CDATA[Vue 图片放大镜]]></title><link>https://blog.youkuaiyun.com/m0_50832030/article/details/121075150</link><guid>https://blog.youkuaiyun.com/m0_50832030/article/details/121075150</guid><author>m0_50832030</author><pubDate>Mon, 01 Nov 2021 10:18:39 +0800</pubDate><description><![CDATA[效果图如下：



首先下载插件


npm i image-zoom-vue -S

在需要的数组上引入插件（全局引入也可以，看使用的地方多不多）


&lt;template&gt;
  &lt;div id="app" style="width: 500px;height: 500px;"&gt;
    &lt;magnifier :options="magnifierOptions"&gt;&lt;/magnifier&gt;
  &lt;/div&gt;
&lt;/template&gt;
&.]]></description><category></category></item><item><title><![CDATA[AES密码加密（vue）]]></title><link>https://blog.youkuaiyun.com/m0_50832030/article/details/120843103</link><guid>https://blog.youkuaiyun.com/m0_50832030/article/details/120843103</guid><author>m0_50832030</author><pubDate>Tue, 19 Oct 2021 11:40:43 +0800</pubDate><description><![CDATA[一、引入AES源码JS


const CryptoJS = require('crypto-js'); //引用AES源码js

const key = CryptoJS.enc.Utf8.parse("oiijuy56btgvnj31"); //十六位十六进制数作为密钥
const iv = CryptoJS.enc.Utf8.parse('wfsvbathfg482oji'); //十六位十六进制数作为密钥偏移量

二、AES解密方法


//解密方法
    Decrypt(word) {
    ]]></description><category></category></item><item><title><![CDATA[Vue使用H5实现滚动页面底部加载数据]]></title><link>https://blog.youkuaiyun.com/m0_50832030/article/details/120141277</link><guid>https://blog.youkuaiyun.com/m0_50832030/article/details/120141277</guid><author>m0_50832030</author><pubDate>Mon, 06 Sep 2021 18:06:31 +0800</pubDate><description><![CDATA[一、添加滚动监听事件


mounted() {
    window.addEventListener("scroll", this.scrollBottom, true);
},

二、实现滚动事件，滚动到底部加载数据


scrollBottom() {
    // 滚动到页面底部时
    const el = document.getElementById("content");
    const windowHeight = window.screen.height;
    const s]]></description><category></category></item><item><title><![CDATA[Vue复制内容到剪切板]]></title><link>https://blog.youkuaiyun.com/m0_50832030/article/details/120141168</link><guid>https://blog.youkuaiyun.com/m0_50832030/article/details/120141168</guid><author>m0_50832030</author><pubDate>Mon, 06 Sep 2021 18:00:43 +0800</pubDate><description><![CDATA[一、Npm安装第三方插件：clipboard

npm install vue-clipboard2 --save

二、全局注入（main.js）

import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

三、使用方法

&lt;template&gt;
 &lt;div class="App"&gt;
 &lt;el-input v-model="Content"&gt;&lt;/el-input&gt;
 &lt;...]]></description><category></category></item><item><title><![CDATA[Vue中自定义指令（防止按钮重复提交）]]></title><link>https://blog.youkuaiyun.com/m0_50832030/article/details/120021354</link><guid>https://blog.youkuaiyun.com/m0_50832030/article/details/120021354</guid><author>m0_50832030</author><pubDate>Tue, 31 Aug 2021 16:45:14 +0800</pubDate><description><![CDATA[第一步、新建一个文件，directive.js


// 阻止按钮重复提交
import Vue from 'vue'

// 阻止按钮重复提交
Vue.directive("button", {
    bind: function (el, binding, vnode) { // 每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
        function clickHandler(e) {
            // 这里判断点击的元素是否是本身，是本身，则返回
     ]]></description><category></category></item></channel></rss>