- 博客(36)
- 收藏
- 关注
RSS订阅原创 el-form中数组(一重数组、二重数组以及多重数组)绑定检验的实例（prop以及rules的赋值）
prop的绑定就有上文提到的这两种方式，因此不管是几重数组都是可以的（当然没有试过三重四重数组， 应该是可以的，当然项目中应该不会出现这种情况）
2024-01-11 10:18:33
515
原创 使用全局方式导入所有的过滤器
1、在 filters/index.js 中导出方法。2、在 main.js 中统一注册过滤器。3、在组件中使用过滤器。
2023-12-03 17:28:18
452
原创 el-input 使用 回车键会刷新页面的问题
使用el-input的时候，光标聚焦在输入框，按下回车，会刷新页面。这是因为当el-form表单中只有一个input时，按下回车建会自动触发页面的提交功能， 产生刷新页面的行为。如下代码，在 el-form 中 加个 @submit.native.prevent，就可以了，form表单内多增加一个元素，不占据位置即可。.prevent 提交以后不刷新页面。.native 绑定系统原生事件。@submit: 表单提交。
2023-08-14 14:55:27
1308
原创 Vue实战开发（一）验证码与登录页面
这里主要是页面刷新的方法，验证码的验证之类的，还有就是相关的变量的绑定，还是比较重要的。这个组建的话其实也是从网上搞过来的，很多而且都叫一个名字。直接看代码即可，是直接使用element ui 来做的。这里的话就不像其他教程那样了，老卖关子，样式都不给。你把这个复制下来就好了，然后放到制定的文件内。现在的话我们需要在登录界面使用这个组件。在需要的位置放入组件即可。
2023-06-15 14:14:30
494
原创 解决 “element分页：删除最后一页的所有数据后，currentPage显示正确，但列表内容为空” 的问题
当表格有多页数据，并且末尾页只有一条数据时，删除末尾页的数据之后，数据列表为空，但是当前页码显示正确，还是直接上图说明吧。我怎么传的是11呢？删除后得想办法及时更新掉page的值，再去请求列表数据。删除之后页码定位到第10页是没有问题，但是之前第10页有数据，为什么现在列表数据空了呢？删除之后的现象，如图。
2023-04-20 14:24:37
236
原创 关于el-input的多行文本框textarea固定多行不可拖拽
的textarea属性下的多行文本框，我真是用一次讨厌一次，我也不知道为什么每次那个autosize的属性用着没效果，rows也是没有用，怎么都是一行，真是烦的我（后面有时间我得去看看是为什么了）。将:resize属性设置为none，不可拖拽，同时:autosize=设置成自己想要的行数。因为我试了一下没有效果，组合:resize没有效果，单独用也没有效果。不要问我问什么不使用:rows=“4”，所以就是要按上面那样这么设置了。
2023-04-12 08:58:26
3145
原创 Vue自定义指令（含常用8种指令封装）
基本概念一、自定义指令是用来操作dom的，尽管vue推崇数据驱动试图的理念，但并非所又情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅仅可用于定义任何dom操作，并且是可以复用的‘比如谷歌图片的加载做的非常优雅，在图片未完成加载前，用随机的背景色占位背景图片加载晚成后才直接渲染出来。用自定义只能怪可以非常方便的实现这个功能。Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令。
2023-02-24 10:44:32
758
原创 vue 全局时间总线
在离开页面之前 最好解绑一下 创建的自定义方法 因为不解绑的话所有创建的方法都会存在到 Vue.prototype.$bus 内。A组件 和 B组件 实现组件通讯。
2023-02-23 15:40:46
54
原创 Vue的axios二次封装
Vue的axios封装在vue项目中，经常需要封装axios，文档又看不懂。所以总结一下方法。安装引入在项目的src目录中，新建一个request文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口。// 在http.js中引入axios用来序列化post类型的数据，后面会提到// vant的toast提示框组件，大家可根据自己的ui组件更改。环境切换我们的项目环境可能有开发环境、测试环境和生产环境。
2023-02-10 16:02:13
362
1
原创 SASS @function的使用
1.函数作用把一些比较复杂或经常用些的内容进行抽离（封装），以便重复使用2.函数的定义与使用函数的定义提示：函数名function-name 与function_name 是相同的@return它只允许在@函数体中使用，并且每个@function必须以@return结束。当遇到@return时，它会立即结束函数并返回其结果。函数的使用3.函数的参数与默认值正常传参调用省略默认值按照参数名传参注意：函数参数默认值可以是任意SassScript表达式，甚至可以引用前面的参数。
2023-02-08 21:18:03
362
原创 sass 流程控制指令@if、@for、@each、@while
for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for $var from through ，或者 @for $var from to。@each 指令的格式是 $var in , $var 可以是任何变量名，比如 $length 或者 $name，而 是一连串的值，也就是值列表。这样可以实现比 @for 更复杂的循环。@if()函数允许您根据条件进行分支，并仅返回两种可能结果中的一种。而使用to 时条件范围只包含的值不包含 的值。
2023-02-08 21:15:33
815
原创 sass 常见函数的基本使用
sass包含很多操作颜色的函数。例如：lighten() 与 darken()函数可用于调亮或调暗颜色，opacify()函数使颜色透明度减少，transparent()函数使颜色透明度增加，mix()函数可用来混合两种颜色。数值函数处理数值计算，例如：percentage()将无单元的数值转换为百分比，round()将数字四舍五入为最接近的整数，min()和max()获取几个数字中的最小值或最大值，random()返回一个随机数。1.Color(颜色函数)3.Math(数值函数)
2023-02-08 21:10:38
260
原创 SASS 插值语句 #{ }
如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。引入之前的案例发出一个问题。
2023-02-08 21:07:37
64
原创 SASS 运算 (Operations)符的基本使用
在 CSS 中通常起到分隔数字的用途，SassScript 作为 CSS 语言的拓展当然也支持这个功能，同时也赋予了 / 除法运算的功能。也就是说，如果 / 在 SassScript 中把两个数字分隔，编译后的 CSS 文件中也是同样的作用。：如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。=，此外，每种数据类型也有其各自支持的运算方式。如果有一个值是函数返回的，情况可能不一样。2.关系（比较）运行符。
2023-02-08 21:06:47
64
原创 SASS @extend（继承）指令
在设计网页的时候通常遇到这样的情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。你可能发现被继承的css父类并没有被实际应用，也就是说html代码中没有使用该类，它的唯一目的就是扩展其他选择器。对于该类，可能不希望被编译输出到最终的css文件中，它只会增加CSS文件的大小，永远不会被使用。当在Sass文件中使用占位符选择器时，它可以用于扩展其他选择器，但不会被编译成最终的CSS。占位符选择器类似于类选择器，但是，它们不是以句点(.)开头，而是以百分号(%)开头。这就是占位符选择器的作用。
2023-02-08 21:03:30
142
原创 SASS混合指令 (Mixin Directives)
混合指令（Mixin）用于定义可重复使用的样式。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。1.定义与使用混合指令 @mixin例1：标准形式定义使用例2：嵌入选择器例如使用例3：使用变量定义使用例4：使用变量（多参数）例如使用一使用二使用三：只设置两边问题：必须指定4个值例5：指定默认值定义使用例6：可变参数参数不固定的情况使用。
2023-02-08 20:50:54
324
原创 SASS 导入@import
importSass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。例如在index.scss里面使用注意：跟我们普通css里面@import的区别如下几种方式，都将作为普通的 CSS 语句，不会导入任何 Sass 文件文件拓展名是 .css；文件名以 http:// 开头；文件名是 url()；
2023-02-08 20:45:18
108
原创 SASS语法嵌套规则与注释
为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中。在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。有时，需要定义一套样式并不是给某个元素用，而是只通过 @extend 指令使用，尤其是在制作 Sass 样式库的时候，希望 Sass 能够忽略用不到的样式。例如有这么一段css，正常CSS的写法。改成写SASS的方法。
2023-02-08 20:36:27
135
原创 为什么放弃npm而使用yarn
下载速度慢: 因为npm 安装插件是从国外服务器中进行下载，远远不如国内服务器下下载快，为了解决这一痛点，淘宝团队做了国内版的 npm 叫做 cnpm ,并且对 npm 做了镜像，我们只需要全局安装 cnpm ，并且registry 成 淘宝的镜像文件，这一波操作极大了解决了下载速度的问题。npm 在执行 npm install 的时候，命令行里会不断地打印出所有被安装上的依赖，大量无用冗余信息，而yarn在安装过程只会打印出必要的信息。同一个项目，安装的无法保持一致性。安装特定版本号的项目依赖。
2023-02-07 17:17:51
294
原创 nvm的简介、安装、使用
的切换、安装、查看。等等，与npm不同的是，npm是依赖包的管理工具。如果安装到D盘，则需要配置相对应的环境，如图：（输入相对应的文件位置）（注意这里：默认安装到C盘，之后就不用配置环境变量了）找到nvm文件位置，点开setting。.nvm是一个node的版本管理工具，可以简单操作。之后finish就完成安装了。3.输入以下代码查看nvm可安装的node版本。然后在它后面输入以下代码：（这是配置。2.在刚刚的nvm文件位置打开cmd。4.安装所对应的版本。5.切换到安装的版本。四、nvm的一些命令。
2023-02-06 22:05:24
139
原创 自定义组件 - 组件的创建与引用（微信小程序）
从表面来看，组件和页面都是由 .js、.json、.wxml 和 .wxss 这四个文件组成的。键入组件的名称之后回车，会自动生成组件对应的 4 个文件，后缀名分别为 .js，.json， .wxml 和 .wxss。在 app.json 全局配置文件中引用组件的方式，叫做“全局引用”。在页面的 .json 配置文件中引用组件的方式，叫做“局部引用”。在新建的 components -> test 文件夹上，鼠标右键，点击“如果某组件只在特定的页面中被用到，建议进行“局部引用”组件的引用方式分为“
2023-01-12 17:01:59
212
1
原创 小程序的宿主环境 - 组件
小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）类似于 HTML 中的 span 标签，是一个行内元素。类似于 HTML 中的 div，是一个块级元素。把 HTML 字符串渲染为对应的 UI 结构。轮播图容器组件 和 轮播图 item 组件。通过 rich-text 组件的。类似于 HTML 中的 a 链接。常用来实现页面的布局效果。通过 text 组件的。
2023-01-12 16:46:59
56
原创 小程序代码的构成 - WXML 模板
WXML（WeiXin Markup Language）是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的 HTML。
2023-01-12 16:38:52
46
原创 小程序代码的构成 - JSON 配置文件
当用户的搜索关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。注意：sitemap 的索引提示是默认开启的，如需要关闭 sitemap 的索引提示，可在小程序项目配置文件。数组中页面路径的前后顺序，即可修改项目的首页。小程序项目中也不例外：通过不同的 .json 配置文件，可以对小程序项目进行不同级别的配置。对本页面的窗口外观进行配置，页面中的配置项会覆盖 app.json 的 window 中相同的配置项。中新增页面的存放路径，小程序开发者工具即可帮我们自动创建对应的页面文件，
2023-01-12 16:36:21
357
原创 创建小程序项目（微信小程序）
（页面的脚本文件，存放页面的数据、事件处理函数等）（当前页面的配置文件，配置窗口的外观、表现等）小程序官方建议把所有小程序的页面，都存放在。（当前页面的样式表文件）（页面的模板结构文件）
2023-01-12 16:31:50
54
原创 全局数据共享——MobX（微信小程序）
开发中常用的全局数据共享方案有：Vuex、Redux、MobX 等。我们可以通过上面这张图清除的看到，如果不使用MobX全局数据共享的话，如果需要调用某个组件，则需要一层一层调用，如果定义了全局数据共享，那么可以直接拿到数据，不需要一层一层调用。在小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。mobx-miniprogram-bindings 用来 把 Store 中的共享数据或方法 ， 绑定到组件或页面中使用。
2023-01-12 15:52:03
415
原创 Object.defineproperty方法(详解)
Object.defineproperty 的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性Object.defineproperty可以接收三个参数obj : 第一个参数就是要在哪个对象身上添加或者修改属性prop : 第二个参数就是添加或修改的属性名desc ： 配置项，一般是一个对象来一个简单的例子这不就是添加了第三个参数里面还有6个配置控住属性。
2022-11-15 14:05:16
200
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人