![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
安安安安安沅
这个作者很懒,什么都没留下…
展开
-
el-select可以新建条目时 限制输入字数
以上,第一次加载的表格数据 科目的下拉框输入有限制。但是,如果点击导入,表格中新增的数据的科目下拉框是没有输入限制的,需要强制刷新此页面。一.el-select新建条目需要设置allow-create和filterable。以上,各种情况下,el-select可创建条目的输入限制字数的功能均已实现。3.在el-table中,而且通过某个操作表格中的数据会新增。②provide / inject声明注入法。2.el-select在动态加载的组件中。1.页面中仅有一个el-select。原创 2023-03-28 11:21:10 · 2793 阅读 · 0 评论 -
vue2和vue3分别实现同一页面(v-for动态渲染:img/div设置背景图片、鼠标悬浮展示按钮、高斯模糊等)
vue2和vue3分别实现同一页面(v-for动态渲染:img/div设置背景图片、鼠标悬浮展示按钮、高斯模糊等)原创 2022-08-12 15:36:01 · 1982 阅读 · 0 评论 -
数组、字符串、对象相关方法以及布尔值判断
六、限制输入n个汉字 2*n个字符。原创 2022-07-19 18:24:10 · 637 阅读 · 0 评论 -
JavaScript日期相关计算
js日期相关计算原创 2022-07-16 15:28:23 · 3149 阅读 · 0 评论 -
vscode实用插件
在使用VSCode时,添加一些插件可以优化使用感受,特此记录了一些博主常用的实用插件原创 2022-02-18 17:54:41 · 439 阅读 · 0 评论 -
vue:修改滚动条样式
首先要知道,修改滚动条样式,利用伪元素-webkit-scrollbar。注意,::-webkit-scrollbar仅仅支持WebKit的浏览器(例如谷歌Chrome、苹果Safari)。其次还需要了解滚动条的一些组成:::-webkit-scrollbar 滚动条整体部分,可以设置宽度等::-webkit-scrollbar-thumb 滚动条里面的滑块::-webkit-scrollbar-button 滚动条轨道两端的按钮,允许通过点击以微调滑块的位置::-webkit-scroll原创 2021-11-18 16:26:42 · 1462 阅读 · 0 评论 -
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 · 1277 阅读 · 0 评论 -
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 · 1727 阅读 · 0 评论 -
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 · 3210 阅读 · 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 · 1643 阅读 · 0 评论 -
解决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 · 1154 阅读 · 0 评论 -
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中引入字体和图标<!-- Fonts and icons --><link rel="stylesheet" href="https://fonts.g原创 2021-10-18 17:56:04 · 1209 阅读 · 0 评论 -
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 · 1405 阅读 · 0 评论 -
自定义进度条
可拖拽可点击进度条,有个输入框显示相应进度,也可以通过输入控制进度条进度。实现效果:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>可拖拽可点击进度条</.原创 2021-01-13 13:46:46 · 1035 阅读 · 0 评论 -
文本水平对齐属性text-align和元素垂直对齐属性vertical-align
一、text-align:规定元素中文本的水平对齐方式。二、vertical-align:设置元素的垂直对齐方式(当要改变元素在垂直方向上的位置时使用)。原创 2021-09-17 16:46:44 · 2349 阅读 · 1 评论 -
webpack项目搭建过程
1.新建一个文件夹,如webpack12.按window+R,输入cmd回车,打开终端,输入命令,进入该文件夹下:快速打开终端并进入指定文件夹的小技巧:打开该文件夹,在路径中输入cmd回车。3.安装webpack:(1)npm init -y(2)npm install webpack --save-dev(3)npm install webpack-cli --save-dev安装完成后,目录如下:4.用vscode打开文件夹webpack1,新建目录:5.开始写代码(简单示例)原创 2021-01-13 11:09:17 · 258 阅读 · 0 评论 -
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 · 2724 阅读 · 0 评论 -
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 · 2161 阅读 · 0 评论 -
刻度尺组件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 · 2323 阅读 · 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 · 310 阅读 · 0 评论 -
利用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 · 3842 阅读 · 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 · 9945 阅读 · 4 评论 -
vuetify的按钮默认字母大写,怎么修改样式
通过给按钮设置CSS text-transform 属性即可:text-transform: none;text-transform可能有的值:原创 2021-09-10 22:00:27 · 621 阅读 · 0 评论 -
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 · 121 阅读 · 0 评论 -
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 · 2471 阅读 · 1 评论 -
超出容器范围的文字部分显示省略号,鼠标放上去时显示完整内容
①设置css,使其超出容器范围的文字部分显示省略号。②给标签添加title属性,并赋上要显示的内容。文本超出一行或多行显示省略号(要设置宽度)原创 2021-09-09 16:46:42 · 2941 阅读 · 0 评论 -
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 · 7762 阅读 · 1 评论 -
vue-super-flow的使用
Vue-super-flow 是基于vue 开发的一款生成、预览流程图的组件。使用者可以根据不同的需求对图、节点、连线进行细致的控制。一、安装npm install vue-super-flow二、引用(选择其中一种方式即可)①全局引用:在main.js文件中添加import SuperFlow from 'vue-super-flow'import 'vue-super-flow/lib/index.css'Vue.use(SuperFlow)②局部引用:在要用到vue-super-f原创 2021-09-08 20:51:41 · 22744 阅读 · 22 评论 -
element-ui的安装使用步骤
①安装npm i element-ui -S②在main.js中引入import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI)③引入完成之后就可以直接使用了原创 2021-09-08 20:43:39 · 843 阅读 · 0 评论 -
SVG的国旗图标集合flag-icon-css在vue中的使用
一、安装npm install flag-icon-css二、在main.js文件中引入import 'flag-icon-css/css/flag-icon.css'三、使用<span class="flag-icon flag-icon-gr"></span>使用不同国家的国旗,将gr换成对应的代码即可,例如:flag-icon flag-icon-cn —— Chineseflag-icon flag-icon-es —— Spanishflag-ico原创 2021-08-12 21:33:44 · 3208 阅读 · 1 评论 -
vue:元素滚动到底部触发事件,隐藏滚动条及滚动条显示和隐藏切换
一、设置一个div元素,绑定滚动事件二、在methods中描述滚动事件三、设置CSS,让其内容超出高度时存在滚动条(overflow: auto;),然后隐藏滚动条(::-webkit-scrollbar{ display: none; })原创 2021-06-23 20:54:22 · 2570 阅读 · 0 评论 -
vue给动态加载的子组件添加ref并获取对应dom元素
一、动态地给子组件设置ref属性二、通过this.$refs获取对应的dom元素注意:博主这里使用的是$this,是由于前文已经const $this = this。原创 2021-06-16 22:08:56 · 2610 阅读 · 0 评论 -
vue提取公共方法,并解决不能使用this的问题(获取调用该方法的实例this)
上一篇博客提到动态渲染table的操作按钮列并绑定点击事件:vue+Element UI table表格动态渲染(包括操作按钮列)、按钮动态绑定点击事件所以这里接着做,将按钮的点击事件提取为全局公共方法再调用:一、创建一个commonApi.js文件,将点击事件提取到这里,并写一个获取调用此js中方法的vue组件实例(this)的方法://用来获取 调用此js的vue组件实例(this)let vm = null;const sendThis = (_this)=>{ vm = _原创 2021-01-28 15:04:17 · 4183 阅读 · 1 评论 -
vue+Element UI table表格动态渲染(包括操作按钮列)、按钮动态绑定点击事件
涉及内容:Element UI的使用;vue如何动态循环渲染Element UI中table内容;Element UI中table最后一列为操作按钮,如何动态渲染并绑定点击事件。一、Element UI的使用查看文档使用:Element UI文档安装npm i element-ui -S在main.js中进行引入:import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/原创 2021-01-19 14:43:36 · 14569 阅读 · 1 评论 -
vue中使用echarts组件(基本配置、柱状图、饼图、自定义圆环图并显示数据在图例legend旁)
安装echartsnpm install echarts -S安装完成之后,就可以直接使用了注意:如果在安装echarts之后,在main.js进行了全局引入:import echarts from 'echarts'Vue.prototype.$echarts = echarts再到Chart.vue中使用:myChart = this.$echarts.init(this.$refs.myChart)此时,运行后可能会报错:Uncaught TypeError: Cann.原创 2021-01-15 18:02:28 · 2128 阅读 · 0 评论