前端补缺Vite

<script lang="ts">
    export default {
        data() {
            return {
                age:18
            }
        }
    }
</script>

<template>
	<div>
        <div ref="dom">
    		我是DOM        
	    </div>
        <button @click="change">
            获取DOM
    </button>
    </div>
</template>
<script setup lang="ts">
    import { ref } from 'vue'
    const dom = ref<HTMLDivElement>()
    
    const change = () => {
    // 此处使用?.断言来辅助TS推断
    // 注意由于setUp标签渲染比DOM快，因此函数外读取将为undefined
    // 因此可以放在点击事件中
    console.log(dom.value?.innerText)
    }
</script>

<template>
	<div>
        Ref: {{ Man }}
    </div>
	<div>
        shallowRef: {{ Man3 }}
    </div>
	<button @click="change">
        修改
    </button>
</template>
<script lang="ts">
    import { ref, isRef, shallowRef, triggerRef, customRef } from 'vue'
    import type { Ref } from 'vue' // Ref的泛型
    
    // 自定义Ref
    function MyRef<T>(value:T) {
        return customRef((track, trigger) => {
            return {
                get() {
                    track()
                    return value
                },
                set(newVal) {
                    value=newVal
                    trigger()
                }
            }
        })
    }
    
    
    type M = {
        name:string
    }
    // 直接使用ref
    const Man = ref<M>({ name: 'Ender' })
    // 使用Ref接口
    const Man:Ref<M> = ref({ name: 'Ender' })
    const Man2 = { name: 'Ender3' }
    const Man3 = shallowRef({ name: 'Ender4' })
    const customRefMan = MyRef<string>('customEnder')
    const change = () => {
        // 修改和取值时需要通过value访问其中的值
        Man.value.name = 'Ender2'
        // shallowRef使用这样的方式修改视图将不会同步改变
        Man2.value.name = 'Ender2'  // 但此处仍然会发生改变，因为收到了ref的影响
        // shallowRef需要使用这样的方式修改
        Man2.value = {
            name: "Ender2"
        }
        // 但如果调用了triggerRef,即使是shallowRef也一样会被更新
        triggerRef()
        // 自定义Ref同样通过value的方式进行值修改
        customRefMan.value = 'customEnder修改了'
        console.log(isRef(Man2))
        console.log(Man)
        console.log(Man)
    }
</script>

<template>
	<div>
    	<div>
    		姓：<input v-model="firstName" type="text">
	    </div>
        <div>
    	    名：<input v-model="lastName" type="text">
	    </div>
        <div>
            全名: {{ name }}
	    </div>
        <button @click="changeName">
            changeName
	    </button>
    </div>
</template>
<script setup lang='ts'>
    import { ref, computed } from 'vue'
    let firstName = ref('张')
    let lastName = ref('三')
    // 1. 选项式写法 支持一个对象传入get、set方法
    // name会随着firstName和lastName的变化而变化
    let name = computed<String>({
        get () {
            return firstName.value + '-' + lastName.value
        },
        set (newVal) {
            // 将得到的值解构赋值给firstName和lastName
            [firstName.value, lastName.value] = newVal.split('-')
        }
    })
    const changeName = () => {
        // name变量可以直接赋值，赋值时会被computed中的set拦截
        name.value = 'Ender-Xiao'
    }
    // 函数写法 只能支持一个gat函数，不允许修改
    // 使用computed创建的对象是readonly的
    let name = computed(()=> firstName.value + '-' + lastName.value)
    
</script>

add(1) // 1
add(1)(2) // 3
add(1)(2)(3) // 6
add(1)(2)(3)(4) // 10
add(1)(2,3) // 6
add(1,2)(3) // 6
add(1,2,3) // 6

<!-- template -->
<waterFallVue :title="name"></waterFallVue>
<!-- script -->
let name="ender"

<template>
	<div>
        {{ title }}
    </div>
</template>
<!-- script setup -->
<script setup lang="ts">
    const props = defineProps({
        title: {
            type: String,
            default: "默认值"
        }
    })
    console.log(props.title)
