Jacinda

Appearance

On this page
🎨 作者：Jacinda 📔 阅读量：

Element-UI 组件使用归纳 ​

点击图片放大预览 (el-image-viewer) ​

这里引用了 <el-image><el-image/> 以及 <el-image-viewer><el-image-viewer/> 图片查看器 组件

引入组件 ​

javascript
import elImageViewer from 'element-ui/packages/image/src/image-viewer';

export default {
    components: {
		elImageViewer
	},
}

编写轮播图组件 （这里用的是卡片式轮播图） ​

html
<el-carousel 
    :interval="4000" type="card" height="calc(100vw * 2/3)" 
    :autoplay="true" indicator-position="none" arrow="always"
>
    <el-carousel-item v-for="(item,index) in carouselList" :key="index" :name="item">
        <el-image style="width: 100%;height: 100%;" :src="item" @click="onPreview(index)"></el-image>
    </el-carousel-item>
    <elImageViewer
        v-if="showViewer"
        :on-close="closeViewer"
        :url-list="viewerImgList"
    ></elImageViewer>
</el-carousel>

编写方法 ​

javascript
methods: {
    //打开查看器
    onPreview(index) {
        this.showViewer = true;
        let tempImgList = [...this.carouselList];
        let temp = [];
        for (let i = 0; i < index; i++) {
            temp.push(tempImgList.shift());
        }
        this.viewerImgList = tempImgList.concat(temp);
    },
    // 关闭查看器
    closeViewer() {
        this.showViewer = false
    },
}

📖 参考文档 ​

Vue+element-ui轮播图+放大预览

滚动条组件 (el-scrollbar) ​

需求：让局部的卡片列表进行滚动。

由于不是用 uniapp 写H5项目，不然用 scroll-view 写滚动会比较容易。这里参考了网上的一个方法，引用了 element-ui 的 el-scrollbar

组件用法 ​

html
<div class="monitor_info_content">
    <!-- 滚动列表 -->
    <el-scrollbar class="scrollbar_wrapper" >
        <div class="data_card_list" v-if="currentIndex != 3">
            <!-- 监测数据卡片 -->
            <div class="data_card" v-for="(item,index) in filterList" :key="index">
                <div class="data_card_title">{{item.title}}</div>
                <div class="data_card_detail">
                    <span>{{item.value}}</span>
                    <div class="icon_box" style="background: #f2f7fc;border-radius: 50%;">
                        <img :src="item.imgUrl ? item.imgUrl : ''"/>
                    </div>
                </div>
            </div>
        </div>
    </el-scrollbar>
</div>

⚠️ 注意

① el-scrollbar 的外部标签必须设置高度，高度随意，根据需求来；
② el-scrollbar 本身也必须设置高度，类名可以自己随意设置。

css
.monitor_info_content {
    height: 60%;
    .scrollbar_wrapper {
		height: 100%;
    }
}

日期选择器 （el-date-picker) ​

当我使用这个日期选择器组件时，点击提交表单，所打印出来的值是 Wed Jun 21 2023 00:00:00 GMT+0800 (中国标准时间)，这个不是我们需要的格式。

实际上，我们需要传给后端的数据，需要 2023-06-21

我们只需在组件中，引入 value-format 属性，内容格式根据需求来写即可

🏷️ value-format ​

格式含义举例
yyyy-MM-dd年-月-日2023-06-12
yyyy年2023
yyyy-MM-dd HH:mm:ss年-月-日 时:分:秒2023-06-12 00:00:00

💡 关键代码 ​

html
<el-date-picker 
    type="date" placeholder="选择日期" 
    value-format="yyyy-MM-dd" 
    v-model="params.date" style="width: 100%;"
></el-date-picker>

选择器 （el-select) ​

  • 问题描述

    当后端返回的 option 值过长时，样式出现两个问题

    1. select 的输入框没有溢出现在省略号

    2. option 里的值过长，把整个下拉框都撑出屏幕了

    3. 在一个表单里，有多个选择框，只想改其中一个选择框，所以需要定义 class 做区分

  • 解决

查看了 el-select 文档

🏷️ Select Attributes ​

参数说明类型默认值
popper-classSelect 下拉框的类名string—
popper-append-to-body是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 falsebooleantrue

💡 关键代码 ​

在 el-select 标签中，添加上述两个属性

html
<el-select 
    v-model="item.categoryId" 
    filterable placeholder="农药品类"
    popper-class="pesticide_select"
    :popper-append-to-body="false"
    class="pesticide_select_input"
>
    <el-option
        v-for="(p,index) in pesticideOptions" :key="index"
        :label="p.mal_name" :value="p.mal_id"
    ></el-option>
</el-select>

根据需要，修改css样式即可。

css
/* 下拉框的宽度 以及位置 */
/deep/ .pesticide_select {
    width: 200px !important;
    left: 0px !important;
}

/* 选择框选定值后，输入框溢出隐藏，显示省略号 */
/deep/ .pesticide_select_input {
    .el-input__inner {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

Loading （加载） ​

首先，直接引用 element 的 loading，默认的是 全屏 loading，实际中有很多地方不需要全屏loading，只需要某部分loading

因此，这里仅针对局部的加载，做个笔记。

方法封装 ​

javascript
// loading.js

import Vue from 'vue'
 
// loading框设置局部刷新，且所有请求完成后关闭loading框
let loading
let needLoadingRequestCount = 0 // 声明一个对象用于存储请求个数
function startLoading (targetdq) {
	loading = Vue.prototype.$loading({
		lock: true,
		text: '努力加载中...', // 文案
		background: 'rgba(255,255,255,.4)', //背景色
		spinner: 'el-icon-loading', // 图标
		target: document.querySelector(targetdq) // 设置加载动画区域 传入类名（class名）
	})
}
 
function endLoading () {
    loading.close()
}
export function showFullScreenLoading (targetdq) {
	if (needLoadingRequestCount === 0) {
		startLoading(targetdq)
	}
	needLoadingRequestCount++
}
export function hideFullScreenLoading () {
	if (needLoadingRequestCount <= 0) return
		needLoadingRequestCount--
	if (needLoadingRequestCount === 0) {
		endLoading()
	}
}
 
export default {
	showFullScreenLoading,
	hideFullScreenLoading
}

引用 ​

javascript
import { showFullScreenLoading, hideFullScreenLoading} from '@/utils/loading.js'
export default {
    methods: {
        // 显示loading
        showFullScreenLoading('.monitor_info_content')  // .monitor_info_content是要显示loading的区域
        ...
        // 隐藏loading
        hideFullScreenLoading()
    }
}

📖 参考文档 ​

vue项目中，设置页面局部loading加载效果（element）

Copyright © 2023-present Jacinda