前端VUE总结记录

强仔fight

已于 2023-12-20 10:42:41 修改

阅读量604

点赞数

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

于 2022-05-09 14:04:25 首次发布

本文链接：https://blog.csdn.net/qq_35076836/article/details/124664821

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. JS删除对象中某一个字段的方法实现

 let item = {
    name:'xxx',
    age:'18',
    gender:'男'
   };
//会直接改变对象
delete item.name;

2. 右键弹出框的实现

<!--右键弹出-->
<el-card class="box-card" ref="card" v-show="menuVisible">
   <div style="cursor:pointer;" @click="" v-show="secondLevel"><i class="el-icon-circle-plus-outline"></i>新增</div>
   <div style="cursor:pointer;" @click="" v-show="thirdLevel"><i class="el-icon-circle-plus-outline"></i>编辑</div>
</el-card>
     
//右键触发
    rightClick(MouseEvent, object, Node, element) { 
        this.currentData = object;
        this.currentNode = Node;
        if (Node.level ===2) { 
          this.secondLevel =true;
          this.thirdLevel = false;
          this.menuVisible =true; //显示增删改的div
        } else if(Node.level ===3){
          this.secondLevel =false; 
          this.thirdLevel = true;
          this.menuVisible =true; //显示增删改的div
        } 
        }else {
          this.secondLevel =false; 
          this.thirdLevel = false;
          this.menuVisible = false;
        }
        document.addEventListener('click', this.foo);  
        this.$refs.card.$el.style.left = MouseEvent.clientX -180 +'px'; 
        this.$refs.card.$el.style.top =MouseEvent.clientY -50 +'px'; 
     },

     foo () {
        this.menuVisible =false;
        document.removeEventListener('click',this.foo);
      },

3. 级联选择框的实现

<el-cascader 
  clearable 
  v-model="value" 
  :options="treeData" 
  :show-all-levels="false" 
  :props="defaultProps">
</el-cascader>

4. 时间戳的转换
解决如下报错

java.lang.IllegalArgumentException: Timestamp format must be yyyy-mm-dd hh:mm:ss

前端传值 转换为固定格式。 注意格式的大小写。
import moment from "moment"
newTime = moment(time).format("yyyy-MM-DD HH:mm:ss");

//java 字段串转换为timestamp类型。 postgresql做sql查询不支持字符串时间。
Timestamp.valueOf(Date);

5. 表格内容正常换行样式

.el-table .cell {
  white-space: pre-wrap !important;
}

6. VUE引入三方icon图标
https://blog.csdn.net/qq_41319058/article/details/107117340

https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

7. 表格组件内文字实现跳转功能

<el-table-column prop="col" label="列名" min-width="25%" sortable>
        <template slot-scope="scope">
	       <a :href="scope.row.urlLink">
		        {{scope.row.col}}
	       </a>
       </template>
 </el-table-column>

补充：target=_blank 这个属性表示，在新的窗口打开超链接！通过这个属性我们可以更方便的查看各种跳转页面。不会因为之前页面被覆盖而烦恼。

8.关于vue中elementui时间组件开始时间和结束时间的限制问题

<template>
   <div>
	<div>
	    开始时间：
	    <el-date-picker
	        v-model="startTime"
	        type="date"
	        placeholder="开始日期"
	        value-format="yyyy-MM-dd"
	        :picker-options="pickerOptionsStart"
	        style="width:14%">
	    </el-date-picker>
	</div>
	
	<div>
	    结束时间：
	    <el-date-picker
	        v-model="endTime"
	        type="date"
	        placeholder="结束日期"
	        value-format="yyyy-MM-dd"
	        :picker-options="pickerOptionsEnd"
	        style="width:14%;margin-top:20px;">
	    </el-date-picker>
	</div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      startTime: '',
      endTime: '',
      pickerOptionsStart: {
        disabledDate: time => {
          if (this.endTime) {
                return time.getTime() > new Date(this.endTime).getTime()
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          if (this.startTime) {
            return time.getTime() < new Date(this.startTime).getTime() - 86400000
          }
        }
      }
    }
  }
}

9. Vue 输入框做合法性校验

//这个事件在用户输入时触发的
//v-model 就是你绑定的变量，输入的值会存储在这个变量当中
<input type="text" placeholder="文本框默认值" v-model="inputVal"  v-on:input="search" value="" />

判断实例:

if ((!reg.test(value)) && value != '') {
    callback(new Error('请输入正确的IP地址'));
} else {
    callback();
}

