vue3
放风喽
鄙人暂缺压寨夫人一名,有意者,请速与我联系。
展开
-
手写一个函数式弹窗挂载点
模仿别人的弹窗组件原创 2022-10-03 22:25:51 · 415 阅读 · 1 评论 -
自定义右键点击指令vue3
想在标签上实现右键菜单,结果naive-ui的tags不支持这个操作。本来用的是自己写的div标签,这样可以响应右键菜单,昨晚突然想到可以用指令来实现,于是自定义了这个指令。原创 2022-07-21 14:17:06 · 1290 阅读 · 0 评论 -
我的VUE3的axios封装
组件创建一个ref属性,控制局部的loading状态,将这个属性传入axios实例中,在请求开始的时候,设置为true,请求结束后,设置为false。原创 2022-07-13 21:37:11 · 589 阅读 · 0 评论 -
自定义穿梭框
一、前言穿梭框普遍都只显示一个字段,想显示多个字段,需要自己用表格搭建,我就是这么干的。二、element ui vue2代码<template> <div class="rongqi"> <div class="transtable"> <div> <div style="display: flex;"> <el-input v-model="leftinput" siz原创 2022-04-27 14:52:54 · 2845 阅读 · 0 评论 -
简易滚动数字
一、前言没什么好说的二、代码<template> <div class="flex"> <div class="w-36px h-36px overflow-hidden border border-gray-600 mx-3px" v-for="(item1,index1) in basevalue" :key="index1 + 'base'"> <div class="w-36px h-36px leading-原创 2021-12-20 17:29:57 · 379 阅读 · 0 评论 -
前端拖动导致触发点击事件的bug
一、原理看别人都是判断初始位置和最终位置之间的距离差值,感觉不好用,我是计算拖动函数触发几次来判断是拖动还是点击二、代码// 函数部分const tuodong = (e) => {// 初始化次数 let num = 0 document.onmousemove = (e) => { // 触发拖动函数,次数+1 num += 1 // 我用的是vue,直接构造style,名字不重要,就是tyle classlist.value = {left: (x原创 2021-12-09 14:30:11 · 897 阅读 · 0 评论 -
适用于vue3的复制指令
一、前言明说吧,我完全复制的v-clipboard,自己想太麻烦了。原版的不支持vue3,我就改造了一下,仅此而已。二、代码function SpellCheckMain(app, options) { // let checkerId = 0; // 定义初始数字,在创建新标签的时候用 const cssText = 'position:fixed;pointer-events:none;z-index:-9999;opacity:0;' let result =原创 2021-10-08 15:26:44 · 1014 阅读 · 0 评论 -
vue3自定义封装popover组件
一、前言根本没有思路,完全是照搬其他大神的成品。十分汗颜思路来源二、代码/**设计思路*/<template> <div class="relative" ref="popoverref" @focus="getfocus" @blur="losefocus" v-click-away="closepop"> <!-- 冒泡插槽--> <div v-if="visible" ref="contentref" class="ab原创 2021-09-13 15:55:45 · 2547 阅读 · 4 评论 -
vue项目部署的git钩子
一、前言在服务器上启动一个web服务,当git仓库被push的时候,git仓库会向这个服务发送一次post请求。web服务在收到请求后,自动执行拉取,创建容器,启动容器的操作。二、代码这是用python写的tornado服务。"""启动服务,收到指令时,拉取码云上的代码"""import jsonimport osimport subprocessimport tornado.ioloopimport tornado.web# 代码在本地的目录cangku_path = r"/原创 2021-08-31 17:57:16 · 196 阅读 · 0 评论 -
vue3一个简易的轮播图
一、前言看别人做的效果不错,自己也搞一个试试二、代码<template> <div class="w-ful h-full flex justify-center items-center flex-col border border-red-300" ref="lunboref"> <div class="flex-1 w-full overflow-hidden"> <div class="h-full transition-all原创 2021-08-31 14:49:09 · 1017 阅读 · 1 评论 -
VUE的docker配置
一、目的配置好docker文件,可以一条命令启动前端容器。二、文件配置.gitignore文件只需要将dist从文件内删除即可。目的就是上传git的时候,将dist文件夹内的文件一块上传git仓库nginx.confuser nginx;worker_processes 1;error_log /var/log/nginx/error.log warn;pid /var/run/nginx.pid;events { worker_connectio原创 2021-08-29 19:56:39 · 2430 阅读 · 0 评论 -
vue3自定义input组件
一、前言这是表单组件的一部分,但现在不知道不知道如何与其他组件互动,所以只是一个简单的input组件二、代码时间:2021年8月15日14:54:21<template> <div class="w-full h-full flex flex-col justify-between items-center"> <div v-if="type!=='textarea'" class="w-full flex-1 flex justify-between it原创 2021-08-15 14:54:39 · 2050 阅读 · 0 评论 -
vue3.0用render创建button组件
一、前言2021年8月13日耗费一天时间按照navie-ui的button源码,自己写了一个button组件,二、代码<script>import {defineComponent,h} from "vue";import myload from "../myload/index.vue"export default defineComponent({ name: "", props:{ loading:{ default:false, typ原创 2021-08-13 22:13:54 · 1509 阅读 · 0 评论 -
自定义vue3.0日历组件
<template> <div class="w-full p-2"> <h1 class="w-full text-2xl font-semibold my-2 px-3 text-left h-10 leading-10">{{ nian + " " + hanziyue + "月" }}</h1> <div class="w-full flex flex-wrap justify-start items-start">原创 2021-07-21 17:39:09 · 5062 阅读 · 10 评论 -
Django和vue的RSA加密
一、前言账号密码等关键信息在传输过程需要加密,我采用强度更高的RSA加密二、环境后端:Django3.2,python3.9前端:vue3.05,node14三、后端后端使用pycryptodome这个模块,我试了好多文章的方法,都不管用,不要去管什么版本,什么C++环境,直接安装这个模块就结束了,没那么多事。pycryptodome官方文档# 虽然安装的是pycryptodome,但是使用方法都是一样的# 短文的加密解密def jiemi(neirong): # print原创 2021-07-18 09:28:25 · 3613 阅读 · 3 评论 -
Vite2 静态资源处理
Importing Asset as URL导入静态资产时,将返回解析后的公共URL:import imgUrl from ‘./img.png’document.getElementById(‘hero-img’).src = imgUrl例如,在开发阶段,imgUrl将是/img.png,而在生产版本中,它将变成/assets/img.2d8efhg.png。其行为类似于webpack的文件加载器。区别在于导入既可以使用绝对公共路径(基于开发期间的项目根路径),也可以使用相对路径。CSS中的转载 2021-05-14 14:59:04 · 3432 阅读 · 0 评论 -
vue3旋转图片验证
一、前言一个突发奇想的创作。二、代码<template> <el-dialog v-model="dialogVisible" width="15%" :before-close="handleClose"> <el-image :src="imageUrl" :style="xuanzhuan" class="w-full flex justify-center rounded-full overflow-hidden"&原创 2021-04-26 15:02:17 · 548 阅读 · 2 评论 -
VUE3.0自定义无限滚动组件
一、前言参考https://blog.csdn.net/weixin_26717681/article/details/108892649这个做的二、代码<template> <div class="wuxiangundong w-full text-center my-2" ref="wuxiangundong"> <i class="text-3xl" :class="loadIcon" v-if="loadstatus"></i>原创 2021-04-26 10:45:59 · 567 阅读 · 1 评论 -
vue3的滑块
前言这是复制别人的代码,源码是vue2,然后我修改成VUE3的。代码<template> <div class="jc-component__range"> <div class="jc-range" :class="rangeStatus?'success':''" > <i @mousedown="rangeMove" :class="rangeStatus?successIcon:startIcon"></i>原创 2021-04-19 12:13:35 · 837 阅读 · 1 评论 -
VUE3.0表格的公共组件
一、目的一般在后台控制台之类的项目中,表格和图标是应用最多的地方,我们今天来封装一个表格的公共组件,用起来非常的简单。二、表格公共组件代码// src/components/mytable.vue<template> <el-table :data="tableData" stripe style="width: 100%"> <el-table-column v-for="col in tableConfig" :ke原创 2021-04-12 16:37:32 · 1039 阅读 · 0 评论 -
vue3.0路由自动导入
一、前提我们使用的是require.context方法导入,在vite创建的项目内使用会报错"require not found",所以必须用webpack创建项目。或者有大能可以说说vite怎么解决这个问题。二、规则我们使用的规则是,搜索src/views/路径下的所有目录和子目录,搜索文件名叫做"index.vue"的文件,使用上级目录的名字作为组件名,进行注册。结构如下:和公共组件注册一样,我们只注册index.vue组件,其他名称的组件不进行注册。三、导入// src/router/i原创 2021-04-07 16:17:55 · 3574 阅读 · 12 评论 -
vue3.0自动导入vuex的子模块
一、前提我们使用的是require.context方法导入,在vite创建的项目内使用会报错"require not found",所以必须用webpack创建项目。或者有大能可以说说vite怎么解决这个问题。二、导入// src/store/index.tsimport { createStore } from 'vuex'import {StateType} from "./leixing"; // 万恶的ts需要的接口,不是vuex的子模块import VuexPersistenc原创 2021-04-07 15:43:16 · 1330 阅读 · 2 评论 -
vue3.0公共组件自动导入
一、前提我们使用的是require.context方法导入,在vite创建的项目内使用会报错"require not found",所以必须用webpack创建项目。或者有大能可以说说vite怎么解决这个问题。二、规则我使用的注册规则是,搜索src/components/路径下的所有目录和子目录,知道文件名叫做"index.vue"的文件,使用上级目录的名字作为组件名,进行注册。结构如下:只注册index.vue,其他名字的组件不注册,三、注册由于vue3.0没有import “Vue” fr原创 2021-04-07 15:31:15 · 3011 阅读 · 3 评论 -
vue3项目记录-引入必要的包
一、element-plus官方文档1.安装npm install element-plus --save2.全局引入全部组件全局引入很简单,但影响我们首屏的加载速度,要求加载的东西越少越好,所以前期我们就先全部引入,后期我们再修改成按需引入import { createApp } from 'vue'import ElementPlus from 'element-plus';import 'element-plus/lib/theme-chalk/index.css';import原创 2021-04-07 15:17:52 · 1833 阅读 · 0 评论 -
vue3项目记录-创建vue3项目
一、安装node1.下载node.jshttps://nodejs.org/en/download/2.安装windows系统 ,双击加一路确定下一步就行了mac,穷鬼,没用过linux,不用Ubuntu的图形界面,都是命令行界面,只用来运行程序,不会再上面编辑,运行也是用docker容器,所以不会安装二、配置淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org如果使用npm下载超时,就用cnpm命令,通过淘原创 2021-04-07 14:21:43 · 129 阅读 · 0 评论