做购物比价的网站有哪些,厦门手机网站,wordpress 主题下载,端午节网页制作模板业务需求
由于输入的文字较多#xff0c;需要将输入框进行全屏展示#xff0c;方便输入和查看#xff01;
效果图 实现方式
下载插件screenfull: “^6.0.2” yarn add screenfull -S项目中使用 import screenfull from screenfulltemplte中代码…业务需求
由于输入的文字较多需要将输入框进行全屏展示方便输入和查看
效果图 实现方式
下载插件screenfull: “^6.0.2” yarn add screenfull -S项目中使用 import screenfull from screenfulltemplte中代码
div reftextareaRef classscreenFullel-icon classscreen_icon click.stop.preventhandleScreenFullScreen //el-iconel-inputidinputElementv-modelnoteData.noteText:rowsrowSizemaxlength5000:autofocustruetypetextareaplaceholder有什么手记想分享给大家//divjavascript代码
import { ref } from vue;const textareaRef ref(null);
const rowSize ref(3);// 点击esc和x号退出全屏
const handleResize () {// 写法一 start // document.webkitIsFullScreen 用来判断是否按了ESC和X号取消全屏 (webkitIsFullScreen有兼容性问题)if (!document.webkitIsFullScreen) {screenfull.exit();rowSize.value 3;textareaRef.value.style.width 100%;textareaRef.value.style.height ;}// 写法一 end// 写法二 start 推荐if (!screenfull.isFullscreen) {screenfull.exit();rowSize.value 3;if (textareaRef.value) {textareaRef.value.style.width 100%;textareaRef.value.style.height ;}}// 写法二 start
};// 全屏
const handleScreen () {if (screenfull.isEnabled) {screenfull.toggle(textareaRef.value);rowSize.value Math.floor(window.innerHeight / 17).toString(); // 该属性不能完成保证高度为多少行textareaRef.value.style.width 100%;textareaRef.value.style.height 100vh;textareaRef.value.style.backgroundColor #ffffff;window.onresize handleResize;}
};style代码
style langscss scoped
.screenFull {position: relative;
}.screen_icon {position: absolute;top: 10px;right: 6px;z-index: 10;cursor: pointer;font-size: 15px;
}
/style