10. JS判断字符串包含问题

string.includes(word);

11.根据数据长度自动生成对应可视化表格，并添加对应跳转链接

<div id="app">
         <div  v-for="(item, index) in dataList" :key="index">
             <div class="main" style="width: 50%; height: 400px;">
                    {{item}}
             </div>
         </div>
      </div>

init(){
        #获取页面元素
        var chartDom = document.getElementsByClassName('main');
        if(chartDom){
        #遍历渲染
        for (var i = 0; i < chartDom.length; i++) {
            var myChart = echarts.init(chartDom[i]);
            var option;
            option = {
             title: {
                 text: this.dataList[i].value,
                 subtext: '饼图',
                 left: 'center'
              },
              tooltip: {
                 trigger: 'item'
              },
              legend: {
                 orient: 'vertical',
                 left: 'left'
             },
            #饼图各个分区颜色
            color:['green','yellow','red'],
            series: [
              {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: [
                 { value: this.dataList[i].value1, name: 'xxx', url:this.dataList[i].url1 },
                 { value: this.dataList[i].value2, name: 'xxx', url:this.dataList[i].url2 },
                 { value: this.dataList[i].value3, name: 'xxx', url:this.dataList[i].url3},
               ],
             emphasis: {
                itemStyle: {
                   shadowBlur: 10,
                   shadowOffsetX: 0,
                   shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
               },
              },
             ],
            };
            option && myChart.setOption(option);
            //跳转函数
            myChart.on('click', function (param) {
                window.location.href = param.data.url;
            }); 
         }
    }
    },

注意:
setTimeout(() => 
            this.init(), 50
        );

13. 判断字符串是否为超链接

var regex = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?$/;

使用示例:
<a :href="props.row.col target=_blank v-if="isUrl(props.row.col)">{{props.row.col}}</a>
<p v-if="!isUrl(props.row.col)">{{props.row.col}}</p>

isUrl: function(txt){
          var reg = /(((https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/ig;
          var flag = reg.test(txt);
          return flag;
       }

14. 表格文字的展开与收起功能

表格部分:
<el-table-column prop="input" label="输入" min-width="15%" sortable>
        <template slot-scope="scope">
        <span v-show="scope.row.input && scope.row.input.length>10">{{scope.row.input | filtersContent(scope.$index+(pageId-1)*pageSize, orginlist)}}</span>
        <span v-show="scope.row.input && scope.row.input.length<10">{{scope.row.input}}</span>
        <span style="color:#0092ff" @click="changeOrginlist(scope.$index+(pageId-1)*pageSize)" v-show="scope.row.input && scope.row.input.length>10"> {{orginlist[scope.$index+(pageId-1)*pageSize]}}</span> 
        </template>
      </el-table-column>

数据部分:
for(let i=0;i<this.total;i++) {
     this.orginlist.push('展开');
}

JS部分：
//过滤器
filters:{
        filtersContent(val, index, orginlist) {
            if(val && orginlist[index]==='展开') {
                return val.substring(0,9)+' ... ';
            } else { 
                return val;
            }
        }
    },


changeOrginlist(index) {
    //替换值
    if(this.orginlist[index]==='展开') {
          this.orginlist.splice(index,1,'收起');
     } else {
          this.orginlist.splice(index,1,'展开');
}
},

15. 富文本编辑及文本内容展示
导入

import EditorBar from './Editor';

components: { EditorBar }，

编辑框

<div>
    <editor-bar v-model="xxx" :isClear="this.isClear"></editor-bar>
</div>

前端展示

<div v-html="xxx"></div>

表格条目多选并只选定其中的id值

handleSelectionChange(val) {
		// this.multipleSelection = val;
		this.multipleSelection = []
		val.forEach(item => {
			const id = item.id
			this.multipleSelection.push(id)
		})
	}

js实现多种分隔符的分割

var xxx = xxxS.split(/[;,，；]/)         #按照中英文封号 逗号分割

在Vue中使用echarts: https://www.jianshu.com/p/cf0a54374419
element树形控件: https://element.eleme.cn/#/zh-CN/component/tree

强仔fight

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端VUE总结记录

1. JS删除对象中某一个字段的方法实现 let item = { name:'xxx', age:'18', gender:'男' };//会直接改变对象delete item.name;2. 右键弹出框的实现<el-card class="box-card" ref="card" v-show="menuVisible"> <div style="cursor:pointer;" @click="" v
复制链接

扫一扫

专栏目录