我的网页梦 —— 前端基础 & Vuejs


前言

自从上学期期末考试以后,就没有更新博客了,那时候是因为,你懂的嘛;

回到家后,肯定是玩啦,这么长的假期,同学聚会也少不了,过年期间更是忙的没话说,况且,今年的春节被这个新型冠状病毒整的是你死我活的,国家都进入一种战时状态,天佑中华吧,早点过去这次的考验。

相比于在医院战场上的医务工作者人员,住在荒野乡间的我,整个世界都闲了下来,但是,你说这可能吗?

在这个这么长的假期,我丝毫没有忘记我一直以来对网站的追求,从最初的用别人的完整的源码,到用别人的框架和主题,我都一直想自己亲手敲出属于自己的网站,于是我早就开始了……

前端基础 HTML & CSS

说到 HTML & CSS 经常接触网站的我,早有入门,但是没有经过系统化的学习了解,很多东西尚未知悉,我花了大约一周时间把尚硅谷推出的培训课程过了一遍,当然这里并不是收了广告费的,只是这个老师讲的确实不错,如果自学能力较差,像我,就必须有个老师引导,学习更得劲。当然了,大佬都是靠着W3C网站的文档自学的,这个确实厉害。

跟着课程走,相关的笔记,我用了Xmind做详细记录(感觉没什么用,多实战才是关键),一些经典的处理,我会单独列举出来。

引入图标字体

  1. 引入图标字体库,一般都会选择在iconfont官网下载

  2. 解压后,将css,eot,svg,ttf,woff,woff2文件复制到项目目录

  3. APP.vue 文件中全局引入

    @import 'assets/fonts/iconfont.css';
  4. 挑选相应图标并获取字体编码,应用于页面

    <span class="ifont">&#x33;</span>

实现网页无法选中

  • 通过CSS

      *{
          moz-user-select: -moz-none;
          -moz-user-select: none;
          -o-user-select:none;
          -khtml-user-select:none;
          -webkit-user-select:none;
          -ms-user-select:none;
          user-select:none;
      }
  • 通过JS

    //禁止页面选择以及鼠标右键
    document.οncοntextmenu=function(){return false;}; 
    document.onselectstart=function(){return false;};
  • 通过H5的body标签

    <body οncοntextmenu="return false;" onselectstart="return false">

前端框架——Vuejs

有了一些基础,再加上我这颗想要速成的心,我接着就看Vuejs相关的内容了,这里拿出一个常见的 UI 案例——Tabbar,作为练习。

基本结构的搭建

首先看下图,这就是Tabbar的成品图,作为一个组件,其显示的内容完全由外界决定,,我们在封装的过程中,只需要设置基本的布局和样式即可。

基本的结构就是 div 的嵌套了,样式设置也没有什么技术含量:

  #tab-bar {
    display: flex;        //设置为弹性盒布局
    background-color: #f6f6f6;
    position: fixed;      //固定布局
    right: 0;
    left: 0;
    bottom: 0;            //偏移至底部
                          //设置Tabbar顶端阴影
    box-shadow: 0 -1px 1px rgba(100,100,100,.2);
  }
.tab-bar-item {
    flex: 1;                    //子项平均分布
    text-align: center;         //文字居中
    height: 49px;
    font-size: 14px;
    padding-top: -2px;          //一些细微调整
}
.tab-bar-item img{
    width: 24px;
    margin-top: 3px;
    vertical-align: middle;     //去除图片底部的空隙
}
.active{
    color: #1296db;             //文本颜色
}

Tabbar组件的封装

具体的封装思路:

  • 定义插槽,用于设置Tabbar的每个子项Item
  • 在Item中再设置三个插槽,用于对图标和文字的插入

为什么Item中是三个插槽?因为点击Item时,为了更好的用户体验,往往会有图标的强调色,一次需要插入两个图标,而不是在点击时再插入。

<!--  Tabbar 插槽,同于放置Item  -->
<div id="tab-bar">
  <slot></slot>
