Vue常用方法

摇曳的精灵

已于 2023-11-19 22:55:01 修改

阅读量54

点赞数

分类专栏： # VUE 文章标签： vue.js 前端 javascript

于 2023-05-29 15:27:31 首次发布

本文链接：https://blog.csdn.net/qq_33271461/article/details/130928826

版权

VUE 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了在Vue项目中常用的CSS技巧，如div的水平居中，以及正则表达式在处理HTML文本中的应用。同时，详细讲解了RSA加密解密的步骤，包括导入JSEncrypt库并展示了加密解密过程。此外，还讨论了JavaScript中等于和全等的区别，以及时间格式化方法。最后，提到了Vue组件如dialog、popover的使用场景和一些组件的配置选项。

摘要由CSDN通过智能技术生成

Vue常用组件

div水平居中css

  justify-content: center;

正则表达式RegExp

 getSimpleText(html) {
      var re1 = new RegExp("<.+?>", "g") //匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
      var msg = html.replace(re1, "") //执行替换成空字符
      return msg
    },

rsa加解密
安装
在这里插入图片描述

引入

import JSEncrypt from 'jsencrypt'

rsa加密

var encryptor = new JSEncrypt()  // 创建加密对象实例
  //之前ssl生成的公钥，复制的时候要小心不要有空格
  var pubKey = '-----BEGIN PUBLIC KEY-----MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC1QQRl0HlrVv6kGqhgonD6A9SU6ZJpnEN+Q0blT/ue6Ndt97WRfxtSAs0QoquTreaDtfC4RRX4o+CU6BTuHLUm+eSvxZS9TzbwoYZq7ObbQAZAY+SYDgAA5PHf1wNN20dGMFFgVS/y0ZWvv1UNa2laEz0I8Vmr5ZlzIn88GkmSiQIDAQAB-----END PUBLIC KEY-----'
  encryptor.setPublicKey(pubKey)//设置公钥
  var rsaPassWord = encryptor.encrypt('要加密的内容')  // 对内容进行加密

rsa解密

var decrypt = new JSEncrypt()//创建解密对象实例
  //之前ssl生成的秘钥
  var priKey  = '-----BEGIN RSA PRIVATE KEY-----MIICXAIBAAKBgQC1QQRl0HlrVv6kGqhgonD6A9SU6ZJpnEN+Q0blT/ue6Ndt97WRfxtSAs0QoquTreaDtfC4RRX4o+CU6BTuHLUm+eSvxZS9TzbwoYZq7ObbQAZAY+SYDgAA5PHf1wNN20dGMFFgVS/y0ZWvv1UNa2laEz0I8Vmr5ZlzIn88GkmSiQIDAQABAoGBAKYDKP4AFlXkVlMEP5hS8FtuSrUhwgKNJ5xsDnFV8sc3yKlmKp1a6DETc7N66t/Wdb3JVPPSAy+7GaYJc7IsBRZgVqhrjiYiTO3ZvJv3nwAT5snCoZrDqlFzNhR8zvUiyAfGD1pExBKLZKNH826dpfoKD2fYlBVOjz6i6dTKBvCJAkEA/GtL6q1JgGhGLOUenFveqOHJKUydBAk/3jLZksQqIaVxoB+jRQNOZjeSO9er0fxgI2kh0NnfXEvH+v326WxjBwJBALfTRar040v71GJq1m8eFxADIiPDNh5JD2yb71FtYzH9J5/d8SUHI/CUFoROOhxr3DpagmrnTn28H0088vubKe8CQDKMOhOwx/tS5lqvN0YQj7I6JNKEaR0ZzRRuEmv1pIpAW1S5gTScyOJnVn1tXxcZ9xagQwlT2ArfkhiNKxjrf5kCQAwBSDN5+r4jnCMxRv/Kv0bUbY5YWVhw/QjixiZTNn81QTk3jWAVr0su4KmTUkg44xEMiCfjI0Ui3Ah3SocUAxECQAmHCjy8WPjhJN8y0MXSX05OyPTtysrdFzm1pwZNm/tWnhW7GvYQpvE/iAcNrNNb5k17fCImJLH5gbdvJJmCWRk=-----END RSA PRIVATE KEY----'
  decrypt.setPrivateKey(priKey)//设置秘钥
  var uncrypted = decrypt.decrypt(encrypted)//解密之前拿公钥加密的内容

== 和=== 的区别
两者都是判断等式两边是否相等，最大的区别就是== 会进行类型的转换之后再判断两者是否相等，而=不会进行数据类型的转换，先判断两边的数据类型是否相等，如果数据类型相等的话才会进行接下来的判断，再进行等式两边值得判断，可以理解为只有等式两边是全等（数据类型相同，值相同）的时候结果才会是true，否则全为false。
全等比较（=）两边是否相等的情况：

（1）类型不同，一定不相等

（2）两个同为数值，并且相等，则相等；若其中一个为NaN，一定不相等

（3）两个都为字符串，每个位置的字符都一样，则相等

（4）两个同为true,或是false，则相等

（5）两个值都引用同一个对象或函数，则相等，否则不相等（引用类型地址空间可能不一样）

（6）两个值都为null，或undefined，则相等

（7*）两者同为引用类型时，必须是指向同一个引用地址才相等，否则不相等（5的补充）

（8）-0 === +0 结果为：true

