1. 程式人生 > >記錄最近項目中自己遇到的一些小問題

記錄最近項目中自己遇到的一些小問題

pbo 路由配置 支持 lis inpu round 條件 說明 不支持

內容可能有點雜~

一、首先記寫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()
        }
    }
})

記錄最近項目中自己遇到的一些小問題