<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[UnderIcon的博客]]></title><description><![CDATA[]]></description><link>https://blog.csdn.net/UnderIcon</link><language>zh-cn</language><generator>https://blog.csdn.net/</generator><copyright><![CDATA[Copyright &copy; UnderIcon]]></copyright><item><title><![CDATA[/deep/和＞＞＞和::v-deep]]></title><link>https://blog.csdn.net/UnderIcon/article/details/122882264</link><guid>https://blog.csdn.net/UnderIcon/article/details/122882264</guid><author>UnderIcon</author><pubDate>Fri, 11 Feb 2022 15:50:18 +0800</pubDate><description><![CDATA[在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;
]]></description><category></category></item><item><title><![CDATA[【无标题】CSS实现漂亮按钮]]></title><link>https://blog.csdn.net/UnderIcon/article/details/122243948</link><guid>https://blog.csdn.net/UnderIcon/article/details/122243948</guid><author>UnderIcon</author><pubDate>Thu, 30 Dec 2021 19:35:39 +0800</pubDate><description><![CDATA[一.弹跳效果




	创建一个静态的按钮；
	
	
	然后利用animation属性，创建动画，当变换到50%时，按钮变换到1.2倍，到动画100%时按钮又恢复原样。
	

	
&lt;div class="button1"&gt;
    &lt;span&gt;立即下载&lt;/span&gt;
&lt;/div&gt;

.button1 {
    width: 200px;
    height: 46px;
    line-height: 46px;
    background: #2e.]]></description><category></category></item><item><title><![CDATA[gitlab-ci]]></title><link>https://blog.csdn.net/UnderIcon/article/details/122133484</link><guid>https://blog.csdn.net/UnderIcon/article/details/122133484</guid><author>UnderIcon</author><pubDate>Fri, 24 Dec 2021 18:05:54 +0800</pubDate><description><![CDATA[1.注册一个Runner： gitlab-runner register ；回车之后让输入url和token；在gitLab=&gt;项目=&gt;settings=&gt;CI/CD =&gt;Runner =&gt; Specific runners 中获得;并且给其起一个好识别的别名；tags填写自己想监听的分支即可；语言直接shell

2.通过gitlab-runner list可以查看当前正在运行的runner

3.编写job文件.gitlab-ci.yml；在项目根目录下创建该文件；并且编.]]></description><category></category></item><item><title><![CDATA[Jenkins + gitlab 自动部署 + 部署结果消息通知]]></title><link>https://blog.csdn.net/UnderIcon/article/details/122133425</link><guid>https://blog.csdn.net/UnderIcon/article/details/122133425</guid><author>UnderIcon</author><pubDate>Fri, 24 Dec 2021 18:02:21 +0800</pubDate><description><![CDATA[Jenkins中设置相关信息（如果发现jenkins有最近的插件；而咱们的并没有的话；可能是没有安装；可以找到对应的安装包给运维同学；让用admin账号给安装了以后就有最新的插件了）配置步骤： 项目config -&gt; 构建触发器 -&gt; BuildURL(复制url) -&gt; 高级 -&gt; Allowed branches(监听分支) -&gt; Secret Token (复制该token)
	gitlab中: 项目gitlab -&gt; 设置 -&gt; Webhooks ；将Jen]]></description><category></category></item><item><title><![CDATA[sentry使用步骤]]></title><link>https://blog.csdn.net/UnderIcon/article/details/122132602</link><guid>https://blog.csdn.net/UnderIcon/article/details/122132602</guid><author>UnderIcon</author><pubDate>Fri, 24 Dec 2021 17:40:56 +0800</pubDate><description><![CDATA[sentry使用步骤]]></description><category></category></item><item><title><![CDATA[vue自定义组件上的v-model如何与子组件数据绑定]]></title><link>https://blog.csdn.net/UnderIcon/article/details/114151182</link><guid>https://blog.csdn.net/UnderIcon/article/details/114151182</guid><author>UnderIcon</author><pubDate>Fri, 26 Feb 2021 20:24:19 +0800</pubDate><description><![CDATA[写组件的时候，好多时候子组件需要主动修改父组件的值，或者绑定。

这时候再用单纯的父子组件通信显得不合适，最好是让父组件不在过多的自己去操作数据，不然就不像一个本分的组件了，这时候就需要v-model。





子组件：this.$emit('自定义属性', data.ids)

父组件：&lt;child  @自定义属性='方法'/&gt;

v-model父组件写法：


&lt;div&gt;
    &lt;child v-model='text'&gt;&lt;/child&gt;
&...]]></description><category></category></item><item><title><![CDATA[Vue项目自动转换 px 为 rem，高保真还原设计图]]></title><link>https://blog.csdn.net/UnderIcon/article/details/113054088</link><guid>https://blog.csdn.net/UnderIcon/article/details/113054088</guid><author>UnderIcon</author><pubDate>Sat, 23 Jan 2021 15:56:25 +0800</pubDate><description><![CDATA[而本文的目标就是通过一系列的配置后，在开发中可以直接使用设计图的尺寸开发，项目为我们自动编译，转换成rem

