vue 小细节功能

Loading

1、样式如图：

2、在 src/components/shared 里面新建 Loading.vue 组件，里面添加如下代码：

<template>
  <div class="loading">
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
  </div>
</template>

<style>
.loading {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  margin-top: 100px;
  position: relative;
  -webkit-animation: load 3s linear infinite;
}

.loading div {
  width: 100%;
  height: 100%;
  position: absolute;
}

.loading span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FF6666;
  position: absolute;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
  -webkit-animation: changeBgColor 3s ease infinite;
}

@-webkit-keyframes load {
  0% {
    -webkit-transform: rotate(0deg);
  }
  33.3% {
    -webkit-transform: rotate(120deg);
  }
  66.6% {
    -webkit-transform: rotate(240deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes changeBgColor {
  0%, 100% {
    background: #99CC66;
  }
  33.3% {
    background: #FFFF66;
  }
  66.6% {
    background: #FF6666;
  }
}

.loading div:nth-child(2) {
  -webkit-transform: rotate(120deg);
}

.loading div:nth-child(3) {
  -webkit-transform: rotate(240deg);
}

.loading div:nth-child(2) span {
  -webkit-animation-delay: 1s;
}

.loading div:nth-child(3) span {
  -webkit-animation-delay: 2s;
}
</style>

3、在 main.js 中，全局注册该组件

.
.
import Loading from "./components/shared/Loading";

Vue.component("Loading", Loading);
.
.

4、在views/Home.vue 中，添加如下代码：

<template>
  <div id="wrapper">
    <Loading v-if="loading" />   <!-- Loading 为 true 时加载-->
    <div class="page-index" id="home" data-log="首页" v-else>  <!-- Loading 为 false 时加载-->
      .
      .
      .
    </div>
  </div>
</template>

<script>
import request from "../utils/request";

export default {
  name: "Home",
  data() {
    return {
      loading: false  // 默认不加载 Loading
    };
  },
  created() {
    this.loading = true;  // 当访问页面时，开启 Loading
    this.init();  // 读取接口
    setTimeout(() => {
      this.loading = false;  // 当接口读完后，延迟 1 秒关闭 Loading
    }, 1000);
  },
  methods: {
    async init() {
      const res = await request.get("xxx");
      // 这里是赋值
    }
  }
};
</script>

Top

1、在 src/components/shared 里面新建 Top.vue 组件，里面添加如下代码：

<template>
  <div id="top">
    <a href="javascript:;" v-show="goTopShow" @click="goTop">
      <img src="https://image.holyzq.com/top.png">
    </a>
  </div>
</template>
<script>
export default {
  name: "Top",
  data() {
    return {
      scrollTop: "",
      goTopShow: false
    };
  },
  watch: {
    scrollTop() {
      if (this.scrollTop > 300) {
        this.goTopShow = true;
      } else {
        this.goTopShow = false;
      }
    }
  },
  methods: {
    handleScroll() {
      this.scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (this.scrollTop > 300) {
        this.goTopShow = true;
      }
    },
    goTop() {
      let timer = null,
        _that = this;
      cancelAnimationFrame(timer);
      timer = requestAnimationFrame(function fn() {
        if (_that.scrollTop > 0) {
          _that.scrollTop -= 250;
          document.body.scrollTop = document.documentElement.scrollTop =
            _that.scrollTop;
          timer = requestAnimationFrame(fn);
        } else {
          cancelAnimationFrame(timer);
          _that.goTopShow = false;
        }
      });
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  }
};
</script>

<style scoped>
#top {
  position: fixed;
  bottom: 1.4rem;
  right: 0.26rem;
  width: 0.7rem;
  height: 0.7rem;
  overflow: hidden;
}

#top img {
  width: 100%;
  opacity: .3;
}
</style>

2、在 main.js 中，全局注册该组件

.
.
import Top from "./components/shared/Top";

Vue.component("Top", Top);
.
.

3、在views/Home.vue 首页中，添加如下代码：

<template>
  <div id="wrapper">
    <div class="page-index" id="home" data-log="首页">
     .
     .
     .
      <Top />
    </div>
  </div>
</template>

样式如图：

iconfont

1、进入阿里 图标库，登录自己的账号密码，如果没有账号，请先注册账号后登录。
2、在iconfont首页 点击资源管理后选择我的项目，如下图所示：

3、新建项目，在我的项目中，选择如下图所示的紫色按钮图标，点击后会出现新建项目的弹框，如下图所示：


3、在搜索框中搜索你想要的图标，并加入购物车，点击购物车，如下图所示：

4、按下图操作

5、将下载后的文件添加到vue项目中，解压后的文件如下，可以将demo相关的文件删除。


6、在main.js中引入icconfont.css

import "./assets/iconfont/iconfont.css";

7、组件中使用

<i class="iconfont icon-home"></i>

filter

我们写一些常用的过滤器，比如：时间日期格式化、手机号打星等。

1、首先装包：

// 两种方式自选
npm install moment --save   # npm
yarn add moment             # Yarn

2、在src文件夹中新建 filter 文件夹，里面新建 index.js 文件，里面添加如下代码：

import moment from 'moment';

/**
 * "Fri Dec 10 2021 01:01:49 GMT+0800 (China Standard Time)" => "2021年12月10日凌晨1点01分"
 * @param {number} num
 */
export function dateFormat(value) {
  if (!value) {
    return "";
  }

  moment.locale('zh-cn');
  return moment(value).format('LL');
}

/**
 * 10000 => "10,000"
 * @param {number} num
 */
export function thousandFormat(num) {
  const result = (+num || 0).toString().replace(/^-?d+/g, m => m.replace(/(?=(?!)(d{3})+$)/g, ','));
  return result + '元';
}

// 手机号打星
export function mobileFormat(value) {
  if (!value) {
    return "";
  }

  let reg = /^(.{3}).*(.{3})$/;
  return value.replace(reg, "$1****$2");
}

3、然后在 main.js 中全局引入并注册过滤器

.
.
import * as filters from "./filters";
.
.

// 注册全局过滤器
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key]);
});
.
.

