Files
doodle-mini/miniprogram/ui/button/button.ts
T

109 lines
2.5 KiB
TypeScript

Component({
options: {
// multipleSlots: true, // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
*/
properties: {
type: {
type: String,
value: 'default', // primary, green, white
},
openType: {
type: String,
value: '',
},
plain: {
type: Boolean,
value: false, // 是否朴素按钮
},
size: {
type: String,
value: 'normal', // large, normal, small, mini
},
disabled: {
type: Boolean,
value: false, // 是否禁用
},
flat: {
type: Boolean,
value: false, // 是否扁平化
},
loading: {
type: Boolean,
value: false, // 是否加载中
},
style: {
type: String,
value: '', // 自定义样式
},
// className: {
// type: String,
// value: '', // 自定义类名
// },
width: {
type: String,
value: '', // 按钮宽度
},
height: {
type: String,
value: '',
},
loadingType: {
type: String,
value: 'circular',
},
loadingSize: {
type: String,
value: '20px',
},
loadingColor: {
type: String,
value: '#ffffff',
},
// icon
icon: {
type: String,
value: '',
},
iconClassPrefix: {
type: String,
value: 'toy-icon',
},
iconSize: {
type: String,
value: '44rpx',
},
iconColor: {
type: String,
value: '#ffffff',
},
},
/**
* 组件的初始数据
*/
data: {},
lifetimes: {
attached() {
const { type, plain, disabled } = this.data;
if (type === 'white' && !plain) {
const iconColor = disabled ? 'rgba(34, 36, 37, 0.5)' : 'rgba(34, 36, 37, 0.9)';
this.setData({
iconColor,
});
}
},
},
/**
* 组件的方法列表
*/
methods: {
onClick(e: WechatMiniprogram.TouchEvent): void {
this.triggerEvent('click', e);
},
},
externalClasses: ['custom-class'],
});