vue
关注
分享
扫一扫
Adasunshine
这个作者很懒，什么都没留下…
展开
-
vue切换路由回到顶部或者指定位置
vue路由中有一个方法scrollBehavior可以实现原创 2022-09-09 09:42:45 · 1224 阅读 · 1 评论 -
antd vue + ts（vue-property-decorator） 表单至少二选一非空检验
name与enName至少二选一非空检验原创 2022-07-21 17:57:06 · 715 阅读 · 0 评论 -
使用svg-sprite-loader处理svg图标
在项目的根目录下创建vue.config.js配置webpack loader。代码如下：const path = require('path')function resolve(dir) { return path.join(__dirname, dir)}module.exports = { chainWebpack: (config) => { config.module.rule('svg').exclude.add(resolve('src/icons'))原创 2021-12-28 14:07:12 · 768 阅读 · 0 评论 -
vue3封装icon图标组件
1.创建utils文件夹，在utils文件夹中创建validata.js,判断图标是否为外部资源。validata.js:// 判断是否为外部资源export function isExternal(path) { return /^(https?:|mailto:|tel:)/.test(path)}2.在components中创建SvgIcon文件夹，在SvgIcon文件夹中创建index.vue。index.vue:<template> <!--原创 2021-12-27 16:43:19 · 2004 阅读 · 3 评论 -
vue3按需引入Ant Design icon
1.使用Ant Design图表库中的图标1.1安装npm install --save @ant-design/icons-vue1.2修改文档版本vue3项目使用2.x或3.x。1.3 使用（1）点击复制代码（2）将复制的代码粘贴在你要使用的地方（3）在script中引入import { UserOutlined} from '@ant-design/icons-vue';（4）若使用了setup语法糖即到此结束，没有使用则需要在c...原创 2021-11-30 16:31:00 · 3760 阅读 · 0 评论 -
Element ui 树点击展开所有子节点
<el-tree :load="loadNode" lazy show-checkbox :props="props" :render-content="renderContent" node-key="id" :default-checked-keys="checked" :default-expanded-keys="path" @check-change="getCheck" .原创 2021-11-04 17:20:09 · 992 阅读 · 0 评论 -
vue3.0项目实现rem布局(自适应)
1.创建文件在public中创建js文件夹，在js文件夹下创建rem.js文件rem.js:function remSize(){ var deviceWidth = document.documentElement.clientWidth || window.innerWidth if(deviceWidth >= 750){ deviceWidth = 750 } if(deviceWidth <= 320){原创 2021-10-12 14:19:37 · 1795 阅读 · 0 评论 -
Vue中组件局部刷新
1.序言（1）provide与inject在实现组件局部刷新之前先来说一说provide与inject方法。provide是放在最上层的页面，可以实现传数据给它的子组件和多重孙组件，只需要在子孙组件中用inject接收就可以了。 (2)其他的方法实现页面刷新this.$router.go(0);location.reload();这两种方法都是强制刷新页面，会出现短暂的白屏闪烁，不推荐使用。2.provide与inject实现VUE中组件局部刷新首先在app.vue.原创 2021-05-26 13:46:22 · 1316 阅读 · 0 评论 -
Vue中按钮的权限控制
利用自定义指令与vuex来实现首先，在src目录下的view文件夹中创建index.vue、然后创建directives文件夹，在其中新建has.js，创建store.js。store.js:设置state中的状态。import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { buttonPermission:{ add:t原创 2021-05-25 16:32:56 · 327 阅读 · 0 评论 -
Vue数据双向绑定原理
index.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=device-width, initial-scale=1.0" />原创 2021-05-25 09:12:13 · 235 阅读 · 4 评论 -
element ui button组件二次封装
**1.全局注册组件**在main.js中添加：import MyButton from './components/cl-button.vue';const Loading = { install:(Vue =>{ Vue.component('cl-button',MyButton) })}Vue.use(Loading);2.封装组件<template> <el-button :type="success" :style="but原创 2021-05-13 13:15:40 · 632 阅读 · 0 评论 -
vue/cli 3.0及以上版本--Element-UI
1.创建项目使用命令vue create element-admin（后面这个是项目名称）以下为我的选择，可以根据个人项目需要来选择。Please pick a preset: Manually select features? Check the features needed for your project: Choose Vue version, Babel, Router, Linter? Choose a version of Vue.js that you want to ..原创 2021-04-21 13:09:04 · 420 阅读 · 0 评论