图片验证器

代码事例

<template>
	<fk-space direction="vertical">
		<h3>图片验证器</h3>
		<SliderVerify
            v-model:isShowSelf="sliderVConf.isShowSelf"
            :img-url="sliderVConf.imgUrl"
            :s-text="sliderVConf.sText"
            :e-text="sliderVConf.eText"
            :is-border="sliderVConf.isBorder"
            :is-parent-node="sliderVConf.isParentNode"
            :is-close-btn="sliderVConf.isCloseBtn"
            :is-reload-btn="sliderVConf.isReloadBtn"
            :is-show-tip="sliderVConf.isShowTip"
            :width="sliderVConf.width"
            :height="sliderVConf.height"
            @reload="emitChange('reload')"
            @show="emitChange('show')"
            @hide="emitChange('hide')"
            @close="emitChange('close')"
            @success="emitChange('success')"
            @fail="emitChange('fail')"
            />
	</fk-space>
	<fk-row>
		<JsonViewer :data="sliderVConf" />
	</fk-row>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { SliderVerify, pop } from '@erp/biz';

const sliderVConf = reactive({
    isShowSelf: true,
    width: 300,
    height: 180,
    imgUrl: '',
    sText: 'sText',
    eText: 'eText',
    isBorder: true,
    isCloseBtn: true,
    isReloadBtn: true,
    isParentNode: false,
    isShowTip: true,
});

const emitChange = (type) => {
    console.log('emitChange', type);
    pop.info(`emitChange ${type}`);
}
</script>