Vue组件系列开发之模态框

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Vue组件系列开发之模态框，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8275字，纯文字阅读大概需要12分钟。

内容图文

项目基础工程文件是使用vue-cli3.0搭建的,这里不过多介绍。开发Vue组件系列之模态框,主要有标题、内容、定时器、按钮文案、按钮事件回调、遮罩层这些可配置项。本次开发得组件是本系列的第一个组件,后期也会有更多系列教程推出。

使用命令行

$ Vue create echi-modal
$ cd echi-modal
$ npm install
$ npm run serve
$ npm run build
$ npm run lint

添加vue.config.js文件,配置如下

const path = require("path");

function resolve(dir) {
 return path.join(__dirname, dir);
}

module.exports = {
 // 基本路径
 publicPath: "./",
 // eslint-loader 是否在保存的时候检查
 lintOnSave: false,
 // webpack配置
 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
 chainWebpack: config => {
 config.resolve.alias
  .set("@", resolve("src"))
 },
 // 生产环境是否生成 sourceMap 文件
 productionSourceMap: false,
 // css相关配置
 css: {
 // 是否使用css分离插件 ExtractTextPlugin
 extract: true,
 // 开启 CSS source maps?
 sourceMap: false,
 // css预设器配置项
 loaderOptions: {},
 // 启用 CSS modules for all css / pre-processor files.
 modules: false
 },
 // use thread-loader for babel & TS in production build
 // enabled by default if the machine has more than 1 cores
 parallel: require("os").cpus().length > 1,
 devServer: {
 port: 9595, // 端口号
 open: true, // 自动开启浏览器
 compress: true, // 开启压缩
 overlay: {
  warnings: true,
  errors: true
 }
 }
};

项目结构

├── src       # 项目源码。开发的时候代码写在这里。
│ ├── components     # 组件目录
| | |--EchiModal    # 模态框组件
│ ├── App.vue     # 项目根视图
│ ├── main.js     # 程序主入口

部分截图

Vue组件系列开发之模态框 - 文章图片

modal组件模板

使用 transition 可以为组件添加动效;对应的组件模板内容如下

<template>
 <transition name="toggle">
 <section class="modal" v-show="visible">
  <div class="modal-mask" v-show="showMask" @click="clickMask"></div>
  <section class="modal-content modal-center" :style="contentStyle">
  <header class="modal-header" :class="{ 'modal-plain': plain }" v-if="showHeader">
   <slot name="header">{{ title }}</slot>
   <span class="closed" v-if="showClose" @click.stop="onClose">
   关闭
   </span>
  </header>
  <main class="modal-body">
   <slot>
   <div class="text-tips">{{ text }}</div>
   </slot>
  </main>
  <footer class="modal-footer" v-if="showFooter">
   <slot name="footer">
   <button class="modal-btn modal-btn-primary" @click.stop="onConfirm">
    {{ confirmBtnText }}
   </button>
   <button class="modal-btn modal-btn-default" @click.stop="onClose">
    {{ cancelBtnText }}
   </button>
   </slot>
  </footer>
  </section>
 </section>
 </transition>
</template>

添加组件属性及操作方法

添加组件的属性,其中duration属性如果设定的数值小于10,则会乘以1000;否则按传递的数值计算

