vue
文章平均质量分 55
courageFei
这个作者很懒,什么都没留下…
展开
-
Vue2.x+Element UI 密码规则组件封装
一 效果图二 组件封装步骤1 组件目录结构如下2 组件是需要一个密码输入框和一个pop 框,在input获取焦点的时候展示popover,popover 中的每一项都要根据输入内容实时匹配是否满足某一规则,因此里面的内容需要动态渲染,如下结构<template> <el-popover popper-class="gt-password-popper" v-bind="popoverOptions"> <template slot="reference"原创 2021-07-27 14:39:51 · 1003 阅读 · 1 评论 -
在 Vue项目中如何使用GraphQL
什么是GraphQLGraphQL 官方文档Vue中项目中如何配置支持GraphQl首先需要提前了解一下Vue apollo安装需要的依赖npm install --save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag apollo-link-error vue-cli-plugin-apollo在项目根目录下创建Apollo文件夹,创建 apo原创 2021-01-06 13:48:38 · 3191 阅读 · 0 评论 -
Vue+Element项目中根据业务状态封装业务对应的颜色,用于标识某一行数据的颜色
背景几乎每个页面都有自己的状态,所以经过和产品以及设计师沟通后确定了适用于业务的状态色。虽然Element 中已经有了el-tag 可以表示一些状态,但是每个项目的业务需求会有差异,伴随着这些差异,并结合自己项目的特点,封装了适用于项目的状态。假设每个页面都有自己的状态表示,虽然表示状态的颜色在整体项目上来说是一致的,但是由于每个页面的业务不一样,表示每个页面的各自的状态值也会有所差异,直接让后端返回颜色值也不现实,所以封装了统一的公共组件。全局组件内容如下<template>原创 2021-01-04 17:48:59 · 1310 阅读 · 1 评论 -
如何在Vue+Element项目中配置国际化
Vue I18nVue.js 的国际化插件官网地址建议通读。使用前需要先在项目中install Vue-i18n1 创建i18n文件夹在项目根目录,即src目录项创建i18n目录,此目录下用于存放多语言的翻译如zh.js存储中文翻译,en.js存储英文翻译,id.js 存储印尼语等。// en.jsexport default { basic: { a: "Hello Word!" }}// zh.jsexport default { basic: {原创 2021-01-04 16:13:00 · 906 阅读 · 0 评论 -
Element 表单表格,且前端校验以及后端校验展示在输入框下面
表格表单1 背景有时候可能会有一些需求需要可编辑一张表格,表格的提交可能是按行来提交,也可能是整张表格提交。按行来提交整张表格的数据一起提交2 类似于以上这种场景都需要用一个表单去嵌套一个表格,这种嵌套表格在绑定数据的时候需要注意以下两点,如下图:el-form-item 的 prop 绑定为各自行上的属性,idx为当前行号,这样绑定 prop 不会修改同一个引用对象。在校验的时候也可用于区分是哪一行需要报ERROR。el-form-item 中的输入框需要绑定为行的属性3 给部分原创 2021-01-04 15:02:56 · 2656 阅读 · 0 评论 -
vue 项目中引入 md 文件并展示
一 安装依赖vue-markdown-loader 内部使用markdown-it将Markdown文件转换为Vue组件。 github-markdown-css GitHub Markdown样式的mini cssshighlightjs-line-numbers.js 高亮Markdown 样式并插入行号二 添加配置vue.config.js 中添加如下配置让 webpack 可以编译并解析 md 文件chainWebpack: config => { conf原创 2020-07-14 19:45:01 · 5995 阅读 · 4 评论 -
Vue 项目如何使用阿里 iconfont 的 symbol 类型的图标并封装为组件
1. 首先介绍下 Symbol 类型的图标参考阿里巴巴矢量图标库官方说法:Symbol 是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与上面两种相比具有如下特点:支持多色图标了,不再受单色限制。通过一些技巧,支持像字体那样,通过font-size,color来调整样式。兼容性较差,支持 ie9+,及现代浏览器。浏览器渲染svg的性能一般,还不如png。2. 使用 Symbol 图标原本按照官方网站的介绍原创 2020-05-19 15:51:59 · 3965 阅读 · 0 评论 -
Vue Element table 组件表头处如何添加 icon
1.首先附上 Element-ui 官方文档中的说明https://element.eleme.io/#/zh-CN/component/table#table-column-scoped-slot2 如何使用首先在需要添加 icon 的地方,绑定 render-header attribute ,如下: <el-table-column icon="el-icon...原创 2020-03-03 10:27:48 · 4609 阅读 · 7 评论 -
Vue 自定义指令——滚动加载
1 定义自定义指令export default Vue => { Vue.directive("loadmore", { bind(el, binding) { // 获取element-ui定义好的dom const SELECTWRAP_DOM = el.querySelector(".el-select-dropdown .el-select-dr...原创 2020-03-02 18:00:58 · 665 阅读 · 0 评论 -
用vue-cli搭建的项目build后放在服务器中点击index.html 页面空白
用vue-cli搭建的项目build后放在服务器中点击index.html 页面空白写下本文只是为了做笔记或以后遇到同样问题能快速解决.用vue-cli的搭建项目可以参考官方文档 https://cli.vuejs.org/guide/#cli-service.项目完成最终需要 npm run build 打包发布.在dev阶段用webserver打开是完全没有问题的。但是我在b...原创 2019-08-14 17:21:18 · 828 阅读 · 0 评论