<template>
<div class="modelSelf">
<div class="model" @click="modelHide"></div>
<div class="modelTip">
<img class="modelImg" src="../../../static/images/tip1.png">
<p class="modelContent">{{ content }}</p>
<button class="modelConfirm" @click="modelHide">好的</button>
</div>
</div>
</template> <style lang="less">
.model {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 11;
}
.modelConfirm {
width: 82px;
height: 33px;
line-height: 33px;
background-color: #f04c41;
border-radius: 3px;
border: none;
margin: 0 auto;
display: block;
color: #fff;
}
.modelContent {
line-height: 22px;
color: #333333;
font-size: 14px;
padding: 10px 0;
}
.modelImg {
width: auto;
display: block;
margin: 0 auto;
}
.modelSelf {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: rgba(0, 0, 0, .5);
z-index: 10;
}
.modelTip {
width: 75%;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
margin: 0 auto;
background-color: #ffffff;
border-radius: 3px;
padding: .43rem .38rem .33rem;
z-index: 12;
}
</style>
<script> export default {
name: 'model',
data () {
return {}
},
props: {},
computed: {},
mounted () {},
watch: {},
methods: {},
components: {
}
}
</script>

vue alert插件(标题为图片)(自写)的更多相关文章

  1. VUE图片懒加载-vue lazyload插件的简单使用

    序:vue项目时候,我们要对图片进行懒加载处理,这个开发项目中就不需要自己去写了,因为比较方便使用vue lazyload进行处理,高效率开发 一. vue lazyload插件: 插件地址:http ...

  2. VUE图片懒加载-vue lazyload插件的简单上手使用(优化版本)

    在用VUE做项目开发的过程中,首页用到了懒加载的方法,查找了一些方法,觉得官网写得太复杂,有一篇博客不错(https://www.cnblogs.com/xyyt/p/7650539.html),但是 ...

  3. php框架tp3.2.3和js写的微信分享功能心得,分享的标题内容图片自定义

    https://blog.csdn.net/weixin_42231483/article/details/81585322 最近用PHP的tp3.2.3框架和js写的微信分享功能心得,分享的标题内容 ...

  4. 写一个Vue loading 插件

    什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参 ...

  5. vue各种插件汇总

    https://blog.csdn.net/wh8_2011/article/details/80497620(copy) Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一 ...

  6. vue常用插件汇总

    UI-框架element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量 ...

  7. vue 常用插件,保存

    UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI ...

  8. 微信分享功能引入页面-控制分享时候调用的标题、图片、url和微信按钮隐藏显示控制

    1.设置分享调用的标题.图片.url预览. 2.控制右上角三个点按钮的隐藏显示(和底部工具栏的显示隐藏--未测试). 3.判断网页是否在微信中被调用. <!doctype html> &l ...

  9. 在VC6中基于dll开发插件用于各种图片显示(BMP/TGA/JPG/GIF/PNG/TIF/ICO/WMF/EMF/...)

    一.图片显示 图片显示的方法: 1.  直接写程序 2.  第3方库 3.  调用COM组件的IPicture接口 4.  使用MFC的CPictureHolder类 5.  使用GDI+的CImag ...

随机推荐

  1. Ubuntu环境下Postgres源码文件编译安装步骤

    step1:官网下载postgres源码 URL:https://www.postgresql.org/ftp/source/ step2:解压源码文件 tar -zxvf postgresql-12 ...

  2. .NET Core 3.0之深入源码理解Startup的注册及运行

    原文:.NET Core 3.0之深入源码理解Startup的注册及运行   写在前面 开发.NET Core应用,直接映入眼帘的就是Startup类和Program类,它们是.NET Core应用程 ...

  3. css之页面三列布局之左右上下高度固定,中间自适应

    第一种,绝对定位 !DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <tit ...

  4. github代码推送

    git init // 初始化版本库 git add . // 添加文件到版本库(只是添加到缓存区),.代表添加文件夹下所有文件 git commit -m "first commit&qu ...

  5. JS事件 鼠标移开事件(onmouseout)鼠标移开事件,当鼠标移开当前对象时,执行onmouseout调用的程序。

    鼠标移开事件(onmouseout) 鼠标移开事件,当鼠标移开当前对象时,执行onmouseout调用的程序. 当把鼠标移动到"登录"按钮上,然后再移开时,触发onmouseout ...

  6. mantis 添加新状态配置方法

    在mantis的状态栏中一般只有:新建.反馈.认可.已确认.已分派.已解决.已关闭,七个选项,如果想在其中加入新的状态怎么做? 我要加入的状态为:重新打开 1.添加状态信息 打开config_defa ...

  7. NOIP提高真题整理(2011-2018)-标签

    加粗的后面应该会有相应的简单解析(如果没咕的话:)). 2011 day1 T1:铺地毯:逆着铺 T2:选择客栈:按颜色分类枚举+二分答案 T3:Mayan游戏:大模拟dfs+剪枝 day2 T1:计 ...

  8. 深度探索C++对象模型之第二章:构造函数语意学之Copy constructor的构造操作

    C++ Standard将copy constructor分为trivial 和nontrivial两种:只有nontrivial的实例才会被合成于程序之中.决定一个copy constructor是 ...

  9. 使用ajax怎么请求跨域资源

    1.ajax中添加“xhrFields”和“crossDomain”,如: $.ajax({ url: url, data: data, type: "post", xhrFiel ...

  10. JAVA入门各种API参考

    java sdk: https://docs.oracle.com/javase/8/docs/api/ servlet api: http://tomcat.apache.org/tomcat-8. ...