雜記 -- 關於vue-router樣式、vuecli引用全域性js函式、vue.slot用法
阿新 • • 發佈:2020-02-17
1、routerLinkTo 樣式設定
首先,點選routerlink標籤如下圖:新增:router-link-active,router-link-exact-active兩個類的樣式
router-link-active及router-link-exact-active區別:
有四種路徑如下:
<router-link to='/'>
<router-link to='/a'>
<router-link to='/b'>
<router-link to='/ab'>
router-link-active相當於模糊匹配,及2或3點選,1號也會新增router-link-active樣式;點選4號,1和2也會新增該類;
修改vue預設的routerLink樣式:
方法一:設定區域性
直接在相關元件中設定想要的router-link-active或router-link-exact-active樣式
<style>
.router-link-exact-active{
border-bottom:2px solid #1989fa;
}
</style>
方法二:設定全域性
在router/index.js 中設定全域性的linkActiveClass
linkActiveClass:myActive
詳細可以參照文件進行設定:https://router.vuejs.org/zh/api/#base
2、在vue專案結構中匯入全域性的js函式
以時間格式化函式為例:
首先在vuecli專案結構中建立相關的js檔案:
//E:\vue\platform\src\assets\js\DateFormat.js /**************************************時間格式化處理************************************/ function dateFormat(fmt, date) { var o = { "M+": date.getMonth() + 1, //月份 "d+": date.getDate(), //日 "h+": date.getHours(), //小時 "m+": date.getMinutes(), //分 "s+": date.getSeconds(), //秒 "q+": Math.floor((date.getMonth() + 3) / 3), //季度 "S": date.getMilliseconds() //毫秒 }; if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)); } for (var k in o) { if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); } return fmt; } export { dateFormat//匯出 }
其次在main.js檔案中進行全域性配置,把它掛在到vue的原型中去:
//main.js
import { dateFormat } from './assets/js/DateFormat'
Vue.prototype.$dateFormat = dateFormat
最後在需要呼叫的地方直接進行引用:ctime:this.$dateFormat('yyyy-MM-dd hh:mm:ss',new Date())
就完成對時間的格式化處理
3、vue中slot的用法
slot:插槽,子元件中存在一個對父元件插入內容的佔位
一、不具名插槽
Child.vue:
<template>
<div>
<p>這裡是子元件</p>
<slot>
父元件的佔位,父元件沒有插入內容會顯示
</slot>
</div>
</template>
Parent.vue:
<template>
<div>
<Child>
<p>父元件插入內容</p>
</Child>
</div>
</template>
<script>
import Child from './Child'
export default {
components:{ Child }
}
</script>
顯示:
這裡是子元件
父元件插入內容
二、具名插槽
Child.vue:
<template>
<div>
<p>這裡是子元件</p>
<slot name="slot1">//具體名字
這裡是slot1
</slot>
<slot>預設的slot</slot>
<slot name="slot2">
這裡是slot2
</slot>
</div>
</template>
Parent.vue
<template>
<div>
<Child>
<p slot="slot2">父元件插入內容</p>//匹配名字相同的slot插槽,沒有名字則匹配預設的slot插槽
</Child>
</div>
</template>
<script>
import Child from './Child'
export default {
components:{ Child }
}
</script>
顯示:
這裡是子元件
這裡是slot1 預設的slot
父元件插入內