button 按钮

该组件是按钮的基础组件。此控件完全由前端实现,可以通过lynx-components获取

属性

属性名 类型 默认值 说明
background #ff5777 组件背景色,默认值为:#ff5777,建议书写16进制
foreground #fff button组件文本颜色
text required String 按钮文本
border-color String #ff5777 button组件边框颜色
font-size Number 26 button文本大小
font-weight String normal button文本字体粗细
onclick Function 触发后回调的click事件
disabled Boolean true 设置button组件是否可单击

事件

  • click: 点击事件

例子

<template>
  <view class="container" id="app">
    <view class="btn_container">
      <button
          class="btn"
          text="PRESS ME"
          background="#2198f2"
          foreground="#fff"
          :border-radius="2"
          :font-size="30"
          font-weight="bold"
          :onclick="clickHandler">
        </button>
      </view>
  </view>
</template>

<style>
  .btn {
    height: 100;
    flex: 1
  }

  .btn_container {
    width: 750;
    background-color: #f5f8f8;
    justify-content: center;
    align-items: center; 
    padding-left: 20;
    padding-right: 20;
    padding-top: 20;
    padding-bottom: 20
  }

  .container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>

<script>
import { Button } from 'lynx-components'
export default{
  components: {
    Button,
  },
  methods: {
    clickHandler (e) {
      console.log(e);
    }
  }
}
</script>

results matching ""

    No results matching ""