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