申多事儿-CSDN博客

原创 vue 后台管理适配

下载lodash插件。npm i lodash -S然后在App.vue中导入，此处的App.vue主要指的是主框架，因不同项目可自行选择。import _ from 'lodash'然后给app容器挂上ref=“app”<template> <div id="app" ref="app"> <router-view /> </div></template>然后在mounted使用如下方法（其中的1.

2022-05-17 15:24:41 541

原创 vue 点击图标旋转

2022-03-07 11:41:41 2211 1

原创滚动列表切换tab

代码如下：<template> <div class="custom-demo-view" style="padding: 1rem;"> <div> <el-tabs v-if="reload" v-model="tabIndex" @tab-click="jump"> <el-tab-pane :label="tabs[0].title" v-if="tabs[0].isShow" name="0

2022-02-16 13:46:25 486

原创字符串时间排序

数据: list: [ { time: "2012/09/10", }, { time: "2023/08/19", }, { time: "2022/08/19", }, { time: "2021/06/22", }, { time: "2069/03/1

2021-12-29 15:52:16 1500 1

原创 vue 动态渲染背景图片

一说到渲染背景图这里就要用到动态的style了代码如下：这边是渲染的本地图片所以用到了 require()来解析不是本地的去掉及可 :style="{ 'background-image': `url(${require('../assets/' + item.url + '.png')})`, }"...

2021-11-19 12:37:43 1882 1

原创 css 自定义长度间距虚线

.border { width: 90%; height: 1px; background-image: linear-gradient(to right, black 0%, black 50%, transparent 50%); background-size: 8px 1px; background-repeat: repeat-x; margin: 0 auto; }

2021-09-03 17:32:36 2961

原创 element -ui 返回顶部

<div class="headContainer"> //target要指向触发滚动的对象 <el-backtop target=".headContainer"> <i class="el-icon-caret-top"></i> </el-backtop> </div>三行代码搞定如果不行就在父盒子加上样式中加上这个2个属性:.headContainer { height:..

2021-05-26 15:43:26 447

原创 vue 生成二维码

1.安装生成二维码插件npm install qrcode --save2、在需要使用到生成二维码的组件中引入import QRCode from 'qrcode'3、在HTML中定义生成的位置，注意添加样式html:<canvas id="qrCodeCanvas"></canvas>css:#qrCodeCanvas{ padding: 0!important; margin: 0!important; width: 10

2021-05-25 16:19:32 166

原创 vue3.0新增特性

1.1 vue3.x相关资源vue3.x官方仓库：https://github.com/vuejs/vue-nextvue3.x中文官方文档：https://v3.cn.vuejs.org/vue-cli官方仓库：https://github.com/vuejs/vue-clivue-cli官方文档：https://cli.vuejs.org/zh/1.2 创建vue3.x项目方式主流创建vue3项目方式：1.vue-cli 脚本架的版本至少>=@vue/cli 4.5.0 vu

2021-05-24 18:55:53 301

原创 vue 手机验证码一分钟倒计时功能实现

<button v-show="show" @click="getCode">获取验证码</button><button v-show="!show" class="count">获取验证码{{count}}</button>data(){ return { show: true, count: '', timer: null, }},methods:{ getCode(){ const TIME_COUNT = 6

2021-05-21 19:04:00 288

原创数据可视化初步

一、什么是数据可视化：数据可视化，是关于数据视觉表现形式的科学技术研究数据可视化的理论基础：计算机图形学二、浏览器实现数据可视化架构：三、数据可视化基础核心技术1、canvas<canvas id="box" width="800" height="400"></canvas>1.注意：width和height最好canvas标签上添加，不要用css中的width,height2.如何绘制常用图形第一步：获取canvas并创建绘图对象 //获取

2021-05-10 20:41:58 260 3

原创 vue 中使用Animate.css 库

Animate.css 库官网 https://animate.style/1.安装npm install animate.css --save或者 yarn add animate.css2.引入到main.jsimport animated from 'animate.css' Vue.use(animated)3.在需要的页面中使用<div class=" goodlist animate__animated animate__backInLeft " > &l

2021-05-09 20:19:05 255

原创 Vue-Quill-Editor

富文本编辑器：Vue-Quill-Editor官网地址：https://www.npmjs.com/package/vue-quill-editor使用步骤：1.安装npm install vue-quill-editor --save2.引入 //引入富文本编辑器 import VueQuillEditor from 'vue-quill-editor' //引入vue-quill-editor相关样式 import 'quill/dist/quill.core.css'

2021-05-06 21:33:45 5512

原创 vue-table-with-tree-grid的使用

vue-table-with-tree-grid的使用// 1. 引入vue-table-with-tree-gridimport ZkTable from 'vue-table-with-tree-grid'Vue.component(ZkTable.name, ZkTable)// 2. 在在组件中写入<zk-table :data="tableData" show-index index-text="#" border

2021-04-28 00:03:49 342 1

原创后台返回的时间戳处理

1 后台返回的时间戳处理通常后台返回的是时间戳例如：1619314980时间戳：即1970年1月1日到现在的经过的毫秒数前端处理时间戳有两种方式：1.利用new Date日期对象处理 var d=new Date(传入时间戳*1000) 再通过getFullYear(),getMonth(),getDate(),getHours(),getMinutes(),getSeconds() 2.利用moment.js第三方日期处理函数来实现【公司用的多】2、通过Vue过滤器+m

2021-04-25 21:19:42 3118

原创防抖节流

防抖在固定时间内，如果有事件触发，则会再延长固定时间，如果在固定时间之内，一直没有触发事件，就会再次执行函数。电梯，不是陌生的吧，按下电梯，电梯门打开，从电梯门打开到电梯门关上的事件是10s,如果在这10s之内没有人关上电梯，那么10s后就会自动关上电梯，这个过程就是在固定时间之内，一直没有触发事件，就会再次执行函数,继续想象，在电梯闭合的一瞬间，看见一个小姐姐跑过来赶电梯，这时候极具绅士风度的你按下了开电梯的按钮，电梯收到指令会再次打开电梯门，这时候就会再次打开电梯10s，这就解释了在固定时间内，如果

2021-04-23 00:11:57 156

原创 vue项目封装axios

废话不多说直接上代码 ! ! !1、封装环境地址onst env = { //线上环境 prod: { baseURL:'https://www.liulongbin.top:8888' }, //开发环境 dev: { baseURL:'https://www.dev.top:8888/' }, //测试环境 test: { baseURL:'https://www.test.top:888

2021-04-22 00:12:41 198 2

原创回顾vue

vue是什么?vue框架是一个渐进式前端框架，可以提高前端开发效率。渐进式：可以选择性的使用该框架的一个或一些组件，这些组件的使用不需要将框架全部组件都应用；而且用了这些组件也不要求你的系统全部都使用该框架。Vue是一个前端框架，也其实是一个vue.js文件，下载vue.js文件并在页面中二.Vue脚手架创建项目1.安装脚手架npm install -g @vue/cli //电脑中只安装一次即可2.创建Vue项目vue create 项目名3.运行项目 npm run se

2021-04-20 22:04:08 81

原创微信小程序登录授权

一. 登录授权实现思路自己写一个微信授权登录页面让用户实现点击的功能，也就是实现了通过 button 组件去触发 getUserInof 接口。在用户进入微信小程序的时候，判断用户是否授权了，如果没有授权的话就显示授权页面，让用户去执行授权的操作。如果已经授权了，则直接跳过这个页面，进入首页。二. 登录授权代码onLoad: function() { var that = this; // 查看是否授权 wx.getSetting({ success: function(res) {

2021-04-19 22:02:13 357

原创 javaScript数组方法

一、js数据类型js分为两种数据类型1.基本数据类型：string number boolean null undefined symbol2.引用数据类型：object array function检测数据类型的方法typeof 可以判断数据类型但是无法区分 array object null等数据类型因为返回值都是objectinstanceof 不考虑 null 和 undefined（这两个比较特殊）以对象字面量创建的基本数据类型constructor 可以

2021-04-16 21:06:33 202

原创 javaScript复习

一、函数的定义1、函数声明:function 函数名() { //...}特点：无论在函数定义前，还是函数定义后调用，都能执行为什么都能执行？？？因为函数声明方式：函数提升2.函数表达式var 变量名=function() { //....}变量名()特点：只能在函数定义后调用，才能执行javaScript异步同步与异步1、同步：符合咱们人的认知习惯，一行一行往下按照代码顺序执行，如果前面代码没有执行完，不会执行缺点：容易导致代码阻塞2、异步：代码不会按

2021-04-15 21:44:10 75

原创微信小程序存储及登录授权

一、小程序的存储们在开发小程序的时候，常常会用到本地存储，下面我就来给大家分享一下微信本地存储的使用。一、数据支持需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。二、方法1、同步（1）wx.setStorageSync(); //存储值（2）wx.removeStorageSync(); // 移除指定的值（3）wx.getStorageSync(); // 获取值（4）wx.getStorageInfoSync(); // 获取当前 stor

2021-04-14 22:07:15 865

原创微信小程序插槽与模板

一、插槽在组件模板中可以提供一个节点，用于承载组件引用时提供的子节点。1、单个slot，代码示例：<view> <text>我是标准的</text>  <slot></s

2021-04-13 22:01:01 464

原创微信小程序组件通信

组件通信关于微信小程序页面与组件的通信WXML 数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容数据（自基础库版本 2.0.9 开始，还可以在数据中包含函数）。事件：用于子组件向父组件传递数据，可以传递任意数据前面两种可参考小程序组件通信如果以上两种方式不足以满足需要，父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。操作方法在组件标签里面可以通过class或者id属性对标签进行定义，建议使用i

2021-04-13 07:48:04 646

原创微信小程序搜索功能

思路:1.先对input框绑定个search方法进行搜索2.在js中写sarch方法，利用wx.request查找数据，success成功之后开始查找自己要的数据.3.根据input框的输入值且利用filter进行过滤，然后再利用indexof方法查找对应的数据（indexOf方法获取到指定的字符在字bai符串中第一次出现的位置，从0开始。如果一开始就是e则返>回0，如果第二个位置是e则返回1，如果搜完整个字符串都没有e则返回-1 。反证法如果该方法不返回-1 就证明该字符串中含有e字符。）

2021-04-11 15:22:56 1460

原创微信小程序请求及封装请求方式

一、微信小程序请求实现方式小程序发起网络请求需用到 wx.request(Object object) 例如： wx.request({ url: 'test.php', //仅为示例，并非真实的接口地址 data: { x: '', y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success (res) { console.log(res.data) }

2021-04-08 21:32:52 9100 7

原创微信小程序路由和生命周期

一、微信小程序路由小程序有两种路由触发模式1、标签式路由触发页面栈表现方式// redirect 对应 API 中的 wx.redirect 方法<navigator url="/page/redirect/redirect?title=redirect" open-type="redirect">在当前页打开</navigator>// navigator 组件默认的 open-type 为 navigate <navigator url="/page/na

2021-04-07 21:56:17 339

原创微信小程序入门

微信小程序一、微信小程序是什么微信小程序是一种不需要下载安装即可使用的应用微信小是2017年1月9日，张小龙在2017微信公开课Pro上发布的微信小程序正式上线。二、小程序的优势小程序优势有哪些？1.几乎不占用手机内存如果你的电脑是低配的话，那么你就必须要合理取舍安装的软件。笔者曾经拿学校机房的电脑做过简单实验，我给电脑安装若干杀毒软件，然后同时开始体检、木马扫描操作。实验结论：只需两个杀毒软件同时体检、杀毒操作就会导致死机，2分钟内鼠标键盘无响应且电脑无法正常工作；四个杀毒软件同时体检，

2021-04-06 21:31:12 116

原创 Es6

什么是ES6ES6，全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，** ES6新增特性**var let const：let和var的区别：(1)看是否有变量提升var有变量提升，let没有（2）看是否有块级作用域（3）看是否能够重复定义let和const解决了以上问题如下：不可以重复声明变量let site = 'itLike';

2021-04-02 21:59:24 125 1

原创 git和github

git和githubGit概述Git是目前世界上最先进的分布式版本控制系统.Git和Github的区别简单来说，Git只是一个命令行工具，一个分布式版本控制系统。正是它在背后管理和跟踪你的代码历史版本，好比一个时光机，让你在代码出错时不至于手忙脚乱，能快速回退之前的历史版本。类似的工具还有SVN而GitHub是一个代码托管网站，背后使用Git作为版本管理工具（而非svn）。主要服务是将你的项目代码托管到云服务器上，而非存储在自己本地硬盘上。git上传代码到github远程仓库1、在Githu

2021-04-01 20:34:01 152

weixin_46031116的博客