2018-12-25 09:15:05 mirror_Mx 阅读数 246

为了页面的美观,以及代码的简单,就想在vue中导入bootstrap。
过程很心酸,有一些问题还是没有能够解决。
先打开对应的文件目录【如图,目录就应该为D:\vue\vueByLearn\myTry】
在这里插入图片描述
我暂时实现的方式是手动添加bootstrap的。
自动方法实现,通过cmd输入…install命令方法输入的话,我这边的一个问题就是bootstrap部分的样式能够实现,造成这样的原因不清楚。


那我就来讲一下,如何通过手动方式引入bootstrap吧。

1. 先从官网下载对应的bootstrap框架

下载地址:https://v3.bootcss.com/getting-started/#download

2. 将框架文件放置到某个地方(没有固定的要求,但是assets文件主要是用来放样式等,这样放置比较符合初始框架的目的)

在这里插入图片描述

3. 开始配置相关的信息

打开如下图所示的文件:
在这里插入图片描述
在此文件中分别添加如下代码:
var webpack = require('webpack')在这里插入图片描述

	plugins: [
	  new webpack.ProvidePlugin({
	    $: "jquery",
	    jQuery: "jquery"
	  })
	]

在这里插入图片描述
此时还没有配置过JQ,在cmd中会报错,导致无法正常运行,只需要在cmd中输入:
npm install --save jquery
即可。
在main.js入口函数中引入相关的bootstrap文件

import './assets/bootstrap/js/bootstrap.min.js'
import './assets/bootstrap/css/bootstrap.min.css'

通过npm run dev重新运行项目。
测试结果:
在这里插入图片描述

自动引入的问题:
1、首先自动引入的情况,引入之后找不到对应的文件(jq和bootstrap)
2、当使用相关控件测试的时候,比如说导航栏等,样式就无法同官网的一直。

2018-05-01 02:05:43 S_u_mm_er 阅读数 163

Vue.js实战项目


参考


目录


在线翻译

一、components目录下创建新组件

1. TranslateForm.vue

  • 实现表单部分

2. TranslateOutput.vue

  • 实现内容显示部分

二、TranslateForm.vue

1. App.vue中要引入TranslateForm

  • 首先在<template>里面要加载一下<translateForm></translateForm>
  • <script>里面要引入一下TranslateForm
  • components里面要调用一下TranslateForm

2. 处理

  • <select>下拉选择框,可以选择翻译的语言种类:英语、韩语、日语、俄语。
  • placeholder属性是当选择框内没填东西的时候显示出的内容
  • <option disabled value="">请选择</option>是选择框内没有选择的时候显示出来的内容。
<form id="transForm" v-on:submit="formSubmit">
<!-- placeholder没填东西时,显示出的文字 -->
<!-- v-model双向绑定,可以获取框里面的内容 -->
    <input type="text" v-model="textToTranslate" placeholder="输入需要翻译的内容">
    <!-- 先给出一个option用作测试 -->
    <!-- language获取用户选择的语言 -->
    <select v-model="language">
        <!-- "en"代表英语 -->
        <option value="en">English</option>
        <option value="ru">Russian</option>
        <option value="ko">Korean</option>
        <option value="ja">Japanese</option>
    </select>
    <input type="submit" value="翻译">
</form>
  • 要在methods里面实现formSubmit事件。
  • 要把获取的this.textToTranslate传递到App.vue中,再从App.vue传递到TranslateOutput.vue中进行显示。
  • $emit()是新建事件,将this.textToTranslatethis.language的内容带到this.textToTranslate事件中。这里的this.textToTranslate事件和函数名没有关系,只是刚好相同而已。