</script>

<script>
export default {
  props: {
      title: String
  },
  setup(props) {
    // setup() 接收 props 作为第一个参数
    console.log(props.title)
  }
}
</script>

<template>
	<waterFallVue @on-trans-data="getData"></waterFallVue>
</template>

<script setup lang="ts">
    const getData = (data:String) => {
        // data为子组件中的数据
        console.log(data)
    }
</script>

<template>
	<waterFallVue ref="waterFall"></waterFallVue>
</template>

<script setup lang="ts">
    import waterFallVue from './components/water-fall.vue'
    import { onMounted } from 'vue'
    onMounted(()=>{
	    // 此处需要利用TS的InstanceType来推断类型
        const waterFall = ref<InstanceType<typeof waterFallVue>>()
    	console.log(waterFall.value.data)
    })
</script>

<template>
    <div id="waterFall" class="ender-waterfall">
        <div :style="{height: item.height + 'px', background: item.background, left: item.left + 'px',top: item.top + 'px'}" v-for="(item, index) in waterFallList" :key="index" class="ender-waterfall__items"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

// TODO: 接收父组件传来的数据
const props = withDefaults(defineProps<{
    list: any[]
}>(),{
    list: ()=>[{height: 300, background: 'red'}]
})
// TODO: 维护需要渲染的元素
const waterFallList = reactive<any[]>([])
// TODO: 维护高度
const heightList:number[] = []

//TODO: 初始化父组件传来的参数
const init = () => {
    // TODO: 清空数据
    waterFallList.length = 0
    heightList.length = 0
    const width = 130
    // TODO: 获取可是区域的宽度
    const x = document.getElementById("waterFall")?.clientWidth
    const column =Math.floor(x===undefined? 0: x / width)
    console.log(column)
    // TODO: 根据列数从props中拿出第一行
    for (let i = 0; i < props.list.length; i++) {
        if(i<column){
            // TODO: 第一列元素按顺序放
            props.list[i].left = i * width
            props.list[i].top = 10
            waterFallList.push(props.list[i])
            heightList.push(props.list[i].height + 10)
        }else {
            // TODO: 之后的元素放在高度最小的列
            let minHeightIndex = 0;
            let minHeight = heightList[0];
            heightList.forEach((h, index) => {
                if(h < minHeight){
                    minHeightIndex = index
                    minHeight = h
                }
            })
            // TODO: 计算top和left
            props.list[i].left = minHeightIndex * width
            props.list[i].top = minHeight + 10
            // TODO: 更新需要渲染的元素
            waterFallList.push(props.list[i])
            // TODO: 更新高度
            heightList[minHeightIndex] = minHeight + props.list[i].height + 10
        }
    }
}

const resizeHandler = () => {
    init()
}