4、组件中使用

<div>{{ product.createdAt|dateFormat }}</div>

省市区

参考地址：省市区

1、装包

npm install v-distpicker --save
或
yarn add v-distpicker --save

2、在需要加载的页面中引用并注册

import VDistpicker from "v-distpicker";

components: { VDistpicker },

3、加载样式

<v-distpicker type="mobile" @selected="showModal"></v-distpicker>

4、一个完整的例子

<template>
  <div id="wrapper">
    <div class="page-address-edit" data-log="地址">
    .
    .
    .
      <div class="ui-mask" v-if="show"></div>
      <div class="ui-pop" v-if="show">
        <div class="ui-pop-content">
          <div class="region-list">
            <v-distpicker type="mobile" @selected="showModal"></v-distpicker>
          </div>
        </div>
        <div class="ui-pop-title">选择所在地区</div>
        <div class="ui-pop-close" @click="closeModal"><a><span class="icon-10chahaokuang"></span></a></div>
      </div>
      <div class="popup-risk-check"></div>
    </div>
  </div>
</template>

<script>
import VDistpicker from "v-distpicker";

export default {
  components: { VDistpicker },
  data() {
    return {
      show: false,
    };
  },
  methods: {
    isSHow() {
      this.show = true;
    },
    showModal(data) {
      this.show = !this.show;
      this.address.pca = data.province.value + " " + data.city.value + " " + data.area.value;
    },
    closeModal() {
      this.show = false;
    },
  },
};
</script>

<style>
.page-address-edit .ui-pop-title {
  font-size: 14px;
  top: 9px !important;
}

.distpicker-address-wrapper .address-header ul li.active {
  font-size: 15px;
}

.distpicker-address-wrapper .address-header ul li {
  padding: 0 !important;
}

.distpicker-address-wrapper .address-container ul li {
  padding: 12px 10px !important;
}

.ui-pop-close {
  margin-top: 5px;
  margin-right: 5px;
}

.ui-pop .ui-pop-close span {
  font-size: 18px;
}
</style>

效果如图：