前端笔记

1、element默认英文解决方案

main.js
//import enLocale from 'element-ui/lib/locale/lang/en'

import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
//import locale from 'element-ui/lib/locale'

Vue.use(ElementUI, { zhLocale })

2、文字单行显示,超过部分会自动隐藏
多余的内容会在 hover 时以 tooltip 的形式显示出来。

3、链接跳转
跳转demo

4、html如何实现鼠标悬停显示文字

文字内容文字内容

5、vue element UI el-table表格调整行高,及单元格内字体大小


6、获取url参数

let id = this.$route.params.id
let id = this.$route.query.id

7、登录添加键盘事件,注意,不能直接在焦点事件上添加回车
let that = this;
document.onkeydown = function (e) {
let key = window.event.keyCode;
if (key === 13){
that.handleSubmit2();//方法
}
}

8、回车搜索
```html
el-input 监听键盘按下状态 得用@keyup.enter.native,

如果是非el-input 组件,可以直接用@keyup.enter


在methods方法集里,写上监听的方法,当获取的keyCode 为13时,表示按下了回车键,如果需要监听空格或者其他键,换成别的键值

searchEnterFun:function(e){
var keyCode = window.event? e.keyCode:e.which; // 浏览器兼容问题
// console.log('回车搜索',keyCode,e);
if(keyCode == 13 && this.input){
this.$router.push({path:'/Share?keywords='+this.input});
}

}

````

设置默认参数
function example(name,age){
name=name||'貂蝉';
age=age||21;
alert('你好!我是'+name+',今年'+age+'岁。');
}

Vue.js 图片引用

1、在data 里写入
logo: require('../assets/images/logo.png')

2、在模板中写入

$route.path 当前路由对象的路径,如‘/vi
$route.query 请求参数,如/foo?user=1获取到query.user = 1
$route.router 所属路由器以及所属组件信息
$route.matched 数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
$route.name 当前路径名字

清空数组的三种方式
var ary = [1,2,3,4];
ary.splice(0, ary.length);
console.log(ary); // 输出 [],空数组,即被清空了

数组解构赋值
let colors = [ "red", "green", "blue" ];
let [ firstColor, secondColor ] = colors;

关于基于vue的框架element UI el-input 触发不了@keyup.enter='方法'

解决方案

vue组件重新加载(刷新)

第一种方法:
利用v-if控制router-view,在根组件APP.vue中实现一个刷新方法

复制代码

然后其它任何想刷新自己的路由页面,都可以这样:
this.reload()

cursor:pointer;//鼠标变小手

单行溢出省略号
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;/加宽度width属来兼容部分浏览/

多行文本溢出显示省略号
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /限制文本行数/
-webkit-box-orient: vertical;