ui-widget

Project setup

yarn add ui-widget

ui-captcha

/**
* bit 几位验证码
* lines 几个干扰线
*/
<template>
 <ui-captcha :bit='4' :lines='5' ref='verifyCode'></ui-captcha>
</template>
<script>
import {  ref, onMounted } from 'vue'
import {UiCaptcha} from 'ui-widget'
export default {
  components: {
    UiCaptcha
  },
  setup () {
    const verifyCode = ref(null)
    onMounted(() => {
       //验证
        verifyCode.value.Check('1234')
        //刷新
        verifyCode.value.Refresh()
    })
    return {
      verifyCode
    }
  }
}
</script>

ui-action-sheet

/**
* 此组件适合移动端
* actions  Array | Array<Object>
* rangeKey String  可选 actions 为 Array<Object> 有用
* v-model:show Boolean  true 显示  false 隐藏
* cancel-text String  取消  可选 
* @cancel Function  cancel-text不为空的话调用
* @select Function  选择某一项会调用 参数 选择的某一项的index
*/
<template>
<ui-action-sheet
      @cancel="onActionCancel"
      @select="onActionSelect"
      :actions="actionSheet"
      cancel-text="取消"
      v-model:show="show"
    ></ui-action-sheet>
</template>
<script>
import {UiActionSheet} from 'ui-widget'
import { defineComponent, reactive, toRefs } from 'vue'
export default {
  components: {
    UiActionSheet
  },
  setup () {
     const data = reactive({
      actionSheet: ['二维码', '邀请码'],
      show: false
    })
    const onActionSelect = (index: number) => {
      switch (index) {
        // 邀请码
        case 1:
          alert('第二项')
          break
        // 二维码
        case 0:
          alert('第一项')
          break
      }
    }
    const onActionCancel = () => {
      data.show = false
    }
    const onShowAction = () => {
      data.show = true
    }
    onShowAction()
    return {
      ...toRefs(data),
      onActionCancel,
      onActionSelect
    }
  }
}
</script>