技术栈

vue-cli：使用脚手架工具创建项目
	postcss-pxtorem：转换px为rem的插件。
自动设置根节点html的font-size

因为rem单位是相对于根节点的字体大小的，所以通过设置根节点的字体大小可以动态的改变rem的大小。

具体原理网上有很多文章分享，这里不具体解释。

1、创建rem.js文件

很多人写这种小工具文件会习惯性的加上闭包，这个其实是没有必要的。ES]]></description><category></category></item><item><title><![CDATA[微信浏览器返回键 阻止返回上个界面]]></title><link>https://blog.csdn.net/UnderIcon/article/details/107932645</link><guid>https://blog.csdn.net/UnderIcon/article/details/107932645</guid><author>UnderIcon</author><pubDate>Tue, 11 Aug 2020 12:12:17 +0800</pubDate><description><![CDATA[可以指定点击回退按钮时跳转的url，代码如下


pushHistory();
      window.addEventListener("popstate", function(e) {
          window.location.href='aaaaa.html';//指定回退的地址
      }, false);

      function pushHistory() {
        var state = {
            title: "title",
     ..]]></description><category></category></item><item><title><![CDATA[H5 与  原生APP交互(安卓 IOS )]]></title><link>https://blog.csdn.net/UnderIcon/article/details/102670816</link><guid>https://blog.csdn.net/UnderIcon/article/details/102670816</guid><author>UnderIcon</author><pubDate>Mon, 21 Oct 2019 20:10:25 +0800</pubDate><description><![CDATA[H5与安卓交互：

自己规定好的参数.自己规定好的参数() 


例如：rich.callShareForMoreVipShare()

      如果需要带参数：

     const imgUrl = 'https://111111.jpg';

     rich.callShareForMoreVipShare(qrUrl)



H5与I...]]></description><category></category></item><item><title><![CDATA[Web Notification消息通知的使用（桌面消息通知）]]></title><link>https://blog.csdn.net/UnderIcon/article/details/99756977</link><guid>https://blog.csdn.net/UnderIcon/article/details/99756977</guid><author>UnderIcon</author><pubDate>Mon, 19 Aug 2019 20:12:01 +0800</pubDate><description><![CDATA[如果没有效果，请开启浏览器的消息通知权限。 下面上代码


&lt;!doctype html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="Generator" content="EditPlus®"&gt;
  &lt;meta name="Author" co...]]></description><category></category></item><item><title><![CDATA[vue插件大全汇总，你要的都这里，赶紧收藏下！]]></title><link>https://blog.csdn.net/UnderIcon/article/details/94589547</link><guid>https://blog.csdn.net/UnderIcon/article/details/94589547</guid><author>UnderIcon</author><pubDate>Wed, 03 Jul 2019 20:18:33 +0800</pubDate><description><![CDATA[Vue是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件，来了个大汇总，方便查找使用，便于工作和学习。很全的vue插件汇总，赶紧收藏下吧！


一、UI组件及框架
element- 饿了么出品的Vue2的web UI工具套件

mint-ui- Vue 2的移动UI元素

iview-...]]></description><category></category></item><item><title><![CDATA[js获取客户端计算机硬件信息与系统信息]]></title><link>https://blog.csdn.net/UnderIcon/article/details/94436779</link><guid>https://blog.csdn.net/UnderIcon/article/details/94436779</guid><author>UnderIcon</author><pubDate>Tue, 02 Jul 2019 12:05:22 +0800</pubDate><description><![CDATA[&lt;html&gt;
&lt;head&gt;
 
&lt;script&gt;
var info = allinfo();
document.write(info);
 
var locator = new ActiveXObject ("WbemScripting.SWbemLocator"); 
var service = locator.ConnectServer(".");
inf...]]></description><category></category></item><item><title><![CDATA[babel-cli的使用  -- ES6转ES5 （解决浏览器兼容问题）]]></title><link>https://blog.csdn.net/UnderIcon/article/details/90675918</link><guid>https://blog.csdn.net/UnderIcon/article/details/90675918</guid><author>UnderIcon</author><pubDate>Wed, 29 May 2019 18:12:08 +0800</pubDate><description><![CDATA[现在ES6盛行，开始大量使用ES6的特性敲代码，但限于Node.js本身对ES6的特性支持的不够完备，那么需要借助于其他工具来完成。

基本上，现在都直接写ES6的代码，然后使用babel-cli提供的babel转换成ES5或者使用babel-node直接运行ES6的代码。

虽然网上有好多babel使用的帖子，但是我发现，我按照网上的教程在各别版本的手机上并不好使。

于是记录一下自己的：

安...]]></description><category></category></item><item><title><![CDATA[Vue Bable 兼容低版本浏览器（PC端 移动端）]]></title><link>https://blog.csdn.net/UnderIcon/article/details/89575903</link><guid>https://blog.csdn.net/UnderIcon/article/details/89575903</guid><author>UnderIcon</author><pubDate>Fri, 26 Apr 2019 20:10:46 +0800</pubDate><description><![CDATA[Vue项目 打包后，运行在一些低版本手机浏览器里可能会出现白屏情况。

