Lucky铂爵-优快云博客

1. 先注册一个自定义指令import Vue from ‘vue’;Vue.directive(‘LimitInputNumber’, {bind(el) {////do something},});2.使用自定义指令<el-input v-limit-input-number />3.指令内部校验onkeypress 事件会在键盘按键被按下并释放一个键时发生可在事件触发时检测若输入的值不为数字，直接返回 falesVue.directive('LimitInputN

2022-05-19 09:53:08 4905

原创 Vue页面实现打印功能

实现打印功能，需要安装一个插件vue-print-nb，使用方法如下1）安装全局的插件npm install vue-print-nb -S2）在main.js中注册import Print from 'vue-print-nb'Vue.use(Print)3）在页面中使用<template> <div>  <div id="printMe"> <p>今天的天气真

2022-05-18 16:27:09 7129 1

原创限制element的el-input输入框只能输入数字和小数方法

<el-input v-model="value" type="text" oninput="value=value.replace(/[^\d.]/g,'')" />

2022-05-11 17:49:05 2321 4

原创 render 循环创建span

render: (h, params) => { let that = this var arr = ['编辑', '生源管理', '分配学号', '分班', '学号归档', '班级归档'] return h('ul', arr.map(function(item, index) { return h('span', { domProps: { innerHTML: item, }, .

2022-04-15 15:15:10 462

原创 element 多级表头封装

效果：<el-table :data="tableData" max-height="600" size='mini'> <el-table-column prop="day" label="" width="180" align="center"> </el-table-column> <el-table-column label="站点" align="center"> <el-table-column :label="

2022-03-16 09:00:21 927

原创 vue 获取一周时间

js getDataArea(currentTime) { var currentDate = new Date(currentTime) var timesStamp = currentDate.getTime(); var currenDay = currentDate.getDay(); var weeks = ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"]; var dates = []; fo

2022-03-01 10:14:18 1014

原创 vue使用Moment插件格式化时间

使用npm命令安装momentnpm install moment --save在main.js文件里引用momentimport Vue from 'vue'import Moment from 'moment'// 定义全局时间戳过滤器Vue.filter('formatDate', function(value) { return Moment(value).format('YYYY-MM-DD HH:mm:ss')})// 定义全局时间戳过函数Vue.prototype.

2021-12-08 14:49:07 909

原创 element calendar封装样式

效果 <el-calendar v-model="value" id="calendar"> <template slot="dateCell" slot-scope="{data }"> <div style="position: relative"> {{ data.day.split("-").slice(2)[0] }}

2021-11-25 15:06:22 279

原创 css 优惠券样式

<template> <view class=""> <view class="box1"> 优惠券 <view class="leftsmall"></view> <view class="rightsmall"></view> </view> </view></template><style lang="less" scoped> .b.

2021-04-16 13:52:00 542

原创 vue 父子组件之间访问 this.$refs 和 this.$parent

项目结构父组件 dataPtitle:'我是父组件'子组件 dataChildTitle:'我是子组件'父组件中<build-modal ref="child"></build-modal> components: { BuildModal } mounted() {console.log(this.$refs.child.ChildTitle) //我是子组件}子组件中mounted() {console.log(this.$pa

2021-03-26 11:55:23 614

原创浅拷贝和深拷贝的理解

let arr1 = { a: 1, b: [1, 2, 3], c: '小三', d: new Date() } let arr2 = {} arr2 = arr1 //浅拷贝 arr2.a = 5 console.log(arr2, arr1);浅拷贝值的变化相互影响 let arr1 = { a: 1, b: [1, 2, 3], c: '小三', d: new Date() } let arr2 = {} arr2 = JSON....

2021-03-23 14:52:53 169

原创使用nvm管理多个不同版本的nodeJS之安装成功nodeJs之后使用npm报错的问题

使用nvm管理多个不同版本的nodeJS之安装成功nodeJs之后使用npm报错的问题

2021-03-17 18:22:34 361

原创 windows下如何使用两个版本的nodejs

C:\Users\holyhui>nvm listNo installations recognized.因为是第一次安装，所以并没有安装任何版本的。

2021-03-17 17:32:03 482

原创时间戳转日期格式

formatDateTime(date) { var y = date.getFullYear(); var m = date.getMonth() + 1; m = m < 10 ? ('0' + m) : m; var d = date.getDate(); d = d < 10 ? ('0' + d) : d; var h = da...

2021-02-04 15:26:17 94

原创 vue中实现全屏功能

安装全屏插件npm i screenfull --save页面引入import screenfull from 'screenfull';html<template> <div class="hello"> <div class="full-screen" @click="fullScreen()">{{ fullscreen ? '全屏' : '取消全屏' }}</div> <div id="data-screen"

2021-01-19 11:00:29 846

原创 vue-ls储存插件的使用

安装npm/cnpm install vue-ls --save使用在main.js引入import Storage from 'vue-ls'const options = { namespace: '', // key键前缀 name: 'ls', // 命名Vue变量.[ls]或this.[$ls], storage: 'local' // 存储名称: session, local, memory}Vue.use(Storage, options);页面中使用this

2021-01-14 16:48:54 1703

原创 router-link补充(路由切换高亮等)

我们知道<router-link>中，有一个属性:to，用于指定跳转的路径。<router-link>还有一些其他属性：tag:tag可以指定<router-link>之后渲染成什么组件，比如下面的代码会被渲染成一个<button>元素，而不是<a> <router-link to="/home"

2021-01-09 16:56:17 528 1

原创 js生成一个特定范围内的随机数

const genRandom = (min, max) => (Math.random() * (max - min + 1) | 0) + min

2021-01-09 16:35:12 516

原创循环获取年、月、日、周（天数可控）

weekDate() { //获取周数据 var myDate = new Date(); // hehe myDate.toLocaleDateString(); var month = myDate.getMonth() + 1; var time = myDate.getFullYear() + '年' + month + '月' + myDate.getDate() + '

2020-12-29 15:25:23 503 2

转载百叶窗效果 html+css

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ ma.

2020-12-22 14:31:31 368

转载 3D立体相册

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { .

2020-12-22 14:29:56 210

原创最新数组方法（包括es6）

1 arr.push() 从后面添加元素，返回值为添加完后的数组的长度let arr = [1,2,3,4,5]console.log(arr.push(5)) // 6console.log(arr) // [1,2,3,4,5,5]2 arr.pop() 从后面删除元素，只能是一个，返回值是删除的元素let arr = [1,2,3,4,5]console.log(arr.pop()) // 5console.log(arr) //[1,2,3,4]3 arr.shif

2020-11-24 10:44:09 613 1

原创 ES6快速删除数组中指定元素的方法

1.arr.find():查找出第一个符合条件的数组成员，并返回该成员，如果没有找到就返回undefine let arr = [23,40,50] let res = arr.find((val,index,arr)=>{ return val >30 }) console.log(res) //返回：402.arr.findIndex() :找到的是位置，找不到返回 -1 let arr = [23,40,50] let res = arr.findIndex((val,

2020-11-23 17:42:40 911

原创 uniapp 简单的ToDoList

<template> <view class="content"> <view class="todo-header">  <view class="todo-header_left"> <text class="active-text">{{ text }}</text> <text>{{ listData.length }}条</text&g

2020-11-13 16:13:32 1415 1

原创 http的响应码及含义

1xx(临时响应)100: 初始的请求已经接受，客户应当继续发送请求的其余部分101：服务器将遵从客户的请求转换到另外一种协议2开头：（请求成功）表示成功处理了请求的状态代码200：（成功）服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。201：（已创建）请求成功并且服务器创建了新的资源202：（已接受）服务器已接受请求，但尚未处理203：（非授权信息）服务器已成功处理了请求，但返回的信息可能来自另一资源。204：（无内容）服务器成功处理了请求，但没有返回任何内容205：（重置

2020-11-06 17:51:30 2015

空空如也

空空如也