logo

  • 欢迎各位友链
  • 本站支持自适应
  • 技术合作请留言

  • 首页
  • 文章 
    • vue
    • app
    • node
    • 生活
    • 小程序
    • javascript
    • uniapp
  • 案例 
    • app
    • 小程序
    • pc
  • 相册
  • 友链
  • 留言
  • 微语
  • 关于

使用vue3.0+ts写一个简单的插件

 3天前
 椰子皮
 0
 34
“ 使用vue3.0+ts写一个简单的插件 ”

需求:实现一个全局的弹窗插件,例如使用ctx.xxx.show()这种方式

在src目录设置新建一个plugins文件夹,如图所示

index.ts代码:

// 插件注册
import { createVNode, render } from 'vue'
import type { App } from 'vue'

import ShareTip from './index.vue'

const Share: any = function(props: any) {

  const divEle: any =  document.querySelector('#share')

  if (!props.visible || divEle) {
    document.body.removeChild(divEle)
  }

  if (!props.visible) {
    return
  }

  const container = document.createElement('div')

  container.id = 'share'

  const vm = createVNode(ShareTip, props as any)

  render(vm, container)

  document.body.appendChild(container)

}

export default {

  install(app: App): void {

    app.config.globalProperties.$share = {

      show(title: string) {
        Share({ visible: true, title })
      },

      hide() {
        Share({ visible: false })
      }

    }

  }

}

 

index.vue代码

<!--分享引导提示窗-->
<template>
  <div v-if="active" class="share-tips" @click="hide">
    <img src="~@/assets/img/share_guide.png" />
    <div class="share-desc">
      <p>点击右上角</p>
      <p>{{ title }}</p>
    </div>
  </div>
</template>

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

export default defineComponent({
  props: {
    title: {
      type: String
    },
    visible: {
      type: Boolean
    }
  },
  setup(props, ctx) {
    const active = ref(props.visible)

    onMounted(() => {
      active.value = props.visible
    })

    watch(() => props.visible, (res) => {
      active.value = res
    })

    const show = () => {
      active.value = true
      ctx.emit('update:visible', true)
    }

    const hide = () => {
      active.value = false
      ctx.emit('update:visible', false)
    }

    return {
      active,
      show,
      hide,
    }
  }
})
</script>

<style scoped lang="scss">
.share-tips {
  position: fixed;
  background: rgba(0,0,0,0.7);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    position: absolute;
    right: 0;
    top: 0;
    width: 285px;
    height: 330px;
  }
  .share-desc {
    max-width: 500px;
    p {
      font-size: 32px;
      color: #ffffff;
      margin-bottom: 24px;
    }
  }
}
</style>

 

在main.ts

import Share from './plugins/share'

app
.use(Store)
.use(Router)
.use(Share)
.use(Vant)
.mount('#app')

在代码中调用:

<script lang="ts">
import { defineComponent, getCurrentInstance } from 'vue'

export default defineComponent({
  setup() {

    const { ctx }: any = getCurrentInstance() 

    const share = () => {
      ctx.$share.show('分享给门店报名参赛')
    }

    return {
      share
    }

  }
})
</script>

 

 


支付宝 微信
 0

"[\"typescript\"\"vue\"]"
 egg + ts报错${this.name}.hasMany
 没有了
暂无内容,快抢沙发吧~



表情
 不支持canvas
椰子皮
椰子皮
觉得不错就点个赞吧
 170
 关注 公众号
1203 运行天数
269 今日pv
48 文章数量
 最近更新
 2021-01-13 10:17 更新了 文章
 使用vue3.0+ts写一个简单的插件

 最新微语
  • 把清新风格改为毛玻璃效果,虽然有点卡,但 2020-05-31
  • 本站春季主题已完成,大家觉得怎样。 2020-03-15
  • 很久没更新了,不知道说啥,提前祝大家新年 2018-06-05
 最新评论
  • 小何
    小何 Win10 2021-01-04
    文章 这样取消弹窗了就不是app的正常运行过程了;APP权限拒绝之后怎么让它可以正常进入应用,而不是拒绝了权限就退出应用了
  • Alanlee
    Alanlee Win7 2020-07-14
    文章 这个项目没有v3编译版本,我的是app的android机型测出来不行
  • Alanlee
    Alanlee Win7 2020-07-14
    文章
    还是不行,是不是要用@keyboardheightchange="onKeyBoardHeightChange"这个属性方法?但是我看文档,
    这个@keyboardheightchange方法好像支持小程序,我的是app(ios以及android端的)
 最多点赞
 最多评论
  • 全新椰子皮博客版本介绍及说明。
    全新椰子皮博客版本介绍及说明。...
    2017-11-23 赞:20
  • vuex action 与mutations 的区别
    vuex action 与mutations 的区别...
    2018-06-24 赞:16
  • 结合lazyload实现文章页里面的图片预加载
    结合lazyload实现文章页里面的图片预加载...
    2017-10-05 赞:10
  • 让height:auto有过度效果
    让height:auto有过度效果...
    2017-12-22 赞:
  • css3使用transform: scale 元素出现偏移
    css3使用transform: scale 元素出现偏...
    2018-03-10 赞:
  • 结合lazyload实现文章页里面的图片预加载
    结合lazyload实现文章页里面的图片预加载...
    2017-10-05 赞:
 标签
uniapp javascript typescript 小程序 app vue nuxt node
 友情链接
申请
mashihuan Khari & Yaru 美好记忆 帅气的木木 大蒜博客 Aquan 快乐编程 fivewoods Paul 贺德强 太傅博客 梁巨才博客 jielin littlewin IT技术宅
首页 申请友链 关于本站 广告合作
CopyRight © 2016-2020 - 椰子皮 - 浙ICP备16003960号