vue的基本用法

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

公共样式---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>