methods: {
    formSubmit:function(e) {
      // 测试submit键是否有效
      // alert("Hello World!");
      // alert(this.textToTranslate);
      // 注册事件,将获取的输入数据传递到App.vue
      // $emit()里的参数可以随意填,"formSubmit"和前面的没有关系
      // 要传递参数出去
      this.$emit("formSubmit", this.textToTranslate, this.language);
      // 取消默认事件,防止点击以后再默认刷新一次
      e.preventDefault();
    }

在App.vue中,

  • 在加载translateForm的时候监听自定义事件formSubmit(前面提到的$emit(),获取里面的两个参数值),然后调用方法translateText并且传递前面获取的两个参数。
<!-- 要将TranslateForm里面拿到的输入传递给App.vue
    然后通过App.vue传递给TranslateOutput.vue进行翻译输出 -->
<!-- 要实现TranslateForm里面的注册事件,必须找到加载的地方
    也就是<translateForm></translateForm>
    将时间绑定上去,就可以触发事件,"translateText"是任意名 -->
<translateForm v-on:formSubmit="translateText"></translateForm>
  • textlanguage就是对应接收的两个参数,获取的文字和语言。
  • 因为涉及到在线翻译,而在线翻译有现成的API可以调用:yandex translateAPI,所以要用到http请求。
  • 此时,要安装vue-resource才可以实现http请求,并在main.js中引入。
  • 进入yandex后,往下找到document并进入链接,左边菜单栏找到Translate text并选择,看到Request Syntax的第一行,就是地址:https://translate.yandex.net/api/v1.5/tr.json/translate?,后面加上?
  • 返回yandex首页,找到API key,进入并注册,获得API keytrnsl.1.1.20180427T110549Z.c1edaf8641273abe.f7bddfe02d631cba6f3a59110912c178be5f27dc。前面加上key=,后面加上&
  • lang是语言的种类,和获取的参数语言language相同。+是字符串拼接。最后要加上&
  • text是文本内容,和获取的内容text相同。+是字符串拼接。
  • this.$http.get()是有返回值的,所以使用then(),外加一个es6箭头函数,获取返回的response的内容。
  • 在控制台可以看到,response下面有个bodybody下面有个texttext里面是有一个数组,数组里面的多个数对应多种语言的翻译。由于我们一次只选择一种语言翻译,所以我们直接获取text[0]
  • 翻译好的文本要存进新的data变量translateText中,用于下一步传递到TranslateOutput.vue中。
methods: {
    // text用于接收TranslateForm.vue里面的textToTranslate
    translateText:function(text, language) {
      // alert("Hello World!");
      // 打印内容,看是否成功接收了参数
      // alert(text);
      // yandex里documentation的translate-text:request syntax
      // 后面要跟上?key='api key',不能写&
      // 还要跟一个参数lan(语言)
      // 还要获取用户文本text
      this.$http.get('https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20180427T110549Z.c1edaf8641273abe.f7bddfe02d631cba6f3a59110912c178be5f27dc&lang='+language+'&text='+text).then((response)=>{
        // console.log(response.body.text[0]);
        // 获取翻译好的内容
        this.translatedText = response.body.text[0];
      })
    }
  }

三、TranslateOutput.vue

1. App.vue中要引入TranslateOutput

  • 首先在<template>里面要加载一下<translateOutput></translateOutput>
  • <script>里面要引入一下TranslateOutput
  • components里面要调用一下TranslateOutput

2. 处理

  • v-text属性就是绑定文本,相当于之前的{{}}。这里绑定文本,适用于传递内容到TranslateOutput.vue中。
<!-- 因为要把内容传递到translateOutput里,所以要绑定 -->
<translateOutput v-text="translatedText"></translateOutput>

在TranslateOutput.vue中,

  • props用于获取父组件中传入的值。详情查看vue.js官方文档中的prop属性
export default {
  name: 'translateOutput',
  // 因为translatedText是父组件传过来的,所以用props来引用
  props: [
    "translatedText"
  ]
}

四、完善样式

1. 基础样式

  • csshtml设置的方法类似,先给表单<form>一个id,然后在<style>中对特定的id进行样式编排。具体的样式,参考:w3cschool的html/css教程
<form id="transForm" v-on:submit="formSubmit">
    <!-- placeholder没填东西时,显示出的文字 -->
    <!-- v-model双向绑定,可以获取框里面的内容 -->
    <input type="text" v-model="textToTranslate" placeholder="输入需要翻译的内容">
        <!-- 先给出一个option用作测试 -->
        <!-- language获取用户选择的语言 -->
        <select v-model="language">
        <!-- "en"代表英语 -->
            <option disabled value="">请选择</option>
            <option value="en">English</option>
            <option value="ru">Russian</option>
            <option value="ko">Korean</option>
            <option value="ja">Japanese</option>
        </select>
    <input type="submit" value="翻译">
</form>
<style>
  #transForm {
    border-radius: 10px;
    border:1px #ccc solid;
  }
</style>

2. bootstrap

由于我的bootstrap没有弄成功,下面直接贴几篇文章和相关网站过来参考:

成功装好并成功引入bootstrap之后,就可以按照Vue实战项目后续的步骤进行设置,可以设置出不错的效果。(大概)


2019-01-05 14:48:00 qq_41160739 阅读数 1055

在学校里面参加了一个服创比赛,我的任务是前端,一个半月的寒假打算好好学Js,bootstrap,Vue,jQuery,现在先开始学习bootstrap。发现在实战项目中学习是一个不错的方法。

