WANGHUAN-

原创 【iview】编辑表单效果

1.点击编辑icon出现input框效果<FormItem label="用户姓名：" prop="userName"> <div style="display:inline-block;width:200px;"> <span v-if='!showNameInput'> {{userForm.userName}} </spa...

原创 [vue-router] Duplicate named routes definition: { name: "日期时间", path: "/components/form/datetime" }

1.在router/index.js 中router.$addRoutes = (params) => {router.matcher = new Router({mode: 'history'}).matcherrouter.addRoutes(params)}2.在使用的地方this.$router.$addRoutes(routes)

原创 【vue】 vue引入highlight.js高亮显示代码

1.安装npm install --save vue-highlightjsnpm install --save highlight.js这里解释一下为什么要安装两个依赖：vue-highlight.js只是实现了代码高亮的功能，他的安装包里是没有css的样式文件的，因此我们还需要安装一个highlight.js来实现真正的样式。2.引入在我们的入口文件main.js中引用依赖imp...

原创 【vue】动态添加表单input

html： <FormItem> <Row v-for="(item,index) in formData.peers" > <Col span="10" style="margin-bottom: -10px;" > <FormItem > <Input size="small...

转载 【iview】iview如何获取表格中被选中行的值

html:<Table highlight-row ref="currentRowTable" :columns="columns3" :data="data1" @on-current-change="handleRowChange"></Table>//必须要有highlight-row，handleRowChange是自己定义的方法methods:{ ...

转载 【vue-watch】watch监听数据变化 监听对象等

Vue.js 有一个方法 watch，它可以用来监测Vue实例上的数据变动。如果对应一个对象，键是观察表达式，值是对应回调，值也可以是方法名，或者是对象，包含选项。下面写两个demo，参考demo来了解一下demo1<template> <div> <el-input v-model="demo"></el-input> ...

原创 【Vue】You may have an infinite update loop in a component render function.

a、版本问题 升级vue到最高版本 ：npm update vue -s升级后会出现与vue-template-compiler不一致问题 执行下边代码b、第一步：执行npm uninstall vue-template-compiler第二步：执行npm install vue-template-compiler@报错中提示的vue的版本号...

原创 【vue】Do not use built-in or reserved HTML elements as component id: header 报错提示

错误提示：不要使用内置或保留的HTML元素作为组件IDheader 使用其他名称，重命名组件。之前是这样换一个非HTML元素即可

转载 【vue-iview】iview Table组件渲染操作按钮, render 渲染icon图标更改方法

1, 使用iview自带的icon图标这个不方便改变他们的icon类型,使用受到局限复制代码let products: any = {columns: [{title: ‘操作’,key: ‘Action’,width: 150,render: (h, params) => {return h(‘div’, [h(‘Icon’, {props: {type: ‘tra...

原创 【vue】vue 引入阿里巴巴图标 render 引入i iconfont

一、导入阿里图标1.去阿里图标矢量图标库将想要的图标添加入库2.再去库中将图标添加到项目。3.再到我的项目中，选择采用的是将图标代码包下载到本地再引入到vue项目中。4.在vue项目的assets文件夹下新建一个iconfont文件夹（名字随意），将刚刚下载下来的代码包中的iconfont.css、iconfont.eto、iconfont.svg、iconfont.ttf、iconfo...

原创 【vue】添加scoped后CSS样式只能作用于当前的组件有效

在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。添加scoped后样式会有一串唯一标识...

原创 【vue】router-link 第一个默认选中，exact当地址为 / 的时候被激活，点击高亮等问题

1.在点击导航栏的时候，让被点击的那一个有背景色，其他的没有背景色？如何做？在路由里面设置router/index.js此时页面中会激活open 及active属性在谷歌浏览器检查是否加载，在样式添相应样式即可.active{color:red;}但是此时我们发现 to=’/’ 一直高亮举个例子，如果当前的路径是 /a 开头的，那么 也会被设置 CSS 类名。按照这...

原创 【jquery】jquery怎么实现点击一个按钮控制一个div的显示和隐藏

示例html：&lt;div class="abc" style="display:none"&gt;&lt;/div&gt; &lt;input type="button" class="but" /&gt; jquery： &lt;script&gt; $(document).ready(function(e) { $(".but&q

原创 【angularjs】ng-model controller中取不到值（input）

一.对于input绑定ng-model默认情况下载控制器中获取不到改变的值1.在自定义控制器中获取不到改变的值原因：ng-model取不到值是因为$scope作用域的问题解决方案：对于input的ng-model绑定使用对象object方式绑定，可以跨作用于访问。controller中定义一个集合：$scope.data ={　　text1 : “”,　　text2: “”,...

原创 【css】内容不足时底部footer不在最低部解决办法

css部分:　　.continer{　　　　min-height: 100%;　　　　padding-bottom: 60px;　　}　　.footer{　　　　height: 60px;　　　　margin-top: -60px;　　　　background-color: #313741;　　　　color: #fff;　　　　text-align: ce...

转载 【vue】基于Vue的Vue-Quill-Editor富文本编辑器

1.下载Vue-Quill-Editornpm install vue-quill-editor2.模板引&lt;template&gt; &lt;div&gt; &lt;el-card style="height: 610px;"&gt; &lt;quill-editor v-model="content" ref="myQuillE...

转载 【vue】vue中v-charts的使用

官方文档：https://v-charts.js.org/#/在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。1：在初次安装的时候，用的是官方推荐npm...

转载 【vue】vue中引入echarts的两种方式

1.安装echarts依赖　　npm install echarts -S2.创建图表a:全局引入main.js页面import echarts from 'echarts'Vue.prototype.$echarts = echartsHello.vue页面&lt;div id="myChart" :style="{width: '300px', height: '300px...

原创 【vue】条件渲染 v-if v-else

1.Vue 提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可：&lt;template v-if="loginType === 'username'"&gt; &lt;label&gt;Username&lt;/label&gt; &lt;input placeholder="Enter your username" key="us...

转载 【vue】vue的目录结构、项目流程、vue-router

原创 【vue】在vue中引入iview

1.在vue项目下npm install iview --save2.在项目中配置目录：src/main.js　中添加import iView from ‘iview’; // 导入组件库import ‘iview/dist/styles/iview.css’; // 导入样式Vue.use(iView);...

原创 【vue】vue如何创建一个项目

1.第一步安装node.js首先去node.js官网去下载，点击下一步安装即可。2.第二步项目初始化（vue脚手架）npm install vue-cli -g3.创建一个项目名为test的项目vue init webpack test4.安装项目依赖（成功后项目下会有一个node_modules文件夹）npm install5.运行项目npm run dev 成功运行后在浏...