vue
毛默默不吃鱼
这个作者很懒,什么都没留下…
展开
-
菜单扁平化数据处理为树级结构
动态菜单扁平数据转树级翻译 2022-11-25 12:24:19 · 208 阅读 · 0 评论 -
WEB前端初阶入门
WEB入门WEB的基础知识前端页面的三大构成HTML、css、JavaScriptHTML文档——网页网页:后缀名.html- 语法:标签(标记)用尖括号括起来的关键词;单标签、双标签单标签: | 双标签:[内容]HTML文档基本结构<!doctype html> 声明语句<html> 文档的开始 <!-- html标签和head标签是父子关系(嵌套关系) head标签和body标签是兄弟关系(并列关系) -->原创 2022-04-27 10:54:00 · 1073 阅读 · 1 评论 -
前端测试小工具 记录
package.json可配置dev,sit环境是否展示小工具原创 2022-04-07 13:58:03 · 167 阅读 · 0 评论 -
a-input 封装select组件 vue
input 封装select组件 vue需求:输入框,若输入框空白,聚焦展示所有下拉框,输入模糊匹配展示下拉框,输入完全匹配取消下拉框,若输入框存在值,聚焦不展示下拉框,值不完全匹配下拉框值时,展示下拉框;键盘上下可以选择下拉框值,enter可以确认选择 <a-input ref v-model.trim="userName" placeholder="用户名" autocomplete="off" @click.stop.prev原创 2022-04-07 13:53:07 · 1750 阅读 · 0 评论 -
antd table组件单元格嵌入select选择器
antd table组件单元格嵌入select选择器dom <a-table :columns='columns' :dataSource='columnsList' rowKey="key" :pagination="false" :row-selection="selection" > <template slot="select" slot-scope="text"> <div原创 2022-02-15 09:11:17 · 3148 阅读 · 0 评论 -
Antd Select 可输入可选择带联想可多选择
Antd Select 可输入可选择带联想可多选择 <a-select :showSearch="true" mode="multiple" :showArrow="true" v-model="form" placeholder="请选择" :filterOption="false" @change="handleChange" @search="searchForm" :notFoundContent="null" :dropdownMatchSelectWidth="false"&原创 2022-01-26 15:17:02 · 1296 阅读 · 0 评论 -
antd vue json渲染的导航栏
antd vue json渲染的管理系统布局组件原创 2022-01-26 11:01:10 · 238 阅读 · 0 评论 -
antd vue json数据动态渲染导航
antd框架搭建json渲染的的后台管理系统的layout布局原创 2021-12-31 09:38:47 · 444 阅读 · 0 评论 -
vue 采坑日记 (antd 框架)
Vue 采坑日记登录权限篇https://juejin.cn/post/6844903478880370701#heading-4 大佬写法antd vue 篇FORM modal 表单匹配定义的校验规则,但校验不成功//<a-form-modal-item label='AA' prop="des"> <a-select v-model="form.des"> 表单里面的v-model的值一定要放在:form定义的变量里面,prop定义同v-model的原创 2021-12-30 14:25:22 · 747 阅读 · 0 评论 -
对象数组新增一条数据
let option=[{text:"aaa",value:"0"},{text:"bb",value:"1"}]let newList=[]let obj=[{text:"111",value:"00"}]let set =new Set([...option,...obj])newList.push(...set)console.log(newList,'11');```javascript在这里插入代码片原创 2021-12-15 10:42:13 · 499 阅读 · 0 评论 -
Antd Vue Select组件
Antd Vue Select组件既可以输入模糊查询,也可以不输入复制粘贴内容模糊查询,又可以选择 <a-select show-search :allowClear="true" :show-arrow="true" v-model.trim="testValue" placeholder="请输入" :filter-option="true" @search="handleSearch"原创 2021-12-10 15:43:07 · 1305 阅读 · 0 评论 -
vue 自定义蒙层引导
进入页面之后的新手指引原创 2021-12-03 16:55:26 · 2277 阅读 · 0 评论 -
基于pdfjs和modal的接口渲染打开对应pdf的弹框
vue封装pdf组件npm i pdfjs-dist (本次基于2.3.200版本)npm i cross-spawn (这个必须要一起安装)pdf组件//部分思想参考网上<template> <div :id="eid" :ref="eid"> <div class="pdf-wrap"> <canvas> v-for="page in pdf_pages" :class="'the-canvas'+page"原创 2021-11-24 10:18:01 · 802 阅读 · 0 评论 -
js 排序 字符串内含数字字母特殊符号排序
var a="10022.T01"var b="02133.SH1" getChartCode(str){ var newStr = str.split(""); var num = 0; newStr.forEach((item, ind) => { let flag = Number(item) ? true : false; var mm=Math.pow(10,(newStr.length-ind))原创 2021-11-02 15:10:36 · 741 阅读 · 0 评论 -
antd desgin Vue组件样式修改 百分百有效
Antd Vue组件样式修改 百分百有效a-modal组件<a-modal :visible="true" title="aa" okText="同意" wrapClassName="aa" cancelText="tuichu" @ok="()=>{}"><a href="#">全部订单</a></a-modal>先在组件上添加wrapClassName=“aa”,一定要有less 样式编写.aa{ div[role='d原创 2021-09-16 11:18:29 · 945 阅读 · 0 评论 -
根据配置项插入复选框
//checkbox.vue<template> <div class="check"> <input type="checkbox" class="box"> <span class="text">wiaa</span> </div></template><script> export default { }<.原创 2020-10-23 00:28:34 · 177 阅读 · 0 评论 -
vue-chacao
//插槽chacao.vue<template> <div> <h1>插槽的使用</h1> <h2>匿名插槽</h2> -------------- <Chacaoson> <!-- <div slot="slotA"> <h1>这里给了slotA插槽</h1.原创 2020-10-22 22:00:15 · 179 阅读 · 0 评论 -
vue is 属性
//is.vue<template> <div> <button @click="login">登录</button> <button @click="register">注册</button> <div :is="comName"></div> </div></template><script> .原创 2020-10-22 21:56:22 · 92 阅读 · 0 评论 -
vue-component通信
//main.jsimport Vue from 'vue'import App from './App'import './filter/timeFormat.js'Vue.config.productionTip = falseVue.prototype.$bus = new Vue()/* eslint-disable no-new */new Vue({ el: '#app', components: { App }, template: '<App/>'}.原创 2020-10-22 21:55:24 · 170 阅读 · 0 评论 -
vue-评论案例
<template> <div class="mask" v-if="isShow"> <input type="text" v-model="name"> <br> <input type="text" v-model="age"> <br> <input type="text" v-model="gender"> &l原创 2020-10-19 23:22:00 · 204 阅读 · 0 评论 -
git axios
# Git axios 做项目git bashgit guigit --versionGit 是一个开源的分布式****版本控制****系统,用于敏捷高效地处理任何或小或大的项目。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件## 安装windows 桌面右键点击git bashmac 直接打开明令行```git config --global user.name “你的github用户名”git config --glo原创 2020-10-19 23:18:30 · 163 阅读 · 0 评论 -
axios封装
import axios from 'axios'let instance = axios.create({ baseURL: "/api", // 最终会跟传进来的url进行拼接 timeout: 6000 // 请求过期时间})// 请求拦截instance.interceptors.request.use((config) => { console.log(config) let token = localStorage.getItem("token"原创 2020-10-19 23:16:23 · 59 阅读 · 0 评论 -
vuex
vuex的使用场景:保存登录状态 token 用户名登录成功,添加商品:/addProduct?id=1&name=香蕉&token购物车今后,只要遇到多个组件有共享的状态时,就把这个状态放到vuex存储Vuex使用安装npm i vuex --save创建文件src下新建一个store文件夹,新建一个index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)expor原创 2020-10-19 23:14:49 · 71 阅读 · 0 评论 -
vue-路由
ref获取页面中的元素<p ref="myp"></p>this.$refs.myp获取子组件实例<son ref="myson"></son>this.$refs.myson => son组件实例对象this.$refs.myson.msg获取v-for生成的多个元素<p ref="myp" v-for="(item, index) in arr" :key="index"></p>this原创 2020-10-19 23:09:40 · 118 阅读 · 0 评论 -
vue-ref的使用
<template> <div class="play"> <div class="bgc"></div> <p>{{songList[index].name}}</p> <p>{{songList[index].singer}}</p> <div class="progress-box"> <span>{{currentTime | f原创 2020-10-19 23:08:02 · 146 阅读 · 0 评论 -
vue-购物车
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do原创 2020-10-19 23:01:51 · 147 阅读 · 0 评论 -
vue-三级联动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do原创 2020-10-19 22:58:15 · 248 阅读 · 0 评论 -
vue高亮切换
Document {{ item }}原创 2020-10-19 22:07:39 · 270 阅读 · 0 评论 -
JavaScript数组整理
JavaScript数组整理数组:join:将所有数组元素结合为一个字符串pop:从数组中删除最后一个元素,返回被删除的值push:在数组结尾处像数组添加一个新的元素,返回新数组的长度,修改原数组shift:删除首个数组元素,并把所有其他元素位移到更低的索引,返回被移除的字符串unshift:再开投向数组添加新元素,返回新数组的长度,修改原数组length可以提供向数组追加新元素的简易方法,arr[arr.length]=‘aaa’splice:可用于向数组添加新的项目 arr.splice原创 2020-08-05 17:25:28 · 207 阅读 · 0 评论 -
vue(二)双向数据绑定实现原理
Vue(二)双向数据绑定的原理<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>原创 2020-08-05 17:06:56 · 124 阅读 · 0 评论 -
Vue (一)
Vue (一)什么是vue官方学习网站:https://cn.vuejs.org/版本:2.Xvue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。Vue 和 Vue.jsVue 是一个框架,是一个可以提供完整解决方案的东西Vue.js 是这个框架的一个核心库Vue框架:vue.js 组件化 vue路由 vue状态管理Vue的优点(1)解耦数据与视图今后只要想让原创 2020-08-04 08:58:30 · 88 阅读 · 0 评论