话不多说,直接上源码与做完后的图片,很多知识点我都在源码里详细注释了供大家参考,希望大家不断进步。

我是用webstrom做的,加上一点快捷键:ctrl+F在文件内快速查找代码   ctrl+D复制当前行   ctrl+W选中单词  ctrl+D 删除一行    shift+enter重新开始一行(无论光标在哪个位置)

Bootstrap实战项目全屏
Bootstrap实战项目秦时明月全屏
Bootstrap实战项目秦时明月响应式
Bootstrap实战项目秦时明月响应式

 

<!--学习视频来源https://www.bilibili.com/video/av31073215-->
<!DOCTYPE html>
<html lang="zh-CN"><!--简体中文-->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/><!--浏览器兼容性-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!--viewport为了确保适当的绘制和触屏缩放。user-scalable=no禁用缩放功能后,
    用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉。-->
    <title>Bootstrap实战项目秦时明月</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/bootstrapcss.css"/>
    <link rel="stylesheet" href="css/animate.css"/>
    <!--wow.min.js和animate.css组合使用-->
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
  <!--导航条 默认导航条  固定在顶部-->
<div class="container">
  <!--小屏幕导航以及Logo-->
  <div class="navbar-header">
  <button class="navbar-toggle"    data-toggle="collapse"      data-target=".navbar-collapse" >
    <!--class="navbar-toggle 进行隐藏和显示之间的切换-->
    <!--  toggle触发器   data-toggle="collapse"  与data-target使用折叠插件
    .data -target属性接受一个CSS选择器,并会对其应用折叠效果。-->
    <!--三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮-->
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a href="index.html" class="navbar-brand">秦时明月</a>
  </div>
  <!--小屏幕导航以及Logo-->
  <!--导航-->

  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
      <!--navbar-right 向右对齐导航栏中的组件。-->
      <li><a href="index.html">秦时明月之沧海横流</a></li>
      <li><a href="#bbs">精彩图例</a></li>
      <li><a href="#people">少司命</a></li>
      <li><a href="#baifeng">白凤</a></li>
      <li><a href="#course">最新视频</a></li>
      <li><a href="#app">往季信息</a></li>
      <li><a href="#contact">最新资讯</a></li>
    </ul>
  </div>
  <!--导航-->
</div>
</nav>
<!--home-->
<section id="home"><!--栅格系统觉得不错的博客https://www.cnblogs.com/chessYu/p/7337018.html-->  <!--section区段-->
  <div class="lvjing">
    <div class="container">
      <div class="row wow fadeInDown" data-wow-duration="1s" data-wow-delay="0.5s" data-wow-iteration="1">
        <!--给使用对象添加class="wow animate"  animate是http://daneden.github.io/animate.css/网站里面的效果
        可用属性data-wow-duration(动画持续时间)  data-wow-delay(动画延迟时间)data-wow-offset(偏移量)
        本动画距离可视区域多远开始执行动画     data-wow-iteration="10"(重复次数)-->
        <div class="col-md-1"></div>
        <div class="col-md-10">
          <h1>秦时明月之沧海横流</h1>
          <p>
            《秦时明月之沧海横流》是国产大型3D动画《秦时明月》系列的第六部。<br/>
            (故事背景取自秦始皇统一六国到咸阳城被攻陷这段英雄辈出的历史时期,是一部以武侠为主题的全民型动漫)
          </p>
          <img src="images/homecenter.jpg"  class="img-responsive"  alt="秦时明月图">
          <!--class="img-responsive" 图片响应式-->
        </div>
        <div class="col-md-1"></div>
      </div>
    </div>
  </div>
</section>
<!--home-->
<!--bbs-->
<section id="bbs">
    <div class="container">
      <div class="row wow swing" data-wow-duration="1s">
        <div class="col-md-4">
          <a href="https://baike.so.com/doc/3332135-3509278.html" alt="秦时明月官网" target="_blank">
          <img src="images/a.png"  class="img-responsive"  alt="秦时明月图">
          <h3>精彩图一</h3>
          <p>有些梦想虽然遥不可及,但不并是不可能实现,只要我足够的强。 </p>
          </a>
        </div>
        <div class="col-md-4">
          <a href="https://baike.so.com/doc/3332135-3509278.html" alt="秦时明月官网" target="_blank">
          <img src="images/b.png"  class="img-responsive"  alt="秦时明月图">
          <h3>精彩图二</h3>
          <p>杀戮永远不是变强的理由,一个人,若以打败别人而证明自己,那他就已经输了.  </p>
          </a>
        </div>
        <div class="col-md-4">
          <a href="https://baike.so.com/doc/3332135-3509278.html" alt="秦时明月官网" target="_blank">
          <img src="images/c.png"  class="img-responsive"  alt="秦时明月图">
          <h3>精彩图三</h3>
          <p>这个世上,胜者生,而败者亡,在世事的胜负面前,生与死不过是必然的因果。</p>
          </a>
        </div>
      </div>
    </div>
