uniapp组件-button按钮

川长思鸟来 2021-07-25 14:27 1767阅读 0赞

效果图：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70

实现代码：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1

<template>
    <view>
        <button @click="clickBtn">type="default"</button>
        <button style="width: 70%;color: red;background-color: orange;">自定义样式</button>
        <button type="primary">type="primary"</button>
        <button type="warn">type="warn"</button>
        <button loading="true">loading="true"</button>
        <button disabled="true">disabled="true"</button>
        <button plain="true">plain="true"</button>
        <button size="mini">按钮</button>
        <button type="primary" size="mini">按钮</button>
        <button type="warn" size="mini">按钮</button>
    </view>
</template>
<script>
    export default {
        data() {
            return {}
        },
        methods: {
            clickBtn(){
                uni.showToast({
                    title:"点击了按钮"
                })
            }
        }
    }
</script>