公共样式---pc版的404报错

动态src

这个是vue组件template部分

 <div class="not-found">
<img :src="img" alt="404">
</div>
<div>{{fish}}</div>

script部分

import './404.css'   //先引入less
import img from './error-404.png'
export default {
name: 'HelloWorld',
data () {
return {
msg: '你还没有登录,请先登录',
img, //es6用法 等同于 img:img
fish:'你好'
}
}
}

引入的404.css部分

.not-found {
margin: 10% 0 0;
text-align: center;
}

下面是现象

公共样式loading pc端,根据传过来的参数,来显示loading

style用法

父组件:

<template>
<!-- 显示loading -->
<Load :option="test"></Load>
</div>
</template>
<script>
import load from './loading'
export default {
name: 'HelloWorld',
data () {
return {
msg: '你还没有登录,请先登录',
test:{
show:true,
progress:60
}
}
},
components:{
Load:load
}
}
</script>

子组件

<template>
<div class="hello">
哈哈哈
<!-- 显示loading -->
<div class="loadingbar-wrapper" v-show="option.show">
<div id="loadingbar" class="waiting" :style="{ width: option.progress+'%'}">
<dt></dt><dd></dd>
</div>
</div> </div>
</template> <script> export default {
name: 'HelloWorld',
props:['option'],
data () {
return {
msg: '你还没有登录,请先登录'
}
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
@import "../assets/var.less";
@loading-bar-color: @color-white;
#loadingbar {
position: fixed;
z-index: 2147483647;
top: 100px;
left: -6px;
width: 1%;
height: 2px;
background: @loading-bar-color;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
-webkit-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
} #loadingbar.left {
left: 100%;
right: 0px;
width: 100%;
} #loadingbar.up {
left: 0px;
top: 100%;
width: 5px;
bottom: 0px;
height: 100%;
} #loadingbar.down {
left: 0;
width: 5px;
height: 0;
} #loadingbar.waiting dd, #loadingbar.waiting dt {
-moz-animation: pulse 2s ease-out 0s infinite;
-ms-animation: pulse 2s ease-out 0s infinite;
-o-animation: pulse 2s ease-out 0s infinite;
-webkit-animation: pulse 2s ease-out 0s infinite;
animation: pulse 2s ease-out 0s infinite;
} #loadingbar dt {
opacity: .6;
width: 180px;
right: -80px;
clip: rect(-6px,90px,14px,-6px);
} #loadingbar dd {
opacity: .6;
width: 20px;
right: 0;
clip: rect(-6px,22px,14px,10px);
} #loadingbar dd, #loadingbar dt {
position: absolute;
top: 0;
height: 2px;
-moz-box-shadow: rgb(255, 156, 50) 1px 0 6px 1px;
-ms-box-shadow: rgb(255, 156, 50) 1px 0 6px 1px;
-webkit-box-shadow: rgb(255, 156, 50) 1px 0 6px 1px;
box-shadow: rgb(255, 156, 50) 1px 0 6px 1px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
} #loadingbar.left dt {
opacity: .6;
width: 180px;
left: -4px;
clip: rect(-6px,185px,14px,25px);
} #loadingbar.left dd {
opacity: .6;
width: 20px;
left: 0;
margin: 0;
clip: rect(-6px,22px,14px,0px);
} #loadingbar.left dd, #loadingbar.left dt {
top: 0;
height: 2px;
} #loadingbar.down dt {
opacity: .6;
height: 180px;
top: auto;
bottom: -47px;
clip: rect(-6px,20px,130px,-6px);
} #loadingbar.down dd {
opacity: .6;
height: 20px;
top: auto;
bottom: 0;
clip: rect(-6px,22px,20px,10px);
margin: 0;
} #loadingbar.down dd, #loadingbar.down dt {
left: -5px;
right: auto;
width: 10px;
} #loadingbar.up dt {
opacity: .6;
height: 180px;
bottom: auto;
top: -10px;
clip: rect(13px,20px,190px,-6px);
} #loadingbar.up dd {
opacity: .6;
height: 20px;
bottom: auto;
top: 0;
clip: rect(-6px,22px,25px,10px);
margin: 0;
} #loadingbar.up dd, #loadingbar.up dt {
left: -5px;
right: auto;
width: 10px;
} @keyframes pulse {
30% { opacity:0.6; }
60% { opacity:0; }
100% { opacity:0.6; }
} @-moz-keyframes pulse
{
30% { opacity:0.6; }
60% { opacity:0; }
100% { opacity:0.6; }
} @-ms-keyframes pulse
{
30% { opacity:0.6; }
60% { opacity:0; }
100% { opacity:0.6; }
} @-webkit-keyframes pulse
{
30% { opacity:0.6; }
60% { opacity:0; }
100% { opacity:0.6; }
} .loadingbar-wrapper {
position: absolute;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
} .loadingbar-wrapper::after {
position: absolute;
right: 5px;
top: 10px;
z-index: 1001;
content: '';
width: 16px;
height: 16px;
border-radius: 100%;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
border: 2px solid @loading-bar-color;
border-bottom-color: transparent;
-webkit-animation: rotate 0.75s 0s linear infinite;
animation: rotate 0.75s 0s linear infinite;
} @keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg) }
}
</style>