</section>
<!--bbs-->

<!--people-->
<section id="people">
  <div class="container">
    <div class="col-md-6 wow fadeInLeft">
    <h2>少司命</h2>
    <p>少司命,中国首部3D武侠动漫《秦时明月》系列中的职位</p>
    <p><span class="glyphicon glyphicon-bell detail"></span>掌管五行派系中的木部,与云中君、大司命、
      湘君、湘夫人并列阴阳家五大长老之一。</p>
    <!--可以去网站https://v3.bootcss.com/组件里面找一个图标名称复制过来即可。-->
    <p><span class="glyphicon glyphicon-bell detail"></span>传说她美若天仙,但这世上还没有人
      见过她面纱之下的真正面目。自登场起就没有说过一句话,是一位迷之少女,阴阳功力相当雄厚。</p>
  </div>
  <div class="col-md-6 wow rotateIn">
    <img src="images/1.jpg" class="img-responsive"  alt="少司命">
  </div>

  </div>
</section>
<!--people-->

<!--baifeng-->
<section id="baifeng">
  <div class="container wow zoomIn">
    <div class="col-md-6 ">
      <img src="images/2.jpg" class="img-responsive"  alt="白凤">
    </div>
  <div class="col-md-6 ">
    <h2>白凤</h2>
    <p>白凤凰,又称白凤,中国3D武侠动画《秦时明月》系列中的原创男性角色</p>
    <p><span class="glyphicon glyphicon-bell detail"></span>神秘优雅的白衣美男子,轻功举世无双,能够借助
      鸟类或羽毛飞翔,时常驾驭着白色的巨鸟在天空飞过。</p>
    <!--可以去网站https://v3.bootcss.com/组件里面找一个图标名称复制过来即可。-->
    <p><span class="glyphicon glyphicon-bell detail"></span>天赋异禀,具有控制与指挥鸟类的能力,
      被称为"百鸟之王"。加入以卫庄为首领的杀手组织"流沙"。</p>
  </div>
  </div>
</section>
<!--baifeng-->

<section id="course">
  <div class="container">
    <div class="row wow wobble" >
      <div class="col-md-12">
        <h2>最新视频</h2>
      </div>
      <div class="col-md-3">
        <div class="course" align="center" ><!--让图片与按钮居中-->
          <img src="images/11.png" class="img-responsive" alt="">
          <a href="https://neets.cc/detail/QYgqnh5qMaJLjVkJdY812W" class="btn btn-primary" target="_blank"  role="button">
            <!--.btn	为按钮添加基本样式  .btn-primary	原始按钮样式(未被操作)-->
            <!--role属性告诉辅助设备(如屏幕阅读器)这个元素所扮演的角色。增强组件的可访问性、可用性和可交互性-->
            点击观看
          </a>
        </div>
      </div>
      <div class="col-md-3">
        <div class="course" align="center" >
          <img src="images/22.png" class="img-responsive" alt="">
          <a href="https://neets.cc/detail/XYs19SvxSeDoCLZDVFfbGA" class="btn btn-primary" target="_blank"  role="button">
            点击观看
          </a>
        </div>
      </div>
      <div class="col-md-3">
        <div class="course" align="center" >
          <img src="images/33.png" class="img-responsive" alt="">
          <a href="https://neets.cc/detail/B8AJtV6ctxTTvTkTA2APNo" class="btn btn-primary" target="_blank"  role="button">
            点击观看
          </a>
        </div>
      </div>
      <div class="col-md-3">
        <div class="course" align="center" >
          <img src="images/44.png" class="img-responsive" alt="">
          <a href="https://neets.cc/detail/5sjshAn5GWQoN7hFxjpazj" class="btn btn-primary" target="_blank"  role="button">
            点击观看
          </a>
        </div>
      </div>
      <div class="col-md-3">
        <div class="course" align="center" >
          <img src="images/55.png" class="img-responsive" alt="">
          <a href="https://neets.cc/detail/215085b4e76b4b23b42e39d788b1afc9" class="btn btn-primary" target="_blank"  role="button">
            点击观看
          </a>
        </div>
      </div>
      <div class="col-md-3">
        <div class="course" align="center" >
          <img src="images/66.png" class="img-responsive" alt="">
          <a href="https://neets.cc/detail/LyQr9FuAuuqTiWKBXnup4t" class="btn btn-primary" target="_blank"  role="button">
            点击观看
          </a>
        </div>
      </div>
      <div class="col-md-3">
        <div class="course" align="center" >
          <img src="images/77.png" class="img-responsive" alt="">
          <a href="https://neets.cc/detail/LwuJBWgtcArybTHSG7WhRh" class="btn btn-primary" target="_blank"  role="button">
            点击观看
          </a>
        </div>
      </div>
      <div class="col-md-3">
        <div class="course" align="center" >
          <img src="images/88.png" class="img-responsive" alt="">
          <a href="https://neets.cc/detail/6hfMqc8dYcA3ZVpFFEAYx5" class="btn btn-primary" target="_blank"  role="button">
            点击观看
          </a>
        </div>
      </div>
    </div>
  </div>

