白菜酱-CSDN博客

原创 vue3+element-plus 列表查询条件/筛选条件组件简单封装

写后台管理的时候会有很多列表以及相应的条件查询，所以就想封装成为组件，就不需要每个页面写一堆的代码，直接循环出来，拿出数据就OK了。

2022-08-25 17:13:17 5918 1

原创 vite+vue3+mock 简单数据接口

写一些纯前端的项目时，自己造数据有些麻烦，于是我们可以利用mock造一些简单的数据，来满足我们的需求。1.导入依赖yarn add mockjs --save-dev2.配置vite.config.tsimport { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import { viteMockServe } from 'vite-plugin-mock'export default defineConfig

2022-05-24 17:19:35 910

原创 vue3 element plus动态添加图标

elementicon 直接使用类名就可以实现<i class="el-icon-edit"></i>element plusicon 变成直接使用svg图片，当我动态的时候渲染时，就需要用到 vue3 的 :is//单一固定的<el-icon><apple /></el-icon>** 新的 attribute :is**:is 动态使用组件。有的时候你可能需要 Vue 将一个原生元素替换为一个 Vue 组件，这时你可以把

2022-05-09 11:25:20 2636

原创 element-plus 表单验证

表单验证是使用率比较高的，和之前element版本也有些差别。<template> <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm" > <el-form-item label="Password" prop="pass">

2022-04-26 14:45:20 5490 4

原创 vue 全局节流

我在网上找了两种节流方法** $on 在main.js 填入即可**const on = Vue.prototype.$onVue.prototype.$on = function (event, func) { let previous = 0 let newFunc = func if (event === 'click') { newFunc = function () { const now = new Date().getTime() if (pr

2022-04-19 11:13:34 364

原创 vue3 +HTML5 拖放排序

1.数据let lists = reactive(["1.猪头", "2.李白", "3.杜甫", "4.豆腐"]);2.循环样式<div v-for="(item, index) in lists" :key="item" class="dome-box ml20" @dragstart="dragStart($event, index)" @dragenter="dragenter" @dragover="allowD

2022-04-06 17:15:27 826

原创全局注册过滤器

建立一个文件内容在main.js 注册import * as filters from ‘@/filters’ // 过滤器/ 注册全局的过滤器函数Object.keys(filters).forEach((key) => {Vue.filter(key, filters[key]);});就完事啦

2022-03-03 18:10:51 226

原创 elementUI 自定义上传文件

<el-dialog title="客户导入" :visible.sync="dialogVisibleImport" width="400px" class="addBox" :showClose="false" :closeOnClickModal="false" > <div class="improtBox"> <el-upload class

2022-02-28 16:39:22 855

原创数组变多维，多维变一维

数组变多维num==几维 arr==数组arrTrans(num, arr) { const iconsArr = []; // 声明数组 arr.forEach((item, index) => { const page = Math.floor(index / num); // 计算该元素为第几个素组内 if (!iconsArr[page]) { // 判断是否存在 iconsArr[page] = [];

2022-02-17 20:08:29 225

原创数组随机乱序，洗牌

1.arr.sort (() => Math.random - 0.5)使用这个方法，数组长度最好小于10，因为元素重复会很高。updataItem.sort(mathSort);或者updataItem.sort(Math.random() - 0.5);function mathSort() { return Math.random() - 0.5; }2.经典的const shuffle = arr => { let res = [], r

2022-02-01 03:28:12 519

原创 es6 数组过滤重复数据以及排序

let data: any[] = reactive([10, 5, 5, 3, 1, 2, 3, 4, 4, 4, 5, 6, 7]);// 排序data = data.sort((a, b) => a - b);// 过滤重复data = [...new Set(data)]let dataArr: any[] = reactive([ { id: 7, name: "chen" }, { id: 2, name: "qing" }, { id: 3, name: "che

2021-12-11 15:35:26 1129

原创【无标题】vue3 script setup以及defineProps，defineEmits

script setup最新的vue3.2版本更新了新的语法糖，就是 setup 可以直接写在script里面。<script setup lang="ts"></script>之前的写法是serup() 并且还需要retun。更新之后可是使用顶层await ，结果会被编译为 async setup()。组件引入便可直接使用<script setup>import MyComponent from './MyComponent.vue'</scri

2021-12-11 15:29:07 1045