安安安安安沅-优快云博客

原创微信小程序页面跳转的区别

②wx.redirectTo：跳转到新页面并且关闭当前页面，不可以返回上一层页面(跳转到指定的非TabBar页面)③wx.reLaunch：跳转到新页面并且关闭当前所有页面，不可以返回上一层页面。①wx.navigateTo：跳转到新页面，可以返回上一层页面。④wx.switchTab：跳到属于tabBar的页面。

2023-06-27 10:22:10 1431

原创组件库upload组件上传图片/视频前校验类型大小尺寸时长等

【代码】组件库upload组件上传图片/视频前校验类型大小尺寸时长等。

2023-06-16 10:31:39 413

原创 el-select滚动分页加载、模糊搜索防抖

【代码】el-select滚动分页加载、模糊搜索防抖。

2023-04-10 16:15:32 2140

原创 vue中async/await不生效的问题

但是发现这么写并不生效，因为await后需要的是一个promise(它最主要的意图是用来等待 Promise 对象的状态被 resolved)。

2023-04-06 14:21:44 3518

以上，第一次加载的表格数据科目的下拉框输入有限制。但是，如果点击导入，表格中新增的数据的科目下拉框是没有输入限制的，需要强制刷新此页面。一.el-select新建条目需要设置allow-create和filterable。以上，各种情况下，el-select可创建条目的输入限制字数的功能均已实现。3.在el-table中，而且通过某个操作表格中的数据会新增。②provide / inject声明注入法。2.el-select在动态加载的组件中。1.页面中仅有一个el-select。

2023-03-28 11:21:10 3572

原创 vue2和vue3分别实现同一页面（v-for动态渲染：img/div设置背景图片、鼠标悬浮展示按钮、高斯模糊等）

vue2和vue3分别实现同一页面（v-for动态渲染：img/div设置背景图片、鼠标悬浮展示按钮、高斯模糊等）

2022-08-12 15:36:01 2073

原创数组、字符串、对象相关方法以及布尔值判断

六、限制输入n个汉字 2*n个字符。

2022-07-19 18:24:10 733

原创 JavaScript日期相关计算

js日期相关计算

2022-07-16 15:28:23 3399

原创 vscode实用插件

在使用VSCode时，添加一些插件可以优化使用感受，特此记录了一些博主常用的实用插件

2022-02-18 17:54:41 518

原创前端社招面经十

一、vue的生命周期1.Vue实例需要经过创建、初始化数据、编译模板、挂载DOM、渲染、更新、渲染、卸载等一系列过程，这个过程就是Vue的生命周期，Vue中提供的钩子函数有beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。2.常用①created使用场景（操作数据）：发送ajax请求（调用请求数据的方法）；（更推荐在这里发送ajax请求）操作data中的数据和methods

2022-02-16 15:24:50 696

原创前端社招面经九

一、vue生命周期各个钩子函数？分别做什么？1.Vue实例需要经过创建、初始化数据、编译模板、挂载DOM、渲染、更新、渲染、卸载等一系列过程，这个过程就是Vue的生命周期，Vue中提供的钩子函数有beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。2.常用①created使用场景（操作数据）：发送ajax请求（调用请求数据的方法）；（更推荐在这里发送ajax请求）操作data

2022-02-16 12:57:24 539

原创前端社招面经八

一、项目部署、发布Jenkins （develop自动发布，release 手动发布）二、元素水平垂直居中// 关键代码display: flex;align-items:center;justify-content:center;<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>

2022-02-15 18:15:41 190

原创前端社招面经七

一、vue的生命周期？mounted和created什么时候用，有什么区别？二、虚拟dom是什么？为什么要使用？三、vue常用的指令？v-if和v-show的区别，什么情况下使用？v-if和v-for可以同时使用吗？四、ES6了解多少？...

2022-02-14 10:23:58 416

原创 vue：修改滚动条样式