<script>
 export default {
 name: "EchiModal",
 props: {
  visible: {
  type: Boolean,
  default: false
  },
  title: {
  type: String,
  default: "标题"
  },
  text: {
  type: String,
  default: "提示信息"
  },
  tinyBar: {
  type: Boolean,
  default: false
  },
  confirmBtnText: {
  type: String,
  default: "确定"
  },
  cancelBtnText: {
  type: String,
  default: "返回"
  },
  contentStyle: {
  type: Object,
  default: () => {}
  },
  showClose: {
  type: Boolean,
  default: true
  },
  plain: {
  type: Boolean,
  default: false
  },
  showHeader: {
  type: Boolean,
  default: true
  },
  showFooter: {
  type: Boolean,
  default: true
  },
  showMask: {
  type: Boolean,
  default: true
  },
  onMask: {
  type: Boolean,
  default: false
  },
  duration: {
  type: Number,
  default: 0
  }
 },
 watch: {
  visible(nv) {
  if (nv) {
   this.closeTimerHandle()
  }
  }
 },
 data() {
  return {
  closeTimer: null,
  }
 },
 methods: {
  onClose() {
  this.$emit("on-close");
  this.hide();
  },
  onConfirm() {
  this.$emit("on-confirm");
  },
  hide() {
  this.$emit("update:visible", false);
  this.$emit("on-closed");
  clearTimeout(this.closeTimer);
  this.closeTimer = null;
  },
  clickMask() {
  if (this.onMask && this.showMask) {
   this.hide();
  }
  },
  closeTimerHandle() {
  try {
   if (this.duration <= 0) {
   return;
   }
   const duration = (this.duration < 10) ? (this.duration * 1000) : this.duration;
   clearTimeout(this.closeTimer);
   this.closeTimer = setTimeout(() => {
   this.onClose();
   }, duration);
  } catch (e) {
   console.log(e)
  }
  }
 }
 };
</script>

添加样式声明

<style scoped lang="scss">
 *,
 :after,
 :before {
 box-sizing: border-box;
 outline: none;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }

 $color-tips: #1ab394;
 $color-text: rgba(255, 255, 255, 0.6);
 $color-info: #ff9900;
 $color-default: #ccc;

 .modal {
 display: block;
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 99;

 .modal-mask {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
 }

 .modal-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 }

 .modal-content {
  display: flex;
  flex-direction: column;
  min-width: 360px;
  box-shadow: 0 1px 8px 0 rgba(0, 30, 24, 0.05);
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;
 }

 .modal-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  font-size: 18px;
  padding: 0 20px;
  font-weight: 500;
  color: #fff;
  background-color: $color-tips;
  z-index: 9999;

  .closed {
  position: absolute;
  top: 50%;
  right: 0;
  font-size: 12px;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
  transform: translateY(-50%);
  }

  &.modal-plain {
  background-color: rgba(245,
   245,
   245,
   1);
  color: $color-tips;

  .closed {
   color: $color-info;
  }
  }
 }

 .modal-body {
  display: block;
  flex: 1;
  background-color: #fff;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
 }

 .modal-footer {
  display: block;
  width: 100%;
  padding: 20px 30px;
  text-align: center;
  background-color: #fff;

  .modal-btn {
  width: 80px;

  +.modal-btn {
   margin-left: 8px;
  }
  }
 }
 }

 .text-tips {
 display: block;
 width: 100%;
 font-size: 16px;
 text-align: center;
 color: #333;
 padding: 40px 60px;
 }

 .modal-btn {
 display: inline-flex;
 padding: 0 12;
 margin: 0;
 align-items: center;
 justify-content: center;
 font-size: 14px;
 font-weight: 400;
 height: 32px;
 text-align: center;
 white-space: nowrap;
 touch-action: manipulation;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 cursor: pointer;
 user-select: none;
 background-image: none;
 text-decoration: none;
 border: 1px solid transparent;
 border-radius: 4px;
 transition: all .3s ease;

 &:link,
 &:visited,
 &:hover,
 &:active {
  text-decoration: none;
 }
 }

 .modal-btn-default {
 background-color: $color-default;
 color: #fff;

 &:link {
  color: #fff;
  background-color: $color-default;
 }

 &:visited {
  color: #fff;
  background-color: $color-default;
 }

 &:hover {
  color: #fff;
  background-color: rgba(170, 170, 170, .85);
 }

 &:active {
  color: #fff;
  background-color: $color-default;
 }

 &[plain] {
  background-color: #fff;
  color: $color-default;
  border: 1px solid $color-default;
 }
 }

 .modal-btn-primary {
 background-color: $color-tips;
 color: #fff;

 &:link {
  color: #fff;
  background-color: $color-tips;
 }

 &:visited {
  color: #fff;
  background-color: $color-tips;
 }

 &:hover {
  color: #fff;
  background-color: rgba(26, 179, 148, 0.85);
 }

 &:active {
  color: #fff;
  background-color: $color-tips;
 }

 &[plain] {
  background-color: #fff;
  color: $color-tips;
  border: 1px solid $color-tips;
 }
 }

 .toggle-enter,
 .toggle-leave-active {
 opacity: 0;
 transform: translatey(-10px);
 }

 .toggle-enter-active,
 .toggle-leave-active {
 transition: all ease .2s;
 }
