记录最近项目中自己遇到的一些小问题

Posted 2020-12-25 sevenbreey

内容可能有点杂～

一、首先记写css的坑

1.p标签文字过长，自动换行

word-wrap:break-word;
word-break:break-all;

2.p标签文字过长，不换行，显示省略号

overflow: hidden;
text-overflow:
ellipsis;white-space: nowrap;

二、muse-ui

项目是移动端，因此选择了muse-ui作为ui库
1.使用muse-ui的列表选项时候
mu-list-item 是不能绑定点击事件的

2.muse-ui中字体被墙，需要手动或使用其他图标库

三、vue复制文本

需要加载 clipboard 插件

npm install --save clopboard
页面引入
import Clipboard from ‘clipboard‘

注意：只能在input或button中使用，其他则无效
<mu-button round class="base-btn tag-read" @click="copyEth" :data-clipboard-text="addr">复制ETH地址</mu-button>

方法代码：

copyEth () {
var clipboard = new Clipboard(‘.tag-read‘)
clipboard.on(‘success‘, e => {
console.log(‘成功‘)
// 释放内存
clipboard.destroy()
})
clipboard.on(‘error‘, e => {
// 不支持复制
console.log(‘不支持‘)
// 释放内存
clipboard.destroy()
})
}

四、路由钩子

往往需要对路由进行判断是否登录
使用 router.beforeEach((to,from,next) => {})
需要在路由配置中加上 {meta: 判断条件} 如：{meta: login:true}

router.beforeEach((to, from, next) => {
    var token = sessionStorage.getItem(‘access_token‘) // 保存登录token
    if (to.meta.login) { // 判断路由是否需要登录可以访问
        if (token) { // 如果存在token，说明已经登录，则直接next
            next()
        } else {  // 否则重定向到login
            next(‘/login‘)
        }
    } else { // 如果不需要通过登录可以访问的页面，如登录注册
        if (token) { // 判度是否已经登录
            next(‘/‘) // 则不允许再次登陆
        } else { // 否则继续next
            next()
        }
    }
})