本文介绍了如何在前端实现文本省略号效果，包括单行和多行文本，以及在Vue和uni-app框架中的应用。同时，笔记涵盖了点击复制、环境判断、样式修改、滚动条隐藏、日期格式化、H5与原生交互等常见技术点，提供了实用的代码示例和解决方案。
工作部分笔记
1.文本的多种省略号以及换行方法**
1.单行文本加省略号
overflow: hidden;//溢出隐藏 white-space: nowrap;//禁止换行 text-overflow: ellipsis;//...
2.多行文本换行加省略号
display: -webkit-box;//谷歌 -webkit-box-orient: vertical; -webkit-line-clamp: 3;//显示几行 overflow: hidden;
3.英文自动换行
word-wrap:break-word;
word-break:break-all;
4.Vue中实现鼠标移入，省略号的内容全部显示：
(1) elementui实现
{{item.title}}
//改为： //法1 <el-tooltip :content="item.title" placement="top-start"> <p>{{item.title}}</p> </el-tooltip> //悬浮层显示全部内容
//法2
{{item.title}}
(2)table表格
<el-table-column prop="name" label="姓名" :show-overflow-tooltip="true"> //:show-overflow-tooltip="true" //悬浮层显示全部内容
5、html实现省略号全部显示：
11111
//title属性（title的内容与该内容相同）悬浮层显示全部内容
5、css实现省略号全部显示：
设置:hover
h4{
overflow: hidden;//溢出隐藏
white-space: nowrap;//禁止换行
text-overflow: ellipsis;//...
}
h4:hover{
width:200px;
overflow: visible;
white-space: pre-line;
cursor:pointer;
}
2.兼容h5端的点击复制到手机粘贴板的方法
function copyTxt(txt) {//传入要复制的内容
txt+="";
if(txt=="null"||txt=="undefined"||txt==""){
//toast("复制失败，内容为空");
return;
}
// #ifdef APP-PLUS
uni.setClipboardData({
data:txt,
});
// #endif
// #ifdef H5
if (document.queryCommandSupported('copy')) {
let textarea = document.createElement("textarea")
textarea.value = txt
textarea.readOnly = "readOnly"
document.body.appendChild(textarea)
textarea.select() // 选中文本内容
textarea.setSelectionRange(0, txt.length)
let result = document.execCommand("copy")
textarea.remove()
uni.showToast({
title:'复制成功',
icon:'none'
})
}else{
uni.showToast({
title:'复制失败',
icon:'none'
})
}
// #endif
}
export default {
copyTxt,
}
3.修改uni-ui的样式
style标签上加scoped，同时使用 deep 穿透 可以成功修改
<style scoped>
/deep/ .uni-combox__input {
font-size: 14px;
}
</style>
4.隐藏uniapp的scroll滚动条
/* 解决滚动条的问题 */
::-webkit-scrollbar{
display: none;
}
/* 解决H5 的问题 */
uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
/* 隐藏滚动条，仍然可以滚动 */
display: none
}
5.解决英文不会自动换行问题
word-break:break-all;
6.jQuery给a标签的链接加参数
var urll = window.location.search;
$(".urls").click(function () {
$(".urls").attr("href", "https://enjoysoft.021city.cn/downloadGuide" + urll);
});
7.uniapp手机号校验（@blur）
<view class="tabli">
<view class="name">电话：</view>
<input class="uni-input" v-model="reg_mobile" @blur="blur1(reg_mobile)" />
</view>
blur1(reg_tel){
console.log("blur事件被执行了",reg_tel)
// blur事件被执行了
if (reg_tel === '') {
callback1(new Error('手机号不可为空'));
}
else {
if (reg_tel !== '') {
var reg=/^1[3456789]\d{9}$/;
if(!reg.test(reg_tel)){
callback(new Error('请输入有效的手机号码'));
}
}
// callback();
}
function callback1(Error){
console.log("name",Error);
uni.showModal({
title: '手机号码不能为空',
});
}
function callback(Error){
console.log("name",Error);
uni.showModal({
title: '请输入有效的手机号码',
});
}
},
8.uniapp判断当前环境是ios还是android
uni.getSystemInfoSync().platform == 'ios'; uni.getSystemInfoSync().platform == 'android'
9.原生与h5互相调用方法
原生调用H5示例：
// H5
window.sdk= {
double = value => value * 2
trible = value => value * 3
}
//总结
首先是我们给app端定义方法供他们使用(以vue为例)
methods中定义一个方法名称
VContent() {
console.log("给app用的方法")
},
//接着我们将这个方法在生命周期中挂载到window即可，没错，就是这么简单
mounted(){
window.VerifyContent = this.VerifyContent;
},
// 原生（以IOS端为例）
NSString *func = @"window.sdk.double(10)";
NSString *str = [webview stringByEvaluatingJavaScriptFromString:func];// 20
H5调用原生示例：
// 原生（以IOS端为例）
@interface AppSdk : NSObject
{}
- (int) double:(int)value;
- (int) triple:(int)value;
@end
@implementation AppSdk
- (int) double:(int)value {
return value * 2;
}
- (int) triple:(int)value {
return value * 3;
}
@end
JSContext *context=[webview valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
AppSdk *appSdk = [AppSdk new];
context[@"appSdk"] = appSdk;
H5：
window.appSdk.double(10); // 20
10.z-paging
一个uni-app (opens new window)分页组件。 全平台兼容，支持自定义下拉刷新、上拉加载更多，支持虚拟列表，支持自动管理空数据图、点击返回顶部，支持聊天分页、本地分页，支持展示最后更新时间，支持国际化等等。
官网：
11.uniapp 空格怎么打
{{' '}}
直接打空格
12.格式化日期时间
getDate().toLocaleString('lt-LT').slice(0,-3) //YYYY-MM-DD HH:MM 格式
new Date().toLocaleDateString() //YYYY/MM/DD 格式
new Date().toLocaleString('lt-LT')// YYYY-MM-DD HH:MM:SS 格式
'2020-01-01 00:00:00'.substring(0,10) //切割日期时间
13.获取一个月后的时间
//此方法存在问题，慎用
var date=new Date();
date.setMonth(date.getMonth()+1);
var y = date.getFullYear();
var m = (date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : (date.getMonth() + 1);
var d = date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate();
var h = date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours()
var f = date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes()
var s = date.getSeconds() < 10 ? ('0' + date.getseconds()) : date.getSeconds()
var formatwdate = y+'-'+m+'-'+d + " " + h + ":" + f + ":" + s;
console.log('formatwdate', formatwdate)
//以时间戳形式加30天
var nS=new Date().getTime();
//一个月后的时间戳
nS=nS+2592000000;
nS=new Date(parseInt(nS)).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ")
console.log(nS);
14.时间戳
一小时的时间戳 3,600,000 一天的时间戳 86400000 一个月的时间戳 2592000000 一年的时间戳 31104000000 当前时间戳 Date.now()
15.报错时返回报错信息并替换报错信息进行后面的程序
try{
// console.log(123);
return window.action.getToken()
}
catch(err){
// console.log(234);
return ''
}
}
16.根据所需目标遍历json数据，并且根据当前所选的目标返回当前目标所在的其他键值对并以字符串形式返回，主要用于根据地区编码返回地区名称（根据需求自己改动）
使用的方法
{{item.disasterDamageAddress.indexOf('-')===-1?$findJson.valueFind($findJson.positions(), item.disasterDamageAddress, 'code', 'value'):item.disasterDamageAddress}}
//根据键值循环遍历多层json数据
export default {
/*
json参数为数组对象,必传;
value参数为要查找的值,必传;
key参数为要查找的值的键名,必传;
newKey参数查找当前所在位置的某个键名,必传;
msg参数为json是空值时的提示语句;
*/
valueFind(json, value, key, newKey, msg) {
msg = msg ? msg : '地区失效';
if (json.length < 1 || json === null || json === '') {
uni.showToast({
icon: "error",
title: msg
})
}
let num = 0;
let areaArr = [];
let areaStr = '';
let arrValue = value.split(',');
callbackFn();
function callbackFn() {
json.forEach((val, index) => {
if (val[key] == arrValue[num]) {
areaArr.push(val[newKey])
num++;
json = val.children;
callbackFn();
}
})
}
areaStr = areaArr.join('-');
return areaStr;
},
//获取已经存在globalData中的地区数据
positions() {
return getApp().globalData.areaLevel;
}
}
17.uniapp小坑总结
1.组件内引入图片要使用绝对路径。/static/...； 2.主页面的生命周期用onLoad代替created，onReady代替mounted。组件内使用原来的created与mounted； 3.阻止事件冒泡时要在外层加一层标签<view @tap.stop="stop"></view>，直接在需要使用的方法上加.stop无效； 4.<picker>中最好写一个<view class="style">写样式，而不是在picker上加样式； 5.<scroll-view>中写position: fixed，在ios下会有兼容性问题； 6.出现遮罩后阻止页面滚动，可以在遮罩的touchmove事件中阻止默认事件。@touchmove.prevent=""； 7.<swiper>一定要给高度才会生效，一般是动态获取里面的元素或列表高度再赋值给<swiper>
18.uniapp滚动条自定义
::-webkit-scrollbar {
/*滚动条整体样式*/
width: 4px !important;
height: 1px !important;
overflow: auto !important;
background: #ccc !important;
-webkit-appearance: auto !important;
display: block;
}
/deep/ ::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px !important;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
background: #7b7979 !important;
}
/deep/ ::-webkit-scrollbar-track {
/*滚动条里面轨道*/
// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
// border-radius: 10px !important;
background: #FFFFFF !important;
}
19.uniapp监测物理键返回
onBackPress() {
//console.log("press back");
uni.showModal({
title: '退出该页面后将关闭此次轨迹记录',
confirmText: '退出',
success: function(res) {
if (res.confirm) {
.....//此处把你退出后需要的方法写上就行
this.stopGetLocation();
this.started = false;
this.imgpath = '../../static/open.png'
}
}.bind(this)//此处bind是关键，可以箭头函数
})
},
20.uniapp实现双击底部tabbar触发下拉刷新并震动的效果
//点击tabbat事件
onTabItemTap(e) {
// tab 点击时执行，此处直接接收单击事件
if (this.tabClick) { // 200ms 内再次点击
// 这里就是模拟的双击事件，可以写类似数据刷新相关处理
// #ifdef APP-PLUS
//因为ios不支持短震动，所以只在Android支持双击震动效果
if (this.$u.os() === 'android') {
uni.vibrateShort();
}
// #endif
this.getTreeList()
this.getAdvertJoinList()
this.$refs.paging.reload(true);
}
this.tabClick = true
setTimeout(() => {
this.tabClick = false // 200ms 内没有第二次点击，就当作单击
}, 200)
},
21.watch的多种操作
watch:{
//单独监听对象里的某个元素
"show.showPop": {
handler(newValue) {
}
},
//监听简单类型数据
demo(oldVal,newVal){
},
/**
深度监听复杂数据类型
handler：其值是一个回调函数。监听到变化时应该执行的函数。
deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值 变化可以听到。）
immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。
当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，此时需要deep属性对对象 进行深度监听
**/
obj: {
handler(newValue, oldValue) {
console.log("obj 发生了变化");
},
deep: true,
immediate: true
},
},
22.当图片宽度为百分比时图片高度等于图片的宽度的方法
left {
position: relative;
width: 20%;
height: 0;
padding-top: 20%;
image {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
}
}
扫一扫
2577
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