首先要知道，修改滚动条样式，利用伪元素-webkit-scrollbar。注意，::-webkit-scrollbar仅仅支持WebKit的浏览器(例如谷歌Chrome、苹果Safari)。其次还需要了解滚动条的一些组成：::-webkit-scrollbar 滚动条整体部分，可以设置宽度等::-webkit-scrollbar-thumb 滚动条里面的滑块::-webkit-scrollbar-button 滚动条轨道两端的按钮，允许通过点击以微调滑块的位置::-webkit-scroll

2021-11-18 16:26:42 1583

原创 vue：两个按钮模拟滚动条功能

效果图：首先准备好两个图标：图标可以在阿里巴巴矢量图标库下载：iconfont - 阿里巴巴矢量图标库代码： <div class="scroll-container"> <v-btn icon small v-if="showScrollButtonLeft" @click="handleScroll('left')" color="primary" class="left-btn"> <img :src=

2021-11-18 14:45:34 1357

原创 vuetify：v-data-table自定义列显示的内容及搜索功能

<template> <v-container class="loan-work-queue" grid-list-xl fluid> <add-activity-dialog v-if="showDialog.addActivity" :showDialog="showDialog" :isActivitiesManagement="isActivitiesManagement" @initTableData="initTableData"></add

2021-11-17 16:24:59 1964

原创 Vue：实现一组按钮的多选功能

<template> <div id="history-settings"> <v-toolbar color="#F9FAFD" dark class="toolbar-card" style="height: 80px;"> <v-toolbar-title style="font-size: 24px; font-weight: 600; line-height: 32px; height: 32px; color: #161A40;

2021-11-16 15:07:42 3341 3

原创 Vue：将自制的icon打包成文件，使用的时候直接用class即可；以及直接使用icon文件

