前面写android混编学到了很多，没有时间全部积累起来，后面会慢慢记录的。
最近很久没有记录了，因为一个新的uniapp的项目。最近在做这个。
看了智慧团建上的弹窗很喜欢，我也要整一套（简易版）
今天兴致大发居然布了插件：http://ext.dcloud.net.cn/plugin?id=672
很简单的组件化，我们来看一看吧
一、写布局
一个大容器一张图片一个文本
<view class="content"> <view v-show="isshow" :style="{ background: color }" v-bind:class="[activeClass,animator]"> <view class="pic"><image class="icon" mode="aspectFit" :src="icon"></image></view> <text class="text" :style="{ color: colortext }">{{ content }}</text> </view> </view>
css就不贴上来了，看的眼花。可以下载来看。
二、js
定义一些属性，用来决定弹什么样的窗口，显示一些什么内容
export default{ data() { return { icon: ‘‘,//图标 content: ‘‘,//内容 color: ‘‘,//背景颜色 colortext: ‘‘,//文本颜色 coloricon: ‘‘,//图标颜色 isshow: false,//是否显示 activeClass:‘mpopup‘,//class animator:‘fade_Down‘//动画class }; }, //属性 props: { //什么类型的弹窗 types: { type: String, value: ‘success‘ }, //弹窗的内容 span: { type: String, value: ‘这是一个土司‘ }, //是否显示 show: { type: String, value: ‘‘ } }, computed: { newshow() { return this.show; } }, watch: { //监听属性传入的值的变化 newshow(val) { if (val == ‘true‘) { this.open();//显示弹窗 } else { this.close();//隐藏弹窗 } } }, onLoad() {}, methods: { init: function() { this.content = this.span; //成功类型 if (this.types == ‘success‘) { this.icon = ‘../../static/images/success.png‘; this.color = ‘#F0F9EB‘; this.colortext = ‘#67C23A‘; this.coloricon = ‘#67C23A‘; } //警告类型 if (this.types == ‘warn‘) { this.icon = ‘../../static/images/warn.png‘; this.color = ‘#FDF6EC‘; this.colortext = ‘#E6A23C‘; this.coloricon = ‘#E6A23C‘; } //信息类型 if (this.types == ‘info‘) { this.icon = ‘../../static/images/info.png‘; this.color = ‘#EDF2FC‘; this.colortext = ‘#909399‘; this.coloricon = ‘#909399‘; } //错误类型 if (this.types == ‘err‘) { this.icon = ‘../../static/images/err.png‘; this.color = ‘#FEF0F0‘; this.colortext = ‘#F56C6C‘; this.coloricon = ‘#F56C6C‘; } }, open: function() { this.animator=‘fade_Down‘;//进入动画 this.init(); this.isshow = true; }, close: function() { this.animator=‘fade_Top‘;//退出动画 } } }
好了我们来看看怎么使用
三、使用
在需要用到的界面引入组件或者全局引入都可以
有三个属性我们需要用js来控制，每次赋值太繁琐
所以就写了个方法，每次调用就好
export default{ /* *设置弹出框 * type:类型 span ：内容 second：几秒消失 */ setPopup:function(_this,types,span,second){ if(_this.ispop!="true"){ _this.types=types; _this.span=span; _this.ispop="true"; setTimeout(()=>{ _this.ispop="false"; },second) } } }
引入刚才的两个js
import Popup from ‘@/static/js/popup.js‘;
import mpopup from ‘../../components/popup/popup.vue‘;
export default { data() { return { ispop:"",//是否显示弹窗 types:"err",//弹窗类型 span:"这是一个土司",//弹窗内容 poptime:2000 }; }, components:{ mpopup }, onLoad() {}, methods: { pop:function(){ Popup.setPopup(this,"success","hello,哈喽",this.poptime); }, popp:function(){ Popup.setPopup(this,"err","hello,哈喽",this.poptime); }, poppp:function(){ Popup.setPopup(this,"warn","hello,哈喽",this.poptime); }, popppp:function(){ Popup.setPopup(this,"info","hello,哈喽",this.poptime); } } };
布局：
<view> <view class="btn"> <button @click="pop()">成功</button> <button @click="popp()">失败</button> <button @click="poppp()">警告</button> <button @click="popppp()">信息</button> </view> <mpopup :show="ispop" :types="types" :span="span"></mpopup> </view>
这样就OK了
当时思路就是用属性来控制弹窗，组件就监听传来的属性值的变化做出改变。
用class来控制弹窗的进入和退出动画