Vue.js
月亮巡视人间
这个作者很懒,什么都没留下…
展开
-
/deep/和>>>和::v-deep
在style经常用scoped属性实现组件的私有化时,要改变element-ui某个深层元素(eg:.el-input__inner)或其他深层样式时,需要使用/deep/,如.conBox /deep/ .el-input__inner{ padding:0 10px;}注意,/deep/在vue 3.0会报错如果/deep/报错,可采用::v-deep,效果基本一样.conBox ::v-deep .el-input__inner{ padding:0 10px;原创 2022-02-11 15:50:18 · 449 阅读 · 0 评论 -
【无标题】CSS实现漂亮按钮
一.弹跳效果 创建一个静态的按钮; 然后利用animation属性,创建动画,当变换到50%时,按钮变换到1.2倍,到动画100%时按钮又恢复原样。 <div class="button1"> <span>立即下载</span></div>.button1 { width: 200px; height: 46px; line-height: 46px; background: #2e.原创 2021-12-30 19:35:39 · 668 阅读 · 0 评论 -
gitlab-ci
1.注册一个Runner: gitlab-runner register ;回车之后让输入url和token;在gitLab=>项目=>settings=>CI/CD =>Runner => Specific runners 中获得;并且给其起一个好识别的别名;tags填写自己想监听的分支即可;语言直接shell2.通过gitlab-runner list可以查看当前正在运行的runner3.编写job文件.gitlab-ci.yml;在项目根目录下创建该文件;并且编.原创 2021-12-24 18:05:54 · 254 阅读 · 0 评论 -
Jenkins + gitlab 自动部署 + 部署结果消息通知
Jenkins中设置相关信息(如果发现jenkins有最近的插件;而咱们的并没有的话;可能是没有安装;可以找到对应的安装包给运维同学;让用admin账号给安装了以后就有最新的插件了)配置步骤: 项目config -> 构建触发器 -> BuildURL(复制url) -> 高级 -> Allowed branches(监听分支) -> Secret Token (复制该token) gitlab中: 项目gitlab -> 设置 -> Webhooks ;将Jen原创 2021-12-24 18:02:21 · 803 阅读 · 0 评论 -
sentry使用步骤
sentry使用步骤原创 2021-12-24 17:40:56 · 2949 阅读 · 0 评论 -
vue自定义组件上的v-model如何与子组件数据绑定
写组件的时候,好多时候子组件需要主动修改父组件的值,或者绑定。这时候再用单纯的父子组件通信显得不合适,最好是让父组件不在过多的自己去操作数据,不然就不像一个本分的组件了,这时候就需要v-model。子组件:this.$emit('自定义属性', data.ids)父组件:<child @自定义属性='方法'/>v-model父组件写法:<div> <child v-model='text'></child>&...原创 2021-02-26 20:24:19 · 822 阅读 · 0 评论 -
Vue项目自动转换 px 为 rem,高保真还原设计图
而本文的目标就是通过一系列的配置后,在开发中可以直接使用设计图的尺寸开发,项目为我们自动编译,转换成rem技术栈vue-cli:使用脚手架工具创建项目 postcss-pxtorem:转换px为rem的插件。自动设置根节点html的font-size因为rem单位是相对于根节点的字体大小的,所以通过设置根节点的字体大小可以动态的改变rem的大小。具体原理网上有很多文章分享,这里不具体解释。1、创建rem.js文件很多人写这种小工具文件会习惯性的加上闭包,这个其实是没有必要的。ES原创 2021-01-23 15:56:25 · 254 阅读 · 0 评论 -
微信浏览器返回键 阻止返回上个界面
可以指定点击回退按钮时跳转的url,代码如下pushHistory(); window.addEventListener("popstate", function(e) { window.location.href='aaaaa.html';//指定回退的地址 }, false); function pushHistory() { var state = { title: "title", ..原创 2020-08-11 12:12:17 · 1340 阅读 · 0 评论 -
Web Notification消息通知的使用(桌面消息通知)
如果没有效果,请开启浏览器的消息通知权限。 下面上代码<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" co...原创 2019-08-19 20:12:01 · 560 阅读 · 1 评论 -
vue插件大全汇总,你要的都这里,赶紧收藏下!
Vue是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总,方便查找使用,便于工作和学习。很全的vue插件汇总,赶紧收藏下吧!一、UI组件及框架element- 饿了么出品的Vue2的web UI工具套件mint-ui- Vue 2的移动UI元素iview-...转载 2019-07-03 20:18:33 · 3952 阅读 · 0 评论 -
babel-cli的使用 -- ES6转ES5 (解决浏览器兼容问题)
现在ES6盛行,开始大量使用ES6的特性敲代码,但限于Node.js本身对ES6的特性支持的不够完备,那么需要借助于其他工具来完成。基本上,现在都直接写ES6的代码,然后使用babel-cli提供的babel转换成ES5或者使用babel-node直接运行ES6的代码。虽然网上有好多babel使用的帖子,但是我发现,我按照网上的教程在各别版本的手机上并不好使。于是记录一下自己的:安...原创 2019-05-29 18:12:08 · 2042 阅读 · 0 评论 -
Vue Bable 兼容低版本浏览器(PC端 移动端)
Vue项目 打包后,运行在一些低版本手机浏览器里可能会出现白屏情况。首先安装:$ npm install --save-dev @babel/cli @babel/core @babel/preset-env @babel/preset-react然后,新建一个.babelrc文件{ "presets": ["@babel/preset-env", "@babel/pre...原创 2019-04-26 20:10:46 · 651 阅读 · 0 评论 -
VUE 文字无缝滚动 及 停顿滚动 --CSS动画
大家可以直接把下面代码完整的copy到自己项目里,看一下效果,效果就是在电商项目抽奖里名单公布的那种效果<template> <div> <h1>demo11</h1> <h2>文字无缝滚动+停顿滚动 -- CSS动画</h2> <div class="text-container"> ...原创 2019-04-20 18:47:37 · 4199 阅读 · 0 评论 -
vue 组件之间通信的几种方式
这篇文章主要介绍了vue组件之间通信方式,结合实例形式总结分析了vue.js的几种组件通信方式与相关操作注意事项,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。1. props和$emit父组件向子组件传递数据是通过prop传递的,子组件传递数据给父组件是通过$emit触发事件来做到的。Vue.component('child',{ data(){ ...原创 2019-03-12 17:50:20 · 447 阅读 · 0 评论 -
vue-cropper 图片裁剪 图片跨域问题
vue-cropper是一个很好用的图片裁剪插件,目前在项目中用到了,图片上传后,是存储到阿里云的,等拿到后端反给的图片路径去渲染到页面时,会提示图片跨域。解决方法:imgTrick(src) { const img = new Image() img.src = src img.crossOrigin = 'anonymous' retu...原创 2018-11-27 11:33:17 · 8799 阅读 · 6 评论 -
Vue.js数据双向绑定的实现原理
Vue.js 最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统。本文仅探究双向绑定是怎样实现的。一、访问器属性访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过 defineProperty() 方法单独定义。 var obj = { }; // 为obj定义一个名为 hello 的访问器属性 Object.definePropert...原创 2018-05-25 10:53:34 · 426 阅读 · 0 评论