lyt-top-优快云博客

说明：可直接cv代码到控制台 F12 运行一、Promise.all 多接口请求，所有请求完成后打印所有请求结果// 定义接口路径const url = [100, 200, 300, 400, 500, 600, 700, 800, 900, 2000]// 模拟请求function request(u) { return new Promise(resolve => { setTimeout(() => { if (u === 500 || u === 700) {

2022-05-10 15:16:32 902

转载 [单位] 常用单位换算表大全

力1牛顿(N)＝0.225磅力(lbf)= 0.102千克力(kgf)　1千克力(kgf)= 9.81牛(N)　1磅力(lbf)= 4.45牛顿(N)　 1达因(dyn)= 10-5牛顿(N)压力1巴(bar)= 105帕(Pa)　1千帕(kPa)= 0.145磅力/英寸2(psi) = 0.0102千克力/厘米2(kgf/cm2) = 0.0098大气压(atm)1磅力/英寸2(psi)= 6.895千帕(kPa) = 0.0703千克力/厘米2(kg/cm2) =0.0689巴(bar)

2022-01-25 10:42:30 8206

原创 [vue-next-admin] 图片预览

新建文件夹

2021-12-07 14:45:34 1034

原创微信小程序picker多列选择器：mode = multiSelector

1

2021-07-06 15:12:37 7494 1

原创 [vue] 简单的数组对象去重

一、点击黄色背景文字，然后控制台（F12）看效果，每个只可以添加一次。二、全部html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=devi

2021-06-16 20:42:15 265

原创 [vue] 鼠标滑动选中数据 window.getSelection()

<template> <el-input v-model="value"></el-input></template><script lang="ts">import { defineComponent, toRefs, reactive } from 'vue';import { defineComponent, toRefs, reactive, onMounted } from 'vue';export default defi

2021-06-03 15:16:09 1479

原创 [vue] vue3.x 前端列表搜索过滤

vue-next-admin，这是基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex，适配手机、平板、pc 的后台开源免费模板库一、效果图二、组件代码<template> <div class="market-details-container"> <input type="text" v-model="userSearch" p.

2021-05-30 12:09:13 1948

原创基于 vue3.x + vite + element plus，适配手机、平板、pc 的后台开源免费模板库

介绍vue-next-admin 基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex，适配手机、平板、pc 的后台开源免费模板库（vue2.x版本请切换到 vue-prev-admin分支），希望减少工作量，帮助大家实现快速开发。让您学习体验 vue3 + vite 速度与激情快感，适合小中大型项目的开发，实际项目中可直接上手。线上预览vue3.x 版本预览（vue.

2021-04-19 16:28:29 8011 2

转载实现效果：使用before和after就可以实现，代码量不多，长度颜色都可以自己调整

