提交 f93866ba 编写于 作者: 雪洛's avatar 雪洛

fix: button组件openType失效的Bug

上级 4a15e384
<script>
import {
hover,
emitter,
listeners
} from 'uni-mixins'
import { hover, emitter, listeners } from 'uni-mixins'
export default {
name: 'Button',
mixins: [hover, emitter, listeners],
......@@ -39,6 +35,10 @@ export default {
// 只有这几个可取值,其它都是非法的。
return ~['', 'submit', 'reset'].indexOf(value)
}
},
openType: {
type: String,
default: ''
}
},
data () {
......@@ -56,10 +56,54 @@ export default {
}
// TODO 通知父表单执行相应的行为
if (this.formType) {
this.$dispatch('Form', this.formType === 'submit' ? 'uni-form-submit' : 'uni-form-reset', {
this.$dispatch(
'Form',
this.formType === 'submit' ? 'uni-form-submit' : 'uni-form-reset',
{
type: this.formType
}
)
return
}
if (this.openType === 'feedback') {
const feedback = plus.webview.create(
'https://service.dcloud.net.cn/uniapp/feedback.html',
'feedback',
{
titleNView: {
titleText: '问题反馈',
autoBackButton: true,
backgroundColor: '#F7F7F7',
titleColor: '#007aff'
}
}
)
feedback.show('slide-in-right')
feedback.getTitleNView &&
setTimeout(function () {
let title = feedback.getTitleNView()
if (title) {
title.drawText(
'发送',
{
top: 0,
left: window.innerWidth - 60,
width: 60,
height: 44
},
{
color: '#007aff',
weight: 'bold'
}
)
title.addEventListener('click', function (e) {
feedback.evalJS(
'mui&&mui.trigger(document.getElementById("submit"),"tap")'
)
})
}
}, 100)
}
},
_bindObjectListeners (data, value) {
if (value) {
......@@ -83,10 +127,13 @@ export default {
})
}
if (this.hoverClass && this.hoverClass !== 'none') {
return createElement('uni-button', this._bindObjectListeners({
return createElement(
'uni-button',
this._bindObjectListeners(
{
class: [this.hovering ? this.hoverClass : ''],
attrs: {
'disabled': this.disabled
disabled: this.disabled
},
on: {
touchstart: this._hoverTouchStart,
......@@ -94,17 +141,28 @@ export default {
touchcancel: this._hoverTouchCancel,
click: this._onClick
}
}, $listeners), this.$slots.default)
},
$listeners
),
this.$slots.default
)
} else {
return createElement('uni-button', this._bindObjectListeners({
return createElement(
'uni-button',
this._bindObjectListeners(
{
class: [this.hovering ? this.hoverClass : ''],
attrs: {
'disabled': this.disabled
disabled: this.disabled
},
on: {
click: this._onClick
}
}, $listeners), this.$slots.default)
},
$listeners
),
this.$slots.default
)
}
},
listeners: {
......@@ -114,7 +172,7 @@ export default {
}
</script>
<style>
uni-button {
uni-button {
position: relative;
display: block;
margin-left: auto;
......@@ -130,15 +188,15 @@ export default {
-webkit-tap-highlight-color: transparent;
overflow: hidden;
color: #000000;
background-color: #F8F8F8;
background-color: #f8f8f8;
cursor: pointer;
}
}
uni-button[hidden] {
uni-button[hidden] {
display: none !important;
}
}
uni-button:after {
uni-button:after {
content: " ";
width: 200%;
height: 200%;
......@@ -152,148 +210,148 @@ export default {
transform-origin: 0 0;
box-sizing: border-box;
border-radius: 10px;
}
}
uni-button[native] {
uni-button[native] {
padding-left: 0;
padding-right: 0;
}
}
uni-button[native] .uni-button-cover-view-wrapper {
uni-button[native] .uni-button-cover-view-wrapper {
border: inherit;
border-color: inherit;
border-radius: inherit;
background-color: inherit;
}
}
uni-button[native] .uni-button-cover-view-inner {
uni-button[native] .uni-button-cover-view-inner {
padding-left: 14px;
padding-right: 14px;
}
}
uni-button uni-cover-view {
uni-button uni-cover-view {
line-height: inherit;
white-space: inherit;
}
}
uni-button[type=default] {
uni-button[type="default"] {
color: #000000;
background-color: #F8F8F8;
}
background-color: #f8f8f8;
}
uni-button[type=primary] {
color: #FFFFFF;
uni-button[type="primary"] {
color: #ffffff;
background-color: #007aff;
}
}
uni-button[type=warn] {
color: #FFFFFF;
background-color: #E64340;
}
uni-button[type="warn"] {
color: #ffffff;
background-color: #e64340;
}
uni-button[disabled] {
uni-button[disabled] {
color: rgba(255, 255, 255, 0.6);
cursor: not-allowed;
}
}
uni-button[disabled][type=default],
uni-button[disabled]:not([type]) {
uni-button[disabled][type="default"],
uni-button[disabled]:not([type]) {
color: rgba(0, 0, 0, 0.3);
background-color: #F7F7F7;
}
background-color: #f7f7f7;
}
uni-button[disabled][type=primary] {
uni-button[disabled][type="primary"] {
background-color: rgba(0, 122, 255, 0.6);
}
}
uni-button[disabled][type=warn] {
background-color: #EC8B89;
}
uni-button[disabled][type="warn"] {
background-color: #ec8b89;
}
uni-button[type=primary][plain] {
uni-button[type="primary"][plain] {
color: #007aff;
border: 1px solid #007aff;
background-color: transparent;
}
}
uni-button[type=primary][plain][disabled] {
uni-button[type="primary"][plain][disabled] {
color: rgba(0, 0, 0, 0.2);
border-color: rgba(0, 0, 0, 0.2);
}
}
uni-button[type=primary][plain]:after {
uni-button[type="primary"][plain]:after {
border-width: 0;
}
}
uni-button[type=default][plain] {
uni-button[type="default"][plain] {
color: #353535;
border: 1px solid #353535;
background-color: transparent;
}
}
uni-button[type=default][plain][disabled] {
uni-button[type="default"][plain][disabled] {
color: rgba(0, 0, 0, 0.2);
border-color: rgba(0, 0, 0, 0.2);
}
}
uni-button[type=default][plain]:after {
uni-button[type="default"][plain]:after {
border-width: 0;
}
}
uni-button[plain] {
uni-button[plain] {
color: #353535;
border: 1px solid #353535;
background-color: transparent;
}
}
uni-button[plain][disabled] {
uni-button[plain][disabled] {
color: rgba(0, 0, 0, 0.2);
border-color: rgba(0, 0, 0, 0.2);
}
}
uni-button[plain]:after {
uni-button[plain]:after {
border-width: 0;
}
}
uni-button[plain][native] .uni-button-cover-view-inner {
uni-button[plain][native] .uni-button-cover-view-inner {
padding: 0;
}
}
uni-button[type=warn][plain] {
uni-button[type="warn"][plain] {
color: #e64340;
border: 1px solid #e64340;
background-color: transparent;
}
}
uni-button[type=warn][plain][disabled] {
uni-button[type="warn"][plain][disabled] {
color: rgba(0, 0, 0, 0.2);
border-color: rgba(0, 0, 0, 0.2);
}
}
uni-button[type=warn][plain]:after {
uni-button[type="warn"][plain]:after {
border-width: 0;
}
}
uni-button[size=mini] {
uni-button[size="mini"] {
display: inline-block;
line-height: 2.3;
font-size: 13px;
padding: 0 1.34em;
}
}
uni-button[size=mini][native] {
uni-button[size="mini"][native] {
padding: 0;
}
}
uni-button[size=mini][native] .uni-button-cover-view-inner {
uni-button[size="mini"][native] .uni-button-cover-view-inner {
padding: 0 1.34em;
}
}
uni-button[loading]:not([disabled]){
uni-button[loading]:not([disabled]) {
cursor: progress;
}
}
uni-button[loading]:before {
uni-button[loading]:before {
content: " ";
display: inline-block;
width: 18px;
......@@ -302,83 +360,83 @@ export default {
-webkit-animation: uni-loading 1s steps(12, end) infinite;
animation: uni-loading 1s steps(12, end) infinite;
background-size: 100%;
}
}
uni-button[loading][type=primary] {
uni-button[loading][type="primary"] {
color: rgba(255, 255, 255, 0.6);
background-color: #0062cc;
}
}
uni-button[loading][type=primary][plain] {
uni-button[loading][type="primary"][plain] {
color: #007aff;
background-color: transparent;
}
}
uni-button[loading][type=default] {
uni-button[loading][type="default"] {
color: rgba(0, 0, 0, 0.6);
background-color: #DEDEDE;
}
background-color: #dedede;
}
uni-button[loading][type=default][plain] {
uni-button[loading][type="default"][plain] {
color: #353535;
background-color: transparent;
}
}
uni-button[loading][type=warn] {
uni-button[loading][type="warn"] {
color: rgba(255, 255, 255, 0.6);
background-color: #CE3C39;
}
background-color: #ce3c39;
}
uni-button[loading][type=warn][plain] {
uni-button[loading][type="warn"][plain] {
color: #e64340;
background-color: transparent;
}
}
uni-button[loading][native]:before {
uni-button[loading][native]:before {
content: none;
}
}
.button-hover {
.button-hover {
color: rgba(0, 0, 0, 0.6);
background-color: #DEDEDE;
}
background-color: #dedede;
}
.button-hover[plain] {
.button-hover[plain] {
color: rgba(53, 53, 53, 0.6);
border-color: rgba(53, 53, 53, 0.6);
background-color: transparent;
}
}
.button-hover[type=primary] {
.button-hover[type="primary"] {
color: rgba(255, 255, 255, 0.6);
background-color: #0062cc;
}
}
.button-hover[type=primary][plain] {
.button-hover[type="primary"][plain] {
color: rgba(26, 173, 25, 0.6);
border-color: rgba(26, 173, 25, 0.6);
background-color: transparent;
}
}
.button-hover[type=default] {
.button-hover[type="default"] {
color: rgba(0, 0, 0, 0.6);
background-color: #DEDEDE;
}
background-color: #dedede;
}
.button-hover[type=default][plain] {
.button-hover[type="default"][plain] {
color: rgba(53, 53, 53, 0.6);
border-color: rgba(53, 53, 53, 0.6);
background-color: transparent;
}
}
.button-hover[type=warn] {
.button-hover[type="warn"] {
color: rgba(255, 255, 255, 0.6);
background-color: #CE3C39;
}
background-color: #ce3c39;
}
.button-hover[type=warn][plain] {
.button-hover[type="warn"][plain] {
color: rgba(230, 67, 64, 0.6);
border-color: rgba(230, 67, 64, 0.6);
background-color: transparent;
}
}
</style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册