Vue三方组件的使用

Mint-UI的使用

Mint-UI主要用于Vue写移动端的三方组件

Mint-ui所遇到的困惑：看完官方文档后，对写移动端的弹框，提示语很适应，官方展示的例子对于手机屏幕的弹框刚刚好，但是按照文档的例子引入到自己的项目中，弹框提示框展示的特别小，功能很好，样式却不好改。
解决方案：按照官方文档引入到自己的项目中，采用deep样式穿透的方式，可以改样式
注意事项：Vue单页面会加入scope来控制本页面的样式，如果要修改样式，需要再创一个全局style ，对具体的样式进行改动

以下是代码展示

弹框

// Toast({
				// 	message: '提交错误',
				// 	position: 'Middle',
				// 	className: 'tipsss'
				// });

 .tipsss{
	  width: 500px;
	  height: 100px;
	  
  }
	.tipsss .mint-toast-text{
		font-size: 30px !important;
		text-align: center;
		line-height: 80px;
		}

提示框

      this.$messagebox({
				              title: '提示',
				              message: '确定删除该选项吗',
				              showCancelButton: true,
				              confirmButtonText:"确定",
				              cancelButtonText:"取消"
				            }).then(action => {
				              if(action == 'confirm'){
				                console.log('确定')
				              }else{
				                console.log('取消')
				              }
				          })

样式的改动

.mint-msgbox > //父元素
	 .mint-msgbox-header >.mint-msgbox-title{
		 font-size: 30px;
	 }
		// height: 100px;
	
	.mint-msgbox-content{  //子元素
		height: 80px;
	}
   .mint-msgbox-content > .mint-msgbox-message{
	   line-height: 80px;
	   font-size: 24px;
   }
  .mint-msgbox > .mint-msgbox-btns{
	   height: 80px;
   }
	.mint-msgbox-btns >.mint-msgbox-btn{
		font-size: 30px;
	}

以上是对某些样式进行改动，其他的类似