前端 - 简忆博客

vue elementUI如何使用Dialog 对话框

2020-11-12 前端

什么是Dialog 对话框？在保留当前页面状态的情况下，告知用户并承载相关操作。Dialog 弹出一个对话框，适合需要定制性更大的场景。使用：需要设置visible属性，它接收Boolean，当为true时显示 Dialog。Dialog 分为两个部分：body和footer，footer需要具名为footer的slot。title属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了before-close的用法。例子：<el-button;type="primary";@click="addDialogVisible;=;true">添加用户</el-button> ;;;;;;;; ;;;;;

vue elementUI如何自定义表单验证规则

2020-11-10 前端

2826 0

一、elementUI自带了一部分表单验证规则，本文讲解如何使用自定义验证规则来完成密码的二次验证。1.1、首先添加验证邮箱和电话规则和正则表达式//;验证邮箱的规则 ;;;;;;;;var;checkEmail;=;(rule,;value,;cb);=>;{ ;;;;;;;;;;;;//;邮箱正则表达式 ;;;;;;;;;;;;const;regEmail;=;;/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/ ;;;;;;;;;;;;if(regEmail.test(value)){ ;;;;;;;;;;;;;;;;return;cb() ;;;;;;;;;;;;} ;;;;;;;;;;;;cb(new;Error('请输入合法的邮箱')) ;;;;;;;;} ; ;;;;;;;;;//;验证手机号的规

Vue+elementUI如何实现左侧菜单高亮

2020-11-09 前端

3045 0

效果展示1、首先给el-menu组件加上:default-active="activePath"属性，再给子集菜单加上@click="saveNavState(subItem.path)"点击事件。;;; ;;;;;;<el-aside;:width="isCollapse;?;'64px';:;'200px'"> ;;;;;;;;<div;@click="toggleCollapse">|||</div> ;;;;;;;;<el-menu;background-color="#333744";text-color="#fff";active-text-color="#4091ff";unique-opened;:collapse="isCollapse"

解决laravel8无法安装验证码问题,更新composer.lock 文件

2020-11-07 前端

3059 0

在使用laravel8框架时，报如下错误https://mirrors.aliyun.com/composer could not be fully loaded (The "https://mirrors.aliyun.com/composer/packages.json" file could not be downloaded (HTTP/2 429 )), package information was loaded from the local cache and may be out of date;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;[Composer\Downloader\TransportException];;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;The "

Vue使用elementUI通过路由导航守卫控制页面权限

2020-11-05 前端

2300 0

路由导航守卫控制访问权限如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面// 挂载路由导航守卫 router.beforeEach((to,from,next)=>{ ;//to 将要放行的路径 ;//from 代表从哪个路径跳转而来 ;//next 是一个函数，表示放行 ;//next() 放行;;next('/login') 强制跳转 ;if(to.path=== '/login'){return next()} ;//获取token ;const tokenStr = window.localStorage.getItem('token'); ;if(!tokenStr){ ;;return next('/login') ;}else{ ;;next() ;} })

vue中如何使用element弹窗

2020-11-04 前端

2228 0

1、在element.js中导入弹窗//;导入弹窗 import;{;Message;};from;'element-ui' Vue.prototype.$message;=;Message2、使用方法return;this.$message.error(‘失败’) return;this.$message.sucess(‘成功’) return;this.$message.;warning;(‘警告’)

Vue配置axios发起登录请求，接口数据方法例子

2020-11-03 前端

2384 0

Vue中如何发起请求接口数据方法例子在main.js添加如下代码import;axios;from;'axios' //;配置请求的更路径 axios.defaults.baseURL;=;"http://www.laravel8.com/api/" Vue.prototype.$http;=;axios 使用方法<script> export;default;{ ;;;;data(){ ;;;;;;;;return{ ;;;;;;;;;;;;//;登录表单数据绑定对象 ;;;;;;;;;;;;loginForm:{ ;;;;;;;;;;;;;;;;username:'', ;;;;;;;;;;;;;;;;password:'' ;;;;;;;;;;;;}, ;;;;;;;;} ;;;;}, ;;;;methods:{ ;;;;;;;;login(){ ;;;;;;;;;;;;this.$

