vue
越努力,越幸运..........
这个作者很懒,什么都没留下…
展开
-
51.WebSocke结合文本域(textarea)日志信息
<template> <div class="envirVariable"> <div class="search"> <div class="left"> <div style="margin-right: 15px"> <el-select v-model="containeValue" placeholder="请选择" @change="handleSearch">原创 2022-02-23 17:41:59 · 239 阅读 · 0 评论 -
50.vue中监控元素大小变化element-resize-detector(echarts变化)
1.下载导入npm install element-resize-detector2.也可以在vue中导入monted(){ var elementResizeDetectorMaker = require("element-resize-detector");//导入 // 创建实例 var erd = elementResizeDetectorMaker(); // 创建实例带参 var erdUltraFast = elementResizeDetectorMaker({原创 2022-02-22 16:30:05 · 440 阅读 · 0 评论 -
49.vue过滤器(filters)的使用
代码如下:1.私有过滤器<template> <div> <p> {{message | capitalize}} {{time | dateFormat}} {{menoeny | menmonyCapital}} </p> </div></template><script>export default { data() { retur..原创 2022-02-17 17:04:44 · 94 阅读 · 0 评论 -
48.腾讯云 时间轴样式
<template> <div class="time"> <ul class="wrap"> <li class="inner" v-for="(item,index) in list" :key='index'> <div class="content"> <h5 style="color:#0052d9"> {{item.time}} .原创 2022-02-16 16:28:32 · 201 阅读 · 0 评论 -
45.vue-scrollto的用法,PC端滚动
vue-scrollto 官方网址为:https://github.com/rigor789/vue-scrollto1,安装vue-scrolltonpm install --save vue-scrollto使用yarn则如下:yarn add vue-scrollto2.写个js文件 scroll-to.jsvar Vue = require('vue');var VueScrollTo = require('vue-scrollto'); Vue.use(VueScrollT原创 2022-02-11 14:23:00 · 1563 阅读 · 0 评论 -
42.网页常用布局(三栏布局)
2.代码<template> <div class="new-Product"> <div class="banner"> <div class="title"> <h3>最新活动</h3> <p>最新活动 最新活动专区,您可了解腾讯云当前所有优惠活动</p> </div> </div> .原创 2022-02-07 09:58:07 · 344 阅读 · 0 评论 -
41.鼠标点击div出现蓝色的边框
###设置全局样式*:focus { outline: none}原创 2022-01-06 11:50:18 · 692 阅读 · 0 评论 -
35.4.qiankun应用案例
1.父级组件utils文件下import store from "../store";import {toLogin} from "./login";/** * @name 导入注册并启动微应用函数 *//** * @name 声明一个常量准备将props内的部分内容储存起来 */const STORE = {};/** * @name 启动qiankun应用间通信机制 * @param {Function} initGlobalState 官方通信函数 * @descrip原创 2021-11-30 16:46:39 · 750 阅读 · 0 评论 -
40.1自定义组建el-cascader
1.子组件<template> <el-cascader v-model="bindValue" :options="options" :size="size" :clearable='clearable' :props="props"> </el-cascader></template><script>export default { data() { return {}; }, //实现子组件,父级组件双向原创 2021-11-29 16:37:24 · 1121 阅读 · 0 评论 -
42.不同环境下vue-cli3+打包命令配置
1.首先在项目根目录下新建三个文件:其中:.env文件是全局变量,.env.production:是生产环境配置,.env.uat:是测试环境配置。内容分别是:.env:.production:REMARK = '生产环境'NODE_ENV = 'production'EVN_CONFIG = 'production'.uat:REMARK = '生产环境'NODE_ENV = 'uat'EVN_CONFIG = 'uat'2.打包命令配置3.使用:...原创 2021-11-17 11:03:50 · 403 阅读 · 0 评论 -
41.动画效果(水波纹)
1.水波纹动画2.实现代码<template> <div> <div class="water-wave"> <div class="water-wave1"></div> <div class="water-wave2"></div> <div class="water-wave3"></div> </div> </原创 2021-11-15 11:36:11 · 410 阅读 · 0 评论 -
40,自定义组件
1.自定义下拉菜单<template> <div class="dropdown" @mouseleave.stop="handleMouseenLever"> <span @mouseenter="hanldeMouseenterEnter">下拉菜单 <i v-show="isShowArrow==false" class="el-icon-arrow-up"></i> <i class="el-icon-a原创 2021-11-10 15:35:27 · 476 阅读 · 0 评论 -
39.实现腾讯云 header浮层效果
父级组件<template> <div class="header-wrap"> <div class="header-nav" @mouseenter.stop="handleheadermEnter" @mouseleave.stop="handleheaderLeave" :style="{background:(isMouseFater==true?'#fff':'rgb(235, 242, 248)')}"> <div原创 2021-11-03 11:32:29 · 118 阅读 · 0 评论 -
36.正则表达式基本语法
JS正则表达式基本语法**两个特殊的符号’^‘和’$’。他们的作用是分别指出一个字符串的开始和结束。例子如下:“^The”:表示所有以"The"开始的字符串(“There”,"The cat"等);“of despair$”:表示所以以"of despair"结尾的字符串;“^abc$”:表示开始和结尾都是"abc"的字符串——呵呵,只有"abc"自己了;“notice”:表示任何包含"notice"的字符串。象最后那个例子,如果你不使用两个特殊字符,你就在表示要查找的串在被查找串的任意部分原创 2021-09-17 18:29:10 · 134 阅读 · 0 评论 -
35.qiankun微前端应用于vue应用的实践
qiankun微前端应用于vue应用的实践前言本文介绍了用qiankun微前端框架用来集成vue应用的基本方案以及集成过程中遇到的一些常见问题。一、基本使用主应用1.先安装 qiankun :$ yarn add qiankun # 或者 npm i qiankun -S2.注册微应用并启动:import { registerMicroApps, start } from 'qiankun'/** * step1 注册微应用 */registerMicroApps([ {原创 2021-09-17 18:12:10 · 1658 阅读 · 0 评论 -
33.CodeMirror编辑器如何在vue项目中使用
1.封装组件<template> <div className="yaml-editor"> <textarea ref="textarea"/> <div> <span style="margin-right: 10px">Ctrl + F</span> <el-button @click="find">查找</el-button> </div&g原创 2021-09-10 18:13:50 · 885 阅读 · 1 评论 -
32.JS获取当前时间,并转换成年月日时分秒
getNowTime () {let dateTimelet yy = new Date().getFullYear()let mm = new Date().getMonth() + 1let dd = new Date().getDate()let hh = new Date().getHours()let mf = new Date().getMinutes() < 10 ? ‘0’ + new Date().getMinutes() : new Date().getMinutes(原创 2021-09-06 10:22:04 · 246 阅读 · 0 评论 -
28,自定义v-click-outside指令,实现下拉选功能
1.实现效果如下,2.代码如下<template> <div class="test"> <div class="wrap" v-click-outside> <el-input v-model="input" placeholder="请输入内容"></el-input> <div class="content" v-show="isShowContent"> <el-b原创 2021-07-18 10:52:38 · 316 阅读 · 0 评论 -
27.vue项目中使用svg+svg变色
需要实现的效果是图标为svg,可以根据选中状态变色.首先我们需要下包1.下包操作1.npm install vue2-svg-icon --save-dev2.然后你的package.json里面就会出现这个配置.3.然后main.js里面注册一下import Icon from 'vue2-svg-icon/Icon'Vue.component('icon',Icon);4.引入svg5.使用这个就是elementUI的导航组件,主要是标注那段代码是svg图标,w和h就是控制原创 2021-07-11 15:29:42 · 701 阅读 · 0 评论 -
26,vue基于elementui设置表格动态高度的几种方法
vue基于elementui设置表格动态高度的几种方法方法一 css + js的形式1.这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要使用calc来设置高度,然后给表格设置:height="tableH"的属性<div class="table-wrapper" ref="tableWrapper" v-loading="loading"><el-table :data="tableData" stripe style="wid原创 2021-07-07 17:46:37 · 7079 阅读 · 0 评论 -
25.css经典布局—粘连(css sticky footer)布局
1.什么是粘连布局(css sticky footer)1.当main的高度足够长的时候,紧跟在<\main>后面的元素<\footer>会跟在其后面;2.当<\main>元素比较短的时候(比如小于屏幕的高度),我们期望这个<\footer>元素能够“粘连”在屏幕的底部。3.三个组成部分:wrap容器,main内容,footer脚部方法一:footer 上用负的 margin-top在内容外面需要额外包一层元素(wrap)来让它产生对应的 padd原创 2021-06-30 21:49:55 · 424 阅读 · 0 评论 -
24,文本超出,生成...
1.单行文本,超出,生成….title { display: block; width: 176px; height: 22px; overflow: hidden; display: -webkit-box; //将对象作为弹性伸缩盒子模型显示; text-overflow: ellipsi原创 2021-06-26 14:40:08 · 55 阅读 · 0 评论 -
15.vue项目,pc端实现左右联动的效果图
1.通过,监视滚轮的变化,计算页面滚动后的最高点,对应右侧列表的下标,代码如下<template> <div class="sys_emp_detail"> <div class="container_wrap"> <div class="left_box" ref="itemList"> <div class="head_title" :style="原创 2021-03-21 15:19:24 · 1001 阅读 · 1 评论 -
14.i18n在vue项目中使用(国际化)
i18n:i18n是 Internationalization 这个英文的简写,即国际化的意思,vue-i18n是一款针对于vue开发的国际化插件,让项目支持多语言切换,以适应不同地区用户的需求。1.安装vue-i18nnpm install vue-i18n --save2.main.js中全局引入i18nimport VueI18n from "vue-i18n";3.注册:Vue.use(VueI18n);4.实例化i18n并引入语言文件:const i18n = new Vu原创 2021-03-13 12:29:54 · 522 阅读 · 0 评论 -
8.git使用git怎么撤销本地(工作区)修改,暂存区修改,版本区(本地仓库)修改,以及远程仓库的提交(git)
大家在做项目的时候经常会使用git,但同时也会遇到很多问题,比如刚修改后得代码突然后悔了,这时怎么办呢1、未使用git add 的时候----在工作区未使用git add 的时候----在工作区git checkout -- filepathname //放弃修改某个文件例如: git checkout -- readme.mdgit checkout . //放弃所有修改的文件git restore . //放弃所有修改的文件2、已经使用git add 的时候----在暂存区git r原创 2021-02-16 20:29:21 · 1038 阅读 · 0 评论 -
7.vue配置文件的alias(别名)
1.文件路径的引用问题(配置文件路径vue.config.js)2.在项目根目录下创建vue.config.js文件3.vue.config.js内容:const path = require('path');//引入path模块function resolve(dir){ return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径}module.exports={ chainWebpack:(config)=>原创 2021-02-13 21:07:01 · 564 阅读 · 2 评论 -
5.Vue中computed和watch的区别(面试必备)
计算属性computed :支持缓存,只有依赖数据发生改变,才会重新进行计算不支持异步,当computed内有异步操作时无效,无法监听数据的变化3.computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed5.如果computed属性属性值是函数,那么默认会走get方法;函数的返回值就是属性的属性原创 2021-02-02 21:45:14 · 241 阅读 · 2 评论