vue
戴向天
我不是一个优秀的人,但我是一个肯努力的人。
展开
-
前端函数配置化编程 - Element-plus
Vue函数化配置编程原创 2023-12-26 17:35:37 · 461 阅读 · 0 评论 -
Vue3 + TS 关于如何将组件进行挂载body 例如:$message / $notify - 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解关于messgae 和 notification 的组件内容我就不贴出来了。若想要的就直接加群获取吧。使用方式 this.$message({ message: "这个是$message", }); this.$notify({ message: "这个是$notify", });效果图fileName: main.tsimport { createApp } from 'vu原创 2022-04-12 10:12:38 · 2144 阅读 · 0 评论 -
Vue3 + TS Slider组件,支持上下左右收起 - 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解Tips: 是在Element-UI的基础上进行更改操作的,原有的Element-UI是不支持方向性的处理,以及动画时间的设定,并且还需要通过CSS进行动画处理,当前改造过的该组件不需要CSS,可以直接进行复制使用。使用方法: <Slider :direction="sliderDirection" :duration="duration" > <div style="wid原创 2022-03-30 11:29:28 · 1469 阅读 · 0 评论 -
scss / less 转换成css 包含有scope设置 - 戴向天
大家好!我叫戴向天。QQ群:602504799可设置样式scoped作用域scss/less转换的时候暂不支持 变量 以及 函数处理/** * author: 戴向天 * time: 2022-03-03 * QQ: 809002582 * desc: * 可设置样式scoped作用域 * scss to css / less to css * scss/less转换的时候暂不支持 变量 以及 函数处理 *//** * scss to css /原创 2022-03-03 22:36:36 · 462 阅读 · 0 评论 -
Vue的生命周期 简单文字描述 - 戴向天
第一步: 实例化一个Vue对象 代码:new Vue();第二步: 初始化一些事件集:events 创建生命周期:lifecycle第三步: 告知即将要进行创建Vnode: beforeCreated;原创 2021-04-20 14:12:48 · 116 阅读 · 0 评论 -
element-ui 表单TS封装table-form -戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解<template> <div :class="getClassName()" class="flex-sw-22"> <el-form :label-width="labelWidth" :model="params" ref="form" :rules="rules" > <div class="原创 2021-03-05 17:20:58 · 487 阅读 · 0 评论 -
element-ui table封装信息列表table-list,自动化处理(无需再写过多冗余的方法) - 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解<template> <div ref="table" :class="getClassName(full ? 'full' : '')"> <el-table style="width:100%" :stripe="true" :class="getClassName('table')" :data="data" :b原创 2021-03-05 17:18:20 · 533 阅读 · 0 评论 -
vuex获取TS封装 - 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解interface IStore { _actions: any; getters: any;}/** * 获取模块名称和指定的方法 * @param args */function getArgumentsResult(...args: any[]) { const arg = args[0]; let module = null; let methods: string[] = [原创 2021-03-05 17:13:59 · 363 阅读 · 0 评论 -
vue 路由守卫,更好的封装和使用拦截 -戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解/** * beforeMehodMap * 主要是做多个守卫处理 * 每一个方法返回的不是true 就是 重定向的地址 */const beforeMehodMap: any = { /** * 判断有没有相对应的地址 若是没有就进行跳转404页面 */ notFound(to: any, from: any) { const pathMap = getAllRouterPaths原创 2021-03-05 17:10:32 · 498 阅读 · 0 评论 -
一个不走缓存的存储记录(返回列表页的时候展示出来离开列表页时候的数据) - 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解 Vue.mixin({ methods:{ /** * $pageParams 使用方发 * 一个不走缓存的存储记录 * Author: 戴向天 * * (this as any).setPageParams({ * pageSize: 10, * pageNumber: 2,原创 2021-03-05 17:06:36 · 77 阅读 · 0 评论 -
JsonUtil将vue文件转换成字符串 - 戴向天
大家好!我叫戴向天QQ群:602504799import jsPlugIn from './js-plugIn'/** * Author:戴向天 * createdTime: 2020-09-04 * * 创建该文件的目的是为了将vue文件进行相对应的转换成字符串 * 然后通过解析字符串来进行生成vue文件 * * 因为有些机制的传输数据格式必须为字符串形式 * 所以可以通过jsonUtils来进行操作编译和反编译 * */const jsonUtils = windo原创 2020-09-04 00:32:25 · 1103 阅读 · 4 评论 -
Vue使用sass的配置 - 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解sass-loader依赖于node-sass,所以要安装node-sassnpm install node-sass --save-dev //安装node-sassnpm install sass-loader --save-dev //安装依赖包sass-loadernpm install style-loader --save-dev //安装style-loa原创 2020-08-23 13:59:44 · 1088 阅读 · 0 评论 -
Vue之重写$emit函数,全局监听$emit的触发 - 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解本编文章写得比较简洁,感兴趣的可以进群咨询。或许有人会很疑惑,干嘛重写$emit方法。原因是重写以后就可以进行异步改变子组件暴露出去的方法例如:<component @clickHandler="clickHandler" @clickOne="clickOne" @clickTwo="clickTwo" />从上面的例子可以得知,子组件至少使用的三次$emit。并且每个emit的第一个参数名,都原创 2020-07-18 00:16:32 · 1836 阅读 · 0 评论 -
前端安全机制集合(不定期更新) -- 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解关于前端的安全机制大致分为:控制台、数据加密处理,文件访问权限等等。由于vue现在比较火热,所以以下的所有处理都是基于vue进行操作的。关于打开控制台的方法一、鼠标右击二、F12三、Ctrl + Shift + i四、在页面还没有进行加载完成,强行使用F12进行打开控制台五、利用浏览器的工具选项进行打开禁止打开控制台的操作我大概的进行了封装代码如下:import {isDev} from '@/co原创 2020-07-03 11:07:29 · 3447 阅读 · 0 评论 -
VUE利用CSS + DIV实现SELECT (简单) -戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解组件内容<template> <div class="select"> <div tabindex="1" @blur="blur">{{value}}</div> <ul> <li v-for="(item,key) in options" :key="key" @mousemove="txt = item">{{原创 2020-06-26 18:28:01 · 822 阅读 · 0 评论 -
VUE 之 封装自己的vue插件
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解写自己的vue插件的好处是,方便调用,方便管理,可以随处使用,甚至不管哪个项目都可以使用.并且调用的方法也很简单:this.xxxx()第一步: 创建vue-plugIn.js文件(名字可自定义:例如:Clover-vue-plugIn.js。自己方便记住就好)内容:// 根据需求进行引入import efficacy from './efficacy' // 效验方法import cache from '.原创 2020-05-11 10:34:04 · 983 阅读 · 0 评论 -
Vue 之 路由跳转封装
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解在一个项目中封装路由跳转的方法还是很有必要的。因为当你封装了以后,关于一些参数的操作完全可以进行了统一管理,例如加上公共参数、跳转外部链接等等。goPage(param, replace) { if (typeof param == 'string') { param = { path: param } } if (replace) { // 判断是不是重定向 thi原创 2020-05-11 10:22:41 · 1491 阅读 · 0 评论 -
如何更好的使用VUE之数据处理方式
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解在我前端工作之前,在处理数据的时候,我经常在想如何更好的处理数据,对数据的可空性更高,更好的变换。其实这个也不是什么技术要点,只是在开发的时候,更加如意,特别在修改的是也方便。我的思路是,基础数据是不容改变的。然后通过其它的方式来进行获取相对应的数据,或者其它的数据格式。例如:const arr = [...原创 2020-03-11 12:50:59 · 1805 阅读 · 0 评论 -
实现vant Dialog 函数 - 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解JS代码如下// 保持DOM元素唯一const baseDom = { overlay: null, dialog: null,}// 显示const fadeIn = (dom) => { dom.style.display = ''; dom.classList.add('m...原创 2020-03-05 21:56:42 · 1920 阅读 · 0 评论 -
实现ElementUI-colorPicker颜色选择器组件 - 戴向天
大家好!我叫戴向天。QQ群:602504799QQ:809002582实现vantUI-colorPicker颜色选择器组件样式代码我就不贴出来了:加群(602504799)可获取样式代码包效果图代码如下<template> <div class="p-20 bg-f width-350 height-240 border-s-e"> <d...原创 2020-01-20 09:54:36 · 4555 阅读 · 0 评论 -
js 批量修改CSS样式表(px,rem互转) elementUI适配rem - 戴向天
大家好!我叫戴向天QQ群:602504799QQ:809002582我封装这个函数的初心的,公司的项目都是属于PC端,要求不管PC端的屏幕有多大都要完整的展示。在开发的时候一切都很好,但是在使用elementUI的时候,发现使用的组件不只如何进行相对应的调整,根据屏幕的大小而进行自适应。因为elemetUI使用的都是“px”单位所以我就自己做了一个方法将“px”和"rem"之间互转的方法。...原创 2019-10-14 15:24:16 · 3108 阅读 · 1 评论 -
前端 自定义 tag组件 VUE高效开发 - tag - 戴向天
大家好!我叫戴向天QQ:809002582tag 组件的内容在手机移动端上面的时候,文字的字体会有向上偏移的情况,所以在在组件方面我没有使用height,而采用了padding,利用padding来进行是文字居中(文字普遍的向上偏移2px)<template> <div v-if="name" v-bind="getParams" @c...原创 2019-06-14 13:35:18 · 14350 阅读 · 0 评论 -
前端 利用自定义组件 div 和 封装的touch事件做的刻度 -rule -戴向天
大家好!我加戴向天。QQ:809002582<template> <!--尺子刻度--> <div class="posi-r dh-150 mar-a w-600 over-h" :style="{border:`3px solid ${color}`}"> <div class="posi-a w100 flex-x-cen...原创 2019-06-14 18:12:09 · 496 阅读 · 0 评论 -
vue 自适应图片组件 前端 - 戴向天
大家好!我叫戴向天。今天我给大家分享一个关于vue的图片自适应的组件。该组件的自适应原理是利用css3的flex布局进行完成的,使用起来简单易懂下面的代码完全是纯手写的,若有写错的地方还望指正。QQ:809002582 戴向天废话不多说了,直接上代码原创 2019-06-03 22:00:45 · 13439 阅读 · 0 评论 -
前端JS H5 touch事件封装,更加高效的开发移动端 - 戴向天
大家好!我叫戴向天。今天我给大家分享一个我自己封装的H5 touch事件的封装。QQ:809002582该方法的使用特别的简单,废话不多说。先上代码 ↓↓↓↓↓/** 给元素绑定事件 */ function touch({dom, start, move, end, stop = true, change}) { const f = { dat...原创 2019-06-04 10:34:57 · 11748 阅读 · 0 评论 -
前端 《优化改良》 - VUE高效开发 - div - 自定义div的load事件 - 戴向天
大家好,我叫戴向天。不说废话了,看代码 ,该说的都下在注释里面了↓↓<template> <div :style="getStyle"> <slot/> </div></template><script> /** * 据之前的开发,由于每次的 宽、高、背景,颜色在公共样式里面时有时无的 ...原创 2019-06-11 16:59:28 · 12721 阅读 · 4 评论 -
前端 vue 高效开发 - input-file + 回显 组件封装 - 戴向天
大家好!我叫戴向天QQ群:602504799QQ:809002582如若有不理解的,可加QQ群进行咨询了解dd-layout-div 组件详情 》https://blog.csdn.net/weixin_41088946/article/details/91448369dd-layout-img 组件详情》https://blog.csdn.net/weixin_41088946/art...原创 2019-06-18 10:20:49 · 12343 阅读 · 0 评论 -
前端 vue组件 layout-button-group - 按钮组 - 高效开发 - 戴向天
大家好!我叫戴向天QQ群:602504799QQ:809002582如若有不理解的,可加QQ群进行咨询了解layout-div 组件详情 》https://blog.csdn.net/weixin_41088946/article/details/91448369layout-image 组件详情》https://blog.csdn.net/weixin_41088946/article...原创 2019-06-25 23:37:01 · 14449 阅读 · 0 评论 -
前端 vue swipe 轮播 自定组件高效开发 - 戴向天
大家好!我叫戴向天QQ群:602504799QQ:809002582如若有不理解的,可加QQ群进行咨询了解<template> <layout-div :style="getStyle" class="over-h posi-r"> <layout-div :style="getChildStyle" class="flex" @load="lo...原创 2019-06-23 18:30:33 · 11319 阅读 · 0 评论 -
过滤链接的参数 urlFilter - 戴向天
大家好!我叫戴向天,今天跟大家分享一个关于网络链接参数的操作,获取 || 过滤QQ:809002582详情的代码内容如下↓↓↓// 获取链接上的所有参数,返回的是一个Objectfunction getUrlParams(url) { const params = url.split("?")[1]; const reg = /&?([^&]+)/g; le...原创 2019-06-10 11:54:14 · 12485 阅读 · 0 评论 -
前端 getSuccessData - 利用getType获取正确的返回值 -戴向天
大家好!我叫戴向天getType 详细代码==> https://blog.csdn.net/weixin_41088946/article/details/91038867/** 获取正确的数据格式, * 如果传进来的数据格式是正确的就返回自身, * 如果不是就进行返回一个需要的数据格式 */ function getSuccessData(obj, type) { let...原创 2019-06-14 13:08:18 · 11524 阅读 · 0 评论 -
前端 vue v-drag 拖拽面板组件 - 戴向天
大家好!我叫戴向天QQ群:602504799QQ:809002582<template> <div v-drag :class="{'fixed':isFixed}"> <slot/> </div></template><script> export default { props:{ isF...原创 2019-09-25 10:31:06 · 5523 阅读 · 0 评论 -
前端 vue axios封装+debug+error (包含文件上传加参) - 戴向天
大家好,我叫戴向天。QQ:809002582废话不多说,直接上代码↓↓↓祝你前端开发愉快import axios from "axios"; //导入axios cmd安装 => 淘宝镜像 ? cnpm install axios -S : npm install axios -Sconst backendPath = "http://127.0.0.1", //...原创 2019-06-13 10:36:08 · 11191 阅读 · 0 评论