Element_Ui组件隐藏功能与采用样式_element 隐藏部件

Element_Ui组件隐藏功能

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、图片放大

饿了吗隐藏组件image-viewer
链接: https://blog.csdn.net/zhanghui_new/article/details/112986582

import ElImageViewer from "element-ui/packages/image/src/image-viewer";

//单个vue只引用这一个组件写法
components: {ElImageViewer},

        /**打开放大预览图 */
        onPreview(pathlist) {
            this.pathlist = pathlist
            this.showViewer = true;
        },
        /**关闭放大预览图 */
        closeViewer() {
            this.showViewer = false;
            this.pathlist = []
        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

页面上

<el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="pathlist" />
1

二、滚动条 el-scrollbar

1

---

三、message避免频繁触发

// message.js
import { Message } from 'element-ui'

const showMessage = Symbol('showMessage')

class gtMessage {
  success(options, single=true) {
    this[showMessage]('success', options, single)
  }
  warning(options, single=true) {
    this[showMessage]('warning', options, single)
  }
  info(options, single=true) {
    this[showMessage]('info', options, single)
  }
  error(options, single=true) {
    this[showMessage]('error', options, single)
  }

  [showMessage](type, options, single) {
    if(single) {
      if(!document.querySelector('.el-message')) {
        Message[type](options)
      }
    } else {
      Message[type](options)
    }
  }
}

const gtMessageCase = new gtMessage()
export default gtMessageCase;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// main.js
import gtMessage from "./message"
Vue.prototype.$gtmessage = gtMessage;
1
2
3

    this.$gtmessage.success(msg);
1

四、form标签表单的使用

<form onsubmit="getValue(event)">
  <input type="text" id="myInput">
  <button type="submit">获取输入框的内容</button>
</form>

<script>
  function getValue(event) {
    event.preventDefault();  // 阻止表单默认的提交行为

    const input = document.getElementById("myInput");
    const value = input.value;
    console.log(value);
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

五、 title属性使用

//换行
    <a href="http://www.divcss5.com/jiqiao/j510.shtml" 
    title="第一排&#10;第二排&#10;第三排">title换行1</a> 
    <a href="http://www.divcss5.com/jiqiao/j510.shtml" 
    title="说明一&#13;说明二&#13;说明三">title换行2</a> 
//在vue 
:title="'xx'/n "
1
2
3
4
5
6
7

六、 拖拽api使用

vuedraggable拖拽api外链: https://www.itxst.com/vue-draggable/tutorial.html

案例：

import draggable from "vuedraggable"; // 拖拽

  //import引入的组件需要注入到对象中才能使用
 components: {
        draggable,
    },



        //#region ----------------------------------------------------------------------拖拽api----------------------------------------------------------------------
        // 监听拖拽
        change(event) {
            console.log("change");
            console.log(event);
            console.log(this.checkedPoint);
        },
        // 开始拖拽
        start(event) {
            console.log("start");
            console.log(event);
            console.log(this.checkedPoint);
        },
        // 结束拖拽
        end(event) {
            console.log("end");
            // event.item  拖拽的本身
            // event.to      拖拽的目标列表
            // event.from    拖拽之前的列表
            // event.oldIndex    拖拽前的位置
            // event.newIndex    拖拽后的位置
            console.log(event);
            console.log(this.checkedPoint);
        },
        //#endregion
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

html

         <draggable v-model="choosePointList" group="one" @change="change" @start="start" @end="end">
                                        <el-col :xs="8" :sm="8" :md="8" :lg="6" :xl="6" v-for="(item) of choosePointList" :key="item.id">
                                            <el-card shadow="hover" :class="['point-card' , item.photoid]">
                                                <template #header>
                                                    <div class="card-header">
                                                        <div>
                                                            <el-checkbox v-model="item.checked" @change="checked=>pointchangeChecked(item,checked)">{{`路径点${item.id}`}}</el-checkbox>
                                                        </div>
                                                        <div>
                                                        </div>
                                                        <div style="width:180px">
                                                            <el-slider v-model="item.alt" :max="500"></el-slider>
                                                        </div>
                                                    </div>
                                                </template>
                                                <div style="font-size: 12px;">
                                                    <div><span class="fontweight">经纬度&nbsp;:&nbsp;</span>
                                                        {{`(${ (item.lng).toFixed(5)},${(item.lat).toFixed(5)})`}}</div>
                                                </div>
                                            </el-card>
                                        </el-col>
                                    </draggable>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

六、 el-select仅显示下拉菜单

一般用于点击显示下拉菜单而不需要显示选择框

               <el-select ref="selectRef" class="fly-select" v-model="defaultUavSn" placeholder="请选择" @change="selectTrigger(defaultUavSn)">
                    <el-option v-for="(item,index) in uavs" :key="index" :label="item.uavName" :value="item.uavId">
                        <span style="float: left">{{ item.uavName }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.uavId }}</span>
                    </el-option>
                </el-select>
1
2
3
4
5
6

在类样式fly-select 定位到需要点击的标签位置，并 opacity: 0; 并隐藏输入框

    .uav-realtime {
        position: relative;
        .fly-select {
            opacity: 0;
            position: absolute;
            top: 2px;
            left: 0px;
        }
    }
1
2
3
4
5
6
7
8
9

点击标签 重复对应事件 通过$refs打开下拉菜单

   this.$refs.selectRef.toggleMenu();
1

      selectUav() {
            if (this.uavs.length > 0) {
                const isVisable = this.$refs.selectRef.visible
                this.$nextTick(() => {
                    this.$refs.selectRef.visible = !isVisable;
                })
            }
        },
1
2
3
4
5
6
7
8

七、element中table动态合并行合并列

element中table动态合并行合并列: https://juejin.cn/post/7218850784331366437

七、分页

数据都返回到前端 数据太多了 做的一个分页功能 el-table 分页

七、 草地项目记得有一个需要待确认点击展开 没有处理就是不能点击展开

工作中采用样式

---