- 博客(42)
- 收藏
- 关注
RSS订阅原创 vue 获取动态元素高度--采坑
页面中搞一个区域用来scroll列表，所以必须要获取scroll-wrap的高度，于是想尽办法获取swipe、navbarBox的高度<div v-if="data[column]"> <div class="columnPage" v-for='(item,index) in data' v-show='column == index'> <div c...
2020-03-30 15:06:22
3960
转载 div文字溢出可滑动，不出现滚动条
<div>超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度...
2020-03-30 14:36:55
1205
转载 vue前端开发--图片查看大图插件 vue-photo-preview
使用方法安装npm install vue-photo-preview --save引入配置# 引入import preview from 'vue-photo-preview'import 'vue-photo-preview/dist/skin.css'Vue.use(preview)直接使用//在img标签添加preview属性 preview值相同即表示为同一组&l...
2020-03-30 14:07:46
655
原创 mapState的使用（常用）
mapState作用：可以辅助获取到多个state的值怎么使用？1.在.vue组件中引入,在js块中引入import { mapState } from 'vuex'2.在.vue组件中computed下定义一个对象computed：{...mapState([ //mapState本是一个函数，在里面写一个数组，记得加...‘num’ ， //存的数据‘id’]...
2020-03-30 11:55:59
8034
1
转载 uniApp实现navigateBack返回修改前一页面数据（H5、APP、小程序
前言：官方有推荐用VUEX实现此类需求的，但是目前不太了解，先分享下目前的解决方案，之后熟悉了再更新下。1、H5和APP/小程序的解决方案是不一样的，虽然都是通过getCurrentPages，但打印出来的前一页面的结构是不同的。2、如果有问题的话打印prevPage仔细看下。H5getAddress(e){ if(this.isGetAddress == 1){ let inde...
2020-03-30 11:23:20
927
原创 Vue router的钩子函数
Vue router的钩子函数在路由跳转的时候，我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。定义：路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。总体来讲vue里面提供了三大类钩子，两种函数1、全局钩子2、某个路由的钩子3、组件内钩子两种函数：1、Vue.beforeEach(function(to,form,next){}) /在跳...
2020-03-30 11:20:18
1422
1
转载 div 中内容上下居中
情形一：div限高，内容长度限一行<style>.v-align { margin: 0 auto; width: 200px; height: 80px; text-align: center; line-height: 80px; border: 1px solid #ddd;}</style><!-- html --><div...
2020-03-27 15:06:34
2025
原创 HTML中footer固定在页面底部的若干种方法
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>footer需要固定在底部</title> <style type="text/css"> html,body{fo...
2020-03-27 14:57:08
1862
1
原创 iviewui和element中日期选择控件少一天问题
iviewui中日期选择控件DatePicker<DatePicker v-model="studentObj.birthDate" type="date" placeholder="选择日期"></DatePicker>//修改为<DatePicker v-model="studentObj.birthDate" type="date...
2020-03-27 14:20:20
253
原创 组件内的导航守卫---
const Foo = { template: `...`, beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当守卫执行前，组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当前路由改变...
2020-03-27 14:02:17
195
转载 formData 上传文件，解析为二进制文件上传
使用FileReaderAPI我个人更喜欢ES7方法。但是语法花了我一段时间才习惯。使用ES5function getBinaryFromFile(file, cb) { const reader = new FileReader(); reader.addEventListener("load", cb.bind(this, reader.result)); re...
2020-03-27 10:35:55
2007
原创 vue中页面提示是否保存再离开
mounted(){ window.addEventListener("beforeunload", this.actBeforeUnload,false); }, //离开新增页、编辑页记得解绑，否则其他页面中也会出现提示的效果 beforeDestroy() { window.removeEventListener("beforeunload",this....
2020-03-27 10:26:58
5071
2
转载 css3 object-fit详解
图片变形的问题，最后通过object-fit: cover完美解决了。这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能。object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。您可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。object-fit理解CSS3 background-size出现...
2020-03-27 09:51:19
458
原创 js-es6数组的方法find()、findIndex()、 forEach() 、map()、filter()、reduce()、some()、every()
1.js-es6的find()和findIndex()的使用–find()主要是在数组–对应属性–对应的对象var stu =[ { "name": "张三", "gender": "男", "age": 20 }, { "name": "王小毛", "gender": "男", ...
2020-03-26 10:19:04
1293
转载 js删除数组里的某一项
1、首先求出删除的一项在数组中的索引Array.prototype.indexOf = function(val) { for (var i = 0; i < this.length; i++) { if (this[i] == val) return i; } return -1;}; //然后用arr固有的方法splice删除这一项Arra...
2020-03-26 10:10:16
5182
2
原创 vue 的点击事件怎么获取当前点击的元素
<button @click = “clickfun($event)”>点击</button>methods: { clickfun(e) { // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素 }}...
2020-03-26 09:58:08
1642
转载 文字超出...展开
<div id="hutia"><script type="text/javascript">(function(){var o = document.getElementById("hutia");Subt(o);})();function Subt(obj){var s = obj.innerHTML;var p = document.createEl...
2020-03-25 15:13:32
151
原创 文字超出...显示
<p class="arttextoverflow"></p>//只能一行展示，展示不全用...显示.arttextoverflow{ width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: e...
2020-03-25 15:04:19
137
原创 CSS自动换行、强制不换行、强制断行、超出显示省略号
一、P标签是默认是自动换行的，因此设置好宽度之后，能够较好的实现效果 但是对于一串的数字或者单词却不具有这样的格式优势二、各种方式 强制不换行：p { white-space:nowrap; } 自动换行：p { word-wrap:break-word; } 强制英文单词断行：p { word-break:break-all; }*注意：设置强制将英文单词断行，...
2020-03-25 14:58:35
393
原创 git如何新建分支
切换到基础分支，如主干git checkout master2）创建并切换到新分支git checkout -b pandagit branch可以看到已经在panda分支上3)更新分支代码并提交git add *git commit -m “init panda”git push origin panda4)在git代码管理界面经可以看到panda分支了，成功~~...
2020-03-25 14:43:55
85
原创 git pull 冲突处理失败返回到pull之前的状态（版本回退）
修改完代码commit之后，执行git push之后提示需要先拉取，git pull 之后有冲突，但是由于种种原因冲突解决失败，这时候想回到pull之前的状态，执行如下两步即可：git reflog执行结果如下所示：找到自己需要回退的HEAD执行如下命令：git reset --hard HEAD@{0}//或者git reset --hard 337b5a0...
2020-03-25 14:41:39
8229
转载 HTML5 Web 存储（localStorage和sessionStorage）
HTML5 Web 存储是本地存储，存储在客户端，包括localStorage和sessionStorage。HTML5 Web 存储是以键/值对的形式存储的，通常以字符串存储。localStoragelocalStorage生命周期是永久，除非主动清除localStorage信息，否则这些信息将永远存...
2020-03-25 14:31:41
129
原创 img标签的onerror事件（应用以及注意事项）
情景：img标签中的src图片加载失败，原来的图片位置会出现一个碎片图标，用户体验会下降。使用img的onerror事件，当图片不存在时，将触发 onerror，而 onerror 中又为 img 指定一个logoError.png 图片。也就是说图片存在则显示logo.png，图片不存在将显示 logoError.png。解决方法一、图片路径错误使用默认图片站位：使用1：html开发中&...
2020-03-25 14:29:13
9308
2
转载 HTML5 Web 存储（localStorage和sessionStorage）
HTML5 Web 存储是本地存储，存储在客户端，包括localStorage和sessionStorage。HTML5 Web 存储是以键/值对的形式存储的，通常以字符串存储。localS...
2020-03-25 11:44:05
145
转载 git命令log与reflog的比较
用git命令，想看到自己的操作记录，则可以使用log与reflog，它两个的区别如下：1.git log 命令可以显示所有提交过的版本信息例如 如果感觉太繁琐，可以加上参数 --pretty=oneline，只会显示版本号和提交时的备注信息2.git reflog 可以查看所有...
2020-03-25 11:40:49
186
原创 vue v-if是组件复用（组件内容没有清空）
用 key 管理可复用的元素Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换：<template v-if="loginType === 'username'"> <label>Username</label> <input...
2020-03-16 15:27:26
2849
1
原创 vue Class 与 Style 绑定
表达式结果的类型除了字符串之外，还可以是对象或数组。(一)绑定 class（1）对象语法<div v-bind:class="{ active: isActive }"></div>active 这个 class 存在与否将取决于数据属性 isActive 的 true/false。可以传入更多属性来动态切换多个 class。此外，v-bind:class 指令...
2020-03-16 15:06:07
83
原创 vue 计算属性computed 和侦听器
计算属性的写法计算属性写法一：computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } }这里我们声明了一个计算属性 reversedM...
2020-03-16 14:45:27
92
原创 vue 指令修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：<form v-on:submit.prevent="onSubmit">...</form>...
2020-03-16 14:25:18
351
原创 vue 动态绑定属性名、事件名
从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：动态参数绑定属性名：<a v-bind:[attributeName]="url"> ... </a>attributeName 是一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。Vue 实例有一个 data 属性 attributeName...
2020-03-16 14:19:05
5492
原创 Js数组里删除指定的元素（不是指定的位置）
首先可以给js的数组对象定义一个函数，用于查找指定的元素在数组中的位置，即索引，代码为：Array.prototype.indexOf = function(val) { for (var i = 0; i < this.length; i++) { if (this[i] == val) return i; } ...
2020-03-13 10:16:16
5583
转载 vue自定义组件(通过Vue.use()来使用)即install的使用
在vue项目中，我们可以自定义组件，像element-ui一样使用Vue.use（）方法来使用，具体实现方法：1.首先新建一个Cmponent.vue文件// Cmponent.vue<template> <div> 我是组件 </div></template> <script> exp...
2020-03-13 10:12:44
545
转载 Mui 长按保存图片
必须先要 引入 mui.js，然后参考具体代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-s...
2020-03-13 09:47:43
362
转载 Vue+mui实现图片的本地缓存
const menu = { state: { products: {}, GLOBAL_CONFIG:GLOBAL_CONFIG['GLOBAL_CONFIG'] }, mutations: { get_product: function (state, products) { //商品列表 state.products = p...
2020-03-13 09:44:24
368
原创 .gitignore详解
今天讲讲Git中非常重要的一个文件——.gitignore。一般来说每个Git项目中都需要一个“.gitignore”文件，这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中。这个文件的内容是一些规则，Git会根据这些规则来判断是否将文件添加到版本控制中。下面我们看看常用的规则：/mtk/ 过滤整个文件夹*.zip 过滤所有.zip文件/mtk/do.c 过滤某个具体文件...
2020-03-11 09:42:41
786
转载 vue路由传参的三种基本方式
现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。父组件中：<li v-for="article in articles" @click="getDescribe(article.id)">methods：方案一： getDescribe(id) {// 直接调用$router.push 实现携带参数的跳转 this.$...
2020-03-11 09:32:09
99
转载 vue的model选项和自定义组件的v-model
前言vue-property-decorator,@Model选项，也就是vue2.2中新增的实例model选项。原来只知道v-model属性实现双向绑定，对这个model选项突然不是很理解。所以这里 重新对v-model和自定义组件的v-model做一个回顾，加深印象后，再去理解model选项到底是做什么的，有什么作用。vue中的v-model指令实现了表单的双向绑定，这是官网的一个栗子：...
2020-03-09 11:59:47
2000
转载 vue h5页面长按保存为图片
npm install html2canvas -d<template> <div class="index"> <div id="captureId" class="capture" v-show="firstFlag"> <ul> <li>itemi</li>...
2020-03-03 15:36:04
2354
转载 MUI长按图片进行下载
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=n...
2020-03-03 15:33:59
327
原创 application/x-www-form-urlencoded和application/json格式转换
我发送出去的数据发现后台接收不到，查找了一下原因，发现需要form-data的数据后台才可以获取到。于是改成了form-data格式，成功了，后台获取到数据了，有点小激动，但是随即发现发送的数据格式出现了问题，发送的本来是json，但是到了后台那边变了个样，去axios的官方文档上面查找原因，发现需要form-data的数据无法发送json格式的，需要对json进行qs.stringify()才可...
2020-03-03 15:32:26
7522
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人