vue
aithena
这个作者很懒,什么都没留下…
展开
-
vue+element 弹框层级问题
Vue.prototype.$ELEMENT = 30000Vue.use(elementui, { zIndex: 30000 })原创 2020-03-11 10:47:55 · 8999 阅读 · 0 评论 -
vue cli3 关于 vue.config.js 的常用配置
module.exports = { filenameHashing: false, assetsDir: 'static/', configureWebpack: { externals: { 'vue': 'Vue', 'element-ui': 'ELEMENT', 'vue-router': 'VueRouter', '...原创 2020-03-06 20:45:13 · 1323 阅读 · 0 评论 -
Vue 错误提示 Do not use 'new' for side effects
在 new Vue 在ESLint报错 Do not use 'new' for side effects方法一在new Vue上加/* eslint-disable no-new */这句注释可以绕过规则检测/* eslint-disable no-new */new Vue({ el: '#app', router, components: { App }, ...原创 2020-01-19 10:28:02 · 295 阅读 · 0 评论 -
vue 值传递的几种方式及监听值变化
1、$emit2、bus.js3、vuex// 父组件<child @callback="callback" :searchList="searchList"></child>methods: { callback(value) { this.selectValue = value }}// 子组件methods: { onC...原创 2019-12-10 11:14:33 · 1040 阅读 · 0 评论 -
clipboard 多次回调
引入插件文件,clipboard 无需juquery 支持。<button class="copy" id="copy" onclick="copy('#copy')" data-clipboard-text="1000000">复制QQ号</button>function copy(copyid){ var clipboard = new Clipboard...原创 2019-08-26 23:32:14 · 1207 阅读 · 0 评论 -
vue 获取 div 高度
<div ref=""jo></div>// 常规模型var height = this.$refs.jo.offsetHeight;// 获取元素样式值,element 为元素ref="jo"var heightCss = window.getComputedStyle(this.$refs.jo).height; // 100px// 获取元素内联样式...原创 2019-11-27 14:43:56 · 11755 阅读 · 0 评论 -
vue的mixin
Vue 中的Mixin对编写函数式风格的代码很有用,因为函数式编程就是通过减少移动的部分让代码更好理解(引自 Michael Feathers )。Mixin允许你封装一块在应用的其他组件中都可以使用的函数。如果使用姿势得当,他们不会改变函数作用域外部的任何东西,因此哪怕执行多次,只要是同样的输入你总是能得到一样的值,真的很强大!原创 2019-11-25 17:18:20 · 209 阅读 · 0 评论 -
vue 组件
一、封装组件的步骤1.建立组件的模板,先把架子搭起来,写写样式,考虑好组件的基本逻辑。2.准备好组件的数据输入。即分析好逻辑,定好 props 里面的数据、类型。3. 准备好组件的数据输出。即根据组件逻辑,做好要暴露出来的方法。4. 封装完毕了,直接调用即可。二:代码详解<search @select="select" :list="list" :...原创 2019-11-25 17:12:01 · 214 阅读 · 0 评论 -
vue-draggable-resizable 的基本使用模式(极简模型)
<vue-draggable-resizable @activated = "onActivated({index: index, index2: index2})" @dragging = "onDrag" @resizing = "onResize" @dragstop = "onDragStop({index: index, index2: index2})" @resiz...原创 2019-11-20 14:35:29 · 2391 阅读 · 1 评论 -
vue-cropperjs 的基本使用方法
<!-- 图片剪裁 --><el-dialog title="图片剪裁" width="860px" :visible.sync="cropperVisible" :before-close="cropperClose"> <div class="cropper-wrapper clearfix"> <div class="cropper...原创 2019-11-12 17:40:08 · 8419 阅读 · 1 评论 -
vue数据变化但页面不刷新
1、 比如给对象新增了一个属性,但是页面并没有刷新,这里因为数据层次太多,没有触发render函数进行自动更新,需手动调用。this.$forceUpdate();2、$set 设置值...原创 2019-10-28 17:18:40 · 3366 阅读 · 0 评论 -
vue-code-mirror 的使用
import Vue from 'vue'import vueQuillEditor from 'vue-quill-editor'import vueCodeMirror from 'vue-codemirror-lite'import App from './App.vue'import router from './router'import '@/assets/css/com...原创 2019-09-16 23:27:18 · 1718 阅读 · 0 评论 -
vue-quill-editor 的使用
import Vue from 'vue'import vueQuillEditor from 'vue-quill-editor'import vueCodeMirror from 'vue-codemirror-lite'import App from './App.vue'import router from './router'import '@/assets/css/com...原创 2019-09-15 22:10:35 · 790 阅读 · 0 评论 -
vue创建项目
1、安装node.js,下载https://nodejs.org/en/download/2、安装 npm ,上一步安装自动会安装3、安装vue脚手架 npm install -g @vue/cli4、查看vue版本号 vue -V(大写)5、创建项目(2.9)vue init webpack vueFirst ----------------...原创 2019-08-11 13:39:21 · 162 阅读 · 0 评论 -
vue 引入项目图片的几种方式
1、data(){}中引入图片{ icon: require('@/assets/images/modules-a5.png'), text: '图片', type: 'ui-picture'}或者{ icon: require('../../assets/images/modules-picture.png'), text: '图片',...原创 2019-06-29 10:32:08 · 11254 阅读 · 0 评论 -
vue关于computed/created/methods/watch
computed:计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。methods:将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。watch:是一种更通用的方式来观察和响应 Vue 实例上的数据变动。一个对象,键是需要观察的表达式...转载 2019-04-23 14:15:56 · 1077 阅读 · 0 评论 -
vue获取当前路由的子路由列表
this.$router:获取全局路由this.$route:获取当前路由信息 computed: { // 获取当前路由的子路由 routes(){ var routes = { children: this.$router.options.routes }; var route = this.$route.mat...原创 2019-04-23 13:58:53 · 14876 阅读 · 0 评论 -
vue+element 树形组件tree自定义节点
1、下载安装依赖包npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env --save-dev2、项目根目录下新建.babelrc 文件,并写入代码{ "presets": [ ...原创 2019-04-18 14:15:18 · 3863 阅读 · 0 评论 -
vue在build之后生成的index.html多次重复载入样式表和js文件的问题
创建一个基于 webpack 模板的新项目(2019.03.14 测试)1、进入文件目录,然后调起命令行工具,输入:#wwwroot 为自定义项目名$ vue init webpack wwwroot2、运行命令后,会让用户输入几个基本选项:? Project name wwwroot // 项目名称? Project description a vue.js proj...原创 2019-03-14 15:58:00 · 5150 阅读 · 0 评论 -
vue中的style使用的几个小技巧
scoped私有化样式将当前模块(页面)的样式仅仅运用在当前,有效实现多页面样式隔离,实现各自功能互不干扰。<style scoped>.avatar-uploader { height: 100px; }.el-step.is-simple .el-step__title { font-size: 14px; }.el-form-item { margin-botto...原创 2019-03-12 09:57:52 · 13629 阅读 · 0 评论 -
vue + vuedraggable 实现拖拽排序
安装npm install vuedraggable引入import draggable from 'vuedraggable'注册components: { draggable}html<draggable class="list" v-model="modules" :clone="clone" :options="{group: {name...原创 2019-03-02 02:10:47 · 14694 阅读 · 0 评论 -
vue + clipboard的复制粘贴功能
下载安装npm install clipboard --save或者直接在https://clipboardjs.com/下载压缩包,放在node_modules 下引入import Clipboard from "clipboard";函数copy(e, text) { const that = this; const clipboard ...原创 2019-03-02 02:10:37 · 426 阅读 · 0 评论 -
vue触发显示输入框后自动聚焦
官方实例如下:<el-input ref="tagInput"></el-input>this.$nextTick(_ => { this.$refs.tagInput.$refs.input.focus();});可我在本地调试总是无法正常运行,出现如下报错:console.log(this) 如下:通过如下处理解决了,不知道为...原创 2019-07-09 16:45:06 · 8703 阅读 · 1 评论 -
vue动态输出class
<div :class="'ui-control-layout center-' + element.format" ></div>原创 2019-08-10 09:27:34 · 615 阅读 · 0 评论 -
回车提交表单(含vue+element)
1、el-button<el-button type="primary" @click="submit('former')" native-type="submit">立即登录</el-button>2、el-input<el-input v-model="form.user" @keyup.enter.native="submit('form')"&...原创 2019-07-09 09:18:57 · 2650 阅读 · 3 评论