Skip to content

U
uni-app

wzj-java / uni-app
与 Fork 源项目一致

Fork自 DCloud / uni-app

通知 1
Star 1
Fork 0
U
uni-app

体验新版 GitCode，发现更多精彩内容 >>

提交 f93866ba 编写于 作者: 雪洛's avatar 雪洛
浏览文件
操作

fix: button组件openType失效的Bug

上级 4a15e384
隐藏空白更改
内联 并排
Showing with 354 addition and 296 deletion
src/core/view/components/button/index.vue
浏览文件 @ f93866ba
<script> <script>
import { import { hover, emitter, listeners } from 'uni-mixins'
hover,
emitter,
listeners
} from 'uni-mixins'
export default { export default {
name: 'Button', name: 'Button',
mixins: [hover, emitter, listeners], mixins: [hover, emitter, listeners],
...@@ -39,6 +35,10 @@ export default { ...@@ -39,6 +35,10 @@ export default {
// 只有这几个可取值，其它都是非法的。 // 只有这几个可取值，其它都是非法的。
return ~['', 'submit', 'reset'].indexOf(value) return ~['', 'submit', 'reset'].indexOf(value)
} }
},
openType: {
type: String,
default: ''
} }
}, },
data () { data () {
...@@ -56,9 +56,53 @@ export default { ...@@ -56,9 +56,53 @@ export default {
} }
// TODO 通知父表单执行相应的行为 // TODO 通知父表单执行相应的行为
if (this.formType) { if (this.formType) {
this.$dispatch('Form', this.formType === 'submit' ? 'uni-form-submit' : 'uni-form-reset', { this.$dispatch(
type: this.formType '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) { _bindObjectListeners (data, value) {
...@@ -83,28 +127,42 @@ export default { ...@@ -83,28 +127,42 @@ export default {
}) })
} }
if (this.hoverClass && this.hoverClass !== 'none') { if (this.hoverClass && this.hoverClass !== 'none') {
return createElement('uni-button', this._bindObjectListeners({ return createElement(
class: [this.hovering ? this.hoverClass : ''], 'uni-button',
attrs: { this._bindObjectListeners(
'disabled': this.disabled {
}, class: [this.hovering ? this.hoverClass : ''],
on: { attrs: {
touchstart: this._hoverTouchStart, disabled: this.disabled
touchend: this._hoverTouchEnd, },
touchcancel: this._hoverTouchCancel, on: {
click: this._onClick touchstart: this._hoverTouchStart,
} touchend: this._hoverTouchEnd,
}, $listeners), this.$slots.default) touchcancel: this._hoverTouchCancel,
click: this._onClick
}
},
$listeners
),
this.$slots.default
)
} else { } else {
return createElement('uni-button', this._bindObjectListeners({ return createElement(
class: [this.hovering ? this.hoverClass : ''], 'uni-button',
attrs: { this._bindObjectListeners(
'disabled': this.disabled {
}, class: [this.hovering ? this.hoverClass : ''],
on: { attrs: {
click: this._onClick disabled: this.disabled
} },
}, $listeners), this.$slots.default) on: {
click: this._onClick
}
},
$listeners
),
this.$slots.default
)
} }
}, },
listeners: { listeners: {
...@@ -114,271 +172,271 @@ export default { ...@@ -114,271 +172,271 @@ export default {
} }
</script> </script>
<style> <style>
uni-button { uni-button {
position: relative; position: relative;
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-left: 14px; padding-left: 14px;
padding-right: 14px; padding-right: 14px;
box-sizing: border-box; box-sizing: border-box;
font-size: 18px; font-size: 18px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
line-height: 2.55555556; line-height: 2.55555556;
border-radius: 5px; border-radius: 5px;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
overflow: hidden; overflow: hidden;
color: #000000; color: #000000;
background-color: #F8F8F8; background-color: #f8f8f8;
cursor: pointer; cursor: pointer;
} }
uni-button[hidden] { uni-button[hidden] {
display: none !important; display: none !important;
} }
uni-button:after { uni-button:after {
content: " "; content: " ";
width: 200%; width: 200%;
height: 200%; height: 200%;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-transform: scale(0.5); -webkit-transform: scale(0.5);
transform: scale(0.5); transform: scale(0.5);
-webkit-transform-origin: 0 0; -webkit-transform-origin: 0 0;
transform-origin: 0 0; transform-origin: 0 0;
box-sizing: border-box; box-sizing: border-box;
border-radius: 10px; border-radius: 10px;
} }
uni-button[native] { uni-button[native] {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }
uni-button[native] .uni-button-cover-view-wrapper { uni-button[native] .uni-button-cover-view-wrapper {
border: inherit; border: inherit;
border-color: inherit; border-color: inherit;
border-radius: inherit; border-radius: inherit;
background-color: inherit; background-color: inherit;
} }
uni-button[native] .uni-button-cover-view-inner { uni-button[native] .uni-button-cover-view-inner {
padding-left: 14px; padding-left: 14px;
padding-right: 14px; padding-right: 14px;
} }
uni-button uni-cover-view { uni-button uni-cover-view {
line-height: inherit; line-height: inherit;
white-space: inherit; white-space: inherit;
} }
uni-button[type=default] { uni-button[type="default"] {
color: #000000; color: #000000;
background-color: #F8F8F8; background-color: #f8f8f8;
} }
uni-button[type=primary] { uni-button[type="primary"] {
color: #FFFFFF; color: #ffffff;
background-color: #007aff; background-color: #007aff;
} }
uni-button[type=warn] { uni-button[type="warn"] {
color: #FFFFFF; color: #ffffff;
background-color: #E64340; background-color: #e64340;
} }
uni-button[disabled] { uni-button[disabled] {
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6);
cursor: not-allowed; cursor: not-allowed;
} }
uni-button[disabled][type=default], uni-button[disabled][type="default"],
uni-button[disabled]:not([type]) { uni-button[disabled]:not([type]) {
color: rgba(0, 0, 0, 0.3); 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); background-color: rgba(0, 122, 255, 0.6);
} }
uni-button[disabled][type=warn] { uni-button[disabled][type="warn"] {
background-color: #EC8B89; background-color: #ec8b89;
} }
uni-button[type=primary][plain] { uni-button[type="primary"][plain] {
color: #007aff; color: #007aff;
border: 1px solid #007aff; border: 1px solid #007aff;
background-color: transparent; background-color: transparent;
} }
uni-button[type=primary][plain][disabled] { uni-button[type="primary"][plain][disabled] {
color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.2);
border-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; border-width: 0;
} }
uni-button[type=default][plain] { uni-button[type="default"][plain] {
color: #353535; color: #353535;
border: 1px solid #353535; border: 1px solid #353535;
background-color: transparent; background-color: transparent;
} }
uni-button[type=default][plain][disabled] { uni-button[type="default"][plain][disabled] {
color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.2);
border-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; border-width: 0;
} }
uni-button[plain] { uni-button[plain] {
color: #353535; color: #353535;
border: 1px solid #353535; border: 1px solid #353535;
background-color: transparent; background-color: transparent;
} }
uni-button[plain][disabled] { uni-button[plain][disabled] {
color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.2);
border-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; border-width: 0;
} }
uni-button[plain][native] .uni-button-cover-view-inner { uni-button[plain][native] .uni-button-cover-view-inner {
padding: 0; padding: 0;
} }
uni-button[type=warn][plain] { uni-button[type="warn"][plain] {
color: #e64340; color: #e64340;
border: 1px solid #e64340; border: 1px solid #e64340;
background-color: transparent; background-color: transparent;
} }
uni-button[type=warn][plain][disabled] { uni-button[type="warn"][plain][disabled] {
color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.2);
border-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; border-width: 0;
} }
uni-button[size=mini] { uni-button[size="mini"] {
display: inline-block; display: inline-block;
line-height: 2.3; line-height: 2.3;
font-size: 13px; font-size: 13px;
padding: 0 1.34em; padding: 0 1.34em;
} }
uni-button[size=mini][native] { uni-button[size="mini"][native] {
padding: 0; 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; padding: 0 1.34em;
} }
uni-button[loading]:not([disabled]){ uni-button[loading]:not([disabled]) {
cursor: progress; cursor: progress;
} }
uni-button[loading]:before { uni-button[loading]:before {
content: " "; content: " ";
display: inline-block; display: inline-block;
width: 18px; width: 18px;
height: 18px; height: 18px;
vertical-align: middle; vertical-align: middle;
-webkit-animation: uni-loading 1s steps(12, end) infinite; -webkit-animation: uni-loading 1s steps(12, end) infinite;
animation: uni-loading 1s steps(12, end) infinite; animation: uni-loading 1s steps(12, end) infinite;
background-size: 100%; background-size: 100%;
} }
uni-button[loading][type=primary] { uni-button[loading][type="primary"] {
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6);
background-color: #0062cc; background-color: #0062cc;
} }
uni-button[loading][type=primary][plain] { uni-button[loading][type="primary"][plain] {
color: #007aff; color: #007aff;
background-color: transparent; background-color: transparent;
} }
uni-button[loading][type=default] { uni-button[loading][type="default"] {
color: rgba(0, 0, 0, 0.6); 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; color: #353535;
background-color: transparent; background-color: transparent;
} }
uni-button[loading][type=warn] { uni-button[loading][type="warn"] {
color: rgba(255, 255, 255, 0.6); 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; color: #e64340;
background-color: transparent; background-color: transparent;
} }
uni-button[loading][native]:before { uni-button[loading][native]:before {
content: none; content: none;
} }
.button-hover { .button-hover {
color: rgba(0, 0, 0, 0.6); 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); color: rgba(53, 53, 53, 0.6);
border-color: rgba(53, 53, 53, 0.6); border-color: rgba(53, 53, 53, 0.6);
background-color: transparent; background-color: transparent;
} }
.button-hover[type=primary] { .button-hover[type="primary"] {
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6);
background-color: #0062cc; background-color: #0062cc;
} }
.button-hover[type=primary][plain] { .button-hover[type="primary"][plain] {
color: rgba(26, 173, 25, 0.6); color: rgba(26, 173, 25, 0.6);
border-color: rgba(26, 173, 25, 0.6); border-color: rgba(26, 173, 25, 0.6);
background-color: transparent; background-color: transparent;
} }
.button-hover[type=default] { .button-hover[type="default"] {
color: rgba(0, 0, 0, 0.6); 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); color: rgba(53, 53, 53, 0.6);
border-color: rgba(53, 53, 53, 0.6); border-color: rgba(53, 53, 53, 0.6);
background-color: transparent; background-color: transparent;
} }
.button-hover[type=warn] { .button-hover[type="warn"] {
color: rgba(255, 255, 255, 0.6); 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); color: rgba(230, 67, 64, 0.6);
border-color: rgba(230, 67, 64, 0.6); border-color: rgba(230, 67, 64, 0.6);
background-color: transparent; background-color: transparent;
} }
</style> </style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或