vue
来陪人家玩游戏嘛
这个作者很懒,什么都没留下…
展开
-
使用wowjs支持页面首次加载模块动画载以及原理解析
【代码】vue3中使用wowjs支持页面首次加载模块动画载入。原创 2022-09-23 15:29:01 · 475 阅读 · 0 评论 -
el-table支持分页多选
代码】el-table支持分页多选。原创 2022-07-20 17:00:44 · 262 阅读 · 0 评论 -
vuex常用辅助函数以及源码解析
其实使用过 Vuex 的同学都知道,我们在页面或者组件中都是通过 this.$store.xxx 来调用的,那么其实,我们只要把你所创建的store对象赋值给页面或者组件中的$store变量即可全局混入MixinVuex的原理通俗讲就是:利用了全局混入Mixin,将你所创建的store对象,混入到每一个Vue实例中,那么全局混入是什么呢?举个例子:import Vue from 'vue'// 全局混入Vue.mixin({ created () { console.lo.原创 2022-05-31 15:35:56 · 292 阅读 · 0 评论 -
vue常用自定义指令
注册指令src目录下创建 directives 文件定义单个指令文件// directives/debounce.jsconst debounce = { inserted: function(el, binding) { // el : 绑定好的标签 // binding : 各种信息对象,如 value: 传递的值 }};export default debounce;指令定义函数提供了几个钩子函数(可选):bind: 只调用一次,指令第一次绑定到元素时调用,原创 2022-05-25 17:46:51 · 209 阅读 · 0 评论 -
模仿el-popover实现自己的vue组件
效果样式效果未点击时候是这样的点击按钮,弹出弹框,弹框是主动添加到body下的标签拉动浏览器窗口,弹框可以自动调节显示位置代码效果:代码调用和 el-popover 保持一致。使用具名插槽reference,来显示触发按钮使用默认插槽来显示弹框<template> <div class="clips"> <lm-popover popper-class="customClass" trigger="click"> &l原创 2022-05-14 15:14:14 · 1401 阅读 · 0 评论 -
vue自定义鼠标右键组件
全局屏蔽右键功能App.vuemounted(){ window.addEventListener('contextmenu', (e)=>{ e.preventDefault(); }) }右键菜单组件<template> <div class="showRightMenu" ref="showRightMenu" > <div v-for="item in menuLi原创 2022-04-21 16:03:50 · 724 阅读 · 0 评论 -
vue 基于element的v-infinite-scroll支持无限滚动
样式效果: 无限滚动插件 <div class="topHot" ref="topHot" v-infinite-scroll="Hotload" > // 子元素 </div>// 方法 async Hotload () { if (this.HotScrollloa原创 2022-04-14 19:43:29 · 816 阅读 · 0 评论 -
vue tabs内容过长切换支持滚动插件
样式效果:tabs切换自动居中// 组件代码<template> <div class="tabs topNavSet" id="topNavSet" > <ul id="topNavSetUl"> <li v-for=" (item, index) in list " :key="item.id" @click="clickSingle(item, index原创 2022-04-14 16:55:11 · 542 阅读 · 0 评论 -
element表格在Safari浏览器下列对不齐
解决办法: 修改class来处理/* 使表格兼容safari,不错位 */.el-table__body { width: 100%; table-layout: fixed;}原创 2022-04-02 10:36:46 · 562 阅读 · 2 评论 -
vue超级深度监听单个元素使用函数式方法
Failed watching path: “XXXXX” Watcher only accepts simple dot-delimited paths. For full control, use a function instead.原创 2022-02-16 16:06:02 · 1848 阅读 · 0 评论 -
一行内容显示,超出用省略号,hover显示全部内容
样式效果父组件调用<Tool-tip :content="content"></Tool-tip>子组件<template> <el-tooltip :content="content" placement="bottom-start" effect="dark" :disabled="isDisabled"> <div class="contentnowrap" :class="{isLink: 'link-text原创 2022-01-19 17:44:22 · 1548 阅读 · 0 评论 -
vue之你不知道的props传参
1. 大小写问题 // 1. 子组件 props: ['postTitle'] // 2. 父组件 <blog-post post-title="hello!"></blog-post>在子组件中使用的是驼峰命名, 父组件中调用子组件props传参可以变成 - 和component中注册组件aB, template中使用类似prop属性几大注意点:require 和 default不可共存, 否则会有警告validator 做深度过滤操作,以下的trig原创 2022-01-18 20:08:54 · 570 阅读 · 0 评论 -
vue颜色选择器插件
样式效果说明以上效果是基于第三方插件二次封装得来。 默认第三方插件只有如下样式:第三方插件源码地址: vColorPicker使用 :1. 安装插件npm install vcolorpicker -S2. 全局注册# main.jsimport vcolorpicker from 'vcolorpicker'Vue.use(vcolorpicker)3. 基于vColorPicker二次封装子组件 : ColorPick子组件文档说明传参props :color:数据类原创 2022-01-12 21:03:27 · 4281 阅读 · 1 评论 -
element-ui二次封装下拉菜单(支持选中图片)
样式效果代码<template> <div> <el-dropdown trigger="click" style="width:80px" @visible-change="changeRotate" @command="borderStyle" > <div class="selectColor"> <div class="borderStyleBo原创 2022-01-11 16:59:52 · 410 阅读 · 0 评论 -
element-ui二次封装(下拉菜单el-dropdown)
样式效果效果1效果2效果一组件调用<template> <div> <div v-for="item in tableArr" :key="item"> <Dropdown :propObj="item" @change="menuChange" :selectData="menuSelect.menuSelectData" :buttonIcon="menuSel原创 2022-01-08 14:39:00 · 1715 阅读 · 0 评论 -
vue项目中使用 vue-i18n
安装npm install vue-i18n --save-devmain.js中导入import VueI18n from 'vue-i18n'Vue.use(VueI18n)const i18n = new VueI18n({ locale: 'zh', // 语言标识 //this.$i18n.locale // 通过切换locale的值来实现语言切换 messages: { 'zh': require('./VueI18n/language-zh'), 'en原创 2021-12-30 17:19:37 · 863 阅读 · 0 评论 -
vue中transition组件在项目中运用
简单单个弹入弹出运用name的名字为多少,则下面的样式class开头就要为多少<template> <div> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> </div>原创 2021-12-28 14:38:33 · 408 阅读 · 0 评论 -
vue中@符号后支持路径提示与ctrl点击组件支持打开对应组件
ctrl+组件的时候,可以打开对应文件在项目根目录新建 jsconfig.json文件内容如下{ "compilerOptions": { "target": "ES6", "module": "commonjs", "allowSyntheticDefaultImports": true, "baseUrl": "./", "paths": { "@/*": ["src/*"] } }, "exclude": ["node_.原创 2021-12-27 11:32:07 · 394 阅读 · 0 评论 -
el-table中单元格自定义修改值组件封装
样式效果使用html参数说明:rows: 一行的对象tableInEdit: 全局控制当前只能编辑一个prop: 要修改的字段名submit : 点击保存,执行更新操作 <el-table-column prop="rank" label="序号" align="center"> <template slot-scope="scope"> <TableEditSingle原创 2021-12-24 17:45:53 · 889 阅读 · 0 评论 -
vue封装组件使用插槽
插槽应用场景当封装一个组件后, 内部有一些地方待定功能暴露给外界来写。 就好比于el-table中的单个表格内部可能是下拉框,或者是一些文本输入。 需要用template来嵌套使用子组件<template> <div> <div v-for="item in arrData" :key="item.id"> <slot name="todo" :row="item"></slot> <原创 2021-12-14 14:08:11 · 1855 阅读 · 0 评论 -
el-upload基于axios自定义上传formdata文件
使用el-upload,选中一个文件后,导入按钮消失使用 el-upload自定义formdata格式上传文件, 组织默认提交使用axios来进行formdata的ajax请求原创 2021-12-13 16:16:12 · 2198 阅读 · 0 评论 -
浏览器刷新解决vuex数据清空插件vuex-persist
安装npm install --save vuex-persistoryarn add vuex-persist使用// 1. 导入vue和vueximport Vue from 'vue'import Vuex from 'vuex';import VuexPersistence from 'vuex-persist'// 2. 导入分别的功能import state from './state'import mutations from './mutations'import原创 2021-07-21 10:06:00 · 360 阅读 · 0 评论 -
safari使用el-date-picker,点击修改不能显示时间问题
按照常规操作 : safari不能解析YYYY-MM-DD HH:MM:SS格式,会返回NAN,需要转换成YYYY/MM/DD HH:MM:SS格式方法1 : xxx.replace(/-/g, “/”) 讲 -转化成/方法2 : 从开始到结尾一直使用时间戳, 就不会出现这个问题 (推荐!!!!!!!!!!!!!!!!)...原创 2021-07-16 11:40:55 · 637 阅读 · 0 评论 -
el-table合并列问题,以及css样式不需要padding问题
element-ui table合并列有间隙问题html<div class="eol-table"> <el-table ref="table" :data="tableData" :span-method="objectSpanMethod" v-loading="loading" class="table-striped" > <el-table-column label="SKU" prop="name" align="center"&原创 2021-06-17 16:13:04 · 542 阅读 · 0 评论