• 等级
  • 381462 访问
  • 300 原创
  • 115 转发
  • 4709 排名
  • 68 评论
  • 99 获赞

用vue实现各类弹出框组件

简单介绍一下vue中常用dialog组件的封装: 实现动态传入内容,实现取消,确认等回调函数。 首先写一个基本的弹窗样式,如上图所示。 在需要用到弹窗的地方中引入组件: import dialogBar from './dialog.vue' components:{ 'dialog-bar': dialogBar, }, <dialog-bar></d...

2018-10-07 20:32:45

div或者p标签单行和多行超出显示省略号

单行文本溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本显示省略号 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 这个多行文本省略号在iPhone...

2018-10-07 20:22:30

nuxt.js设置默认跳转路由

this.$router.push({ path: '/auth/login' })  

2018-10-06 21:41:58

nuxt.js使用v-binding绑定img的src的路径,图片不能渲染

改成使用require引入图片路径 require('../../assets/images/team/richard-nash.jpg') 参考:https://github.com/vuejs-templates/pwa/issues/42

2018-10-06 21:41:47

vue使用computed计算属性进行传参

需求,根据传递过来的宽高比,进行宽高的重新计算 computed:{ imgWD(o){ return function(o){ return { width:'370px', height:370*(1/o) + 'px' } } } } <div :sty...

2018-10-06 21:41:36

nuxt.js中使用vue-quill-editor富文本编辑器

1.安装 npm install vue-quill-editor 2.在plugins创建vue-quill-editor import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor/dist/ssr' Vue.use(VueQuillEditor) 3.在nuxt.config.js引入相关文件 css...

2018-10-06 21:41:25

nuxt.js中使用markdown编辑器

1.安装 npm install mavon-editor --save 2.在plugins中创建vue-markdown.js import Vue from 'vue' import mavonEditor from 'mavon-editor' Vue.use(mavonEditor) 3.在nuxt.config.js中引入 css: [ { src: "mavo...

2018-10-06 21:41:16

nuxt.js使用代码编辑器codemirror

1.安装 npm install vue-codemirror --save 2.在plugins中创建nuxt-codemirror-plugin.js import Vue from 'vue' import VueCodemirror from 'vue-codemirror' // language import 'codemirror/mode/vue/vue.js' //...

2018-10-06 21:41:07

phpstudy下使用composer安装Laravel

1、下载Composer,安装,php选择D:\phpStudy\php\php-7.0.12-nts\php.exe 2、下载composer.phar,放到目录D:\phpStudy\php\php-7.0.12-nts\中(这个目录也是php7的php.exe目录)。 3、在目录D:\phpStudy\php\php-7.0.12-nts\中新建一个composer.cmd文件。用文本编...

2018-10-06 21:40:57

布局的时候什么时候用xs,sm,md,lg?

参考知乎等网上资料,整理的!   当你想要内容大小随着屏幕大小自动适应的时候就可以使用bootstrap,也就是在pc端以及不同手机(显示屏大小不同)端内容也能够正常显示的时候。 一行最多占十二个标签,不管是大屏还是超小屏的时候。 col-lg一般用于大屏设备, (min-width:1200px); col-md一般用于中屏设备, (min-width:992px); col-sm一般...

2018-10-06 21:40:46

ES6 Promise 用法(我见过最简洁优秀的文章)

ES6 Promise 先拉出来遛遛 复杂的概念先不讲,我们先简单粗暴地把Promise用一下,有个直观感受。那么第一个问题来了,Promise是什么玩意呢?是一个类?对象?数组?函数?   别猜了,直接打印出来看看吧,console.dir(Promise),就这么简单粗暴。  这么一看就明白了,Promise是一个构造函数,自己身上有all、reject、resolve这几个眼熟的方法,原型...

2018-10-06 21:40:26

div或者p标签单行和多行超出显示省略号

单行文本溢出显示省略号   overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本显示省略号   display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 这个多行文本省略号在...

2018-10-05 20:27:18

nuxt使用axios的跨域处理配置

npm i axios qs npm i @nuxtjs/axios @nuxtjs/proxy --save-dev   plugins/axios.js 使用qs将请求从参数转化位字符串 import qs from "qs"; export default function({ $axios, redirect }) { $axios.onRequest(config =&...

2018-10-05 20:25:09

在nuxt中引入Font Awesome字体图标库

介绍 在element-ui框架中提供了一些图标样式,但是种类比较少,所以在这里提供一套更完善的字体图标库Font Awesome(官方文档),下面就开始介绍如何在一个nuxt项目中使用这套字体库。 引入步骤 1.进入Font Awesome官方网址,下载字体库,官方网址:http://fontawesome.dashgame.com/ 2.下载完成之后,对压缩包进行解压,放置项目中的...

2018-10-05 20:11:47

nuxt.js中引入elemen-ui

1.安装 npm install element-ui 2.在plugins中创建vue-element-ui.js import Vue from 'vue' import ElementUI from 'element-ui' Vue.use(ElementUI) 3.在nuxt.config.js中引入 css: [ { src: "assets/element-c...

2018-10-05 20:10:35

nuxt.js获取当前路由的名称和路径

获取当前路由名称 $nuxt.$route.path 获取当前路由路径 $nuxt.$route.name  

2018-10-05 19:33:12

Vue 弹出层时禁止底层body页面滑动

/***滑动限制***/ stop(){ var mo=function(e){e.preventDefault();}; document.body.style.overflow='hidden'; document.addEventListener("touchmove",mo,false);//禁止页面滑动 }, ...

2018-10-05 19:30:58

vue实现点击旋转

<style lang="css" scoped> .aa{ transition: all 2s; } .go{ transform:rotate(-180deg); transition: all 2s; } </style> <template> <div> ...

2018-10-05 19:29:14

实现点击页面其他地方,隐藏div(vue)

方法一:     通过监听事件 document.addEventListener('click',function(e){ if(e.target.className!='usermessage'){ that.userClick=false; } }) 方法二(比较好):   给最...

2018-10-05 19:26:07

nuxt.js使用swiper

1.安装swiper npm install vue-awesome-swiper --save 2.在plugins下新建vue-swiper.js文件 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr' Vue.use(VueAwesomeSwiper) 3.在nuxt....

2018-10-05 19:23:58

骑着代码去流浪

世俗的选择永远都会给努力的人以入口,也永远都会给想 离开的人以出口,只是你要付出相应的代价。那么认识自己这件事情,恐怕越早开始越好,因为越早,你就可以以越小的代价去选择你是应当离开,还是应当留下。---skiptomylou ...展开 收起
关注
  • 计算机软件/移动/web前端
  • 中国 广东省 广州市
奖章
  • 专栏达人