Laravel解决前后端分离应用跨域请求，安装CORS 扩展包

2020-11-02 前端

2745 0

最近在搭建vue后台的时候，出现跨域问题。框架使用的是laravel8，前端在使用axios请求接口出现跨域问题，最终解决方法输入下1、安装扩展composer;require;barryvdh/laravel-cors2、使用方法在/app/Http/Kernel.php $middleware下添加如下代码\Fruitcake\Cors\HandleCors::class,在/app/Http/Kernel.php $routeMiddleware下添加如下代码'cors';=>;\Barryvdh\Cors\Middleware\HandleCors::class,

Vue elementUI使用阿里iconfont图标库，vue如何引用iconfont图标

2020-10-31 前端

2515 0

有时我们在开发项目的时候，前端自带框架图标库不够用怎么办？我们可以引入第三方图标库，以下是引入图标库的方法。1、将下载的font图标库放置\src\assets\目录下2、在main.js中引入//;导入字体图标 import;'./assets/font/iconfont.css'3、使用字体图标<el-input;prefix-icon="iconfont;password";type="password";placeholder="请输入密码";v-model="loginForm.password"></el-input>

Vue使用elementUI如何实现点击按钮重置表单，vue如何重置表单

2020-10-30 前端

3546 0

resetFields：对整个表单进行重置，将所有字段值重置为初始值并移除校验结果1、如何拿到表单实例对象了？我们可以给el-form表单添加ref=””名称可以随意取2、点击按钮重置表当，为重置按钮绑定单击事件@click="resetLoginForm"3、this.$refs.loginFormRef.resetFields();对表单数据重置4、具体代码实例，仅供参考<template> ;;<div> ;;;;;;<div> ;;;;;;;;;; ;;;;;;;;;;<el-form;label-width="0px";ref="loginFormRef"> ;;;;;;;;;;;;;;<!--;用户

Vue使用elementUI如何实现表单数据验证

2020-10-29 前端

1932 0

什么是表单验证？在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。步骤说明：共三个步骤。第一步，为el-form通过属性绑定:rules=””，绑定一个校验规则对象，第二步，在校验规则对象之中定义几个校验规则的属性，第三步，在我们的表单对象中通过prop指定不同校验对象详细代码<template> ;;<div> ;;;;;;<div> ;;;;;;;;;; ;;;;;;;;;;<div> ;

Vue使用elementUI如何实现表单数据绑定

2020-10-29 前端

3070 0

Vue使用element表单在做项目中,我们经常要用到的，以下是如何进行数据绑定教程。1、给el-form添加属性绑定:model=””,然后给每个表单el-input通过v-model=""绑定到数据对象的属性中。<template> ;;<div> ;;;;;;<div> ;;;;;;;;;; ;;;;;;;;;;<el-form;label-width="0px";:model="loginForm"> ;;;;;;;;;;;;;; ;;;;;;;;;;;;<el-form-item;label=""> ;;;;;;;;;;;;;;;;<el-input;prefix-icon="el-icon-u

如何在vue中引入element-ui

2020-10-28 前端

2245 0

1、npm 安装npm;i;element-ui;–S2、在main.js中引入import;ElementUI;from;'element-ui' import;'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)完整代码import;Vue;from;'vue' import;App;from;'./App.vue' import;router;from;'./router' import;ElementUI;from;'element-ui' import;'element-ui/lib/theme-chalk/index.css' import;'./plugins/element.js' ; //;导入全局样式表 import;'./assets/css/global.css' ; Vue.config.prod

vue cli如何关闭eslint严格语法检查

2020-10-27 前端

3280 0

