0.0.4 • Published 4 years ago
ui-widget v0.0.4
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>