</section>

<!--app-->
<section id="app">
  <div class="container">
    <div class="row  ">
      <div class="col-md-6 wow tada "data-wow-iteration="2">
        <h2>秦时明月之君临天下往季信息</h2>
        <p>
          网络动画《秦时明月之君临天下》是由沈乐平执导,杭州玄机科技信息技术有限公司出品的中国3D武侠动画《秦时明月》系列的第五部作品。
          动画讲述了天明、少羽、石兰三人误打误撞登上了停泊在海边的蜃楼后开始了奇幻莫测的探险逃亡之旅的故事  。
        </p>
        <button class="btn btn-primary">
          <span class="glyphicon glyphicon-download-alt"></span>
          <a href="http://www.llduang.com/91790.html">迅雷地址</a>
        </button>
        <button class="btn btn-primary">
          <span class="glyphicon glyphicon-download-alt"></span>
          <a href="https://zhidao.baidu.com/question/1696491878823702668.html">网盘地址</a>
        </button>
      </div>
      <div class="col-md-6 wow jello">
        <img src="images/app-banner.jpg" class="img-responsive" alt=""/>
      </div>
    </div>
  </div>
</section>
<!--app-->

<!--contact-->
<section id="contact">
  <div class="lvjing">
    <div class="container">
      <div class="row">
        <div class="col-md-6  wow fadeInLeft">
          <h2>
            <span class="glyphicon glyphicon-send"></span>
            &nbsp;
            最新秦时资讯
          </h2>
          <p>
            做中国动画,讲中国的侠。未来可期,与君相约,沧海横流! ​​​​
            沧海明珠月无缺,万江奔海化冬雪。
            《秦时明月陆沧海横流》暖冬预告即将上线!
            你们期待的终将化“雪”而来!
            这个冬天,期待与你惊喜相逢的那天!玄机现在更新的是三部动画,武庚纪,天行九歌,斗罗大陆.
            天行九歌第一季终,秦时明月新季可期!
          </p>
          <address>
            <p>
              <span class="glyphicon glyphicon-home"></span>
              &nbsp;
              地址:杭州玄机科技信息技术有限公司
            </p>
            <p>
              <span class="glyphicon glyphicon-phone-alt"></span>
              &nbsp;
              联系电话:4006661551
            </p>
            <p>
              <span class="glyphicon glyphicon-envelope"></span>
              &nbsp;
              邮箱:kefu@52qinshi.com
            </p>
          </address>
        </div>
        <div class="col-md-6  wow fadeInRight" >
          <form action="#" method="post" role="form">
            <!--当提交表单时,发送表单数据到名为 "#" 的文件-->
                      <!--Bootstrap 表单  向父 <form> 元素添加 role="form"。
                      把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
                      向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
                      placeholder 属性提供可描述输入字段预期值的提示信息(hint)。
                      该提示会在输入字段为空时显示,并会在字段获得焦点时消失。-->
                          <div  class="col-md-6">
                              <input type="text" class="form-control" placeholder="您的姓名"/>
                          </div>
                          <div class="col-md-6">
                              <input type="email" class="form-control" placeholder="您的邮箱"/>
                          </div>
                          <div class="col-md-12">
                              <input type="text" class="form-control" placeholder="标题"/>
                          </div>
                          <div class="col-md-12">
                              <textarea class="form-control" placeholder="留言内容" rows="4"></textarea>
                            <!--想要显示placeholder里面的内容,中间必须不能有内容-->
                          </div>
                          <!--<textarea> 标签定义一个多行的文本框。文本区域中可容纳无限数量的文本
           可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小,不过更好的办法是使用 CSS 的 height 和 width 属性。-->
                          <div class="col-md-8">
                              <input type="submit" class="form-control" value="提交"/>
                          </div>
                      </form>
                  </div>
              </div>
          </div>
      </div>
  </section>
  <!--contact-->