</div>
<!--  Item 插槽  -->
<div class="tab-bar-item" @click="itemClick">
  <div v-if="isActive"><slot name="item-icon"></slot></div>
  <div v-else><slot name="item-icon-active"></slot></div>
  <div class="active"><slot name="item-text"></slot></div>
</div>

isActive是一个计算属性,涉及到颜色控制,之后再详解;另一个就是,为了避免插槽再替换时,覆盖掉v-ifv-else,我们可以将插槽放入 div 中,并将它们作为 div 的属性。

结合路由实现点击跳转

静态的Tabbar已经差不多了,Tabbar主要的功能就是实现多个页面的跳转,主要步骤:

  • 创建页面的.vue文件

  • 修改路由配置文件

  • 设置点击方法

//路由 index.js 文件
import Vue from 'vue'
import Router from 'vue-router'

//1. 安装插件
Vue.use(Router);

//使用懒加载,这里只做一个示例
const Home = () => import('../views/home/Home');


//2. 创建路由对象并导出
export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      component: Home
    }
  ]
})

点击方法的设置在tab-bar-item这个 div 中设置:

<div class="tab-bar-item" @click="itemClick">

跳转路由的代码:

methods: {
    itemClick(){
        this.$router.replace(this.path);
    }
}

Tabbar的动态颜色控制

到这里,整个Tabbar的封装已经差不多了,剩下的就是一个TabBarItem在细节性上的显示问题了,在点击事件产生时变色;此外作为一个封装的组件,其颜色的改变还需要由用户指定,而不能固定一个颜色,这里我们直接上代码:

首先,我们把固定的颜色样式删除,并在TabBarItem组件中添加如下代码:

computed: {
  isActive(){
    return this.$route.path.indexOf(this.path) === -1
  },
  activeStyle(){
    return this.isActive ? {} : {color: this.activeColor}
  }
},
props: {
  path: String,
  activeColor: {
    type: String,
    default: '#1296db'
  }
}

在App的模板中添加如下代码:

<tab-bar>
  <tab-bar-item path="/home" active-color="blue">
    <img  slot="item-icon" src="./assets/img/tabbar/home.svg" alt="">
    <img  slot="item-icon-active" src="./assets/img/tabbar/home_active.svg" alt="">
    <div slot="item-text">首页</div>
  </tab-bar-item>
</tab-bar>

也就是在父组件中向子组件TabBarItem中传入两个数据pathactive-color,首先我们来看isActive这个计算属性,indexOf函数的作用时查看当前路由内的 path 值是否含有父组件传来的 path ,没有则返回 -1isActivetrue

The indexOf() method returns the index within the calling String object of the first occurrence of the specified value, starting the search at fromIndex. Returns -1 if the value is not found.

active-color参数则为传入的字体的颜色,字符串类型,如果忽略,则取默认值,首先要把html模板中的样式修改为:

<div :style="activeStyle"><slot name="item-text"></slot></div>

v-bind绑定一个样式属性,由isActive控制,即可实现颜色动态控制。


文章作者: Mahoo Huang
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Mahoo Huang !
评论
 上一篇
利用FSMC模拟8080时序控制LCD 利用FSMC模拟8080时序控制LCD
注:本文属博主学习时所作笔记,内容源大参考于野火的《零死角玩转STM32F103》以及部分网络资料,笔记内容仅作为自己参考,免去频繁查询参考手册的麻烦,如有错误,还请指出! ILI9341 液晶控制器 ILI9341 控制器内部电路连接完后
2020-02-25
下一篇 
关于office的一点点使用经验 关于office的一点点使用经验
最近在期末复习,会经常性做一些电子笔记。难免会用到微软的office全家桶,对于一个没有系统性学过这些软件的我来说,遇到很多问题全靠百度过活,百度最有用的功能就是百度经验了,其次就是百度文库,PPT白嫖就是爽! 然后嘛,我特开此贴记录一下我
2019-12-05
  目录