VUE 开发知识个人记录

却染人间愁

已于 2025-03-19 18:52:46 修改

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript html

于 2023-08-29 11:01:03 首次发布

本文链接：https://blog.youkuaiyun.com/victor_E_N_01185/article/details/132557073

【前言】：本博客是经过本人实际验证后记录下来的一些有效的固定写法，便于后续自己直接拷贝粘贴，提高开发效率

1、div 设置宽度自适应文本内容：设置 div 节点的 class 为下面 auto-adjust-text-width

.auto-adjust-text-width {
  display: inline-block;
  white-space: nowrap;
}

2、使 div 节点具有上下或左右滑动的能力：style="overflow-y: scroll;" 或 style="overflow-x: scroll;"

<div style="overflow-y: scroll;"></div>
<div style="overflow-x: scroll;"></div>

3、设置宽高或边距：可以用 calc 计算方式，注意：如果直接用百分比表示的话，比如100%，那这是相对于父布局的比值，如果要相对于根布局，那就用vh或者vw，全屏宽度是固定的100vw，全屏高度是固定的100vh，25vw则表示相对于根布局宽度的25%，30vh则表示相对于根布局高度的30%，如果父布局就是根布局，那这两种单位就是等效的

width: calc((100% - 2px) / 2);
height: calc((20vh + 24px) * 2);

4、vue 退回到上一个界面

this.$router.go(-1);
//或者
this.$router.back();

5、数据集合过滤

let checkedList = this.dataList.filter(item => return item.checked);

6、数据对象取值

6.1、明确知道 key 的名称如 name，那就可以直接获取：object.name

例如：let object = { name1: 'AAA', name2: 'BBB'};

则获取 object.name1 的值就是 ‘AAA’
6.2、key 的名称是个变量如var key，具体是啥不明确，那可以通过object[key] 获取

例如：let object = { name1: 'AAA', name2: 'BBB'};

var key = 'name1';

则获取 object[key] 的值就是 ‘AAA’

7、日期相关操作

//获取过去某一天的日期
getPastDate() {
    var currentDate = (new Date()).getTime();
    var tenYear = 10 * 365 * 24 * 60 * 60 * 1000;//10年前，每年按365天计算
    var pastResult = currentDate - tenYear ;
    var beginDate = new Date(pastResult);
    return beginDate;
}

//获取当前日期
getCurrentDate() {
    return new Date();
}

//日期转为字串
dateToString(date) {
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    if (month >= 1 && month <= 9) {
        month = '0' + month;
    }
    if (day >= 0 && day <= 9) {
        day = '0' + day;
    }
    var dateString = year + '-' + month + '-' + day;
    return dateString;
}

//字串转为日期
stringToDate(dateString) {
    return new Date(dateString);
}

8、渐变色设置：background-image: linear-gradient(180deg, #44D09B 0%, #009688 100%);

9、给 div 设置背景图片

.div-bg-style {
    width: 100%;
    height: 120px;
    border-radius: 5px;
    background-image: url('~@/assets/customer/visit-and-recept-item-bg.png');
    background-size: cover;
    // background-size: calc(100%) 100%;
}

/**
background-size 取值说明:
1、auto:此值为默认值，保持背景图片的原始高度和宽度；
2、<length>此值设置具体的值，可以改变背景图片的大小；
3、<percentage>此值为百分值，可以是0％〜100％之间任何值，但此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算。
4、cover：此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover;将背景图片放大到适合容器的大小，但这种方法会使用背景图片失真；
5、contain:此值刚好与cover相反，其主要是将背景图片缩小，以适合铺满整个容器，这个主要运用在，当背景图片大于元素容器时，而又需要将背景图片全部显示出来，此时我们就可以使用contain将图片缩小到适合容器大小为止，这种方法同样会使用图片失真。
6:当background-size取值为<length>和<percentage>时可以设置两个值，也可以设置一个值，当只取一个值时，第二个值相当于auto，但这里的auto并不会使背景图片的高度保持自己原始高度，而会与第一个值相同。
*/

10、设置透明背景色：background-color: rgba(68, 121, 255, 0.09);

11、控件属性定制：

1、只针对某一个控件生效：给需要定制属性的控件加上class="cust-style-01"

.cust-style-01 /deep/ .van-field__control {
    text-align: left;
}


2、对该界面中所有控件都生效
>>>.van-field__control {
    text-align: left;
}

12、设置最大行高

.item-info-content {
    width: 100%;
    height: 18px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;//最大行数
    overflow: hidden;
    text-overflow: ellipsis;
}

13、展示类似于文件完整目录层级的水平可滚动文本

<div class="group">
    <div class="search" v-for="i in 6" :key="i">第 {{ i }} 级目录  </div>
</div>

.search-container {
    white-space: nowrap;
    width: 100vw;
    overflow-x: scroll;
}

.search {
    width: 200px;
    display: inline-flex;
}

14、常见颜色记录：

bgList: [
    "linear-gradient(180deg, #51B9FF 0%, #2883FF 100%",//蓝色
    "linear-gradient(180deg, #57F9C2 0%, #2FC9CD 100%",//绿色
    "linear-gradient(180deg, #FFDA4F 0%, #F6A309 100%",//橙色
    "linear-gradient(180deg, #55EAE8 0%, #2D95F3 100%",//淡蓝
    "linear-gradient(180deg, #8A97FF 0%, #2F53CD 100%",//深蓝
    "linear-gradient(180deg, #D0A2FF 0%, #732DF3 100%",//紫色
    "linear-gradient(180deg, #5CE493 0%, #2FC65A 100%",//深绿
    "linear-gradient(180deg, #FE8C8C 0%, #E14949 100%",//红色
],

用法：:style="{ 'background-image': bgList[gridIndex % 8] }"

15、多个数组合并去重：

let arrayA = [{title: 1}, {title: 2}];
let arrayB = [{title: 3}, {title: 4}];
let mergedArray = [...arrayA, ...arrayB];
console.log("mergedArray = " + JSON.stringify(mergedArray));
//打印结果为：mergedArray = [{"title":1},{"title":2},{"title":3},{"title":4}]

16、换行 + tab空格

用 v-html="xxx" 来赋值，换行是：<br>， tab空格是：　　

例如：let content = “第一行” + “<br>　　” + “第二行”

显示效果就是：

第一行

第二行

17、注册全局组件

17.1、创建新的组件：Axxxx.vue、Bxxxx.vue等...

17.2、新建ExportXxxx.js文件，批量导出上述组件：

// 引入需要全局注册的组件, 在main.js中注册
import Axxxx from './a-xxxx.vue';
import Bxxxx from './b-xxxx.vue';

// 导出需要全局注册的组件
export default {
    Axxxx, Bxxxx
}

17.3、main.js中添加下面代码，注册全局组件：

// 注册全局组件
import ExportXxxx from '@/components/ExportXxxx';
Object.entries(ExportXxxx ).forEach(([componentName, component]) => {
    Vue.component(componentName, component);
})