实现效果：使用before和after就可以实现，代码量不多，长度颜色都可以自己调整实现代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } html, body {

2021-04-01 19:57:46 247

原创 [vue-next-admin] 关于 vue3 + vite + typescript + eslint + prettier + vscode 的配置说明

vue-next-admin，这是基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex，适配手机、平板、pc 的后台开源免费模板库温馨提示：此配置适用于 vue-next-admin 后台开源免费模板，其它语言 react 等请自行调整。（这是关于 vue-next-admin：vue3 + vite + typescript + eslint + prettier + v.

2021-03-15 10:50:35 7849

原创 [vue3.0 + vite] 入门体验

彩蛋：后台管理系统一站式平台模板vue-admin-wonderful，一套为开发者快速开发准备的基于 vue2.x 越看越精彩的后台管理系统一站式平台模板。基于element ui 2.14.11、安装# 全局安装npm install create-vite-app -g# 创建项目create-vite-app vue3-vite# 进入目录cd vue3-vite# 安装依赖npm install# 运行npm run dev2、浏览器打开http://loca

2020-12-06 10:45:59 452

原创 [vs code] 代码格式化与插件(防止代码标签换行)

一、首选项 - 设置 - settings.json{ // 使用单引号替代双引号 "prettier.singleQuote": true, // 这个按用户自身习惯选择 "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_line_length": 120,

2020-10-20 12:22:10 1522 2

原创 [git] 不弹出用户名或者密码弹窗

使用一下命令git config --system --unset credential.helper

2020-09-07 20:01:31 1773

转载 [javascript] js使用filter递归过滤树形结构数组

// 菜单列表const menuList = [{ name: '系统管理', code: 'system_manage', children: [{ name: '用户管理', code: 'user_manage', children: [{ name: '添加用户', code: 'add_user' }, { name: '编辑用户',

2020-09-04 10:51:40 1828

原创 [element-ui] elementUI-NavMenu 导航菜单动态渲染(递归) 支持横向导航

1、效果图[普通不支持横向布局请看这篇文章](https://blog.youkuaiyun.com/qq_34450741/article/details/107481395)2、代码数据模拟格式与这里面的相同点击跳转查看数据格式2.1 主组件<template> <el-menu mode="horizontal" :default-active="$route.path" active-text-color="#09f"> <template v-for=

2020-08-30 01:02:46 5314 2

转载 [html] 7种方法实现CSS左侧固定，右侧自适应布局

左侧内容固定，右侧自动占满屏幕布局是开发中常见的布局，通常可见于一些管理后台：左侧展示菜单栏，右侧展示管理内容。今天整理了7种实现这种布局的方法：一：float+bfc ，左侧宽度不需要固定，但父级容器宽度需大于左侧宽度，否则右侧被挤压无法展示/左浮动固定宽度，右边盒子overflow:hidden触发bfc，使其不与浮动盒子区域重叠，因此会重新计算宽度。/.container1 .left{float: left;width: 100px;}.container1 .right {ove

2020-08-24 23:14:58 2645

原创 [element-ui] 把Tree 树形控件修改成表格，实现展开多选操作

未作树的懒加载效果，没有这个需求，下面可做参考。1、效果图2、全部代码<template> <el-card class="tree-card" shadow="never"> <div v-loading="loading"> <div class="tree-head"> <div class="tree-head-check"><el-checkbox v-model="checkAll" @change.

2020-07-31 00:10:36 2710 2

原创 [html] flex弹性盒子、float浮动盒子通用布局（2种布局方式）

改变盒子间的间隔，只需改外层 margin: 0 -5px; 和改里层 padding: 5px; 即可。效果图：一、弹性盒子布局1.1 css.flex-warp { display: flex; flex-wrap: wrap; align-content: flex-start; margin: 0 -5px;}.flex-warp-item { padding: 5px; width: 25%; height: 100px;}.flex-warp-item-box.

2020-07-25 11:59:24 1183

原创 [element-ui] elementUI-NavMenu 导航菜单动态渲染(递归)

一、效果图二、组件部分注意：<sub-menu :menu-list="val[props.children]" :props="props" @getmenu="onMenuItemClick"/>。递归调用当前组件Vue.component('sub-menu', { template: ` <div> <div v-for="(val, key) in menuList" :key="key"> <el-submenu :in

2020-07-21 10:32:19 5569 4

原创 [css] css三角形-边框三角形(各种角度)

一、效果图二、代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .sjx-t { width: 0; height: 0; border-left: 70px solid transparent; border-right: 70px solid transpa

2020-07-19 21:24:16 836

原创 [vue] vue cli 4.0+ 解决前端跨域问题

文档链接：axios、vue-cli、开源社区api自己动手测试：（黑窗）1.1 vue create ‘项目名称’1.2 vue serve ‘xxx.vue’1.3 完整的接口链接为：http://meiriyikan.cn/api/json.php一、request.js（去 axios中看）请注意这句话：const baseURL = '/api'：这话是使用 /api 代替 vue.config.js中配置的 proxy target要访问的跨域的接口域名。比如你写成 const.

2020-07-19 15:12:13 3258

原创 [javascript] js数组对象去重或合并数组对象中的指定值

1、js数组对象去重复并合并数值<script> var arrs = [ {"id": "1","name": "张三","value": "1245"}, {"id": "1","name": "张三","value": "1360"}, {"id": "2","name": "李四","value": "1120"}, {"id": "2","name": "李四","value": "1362"}, {"id": "2","name": "李四","value.

2020-07-14 13:26:57 1135

原创 [javascript] 正则替换内容并变色

#1、效果2、代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>正则替换内容并变色</title> </head> <body> <div> <p>1、普通字符串：</p> <div> 原数据：<span id="str11"><

2020-05-29 12:59:45 1148

原创 [vue] props传值，子组件直接改变父组件的值

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。2.实例应用，比如自定义弹窗主页：（父组件）注意 .sync<custom-dialog :visible.sync="dialogVisible"></custom-dialog>export default { name: '', data()..

2020-05-25 19:21:44 592

原创 [vue] input点击获取焦点时，选中当前input文字，方便输入

说明：兼容性未测试<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>input获取焦点选中文字</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&g...

2020-03-29 22:29:09 1614

原创 [vue] 购物车界面模板效果

1、效果图如下：2、代码.vue文件

2020-02-04 16:09:24 1369

原创 [vue] 超简单锚点平滑滚动demo

1、效果图2、代码（过于简单，就不多解释了），直接复制即可运行<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue锚点平滑滚动</title> <script src="https://cdn.jsdelivr.net/...

2019-12-17 20:28:57 1840 2

原创 [vue] 多页应用

1、根目录（package.json同级）vue.config.jsmodule.exports = { publicPath: './', pages: { index: { entry: './src/main.js', template: './src/public/index.html', filename: 'index.html', title:...

2019-11-27 11:05:05 172

原创 [element-ui] 表格在 `flex` 时实现自适应

1、最外层设置弹性盒子布局<div class="flex flex-col"></div>2、表格外层嵌套一个 div 盒子，设置样式相对定位，高度100%<div class="flex flex-col"> <div class="relative h100 flex-auto" v-loading="tableData.loadi...

2019-11-14 17:33:50 1349

原创 [element-ui] element form 表单自定义验证

1、验证当前项validatorForm(formName, attr, errorTxt) { this.$refs[formName].clearValidate(); // 移除表单项的校验结果 this.rules[attr].push({ validator: (rule, value, callback) => { callback(new Error(err...

2019-11-12 21:51:51 502

原创 [element-ui] table表格组件滚动条位置

1.设置table的ref为tableList2.设置滚动至顶部this.$refs.tableList.bodyWrapper.scrollTop =0;3.设置滚动至底部this.refs.tableList.bodyWrapper.scrollTop=this.refs.tableList.bodyWrapper.scrollTop =this.refs.tableList.body...

2019-10-31 18:33:02 2871 1

空空如也

空空如也