js
刚刚好ā
当地小名气的程序猿 多小呢只有我自己知道~
展开
-
js中截取字符串substring()\slice()、截取特殊字符前后的字符串及将字符串全部转化为小写、字符串首字母转化为大写
1.substring():提取字符串中两个指定的索引号之间的字符start,stop)startstop可选。一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数,那么返回的子串会一直到字符串的结尾。2.substr():从起始索引号提取字符串中指定数目的字符.substr(start,length)startlength3.slice():提取字符串的片断,并在新的字符串中返回被提取的部分。原创 2022-09-07 15:18:24 · 1085 阅读 · 0 评论 -
vue前后端实现WebSocket的连接,数据库变化后后端推送的消息在前端主动推送,同时实现页面的部分更新
实现目标:前后端通过WebSocket建立连接,当数据库发生变化后后端向前端推送消息,前端将展示后端推送的消息,同时实现页面部分数据的更新。实现方法:vue文件中:data中:wsUrl: 'xxxx/ws/xxxx/ws/dem/',methods中:// ---- WebSocket连接start ---- initWebSocket() { let randomNum = Math.round(Math.random() * 100) //初始化weosoc原创 2022-05-19 07:45:00 · 3630 阅读 · 0 评论 -
vue 利用$on和$emit进行页面间的跨组件传值和调用
实现目标:两个vue页面没有任何关联,其中vue1页面要调用vue2中的方法。实现代码:中间存储实体:在utils下新建dataCenterBus.js文件import Vue from 'vue';export default new Vue();vue1页面:(调用vue2页面中的方法)首先引入中间实体文件import dataCenterBus from '@/utils/dataCenterBus';在需要调用所需方法处采用$emit引用引号中为两个vue文原创 2022-04-15 20:34:13 · 2388 阅读 · 1 评论 -
vue在Cookie和对localStorage的封装中存储登录用户的token、用户名等信息
在系统登录后将用户登录的token、用户名信息分别存储至Cookie和localStorage中,便于系统后续不同用户权限的控制。一、存储在Cookie中的文件封装在src的utils中新增auth.js文件,文件代码为:import Cookies from 'js-cookie';const TokenKey = 'Authorization';export function getToken () { return Cookies.get(TokenKey);}expor原创 2022-04-11 14:53:58 · 3241 阅读 · 0 评论 -
vue全局设置ajax请求拦截hookAJAX()
设置Cookie进行统一拦截,使全局都携带Cookie,便于系统中权限的控制展示。在系统的main.js文件中设置:其中this.setRequestHeader的Authorization为cookie中存储的token。在cookie中存储token的具体方法详见:/*全局设置ajax请求拦截*/hookAJAX()function hookAJAX () { XMLHttpRequest.prototype.nativeOpen = XMLHttpRequest.prototy原创 2022-04-11 19:30:00 · 1378 阅读 · 0 评论 -
el-tree设置利用setCheckedNodes/setCheckedKeys默认勾选节点,以及通过setChecked新增勾选指定节点
实现目标:在生成el-tree时,默认勾选其中某几个选项;或在进行某个选项的选中时,同时勾选上另一个选项。实现效果:在生成树结构时,默认勾选其中的两个选项。在勾选其中一个选项时,另一个选项也被同时勾选。实现方法:<el-tree :data="data" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps"&原创 2022-03-30 14:08:34 · 34843 阅读 · 0 评论 -
div或button添加鼠标悬浮提示信息的多种方法小结vue
1.利用elementUI组件里的Tooltip 文字提示实现原始页面:实现效果:当鼠标悬浮在上左按钮时,出现提示信息实现代码:<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start"> <el-button>上左</el-button></el-tooltip>参数说明:参数 说明 类原创 2022-03-18 17:19:55 · 29811 阅读 · 3 评论 -
vue中el-tree树形组件利用filter和 filterNode方法实现模糊搜索
实现效果:初始状态:模糊搜索效果:实现方法:template中:<el-input placeholder="输入关键字" v-model="filterText"></el-input><el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all :filter-node-method="filterNod..原创 2022-03-17 20:11:50 · 14810 阅读 · 0 评论 -
vue纯前端实现模糊查询,使用filter和indexOf
实现目标:在输入框中输入与名称有关的内容,出现与所输入内容有关的表信息。实现效果:实现方式:template中:<div class="search-box"> <el-input placeholder="请输入名称" v-model="inputVal" clearable size="small" ></el-inp原创 2022-03-15 18:52:33 · 9629 阅读 · 2 评论 -
vue实现输入框的模糊查询,与后端对接接口
实现目标:在输入框中输入相关字符,列表会模糊查询与其有关的信息。实现效果:后端的swagger中:api的js文件中:// 根据名称模糊查询export function selectByName(param) { return request({ url: "/xxxx/selectByName", method: "get", params: { name: param } .原创 2022-03-14 19:10:14 · 5258 阅读 · 0 评论 -
vue中播放m3u8格式实时监控画面(取流)--调用后端接口
实现目标:点击按钮,出现弹窗,弹窗中为m3u8格式的监控实时画面。实现效果:1.index.html文件中:<!-- 取流 --> <link href="https://cdn.bootcss.com/video.js/7.6.5/alt/video-js-cdn.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/video.js/6.6.2/video.j..原创 2022-03-10 16:27:19 · 2629 阅读 · 1 评论 -
父组件向子组件传值(ref)---动态绑定动态属性
初始界面:实现效果:其中输入框前的数据名称是通过父组件传值过来的实现方式:1.子组件页面,使用props接收<template> <div class="set-auth-dialog-wrap"> <el-dialog :title="'添加数据'" :visible.sync="dialogVisible" :show-close="true" width="38%" :clo原创 2022-01-26 08:00:00 · 1383 阅读 · 0 评论 -
vue - - 从浏览器中获取当前用户登录名
目标:从浏览器获取当前用户名,若用户名与当前列申请人的用户名相同时,操作中的按钮不显示。在data的return中定义:nowUsermounted中:使用 localStroage 去获取。mounted() { this.nowUser = localStorage.getItem("network-pan-username"); },此时浏览器中的信息为:利用getItem从浏览器中获取key,并与当前列的person进行比较,若相同则不展示,在操作的按钮出进原创 2022-02-16 20:45:00 · 4709 阅读 · 0 评论 -
VUE输入用户名条件的设置
目标:用户名长度3-10字符;首字母开头;只能包含字母、数字和下划线。const validateNameLength = (rule, value, callback) => { const str = value.trim(); const length = str.length; const reStr = /^[a-zA-Z]{1}/; const reEn = /^[a-zA-Z0-9\_)]{3,10}$/; if (!re原创 2022-02-14 17:50:37 · 884 阅读 · 0 评论 -
父组件向子组件传值,ref的实际应用
先在父组件中引入子组件页面:import ColorManager from './ColorManager.vue' export default { components: { ColorManager },}子组件页面定义了beforeDel方法,现父组件传值到该方法中的参数中去父组件页面通过ref的值进行传递,这里ref后面的取名是整个项目(全局)唯一的<ColorManager v-show="!showColor" @showColor="before原创 2022-01-19 20:45:00 · 1014 阅读 · 0 评论 -
子组件向父组件传值:含参数及不含参数使用emit的两种情况
子组件向父组件传值两种方式:1.不含参数 2.含参数前期工作:在父组件的vue页面中引入子组件template中:<ColorManager v-show="showColor" />script模块中:import ColorManager from './ColorManager.vue'export default { components: { ColorManager },}script模块methods方法中对beforeShowCol原创 2022-01-19 14:51:31 · 1336 阅读 · 0 评论 -
VUE点击退出按钮退出登录,跳转至登录页面
实现一个简单的功能,点击页面右上角的退出按钮,跳转至登录页面,并需重新输入登录用户名和密码。在登录的vue页面中,在标签处添加点击事件<div class="quit" @click="quitLogin"></div>在method方法中,写入该点击事件quitLogin() { // location.reload() localStorage.clear() window.sessionStorage.clear() this.$ro原创 2022-01-16 12:00:00 · 6476 阅读 · 0 评论 -
登录时进行用户名和密码验证-设置登录拦截
1.在router文件夹中的index.js文件中设置路由和路由拦截器//配置路由路径{ path: '/login', name: 'login', component: () => import('@/views/login/login')}];const router = new VueRouter({ routes,});// 路由拦截器router.beforeEach((to, from, next) => { // console.log(to原创 2022-01-15 10:30:00 · 622 阅读 · 0 评论 -
vue中利用click点击事件和splice实现删除功能
目标:在vue中利用click点击事件实现内容的删除。实现效果:点击最右侧的删除按钮,删除这一个div里面的所有内容。实现方法:template中: <div class="refList" v-for="(item, index) in refListData" :key="index"> <div style="display:flex;margin-bottom:18px"> <div s.原创 2021-11-20 14:15:00 · 4169 阅读 · 0 评论 -
mouseOver和mouseLeave事件在vue中的应用
目标:利用mouseOver和mouseLeave实现鼠标移入和移出时的不同效果。初始状态:点击最右侧按钮后的效果:(具体实现方法见下篇文章)要完成的效果:在“已完成编辑 √”状态时,鼠标移入,出现如下效果,移出时恢复具体实现:template中:<div class="resultType " ref="paintOne" :style="activeOne"> <span class="resu...原创 2021-11-17 18:08:25 · 8889 阅读 · 2 评论