<button>

<button> 是一个预设常用按钮。

子组件

无

预览效果

&lt;button&gt; - 图1

示例代码

  1. <template>
  2.     <div class="app">
  4.         <scroller class="list">
  6.             <text class="list-title">预设样式</text>
  8.             <div class="list-item">
  9.                 <button class="button" text="默认"></button>
  10.                 <button class="button" text="红色" model="red"></button>
  11.             </div>
  13.             <div class="list-item">
  14.                 <button class="button" text="绿色" model="green"></button>
  15.                 <button class="button" text="蓝色" model="blue"></button>
  16.             </div>
  18.             <div class="list-item">
  19.                 <button class="button" text="粉红" model="pink"></button>
  20.                 <button class="button" text="黄色" model="yellow"></button>
  21.             </div>
  23.             <div class="list-item">
  24.                 <button class="button" text="橙色" model="orange"></button>
  25.                 <button class="button" text="灰色" model="gray"></button>
  26.             </div>
  28.             <div class="list-item">
  29.                 <button class="button" text="黑色" model="black"></button>
  30.                 <button class="button" text="白色" model="white"></button>
  31.             </div>
  33.             <div class="list-item">
  34.                 <button class="button" text="加载中" loading="true"></button>
  35.                 <button class="button" text="禁用" disabled="true"></button>
  36.             </div>
  38.             <text class="list-title">自定义样式</text>
  40.             <div class="list-input-item">
  41.                 <text class="cell">按钮文字：</text>
  42.                 <input class="input" placeholder="文字" v-model="text"/>
  43.             </div>
  45.             <div class="list-input-item">
  46.                 <text class="cell" style="flex:1">是否加载中：</text>
  47.                 <switch class="switch" :checked="loading" @change="loading = !loading"></switch>
  48.             </div>
  50.             <div class="list-input-item">
  51.                 <text class="cell" style="flex:1">是否禁用：</text>
  52.                 <switch class="switch" :checked="disabled" @change="disabled = !disabled"></switch>
  53.             </div>
  55.             <div class="list-input-item">
  56.                 <text class="cell">按钮宽度：</text>
  57.                 <input class="input" placeholder="自定义样式实现, 默认全屏"
  58.                        v-model="width"/>
  59.             </div>
  61.             <div class="list-input-item">
  62.                 <text class="cell">按钮高度：</text>
  63.                 <input class="input" placeholder="自定义样式实现, 默认高度80px" v-model="height"/>
  64.             </div>
  66.             <div class="list-input-item">
  67.                 <text class="cell">背景颜色：</text>
  68.                 <input class="input" placeholder="自定义样式实现" v-model="backgroundColor"/>
  69.             </div>
  71.             <div class="list-input-item">
  72.                 <text class="cell">边框颜色：</text>
  73.                 <input class="input" placeholder="自定义样式实现" v-model="borderColor"/>
  74.             </div>
  76.             <div class="list-input-item">
  77.                 <text class="cell">边框圆角：</text>
  78.                 <input class="input" placeholder="自定义样式实现,默认8px" v-model="borderRadius"/>
  79.             </div>
  81.             <div class="demo-item">
  82.                 <button class="demoButton" :eeui="eeuiStyle" :style="demoStyle"></button>
  83.             </div>
  85.         </scroller>
  88.     </div>
  89. </template>
  91. <style scoped>
  92.     .app {
  93.         width: 750px;
  94.         flex: 1;
  95.         background-color: #ffffff;
  96.     }
  98.     .list {
  99.         width: 750px;
  100.         flex: 1;
  101.     }
  103.     .list-title {
  104.         margin-top: 24px;
  105.         margin-bottom: 12px;
  106.         padding-top: 36px;
  107.         padding-right: 24px;
  108.         padding-bottom: 24px;
  109.         padding-left: 24px;
  110.         font-size: 28px;
  111.         color: #757575;
  112.     }
  114.     .list-item {
  115.         width: 750px;
  116.         flex-direction: row;
  117.     }
  119.     .button {
  120.         font-size: 24px;
  121.         margin-left: 37.5px;
  122.         margin-right: 37.5px;
  123.         margin-bottom: 20px;
  124.         width: 300px;
  125.         height: 80px;
  126.     }
  128.     .list-input-item {
  129.         width: 750px;
  130.         height: 90px;
  131.         flex-direction: row;
  132.         align-items: center;
  133.         border-bottom-color: #e4e4e4;
  134.         border-bottom-style: solid;
  135.         border-bottom-width: 1px;
  136.     }
  138.     .cell {
  139.         padding-left: 50px;
  140.         font-size: 24px;
  141.         color: #666666;
  142.     }
  144.     .switch {
  145.         margin-right: 40px;
  146.     }
  148.     .input {
  149.         padding-right: 50px;
  150.         flex: 1;
  151.         height: 90px;
  152.         text-align: right;
  153.         font-size: 28px;
  154.     }
  156.     .demo-item {
  157.         width: 750px;
  158.         padding-top: 30px;
  159.         padding-bottom: 30px;
  160.         align-items: center;
  161.     }
  163. </style>
  165. <script>
  166.     const eeui = app.requireModule('eeui');
  168.     export default {
  169.         data() {
  170.             return {
  171.                 text: '按钮',
  172.                 width: '702px',
  173.                 height: '80px',
  174.                 loading: false,
  175.                 disabled: false,
  176.                 backgroundColor: '#FF5000',
  177.                 borderColor: '#FF5000',
  178.                 borderRadius: '8px',
  179.                 fontSize: '28px',
  180.                 color: '#FFFFFF'
  181.             }
  182.         },
  183.         mounted() {
  184.             this.$nextTick(() => {
  185.                 this.text = '按钮文字';
  186.             });
  187.         },
  188.         computed: {
  189.             eeuiStyle() {
  190.                 const { backgroundColor, borderColor, borderRadius, text, color, loading, disabled } = this;
  191.                 const customStyle = {};
  192.                 if (backgroundColor) {
  193.                     customStyle.backgroundColor = backgroundColor;
  194.                 }
  195.                 if (borderColor) {
  196.                     customStyle.borderColor = borderColor;
  197.                     customStyle.borderWidth = "1px";
  198.                 }
  199.                 if (borderRadius) {
  200.                     customStyle.borderRadius = borderRadius;
  201.                 }
  202.                 if (text) {
  203.                     customStyle.text = text;
  204.                 }
  205.                 if (color) {
  206.                     customStyle.color = color;
  207.                 }
  208.                 customStyle.loading = loading;
  209.                 customStyle.disabled = disabled;
  210.                 return customStyle;
  211.             },
  213.             demoStyle() {
  214.                 const { width, height } = this;
  215.                 const customStyle = {};
  216.                 customStyle.width = width;
  217.                 customStyle.height = height;
  218.                 return customStyle;
  219.             }
  220.         },
  221.     };
  222. </script>