</style>

使用

<template>
 <div id="app">
 <img alt="Vue logo" src="./assets/logo.png" />
 <div>
  <button @click.stop="showModel_0 = true">
  显示默认样式
  </button>
  <button @click.stop="showModel_1 = true">
  显示素样式
  </button>
  <button @click.stop="showModel_2 = true">
  修改提示语
  </button>
  <button @click.stop="showModel_3 = true">
  自定义内容
  </button>
  <button @click.stop="showModel_4 = true">
  去除Footer
  </button>
  <button @click.stop="showModel_5 = true">
  去除Header
  </button>
  <button @click.stop="showModel_6 = true">
  设置3秒后自动关闭
  </button>
 </div>
 <EchiModal :visible.sync="showModel_0" title="显示默认样式"></EchiModal>
 <EchiModal :visible.sync="showModel_1" title="显示素样式" plain></EchiModal>
 <EchiModal :visible.sync="showModel_2" title="修改提示语" text="哈哈哈哈哈,我把提示信息修改了"></EchiModal>
 <EchiModal :visible.sync="showModel_3" title="自定义内容" :contentStyle="{width: '600px'}">
  <img alt="Vue logo" src="./assets/logo.png" />
 </EchiModal>
 <EchiModal :visible.sync="showModel_4" title="去除Footer" :showFooter="false"></EchiModal>
 <EchiModal :visible.sync="showModel_5" title="去除Header" :showHeader="false"></EchiModal>
 <EchiModal :visible.sync="showModel_6" title="设置3秒后自动关闭" :duration="3"></EchiModal>
 </div>
</template>

<script>
 import EchiModal from "./components/EchiModal.vue";

 export default {
 name: "app",
 components: {
  EchiModal
 },
 data() {
  return {
  showModel_0: false,
  showModel_1: false,
  showModel_2: false,
  showModel_3: false,
  showModel_4: false,
  showModel_5: false,
  showModel_6: false,
  }
 }
 };
</script>

感谢那您的观看,以上就是我为大家带来的模态框组件,本文同步更新于我的github点击前往。

内容总结

以上是互联网集市为您收集整理的Vue组件系列开发之模态框全部内容，希望文章能够帮你解决Vue组件系列开发之模态框所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/332301.html

来源：【匿名】

【上一篇】vue+element UI实现树形表格带复选框的示例代码【下一篇】php怎么返回数据给vue

更多 ►

【Vue组件系列开发之模态框】教程文章相关的互联网学习教程文章

组件：一个包含Html,css,js独立的集合体，这样的集合体可以完成页面结构的代码复用可以相对于理解成封装承一个小模块，能够重复方便使用.组件分为根组件，全局组件，局部组件　　根组件: 所有被new Vue（）产生的组件，在项目开发阶段，一个项目只会有一个根组件　　全局组件：不用注册，就可以称为任何一个组件的子组件　　局部组件：必须注册，才可以称为注册该局部组件的子组件局部组件创建一个局部组件1.创...

vue组件之间的通信【代码】

1.子组件给父组件传递数据 <body><div id="app">父组件：{{total}}<br><son-component v-bind:total="total"></son-component></div><script>Vue.component('son-component',{template:'<div>子组件：{{total}}+{{num}}={{add}}</div>',props:{total:Number},data(){return {num:10}},computed:{add:function(){return num=this.total+this.num}}})var app=new Vue({el:'#app',data:{total:1},})</script> </body>通过v-bind动态绑...

vue组件star开发基于vue-cli【代码】

