- 博客(64)
- 资源 (2)
- 问答 (8)
- 收藏
- 关注
RSS订阅原创 vue中预览docx、xlsx、pptx、pdf
我这里多了个showPreview用来处理ppt的预览，因为他原生的ppt预览是增加一个弹窗，我需要当前页面展示，样式不符合要求，我就修改了,\node_modules\ranui\dist\components\preview\index.js 里对应第一个文件。前言：其实本来是要做全类型文件预览的，但是一直找不到合适的doc,xlx,ppt预览插件。要是有可以使用的，可以评论推荐给我。好像是pdf在预览时样式很奇怪：所以pdf我是通过ifream进行预览。我使用的node版本：v18.19.1。
2024-04-11 17:47:07
408
原创 瀑布流布局
瀑布流布局：瀑布流，又称瀑布流式布局，是比较流行的一种页面布局，视觉表现为参差不齐的多栏布局。类似淘宝京东等购物网站，商品因展示类型不同，高度不同，可滚动加载。一次性生成，不需要再次增加，排序顺序由上倒下，由左到右。
2024-04-11 16:16:39
338
原创 vue监听键盘输入，实现多个＜input＞接替输入
要实现一个类似手机上逐个输入验证码的组件，要求是输入一个数字自动跳转到下一个input，并且在重新输入时可以直接替换之前的数字，不用先删除，且逐个重新输入<html> <div v-for="(k,i) in list" :key="k.i"> <input type="text" class="split-input" v-model="k.value" @input="@input(item,i)" maxlength="2" ><span&g.
2021-08-20 10:54:26
451
原创 vue3使用计算属性代替过滤器，实现对显示文字字数的限制
template<template> <div> <span :title="item.name">{{sliceStr('无论多少字只显示5个字',5)}}</span> </div></template>scriptimport {computed} from "vue"export default { setup(props,context){ cons.
2021-07-28 14:26:40
731
原创 js中的sort方法对数据处理
回顾到js中 sort()，sort()方法是最强大的数组方法之一。1.sort（）方法以字母顺序对数组进行排序：let arr = ['aa', 'ab', 'bb', 'cc', 'cd', 'cs', 'ac', 'ad']document.getElementById("square").innerHTML = arr;myFunction()function myFunction() { arr.sort(); document.getElementById("squ..
2021-07-22 10:43:07
257
原创 Es6获取未知函数参数个数的方法
function add(a,b){ 'use strict' if(a == 0){ throw new Error('This is error'); } return a+b;}console.log(add.length);这时控制台打印出了2，但是如果我们去掉严谨模式，并给第二个参数加上默认值的话，这时候add.length的值就变成了1， 也就是说它得到的是必须传入的参数。...
2021-07-21 13:40:44
383
原创 ES6中的常用方法
字符串模版${aaa}字符串查找let STR='这句话';let talk = '这是一段话，这句话里面包含了两句话，';document.write(talk .includes(STR));//显示true//判断开头是否存在：talk .startsWith(STR);//判断结尾是否存在：talk .endsWith(STR);复制字符串document.write('复制三次|'.repeat(3));类型判断1.判断是否为数字可以
2021-07-21 13:30:51
641
原创 通过扩展运算符解决赋值影响问题
我们先用一个例子说明，我们声明两个数组arr1和arr2，然后我们把arr1赋值给arr2，然后我们改变arr2的值，你会发现arr1的值也改变了，因为我们这是对内存堆栈的引用，而不是真正的赋值。let arr1=['11','22','33'];let arr2=arr1;console.log(arr2);//显示11,22,33arr2.push('44');console.log(arr1);//显示11,22,33,44可以利用对象扩展运算符简单的解决这个问题，现在我们对代码进行
2021-07-21 10:40:16
170
原创 ES6变量的解构赋值
数组解构letl [a,b,c]=[1,2,3];等同于let a=0;let b=1;let c=2;解构的默认值：解构赋值是允许你使用默认值的，先看一个最简单的默认是的例子。let [a,b="bb"]=['aa',undefined];console.log(a+b); //控制台显示“aabb”let [a,b="bb"]=['aa',null];console.log(a+b); //控制台显示“aanull”现在我们对默认值有所了解，需要注意..
2021-07-21 10:26:33
115
原创 vue多级组件传值
const app = Vue.createApp({ data(){ return {house:'爷爷1'} }, provide:{ newHouse:'爷爷2' }, template: ` <div>此处显示爷爷1</div> <child :house="house" /> `})然后儿子组件不用作任何更改，直接在孙子组件里...
2021-07-20 10:11:21
754
原创 vue动态组件
component 元素可用来挂载不同的组件；使用 is 来动态挂载组件，注意要使用 v-bind，也就是 :is 。<button @click="blank==aa?blank='aa':blank='bb'"></button><component :is="blank"></component>组件一：const aa = {template:'<div>组件一</div>'}组件二：const bb = {te.
2021-07-20 09:31:46
48
转载 处理js加减乘除时出现多位小数的问题
https://blog.csdn.net/qinzongjian/article/details/84815296 //加法 accAdd(arg1,arg2){ let r1,r2,m; try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0} try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0} m=Math.pow...
2021-07-19 13:16:51
189
原创 使用vscode图形化界面创vue3.0项目
先安装vue-cli，cmd打开终端vue --version输入检测版本指令,检测vue版本@vue/cli 4.5.6。如果你的版本低于这个，可以再使用npm install -g @vue/cli进行安装安装过程中如果你之前安装了较早版本的cli可能会出现安装不上的可能就可以使用npm uninstall -g @vue/cli 或 yarn global remove @vue/cli先卸载较早版本如果过程中还出现其他错误，可是尝试更新最新版的node...
2021-07-02 09:35:31
1704
原创 js时间角度计算逻辑，7点15分的夹角是多少?
<template> <div> {{timeResult}} </div></template><script> export default { data() { return{ hour:7, minute:15 } }, computed:{ timeResult() { let b = this.hour*30+this.minute*0.5-this.minute*.
2021-05-19 09:32:51
356
原创 vue在uni-app递归组件的使用
vue/uni-app微信小程序是可以使用递归组件的使用方法和在vue中不一样，不能直接使用name引入，需要在组件中再次引用这是我在components下定义的组件managerListBox.vue注：在递归引用的时候要增加跳出递归的判断，不然会报错v-if=""<template> <view > <view class="carrierList" v-for="(item,index) in managerList" :key="item.id"
2021-05-14 16:48:37
1928
原创 纯css绘制简易对话气泡
<body> <div class="curType blockCenter" > <p>绘制简易气泡</p> <div class="triangle"></div> </div> </body><style> p{ box-shadow: 2px 1px 18.27px 2.
2021-03-27 16:18:20
148
1
原创 纯css绘制一个倒置的正三角
<body> <div class="triangle"> </div> </body><style> .triangle { border-left: 23px solid transparent; border-right: 23px solid transparent; border-bottom: 40px solid lightblue; width: 0px; height: 0px;..
2021-03-27 16:14:55
262
1
原创 常用布局及定位
相对定位1. 相对定位会使元素提升一个层级2. 相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素绝对定位1. 绝对定位会使元素提升一个层级2. 绝对定位会改变元素的性质 内联元素变成块元素 块元素的宽度和高度默认都被内容撑开...
2021-03-24 09:28:03
148
原创 vue-find()
Find用来遍历查找数组元素，当找到符合条件的元素时，直接返回。所以Find元素只会返回符合条件的第一个元素。navigationList:['大学1','大学2','大学3','大学4','大学5']let newArr=[]newArr =this.navigationList.find(item=>item=='大学2')console.log(newArr)...
2021-03-19 11:26:08
2518
原创 pug在vue中的序列写法
ul - var n = 0 while n < 4 li= n++ ul - for (var x = 0; x < 3; x++) li itemol - var list = [1,2,3,4,5,6] each item in list li= itemhtml写法<ul> <li>0</li> <li>1</li> <li>2</li&g.
2020-10-31 11:05:55
120
原创 css常用居中总结
1.块级元素嵌套居中（实现带下划线的文本居中）<style> .div1 { width: 100%; } .div2 { width: 15%; margin: 0 auto;/* //使div2在div1的中间显示 */ text-align: center;/* //让文本在横线中间 */ } .ll { border-bottom: 1px solid black; }</style></head><body>
2020-10-21 15:29:35
80
原创 css实现圆角梯形
代码及实现效果如下<style type="text/css"> .text{ width: 80px; height: 80px;/* 宽高 */ background-color: brown;/* 颜色 */ border-radius: 8px;/* 设置圆角 */ transform: perspective(8px)scale(1.1, 1.3) rotateX(5deg); /* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴.
2020-10-20 15:20:51
9613
2
原创 let 和 const 命令
Let命令ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。let在for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。for (let i = 0; i < 3; i++) { let i = 'abc'; console.log(i);}// abc// abc// abc上面代码正确运行，输出了 3 次abc。这表明函数内部的变量i与循环变量i不在
2020-10-15 11:17:36
122
原创 Dom对象
dom:document object model:文档对象模型 文档:超文本文档(超文本标记文档) html ' xml对象：提供了属性和方法 模型：使用属性和方法 操作超文本标记型文档 可以使用js里面dom提供的对象,使用这些对象的属性和方法,对标记性文档进行操作; 想要对标记型文档进行操作,首先需要要对标记型文档里面的所有内容封装对象 ; 需要把html里面的标签,属性,文本都封装成对象 想要对标记型文档进行操作,需要解析标记型文档 画图分析,如何使用dom对象解析html 解析.
2020-10-09 13:06:47
64
原创 实现单行文字两端对齐，例如要实现下列单行文字对齐
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style lang="scss" scoped> .line { width: 100%; height: 15px; margin: 5px; } .public { width: 80px; heigh.
2020-09-17 16:56:42
112
原创 css标题样式——绘制中间文字，两边横线居中
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style lang="scss" scoped> .title-center { position: relative; width: 100%; text-align: center; height: 100px; l.
2020-09-17 16:15:27
896
原创 使用css绘制按步骤显示进度条
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style lang="scss" scoped> .top { display: block; background-color: black; margin: 0 auto; width: 600px; margin-.
2020-09-15 15:44:05
459
原创 使用css实现文字颜色渐变显示
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> .number { text-align: center; font-size: 5.5rem; color: #f5ab7c; background-image: -webkit-linear-gradient(b.
2020-09-15 13:36:52
207
原创 仅使用css绘制带边框的圆
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> .circle { float: left; background: #fff; border: 1px solid #3aba6b; position: relative; box-sizing: bord.
2020-09-15 13:33:34
523
原创 DOM 事件修饰符
<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 --><a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 -->&.
2020-09-03 13:26:09
450
原创 webstorm-vue运行相关指令
# 安装依赖$ npm install# 进入项目$ cd your-project-name# 开发版本打包并运行$ npm run dev# 线上环境整个项目打包 生成 dist 可以直接部署到服务器上的文件夹& npm run build# 引入jquery& npm install jquery --save...
2020-09-03 10:28:31
112
原创 v-on学习
v-onVue中提供了v-on事件绑定机制<input type="button" value="按钮" ：title="mytitle + '123' " v-on：click="show">var vm= new Vue({ el:'#app', data:{ msg:'123', mytitle:'自定义标题' }, methods:{//这个methods中定义了当前Vue实例所有可用的方法 show：function(){ aler.
2020-07-21 09:13:31
94
原创 v-bind学习
v-bind用来提供绑定属性的指令，会把后面的内容当做js表达式来解析<input type="button" value="按钮" v-bind：title="mytitle + '123' ">可以被简写为：<input type="button" value="按钮" ：title="mytitle + '123' ">...
2020-07-21 08:53:26
72
原创 v-cloak、v-text、v-html相关理解
v-cloakv-cloak用来解决插值表达式闪烁的问题在data中渲染标签值时，遭遇慢网速环境，网页会在请求未完成时显示出插值表达式<p v-cloak>{{msg}}</p><style> {v-vloak}{ display:none; }<style>使用v-cloak会在请求结束后再显示需要表达的值 。v-textv-text默认v-text没有闪烁问题会覆盖元素中原本的内容，插值表达式只会替换自己的占
2020-07-21 08:46:08
95
原创 js中==与===的区别
简单来说： == 代表相同， ===代表严格相同, 为啥这么说呢，这么理解： 当进行双等号比较时候： 先检查两个操作数数据类型，如果相同， 则进行===比较， 如果不同， 则愿意为你进行一次类型转换， 转换成相同类型后再进行比较， 而===比较时， 如果类型不同，直接就是false.在用wb写js代码时发现写出的if（）语句中==会有黄色警告，在查看网上帖子后，发现是取值不严谨，需修改成严格相同。简单来说： == 代表相同， ===代表严格相同, 为啥这么说呢，这么理解： 当进行双...
2020-07-20 17:15:50
279
原创 vue数据对象
data ：用于定义属性，实例中有三个属性分别为：site、url、alexa。methods ：用于定义的函数，可以通过 return 来返回函数值。{{ }}:数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值。Html使用 v-html 指令用于输出 html 代码。属性HTML 属性中的值应使用 v-bind 指令。 <div v-bind:class="{'class1': use}"> v-bind:class 指令
2020-07-15 16:58:06
192
网路嗅探器源码，大学毕业设计
2020-06-25
怎么实现检验两次密码输入不一样
2019-08-23
为什么无法分页和输出页码，该怎么更改
2019-08-16
查询结果，怎么分页并且显示分页页数，以及分页获取的信息数，代码如何写
2019-08-16
怎样让查不到数据时，返回一个查询失败，代码在哪里加入，怎么写
2019-08-14
代码运行不报错，但是为什么不能更改数据库
2019-08-13
mybatis 怎么实现 insert
2019-08-13
程序不报错，但是无法执行
2019-07-18
TA创建的收藏夹 TA关注的收藏夹
TA关注的人