transform:skewX(30deg)
扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变
元素的形状。skew()函数不会旋转，而只会改变元素的形状。
一个参数：表示水平方向的倾斜角度；
两个参数：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度
气泡需要两个组合
:class="[prefixCls + '-rel']"v-el:reference
@click="handleClick"
-@mousedown="handleFocus"
-@mouseup="handleBlur">
+@mousedown="handleFocus(false)"
+@mouseup="handleBlur(false)">
<slot></slot>
</div>
<div :class="[prefixCls + '-popper']" :style="styles" transition="fade" v-el:popper v-show="visible">
@@ -91,7 +91,8 @@
data () {
return {
prefixCls: prefixCls,
-showTitle: true
+showTitle: true,
+isInput: false
}
},
computed: {
@@ -133,14 +134,14 @@
}
this.visible = false
},
-handleFocus () {
-if (this.trigger !== 'focus' || this.confirm) {
+handleFocus (fromInput = true) {
+if (this.trigger !== 'focus' || this.confirm || (this.isInput &&!fromInput)) {
return false
}
this.visible = true
},
-handleBlur () {
-if (this.trigger !== 'focus' || this.confirm) {
+handleBlur (fromInput = true) {
+if (this.trigger !== 'focus' || this.confirm || (this.isInput &&!fromInput)) {
return false
}
this.visible = false
@@ -164,12 +165,41 @@
ok () {
this.visible = false
this.$emit('on-ok')
+},
+getInputChildren () {
+const $input = this.$els.reference.querySelectorAll('input')
+const $textarea = this.$els.reference.querySelectorAll('textarea')
+let $children = null
+
+if ($input.length) {
+$children = $input[0]
+} else if ($textarea.length) {
+$children = $textarea[0]
+}
+
+return $children
}
},
-ready () {
+compiled () {
if (!this.confirm) {
this.showTitle = this.$els.title.innerHTML != `<div class="${prefixCls}-title-inner"></div>`
}
+// if trigger and children is input or textarea,listen focus &blur event
+if (this.trigger === 'focus') {
+const $children = this.getInputChildren()
+if ($children) {
+$children.addEventListener('focus', this.handleFocus, false)
+$children.addEventListener('blur', this.handleBlur, false)
+this.isInput = true
+}
+}
+},
+beforeDestroy () {
+const $children = this.getInputChildren()
+if ($children) {
+$children.removeEventListener('focus', this.handleFocus, false)
+$children.removeEventListener('blur', this.handleBlur, false)
+}
}
}
</script>
<div class="send"><div class="arrow"></div>
</div>
<style type="text/css">
body {
background:#4D4948
}
.send {
position:relative
width:150px
height:35px
background:#F8C301
border-radius:5px /* 圆角 */
margin:30px auto 0
}
.send .arrow {
position:absolute
top:5px
right:-16px /* 圆角的位置需要细心调试哦 */
width:0
height:0
font-size:0
border:solid 8px
border-color:#4D4948 #4D4948 #4D4948 #F8C301
}
</style>