效果 :



这个位置会根据传过来的数不一样而移动,这里主要是父传子的实际应用吧~

vue的基本用法的更多相关文章

  1. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  2. checkbox在vue中的用法小结

    关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...

  3. checkbox在vue中的用法总结

    前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样, 之前对于 ...

  4. Vue slot 插槽用法:自定义列表组件

    Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...

  5. Vue SSR: 基本用法 (二)

    上一篇讲解了ssr的原理,这篇主要讲基本用法: 1.安装 npm install vue vue-server-renderer --save 我们将在整个指南中使用 NPM,但你也可以使用 Yarn ...

  6. cdn模式下vue的基本用法

    我们知道jq是简化了dom操作,而react和vue则是通过使用虚拟dom的方式,不需要频繁的更改ui界面,而是通过更改数据的方式来更新界面. 我们知道些jq插件时会在IFFE中传入jQuery,jQ ...

  7. vue watch详细用法

    在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法 html: <input type="text" v-model ...

  8. vue路由高级用法

    五.路由设置高级用法alias 别名 {path:'/list',component:MyList,alias:'/lists'}redirect 重定向 {path:'/productList',r ...

  9. vue 事件基本用法

    事件基本用法 事件的函数都定义在VUE实例中的methods中,当然也可以直接写在元素内,但是这并不利于后期的维护,需要注意的是:在methods定义的函数内想要引用插值内容,需要使用this,不然就 ...

随机推荐

  1. vue混入 (mixin)的使用

    混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项. 使用示 ...

  2. 这些方面做好了才能叫运营-App运营日常

    现在APP的开发推广是时代的潮流,同时也是不少企业的难题.现在我们就来谈谈APP运营的一些问题. 1. 基础运营正常维护产品最日常.最普通的工作,如APP应用包在各大应用市场提交上传等,如安卓渠道,包 ...

  3. Vivado生成及使用edf文件

    前言 EDF文件可以直接导入Vivado,而无需Verilog源文件. 好处: (1)    避免沙雕队友修改源代码,则可以直接提交EDF网表文件. (2)    避免用户剽窃劳动成果. (3)    ...

  4. 网络基础 InetAddress

    IP地址是IP使用的32位(IPv4)或者128位(IPv6)位无符号数字,它是传输层协议TCP,UDP的基础.InetAddress是Java对IP地址的封装,在java.net中有许多类都使用到了 ...

  5. poi 读取word 遍历表格和单元格中的图片

    背景 项目需要解析word表格 需要批量导入系统,并保存每行信息到数据库 并且要保存word中的图片, 并保持每条信息和图片的对应关系 一行数据可能有多条图片 解决办法 没有找到现成的代码,怎么办呐? ...

  6. iveiw DatePicker 只能选择本月之前的日期,本月包括之后都不能选择

    日期判断只能选择本月之前的日期 <DatePicker type="date" :options="options3" format="yyyy ...

  7. Linux命令——uptime

    参考:linux中uptime命令查看linux系统负载 Linux uptime command 简介 uptim告诉你系统运行了多长时间.uptime命令提供单行显示的输出,包含如下信息: 当前时 ...

  8. python返回值的缺省设置

    有时候并不需要返回所有的值,但是原始函数的return语句中又有较多参数时: 方法一:修改原始返回值,只返回需要的参数 方法二:如果原始函数时第三方库或者python自带库,则直接修改可能不太好,于是 ...

  9. 在Linux中安装ASPNET.Core3.0运行时

    # 以下示例适用于x64位runtime v3.0.0 mkdir /runtimes cd /runtimes wget https://download.visualstudio.microsof ...

  10. OAuth2在微服务架构中的应用

    首先是为什么要在微服务场景使用OAuth2,这是因为使用了OAuth2后,就能向第三方系统提供授权. 其次是如何使用,见下图: 在微服务架构中使用OAuth2,有几个问题需要我们思考: 1. toke ...