Ⅰ 如何通過組件的屬性props設置樣式
在多個選擇符應用於同一個元素上那麼Specificity值高的最終獲得優先順序。選擇符Specificity值列表：選擇符語法示例特性通配選擇符**{width:560px;}0,0,0,0類型選擇符E1td{font-size:12px;}0,0,0,1偽元素選擇符:first-line:first-line{font-size:12px;}0,0,0,1偽類選擇符:link:link{font-size:12px;}0,0,1,0屬性選擇符[attr][title]{color:blue;}0,0,1,0ID選擇符#ID#test{font-size:12px;}0,1,0,0類選擇符E1.className.test{color:blue;}0,0,1,0子對象選擇符E1>E2body>p{color:blue;}E1+E2相鄰選擇符E1+E2div+p{color:blue;}E1+E2選擇符分組E1,E2,E3.td1,a,body{color:blue;}E1+E2+E3包含選擇符E1E2tabletd{color:blue;}E1+E2規則：1.行內樣式優先順序Specificity值為1,0,0,0，高於外部定義。如：test外部定義指經由或標簽定義的規則；2.!important聲明的Specificity值最高；3.Specificity值一樣的情況下，按CSS代碼中出現的順序決定，後者CSS樣式居上；4.由繼續而得到的樣式沒有specificity的計算，它低於一切其他規則(比如全局選擇符*定義的規則)。演算法：當遇到多個選擇符同時出現時候按選擇符得到的Specificity值逐位相加，{數位之間沒有進制比如說：0,0,0,5+0,0,0,5=0,0,0,10而不是0,0,1,0}就得到最終計算得的specificity，然後在比較取捨時按照從左到右的順序逐位比較———-以上內容都是權重理論上的知識，按理說支持css2.1的瀏覽器應該都遵循———-IE6和IE7卻不完全是那麼回事；這里說的IE7排除掉IE8的兼容模式。12345678a{/*權重為[0,0,1]*/ color:#00f; background-color:#ff0;}a:hover{/*權重為[0,1,1]*/ color:#ff0; background-color:#00f;}藍色字，黃色背景，滑鼠懸停的時候顏色顛倒接下來，在添加規則12345pa.cl1{/*權重為[0,1,2]*/ color:#f00; background-color:#0ff;}紅色字，淺綠色背景，權重為[0,1,2],比第一條權重高在IE6下」normal」(nothover)的值被覆蓋了,但是沒有覆蓋」hover」的值.換句話說，權重為[0,1,1]的」hover」依然生效,它沒有被比他權重高的pa.cl1[0,1,2]所覆蓋(但是沒有定義:hover偽類)12345.cl2a.cl3{/*權重為[0,2,1]*/ color:#f00; background-color:#0ff;}紅色字，淺綠色背景，權重為[0,2,1],比第一條規則」normal」和」hover」都要高現在在IE6下不管是」normal」還是」hover」的值都被覆蓋了,這時候權重[0,2,1]完全覆蓋了權重[0,1,1]12345divp:hover{/*權重為[0,1,2]*/ color:#f00; background-color:#0ff;}當滑鼠懸停在鏈接上的時候是紅色字，淺綠色背景,權重為[0,1,2],比第一條」hover」的權重[0,1,1]高第一條:hover完全被覆蓋,IE6也是一樣.這個例子的權重[0,1,2]和第二個例子的權重是一樣的，但是它多了對偽類:hover的定義就能完全覆蓋第一條」hover」規則,而第二個例子就不會覆蓋演示地址：IE6/Win:關於偽類:hover的權重問題IE6/win下偽類:visited也存在類似問題，不再贅述，演示地址：IE6-/Win:關於偽類:visited的權重問題還有其他一些，在IE67下都會產生錯誤權重的情況，其他瀏覽器有條件的請幫忙測試一下：1234567p.c12{/*權重為[0.1.1]*/ color:#c00;}div.c12{/*權重為[0.1.1]*/ color:#090;}el.class(red),el.class(green) (錯誤顯示IE67/Win,IE/MacandOp7-顯示為紅色)如果順序換過來el.class(red),el.class(green)，就是正確的了1234567div.c24{/*權重為[0.1.1]*/ color:#009900;}.c23p{/*權重為[0.1.1]*/ color:#CC0000;}.classel(red),el.class(green) (錯誤顯示IE67/Win,IE/MacandOp7-顯示為紅色)如果順序換過來el.class(red),.classel(green)，就是正確的了1234567div#c28{/*權重為[1.0.1]*/ color:#009900;}#c27p{/*權重為[1.0.1]*/ color:#CC0000;}#idel(red),el#id(green) (錯誤顯示IE67/Win,IE/MacandOp7-顯示為紅色)如果順序換過來el#id(red),#idel(green)，就是正確的了:first-letter使用的比較少，這個例子就不寫了12345678p.c31{/*權重為[0.1.1]*/ color:#c00;/*red*/}bodyp.c31{/*權重為[0.1.2]*/ color:#090;/*green*/ color:miao; /*故意的錯誤*/}在IE67下會錯誤顯示紅色演示地址：其他權重錯誤
Ⅱ 前端通用組件設計
調用組件庫的API相信很多人都會用，但是如何封裝一個高復用的組件並不是每個人都能做到，而這也是檢驗一個前端開發人員的一個標准。
說到開發組件，首先需要考慮一個問題，一個可復用的組件都需要具備哪些必要條件。
1. 細粒度考量
看過設計模式的朋友應該有了解過很多設計原則，其中一個就是 單一職責原則 ，這個原則放在開發組件中也同樣適用。在原則上一個組件就只負責一件事，這就是單一原則所帶來的好處也非常明顯，就是可以更大可能的復用組件。但如果職責過於單一，也會造成組件碎片化嚴重，過於抽象。
因此我們需要考慮，所謂的單一職責原則是建立在可復用的基礎上的。否則，可以做為獨立組件的內部組件進行使用。
2. 組件通用性考量
組件設計之初是為了當時的頁面設計進行封裝設計的，那麼之後的頁面設計極大可能是與之前不同的，那麼之前設計的組件就不能用了。
而一旦發生這樣的情況，就說明我們之前所設計的組件是不通用的，需要重新設計了。就像Antd組件庫那樣，預留了dropdownRender進行組件渲染。
通用性的設計就代表著將放棄對DOM的操作權，暴露給開發者進行操作，組件開發者本身只負責底層邏輯和基本的DOM結構。這也是開發通用型組件的秘訣之一。
3. 技術選型
css存在著許多的弊端，例如樣式易沖突（沒有作用域的概念）、書寫繁瑣（不支持嵌套）、缺少變數（不便於一件更換主題）等等。而解決這些問題的方案也是層出不窮，從最早的css預處理，到後來的Postcss，再到後來的styled-compontent，各種方式任君選擇。
4. 打包工具
產品的設計思想固然是核心，但是也需要一堆輔助工具來來幫助我們開發，例如編譯工具、測試工具、打包工具。
說到打包工具，就不得不提一下如今非常火爆的，需要配置工程師專門配置的webpack了。但是他也有一個強大的競爭對手 rollup。
rollup更適合用於組件庫的打包，優勢如下：
設計一個輪播圖組件
學以致用，學了就肯定要實踐一下。輪播圖是一個比較常見的組件，每個組件庫中都封裝的有，接下來我們也來介紹一下如何設計一個輪播圖組件。
1. 輪播圖原理
通常情況下我們使用輪播圖是這樣編寫的
那麼為什麼放入了四個div盒子卻只顯示一個呢，這是因為可視區域是固定的，只需要移動div盒子就可以顯示出後面的盒子，這樣就達到了輪播的效果。
為了是觀看效果更好，我們都會隱藏掉可視區域之外的內容，這樣就是大家經常看到的輪播圖了。組件就可以這樣設計：
可以通過transform: translateX()不斷改變SlideList的位置，就可以達到輪播的效果了。
2. 輪播圖的基礎實現
知道了基礎原理就可以進行組件的實現了，這里以移動端輪播圖為例。
首先，獲取移動端可視窗口的寬度。
------- 未完待續 --------
Ⅲ Vue怎麼修改第三方組件屬性
解決方法：
1.去掉<style>標簽的scoped 屬性，即使用全局樣式
2.使用深度作用選擇器/deep/，使用方式：將/deep/ + space空格 添加在第三方樣式類的前面。如果是使用less語法的話，直接在第三方樣式的最外一層添加一遍/deep/就可以了
注意事項：如果/deep/添加多了，google瀏覽器下會報警告，需要打開控制台的Elements，ctrl + f查找/deep/，搜索到了的話，需要在對應的css位置刪除掉
/deep/ .classnamefromother {
/*css樣式代碼...*/
}
Ⅳ 墨刀里如何編輯組件屬性
選中組件，右側便會呈現出組件的設置面板。
在面板里可以編輯組件的各種屬性，比如位置、大小、顏色、透明度、陰影、動效等等。
選中多個組件，可以編輯它們的布局方式，比如「左對齊」、「右對齊」、「居中對齊「、「水平等間距」、「垂直等間距」…
Ⅳ 如何為第三方vue組件進行自定義/拓展屬性方法
最近有個需求,項目用的IVIEW4 UI.
問題:drawer組件在選中文本移動到蒙層松開會是drawer關閉(組件本身設計問題).
需求:用戶在選中文本時幅度很大拖動到蒙層,drawer不關閉.
(抱怨兩句,哪個傻逼腦子有坑選文本要那麼大幅度?有空配張該用戶使用設想圖)
項目已經很多地方用到了,第一想到的最好修改的方法是,對第三方組件的修改，不可能直接修改源碼。想了想能否從引入的時候進行修改,著手行動.發現是可行的。
特別注意：
selectText.type=='Range'
研究時發現,selectText 會默認拿到第一個label標簽,需要通過type再進一步判斷
Ⅵ 怎麼動態的設置組件的屬性
解決過程：1 首先嘗試了在動態控制項的存放容器進行更改，但是被否決了，畢竟除了文本框和按鈕還有一個span標簽，這樣以設置說不定都弄的錯位了。
2 接著嘗試直接在控制項創建的時候設置屬性，利用element.setAttribute（"class","")和element.setAttribute("classname","")來弄結果仍然沒效果.
Ⅶ 如何通過組件的屬性props設置樣式
在組件的內部添加了mapHeight屬性，如下：props:{ // 地圖在該視圖上的高度 mapHeight:{ type: Number, default: 200 }}
然後要在地圖的div中通過樣式設置該div的高度但是根據vue中的官方說法，用樣式對象的方式更好
<div id="allmap" v-bind:style="mapStyle"></div>
同時在data屬性中添加如下屬性：data: function() { return { mapStyle: { width: '100%', height: this.mapHeight + 'px' } } },
Ⅷ 如何通過組件的屬性props設置樣式
在該組件的內部添加了mapHeight屬性，如下：
props:{
// 地圖在該視圖上的高度
mapHeight:{
type: Number,
default: 200
}
}
然後要在地圖的div中通過樣式設置該div的高度，，可以有以下三種方式：
第一種：
<div id="allmap" style="width: 100%; height: {{mapHeight}}px"></div>
使用這種方式在chrome中沒問題，但是如果打開chrome的控制台就會發現vue給出如下警告，也就是在ie中會有問題。
vue.common.js?e881:1019
[Vue warn]: style="width: 100%; height: {{mapHeight}}px": interpolation
in "style" attribute will cause the attribute to be discarded in
Internet Explorer. Use v-bind:style instead.
第二種：
關於如何使用綁定方式來設置樣式，可以參考：
http://cn.vuejs.org/guide/class-and-style.html#u5BF9_u8C61_u8BED_u6CD5-1
然後我設置的樣式如下：
<div id="allmap" :style="{width: '100%', height: mapHeight + 'px'}"></div>
經過驗證是OK的，可以正常顯示。
第三種：
但是根據vue中的官方說法，
http://cn.vuejs.org/guide/class-and-style.html#u5BF9_u8C61_u8BED_u6CD5-1
使用樣式對象的方式更好
<div id="allmap" v-bind:style="mapStyle"></div>
同時在data屬性中添加如下屬性：
data: function() {
return {
mapStyle: {
width: '100%',
height: this.mapHeight + 'px'
}
}
},
所以，最終選擇第三種方式。
Ⅸ 如何更改CSS屬性，取消對父級元素的屬性繼承
在div里給它加上一個類，給新加的類寫樣式。
繼承在CSS中是一種自然的行為，我們甚至不需要考慮是否可以這樣做，但它有其局限性。
首先，有些屬性不能被繼承。這是沒有原因的，因為它是這樣建立的。例如，您都知道，border屬性用於設置元素的邊界，因此它沒有繼承。
如下圖所示，如果繼承了border屬性，那麼文檔將看起來很奇怪，除非您採取其他措施來關閉border的繼承屬性。大多數邊框屬性，如填充、空白、背景和邊框，都不是繼承的。
(9)如何更改前端組件屬性擴展閱讀：
CSS中的樣式優先原則：
規則1：當由於繼承而發生樣式沖突時，最近的祖先獲勝（最近的原則）。
Strong分別從body和p繼承了color屬性，但是因為p在繼承樹中更接近Strong，所以Strong中的文本最終繼承了p的藍色。
規則2：當繼承的樣式與直接指定的樣式沖突時，直接指定的樣式獲勝（最直接的原則）。
強大的｛顏色：紅色；｝
根據規則二，用strong表示的文本以紅色結尾。
規則3：當直接指定的樣式沖突時，具有最高樣式權重的樣式將獲勝。
該值取決於樣式的選擇，權重定義見下表。
CSS選擇器的重量
標簽選擇器1
類選擇器10
ID選擇器100
內聯樣式1000
偽元素（：第一個子元素，等等
偽類（：鏈接等
可以看到，行內樣式的權重是>、>ID選擇器、>、b>類選擇器、>、>標簽選擇器，除了子類選擇器外，權重是每個權重的和，比如「# nav」。電流a「重100 + 10 + 1 = 111」。
Ⅹ js 怎麼修改一個組件的修改validate 屬性
這個你在要展示錯誤信息位置先加個定位符（div id="err"） 然後當驗證不通過的時候把信息填充進去 $（"#err"）.append(error)這樣信息就能在那地方顯示了