- 博客(9)
- 收藏
- 关注
RSS订阅原创 【VUE】Vue使用v-viewer挂载到指定节点
1.前情提要最近有个项目有个页面的div需要全屏操作，该div下图片又需要能够预览展示（此处使用了v-viewer实现），于是问题来了：当在正常浏览器窗口模式下，v-viewer预览图片时正常全屏显示，而当该div全屏后再点击图片预览发现v-viewer预览图片的全屏被div的全屏覆盖，导致无法正常使用该功能。2.解决方法根据v-viewer和viewerjs的GitHub文档说明v-viewer是基于viewerjs实现的而在viewerjs中有个Options里面有个container属性，这
2022-03-02 15:08:27
1347
1
原创 【VUE】Vue使用v-viewer实现图片大图预览效果
1、安装npm install v-viewer或yarn add v-viewer2、main.js中注册import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer, { defaultOptions: { zIndex: 9999 }})3、页面中使用<viewer :images="images"> <img v-for="src in images
2022-01-12 10:10:13
1513
原创 【VUE】VUE使用AES加密解密
1、安装npm install crypto-js --save或yarn add crypto-js2、新建JS文件在项目scr/utils目录下新建js文件 cryptoJS.js3、在cryptoJS.js中定义公共方法方法1import CryptoJS from 'crypto-js'//此处的密钥随机生成，可自行修改const key = CryptoJS.enc.Utf8.parse('9627F8751BAC3190');//十六位十六进制数作为密钥const iv
2022-01-05 11:23:00
2324
原创 【VUE】输入框input正则表达式校验字符、校验手机号、校验邮箱、密码复杂度
页面组件使用此处使用AntDesign的表单组件作为示例，element-ui实现方式同理使用rules属性绑定校验规则，item中用prop属性绑定校验规则中的项<template> <div> <a-form-model :model="userData" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules" ref="ruleForm" >
2021-12-28 16:03:05
7807
原创 【AntDesign】解决antdesign控件在div全屏下不显示的问题
最近项目中有一个页面需要做全屏效果，但是发现全屏后antdesign的组件弹出层不展示（其实是有的，只是被全屏效果覆盖了）全屏效果实现可以参考：我的文章-【VUE】vue实现div全屏效果解决方法通过阅读AntDesign的官方文档得知有弹出层的组件都有一个名为 getPopupContainer 的属性 即浮层渲染父节点，默认是渲染到 body 上Tooltip、Popconfirm、Popover 、Select等组件都有该属性那么我们只需要将这个属性指定到我们全屏的Div上即可：1、重点
2021-12-23 16:43:23
3973
2
原创 【VUE】vue实现div全屏效果
1、定义容器<div id="fullscreen" class="fullscreen" ref="fullscreen"><!-- 需要全屏区域 --></div><a-button type="primary" @click="fullScreen()">全屏</a-button>2、实现方法 fullScreen() { //全屏 var full = document.getElementById(
2021-12-23 16:06:52
6003
12
原创 【VUE】vue使用print-js插件实现打印功能
1、安装npm install print-js --save或yarn add print-js2、页面引用import print from 'print-js'3、页面定义容器<div id="printMe"> <!-- 要打印的内容 如二维码 --> <div id="qrCode" ref="qrCode" class="qrcode"></div></div><a-button type="primar
2021-12-23 15:43:03
2480
原创 【VUE】vue使用QrCode插件实现生成二维码
1、安装npm install qrcodejs2 --save或yarn add qrcodejs22、页面引用import QRCode from 'qrcodejs2'3、页面定义容器<!-- 二维码容器 --><div id="qrCode" ref="qrCode" class="qrcode"></div>4、方法中使用loadQRCode(code) { this.$refs.qrCode.innerHTML = '' // 用于
2021-12-23 15:29:50
822
原创 【AntDesign】AntDesign的穿梭框组件Transfer如何清空搜索框内容
1、在穿梭框中使用ref：<template> <a-transfer ref="transfer" :data-source="mockData" show-search :filter-option="filterOption" :target-keys="targetKeys" :render="item => item.title" @change="handleChange" @search="handle
2021-12-10 16:32:10
3782
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人