- 博客(77)
- 收藏
- 关注
RSS订阅原创 React 组件prop传值
我们可以通过在 Avatar 之后直接列出它们的名字 person, size 来读取这些 props。这些 props 在 ({ 和 }) 之间，并由逗号分隔。这样，我们可以在 Avatar 的代码中使用它们，就像使用变量一样。将一些 props 传递给 Avatar。例如，让我们传递两个 props：person（一个对象）和 size（一个数字）当然我们也可以其他页面使用product页面里面的子组件Avatar。在需要使用的组件页面具名导入Avatar，让后传入对应的值即可。
2023-10-31 14:56:52
183
原创 Ant Design of React组件引用及路由跳转
注意如果要使用Ant 的图标，需要另外引入，从 4.0 开始，antd 不再内置 Icon 组件，需使用独立的包 @ant-design/icons。这里我们主要2点：1.使用Ant的组件；2，如何引用页面组件；Ant Design of React组件引用及路由跳转，接着笔记(1)继续。公共组件目录定义了公共组件header，和底部公共组件footer。安装成功，在home.tsx文件引用。二，页面组件的引用及导航路由跳转。一，Ant组件的引用。
2023-10-09 15:01:29
803
原创 Ant Design of React 创建项目及运行环境
在package.json 文件下会看到antd 相关信息，如果要使用sass或者less预编样式、axios数据请求这些按需npm安装即可。本文使用 create-react-app 创建一个 TypeScript 项目，并引入 antd。1.命令行cd到对应的目录，这里是npm下回车运行，其他如pnpm yarn参考官网。2.进入项目并运行 cd到项目下运行 npm run start。antd-demo就是项目名称，可以自己随意起。这个是路由，后面要用到路由跳转，项目目录下运行。
2023-10-09 12:15:01
483
原创 前端如何将后台数组进行等分切割
实现代码（vue3+ts）：将后台请求的数据state.categoryList赋值给backendArray；12就是你需要每组按多少进行分割。原数据展示：长度为40。按12一组分割后的数据。
2023-09-04 10:09:50
1522
原创 Vue3 select循环多个，选项option不能重复被选
Vue3 select循环多个，当其中一个option值被选后，其他select里面不能再重复选择该option值。第二种，当其中一个option值被选后，其他select里面就不出现被选option的值。
2023-08-31 10:38:43
1647
原创 解决css英文内容不自动换行的问题
这里主要是针对CMS后台管理系统添加进入数据库，再抓取出来前端显示的英文不换行的问题的情况。2.通过CMS后台管理系统添加进入数据库，再抓取出来前台显示的英文不换行的问题。1.一般常见的就是英文不自动换行，或者英文换行单词背截断的问题。因为我已经使用第一种方法网上大把各种样式都试过不起作用。上面这个是没有问题的 单词不会截断换行，再看看下面的。这种处理方法通过前端样式就可以解决，方法网上很多。那只能通过后台去过滤掉了。
2023-08-24 11:26:33
3405
原创 Vue3如何获取和操作DOM元素
环境：vue3+ts+vite目标：1.修改DOM的文本值和样式2.获取后代子DOM元素,操作修改</</</</importfrom'vue'constreflog</pText1stylepadding0 30px;</</</</importfrom'vue'constreflogonMounted=>log</看到了吧。
2023-08-08 11:00:12
3934
原创 Vue3 实现产品图片放大器
Vue3 实现类似淘宝、京东产品详情图片放大器功能。2.在其他页面引用组件picShow.vue。1.创建picShow.vue组件。环境：vue3+ts+vite。
2023-08-07 16:19:57
992
原创 解决Vue3 使用Element-Plus导航刷新active高亮消失
解决vue3使用element plus导航菜单刷新页面后active高亮消失的问题
2023-08-03 17:30:41
1657
原创 vue3引用Font-Awesome字体图标库
介绍：这里安装引用的是Font-Awesome 6.x 版本，有专业版（付费），这里只介绍免费版字体使用方法。效果：此时看到同一个图标copy两种引用方式常规和实体的区别了吧。环境：vue3+ts+vite+element plus。4.使用 （看步骤3里面引用图标处）
2023-08-03 16:07:26
1435
原创 Vue3 Radio单选切换展示不同内容
环境：vue3+ts+vite+element plus技巧：v-if，v-show的使用实现功能：点击单选框展示不同的输入框1.默认选项型号是选中的，型号输入框也是展示的，那么颜色输入框是需要隐藏，定义isShow,此时，isShow是true，!isShow就是false了，显示如下2.获取单选框选择的radio值。切换的时候下面输入框也要随之切换。定义@change事件，如果val=1，isShow的值是true，！
2023-07-27 15:41:30
2294
原创 Vue3 Element-plus分页效果动态数据展示
根据自己的接口请求的数据，对应好每页数量，当前页，总数等参数赋值即可，请求参数只需要当前页pageNum 和每页数量pageSize 即可。环境：vue3+ts+vite+element plus。接着前面的axios封装请求数据，继续。
2023-07-26 15:17:01
634
原创 Vue3兄弟组件之间传值-mitt
3.此时我的文件目录结构是这样的，news.vue作为发送数据的一方，about.vue作为接收数据的一方。news里面定义了一个money的变量，值为100，通过点击发送给about组件。安装成功在package.json文件会有显示。2.在main.js里面全局引用。环境vue3+ts+vite。在终端cd到项目目录运行。
2023-07-25 14:06:19
594
原创 Vue3+TS+Vite创建项目，并导入Element-plus和Sass
1.桌面新建一个文件夹Vue3-app打开编辑器导入文件夹，编辑器打开终端输入或者命令行工具cd到项目目录下输入回车运行这里我选择了TS+Vite来开发，并选择安装路由2.cd到 vue-project目录下 输入回车运行3.安装完成后 输入回车运行浏览器打开localhost即可看到页面。
2023-07-11 23:28:27
1022
原创 export const和 const的区别
constconst是 JavaScript 中用于声明常量的关键字。通过使用const关键字，你可以创建一个只读的、不可更改的常量。一旦使用const声明一个变量并初始化它，就不能再对其进行重新赋值。例如：是用于在模块中导出常量的语法。通过使用，你可以将一个常量导出供其他模块使用。例如：// 使用模块中的常量 import {在上面的示例中，我们将常量PI导出到模块中，并在其他模块中使用import语句导入该常量。const用于声明常量，创建一个只读的、不可更改的变量。
2023-07-11 16:17:30
1501
原创 Nuxt3 components公共组件
效果实现：写一个公共的right组件，在index和about页面同时引用它。about页面引用及效果。2.index页面引入。index页面显示效果。
2023-07-09 12:10:31
564
原创 Nuxt3引入Element-plus和sass
或者命令行cd到项目文件 运行npm install @element-plus/nuxt。或者命令行cd到项目文件 运行npm install sass --save-dev。打开编辑器终端 运行npm install @element-plus/nuxt。打开编辑器终端 运行npm install sass --save-dev。在nuxt.config.ts文件添加代码。package.json文件会出现。package.json文件会出现。
2023-07-08 23:53:09
1212
原创 Nuxt3如何新建项目
1.在app.vue根目录同级新建pages文件夹 再新建一个index页面(新建文件目录参考官方文档。2.命令行cd到目录下运行 npx nuxi init nuxt-test 回车运行下。3.再cd nuxt-test到目录下 运行npm install。4.运行完成后 npm run dev 启动项目 显示以下页面。本人修改代码后刷新是显示空白页面 重新运行后才看到自己写的内容。index.vue 里面写点代码保存后 链接刷新。2.app.vue代码里面修改为。
2023-07-08 23:07:16
1068
原创 js延时提示框
延时提示框效果经常会用到直接上代码 <style type="text/css"> #div1 { height: 100px; width: 100px; background-color: red; } #div2 { height: 300px; width: 300px; background-color: blue; display: none; } div { margin: 5px;
2020-09-16 15:40:27
406
1
原创 jquery 获取radio选中的value值，并实现切换效果
jquery 获取radio选中的value值，并实现切换效果直接上代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .test2 .box{ padding: 50px 0; } .test2 .box1{ background: red; } .te
2020-08-12 16:09:34
900
1
原创 jquery实现checkbox 全选、反选（含2级筛选）
<form action=""> <div class="test1"> <div> <input type="checkbox" id="allCheck">全选 </div> <div> <input type="checkbox" name="items">选项1 <input type="checkbox" name="items">选项2 <input typ
2020-08-12 15:47:47
547
1
原创 CSS文本两端对齐
CSS文本两端对齐的方法1）文章常用看下面这种场景：使用代码text-align: justify;2）配合表单常用看下面场景：实现以下效果：使用text-align-last: justify;代码结构如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"
2020-07-24 15:02:45
392
2
原创 jq获取滚动条滚动的高度
这里写自定义目录标题jq获取滚动条滚动的高度jq获取滚动条滚动的高度场景：为了实现div滚动到一定的位置时，变成悬浮顶部的效果var win=$(window); //得到窗口对象var sc=$(document);//得到document文档对象。$(function () { win.scroll(function() { if (sc.scrollTop() >= 950) { //console.log("滚动距离:"+sc.scrollTop()) $('#
2020-07-10 18:05:24
2891
原创 html5 required的提示文字自定义
在做一个纯英文网站时，遇到了表单验证，input未输入文字的时候，点击提交按钮 发现有一个提示框“请填写此字段”。但是我需要改成英文的提示，于是网上搜答案<input type=“text” required oninvalid=“setCustomValidity(‘不能为空xxxxxxx’)” οninput=“setCustomValidity(’’)”>于是最拿手的复制粘贴，结果input里面输入文本后不为空了，提示框里面文字确实是变了英文，但是发现点提交按钮还是会提示为空。于
2020-05-21 10:05:00
2916
1
原创 vue npm安装less、sass
vue 通过npm安装less或者sass预编css前提是需安装node环境安装less和less-loader :命令行输入：npm install less less-loader --save安装成功后运行项目，在package.json文件夹会出现如下代码说明安装成功切已经引用：样式代码：为了说明已经生效，特意在p标签里面嵌套了一个a标签效果：sass安装方式一样，这里...
2020-04-11 21:20:44
3590
1
原创 Mac系统下MAMP Pro 配置thinkphp运行环境
Mac系统下MAMP Pro 配置thinkphp运行环境先在thinkphp官网下载thinkphp包（我下载的是完整版）Apache启动配置这里是默认的 不需要做修改选择刚才下载好的thinkphp文件 直接到public目录3.保存并启动完成Nginx启动配置创建新的启动项确认并在浏览器运行如果浏览器报错无法运行起来，请往下看。粘贴上以下打码lo...
2020-04-04 13:15:29
1787
原创 小程序学习笔记-父子组件传值 组件事件（10）
父子组件传值前提在新闻和用户页面同时引入了header头部组件1.父组件在调用子组件的时候绑定属性2.在子组件的properties里面接收父组件传过来的值效果如下（用户页面一样）：或者以对象的方式 参考官方文档properties: { myProperty: { // 属性名 type: String, value: '' }, ...
2019-12-12 10:32:23
123
原创 小程序学习笔记-自定义组件及使用（9）
小程序学习之自定义组件及使用一般我们会将页面公共的部分抽离出来单独写成组件，方便任何地方调用，比如常见头部导航、菜单、列表之类的公共部分。新建一个header组件，在里面定义数据和方法在header.wxml里面写好页面结构 调用属性、数据、方法在new.json配置引用header组件在news.wxml里面使用header自定义组件效果如下：多个页面调用header组件...
2019-11-07 16:29:13
202
原创 小程序学习笔记-WXS的使用及当前时间实时显示（8）
小程序之WXS的使用首先建一个wxs文件夹并在里面建一个wxs文件，定义一个属性和一个方法，通过module.exports暴露出去，如下图：在页面引用wxs文件并定义module，然后渲染数据获取时间戳日期分割符 / 是可以改的 比如 ： - 根据需求通过官方文档明白如何获取当前时间，但是我想要当前时间实时动态显示，下面就扩展一下如何 动态显示当前时间 （与WXS无关，应...
2019-11-06 17:30:39
1423
1
原创 小程序学习笔记-模块化及App.js全局方法调用（7）
小程序学习之模块化在做小程序开发时，我们可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块来使用。1.var一个对象config(名字随便取)config里面可以定义方法或者属性var config={ }2.module.exports把config对象暴露出去module.exports=config3.引用使用config里面的定义的host属性...
2019-10-31 17:31:02
1234
原创 小程序学习笔记-wxParse插件解析html数据（6）
wxParse插件解析html数据打开GitHub搜索wxParse1.在我们要用到的页面的js里面引入 wxParse下面的js var WxParse = require('../../wxParse/wxParse.js');2.在页面使用的Wxss中引入WxParse.css,也可以在app.wxss全局引用@import "/wxParse/wxParse.wxss"...
2019-10-30 17:41:39
145
原创 小程序学习笔记-页面跳转传值请求数据（5）
小程序学习之页面跳转传值请求数据1.小程序页面跳转传值先定义data-aid的值<button size="mini" data-aid="1" bindtap="goDetails">跳转到详情页面1</button><button size="mini" data-aid="2" bindtap="goDetails">跳转到详情页面2</bu...
2019-10-26 11:48:24
286
原创 小程序学习笔记-条件判断、方法、事件（4）
小程序之条件判断、方法、事件1.条件判断<!-- 条件判断 --><view wx:if="{{flag}}"> <text>flag为true我会显示</text></view><view wx:else> <text>flag为false我会显示</text></v...
2019-10-26 11:47:16
688
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人