日本阿v片在线播放免费,成人国产片视频在线观看,日韩黄片毛片在线观看,一区亚洲电影,琪琪秋霞午夜av影视在线,中文字幕在线视频不卡,最新大伊香蕉精品视频在线,亚洲AV无码日韩一区二区乱 

  
      
    

      

	
      
		
      
			
      
				
      【一分鐘閱讀】關于組件化，我有一些小建議
      
				
      
					
       2019-10-3      seo達人      
      
					
					
      
						
					
      
				
      
				
			
      
			
      
				
      隨著公司項目多端化，開發所需要注意的細節越來越多。我在會議上提出組件化開發，希望能把業務細節與技術細節區分開來。

      


      
 一、組件化流程

      
首先我們需要找到切入點，我采取的是通過模仿element-ui的組件，先讓我們美工小姐姐，照著element的組件庫描繪一版我們自己的組件，內容包括 顏色、字體、按鈕、圖片 等基礎UI組件。這就是我們組件化第一步，UI 組件形成。

      


      
其次是業務組件的補充，這方面我和項目經理還有其他前端一起商討，將跨場景跨頁面同樣效果的部分給抽象成組件。組件化第二步，業務組件形成。

      


      
然后就是漫長的更迭與組件補充。

      


      
二、組件化細節處理

      
2.1 全局文件布置

      
無論是UI組件還是業務組件，都包含著class與css。

      


      
變量值我選擇存放在兩個公共文件內：

      


      
一個負責管理class名，諸如 x-btn-s，x-btn-m，x-btn-l，x-pic-s，聲明規則：公司名-組件名-尺寸（業務場景）。

      


      
另一個負責管理 css 變量值， 諸如 $-font-s： 12px，$-font-m：16px； $-font-l：24px；$-background-warn: #f00；聲明規則：$-相關樣式-大小（顏色）。

      


      
再通過 exports 與 import 對全局文件進行調用。

      


      
2.2 組件的多樣化使用

      
通過全局文件的配置，我們對組件的調用從一對一調用變成了一對多調用。如下：

      


      
使用全局變量前，我們只能通過以下形式調用

      


      
<x-button/>

      
現在我們可以通過：class的形式調用<x-button/>的多種形態，如下：

      


      
<x-button type="$-x-btn-warn' size-'$-x-btn-s'>注冊</x-button>

      
當然，我們還需要在組件內部定義好:class部分，配置如下：

      


      
<template>

      
  <button

      
    class="x-button"

      
    :class="[

      
      type ? 'x-button--' + type : '',

      
      buttonSize ? 'x-button--' + buttonSize : '',

      
    ]"

      
  >

      
  </button>

      
</template>

      
<script>

      
  export default {

      
    name: 'XButton',

      
    props: {

      
      type: {

      
        type: String,

      
        default: 'default'

      
      },

      
      size: String,

      
    },

      
  };

      
</script>

      
2.3 slot 插槽的配置與使用

      
合理使用 slot 插槽，例如：組件內嵌組件，組件內嵌文字，內嵌 iconfont 等；

      


      
三、 組件的配置

      
在 app.js 中使用 vue.use(components) 對組件進行配置，再在相關頁面進行引用。

      
藍藍設計( m.jjddy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
      				
      
								
			
      
		
      
		
		
	
      


      
    
  
      
    
      日歷
      
    
      
        
      
        
    
      
  
      
    
    
      
      
      鏈接
      
      
        
                
      
    
      
    
      
      
      個人資料
      
      
      
          
      
                    
      
          
      藍藍設計的小編
          http://m.jjddy.com
      
      
      
    
      
    
      
      
      存檔