配置参数

属性名 类型 描述 默认值
text String 按钮文字 -
color String 按钮文字颜色 #FFFFFF
fontSize Number 字体大小 -
backgroundColor String 按钮背景颜色 #3EB4FF
borderRadius Number 圆角半径 8
borderWidth Number 边框大小 0
borderColor String 边框颜色 -
disabled Boolean 是否禁用 false
loading Boolean 是否加载中 false
model String 预设风格，详细注① -

注①

red：红色；green：绿色；blue：蓝色；pink：粉红；

yellow：黄色；orange：橙色；gray：灰色；black：黑色；white：白色；

例如：

  1. <button 
  2.     ref="reflectName"
  3.     class="button" 
  4.     text="红色" model="red"></button>

事件回调 callback

  1. /**
  2.  * 组件加载完成
  3.  */
  4. @ready = function() { ... }

调用方法 methods

  1. /**
  2.  * 设置按钮文字
  3.  * 参数一：按钮文字
  4.  */
  5. this.$refs.reflectName.setText('文字');
  7. /**
  8.  * 设置按钮文字颜色
  9.  * 参数一：颜色代码
  10.  */
  11. this.$refs.reflectName.setTextColor('#FF0000');
  13. /**
  14.  * 设置按钮字体大小
  15.  * 参数一：字体大小
  16.  */
  17. this.$refs.reflectName.setTextSize(20);
  19. /**
  20.  * 设置是否禁用
  21.  * 参数一：true|false
  22.  */
  23. this.$refs.reflectName.setDisabled(true);
  25. /**
  26.  * 设置是否加载中
  27.  * 参数一：true|false
  28.  */
  29. this.$refs.reflectName.setLoading(true);