柒柒兮-CSDN博客

原创 vue使用I18n

1.安装npm install vue-i18n / yarn add vue-i18n2.main.jsimport Vue from 'vue'import VueI18n from 'vue-i18n'Vue.use(VueI18n)3.i18n.jsimport { createI18n } from 'vue-i18n';// 引入各个语言配置文件import en from './locales/en';import zh_CN from './locales/zh-

2022-02-25 16:13:47 2419

原创 vue3组件通信

这里利用之前封装的elementPlus 日期区间组件来讲一下vue3组件之间的通信父组件<v-date-picker @itemChange="getChangeTime"/>const getChangeTime = (e)=>{//获取子组件传过来的值 //e[0]:开始日期 //e[1]:结束日期}子组件接收vDatePicker.vue<template> <el-date-picker v-model="Times"

2021-12-10 14:17:45 854

原创常用的正则：手机号，电子邮箱，密码，正整数......

/** * 各种正则表达式 * mobile 手机号 /^0?(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])[0-9]{8}$/ * email 电子邮箱 /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/ * password 密码【6-20位】 /^[@A-Za-z0-9!#$%^&*.~,]{6,20}$/ * integer 正整数【不包含0】 /^[1-9]

2021-11-30 11:23:57 622

原创 Vue3 的 setup 中使用 $refs

<template> <div class="container" ref="domRef"></div></template><script> import { ref,onMounted } from "vue"; export default { name: "footer", setup() { const domRef = ref(null) onMounted(() => { cons

2021-11-17 16:21:55 4071

原创 Vue3实现pc端商城购物车Demo

主要包含全选，店铺全选，反选，商品数量，价格计算数量加减使用的elementplus 中el-input-number组件<template> <div> <div class="goodsCart"> <div class="container"> <div class="tit"> 全部商品 </div> <div id="tree"> <div clas

2021-11-17 14:36:30 2181 1

原创 MintUi mt-field添加失去焦点事件

<mt-field label="手机号" placeholder="请输入手机号" :attr="{maxlength:11}" type="tel" @blur.native.capture="checkPhone"></mt-field>

2021-10-18 16:04:51 734

原创 filter:grayscale(1)

filter:grayscale(1)使网页呈现哀悼模式伟大的革命先烈们为我们祖国的诞生做出了巨大的牺牲，在相应节日里，我们的站点会呈现灰色哀悼模式，以此来纪念先烈们。body{ filter: grayscale(1);}效果展示...

2021-10-09 10:47:46 3663

原创关于Vue使用Vant加载不到样式的问题

在项目根目录babel.config.js添加配置即可module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ]}

2021-08-23 10:54:41 1224

原创 CSS绘制git猫

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .a{ position: absolute; border: 1px solid #000; background: #000; width: 268px; height: 204

2021-08-18 15:36:03 111

原创 window之Flutter环境变量配置，配置国内镜像

1.先去官网下载解压到本地添加链接描述2.配置环境变量我的电脑–>属性–>高级系统设置–>环境变量–>系统变量3.检测是否配置成功4.配置国内镜像（非常重要，除非你一直保持翻墙）参考：https://www.jianshu.com/p/897a78aec874在用户变量中配置新建输入变量和变量名这里使用flutter中文社区提供的镜像地址：FLUTTER_STORAGE_BASE_URL: https://storage.flutter-i

2021-08-12 11:34:11 2474

原创使用mask-image实现背景空洞的效果

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } html, body { height: 100vh; width: 100vw; }

2021-08-10 16:47:00 254

原创获取两个数组中的交集

var nums1 = [1, 2, 2, 1], nums2 = [2, 2, 3, 4];// 1.var newArr1 = nums1.filter(function(item) { return nums2.indexOf(item) > -1;});console.log(newArr1);// 2.var newArr2 = nums1.filter((item) => { return nums2.includes(item);});conso

2021-08-09 17:02:40 175

原创瀑布流的实现、动态数据绑定、简单封装可根据需求动态传入一行几列的布局

静态实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>瀑布式布局</title></head><style>.falls_flex_box{ display: flex; flex-direction: row; width: 500px; margin: auto;}.f

2021-08-09 15:29:33 172

原创 ElementUi el-table 美化暂无数据状态

前言：当表格数据过长的时候，会出现横向滚动条，这个时候暂无数据就需要拉动滚动条到中间才能看到，导致页面及其不美观，所有，请看下方正常的空值状态如下经过修改后解决方法如下<template> <el-table border :class="{ 'table': '', 'noScrol': tableText }" > //通过slot自定义空状态 <template v-slot:empty > <p :class="{'

2021-08-05 18:02:10 2967 1

原创设置input框只能输入数字并保留两位小数

<el-input oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"></el-input>

2021-08-04 18:34:03 3289

原创 Elementui el-upload 图片列表缩略图模式添加查看大图含删除功能

前言：由于官网el-upload 图片列表缩略图模式没有查看大图的功能，所有自己自定义了一个，其中很多投机取巧的方式，写的不好，若有更好的方法，请留言哦(▽)，不多说废话，直接贴<template><el-upload class="upload-el" accept=".jpg,.png,.bmp" //限制上传的图片类型 :show-file-list="true" //是否显示已上传文件列表 multiple //设置多选 :limit="3" //最大允许上传个数

2021-08-04 15:25:39 5553

原创蜂窝布局+背景切换，适合官网的特效

直接贴代码<template><div class="honeycomb-div"> <div class="wrap"> <ul> <li v-for="(item,index) in honeycombArr" :class="'a'+index" @mouseout="outBack" @mouseover="overBack(index)"> &lt

2021-08-03 15:28:51 445

原创接收服务器返回的文件流并下载

下载或导出xlsxconst exportExcel =() =>{ proxy.$request({ url: 'api/export', method: 'POST', responseType: 'arraybuffer', data:{ //根据需求设置参数 } }).then(response => { let fileName = response.headers['content-dispos

2021-08-03 14:10:55 282

原创 Vue3+ElementUi el-table简单封装

前言：一次简单的封装，还不够完善，主要是根据自己的需求封装的。。。直接贴代码！第一步 vTable.vue<template> <el-table v-loading="config.loading" header-row-style="48px" height='580' border :class="{ 'table': '', 'noScrol': config.tableText }" ref="multipleTable"

2021-08-03 11:44:25 2146

原创 ElementUi el-date-picker封装

前言：由于el-date-picker返回的是一个数组且没有格式化，使用起来并不是很方便，所有个人稍微封装了下，写的不好，有问题请多指教！第一步新建vDatePicker.vue<template> <el-date-picker v-model="Times" type="daterange" :range-separator="rangeName" :start-placeholder="startName" :end-placeholder="e

2021-08-03 11:00:28 859

原创 Vue3+ElementPlus 表格分页组件封装

第一步新建公共组件pagination.vue<template>  <el-pagination background @size-change="handleSizeChange" @current-change="handlePageChange" :page-sizes="[10, 30, 100]" :page-size="pagesize" :layout="layout" :total="to

2021-08-02 10:48:09 5673

原创 Vue3+ElementPlus el-menu子菜单设置父菜单选中技巧

第一步在路由中设置{ path: "/aView", name: "aView", meta: { title: '父菜单' }, component: () => import( "../views/aView.vue"),},{ path: "/bView", name: "bView", meta: { title: '子菜单', activeMenu:'aView'//注意这里的设置,设置的是父菜单的pathName }, component: () =&

2021-08-02 10:31:16 3093

原创 Vue3+Vite2环境变量配置，分别配置本地，测试，正式

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar

2021-08-02 10:18:24 9210 10

柒柒兮的博客