onMounted(()=>{
    init()
    // TODO: 监听窗口大小改变事件
    // 防抖函数
    const debounce = (fn:Function, delay:number) => {
        let timer:any = null
        return function() {
            if(timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(()=>{
                fn()
            }, delay)
        }
    }
    // 触发事件
    const cancelDebounce = debounce(resizeHandler, 100)
    window.addEventListener("resize", cancelDebounce)
})
</script>

<style lang="scss" scoped>
@include b(waterfall){
    position: relative;
    width: 100%;
    @include e(items){
        position: absolute;
        width: 120px;
    }
}
</style>

<template>
    <div>
        <A @trans-data-to-b="getMessageFromA"></A>
        <B :message="message"></B>
    </div>
</template>

<script setup lang="ts">
import A from "./A.vue"
import B from "./B.vue"
import { ref } from "vue";

let message = ref("")
const getMessageFromA = (params: string) => {
    message.value = params
}
</script>
<style>
</style>

<template>
    <div>
        <button @click="emitToB">给B传递一些信息</button>
    </div>
</template>

<script setup lang="ts">
const emit = defineEmits(['trans-data-to-B'])
let message = ""
const emitToB = () => {
    message = "来自A的信息"
    emit('trans-data-to-B', message)
}
</script>
<style>
</style>

<template>
    <div>
        {{ messageFromA }}
    </div>
</template>

<script setup lang="ts">

type Props = {
    messageFromA: string
}

defineProps<Props>()
</script>
<style>
</style>

<template>
    <div>
        <button @click="emitToB">给B传递一些信息</button>
    </div>
</template>

<script setup lang="ts">
import Bus from "../../Bus"
let message = ""
const emitToB = () => {
    message = "来自A的信息"
    // 注册事件
    Bus.emit('trans-data-to-B', message)
}
</script>
<style>
</style>

<template>
    <div>
        {{ messageFromA }}
    </div>
</template>

<script setup lang="ts">
import Bus from '../../Bus';
import { ref } from 'vue';
let messageFromA = ref("")
Bus.on('trans-data-to-B', (message:string) => {
    messageFromA.value = message
})
type Props = {
    messageFromA: string
}

defineProps<Props>()
</script>
<style>
</style>

<!-- Tree.vue -->
<templat>
    <div class="tree" v-for="item in data">
        <input type="checkbox"> <span>{{ item.name }}</span>
        <Tree v-if="item?.children?.length" :data="item.children"></Tree>
    </div>
</templat>

<script setip lang='ts'>
    type TreeList = {
        name: string;
        icon?: string;
        children?: TreeList[] | [];
    };
    type Props<T> = {
        data?: T[] | [];
    };
    defineProps<Props<TreeList>>();
</script>

<!-- Tree.vue -->
<templat>
    <div class="tree" v-for="item in data">
        <input type="checkbox"> <span>{{ item.name }}</span>
        <!-- 使用name调用组件自身 -->
        <tree v-if="item?.children?.length" :data="item.children"></tree>
    </div>
</templat>

<!-- 定义组件name -->
<script lang='ts'>
    export default {
        name: "tree"
    }
</script>

<script setip lang='ts'>
    type TreeList = {
        name: string;
        icon?: string;
        children?: TreeList[] | [];
    };
    type Props<T> = {
        data?: T[] | [];
    };
    defineProps<Props<TreeList>>();
</script>

<!-- Tree.vue -->
<templat>
    <div class="tree" v-for="item in data">
        <input type="checkbox"> <span>{{ item.name }}</span>
        <!-- 使用name调用组件自身 -->
        <tree v-if="item?.children?.length" :data="item.children"></tree>
    </div>
</templat>

<script setip lang='ts'>
    <!-- 使用defineOptions定义组件name -->
    defineOptions({
        name: "tree"
    })
    type TreeList = {
        name: string;
        icon?: string;
        children?: TreeList[] | [];
    };
    type Props<T> = {
        data?: T[] | [];
    };
    defineProps<Props<TreeList>>();
</script>

<!-- Tree.vue -->
<templat>
    <!-- 此处注意阻止组件事件冒泡，或者在父组件使用代理来处理组件点击事件 -->
    <div @click.stop='clickTap(item, $event)' class="tree" v-for="item in data">
        <input type="checkbox"> <span>{{ item.name }}</span>
        <!-- 使用name调用组件自身 -->
        <tree v-if="item?.children?.length" :data="item.children"></tree>
    </div>
</templat>

<script setip lang='ts'>
    <!-- 使用defineOptions定义组件name -->
    defineOptions({
        name: "tree"
    })
    type TreeList = {
        name: string;
        icon?: string;
        children?: TreeList[] | [];
    };
    type Props<T> = {
        data?: T[] | [];
    };
    defineProps<Props<TreeList>>();
    const clickTap = (item: Tree, e) => {
        console.log(item)
        console.log(e.target)
    }
</script>

<Teleport :disable="false" :to="body">
    <A></A>
</Teleport>

<button @click='flag = !flag'>切换</button>
<transition name='fade'>
  <div v-if='flag' class="box"></div>
</transition>

<template>
	<transition enter-active-class="animate__animated animate__bounceInLeft" name='fade'>
         <div v-if='flag' class="box"></div>
       </transition>
</template>
<script setup lang="ts">
    import 'animate.css'
</script>

<transition :duration="1000">...</transition>
 
 
<transition :duration="{ enter: 500, leave: 800 }">...</transition>

<script setup lang="ts">
import {ref} from 'vue'
import gsap from 'gsap'
const BeforeEnter = (el: Element) => {
    console.log('进入之前from', el);
    gsap.set(el, {
        width: 0,
        height: 0
    })
}
const Enter = (el: Element,done: gsap.Callback) => {
    console.log('过度曲线');
    gsap.to(el, {
        width: 200px,
        height: 200px,
        onComplete: done
    })
}
const AfterEnter = (el: Element) => {
    console.log('to');
}
const EnterCanceller = (el: Element) => {
    console.log('过度效果被打断');
}
</script>
<template>
	<transition @before-enter="BeforeEnter" @enter="Enter" @after-enter="AfterEnter"  @enter-cancelled="EnterCancelled">
    </transition>
</template>

<transition appear appear-active-class="from" appear-from-class="active" appear-to-class="to">
</transition>

<template>
    <div>
        <button @click="shuffleMatrix">shuffle</button>
        <transition-group move-class="ender-shuffleWraps--moveAnimate" class="ender-shuffleWraps" tag="div">
            <div class="ender-shuffleWraps__items" v-for="item in list" :key="item.id">
                {{item.number}}
            </div>
        </transition-group>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive} from 'vue'