eslint是一个JavaScript的校验插件，通常用来校验语法或代码的书写风格。有了eslint的校验，可以来规范开发人员的代码，是挺好的。但是有些像缩进、空格、空白行之类的规范，在开发过程中一直报错，未免太过于苛刻了。如何关闭eslint？1、我们在创建一个vue项目的时候，会有一个选择：Use ESLint to lint your code? (Y/n)，在这一步，我们选择no就好了。2、Vue ui界面的，找到配置，把eslint configuration中的保存时检查关闭即可，并重启项目3、若是创建项目不消息建了yes，我们不需要删除项目重新创建，我们只要修改build\webpack.bas

$解决Vue报错Module not found: Error: Can't resolve 'less-loader' in 'C:\Users\Hm\Desktop\vue\vue_shop'问题$

解决Vue报错Module not found: Error: Can't resolve 'less-loader' in 'C:\Users\Hm\Desktop\vue\vue_shop'问题

2020-10-26 前端

20802 0

Failed to compile../src/views/Login.vueModule not found: Error: Can't resolve 'less-loader' in 'C:\Users\Hm\Desktop\vue\vue_shop'原因：当前找不到less-loader，默认vue-cli工具帮我们创建了项目，并没有帮我们安装less-loader，我们只需安装less-loader和less即可。安装好之后，我们发现并不能生效，我们只需重新启动即可

解决vue 报错 error Newline required at end of file but not found eol-last问题

2020-10-25 前端

5791 0

./src/App.vueModule Error (from ./node_modules/eslint-loader/index.js):C:\Users\Hm\Desktop\vue\vue_shop\src\App.vue; 16:9; error; Newline required at end of file but not found; eol-last✖ 1 problem (1 error, 0 warnings); 1 error and 0 warnings potentially fixable with the `--fix` option.出现这个问题，是因为vue文件中最后一行没有空一行，我们只需按下回车键空一行即可。

Vue新增路由报错Module Error (from ./node_modules/eslint-loader/index.js):

2020-10-24 前端

6199 0

Failed to compile../src/router/index.jsModule Error (from ./node_modules/eslint-loader/index.js):C:\Users\Hm\Desktop\vue\vue_shop\src\router\index.js; 18:4; error; Unexpected trailing comma; comma-dangle✖;1 problem (1 error, 0 warnings); 1 error and 0 warnings potentially fixable with the `--fix` option.出现这个问题是因为vue路由不能加,（逗号）解决方法是，把数组最后一个逗号去掉。

Vscode如何汉化，vocde如何修改为中文

2020-10-23 前端

2896 0

Vscode是一款较好的前端IDE编辑器，备受前端开发工程师的热爱。但是Vscode默认界面是英文，怎么汉化改成中文呢？汉化教程1、首先ctrl+shift+p，输入configure language2、;安装语言包3、我们选择第一个，安装中文简体4、;安装后，在 locale.json 中添加 "locale": "zh-cn"，即可载入中文（简体）语言包。再次输入configure language并选择第一项5、然后选择第二项zh-cn6、接着会提示重启软件，点击restart，即可至此，vscode以是中文版

Vue路由如何重定向到某个页面

2020-10-19 前端

4065 0