<template><div class="stars"><div v-for="(item,ind) in num" :key="ind" :class="{‘on‘:ind<=cur}" @mouseover=‘enter(ind)‘@mouseleave="out()"@click="ok(ind)"></div></div> </template> <script>export default{name:‘Star‘,data(){return{num:5,cur:-1,flag:false}},methods:{enter(ind){if(!this.flag){this.cur=ind;}},out(){if(!this.flag){this.cur=-1;}},ok(ind){this.flag=true;this.cur=ind; }}} </script> <...

vue组件库（四）：组件功能模块划分

涉及的平台移动端一.公共样式常用变量 var.scss颜色模块主题色、状态色、文本色、灰度色（边框和分隔线）字体字体、大小、行间距 2.控件 3. 三大模块样式、有哪些控件原文：https://www.cnblogs.com/yuxina/p/10173644.html

vue组件化的应用【代码】

前言：vue组件化的应用涉及到vue-cli的内容，所以在应用之前是需要安装node和vue-cli的，具体如何安装我就不一一赘述了。可能一会儿我心情好的时候，可以去整理一下。1、应用的内容：在一个页面中，需要一个固定的内容，这个内容可以多次引用，那么就可以考虑把他分离出来，在下次需要的时候，实现引用就好。比如：<input type="text" v-model="content" > <button @click = addList>添加</button> <ul><li v-for="( item ) of tod...

vue组件双向绑定.sync修饰符的一个坑【代码】

我们知道组件是单项的，但是有时候需要双向，这时候我们可以使用.sync修饰符，但今天遇到一个坑，一直不成功，花了半小时试出来的。。。。在编程的时候我们很习惯冒号后面跟着空格。而.sync双向绑定需要子组件显性触发 this.$emit(‘update:foo‘, newValue)这里的updata:foo可以说是一个名字，不能加空格，不能加空格，不能加空格！！！这就是坑，由于编程习惯，也许会有人加空格，我也是，所以写出来当作一个笔记。根据文档...

vue组件复用时，页面不刷新【代码】

一、 keep-alive包裹的组件，在actived的钩子函数总进行调用。二、在使用Vue-router做项目时，会遇到如/serviceId/:id这样只改变id号的场景。由于router-view是复用的，单纯的改变id号并不会刷新router-view。　　当然，我们可以在点击事件上加上router.go(0)，强制刷新整个页面来满足效果，但页面整体的刷新会使体验下降。解决方案有以下几种：1、使用watch方法：当id发生变化时，‘$route‘也会相应地发生变化，因此可以通过wat...

vue 组件传值踩坑日记 1【代码】

今天在用平时很少用到的传值方式，是V2.4以后新加入属性$attrs $listener 以及inheritAttrs.总结：这样形式的代码适合套娃模式的组件传递，却不适合兄弟组件的传值，那样的传值方式，需要创建一个事件总线，说白了就是新new一个空的vue，详见，我的第二篇日志《vue 组件传值踩坑日记 2》废话不多说，直接上代码，大家可以边看注释边测试一下效果吧<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewpo...

Vue组件【代码】

一，Vue组件组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。是可复用的Vue实例。二，组件注册1，全局注册<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app"> <global_com></global_com> <global_com></global_com> <global_com></global_com> </div><div id="app1"> <global_com></global_com> </div><script src="vue....

vue 组件库

百度地图：https://github.com/Dafrok/vue-baidu-mapgoogle地图：https://github.com/GuillaumeLeclerc/vue-google-maps高德地图：https://github.com/ElemeFE/vue-amap图表：https://github.com/hchstera/vue-charts原文：http://www.cnblogs.com/znj211985211/p/7132125.html

Vue组件通信【代码】

1. 父子通信父 -> 子 props子 -> 父事件$emit父子传值，涉及到双向绑定的，一般用v-model，子组件使用$emit(‘input‘,data)还有一种是使用props向下传递一个对象，由于对象是一个引用，直接修改对象的属性，可以达到修改父组件值的目的，需要进一步验证。2. 通用通信方案1. Event bus 使用一个Vue实例，或者任意一个PubSub的库作为中心，进行消息通信。例如：let bus = new Vue(); Vue.prototype.bus = bus;bus.$on 订阅事件b...

