首页
关于
留言
友情链接
Search
1
粽子SHOP即时到账 微信插件
2,453 阅读
2
PS人像美颜插件 DR5.0增强版 一键人像磨皮/美白/高低频
2,092 阅读
3
LayuiTable导出所有数据,无需修改后端代码
1,639 阅读
4
彩虹聚合登录API源码/上元二开 QQ互联分发
1,360 阅读
5
宝塔设置秒级监控,10秒15秒30秒定时执行访问
1,231 阅读
程序源码
PHP源码
HTML源码
精品程序
易语言源码
活动资讯
技术分享
实用代码
实用工具
学习笔记
PHP笔记
前端笔记
登录
Search
标签搜索
typescript
composer
composer命令
thinkphp6
tp6
tp中间件
timi
王者荣耀
王者荣耀ios扫码
layer
layer图片预览
layer图片
layer弹窗
php打包zip
zip打包
Autoloader
spl_autoload_register
PHP自动加载机制
文件名批量转换为小写
composer镜像
EN博客
累计撰写
37
篇文章
累计收到
366
条评论
首页
栏目
程序源码
PHP源码
HTML源码
精品程序
易语言源码
活动资讯
技术分享
实用代码
实用工具
学习笔记
PHP笔记
前端笔记
页面
关于
留言
友情链接
搜索到
37
篇与
EN
的结果
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日
165 阅读
0 评论
0 点赞
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日
203 阅读
0 评论
0 点赞
2023-03-02
composer安装扩展包与常用命令
1.安装composer官方源: composer config -g repo.packagist composer https://packagist.phpcomposer.com 阿里云源: composer config repo.packagist composer https://mirrors.aliyun.com/composer/ 腾讯云源: composer config -g repos.packagist composer https://mirrors.cloud.tencent.com/composer/2.常用命令查看composer版本 composer -v 升级composer版本 composer self-update composer从2版本降到1版本composer self-update 1.10.24 或者 composer self-update --1更新但不自动升级到更高版本 composer update --no-plugins 查看composer 的配置 composer config -g -l 修改composer 的镜像源 composer config -g repo.packagist composer https://mirrors.cloud.tencent.com/composer/composer 比较常用的镜像源composer官方 https://packagist.orgphp官方 https://packagist.phpcomposer.com阿里云 https://mirrors.aliyun.com/composer腾讯云 https://mirrors.cloud.tencent.com/composer华为云 https://mirrors.huaweicloud.com/repository/phplaravel(中国) https://packagist.laravel-china.org显示所有的扩展包composer show -i 查看关联包 composer why 命名空间/包名 例如: composer why symfony/deprecation-contracts 移除包 composer remove 命名空间/包名 例如: composer remove symfony/deprecation-contracts 安装某个扩展包 composer require 命名空间/包名 例如: composer require symfony/deprecation-contracts3.常见问题1、更新composer出现版本不匹配,插件丢失等问题的解决方法:删除composer.lock 文件,删除vendor目录里的全部文件重新执行composer install --ignore-platform-reqs 或者 composer update --ignore-platform-reqs--ignore-platform-reqs 这个是忽略php版本匹配的意思{dotted startColor="#ff6c6c" endColor="#1989fa"/}转自:https://blog.csdn.net/qq15577969/article/details/126687778
2023年03月02日
125 阅读
1 评论
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日
51 阅读
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日
124 阅读
0 评论
0 点赞
2022-10-21
typescript 配置文件 tsconfig.json
在目录创建tesconfig.json{ /* ts编译器的配置文件 include 包含,哪些ts文件需要被编译 ** 任意目录 、*任意文件 exclude 不包含,哪些文件不需要被编译 extends 继承 files 包含的文件。 compilerOptions 编辑器选项 */ // "include": ["./src/**/*"], // "exclude": [], //"files": [], "compilerOptions": { //指定ts被编译为js的es版本 . ESNext = es的最新版本 "target": "es3", //指定要使用的模块化的规范 "module": "es2015", //浏览器中要使用的库 //"lib": ["dom","es6"] //指定编译后文件所在的目录 "outDir": "./dist", //将代码合并到一个文件 // "outFile": "./dist/app.js", //module = system // 是否对js文件进行编译 "allowJs": false, // 是否检查js代码是否符合语法规范 "checkJs": false, // 是否移除注释 "removeComments": false, //不生成编译后的文件 "noEmit": false, //有错误时,不生成编译后的文件 "noEmitOnError": false, //所有严格检查的总开关 "strict": false, //设置编译后的文件是否使用严格模式 use strict "alwaysStrict": false, //不允许隐式的any类型 "noImplicitAny": false, //不允许不明显类型的this "noImplicitThis": false, //严格的检查空值 "strictNullChecks": false, } }
2022年10月21日
108 阅读
0 评论
0 点赞
2022-10-21
typescript 数据类型
//声明一个变量a,指定他的类型是number ,在之后的使用过程中,他只能是数字 let a :number; a = 10; console.log(a); //声明变量时,进行赋值 let c : boolean = false; //如果对变量声明同时进行,TS可以自动对变量进行类型检测 let d = false; //d = 123; 报错 function sum(a,b){ return a+b; } console.log( sum(123,456) ); // 579 console.log( sum(123,"456") ); // 123456 //限制参数类型 function sumTs( a:number , b:number ){ return a+b; } console.log( sumTs(123,456) ); // 579 //console.log( sumTs(123,"456") ); // 报错@ //限制 参数类型 , 返回值类型 function sumTs2( a:number , b:number ) :number{ return a+b; } // 直接使用字面量进行类型生成 let a : 10; // a = 11; 报错 // b可以是 male 或 female (联合类型) let b : "male" | "female"; // c 可以是 boolean 类型 也可以是 string 类型 let c : boolean | string; c = true; c = "hello"; // any 表示的是任意类型,(关闭ts对变量的类型检测,不建议使用) let d : any; d = 10; d = false; d = 'hello'; //声明变量不指定类型, 默认为any let d1; //unknown 表示未知类型的值 unknown是一个类型安全的any let e : unknown; e = 10; e = 'hello'; e = false; let s:string; // 类型断言, 告诉解析器变量的实际类型 s = e as string; s = <string>e; function fn():boolean{ return true; } //void 空值 function fn1(): void { console.log("没有返回值"); } //never 永远不会有返回结果 function fn2(): never { throw new Error("报错了!"); } let a : object; a = {}; a = function(){}; let b:{ name:string }; //b = {}; @报错 b = { name : '张三'}; // 必须指定name //b = { name : '张三' ,age:18}; // @报错 定义时没有定义 age //在变量后面加个? 表示 可选的 let c:{ name:string ,age?:number }; c = { name : '张三'}; c = { name : '张三',age :19}; //表示,对象d中要有一个name属性,其他的属性、类型不限制 let d:{name:string,[propName:string]:any} d = { name : '张三',a:'123',b:true,c:19}; //e 有两个参数,类型是number,返回也是number //设置函数的类型声明 let e:(a:number,b:number)=>number; e = function ( n1:number , n2:number ):number { return n1+n2; } // string[] 表示字符串数组 let f: string[]; f = ['a','b','c']; // Array<number> 表示数值类型的数组 let g:Array<number>; g = [1,2,3]; // 元组:固定长度的数组 存储效率高 // h 有两个值,第一个类型是string 第二个也是string let h:[string,string]; // enum 枚举 enum Gender { Male = 0, Female = 1, } let i:{ name:string , gender:Gender } i = { name:'孙悟空', gender:Gender.Male } // | : 或 let j:string | number; // & :与 let k:{name:string} & {age:number}; k = {name:'张三' , age : 18}; //类型别名 type myType = string; let m : myType; type myType2 = 1|2|3|4|6; let n : myType2;
2022年10月21日
49 阅读
0 评论
0 点赞
2022-10-21
typescript 了解与安装
{mtitle title=" 安装方法 "/}
2022年10月21日
55 阅读
0 评论
0 点赞
2022-10-21
tsc 在vscode中无法运行
{mtitle title=" 问题描述 "/}操作系统:windows在cmd中可执行在vscode中报错{mtitle title=" 解决方案 "/}以管理员身份运行 PowerShell,并执行命令set-ExecutionPolicy RemoteSigned将PowerShell的执行策略更改为RemoteSigned具体步骤如下:① 使用 win+x 快捷键,会出现如下弹窗,鼠标左键单击Windows PowerShell 即可打开shell.② 运行 set-ExecutionPolicy RemoteSigned 命令,在询问更改执行策略的时候选择敲Y或者A③ 运行 get-ExecutionPolicy 命令,可看到脚本的执行策略已被更改为 RemoteSigned ④ 回到vscode的终端,输入命令 tsc -v 不再报错,也可对ts文件进行编译。 {mtitle title=" 产生原因 "/}PowerShell的默认执行策略是 Restricted,它禁止运行任何脚本和配置文件。故需更改PowerShell的设置来解决刚遇到的问题转自:https://blog.csdn.net/Jadon_z/article/details/126754604
2022年10月21日
447 阅读
0 评论
1 点赞
2022-09-04
vue前端开发笔记6 - 路由 - 切换路由/页面
创建 views/Home.vue创建 views/User.vue在App.vue中放置以下代码<router-link to="/"> <el-button>主页</el-button> </router-link> <router-link to="/User"> <el-button>用户</el-button> </router-link> <router-view></router-view>在router/index.js中添加路由配置const routes = [ { path:"/", name:'Home', //component: Home, component: () => import('../views/Home.vue') }, { path:"/User", name:'User', component: () => import('../views/User.vue') } ]{dotted startColor="#ff6c6c" endColor="#1989fa"/}{mtitle title="效果"/}{x} 主页 (默认或点击主页按钮) :展示 views/Home.vue 中的内容 {x} 用户 (点击用户按钮): 展示 views/user.vue 中的内容
2022年09月04日
33 阅读
0 评论
0 点赞
1
2
...
4