Weex button 高亮自定义

image.png
image.png

控件代码

<template>
    <div>
        <div :style="buttonStyleCopy" class="button" @touchstart="startTouch" @touchend="endTouch">
            <text :style="textStyleCopy">{{ text }}</text>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        //接受反馈, 是否向外传递点击事件信号 外界命名属性要和这个字段一模一样
        disable: {type: Boolean, default: false},
        text: { type: String, default: 'button' },
        //点击时背景色
        touchColor: { type: String, default: 'blue' },
        //点击时文字颜色
        touchTextColor: {type: String, default: 'white'},
        buttonStyle: {
            default: {
                backgroundColor: '#F6F6F6',
                width: 750,
                height: 100
            }
        },

        textStyle: {
            default:{
                color: '#000000'
            }
        }
    },
    data() {
        return {
            buttonStyleCopy: {},
            textStyleCopy: {}
        };
    },
    components: {},
    computed: {
    },
    created() {
        this.buttonStyleCopy = this.copyObject(this.buttonStyle)
        this.textStyleCopy = this.copyObject(this.textStyle)
    },
    methods: {
        copyObject(obj) {
            return JSON.parse(JSON.stringify(obj));
        },

        startTouch(e) {
            console.log(this.buttonStyleCopy.backgroundColor, this.touchColor)
            this.buttonStyleCopy.backgroundColor = this.touchColor;
            this.textStyleCopy.color = this.touchTextColor
            this.$forceUpdate()
            //传递点击事件
            if(!this.disable){
                this.$emit('update:disable', true)
                this.$emit('tap', {})
            }
        },
        endTouch(e) {
            this.buttonStyleCopy.backgroundColor = this.buttonStyle.backgroundColor;
            this.textStyleCopy.color = this.textStyle.color
            this.$forceUpdate()
            console.log(this.buttonStyleCopy.backgroundColor, this.touchColor)
        }
    }
};
</script>

<style scoped>
.button {
    justify-content: center;
    align-items: center;
}
</style>

示例代码

<template>
    <root :statue="true">
        <select-button @tap="tap" :disable.sync="disable"></select-button>
        <select-button 
            @tap="tap" 
            :disable.sync="disable"
            :buttonStyle="{
                width: 200,
                height: 150,
                backgroundColor: 'red'
            }"
            >
        </select-button>
    </root>
</template>

<script>
    import Root from '../../../components/root-view/index.vue'
    import SelectButton from './selectButton.vue'
    export default {
        data() {
            return {
                disable: false,
            };
        },
        components: {
            Root,
            SelectButton
        },
        computed: {},
        created() {},
        methods: {
            tap(){
                console.log('tap')
                let self = this
                setTimeout(e=>{
                    self.disable = false
                }, 3000)
            }
        }
}
</script>

<style scoped>
</style>