import _ from 'lodash'

// 利用Array.apply生成一个长度为81,且值初始化为undefined的数组
const list = ref(Array.apply(null, {length: 81} as number[]).map((_, index) => {
    return {
        id: index,
        number: (index % 9) + 1
    }
}))

const shuffleMatrix = () => {
    list.value = _.shuffle(list.value)
}

</script>

<style lang="scss">
@include b(shuffleWraps) {
    display: flex;
    flex-wrap: wrap;
    width: calc(20px * 9 + 18px);
    @include e(items) {
        width: 20px;
        height: 20px;
        background: #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        margin: 1px;
    }
    @include m(moveAnimate) {
        transition: all 0.3s;
    }
}
</style>

<tmplate>
    <div>
        <button @click="flg = !flg">
            切换状态
        </button>
        <!-- 使用自定义钩子 -->
        <!-- 自定义钩子同样允许自定义参数，以及自定义修饰符 -->
        <A v-if="flg" v-move:aaa.ender="{background: 'red'}"></A>
    </div>
</tmplate>

<script setup lang="ts">
    import A from "./components/A.vue"
    import {ref, Directive, DirectiveBinding} from "vue"
    let flg = ref<boolean>(true)
    type Dir ={
        background: string
    }
    // 自定义指令的命名必须以v开头
    // 类型为Directive
    const vMove:Directive = {
        // 传入自定义钩子的参数在所有生命周期函数中都能作为参数接收到
        created() {
            console.log("========>created")
        },
        beforeMount() {
            console.log("========>beforeMount")
        },
        // 接收到的参数以及修饰符都包含在DirectiveBinding类型中，该类型接收一个泛型辅助推导
        mounted(el:HTMLElement, dir:DirectiveBinding<Dir>) {
            console.log("========>mounted")
            el.style.background = dir.value.background
        },
        beforeUpdate() {
            console.log("========>beforeUpdate")
        },
        updated() {
            console.log("========>updated")
        },
        beforeUnmount() {
            console.log("========>beforeUnmount")
        },
        unmount() {
            console.log("========>unmount")
        }
    }
</script>

<style scoped>
    .A {
        width: 200px;
        height: 200px;
        border: 1px solid #ccc;
    }
</style>

<tmplate>
    <div class="btns">
        <button v-has-show="shope:edit">创建</button>
        <button v-has-show="shope:create">编辑</button>
        <button v-has-show="shope:delete">删除</button>
    </div>
</tmplate>

