分类前端笔记下的文章 - EN博客

2023-08-16

Vue3 将字符串下载为txt文件 vue 前端有一段字符串，然后点击按钮，将字符串保存到 txt 文件下载到电脑。首先需要安装一下依赖：npm install file-saver --save安装完成，在需要下载txt文件的页面引入一下库import { saveAs } from 'file-saver';点击按钮执行下面保存 txt 文件的代码：downloadTxt() { let str = 'Vue字符串保存到txt文件下载到电脑案例' let strData = new Blob([str], { type: 'text/plain;charset=utf-8' }); saveAs(strData, "测试文件下载.txt"); },

2023年08月16日
69 阅读
0 评论
0 点赞

2023-06-03

uniapp uniCloud登陆使用uni-id-co登陆可以在onload中调用，也可以事件调用，不跳转到uni-id-pages提供的页面，使用uniCloud uni-Id登陆。//微信小程序 const uniIdCo = uniCloud.importObject('uni-id-co') uni.login({ provider: 'weixin', success: function(loginRes) { if (loginRes.code) { uniIdCo.loginByWeixin({ code:loginRes.code }).then(res=>{ if(res.errCode == 0){ mutations.updateUserInfo() } }) } }, fail(err) { uni.showModal({ content: err.message || '请求服务失败', showCancel: false }) } });token过期判断let token_expired = uni.getStorageSync('uni_id_token_expired')||0 let currTime = new Date().getTime(); let hostUserInfo = uni.getStorageSync('uni-id-pages-userInfo')||{} // token是否过期 if(token_expired < currTime) hostUserInfo = {} const data = { userInfo: hostUserInfo, hasLogin: Object.keys(hostUserInfo).length != 0 }

2023年06月03日
232 阅读
0 评论
0 点赞

2023-03-21

Driver.js页面着重,新手引导,用户互交引导插件+案例 Driver.js 是一个强大的，轻量级，使用原生js引擎开发的库，用于在页面聚焦用户的关注点。它支持所有主流浏览器，并且可高度自定义。使用简单，配置方便。用户互交，新手引导利器Vue//安装 npm install driver.js //引入 import Driver from 'driver.js'; import 'driver.js/dist/driver.min.css'; //挂载 Vue.prototype.$driver = new Driver();html中直接引入<link rel="stylesheet" href="/dist/driver.min.css"> <script src="/dist/driver.min.js"></script>html实例代码（vue同理）<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/driver.js/dist/driver.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css"> <title>driver</title> <style> .box-1{ width: 100px; height: 100px; background-color: #1aa094; display: inline-block; } .box-2{ width: 200px; height: 200px; background-color: #FF6347; float: right; } .box-3{ margin-top: 400px; background-color: #00a2d4; float: right; } /* * 隐藏引导中的关闭按钮，必须到最后一步才能关闭 */ div#driver-popover-item .driver-popover-footer button{ display: none; } </style> </head> <body> <div class="box-1" > 1 </div> <div class="box-2"> 2 </div> <button class="box-3" onclick="javascript:driver.start();"> 重新引导 </button> <script> const driver = new Driver({ allowClose: false, // 是否点击遮罩关闭 overlayClickNext: false, //是否允许点击遮罩时移到到下一步 doneBtnText: "我知道了", // 最终按钮上的文本, 最后一步按钮文案 closeBtnText: "跳过", // 默认的关闭按钮文案 nextBtnText: "下一步", // 默认的下一步按钮文案 prevBtnText: "上一步", // 默认的上一步按钮文案 overlayClickNext: true, padding: 10, // 边距 //showButtons: false, // 不显示控制按钮 keyboardControl: true, // 是否允许通过键盘的左右键来控制 // 在元素即将突出显示时调用 onHighlightStarted:(e)=>{ // console.log("onHighlightStarted 即将突出显示 (每一步都会执行)",e) // $(".driver-close-btn").style({display:'none'}); }, // 当元素完全突出显示时调用 onHighlighted:(e)=>{ //console.log("onHighlighted 完全突出显示 (每一步都会执行)",e) }, // 覆盖即将清除时调用 onReset: (e)=>{ console.log("onReset 关闭",e) if(driver.hasNextStep()){ console.log("验证是否有下一步",driver.hasNextStep()) return false; } }, // 在任何步骤转到下一步时调用 onNext:(e)=>{ console.log("onNext",e) }, // 在任何步骤转到上一步时调用 onPrevious:(e)=>{ //如果没有上一步，阻止执行 if(!driver.hasPreviousStep()){ console.log("验证是否有上一步",driver.hasPreviousStep()) driver.preventMove();// 阻止当前移动 return; } console.log("onPrevious",e) } }); /* driver.highlight({ element: '.box-1', popover: { title: 'Did you know?', description: 'You can add HTML in title or description also!', } }); */ const steps = [ { element: '.box-1', popover: { title: "第一步", description: '这是one', //position: 'top', //位置，可选值： left, left-center, left-bottom, top, top-center, top-right, right, right-center, right-bottom, bottom, bottom-center, bottom-right, mid-center opacity: 0.1, animate: true, closeBtnText: '关闭提示', nextBtnText: 'next->', prevBtnText: '<-prev', } }, { element: '.box-2', popover: { title: "第二步", description: '这是two', position: 'left' } }, { element: '.box-3', popover: { title: "第三步", description: '这是three', //position: 'bottom' } } ]; driver.defineSteps(steps) driver.start() </script> </body> </html>

