- 博客(62)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 vue2使用webSocket双向通讯
由于浏览器的资源管理策略会暂停或限制某些资源的消耗，导致前端心跳包任务时效，后端接收不到webSocket心跳主动断开，因此需要使用webworker保持心跳。引入webworker。
2024-03-18 15:14:07
1398
1
原创 js给String原型添加一个属性
要求实现如下代码Object.defineProperty( String.prototype, 'isTiem', { get: function () { return !isNaN(Date.parse(this)) },});let str = "222222222"; console.log(str.isTiem); //falselet str1 = "2021-01-29"; console.log(str1.isTiem); /
2021-01-29 09:08:37
651
原创 iview中tbale树形数据和多选结合使用父节点选中时默认选中子节点
代码<template> <Table row-key="id" :columns="columns16" :data="data12" border @on-select="onselect"></Table></template><script> export default { data () { return { columns16: [..
2020-12-21 16:08:03
1272
1
转载 div水平垂直居中的六种方法
一 ：绝对定位方法：不确定当前div的宽度和高度，采用transform:translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）div{ background:red; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%);}二：绝对定位方法：确定了当前div的宽度，margin值为当前div宽度..
2020-12-15 09:03:50
462
1
转载 cookie session webStorage
一、cookie和sessioncookie和session都是用来跟踪浏览器用户身份的会话方式。区别：1、保持状态：cookie保存在浏览器端，session保存在服务器端2、使用方式：（1）cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。 Co...
2020-12-15 08:47:19
95
1
原创 vue-calendar-component 封装多日期选择组件
实现效果安装vue-calendar-component日历组件cnpm i vue-calendar-component --save //国内镜像引入import Calendar from "vue-calendar-component";export default { components: { Calendar },}封装<template> <div class="x-f"> <Calendar .
2020-12-02 14:05:26
1678
4
原创 justify-content: space-evenly 在移动端部分机型无效
移动端界面布局中使用flex，使用justify-content: space-evenly;样式，在部分机型中无效，使用以下样式替换.container{ display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; //justify-content: space-evenly;
2020-11-25 16:23:10
1268
原创 list 列表单（多）选（uni-app）
<template> <view> <view class="list-checked mb4" v-for="(item , index) in list" :key="index.value"> <view class="list x-bc" @tap="checkboxChange(index)" style="border: 0px;"> <view class="title">[{{ item.ghsdm }}]&a.
2020-11-23 17:25:20
2184
原创 tabs
代码<template> <div class="x-f m-tabs ml24"> <div class="item-tabs" v-for="item in rqtab" :key="item.value" :class="[ item.value == rq_check ? 'on' : '']" @click="tabClick(item.value)"&..
2020-11-23 17:13:07
189
原创 css 输入框角标
效果图代码<div class="y-start item-default-height pl10"> <div class="text-deep laebl-small">渠道</div> <label class="input-width-lg label-input" :class="[qdmc ? 'text-deep' : 'text-plac']">{{.
2020-11-23 17:06:28
295
原创 自定义组件实现v-model(swicth)
父页面<template> <view> <evan-form ref="form" :model="info"> <evan-form-item label="是否是vip：" prop="vip"> <view class="form-input"><s-switch style="float: right;"v-model="info.vip"></s-s
2020-11-12 16:33:32
262
1
原创 VueJs和jQuery
Vue.js是什么？Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方..
2020-10-27 10:52:38
1993
2
原创 watch和computed
computed（计算属性）是自动监听依赖值的变化，从而动态返回内容；watch（监听）是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情。区别computed属性不是data中的属性值，是一个新值，初始化时使用Object.defineProperty方法挂载到vm上；而watch是监听已经存在于data中的属性 computed本质是一个惰性的观察者，具有缓存性，之后依赖的data值变化时，才会变化；watch没有缓存性，数据变化就更新 computed适合与一个数据被多个数据
2020-10-27 10:32:51
199
1
原创 vue生命周期钩子
生命周期钩子 详情 beforeCreate 在数据观测和初始化事件还未开始，VUE实例的挂载元素$el和数据对象都为undefined 可以进行的事件：加loading事件 created 完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来 可以进行的事件：结束loading，请求数据为mounted作准备 beforeMount 在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把d
2020-10-27 10:28:46
178
2
原创 px、em、rem、rpx区别和为什么使用62.5%(摘录)
PXpx像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。PX特点1. IE无法调整那些使用px作为单位的字体大小； 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； 3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。EMem是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。EM特点1. em的值并不是固定的；..
2020-10-27 09:53:21
488
转载 uni-app中不使用scroll-view组件,监听页面滑直底部事件
最终达到的目标效果将要用到监听页面滚动事件:onPageScroll获取节点信息uni.createSelectorQuery()页面<template> <view class="content"> <!--目标节点--> <view class="text-area" id="listArea"> <view class="square" v-for="(v,i) in info" :ke
2020-10-20 09:47:44
2575
原创 vuex 记录
Vuex -- 全局状态管理器Vuex的核心是一个store(仓库),一个‘非凡的全局对象’,store中的状态发生变化时，与之绑定的视图会被重新渲染。因为store中的状态不允许被直接修改，改变store中状态的唯一途径就是显示地提交(commit) mutation。Vuex中有5个重要的感念：State, Getter, Mutation, Action, Module。State：用于维护所有应用层的状态,并确保应用只有唯一的数据源用法:new Vuex.St...
2020-09-22 11:03:20
108
1
原创 VUE中使用echarts
安装npm install echarts -S引入// 引入基本模板const echarts = require('echarts/lib/echarts')// 引入柱状图组件require('echarts/lib/chart/bar')// 引入柱拆线组件require('echarts/lib/chart/line')// 引入提示框和title组件require('echarts/lib/component/tooltip')require('echarts/l
2020-09-08 11:43:00
366
原创 vue-quill-editor富文本编辑器
安装npm install vue-quill-editor -S引入 import { quillEditor } from "vue-quill-editor" import "quill/dist/quill.core.css" import "quill/dist/quill.snow.css" import "quill/dist/quill.bubble.css"使用<template> <div id="wxEditor">
2020-09-08 11:36:55
216
原创 vue使用vue-video-player播放视频
安装npm install vue-video-player --save引入 import {videoPlayer} from 'vue-video-player' require('video.js/dist/video-js.css') require('vue-video-player/src/custom-theme.css')使用<video-player class="video-player vjs-custom-skin" ref="vid
2020-09-08 11:32:30
2177
原创 VUE使用benz-amr-recorder 实现解码、播放
安装npm install benz-amr-recorder引入 const BenzAMRRecorder = require('benz-amr-recorder')使用<template> <div class="wx-voice-div" @click="playVoice(objData)"></template>methods:{ amrPlay(amr,obj){ //播放 this.$se
2020-09-08 11:28:06
3147
转载 vue路由传参的几种方式
1、 this.$router.push进行编程式路由跳转 2、 router-link 进行页面按钮式路由跳转 3、 this.$route.params获取路由传递参数 4、this.$route.query获取路由传递参数 5、 params 和 query 都是传递参数的，params不会在url上面出现，并且params参数是路由的一部分，是一定要存在的 query则是我们通常看到的url后面的跟在？后面的显示参数...
2020-09-01 10:45:28
114
原创 uniapp navigateBack()带参
let pages = getCurrentPages(); let prevPage = pages[pages.length - 2]; //上一个页面 var object={ rqf: this.rqf, rqt: this.rqt}prevPage.$vm.otherFun(object);//重点$vmuni.navigateBack();otherFun:function(option){ this.rqf = option.rqf; this.rqt = op.
2020-08-21 09:16:08
773
原创 vue 常用父子组件通信的几种方式
props //父组件<template> <child :content="message"></child></template><script> import child from './modal/child' export default { components: { child } }</script> //子组件
2020-08-18 10:56:23
688
原创 localStorage 本地存储
/** * 本地存储 * @param {Object} key * @param {Object} value */function setLocalStorage(key, value) { var curtime = new Date().getTime(); // 获取当前时间 ，转换成JSON字符串序列 var valueDate = JSON.stringify({ val: value, timer: curtime });.
2020-08-18 08:59:00
173
原创 iview - form - input 聚焦回车页面刷新
使用form表单时，如果表单中只存在一个input输入框的时候，input聚焦回车会导致页面刷新，解决办法：禁用form提交<Form ref="form" :inline="true" :label-width="100" @submit.native.prevent>
2020-08-14 09:08:27
1069
1
原创 vue自定义指令记录
auth.jsexport function check(authority) { let userInfo = JSON.parse(sessionStorage.getItem('userInfo')); let current = userInfo ? userInfo.buttons: []; return current.some(item => authority.includes(item)); //过滤}index.jsimport {
2020-08-14 08:55:28
148
转载 iview-table-render
<Table highlight-row :columns="columns3" border :data="data1" size="small" ref="table"></Table>input实现双向绑定{ title: '姓名', key: 'name', render: (h, params) => { let self = this; return h('div', [ h('Input', { .
2020-08-14 08:51:56
139
原创 vue - iview 中$parent无法调用父组件方法
vue中说明：this.$parent可以调用父组件的方法，但是在使用iview组件的时候会出现this.$parent找不到方法的报错 <Tabs value="uinfo" style="height: 100%;" @on-click="user_tab_chaneg"> <TabPane label="基本信息" name="uinfo"> <u-info :uid="uid" @cacel="cancel_Modal
2020-08-05 15:33:30
931
原创 Axios用Postman请求,使用x-www-form-urlencoded方式传输
const params = new URLSearchParams(); params.append('key', this.key); params.append('name', this.name); params.append('desc', this.desc); let _that = this; axios.post('https://tsapi.a...
2020-07-16 16:35:55
2130
原创 Vue 实现文件的下载
<Button type="primary" @click="exportMoudle"><Icon type="ios-download-outline"></Icon>下载模板</Button>exportMoudle:function(){ let link = document.createElement('a'); //创建a标签 link.style.display = 'no.
2020-07-07 11:07:14
456
1
转载 js数组合并
var a = [1,2,3];var b=[4,5]a = a.concat(b);console.log(a);//此处输出为 [1, 2, 3 ,4 ,5] ES5写法 var arr1 = [0, 1, 2];var arr2 = [3, 4, 5];Array.prototype.push.apply(arr1, arr2);console.log(arr1)//[0,1,2,3,4,5] ES6写法 var arr1 = [0, 1,...
2020-07-06 14:58:55
69
原创 uniapp 个推（页面代码）
export default { onLaunch: function () { // #ifdef APP-PLUS // 锁定屏幕方向 plus.screen.lockOrientation('portrait-primary'); //锁定 //获取版本信息 this.getVersion(); /* 5+ push 消息推送 ps:使用:H5+的方式监听，实现推送*/ plus.push.addEventListener("cl.
2020-06-24 08:58:34
517
原创 uniapp 热更新
const checkUrl=""; //检测是否更新地址let downServer = "";let totalSize = 0;export const checkUpdate = (wgtVer,lx) => { uni.showLoading({title: '检测版本...',mask: true}); uni.request({ url: checkUrl, method:'GET', success: (result) => { u..
2020-06-24 08:53:56
947
1
原创 vue+iview兼容IE9及以上记录
IE不支持ES6语法安装解码器 npm install --save babel-polyfill //转码器，可以将ES6代码转为ES5代码 修改webpack.base.conf.js entry: { // app: './src/main.js' app: ['babel-polyfill', './src/main.js'] //兼容IE运行 }, 在main引用 import 'babel-polyfill' 兼容d..
2020-06-09 14:52:34
287
原创 页面自适应浏览器高度
页面自适应高度，哪iview--table为例<template> <div style="min-width: 1024px !important"> <Table :height="mheight" :data="data" :columns="columns"> </div></template><script> export default { data() {
2020-06-09 14:32:26
409
原创 iview--table自定义列头
iview---table自定义列头官方API提到renderHeader函数自定义列头显示内容，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含column和index，分别为当前列数据和当前列索引。{ "title": "累计销售", "align": "center", renderHeader: (h, param) => { return h('div', { domProps: { i...
2020-06-09 14:27:19
1098
转载 vuejs 图片预览插件 v-viewer
https://github.com/mirari/v-viewergithub地址。1.安装配置npm install v-viewer --save2.在main.js中引入import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css' //Vue.use(Viewer) 默认配置写法Vue.use(Viewer, { defaultOptions: { zIndex: 9999 .
2020-06-03 16:35:31
358
cssSpecialEffects.rar
2020-07-31
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人