<script setip lang="ts">
    import {ref, reactive} from "vue"
    import type {Directive} from "vue"
    
    // 模拟用户ID存储
    localStorage.setItem('userId', 'ender')
    // mock后台返回的数据
    // 此处使用京东标准，ID:页面:权限
    const permission = [
        'ender:shope:edit',
        'ender:shope:create',
        'ender:shope:delete'
    ]
    // 取出用户ID
    const userId = localStorage.getItem('userId') as string
	// 创建自定义指令
    // 函数式自定义指令，接收两个参数el和binding，分别代表被指令绑定的DOM元素，以及指令绑定的值
    // 可以通过Directive接收的两个泛型指定类型
    const vHasShow:Directive<HTMLElement, string>(el, binding) {
        // 拼接得到用户权限信息字符串
        if(!permission.includes(userId + ":" + binding.value)) {
            el.style.display = 'none'
        }
    }
</script>

<style scope lang='less'>
    .btns{
        button {
            margin: 10px
        }
    }
</style>

<tmplate>
    <div>
        <div>
            <img v-lazy="item" v-for="item in arr" width="360" height="500" alt="">
        </div>
    </div>
</tmplate>

<script setup lang="ts">
    import {ref, reactive} from "vue"
    import type { Directive } from "vue"
    // 使用vue提供的函数批量引入图片
    // meta找有两个方法:glob和globEager
    // glob是懒加载的，返回的是一个函数，import语句用于函数会触发代码分包
    // let modules = {"xxx": ()=> import("xxx")}
    // globEager为静态加载
    // import xxx from 'xxx'
    // 使用TS中的Record工具定义一个对象类型，接收两个泛型，分别表示key和value的类型
    let imgList:Record<string, { default: string }> = import.meta.glob('./assets/images/*.*')
    let arr = Object.values(imageList).map((v) => v.default)
    
    // 自定义指令
    const vLazy:Directive<HTMLImgElement, string> = async (el, binding) => {
        // 加载默认显示的图片
        const def = await import('./assets/vue.svg')
        el.src = def.default
        // 借助js新增的IntersectionObserver方法监听元素是否出现在可视窗内
        const observer = new IntersectionObserver((enr) => {
            // 回调函数返回一个entrece数组，取其第一个元素
            // inersectionRatio为一个number变量，用于记录元素在可视窗口中的比例
            if(enr[0].inersectionRatio > 0) {
                // 出现在视窗中则需要加载真正的图片
                el.src = binding.value
                // 赋值完成后停止监听避免反复加载
                observer.unobserver(el)
            }
        })
        // 开启事件监听
        observer.observer(el)
    }
</script>

<style scoped lang="less">
</style>

<template>
	<img id="img" width="300" height="300" src="./img/test.png" />
</template>

<script setup lang="ts">
    import useImageToBase64 from "./hooks"
    useImageToBase64({el: "#img"}).then((res) => {
        console.loh(res.baseURL)
    })
</script>

<style>
</style>

<template>
<div>
    {{$env}}
</div>
<div>
    {{$filter.format("World")}}
</div>
</template>
<script setup lang="ts">
    import {getCurrentInstance} from "vue"
    // js中需要先获取当前app实例，再从当前实例的proxy中得到全局变量/方法
    const app = getCurrentInstance()
    console.log(app?.proxy?.$env)
</script>

<template>
    <div v-if="isShow" class="ender-loading">
        <div class="ender-loading__content">Loading...</div>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    const isShow = ref(false) // 控制显示
    console.log(isShow)

    const show = () => {
        isShow.value = true
    }

    const hide = () => {
        isShow.value = false
    }
    // 暴露组件方法
    defineExpose({
        isShow,
        show,
        hide
    })
</script>

<style lang="scss" scoped>
    @include b(loading) {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        @include e(content) {
            font-size: 30px;
            color: #fff;
        }
    }
</style>

<template>
  <Layout></Layout>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance } from 'vue'
import Layout from "./Layout/index.vue"

const instance = getCurrentInstance()
instance?.proxy?.$loading.show()

setTimeout(() => {
  instance?.proxy?.$loading.hide()
}, 2000)

</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
html, body {
  width: 100%;
  height: 100%;
}
#app {
  @include bfc;
}
</style>