https://github.com/yaogengzhu/zhihu

vue3.0仿写知乎
https://github.com/yaogengzhu/zhihu

Last synced: 6 days ago
JSON representation

vue3.0仿写知乎

• Host: GitHub
• URL: https://github.com/yaogengzhu/zhihu
• Owner: yaogengzhu
• Created: 2021-08-15T14:28:37.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-08-29T12:58:02.000Z (about 3 years ago)
• Last Synced: 2023-03-02T18:32:32.804Z (over 1 year ago)
• Language: Vue
• Size: 101 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 仿知乎

## 技术栈

- [x] vue3.x 

- [x] vite

- [x] axios

## vue3.x新增的特性

- reactive 响应式基础api(返回对象的响应式副本)

- teleport vue中的传送门 

- 非 Prop 的 Attribute 的处理

    - 通过将 inheritAttrs 选项设置为 false (禁用 attribute 继承)

*通过将 inheritAttrs 选项设置为 false，你可以访问组件的 $attrs property，该 property 包括组件 props 和 emits property 中未包含的所有属性 (例如，class、style、v-on 监听器等)。*

```vue

```

## vue 也可以自定义hooks

```ts

import { ref,onMounted,onUnmounted,Ref } from 'vue'

const useClickOutside = (elemetRef: Ref) => {

    const isClickOutside = ref(false)

    const handler = (e: MouseEvent) => {

        if (elemetRef.value) {

            if (elemetRef.value.contains(e.target as HTMLElement)) {

                isClickOutside.value = false

            } else {

                isClickOutside.value = true

            }

        }

    }

    onMounted(() => {

        document.addEventListener("click",handler,false)

    })

    onUnmounted(() => {

        document.addEventListener("click",handler,false)

    })

    return {

        isClickOutside

    }

}

export default useClickOutside

```