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 ...
随机推荐
- coco2dx android package..
/Users/chong/Documents/engine/cocos2d-x-3.15.1/tools/cocos2d-console/bin/cocos compile -p android -m ...
- MySQL数据库之DCL(数据控制语言)
1.MySQL之DCL设置root指定的ip访问 进入mysql:mysql -uroot -p或者mysql -uroot -h127.0.0.1 -p(host默认为127.0.0.1) mysq ...
- Python学习笔记(三)——文件系统中的常用方法
OS模块中关于文件/目录常用的函数使用方法 函数名 使用方法 getcwd() 返回当前工作目录 chdir() 改变工作目录 listdir(path='.') 列举指定目录中的文件名('.'表示当 ...
- Maven - 深入理解maven构建生命周期和各种plugin插件
作者:亚当-adam 来源:CSDN 原文:https://blog.csdn.net/zhaojianting/article/details/80321488 版权声明:本文为博主原创文章,转载请 ...
- 阿里云Aliplayer高级功能介绍(一):视频截图
基本介绍 H5 Video是不提供截图的API的, 视频截图需要借助Canvas,通过Canvas提供的drawImage方法,把Video的当前画面渲染到画布上, 最终通过toDataURL方法可以 ...
- day24 模块
Python之路,Day12 = Python基础12 模块 本质为py程序 分类: 内置模块 time time.time() ---> 当前时间的时间戳:浮点型 time.localtim ...
- 5020: [THUWC 2017]在美妙的数学王国中畅游
传送门 当年听llj讲的时候觉得这简直是个不可做的神题. 现在看来并不是很神,可能是我已经被剧透了的缘故... 一开始以为是函数套函数,懵蔽了好久,结果只是求和 被剧透了泰勒展开就比较水了..只要你不 ...
- 第二十篇:记下第一个mysql触发器
项目背景:给一个服务限制访问次数,当用户访问这个服务的次数达到这个值的时候,关闭他的访问权限首先访问信息存在一张表中,记录用户的ip:visitor_ip,服务的id:service_id,访问次数: ...
- 在windows中用cmd命令执行python无限循环程序如何停止
在windows中用cmd命令测试python带有无限循环的程序,当想要终止时, 即linux中的Ctrl + D 相似的功能时可以用 Ctrl + Pause Break, 有FN功能键的可能要使用 ...
- 简介、变量、常数、if、基础数据类型、注释、input()
### 1.python的历史 python2和python3的区别 python2 源码不统一,重复代码 python 源码统一,没有重复代码 2004 Django框架的诞生 2.python ...