qq_24612793的博客

原创 vue-cli过滤器filter全局引入

1.新建一个filter文件夹 > index.js,详情看图2. 然后在main.js里引入filtersimport * as filters from './filters' // global filters// register global utility filters.Object.keys(filters).forEach(key => { ...

原创 vue鼠标划过移入移出触发函数

<ul>> <li class="" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)"></li></ul>methods:{ // 鼠标移入加入class changeActiv

原创 vue获取dom元素

<div class="firstOpeart" style="display: block;" @click="addStyle" ref="openText"> <span class="opeart">展开</span> </div>methods:{ addS

原创 vue input,textarea失去焦点调用函数方法

<input type="number" class="num" value="1" @blur.prevent="changeCount()"> methods:{ changeCount:function(){ },}  

原创 Vue实现动态显示textarea输入文字数量

效果图 <div class="applyInput cb mt3"> <textarea placeholder="请输入" maxlength="500" @input="descInput" v-model="desc" /> <span class="numberV">{{tx

原创 vue v-for循环回来的数据动态绑定id

 代码效果图!!!!!<ul><li v-for="(site,index) in sites" :key="index" :id="forId(index)"> <span class="channel-li-li-border"> <span class="firstLevel">

原创 git 强制 覆盖

npm install -g vue-cli 2.安装vue-cli成功后，通过cd命令进入你想放置项目的文件夹，在命令提示窗口执行创建vue-cli工程项目的命令：...

原创 rem.js

(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; .

原创 swiper自制分页器

函数有jq，使用swiper版本3.4.2 swiperList() { var imgTextId = $("#imgText"); var igtli = imgTextId.find("li"); var _html = ""; igtli.each(function (index) { var title = $(this).attr("data-title"); if (index === 0)...

原创 vue element自制分页器

html <div v-for="(item, index) in carouseData" :key="index"> <span @click="showstep(index)" :class="carouseId == item.id ? '样式1' : '样式2'" >{{ item.title }}</span .

原创 vue ie swiper 空白报错不支持语法

降低swiper版本至"swiper":"^3.4.2",原来的版本太高ie不支持

转载 Cannot read property ‘slice‘ of undefined“ found in

[Vue warn]: Error in render: "TypeError: Cannot read property 'slice' of undefined" found in在页面中使用slice, 页面报错，报错原因 是由于数组对象未定义或为null 引起的，所以查看获取数据的接口是否请求到了数据。因为加载顺序（生命周期）的问题导致先执行的时候为空，做个空数据就好了(typeIdPro.sysqalist || '')...

原创 文本框内容复制到excel按列显示

var s = element.ppp_user + “\t” + element.ppp_pwd + “\n”;数据分隔符用\t

原创 vue中使用定时器setInterval

vue中使用定时器setIntervalthis.timer=setInterval(this.fetchData,1000);clearInterval(this.timer);beforeDestroy(){clearInterval(this.timer);},

原创 Element的el-cascader级联选择器组件获取选中的label

给级联器ref=“myCascader”方法一：给cascader组件赋值一个别名ref=“myCascader” （注意：2.9.2 版本之前可用的方法)1 this.$refs[‘myCascader’].currentLabels方法二：在 2.9.2 后官方新增了 getCheckedNodes() 方法1 this.$refs.myCascader.getCheckedNodes()[0].pathLabels...

原创 el-cascader省市区三级联动 

https://github.com/Plortinus/element-china-area-datael-cascader省市区三级联动

原创 vue搜索关键词高亮前端效果

一、实现效果二、html(简单版)内容要用v-html展示 <div v-for="(item, index) in searchRe" :key="index" v-show="showList" style="margin-bottom:38px" > ...

原创 使用eventBus.$on事件重复执行问题

一：问题在写移动账户注册的时候有一个验证会从注册页面A跳转到另一个B去验证，验证完之后拿到验证码再次回到页面A并且传回拿到的结果再请求接口，结果跳回A的时候发现接口第一次请求一次，第二次求情两次，以此类推二：原因只要页面没有强制刷新，存在组件切换，eventBus.$on方法会被多次绑定，造成事件多次触发，这个跟vue寿命周期有关，eventBus.$on方法需要手动清除三：解决方...

原创 vue+element项目部署到线上，icon图标不显示，解决方案

build里边utils.js加publicPath if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:'../../' }) } el...

原创 css3图片放大缩小过度动画

（1）需要加动画的节点 .lucky_h_img { animation: mymove 3s infinite; -webkit-animation: mymove 3s infinite; /*Safari and Chrome*/ animation-direction: alternate; /*轮流反向播放动画。*/ animatio...

原创 vue文字无缝滚动插件vue-seamless-scroll

（1）安装执行命令npm install vue-seamless-scroll --save（2）在main.js文件里面引入使用：import scroll from 'vue-seamless-scroll'Vue.use(scroll)（3） 实例<template> <vue-seamless-scroll :data="listDat...

原创 vue 使用clipboard实现移动端一键复制

(1)执行命令,我是镜像npm cnpm install clipboard --save(2) main.js中加import clipboard from 'clipboard';Vue.prototype.clipboard = clipboard;(3) .vue文件 <yd-cell-group> <yd-cell-...

原创 如何用CSS将select/option文本居中或居右对齐

1) 简单点的使用padding使其“看上去”对齐适合宽度固定的场合，只要padding合适，效果还是不错的select { padding: 0 0 0 20px;}2） 居右对齐：　可以使用rtl属性来来控制，<select dir="rtl"> <option>Foo</option> <op...

原创 ElementUI/vue router连续点击多次路由报错解决方法

NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "Navigating to current location ("/produce/delivery-order") is not allowed", stack: "Error↵at new Navig...

原创 gitlab修改提交项目命令

1. git add . ("."是必须要的)2. git commit -m "some word"3. git push -u origin master

转载 淘宝镜像npm安装

http://npm.taobao.org/

原创 安装cnpm后运行报cnpm : 无法加载文件 C:\Users\yizon\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本

一：安装cnpm后运行报cnpm : 无法加载文件 C:\Users\yizon\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本安装cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org安装完成后报错：无法加载文件 C:\Users\yizon\AppData\R...

原创 前端代码之点击弹出qq客服

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>联系我们</title></head><body><center><a href="tencent://message/?uin=填你自己QQ号&Si...

原创 滑动图片背景视觉差效果纯css实现

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...

原创 移动端页面点击背景高亮问题解决方案

给被点击的div加一段css-webkit-tap-highlight-color: transparent;

原创 vue写的tab切换函数

 &lt;li v-for="(subGroup, index) in group.dataList" :key="index" v-on:click="tab(index)"&gt; &lt;span&gt;{{ subGroup.NAME }}&lt;/span&gt; &lt;/li&gt;&lt;ul v-

原创 JQ播放和暂停HTML5视频

&lt;script&gt; $('video').click(function(){ if($(this).hasClass('pause')){ $(this).trigger('play'); $(this).removeClass('pause'); $(this).addClas...

原创 使用百度地图报错 Uncaught TypeError: Cannot set property 'innerHTML' of null

input下边少写了容器&lt;div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"&gt;&lt;/div&gt;  

原创 解决边框颜色渐变时，border-radius失效的问题

&lt;span class="price_f"&gt;&lt;span class="price_f1"&gt;￥183&lt;/span&gt;&lt;/span&gt;.price_f{display: inline-block;width:55px;height:22px;line-height:22px;text-align: center;color: #cccccc;fo...

原创 vue-cli搭建脚手架(是需要有一定基础的,不包括node等安装)

1.cd到你要建立文件的目录下:npm install -g vue-cli(如果是淘宝镜像命令开头就都加c) 2.依赖webpack建立项目: vue init webpack3.使用vscode打开文件,ctrl+~这个键调出命令行终端输入npm install4.运行   npm run dev 饥渴...

原创 webstorm 2018 激活破解方法

破解有几种方式,但是个人觉得这种比较好用也比较简单:希望能帮到需要的人2018破解包下载地址:链接: https://pan.baidu.com/s/1u4b0udgGsAPmAFPMtrB9CQ 密码: 1adj2017破解包下载地址链接: https://pan.baidu.com/s/1zZloprodM_aC1n8dXVN9AQ 密码: jqgd第一步:将补丁复制到安装目录的b...

原创 VUE背景图片路径拼接

&lt;a class="new_onLine_one" v-for="(brand,index) in imgList " :key="index"&gt; &lt;div class="fl rank_img" v-bind:style="{ 'background-image': 'url(' + brand.src+ ')' }"&gt; &am

原创 vue验证码倒计时

&lt;li&gt;&lt;input class="yzm" type="text" placeholder="请输入短信验证码"&gt; &lt;input v-show="sendAuthCode" type="button" class="sends" id="send1&q

原创 vue2 设置router-view默认路径

原创 vue购物车价格计算全选

&lt;template&gt;&lt;div class="main_contain"&gt; &lt;header class="aui-header-default aui-header-fixed "&gt; &lt;a href="javascript:history.back(-1)" class="aui-header-item&quot