zoukankan      html  css  js  c++  java
  • uniapp

     

    sunui-msg  顶部消息提醒

     

    v1.0.0 于 2020.01.14更新:如果消息提示直接进入页面就显示,要在mounted生命周期或者在onLoad生命周期使用this.$nextTick

     

    参数介绍(通过ref标识):

    1. text:文本提示内容/默认空

    2. type:文本提示背景颜色/默认无

    3. sec:点击显示时间/默认2秒

     

     

    示例代码:

     

     

    <template>
    	<view class="content">
    		<image class="logo" src="/static/logo.png" @click="openMsg"></image>
    		<sunui-msg ref="msg"></sunui-msg>
    	</view>
    </template>
    
    <script>
    	import sunUiMsg from '@/components/sunui-msg/sunui-msg.vue';
    	export default {
    		data() {
    			return {
    				title: 'Hello'
    			}
    		},
    		mounted() {
    
    		},
    		components: {
    			'sunui-msg': sunUiMsg
    		},
    		onLoad() {
    
    		},
    		methods: {
    			openMsg() {
    				this.$refs.msg.show({
    					text: '提交失败',
    					type: 'error',
    					sec: 2
    				});
    				
    				// this.$refs.msg.show({
    				// 	text: '提交成功',
    				// 	type: 'success',
    				// 	sec: 2
    				// });
    				
    				
    				// 关于自定义弹出颜色可以在sunui-msg.vue样式扩展也可以在App.vue
    				// .sunui-color-success
    				// .sunui-color-error
    				// 类似以上形式扩展
    			}
    		}
    	}
    </script>
    
    <style>
    
    </style>
    

      

     

      

     

      

    点击下载示例:sunui-msg

  • 相关阅读:
    python常用库
    python多线程
    python内存泄漏
    用python实现js语言里的特性
    nginx + uwsgi
    mysql语句
    urllib模块
    提取数据xpath,re,css
    selenium模块
    脱壳
  • 原文地址:https://www.cnblogs.com/cisum/p/12192922.html
Copyright © 2011-2022 走看看