首先


安装：$ npm install --save-dev @babel/cli @babel/core @babel/preset-env @babel/preset-react

然后，新建一个.babelrc文件


{
  "presets": ["@babel/preset-env", "@babel/pre...]]></description><category></category></item><item><title><![CDATA[VUE 文字无缝滚动 及 停顿滚动  --CSS动画]]></title><link>https://blog.csdn.net/UnderIcon/article/details/89421648</link><guid>https://blog.csdn.net/UnderIcon/article/details/89421648</guid><author>UnderIcon</author><pubDate>Sat, 20 Apr 2019 18:47:37 +0800</pubDate><description><![CDATA[大家可以直接把下面代码完整的copy到自己项目里，看一下效果，效果就是在电商项目抽奖里名单公布的那种效果


&lt;template&gt;
	&lt;div&gt;
		&lt;h1&gt;demo11&lt;/h1&gt;
		&lt;h2&gt;文字无缝滚动+停顿滚动 -- CSS动画&lt;/h2&gt;
    &lt;div class="text-container"&gt;
  ...]]></description><category></category></item><item><title><![CDATA[vue 组件之间通信的几种方式]]></title><link>https://blog.csdn.net/UnderIcon/article/details/88425432</link><guid>https://blog.csdn.net/UnderIcon/article/details/88425432</guid><author>UnderIcon</author><pubDate>Tue, 12 Mar 2019 17:50:20 +0800</pubDate><description><![CDATA[这篇文章主要介绍了vue组件之间通信方式,结合实例形式总结分析了vue.js的几种组件通信方式与相关操作注意事项，对此有需要的朋友可以参考学习下。如有不足之处，欢迎批评指正。

1. props和$emit

父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的。


Vue.component('child',{
    data(){
   ...]]></description><category></category></item><item><title><![CDATA[Flex布局及在移动端的应用]]></title><link>https://blog.csdn.net/UnderIcon/article/details/88202249</link><guid>https://blog.csdn.net/UnderIcon/article/details/88202249</guid><author>UnderIcon</author><pubDate>Wed, 06 Mar 2019 11:48:31 +0800</pubDate><description><![CDATA[前端发展很快，以前在移动端使用Flex布局还要想三想的文章也许已经过时了，这篇文章主要介绍使用Flex进行常规布局及在移动端的处理。

Flex语法

Flex布局意为&quot;弹性布局&quot;，用来为盒模型提供更多灵活性。此外，Flex定义的容器可以对块级元素(display: flex;)或行内元素(display: inline-flex;)生效，需要注意的是，如果父元素设置了Flex容器，则子元素的fl...]]></description><category></category></item><item><title><![CDATA[module.exports | exports | export | export default的区别]]></title><link>https://blog.csdn.net/UnderIcon/article/details/88137175</link><guid>https://blog.csdn.net/UnderIcon/article/details/88137175</guid><author>UnderIcon</author><pubDate>Mon, 04 Mar 2019 20:41:34 +0800</pubDate><description><![CDATA[1、首先上是用法上的不同

module.exports和exports的用法是后面加一个等号，再接具体的导出


module.exports=...

exports=...

export和export default的用法是后面直接接具体的导出，没有等号


export ...

export default ...

2、exports其实是module.exports的引用

在...]]></description><category></category></item><item><title><![CDATA[关于移动端布局(响应式布局)，你必须要知道的]]></title><link>https://blog.csdn.net/UnderIcon/article/details/86021143</link><guid>https://blog.csdn.net/UnderIcon/article/details/86021143</guid><author>UnderIcon</author><pubDate>Mon, 07 Jan 2019 19:41:12 +0800</pubDate><description><![CDATA[前言

响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。本文主要介绍一些响应式布局容易忽略但又很重要的知识点。

视口

移动前端中常说的 viewport （视口）就是浏览器中用于呈现网页的区域。视口通常并不等于屏幕大小，特别是可以缩放浏览器窗口的情况下。手机端与PC端视口存在差异，电脑端的视口宽度等...]]></description><category></category></item><item><title><![CDATA[vue-cropper  图片裁剪  图片跨域问题]]></title><link>https://blog.csdn.net/UnderIcon/article/details/84563107</link><guid>https://blog.csdn.net/UnderIcon/article/details/84563107</guid><author>UnderIcon</author><pubDate>Tue, 27 Nov 2018 11:33:17 +0800</pubDate><description><![CDATA[vue-cropper是一个很好用的图片裁剪插件，目前在项目中用到了，图片上传后，是存储到阿里云的，等拿到后端反给的图片路径去渲染到页面时，会提示图片跨域。

解决方法：


imgTrick(src) {
      const img = new Image()
      img.src = src
      img.crossOrigin = 'anonymous'
      retu...]]></description><category></category></item></channel></rss>