2023年03月21日
1,374 阅读
2 评论
1 点赞

2023-03-20

vue报错收集(vueui连接已断开,npm安装依赖报错,npm运行项目报错) 创建vue项目时，遇到的一些问题。使用版本{dotted startColor="#ff6c6c" endColor="#1989fa"/}1.使用vue ui创建项目时，出现‘连接已断开’执行命令 vue ui报错 undefined:2[0x7FFB8005B2D0] ANOMALY: meaningless REX prefix used解决方案进入项目的文件目录，按住 shift ，在空白处点击鼠标右键，选择在此处打开PowerShell ,执行 vue ui2.安装依赖时报错执行命令 npm i vue@3.2.8 vue-router@4.0.11 vuex@4.0.2 npm i报错npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving解决方案在命令后加 --legacy-peer-deps例如： npm i vue@3.2.8 vue-router@4.0.11 vuex@4.0.2 --legacy-peer-deps3.运行报错执行命令 npm run serve报错 Error: Cannot find module ‘vue/compiler-sfc‘解决方案执行 npm i vue-loader@15 -D 如果报错执行 npm i vue-loader@15 --legacy-peer-deps （理由如上）

2023年03月20日
918 阅读
0 评论
0 点赞

2023-02-02

vue在html中的使用 vue在html中的使用。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <style> .active{ color: red; } </style> <div id="app"> {{ message }} <hr> <span :class="{ active: isActive }">{{count}} 是 1 吗？{{ count == 1 ? 'Yes' : 'No' }}</span> <hr> <span>当前时间：{{nows}}</span> <br> <span>{{fullName}} ( {{firstName}} {{lastName}} )</span> <br> <span>{{languageBooksLength}}</span> <hr> <ul> <li v-for="(item, index) in languageBooks"> {{ index }} - {{ item }} </li> </ul> <span v-for="item of languageBooks">{{ item }} , </span> <hr> <h1 v-if="awesome">Vue is awesome!</h1>

2023年02月02日
198 阅读
0 评论
0 点赞

2022-12-23

2022年12月23日
151 阅读
0 评论
0 点赞

2022-12-23

2022年12月23日
147 阅读
0 评论
0 点赞

$html简约大气好看的公告\通知模板源码$ 2022-12-08

2022年12月08日
236 阅读
0 评论
0 点赞

2022-10-25

typescript 面向对象 typescript面向对象test1 定义：对象属性方法 test2 构造函数与this的使用test3 类的继承与super的使用test4 抽象类abstract定义与继承test5 接口（interface）与实现接口test6 属性的修饰符与get/settest7 泛型包含ts文件与编译后的js文件{cloud title="ts面向对象" type="default" url="https://pan.quark.cn/s/9c38345aec97" password=""/}

2022年10月25日
197 阅读
0 评论
0 点赞

2022-10-21

typescript 使用webpack打包ts代码初始化npm init -y安装cnpm（可跳过）npm install -g cnpm --registry=https://registry.npm.taobao.org安装webpackcnpm i -D webpack webpack-cli typescript ts-loader创建webpack.config.js，进行配置const path = require("path"); //webpack中的所有的配置信息都应该写在这里 module.exports = { // 指定入口文件 entry:"./src/index.ts", //指定打包文件所在的目录 output : { //指定打包文件的目录 path : path.resolve(__dirname,"dist"), //打包后文件的名字 filename : 'bundle.js' }, // 指定webpack打包时要是使用的模块 module:{ rules : [ { //指定规则生效的文件 test: /\.ts$/, // 要是有的loader use : 'ts-loader', // 要排除的文件 exclude:/node-modules/, } ] } }创建tsconfig.json,进行配置{ "compilerOptions": { "module": "es2015", "target": "es2015", "strict": true, } }在webpake.json增加打包命令 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build":"webpack" },在终端执行打包 npm run build成功，dist文件夹下出现编译后的bundle.js文件

2022年10月21日
331 阅读
0 评论
0 点赞