2、e是 element 的简写函数,@include e(icon)调用,$element传入 icon,在上面b函数已经将$B赋值为全局变量el-button,$currentSelector拼接后得到.el-button__icon,@at-root是跳出嵌套,和.el-button同级,而不是.el-button .el-button-icon拼接在后面 @mixin e($element) { $E: $element !global; $selecto...
cursor: pointer; user-select: none; // 不让选中文字 transition: all 0.3s; font-size: 14px; } // 悬浮效果 .myButton:hover { background-color: rgba(0, 0, 0, 0.2); } // 按中效果 .myButton:active { background-color: rgba(0, 0, 0, 0.3); } 笔者这里是将悬浮的效果和按中的效...
<button :class="'el-button el-button--' + type" @click="triggerClick"> type是外部组件传进来的参数,这边就直接字符串拼接了。然后会对应到具体的class /*el-button组件样式*/ .el-button { display: inline-block; line-height: 1;white-space: nowrap; cursor: pointer; background: #fff; border:...
<button :class="'el-button el-button--' + type" @click="triggerClick"> 1. type是外部组件传进来的参数,这边就直接字符串拼接了。然后会对应到具体的class /*el-button组件样式*/ .el-button { display: inline-block; line-height: 1; white-space: nowrap; cursor: pointer; background: #fff; ...
<button:class="'el-button el-button--' + type"@click="triggerClick"> type是外部组件传进来的参数,这边就直接字符串拼接了。然后会对应到具体的class /*el-button组件样式*/.el-button{display: inline-block;line-height:1;white-space: nowrap;cursor: pointer;background:#fff;border:1pxsolid#dcdfe6...
<button :class="'el-button el-button--' + type" @click="triggerClick"> type是外部组件传进来的参数,这边就直接字符串拼接了。然后会对应到具体的class /*el-button组件样式*/.el-button {display: inline-block;line-height: 1;white-space: nowrap;cursor: pointer;background: #fff;border: 1px sol...
element button自定义图标 实现效果 如图,我想实现二维码的图片可以根据不同状态进行disabled的切换,本来是用两个img实现的,但是img还需要设置图片不可点击,虽然css使用cursor:no-drop也能实现,后来突然想到button就默认支持disabled呀,我只用把这个二维码的图片设置为button的自定义图标,我就可以使用button的disabled去控制...
cursor: not-allowed; } 1. 2. 3. 4. 用js写禁用效果 如果我们再点击肉夹馍,我们会发现,打印出来的e的内容中的disabled的值就位true,所以发现规律了,就可以做控制了。即为:只有当e.disabled的值为false的时候(说明未被禁用),那么我们才在对应的回调中做相关的事情,否则就忽略 ...
.el-button { &:active { color: @primaryColor; border-color: @primaryColor; outline: 0; } &:focus { color: @primaryColor; border-color: #f7dccc; background-color: #f7dccc; } &:hover { color: @primaryColor; border-color: #f7dccc; background-color: #f7dccc; } } 3. dropdown...
BUTTONELEMENT.click BUTTONELEMENT.cursor BUTTONELEMENT.down BUTTONELEMENT.downToolTip BUTTONELEMENT.index BUTTONELEMENT.mappingColor BUTTONELEMENT.sticky BUTTONELEMENT.upToolTip FFWDELEMENT NEXTELEMENT PAUSEELEMENT PLAYELEMENT PREVELEMENT REWELEMENT STOPELEMENT ...