Ⅰ 如何通过组件的属性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)这样信息就能在那地方显示了