<footer>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <p>
          The Legend of Qin秦時明月。前5部正片(共175集)已完结;第6部上映中,敬请期待。
        </p>
      </div>
    </div>
  </div>
</footer>
<!--suppress JSUnresolvedLibraryURL -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<!--js的下载和执行可能影响主页的内容。script标签放在body底部,不会影响首屏时间-->
<!--放到body结束标签的末尾,无需担心因页面未完成加载,造成DOM节点获取不到,使脚本报错的问题
而且能避免因脚本运行缓慢造成页面卡死的问题。-->
<script src="js/jquery.singlePageNav.min.js"></script>
<script src="js/wow.min.js"></script>

<script>
  /* $就是jquery对象,$()就是jQuery(),在里面可以传参数,作用就是获取元素*/
  /* $.function();就是 选取 JQuery 定义的 function() 执行*/
  /* jquery里面的$有查找,选取的意思,如$("#test")就是选取id为test的对象*/

  $(function(){
    /*导航跳转效果插件*/
    $('.nav').singlePageNav({
      offset:40/*此函数点击缓慢跳转*/ /*向上偏移量,原本是被覆盖导航条高度70,现在去掉*/
    });

    /*小屏幕导航点击关闭菜单,click点击时候执行方法*/
    $('.navbar-collapse a').click(function(){
      $('.navbar-collapse').collapse('hide');
    });
    new WOW().init();
  })
</script>

</body>
</html>
body{
  font-family: "Microsoft YaHei",sans-serif;
}
.detail{
  background: #40d2b1;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;/*设置圆角边框*/
  text-align: center;
  line-height: 3;
  margin-right: 15px;
}

.navbar-default{
  box-shadow: 0px 2px 8px 0px rgba(50,50,50,0.25);
  /*向框增加阴影box-shadow: h-shadow必需。水平阴影的位置 v-shadow必需。垂直阴影的位置。
    blur后面均可选。模糊距离。 spread 阴影的尺寸  color 阴影的颜色*/
  background-color: #fff;
}
.navbar-header .navbar-brand{
  font-size: 30px;
  font-weight: bold;
  color: #40D2B1;
  height: 70px;
  line-height: 35px;
}
.navbar-default .navbar-nav > li > a{
  font-size: 16px;
  font-weight: bold;
  color: #666;
  height: 70px;
  line-height: 35px;
}
.navbar-default .navbar-toggle .icon-bar{
  background-color:rgba(110, 231, 203, 1);
}
.navbar-default .navbar-toggle:hover{
  border-color:#40d2b1;
  background-color:rgba(91, 185, 153, 1);
}
.navbar-toggle{
  margin-top:17px;
}
/*home*/
#home{
  margin-top: 70px;/*距离最上面70px*/
  background:url("../images/homebg.jpg");
  background-size: cover;
  color:#ffffff;
  text-align:center;
  width: 100%;

}
.lvjing{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);/*前面为红黄蓝的混合。最后为透明度0-1的越大越暗*/
  padding: 90px,0;
}

#home h1{
  font-weight: bold;
  margin-top: 75px;/*在这个块里距离上面75px*/

}

#home p{
  font-weight: bold;
  line-height: 30px;
}
#home img{
  margin-top: 30px;
  display: inline-block;
  padding-bottom: 50px;
  /*块级对象元素会单独占一行显示,多个block元素会各自新起一行,并且可以设置width,height属性;*/
  /*而内联对象元素前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满,
  对inline元素设置width,height属性无效。*/
  /*既希望元素具有宽度高度特性,又具有同行特性,这个时候我们可以使用inline-block。*/
  /*将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。*/ }/*bbs*/
#bbs{
  padding: 80px 0;/*上下80左右0在缩小时顶左右格*/
  text-align: center;
}
#bbs a{
  color:#212121;
  text-decoration:none;/*去掉链接下面的下划线*/
}
#bbs img{
  margin: 0,auto;/*图片居中*/
}
#bbs h3{
  font-weight: bold;
}
#bbs .col-md-4{
  padding: 15px;
}
#bbs .col-md-4:hover{/*浮动在上面*/
   background: #f1e1ed;
   box-shadow:1px 1px 4px #ccc;
}
#people img,#baifeng img{
  height: 300px;
  width: 400px;
}
#people,#baifeng{
  background: #f8f8f8;
  padding: 80px 0;/*设置此块的外间距上下80 左右0*/
}
#people h2,#baifeng h2{
  font-weight: bold;
}
#people p,#baifeng p{
  line-height: 25px;
}