一、将icon存放在一个文件夹中，再写一个css文件.components-icon-background { background-size: contain; background-position: 50%; background-repeat: no-repeat;}.components-icon { background-size: contain; background-position: 50%; background-repeat: no-repeat;

2021-11-15 15:34:47 1688

原创解决vue中数据更新了但是v-data-table中数据没有重新渲染的问题

由于 JavaScript 的限制，当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue，Vue 不能检测到数组的变动。为了解决上述问题，可以使用$set方法。$set的两种使用方法：this.set(item, 'preview', { menu: result, value: result[0].value }) // 变更的数组，新增的属性名，属性值this.set(item, indexOfItem, newValue) // 变更的数组，要更

2021-11-08 16:54:19 1339

原创 vue+vuetify项目

①安装vuetifynpm install vuetify②在main.js引入import Vuetify from 'vuetify'import 'vuetify/dist/vuetify.min.css'Vue.use(Vuetify)vuetify: new Vuetify(),③在index.html中引入字体和图标<link rel="stylesheet" href="https://fonts.g

2021-10-18 17:56:04 1290

原创 vue：一组按钮的选中样式的设置

<template> <v-container class="loan-work-queue" grid-list-xl fluid> <add-workflow-dialog v-if="showDialog.add" :showDialog="showDialog" @initWorkFlow="initWorkFlow"></add-workflow-dialog> <edit-workflow-dialog v-if="sh

2021-10-18 16:40:44 1510

原创 vue：css使用data中的变量

如果要在css中使用变量，需要借助setProperty函数：<template> <div class="home" ref="UI"> <div class="header">hello world</div> </div></template> <script>export default { data () { return { color: 'red' }

2021-09-29 13:55:31 2841

原创 vue：通过class改变样式

鼠标事件通过class改变样式，即鼠标移上去和移开时，元素的样式不同。①首先，添加鼠标事件：@mouseover="mouseOver($event)" @mouseleave="mouseLeave($event)"②实现这两个方法：mouseOver ($event) { $event.currentTarget.className = 'active'},mouseLeave ($event) { $event.currentTarget.className = 'scroll

2021-09-27 16:18:20 2305

原创刻度尺组件vue-scale，并绑定输入框

一、安装npm i vue-scale -S二、引入三、使用首先，了解一下vue-scale的一些API：接着，开始使用：其中用到:key="countKey"，当我们需要重新渲染组件时，只需要更新key的值即可，这个属性可以实现刻度尺与输入框绑定。<div> <v-row> <v-col cols="12"> <vue-scale-swiper :key="countKey" flip-vertical :mask="f

2021-09-24 17:06:58 2666 2

原创 better-scroll的使用

一、安装npm install @better-scroll/core --save二、在需要使用BetterScroll的页面引入：import BScroll from '@better-scroll/core'三、定义滚动列表 <div class="wrapper-my" ref="wrapper"> <ul> <li> better-scroll 只处理容器（wrapper）的第一个子元素（co

2021-09-18 11:32:10 346

原创文本水平对齐属性text-align和元素垂直对齐属性vertical-align

一、text-align：规定元素中文本的水平对齐方式。二、vertical-align：设置元素的垂直对齐方式(当要改变元素在垂直方向上的位置时使用)。

2021-09-17 16:46:44 2530 1

原创利用Element UI的滑块Slider实现刻度尺

一、效果图二、一些要点说明①首先需要了解slider的一些参数，尤其需要利用marks来实现刻度：②实现marks的方法需要用到this.$createElement，所以也需要了解它的写法：this.$createElement()方法③需要改变slider的一些css以实现刻度尺效果：三、实现过程①安装element ui：element ui的安装使用步骤②在要使用刻度尺的地方添加：<el-slider class="self_slider" v-model="count"

2021-09-17 16:30:36 4343 2

原创 vue：this.$createElement方法

element ui中的slider的marks属性中使用到this.$createElement方法设置标记样式：上面虽然只用到两个参数，实际上，此方法有三个参数：①第一个参数为标签，即创建的节点元素的标签是什么②第二个参数是属性配置，如class、style等③第三个参数是节点元素的内容this.$createElement方法的写法：const h = this.$createElement;this.$info({ title: 'This is a notificatio

2021-09-17 16:13:15 10335 4

原创 vuetify的按钮默认字母大写，怎么修改样式

通过给按钮设置CSS text-transform 属性即可：text-transform: none;text-transform可能有的值：

2021-09-10 22:00:27 777

原创 js数组中常用方法

==①find()：==返回通过测试的数组的第一个元素的值，如果没有符合条件的则返回undefined。var arr = [1,2,3,4,5,6,7]var ar = arr.find(function (elem) { return elem > 5})console.log(ar) // 6console.log(arr) // [1,2,3,4,5,6,7]this.languageText = this.languageEnum.find(ele => ele.c

2021-09-10 21:47:20 168

原创 vue：实现点击空白区域关闭弹窗

①给外层容器设置一个ref属性为main，当bankSwitch为true时，弹窗出现<div class="selectedBorder" ref="main"> <div class="bankItem" v-if="bankSwitch === true"> show dialog!!! </div></div>②在全局创建一个点击事件bodyCloseMenus，当点击容器main，并且弹窗出现时，点击空白区域将弹窗关闭。别忘了

2021-09-09 21:21:03 2609 1

原创超出容器范围的文字部分显示省略号，鼠标放上去时显示完整内容

①设置css，使其超出容器范围的文字部分显示省略号。②给标签添加title属性，并赋上要显示的内容。文本超出一行或多行显示省略号(要设置宽度)

2021-09-09 16:46:42 3353

原创 CKEditor5富文本编辑器在vue中的使用

按照一般官网的集成方案安装CKEditor5，需要vue的版本在3.x及以上才能使用，但是，由于博主目前使用的是vue2.6.10，所以这里介绍一种源码集成方案。注意，使用源码集成手脚架(vue/cli)必须要3.x及以上版本。一、安装ckeditor基础框架、一些基础功能和主题：npm install --save @ckeditor/ckeditor5-vue2 @ckeditor/ckeditor5-dev-webpack-plugin @ckeditor/ckeditor5-dev-utils

2021-09-09 15:13:26 8101 1

空空如也

空空如也