Vue之组件切换【代码】【图】

一，使用v-if和v-else指令1，定义注册和登陆组件，设置flag标识，默认为true<script>Vue.component(‘login‘, {template: ‘#tmp1‘})Vue.component(‘register‘, {template: ‘#tmp2‘})var vm =new Vue({el: ‘#app‘,data: {flag: true}}) </script>2，在组件中使用v-if，点击按钮的使用切换flag的值<body><div id="app"><a href="#" @click="flag=true">登陆</a><a href="#" @click="flag=false">注册</a><br/><login v-if="...

Vue组件化开发【代码】

目录Vue组件化开发组件化开发：Vue实例方法与属性Vue.extend与Vue.Component全局指定、组件、方法实例：Popup插件的封装Vue组件化开发组件化开发：1、组件化开发指的是将复杂的业务拆分为一个有一个的组件 2、组件化开发的组件一般来说要灵活 3、组件化开发涉及到了Vue的js组件封装，需要掌握Vue基础、Vue实例方法与属性、Vue.extend、Vue插件等知识Vue实例方法与属性vm.$mount(el) 会将当前的组件挂载el元素上，该操作会替换当前的...

【Vue】组件插槽【代码】【图】

注意：2.6.0之后为具名插槽和作用域引入了统一语法v-slot,取代了slot和slot-scope两个目前已被废弃但未被移除且在文档中的特性。父组件模板里的所有内容都是在父级作用域中编译的，子模板里的所有内容都是在自作用域中编译的。插槽分为三类：1.匿名插槽（默认插槽），没有命名有且只有一个2.具名插槽，即slot带有name3.作用域插槽，子组件数据可以被父页面拿到(解决了数据只能从父页面传递给子组件)匿名插槽(默认插槽，name为defau...

Vue——组件参数校验与非Props特性【代码】

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>组件参数校验与非Props特性</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><div id="root"><child :content="‘组件参数校验‘"></child><lastchild :text="‘非Props特性‘"></lastchild></div><script type="text/javascript">Vue.component(‘child‘, {props: {// content: Number// ...

VUE - 技术教程分类

Vue.js 教程 Vue.js 安装 Vue.js 目录结构 Vue.js 起步 Vue.js 模板语法 Vue.js 计算属性 Vue.js 监听属性 Vue.js 样式绑定 Vue.js 事件处理器 Vue.js 表单 Vue.js 组件 Vue.js 自定义指令 Vue.js 路由 Vue.js 过渡 & 动画 Vue.js 混入 Vue.js Ajax(axios) Vue.js Ajax(vue-resource) Vue.js 实例 vue 全部

VUE - 最热教程

vue权限问题的完美解决方案通过使用vue制作滑动堆叠组件（详细教程...vue渲染页面后div的滚动条保持在最底部...vue中格式化时间戳 vue里面父组件修改子组件样式的方法 vue判断input输入内容全是空格的方法解决vue中对象属性改变视图不更新的问题微信小程序第三方框架对比之 wepy / m...在使用vue中打包项目后刷新碰到404的问...vue实现鼠标移入移出事件代码实例

首页 / VUE / Vue组件系列开发之模态框

Vue组件系列开发之模态框

内容导读

内容图文

内容总结

内容备注

内容手机端

【Vue组件系列开发之模态框】教程文章相关的互联网学习教程文章

Vue之组件【代码】

vue组件之间的通信【代码】

vue组件star开发基于vue-cli【代码】

vue组件库（四）：组件功能模块划分

vue组件化的应用【代码】

vue组件双向绑定.sync修饰符的一个坑【代码】

vue组件复用时，页面不刷新【代码】

vue 组件传值踩坑日记 1【代码】

Vue组件【代码】

vue 组件库

Vue组件通信【代码】

Vue之组件切换【代码】【图】

Vue组件化开发【代码】

【Vue】组件插槽【代码】【图】

Vue——组件参数校验与非Props特性【代码】

VUE - 相关标签

开发 - 相关标签

VUE - 技术教程分类

VUE - 最新教程

VUE - 最热教程