@@ -0,0 +1,12 @@ | |||||
<script setup name="App"> | |||||
// import store from '@/store' | |||||
// console.log(store.menuStore.menuArr) | |||||
</script> | |||||
<template> | |||||
<router-view v-slot="{ Component }"> | |||||
<component :is="Component" /> | |||||
</router-view> | |||||
</template> | |||||
<style scoped></style> |
@@ -0,0 +1,15 @@ | |||||
import waterMarker from './waterMarker' | |||||
const directivesList = { | |||||
// 这里放指令 | |||||
waterMarker // 水印指令 | |||||
} | |||||
const directives = { | |||||
install: function (app) { | |||||
Object.keys(directivesList).forEach(key => { | |||||
// 注册自定义指令 | |||||
app.directive(key, directivesList[key]) | |||||
}) | |||||
} | |||||
} | |||||
export default directives |
@@ -0,0 +1,30 @@ | |||||
/** | |||||
* v-waterMarker可接收参数,均为非必填 | |||||
* { text: 'vue-admin-box', font: '16px Microsoft JhengHei', textColor: '#000' } | |||||
*/ | |||||
const directive = { | |||||
// el: HTMLElement,绑定的父级DOM// binding: DirectiveBinding//指令传来的参数对象 | |||||
mounted (el, binding) { | |||||
binding.value ? binding.value : binding.value = {} | |||||
addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor) | |||||
} | |||||
} | |||||
function addWaterMarker (str, parentNode, font, textColor) { | |||||
// 水印文字,父元素,字体,文字颜色 | |||||
var can = document.createElement('canvas') | |||||
parentNode.appendChild(can) | |||||
can.width = 200 | |||||
can.height = 150 | |||||
can.style.display = 'none' | |||||
var cans = can.getContext('2d') | |||||
cans.rotate((-20 * Math.PI) / 180) | |||||
cans.font = font || '14px Microsoft JhengHei' | |||||
cans.fillStyle = textColor || 'rgba(180, 180, 180, 0.3)' | |||||
cans.textAlign = 'left' | |||||
cans.textBaseline = 'middle' | |||||
cans.fillText(str || 'vue-admin-box', can.width / 10, can.height / 2) | |||||
parentNode.style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')' | |||||
} | |||||
export default directive |
@@ -0,0 +1,45 @@ | |||||
import { createApp } from 'vue' | |||||
import App from './App.vue' | |||||
import directives from './directive' // 指令 | |||||
import router from '@/router' // router引入 | |||||
// import 'default-passive-events'// 添加事件管理者'passive',来阻止'touchstart'事件,让页面更加流畅。 解决chrome下的warning问题 | |||||
// 状态管理引入 | |||||
import { createPinia } from 'pinia' | |||||
// import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' | |||||
import piniaPluginPersist from 'pinia-plugin-persist' | |||||
import { registerStore } from '@/store' | |||||
import 'tailwindcss/tailwind.css' | |||||
import ElementPlus from 'element-plus' | |||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue' | |||||
import 'element-plus/dist/index.css' | |||||
import zhCn from 'element-plus/es/locale/lang/zh-cn' | |||||
import '@/assets/style/common.less' | |||||
import 'virtual:svg-icons-register' // 注册svg | |||||
import svgIcon from '@/components/svgIcon/index.vue' | |||||
import tableList from '@/components/tableList/index.vue' | |||||
const instance = createApp(App) | |||||
const pinia = createPinia() // 状态管理 | |||||
pinia.use(piniaPluginPersist) | |||||
instance.use(pinia) // 挂载 | |||||
registerStore() // 注册store | |||||
instance.use(directives) | |||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { | |||||
instance.component(key, component) | |||||
} // 批量注册element icon | |||||
instance.component('SvgIcon', svgIcon) | |||||
instance.component('TableList', tableList) | |||||
instance | |||||
.use(router) | |||||
.use(ElementPlus, { | |||||
locale: zhCn, | |||||
button: { | |||||
autoInsertSpace: true | |||||
} | |||||
}) | |||||
.mount('#app') |