- 博客(70)
- 收藏
- 关注
RSS订阅原创 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
240
原创 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
443
原创 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
95
原创 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
204
原创 47.多级下拉选功能
<template> <div> <el-form ref="form" :model="form" label-width="98px"> <el-form-item label="活动名称" v-for="(item,index) in form.active_ids" :key='index'> <div style='display:flex'> <div> .
2022-02-14 15:37:53
377
原创 46.CSS3(旋转相册)
<template> <div id="app"> <div class="stage-area"> <div class="container"> <img src="./assets/image/12.jpg" /> <img src="./assets/image/13.jpg" /> <img src="./assets/image/14.webp"
2022-02-14 09:56:22
210
原创 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
1570
原创 44.url参数解析器,以对象的形式返回
1.url.match(/(\w+)=(\w+)/gi); 正则匹配，返回匹配的数组 const _getParams = (url) => { // 补全代码 let arr = url.match(/(\w+)=(\w+)/gi); let obj = {}; arr.map(item => { let [key, value
2022-02-10 10:34:06
714
原创 43.千位符
1.正则匹配 function _comma(number) { // 补全代码 let str = number.toString(); return str.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); } 千位符正则解析：replace(/\d(?=(?:\d{3})+\b)/g, '$&,')
2022-02-09 11:24:20
303
原创 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
347
原创 44.git仓库账号或着密码修改之后需要重新配置SSH公钥
git仓库账号或着密码修改之后需要重新配置SSH公钥问题描述：我修改了账号和密码之后，突然发现不能进行git仓库的克隆，报错如下：remote: 15737620377: Incorrect username or password (access token)fatal: Authentication failed for ‘https://gitee.com/xxxxxx/wp.git/’翻译过来就是：远程：15737620377:用户名或密码不正确（访问令牌）致命：“https://g
2021-12-06 14:24:33
1880
原创 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
753
原创 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
1125
原创 43.span中内容为数字不折行
前端调页面的时候发现了一个问题，span设定了宽度，并且display：block转为了块级元素，但是如果内容全部为数字的时候，不折行，显示到同意行中，奇丑无比，解决办法：给span添加属性–>word-wrap:break-world...
2021-11-22 16:06:25
202
原创 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
404
原创 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
412
原创 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
477
原创 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
119
原创 38.elementui实现远程搜索结合后台需求
1.技术标签： Element-UI UI框架 <div class="p-all-bar"><co-autocomplete class="p-all-search" popper-class="my-autocomplete" v-model.trim="keyword1" :fetch-suggestions="querySearch" style="font-family:
2021-11-02 14:21:35
238
原创 38.1element,table常用功能，添加过滤图标,暂无数据等
1.代码如下 ::v-deep .el-table__column-filter-trigger .el-icon-arrow-down { background: url("../../../../assets/base/img/sx.png") no-repeat; background-size: 100%; width: 17.4px; height: 14.7px; position: absolute;
2021-10-16 15:53:51
330
原创 36.原生 js 实现点击按钮复制文本
一、原理分析浏览器提供了 copy 命令 ，可以复制选中的内容document.execCommand("copy")如果是输入框，可以通过 select() 方法，选中输入框的文本，然后调用 copy 命令，将文本复制到剪切板但是 select() 方法只对 和 有效，对于 就不好使最后我的解决方案是，在页面中添加一个 ，然后把它隐藏掉点击按钮的时候，先把 的 value 改为 的 innerText，然后复制 中的内容二、代码实现HTML 部分<style typ
2021-10-13 19:08:20
131
原创 35.3qiankun子应用配置以及配置注意事项
子应用修改配置1.修改vue.config.jsmodule.exports = { ....., devServer:{....}, // 加上 微前端改造代码 configureWebpack: { output: { library: 'admin', // admin这个应用名称（例如：存储命名是 obj-storage） libraryTarget: 'umd', }, }
2021-09-29 14:50:00
5271
原创 35.2.微前端 Initialize failed: invalid dom 之 dom加载出现的问题
这里遇到的问题是引入 Echarts因为在Dom还没加载的时候，option 获取元素，echarts.init(document.queryselect(’#dom’))就开始检测dom，并尝试去获取它，但是在vue中引用echarts的中，发现在模板dom还没加载的时候echarts.init() 就已经开始执行，所以会报错 Initialize failed: invalid dom2、解决办法：根本原因就是dom没加载，echarts没有检测到dom，那么我就让dom加载后再去获取dom，
2021-09-29 11:11:25
553
原创 35.1qiankun 子应用选择器失效问题
场景在基于 qiankun 的微前端架构下开发时，子应用代码内的选择器全部失效。例如 getElementById() 等方法是获取不到子应用的元素的。而当子应用有获取 dom 的需求时（例如需要使用echarts），就会遇到这个问题。产生原因qiankun 微前端框架基于 shadow dom 的形式生成子应用，主、子应用共用一个 document ，而 shadow dom 内的元素是不被暴露的。解决方法思路：在主应用内找到 shadowRoot 的父元素，利用 .shadowRoot 属性，
2021-09-29 11:08:35
1190
原创 36.正则表达式基本语法
JS正则表达式基本语法**两个特殊的符号’^‘和’$’。他们的作用是分别指出一个字符串的开始和结束。例子如下：“^The”：表示所有以"The"开始的字符串（“There”，"The cat"等）；“of despair$”：表示所以以"of despair"结尾的字符串；“^abc$”：表示开始和结尾都是"abc"的字符串——呵呵，只有"abc"自己了；“notice”：表示任何包含"notice"的字符串。象最后那个例子，如果你不使用两个特殊字符，你就在表示要查找的串在被查找串的任意部分
2021-09-17 18:29:10
135
原创 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
1669
原创 34.基于xterm.js 实现Vue版本终端terminal
基于xterm.js 实现Vue版本终端terminal前端实现xtermnpm install --save xtermxterm-addon-fitxterm.js的插件，使终端的尺寸适合包含元素。npm install --save xterm-addon-fitxterm-addon-attachxterm.js的附加组件，用于附加到Web Socketnpm install --save xterm-addon-attach<temp
2021-09-13 17:21:17
5848
4
原创 34.input禁止输入的4种方法
方法1、readonly 1 <input type="text"value="哈哈哈"readonly="readonly">//使用readonly，字段为只读可复制 方法2、disabled 1 <input type="text"value="哈哈哈"disabled="disabled">//只读不可复制，无法选择， 文字会变成灰色 方法3、max length = “0...
2021-09-13 09:54:29
263
原创 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
891
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人