#course{
  background: #f8f8f8;
  padding: 80px 0;
  text-align:center;
  /*padding-bottom底部填充边距   padding上右下左  内容 内边距padding 边框border 外边框margin*/
}

#course h2{
  font-weight: bold;
  padding-bottom: 60px;
}

#course .col-md-3{
  margin-bottom: 30px;
}

#course .btn{
  background: transparent;/*全透明*/
  border: 1px solid #40D2B1;/*dotted solid double dashed;点状 实线 双线 虚线*/
  border-radius: 0px;/*圆角边框*/
  color: #40D2B1;
  margin-top: 20px;
  margin-bottom: 30px;
  padding: 8px 20px;
  transition: all 3s;
}
/* transition 过渡,把鼠标指针放到btn元素上,其背景颜色会用2s变化成hover规定的*/
#course .btn:hover{
  background: #1a1fd2;
  color: #fff;
}
#course img{

  width: 500px;
  height: 260px;

}

#app{
  padding: 80px 0;

}

#app p{
  line-height: 30px;
}

#app h2{
  font-weight: bold;
  padding-bottom: 30px;
}
#app .btn{
  margin: 10px 0;
  background: rgb(64, 210, 177);
  border-color: rgb(64, 210, 177);
  border-radius: 0px;
  padding: 6px 30px;
  transition: all 2s;

}

#app .btn:hover{
  background: rgb(142, 13, 141);
}
#app img{
  width: 500px;
  height: 260px;
}
/*contact*/
#contact{
  background: url("../images/contact-bg .jpg") no-repeat;
  background-size: cover;/*全覆盖整个块*/
  color: #ffffff;/*里面的字体颜色白色*/
  /*height: 500px;一开始加上显示图片,再删除掉为了自适应屏幕大小*/
}
#contact h2{
  font-weight: bold;
  margin-top: 85px;
  margin-bottom: 25px;
}
#contact p{
  line-height: 25px;
  margin-bottom: 20px;
}

#contact form{
  margin-top: 85px;
}/*整体的外间距85Px,和左侧的高度对齐了*/

#contact .form-control {
  border: none;/*去掉边框*/
  border-radius: 0;/*去掉圆角*/
  height: 70px;
  margin-bottom: 20px;
}
#contact textarea.form-control{
  height: auto;/*自适应高度*/
}
#contact input[type="submit"]{/*选取Input里面的submit属性*/
  background: #40D2B1;
  color: #fff;
  font-weight: bold;
  transition: all 2s;
}
#contact input[type="submit"]:hover{
  background: rgb(102, 30, 142);
}

footer{
  font-weight: 500px;/*400px正常,700px相当于bold*/
  text-align: center;
  padding: 20px;
}

 

 

2019-11-20 11:17:30 weixin_42213903 阅读数 16

上一章节

Vue-cli实战项目5 vue-route的再次封装

布局

使用了Bootstrap的网格布局
Bootstrap的网格布局API

组件

Bootstrap卡片API
Element表单API

在这里插入图片描述

完整代码

<template>
	<div class="container">
		<div class="row">
			<div class="col-12 col-sm-10 col-md-7 col-lg-5 m-auto pt-5" style="height: 500px">
				<div class="card mt-5">
					<div class="card-header bg-white">
						<h3 class="text-center mb-0 text-secondary">UNI-ADMIN</h3>
					</div>
					<div class="card-body">
						<el-form ref="form" :model="form">
							<el-form-item>
								<el-input v-model="form.username" size="medium" placeholder="请输入用户名"></el-input>
							</el-form-item>
							<el-form-item>
								<el-input v-model="form.password"  size="medium" placeholder="请输入密码" 
								type="password">
								</el-input>	
							</el-form-item>
							<el-form-item>
								<el-button type="primary" size="medium" class="w-100">登陆</el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data() {
			return {
				form: {
					username:"",
					password:""
				}
			}
		},
	}
</script>

<style>
</style>

下一章节

Vue-cli实战项目6 表单验证功能

2019-01-30 23:45:50 kevinfan2011 阅读数 1339

       今天做的是实现点击input框时弹出下拉选择菜单,点击下拉列表中要搜索将数据赋值给input框,然后再加个清楚按钮,当input框没有数据的时候隐藏,当有数据输入的时候就显示改功能,下面是功能演示。

      首先我们先来设计input框加搜索按钮,这里我们直接用字体图标来实现, 我引用了bootstrap和element-ui的字体图标,所以直接在i标签中加入对应的图标样式即可。