在做项目的时候，有时要判断是否登录，没登录，就让某个页面重定向到登录页面，这时我们可以通过以下方法来重定向。找到vue路由文件，找到对应的路由，比如下面如果用户直接访问域名+/，就重定向到login.vue页面import;Vue;from;'vue' import;VueRouter;from;'vue-router' import;Login;from;'../views/Login.vue' ; Vue.use(VueRouter) ; const;routes;=;[ ;;{ ;;;;path:;'/', ;;;;redirect:;'Login' ;;}, ;;{ ;;;;path:;'/login', ;;;;name:;'Login', ;;;;compo

如何使用vue ui创建vue项目

2020-10-21 前端

2111 0

前提，已安装vue脚手架，安装脚手架工具vue-cli，常见问题参考：这篇文章,;https://www.tpxhm.com/fdetail/307.html1、Window进入cmd命令控制台，输入vue;ui2、执行命令后，浏览器会打开创建页面。3、点击创建按钮，进入到目录选择页面4、输入项目名，已经git初始化信息5、预设就是一套定义好的插件和配置。你也可以将自己的配置保存成预设，方便以后创建项目使用。这里我们选择手动6、选择手动，进入下一步，我们安装bable、Router、Linter、使用配置文件7、点击下一步这里提示是否选择默认路由，这里我们选择关闭，最后点击创建项目8、

解决更新Let's Encrypt证书时报Couldn't download https://raw.githubusercontent.com/certbot/certbot/v1.9.0/l错误问题

2020-10-20 前端

2883 0

Let's Encrypt —— 是一个由非营利性组织互联网安全研究小组（ISRG）提供的免费、自动化和开放的证书颁发机构（CA），简单的说，就是为网站提供免费的 SSL/TLS 证书。不过证书只有3个月有效期，需要我们对其续期。博主在续期的时候遇到Couldn't download https://raw.githubusercontent.com/certbot/certbot/v1.9.0/l。。。。错误问题。发现是阿里云的ECS访问不到github,估计又是GFW的锅,只能修改hosts解决方法：1、使用命令打开etc文件夹下面的hosts文件：vim;/etc/hosts2.增加内容199.232.4.133;raw.githubusercontent.com3.重

vue elementUI如何使用Dialog 对话框

vue elementUI如何自定义表单验证规则

Vue+elementUI如何实现左侧菜单高亮

解决laravel8无法安装验证码问题,更新composer.lock 文件

Vue使用elementUI通过路由导航守卫控制页面权限

vue中如何使用element弹窗

Vue配置axios发起登录请求，接口数据方法例子

Laravel解决前后端分离应用跨域请求，安装CORS 扩展包

Vue elementUI使用阿里iconfont图标库，vue如何引用iconfont图标

Vue使用elementUI如何实现点击按钮重置表单，vue如何重置表单

Vue使用elementUI如何实现表单数据验证

Vue使用elementUI如何实现表单数据绑定

如何在vue中引入element-ui

vue cli如何关闭eslint严格语法检查

解决Vue报错Module not found: Error: Can't resolve 'less-loader' in 'C:\Users\Hm\Desktop\vue\vue_shop'问题

解决vue 报错 error Newline required at end of file but not found eol-last问题

Vue新增路由报错Module Error (from ./node_modules/eslint-loader/index.js):

Vscode如何汉化，vocde如何修改为中文

Vue路由如何重定向到某个页面

如何使用vue ui创建vue项目

解决更新Let's Encrypt证书时报Couldn't download https://raw.githubusercontent.com/certbot/certbot/v1.9.0/l错误问题

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

vue elementUI如何使用Dialog 对话框

vue elementUI如何自定义表单验证规则

Vue+elementUI如何实现左侧菜单高亮

解决laravel8无法安装验证码问题,更新composer.lock 文件

Vue使用elementUI通过路由导航守卫控制页面权限

vue中如何使用element弹窗

Vue配置axios发起登录请求，接口数据方法例子

Laravel解决前后端分离应用跨域请求，安装CORS 扩展包

Vue elementUI使用阿里iconfont图标库，vue如何引用iconfont图标

Vue使用elementUI如何实现点击按钮重置表单，vue如何重置表单

Vue使用elementUI如何实现表单数据验证

Vue使用elementUI如何实现表单数据绑定

如何在vue中引入element-ui

vue cli如何关闭eslint严格语法检查

解决Vue报错Module not found: Error: Can't resolve 'less-loader' in 'C:\Users\Hm\Desktop\vue\vue_shop'问题

解决vue 报错 error Newline required at end of file but not found eol-last问题

Vue新增路由报错Module Error (from ./node_modules/eslint-loader/index.js):

Vscode如何汉化，vocde如何修改为中文

Vue路由如何重定向到某个页面

如何使用vue ui创建vue项目

解决更新Let's Encrypt证书时报Couldn't download https://raw.githubusercontent.com/certbot/certbot/v1.9.0/l错误问题

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

使用以下账号登录