时间格式化moment

var moment = require("moment");
handleConfirm(val) {
      this.date = moment(this.currentDate).format("YYYY-MM");
      this.show = false;
      this.getData();
    }

dialog popup popover 这三个区别是什么？
dialog: 重度交互，有明确的确定、取消按钮，打断用户操作;

popup: 轻度交互，菜单，指向性操作等等，用户一两个操作即可完成功能;

popover: 无交互，各种提示信息
在这里插入图片描述

弹框el-dialog

 <el-dialog
    title="详情"
    v-loading="loading"
    :visible.sync="detailVisible"
    width="1200px"
    :before-close="detailClose"
    top="5vh"
    :close-on-click-modal="false"
  >

避免图片被压扁flex-shrink: 0

img {
      width: 0.12rem;
      vertical-align: middle;
      margin-right: 0.1rem;
      flex-shrink: 0;
    }

占三个位置:span=“3”

  <el-descriptions-item label="关键词" :span="3">

每行展示三个:column=“3”

 <el-descriptions :column="3" direction="vertical" :colon="false">

label同一行显示:inline

:inline="true"

是否显示label后的冒号:colon

<el-descriptions :column="3" direction="vertical" :colon="false">
        <el-descriptions-item label="文件名称">{{ info.fileName }}</el-descriptions-item>
        <el-descriptions-item label="文件类型">
          {{ info.fileType | getFileType(fileType) }}
        </el-descriptions-item>
        <el-descriptions-item label="监测状态">
          <span class="status" :class="info.status == 2 ? '' : info.status == 0 ? 'statusIng' : 'statusSuccess'">
            {{ info.status == 2 ? "草稿" : info.status == 0 ? "正在监测" : "监测完成" }}
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="发起时间">{{ info.createTime }}</el-descriptions-item>
        <el-descriptions-item label="监测周期" :span="2">7天</el-descriptions-item>
        <el-descriptions-item label="关键词" :span="3">
          <el-tag type="info" size="medium" v-for="(item, index) in info.keywords" :key="index">{{ item }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="备注" :span="3">
          {{ info.remark || "暂无备注" }}
        </el-descriptions-item>
      </el-descriptions>

v-loading
接口请求到数据之前，显示加载中。接口请求到数据之后，消失。

在这里插入图片描述

修改第三方组件的内部样式deep

.dropdown_wrap {
  width: 100%;
  height: 0.4rem;
  background-color: #f2f3f4;
  padding: 0 0.15rem;
  color: #333333;
  /deep/.van-dropdown-menu__bar {
    height: 0.4rem;
    box-shadow: none;
    background-color: #f2f3f4;
  }
}

定时器创建销毁

 created() {},
  mounted() {
    this.getInfo()
    this.checkStatus()
    this.checkStatus()
    this.timer = setInterval(() => {
      this.checkStatus()
    }, 30000)
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },

滚动至页面顶部

this.scrollToTop()

@click.stop阻止事件冒泡

问题：父元素中添加了一个click事件，其下面的子元素中也添加了click事件，此时，我想点击子元素获取子元素的点击事件，但却触发的是父元素的事件：此时，我们就需要使用@click.stop：阻止事件冒泡方法来解决这个问题：

<view class="footer-box" @click="clickCard">
	<view @click.stop="footerClick('喜欢')"><text class="footer-box__item">喜欢</text></view>
	<view @click.stop="footerClick('评论')"><text class="footer-box__item">评论</text></view>
	<view @click.stop="footerClick('分享')"><text class="footer-box__item">分享</text></view>
</view>

两位小数金额

<div class="flex align_center justify_between">
 <p class="pay-label">单价</p>
  <p class="pay-value">&yen; {{ parseFloat(price).toFixed(2) }}</p>
</div>

class属性统一前缀pay

<div class="pay-bottom flex align_center justify_between">
      <div class="flex align_center">
        <p class="total">&yen; {{ parseFloat(price).toFixed(2) }}</p>
        <span class="item">共 {{ quantity }} 件</span>
      </div>
      <van-button class="btn" type="info" @click="onPay">去支付</van-button>
    </div>

.pay {
  &-title {
    width: 100%;
    height: 0.44rem;
    background: #218865;
    box-shadow: 1px 2px 9px 0px rgba(49, 49, 49, 0.11);

    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    line-height: 0.44rem;
    text-align: center;
  }
  &-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    height: calc(0.5rem + constant(safe-area-inset-bottom)); //兼容 IOS<11.2
    height: calc(0.5rem + env(safe-area-inset-bottom));
    padding: 0 0.15rem;
    background: #fff;
    box-shadow: 0px -3px 9px 0px rgba(49, 49, 49, 0.06);
    z-index: 10;
    padding-bottom: env(safe-area-inset-bottom);
    .total {
      font-size: 0.18rem;
      font-weight: 400;
      color: #ff4949;
      margin-right: 0.1rem;
    }
    .item {
      font-size: 0.14rem;
      font-weight: 300;
      color: #333;
    }
    .btn {
      width: 0.95rem;
      height: 0.32rem;
      background: #218865;
      border-color: #218865;
      border-radius: 0.16rem;
      padding: 0;

      font-size: 0.14rem;
      font-weight: 500;
      color: #fff;
      /deep/.van-button--info {
        color: #fff;
      }
    }
  }
}