个人博客(znzpeng.com)

一、问题汇总

1.CSS3属性值text-indent:定义文本块中首行文本的缩进。

例如：将段落的第一行缩进2em： div{text-indent:2em;}

2.声明式导航如何携带params传参？

1.在路由文件router.js中将携带参数的路由/DetailShare后加上:indexs

注意:params+name是一个组合，必须要给路由名称name赋值

2.然后就在temSharelist的声明式导航中添加params

//index就是你准备传递时值  而indexs就是你在路由中定义的params,算是形参

<router-link :to={name:'DetailShare',params:{indexs:index}}></router-link>

3. 个人博客中的主内容是如何布局，以及样式如何设置的？

我了解到的应该有两种情况:md或者html

1.第一种就是在json中写入html字符串,注意使用html的时候有几个问题:

(1)json文件中的要求是,必须把html字符串写在一行，可以利用html在线压缩工具:OSCHINA
(2)由于josn文件中的字符串外边有一个双引号"",所以html内部的所有引号提前全部变成单引号''，可以利用ctrl+f查询工具全局改变。

2.第二种是在json文件中写入md内容，但是利用html更方便一些,所以没有选择

4.a标签外面的li标签，在点击时，只有a标签会跳转,而外面的li点击时没反应

这个问题的解决也是比较简单的，由于a标签时被包裹在li标签内部的,如果我们想要实现在点击li的时候会自动跳转，而不是只有点击a标签文字的时候,只需要把原本加载a标签中的链接变成li标签的js点击事件

代码实例：

<el-menu-item @click="goCSDN()"><a>CSDN</a></el-menu-item>

//js
   goCSDN() {
      window.location.href =
        "https://blog.csdn.net/efew212efe?spm=1000.2115.3001.5343";
    },

window.location.href实现当前页面跳转URL

5.鼠标点击特效

网页点击特效：鼠标点击浮现爱心特效

<script type="text/javascript">
        /*7Core-CN - 网页鼠标点击特效（爱心）*/
        !function (e, t, a) {function r() {for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");requestAnimationFrame(r)}function n() {var t = "function" == typeof e.onclick && e.onclick;e.onclick = function (e) {t && t(), o(e)}}function o(e) {var a = t.createElement("div");a.className = "heart", s.push({el: a,x: e.clientX - 5,y: e.clientY - 5,scale: 1,alpha: 1,color: c()}), t.body.appendChild(a)}function i(e) {var a = t.createElement("style");a.type = "text/css";try {a.appendChild(t.createTextNode(e))} catch (t) {a.styleSheet.cssText = e}t.getElementsByTagName("head")[0].appendChild(a)}function c() {return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"}var s = [];e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {setTimeout(e, 1e3 / 60)}, i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r()}(window, document);
</script>

6.网站背景图（静态或者动态）

发现了一个波浪形的可自己调节的动态背景图设计网站---Svg Wave

7.js弹窗框有三种类型

JavaScript 有三种类型的弹出框：

1.警告框


	  //警告框没有返回值
          var i = alert("这是一个警告框");
          console.log(i);

2.确认框

		//确认选择框，可以返回true(确定)和false(取消)
         var j = confirm("是否获取定位权限");
         console.log(j);

3.提示框


	//提示输入框，
        //不输入直接确定返回空字符串"
        //只要点取消就返回null
        //输入值以后,点击确定，就返回输入的值
          var str = prompt("请输入姓名");
          console.log(str);

8.博客在部署上线时，背景图消失并且局部样式发生改变，下拉框也失效

在博客上线时，整个页面的背景图消失，查看浏览器的调试器后发现，是其他页面的背景颜色覆盖了背景图，最初以为是背景图像的权重低，其实不然，是因为在resume组件内，引入样式的方式不对，导致其内部样式影响到了其他组件。当我改变了resume组内内的样式引入后，其他的包括下拉框等问题，均解决！

为了更好的理解这个问题，首先需要回顾一下vue引入样式的方法

1.引入css文件

1.1在style标签中引入(可设置成局部)

在标签上添加 scoped 属性后则变成了局部引用

注意：下图的icon.css文件仍然是全局引用，需要将文件后缀改为scss或者less才能变成局部的,在更换过程中建议改成scss类型，因为它支持css的所有语法。

1.2全局引入

引入外部文件只需在main.js文件中，其中@代表src

import '@/style/reset.css'

1.3局部引入

局部引入的时候，可能会出现样式污染的问题，需要注意

<style scoped>
  @import '@/assets/iconfont/iconfont.css';这个分号一定要写，要不会报错
</style>

2.组件内部引入样式的污染（重点）

@import引入样式文件，就算加scoped，其它没有引入的模块还是可以访问到你的样式，如果某个组件的类名一致，则就会被污染到。

解决办法： 修改引入样式：

<style src="@/style/reset.css"  scoped></style>

3.同一个组件内新写样式

如果需要写新的样式，那么必须重新写一个新的style标签，如果有多个引入，就写多个style，互不影响

<style src="@/style/reset.css"  scoped></style>
<style scoped>
  //新的css样式
</style>

4.@import和import的区别

1.@import

style中的@import是stylus的语法，是在css中引用css文件

2.import

script中的import是js的语法, 是在js中去引用css文件

个人博客搭建中遇到的问题汇总