- 博客(20)
- 收藏
- 关注
RSS订阅原创 【uniapp小程序】button组件去掉默认样式，转变为灵活的view
在小程序中需要button来进行开发功能的实现。但是button的默认样式，并不是项目中需要的。
2022-11-18 17:57:53
1184
1
原创 Uniapp中分页触底加载实现方式
使用生命周期中的onReachBottom来实现(实现触底加载：后端必须要给“总条数”，前端必须要传“当前页数和当前条数”)<template> <view class="dataInfo"> <view class="list" v-for="(item,index) in dataList" :key='index'> <text>{{index}}</text> <text>{{item}}</t
2022-04-22 23:09:23
1465
原创 Uniapp中引入Ucharts统计表的使用
效果：实现步骤：1.在插件市场下载插件，使用hbuilderx导入即可。https://ext.dcloud.net.cn/plugin?id=2712.新建vue文件，无需引入。源码：<template> <view class="box"> <view class="title"> 饼图 </view> <view clas...
2022-04-22 23:07:10
1326
2
原创 Uniapp中根据生日计算年龄
getage() { var birthdays = new Date(this.birthday.replace(/-/g, "/")); var d = new Date(); var age = d.getFullYear() - birthdays.getFullYear() - (d.getMonth() < birthdays.getMonth() || (d.getMonth() =...
2022-04-22 22:56:30
408
原创 Uniapp点击按钮防抖操作
一、在根目录下新建common文件并创建common.js文件，输入下面代码 // 防止处理多次点击 function noMultipleClicks(methods, info) { // methods是需要点击后需要执行的函数， info是点击需要传的参数 let that = this; if (that.noClick) { // 第一次点击 that.noClick= false; if(info &a
2022-04-22 22:53:53
2246
1
原创 Vue路由守卫
1、作用：对vue的路由进行权限控制2、分类：全局守卫、独享守卫、组件内守卫3、全局守卫// 全局前置守卫：初始化时执行、每次路由切换前执行router.beforeEach((to,from,next)=>{ // to.meta.isAuth 路由中自定义变量 if(to.meta.isAuth) { //判断当前路由是否需要进行权限控制 //localStorage.getItem('权限名称') 获取存储在本地的权限变量
2022-03-25 22:01:22
4041
原创 Vuex模块化+命名空间
1、目的：让代码更好维护，让多种数据分类更加明确2.、store.js文件中配置命名空间const countAbout = { namespaced:true,//开启命名空间 state:{x:1}, mutations:{ ... }, actions:{ ... }, getters:{ bigSum(state){ return state.sum*10; } }}const p
2022-03-19 11:53:59
347
原创 Vue中的Vuex配置以及使用
1、初始化数据、配置actions、配置mutations、配置state，来操作文件store.js(创建在src文件下)//引入Vue核心文件import Vue from 'vue';//引入Vueximport Vuex from 'vuex';//引用VuexVue.use(Vuex);const actions = { //响应组件中加的动作 jia(context,value) { context.commit('JIA',va
2022-03-18 17:41:43
1030
原创 Vue过度动画
1、Vue中要加自定义样式的话，只有一个元素加动画效果用(transition)。多个元素加动画效果用(transition-group)，这标签必须加个Key值。2、Css动画元素样式// 动画进场.myheadr-enter-active{ // 动画名称：liziteng 动画过渡时间：0.5 动画播放状态：匀速播放（linear） animation: liziteng 0.5s linear;}// 动画退场.myheadr-leave-active{.
2022-03-16 18:15:57
307
原创 Vue全局事件总线（兄弟组件之间传值）
1、安装全局时间总线。在man.js中给这个Vue实例添加一个beforeCreate钩子。在Vue原型对象中添加一个$bus赋值为当前应用的vm(Vue实例)2、使用事件总线。一、提供数据的组件：使用$bus的$emit Api去传值给A组件二、接收数据组件比如：A组件想接受数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件的自身，可以在mounted钩子中接受数据3、最好在接收数据的组件中的beforeDestroy钩子中，用$bus的$off Api去解绑当前
2022-03-15 18:57:48
1638
原创 Vue中导入DayJs（时间戳转时间格式）
1.Npm安装Dayjsnpm install dayjs --save2.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
2022-03-09 11:44:36
5386
原创 Js计算账号创建天数
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方法，把账号创建时间的天数传进方法中...
2022-02-14 11:18:23
328
原创 Vue 图片放大镜
效果图如下：首先下载插件npm i image-zoom-vue -S在需要的数组上引入插件（全局引入也可以，看使用的地方多不多）<template> <div id="app" style="width: 500px;height: 500px;"> <magnifier :options="magnifierOptions"></magnifier> </div></template>&.
2021-11-01 10:18:39
564
原创 AES密码加密（vue）
一、引入AES源码JSconst CryptoJS = require('crypto-js'); //引用AES源码jsconst key = CryptoJS.enc.Utf8.parse("oiijuy56btgvnj31"); //十六位十六进制数作为密钥const iv = CryptoJS.enc.Utf8.parse('wfsvbathfg482oji'); //十六位十六进制数作为密钥偏移量二、AES解密方法//解密方法 Decrypt(word) {
2021-10-19 11:40:43
605
原创 Vue使用H5实现滚动页面底部加载数据
一、添加滚动监听事件mounted() { window.addEventListener("scroll", this.scrollBottom, true);},二、实现滚动事件，滚动到底部加载数据scrollBottom() { // 滚动到页面底部时 const el = document.getElementById("content"); const windowHeight = window.screen.height; const s
2021-09-06 18:06:31
1032
原创 Vue复制内容到剪切板
一、Npm安装第三方插件：clipboardnpm install vue-clipboard2 --save二、全局注入（main.js）import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)三、使用方法<template> <div class="App"> <el-input v-model="Content"></el-input> <...
2021-09-06 18:00:43
90
原创 Vue中自定义指令（防止按钮重复提交）
第一步、新建一个文件，directive.js// 阻止按钮重复提交import Vue from 'vue'// 阻止按钮重复提交Vue.directive("button", { bind: function (el, binding, vnode) { // 每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次 function clickHandler(e) { // 这里判断点击的元素是否是本身，是本身，则返回
2021-08-31 16:45:14
1005
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人