11 changed files with 12 additions and 326 deletions
@ -1,88 +0,0 @@ |
|||||
<style lang='less' scoped> |
|
||||
a { |
|
||||
color: #42b983; |
|
||||
background: v-bind(color); |
|
||||
} |
|
||||
.demo{ |
|
||||
color:blue; |
|
||||
span{ |
|
||||
font-weight: bold; |
|
||||
text-decoration: initial; |
|
||||
font-size:40px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<style lang="less" module="cssName"> |
|
||||
.demo{ |
|
||||
color:red; |
|
||||
span{ |
|
||||
font-weight: bold; |
|
||||
text-decoration: initial; |
|
||||
font-size:40px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<template> |
|
||||
<h1 v-bind="$attrs">{{ msg }}</h1> |
|
||||
<slot/> |
|
||||
<slot name="demo"/> |
|
||||
<p v-my-directive> |
|
||||
Recommended IDE setup: |
|
||||
<a href="https://code.visualstudio.com/" target="_blank">VSCode</a> |
|
||||
+ |
|
||||
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a> |
|
||||
</p> |
|
||||
<!-- v-memo 类似于 v-one 数组内的值变换时会更新 --> |
|
||||
<p v-memo="[b]"> |
|
||||
{{count}} |
|
||||
</p> |
|
||||
<div class="demo">1-<span>2</span></div> |
|
||||
<button type="button" @click="count++">count is: {{ count }}</button> |
|
||||
<p :class="cssName.demo"> |
|
||||
<span>Edit</span>{{foo}} |
|
||||
<code>components/HelloWorld.vue</code> to test hot module replacement. |
|
||||
</p> |
|
||||
--{{num}} |
|
||||
<hello-world v-if="num>0" :num="num-1" msg="-----msg----"/> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import { ref, useAttrs, useSlots, useCssVars, inject, defineExpose } from 'vue' |
|
||||
|
|
||||
console.log(inject("store"),'---------------store--------') |
|
||||
console.log(useAttrs(),'-------useAttrs-------') |
|
||||
console.log(useSlots(),'---------useSlots--') |
|
||||
defineProps({ |
|
||||
msg: String, |
|
||||
num: Number |
|
||||
}) |
|
||||
useCssVars(e=>{ |
|
||||
console.log(e,"-----------ctx----") |
|
||||
}) |
|
||||
const emit=defineEmits(['close']) |
|
||||
console.log(emit,'-------emit-----------') |
|
||||
const count = ref(0) |
|
||||
const color="#342e91" |
|
||||
const b=ref('ddd') |
|
||||
window.b=b |
|
||||
defineExpose({ // 暴露数据，提供父元素使用 |
|
||||
count |
|
||||
}) |
|
||||
|
|
||||
const vMyDirective={ |
|
||||
// 指令具有一组生命周期钩子： |
|
||||
// 在绑定元素的 attribute 或事件监听器被应用之前调用 |
|
||||
created(el, binding, vnode) {}, |
|
||||
// 在绑定元素的父组件挂载之前调用 |
|
||||
beforeMount() {}, |
|
||||
// 在绑定元素的父组件挂载之后调用 |
|
||||
mounted() {}, |
|
||||
// 在包含组件的 VNode 更新之前调用 |
|
||||
beforeUpdate() {}, |
|
||||
// 在包含组件的 VNode 及其子组件的 VNode 更新之后调用 |
|
||||
updated() {}, |
|
||||
// 在绑定元素的父组件卸载之前调用 |
|
||||
beforeUnmount() {}, |
|
||||
// 在绑定元素的父组件卸载之后调用 |
|
||||
unmounted() {} |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,19 +0,0 @@ |
|||||
<style lang="less" scoped> |
|
||||
|
|
||||
</style> |
|
||||
<template> |
|
||||
<router-view v-slot="{ Component }"> |
|
||||
<transition name="fade-transform" mode="out-in"> |
|
||||
<keep-alive :include="cachedViews"> |
|
||||
<component :is="Component" v-if="cached" :key="$route.path"/> |
|
||||
</keep-alive> |
|
||||
</transition> |
|
||||
<component :is="Component" :key="$route.path" v-if="!cached"/> |
|
||||
</router-view> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import { shallowRef } from 'vue' |
|
||||
|
|
||||
var cachedViews=shallowRef(['demo']) |
|
||||
var cached=true |
|
||||
</script> |
|
||||
@ -1,2 +0,0 @@ |
|||||
export {default as sidebar} from './sidebar/index.vue' |
|
||||
export {default as appMain} from './appMain.vue' |
|
||||
@ -1,26 +0,0 @@ |
|||||
<style lang="less" scoped> |
|
||||
.el-menu{ |
|
||||
border-right:none; |
|
||||
} |
|
||||
</style> |
|
||||
<template> |
|
||||
<el-scrollbar> |
|
||||
<el-menu |
|
||||
:default-active="path" |
|
||||
background-color="#001529" |
|
||||
text-color="#bfcbd9" |
|
||||
:unique-opened="true" |
|
||||
active-text-color="#409EFF" |
|
||||
router> |
|
||||
<sidebar-item v-for="(route,k) in menu" :key="k" :item="route" :base-path="route.path"/> |
|
||||
</el-menu> |
|
||||
</el-scrollbar> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import { inject } from 'vue' |
|
||||
import sidebarItem from "./sidebarItem.vue" |
|
||||
import {useRoute} from 'vue-router' |
|
||||
import {menu} from "@/router" |
|
||||
|
|
||||
var {path} = inject("route") |
|
||||
</script> |
|
||||
@ -1,15 +0,0 @@ |
|||||
<style lang="less" scoped> |
|
||||
.svg-icon{ |
|
||||
margin-right:5px; |
|
||||
} |
|
||||
</style> |
|
||||
<template> |
|
||||
<svg-icon v-if="icon" :name="icon"/> |
|
||||
<span v-if="title">{{title}}</span> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
var {icon, title}=defineProps({ |
|
||||
icon:String, |
|
||||
title:String, |
|
||||
}) |
|
||||
</script> |
|
||||
@ -1,63 +0,0 @@ |
|||||
<style lang="less" scoped> |
|
||||
|
|
||||
</style> |
|
||||
<template> |
|
||||
<template v-if="!props.item?.meta?.hidden"> |
|
||||
<template v-if="hasOneShowingChild(props.item.children, props.item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren) && !props.item.alwaysShow"> |
|
||||
<el-menu-item :index=" /^\//.test(onlyOneChild.path)?onlyOneChild.path:basePath " > |
|
||||
<item :icon="onlyOneChild.meta?.icon||''" :title="onlyOneChild.meta?.title||''"/> |
|
||||
</el-menu-item> |
|
||||
</template> |
|
||||
<el-sub-menu v-else ref="subMenu" :index="resolvePath(props.item.path)"> |
|
||||
<template #title> |
|
||||
<item v-if="props.item.meta" :icon="props.item.meta?.icon||''" :title="props.item.meta?.title||''"/> |
|
||||
</template> |
|
||||
<sidebar-item |
|
||||
v-for="(child,k) in props.item.children" |
|
||||
:key="k" |
|
||||
:item="child" |
|
||||
:base-path="resolvePath(child.path)"/> |
|
||||
</el-sub-menu> |
|
||||
</template> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import { inject, onMounted, shallowRef } from 'vue' |
|
||||
import item from './item.vue' |
|
||||
|
|
||||
var props=defineProps({ |
|
||||
item:Object, |
|
||||
basePath:String, |
|
||||
}) |
|
||||
var {commit} = inject("store") |
|
||||
var onlyOneChild=shallowRef({}) |
|
||||
function hasOneShowingChild(children=[], parent){ |
|
||||
var showingChildren=children.filter(i=>{ |
|
||||
if(i?.meta?.hidden)return false; |
|
||||
else{ |
|
||||
onlyOneChild.value=i; |
|
||||
return true |
|
||||
} |
|
||||
}) |
|
||||
if(showingChildren.length==1)return true; |
|
||||
|
|
||||
if(showingChildren.length==0){ |
|
||||
onlyOneChild.value={ path:'',noShowingChildren:true, ...parent} |
|
||||
return true; |
|
||||
} |
|
||||
return false; |
|
||||
} |
|
||||
function resolvePath(routePath){ |
|
||||
if(/^\//.test(routePath))return routePath; |
|
||||
return `${props.basePath}/${routePath}`.replace(/\/+/g,'/') |
|
||||
} |
|
||||
|
|
||||
onMounted(async ()=>{ |
|
||||
commit('data/setMenu',{ |
|
||||
key: resolvePath(props.basePath), |
|
||||
item:{ |
|
||||
name: props.item.name, |
|
||||
parentPath: props.item?.meta?.parentPath, |
|
||||
} |
|
||||
}) |
|
||||
}) |
|
||||
</script> |
|
||||
@ -1,29 +0,0 @@ |
|||||
<style lang="less" scoped> |
|
||||
.wrapper{ |
|
||||
display:flex; |
|
||||
height: 100%; |
|
||||
&>.sidebar-container{ |
|
||||
flex-shrink: 0; |
|
||||
width: 210px !important; |
|
||||
background-color: #001529; |
|
||||
z-index:100; |
|
||||
.el-scrollbar__view{ |
|
||||
height:100%; |
|
||||
} |
|
||||
} |
|
||||
&>.main-container{ |
|
||||
flex-grow: 1; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<template> |
|
||||
<div class="wrapper"> |
|
||||
<sidebar class="sidebar-container"/> |
|
||||
<div class="main-container"> |
|
||||
<app-main/> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import {sidebar, appMain} from './component' |
|
||||
</script> |
|
||||
@ -1,30 +0,0 @@ |
|||||
<style lang="less" scoped> |
|
||||
|
|
||||
</style> |
|
||||
<template> |
|
||||
<h1 @click="$router.go(-1)">demo page</h1> |
|
||||
<vue3VideoPlay |
|
||||
width="800px" |
|
||||
title="冰河世纪" |
|
||||
v-bind="options" |
|
||||
:autoPlay="false"/> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import { nextTick, onActivated, onMounted, reactive } from "vue" |
|
||||
|
|
||||
console.log(">>>>>>>>>>>>---------demo---------setup---------") |
|
||||
onActivated(()=>{ |
|
||||
console.log(">>>>>>>>>>>>>------demo-----------activated-------") |
|
||||
}) |
|
||||
|
|
||||
var options=reactive({ |
|
||||
// src:"https://open.ys7.com/v3/openlive/J91439318_1_1.m3u8?expire=1700465231&id=516273656091906048&t=92d4bc07e37fa42eb4e315cfa35cebf2447a2f1a5fb95517b611a37a19c731d0&ev=100", |
|
||||
src:"http://223.110.241.204:6610/gitv/live1/G_CCTV-1-CQ/G_CCTV-1-CQ/1.m3u8", |
|
||||
type:"m3u8", |
|
||||
poster: '', //封面 |
|
||||
color: "#409eff", //主题色 |
|
||||
}) |
|
||||
onMounted(()=>{ |
|
||||
|
|
||||
}) |
|
||||
</script> |
|
||||
@ -1,33 +0,0 @@ |
|||||
<style lang="less" scoped> |
|
||||
.container{ |
|
||||
text-align: center; |
|
||||
} |
|
||||
</style> |
|
||||
<template> |
|
||||
<div class="container"> |
|
||||
<div @click="$router.push({path:'/demo'})">demo</div> |
|
||||
svg-icon:<svg-icon name="car" style="font-size:20px;"/> |
|
||||
<img alt="Vue logo" src="~@/assets/img/logo.png" /> |
|
||||
<img :src="require('@/assets/img/logo.png')"/> |
|
||||
<hello-world msg="Hello Vue 3 + Vite" :num='1' style="color:red;" class="hello"> |
|
||||
<div class="a">111</div> |
|
||||
<template #demo> |
|
||||
<div>{{foo}}</div> |
|
||||
</template> |
|
||||
</hello-world> |
|
||||
<dInput v-model.digit="value"/> |
|
||||
<dScrollBoard></dScrollBoard> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import { inject, onMounted, onUnmounted, ref } from 'vue' |
|
||||
import HelloWorld from "@/components/HelloWorld.vue" |
|
||||
import {dInput, dScrollBoard} from 'black-knight/lib/components' |
|
||||
|
|
||||
var event = inject("event") |
|
||||
var value = ref('') |
|
||||
onMounted(()=>{ |
|
||||
|
|
||||
onUnmounted(event.on("home",data=>{console.log(data,'=======event----------home--1111--')})) |
|
||||
}) |
|
||||
</script> |
|
||||
@ -0,0 +1,10 @@ |
|||||
|
<style lang="less" scoped> |
||||
|
|
||||
|
</style> |
||||
|
<template> |
||||
|
|
||||
|
</template> |
||||
|
<script setup> |
||||
|
import { inject, onMounted, onUnmounted, ref } from 'vue' |
||||
|
|
||||
|
</script> |
||||
Loading…
Reference in new issue