<div class="search">
  <em>
      <input type="text"  placeholder="请输入搜索信息">
      <i class="el-icon-close clear_x"</i>
      <i class="glyphicon glyphicon-search"></i>
  </em>        
</div>

       接着我们为这几个元素设置样式,这里我们把input自带的边框给清除了,包括获取焦点之后的边框也给清除了,为了避免删除按钮因隐藏再显示而导致input框有长度变化,所以这里我们就用了个相对/绝对位置将删除按钮移到了input框中,这样就不会出现一下长一下短的问题了,这样我们就得到了一个带删除按钮的搜索框。

.search{
   background-color: white;
   display: flex;
   align-items: center;
   position: relative;  //绝对位置
}
.search input{
    padding:5px; 
    font-style: normal;
    border:none;   //input框的边框不显示
}
.search input:focus{
    outline:none;  //input框的边框获取时不显示
}
.search .clear_x{
    position: absolute;  //相对位置
    width:25px;
    top:3px;
    right:25px; 
    border-right:1px solid rgb(190, 187, 187); 
}
.search i{
    padding:5px;
}

      当然还有一种方法就是我们在删除按钮外再加个div,然后给个宽高,这样再隐藏就不会收缩了,可以给删除按钮占个位,同样可以达到效果的。

     实现数据清除功能,这个只要在input中绑定了v-mode数据,在删除按钮上绑定一个click点击事件,当点击按钮时就将input框中的数据清空,这时我们只要点击删除按钮就可以清除input中的数据了。

//html
 <em>
     <input v-model="searchpro" type="text"  placeholder="请输入搜索信息" >
     <i class="el-icon-close clear_x"  @click="cleardata"></i>
     <i class="glyphicon glyphicon-search"></i>
</em>

//script
 cleardata(){
    this.searchpro='';
}

     但是没数据的时候删除按钮放那里是不是很难看,我要实现有数据时才显示,没数据时就隐藏的效果,这时我们就要对searchpro进行判断了,当没有数据时就隐藏,有数据时就显示,这里我们用到v-if的功能。

<i class="el-icon-close clear_x" v-if="searchpro == '' ? false : true" @click="cleardata"></i>

      这时我们已经实现了简单的input删除数据功能,接着我还想要有提示,当input获取焦点时我就弹出下拉框,显示最近的搜索数据,提高用户体验,所以这里我们在添加一个列表选项。

 <div class="search_menu">
     <ul class="input_list">
        <li v-for="(pro,index) in input_list" :key="index">
            <i>{{pro.id}} : </i>{{pro.name}}
        </li>
     </ul>
</div>

       因为我们要在input框下显示,所以这里我用到的相对/绝对定位来放置该元素,这个有个特点因为引用了bootstrap样式,所以底部会多出10px的外边框样式,这样需要手动清除下,隐藏显示我们直接用css样式搞定,将列表默认隐藏,当上层元素获取焦点的时候将该元素的样式显示出来(重点是将获取焦点放置上层元素)。

.search_menu{
    border-top:5px solid #3388FF;
    display: none;
    background-color: gold;
    position: absolute;
    top:30px;
    width:100%;
}
.search_menu ul{
    margin-bottom: 0;  //去除ul的底部外边距
}
.search_menu li {
    padding: 5px;
    font-size: 1.1em;
    cursor: pointer;
}
.search_menu li:hover{
    background-color: beige;
}
.search:hover .search_menu {
    display: block;
}

 而li标签我们只要将其点击时的样式更改下,这样当我们选中某个样式时就可以与其他样式进行区分了,这里我们用黄色只是为了更好的区分元素之间的关系,当我们把样式调好之后在改成自己需要的样式即可。

       最后就是赋值了,当我选中列表中的元素时我要把这个数据填充到input框中去,这时我们就要给列表添加点击事件@click="select(pro),通过select方法,最后就是搜索按钮的实现了,这样要跟后台交互获取数据(当然也可以在点击列表中的数据时直接提交搜索,这样会更简单便捷,就看个人需求了)。

//html
<li v-for="(pro,index) in input_list" :key="index" @click="select(pro)">
    <i>{{pro.id}} : </i>{{pro.name}}
</li>

//script
 select(pro){
   this.searchpro=pro.name;
},

百度经验:vue实战开发006:制作input输入及下拉选择搜索框

没有更多推荐了,返回首页