vue alert插件(标题为图片)(自写)
<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插件(标题为图片)(自写)的更多相关文章
- VUE图片懒加载-vue lazyload插件的简单使用
序:vue项目时候,我们要对图片进行懒加载处理,这个开发项目中就不需要自己去写了,因为比较方便使用vue lazyload进行处理,高效率开发 一. vue lazyload插件: 插件地址:http ...
- VUE图片懒加载-vue lazyload插件的简单上手使用(优化版本)
在用VUE做项目开发的过程中,首页用到了懒加载的方法,查找了一些方法,觉得官网写得太复杂,有一篇博客不错(https://www.cnblogs.com/xyyt/p/7650539.html),但是 ...
- php框架tp3.2.3和js写的微信分享功能心得,分享的标题内容图片自定义
https://blog.csdn.net/weixin_42231483/article/details/81585322 最近用PHP的tp3.2.3框架和js写的微信分享功能心得,分享的标题内容 ...
- 写一个Vue loading 插件
什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参 ...
- vue各种插件汇总
https://blog.csdn.net/wh8_2011/article/details/80497620(copy) Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一 ...
- vue常用插件汇总
UI-框架element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量 ...
- vue 常用插件,保存
UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI ...
- 微信分享功能引入页面-控制分享时候调用的标题、图片、url和微信按钮隐藏显示控制
1.设置分享调用的标题.图片.url预览. 2.控制右上角三个点按钮的隐藏显示(和底部工具栏的显示隐藏--未测试). 3.判断网页是否在微信中被调用. <!doctype html> &l ...
- 在VC6中基于dll开发插件用于各种图片显示(BMP/TGA/JPG/GIF/PNG/TIF/ICO/WMF/EMF/...)
一.图片显示 图片显示的方法: 1. 直接写程序 2. 第3方库 3. 调用COM组件的IPicture接口 4. 使用MFC的CPictureHolder类 5. 使用GDI+的CImag ...
随机推荐
- Ubuntu环境下Postgres源码文件编译安装步骤
step1:官网下载postgres源码 URL:https://www.postgresql.org/ftp/source/ step2:解压源码文件 tar -zxvf postgresql-12 ...
- .NET Core 3.0之深入源码理解Startup的注册及运行
原文:.NET Core 3.0之深入源码理解Startup的注册及运行 写在前面 开发.NET Core应用,直接映入眼帘的就是Startup类和Program类,它们是.NET Core应用程 ...
- css之页面三列布局之左右上下高度固定,中间自适应
第一种,绝对定位 !DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <tit ...
- github代码推送
git init // 初始化版本库 git add . // 添加文件到版本库(只是添加到缓存区),.代表添加文件夹下所有文件 git commit -m "first commit&qu ...
- JS事件 鼠标移开事件(onmouseout)鼠标移开事件,当鼠标移开当前对象时,执行onmouseout调用的程序。
鼠标移开事件(onmouseout) 鼠标移开事件,当鼠标移开当前对象时,执行onmouseout调用的程序. 当把鼠标移动到"登录"按钮上,然后再移开时,触发onmouseout ...
- mantis 添加新状态配置方法
在mantis的状态栏中一般只有:新建.反馈.认可.已确认.已分派.已解决.已关闭,七个选项,如果想在其中加入新的状态怎么做? 我要加入的状态为:重新打开 1.添加状态信息 打开config_defa ...
- NOIP提高真题整理(2011-2018)-标签
加粗的后面应该会有相应的简单解析(如果没咕的话:)). 2011 day1 T1:铺地毯:逆着铺 T2:选择客栈:按颜色分类枚举+二分答案 T3:Mayan游戏:大模拟dfs+剪枝 day2 T1:计 ...
- 深度探索C++对象模型之第二章:构造函数语意学之Copy constructor的构造操作
C++ Standard将copy constructor分为trivial 和nontrivial两种:只有nontrivial的实例才会被合成于程序之中.决定一个copy constructor是 ...
- 使用ajax怎么请求跨域资源
1.ajax中添加“xhrFields”和“crossDomain”,如: $.ajax({ url: url, data: data, type: "post", xhrFiel ...
- JAVA入门各种API参考
java sdk: https://docs.oracle.com/javase/8/docs/api/ servlet api: http://tomcat.apache.org/tomcat-8. ...