chen369-ui

chen369-ui 组件库

快速开始

第一步

1.安装组件库

<!-- npm -->
npm i chen369-ui
<!-- yarn -->
yarn add chen369-ui

2.引用组件库

//全部引入
import "chen369-ui/dist/css/index.css";
import Chen369Ui from "chen369-ui";
Vue.use(Chen369Ui);

//按需引入
//引入按钮--按需引入
import "chen369-ui/dist/css/ChenButton.css";
import ChenButton from "chen369-ui/dist/ChenButton.umd";
import '../components/css/ChenKeybord.scss'
Vue.use(ChenButton);
//引入键盘--按需引入
import "chen369-ui/dist/css/ChenKeybord.css";
import ChenKeybord from 'chen369-ui/dist/ChenKeybord.umd'
Vue.use(ChenKeybord);

//引入人脸识别版本2--按需引入
1.在html中:引入在线组件js文件，注意2个； 
<!--hanwebAPI-可信授权-->
  <script
    src="https://ganfutong.jiangxi.gov.cn/jmopenpub/jmopen_files/webapp/html5/gftAPI/hanwebAPI-2.0.0.min.js"></script>
  <!--hanweb_h5_components人脸识别-官方跳链-->
  <script src="https://ganfutong.jiangxi.gov.cn/jmopenpub/jmopen_files/webapp/html5/hwh5cps2/2.0.0/index.js"></script>

2.在main.js中:注册人脸识别组件：
Vue.use(hanweb_h5_components)//注意：由于hanweb_h5_components没有在js文件申明，这里直接使用；默认会报eslint错误；需关闭eslint或略错误；代码才会正常运行4.在项目中--按需引入‘人脸识别’封装组件
import FaceRecognition2 from 'chen369-ui/dist/FaceRecognition2.umd'
Vue.use(FaceRecognition2 )
3.在vue2中安装vant2；vue2只能使用vant2；
人脸识别组件是使用：vant2开发的；所以需要先项目安装vant2

4-1.在项目中--按需引入‘人脸识别’封装组件,版本2
import FaceRecognition2 from 'chen369-ui/dist/FaceRecognition2.umd'
Vue.use(FaceRecognition2 )

4-2.在项目中--按需引入‘人脸识别’封装组件,有magId；版本2-Msg
import FaceRecognition2Msg from 'chen369-ui/dist/FaceRecognition2Msg.umd'
Vue.use(FaceRecognition2Msg)

------------------------------------------------------------------

3.使用组件库

人脸识别组件的使用：需要为组件设置一个ref,并通过this.$refs来调用dom中的certificateCommit()方法
<FaceRecognition :userInfo="userInfo" ref="rlsb"></FaceRecognition>

例如： this.$refs["rlsb"].certificateCommit();//调用人脸调用的开始方法；