mint-ui Radio
vue 2017-11-22 10:48:44

 

JavaScript Code复制内容到剪贴板
  1. import { Radio } from 'mint-ui'; //mint ui全引入可以省略  

 

1.jpg

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.     <mt-radio title="单选框列表" v-model="value" :options="priceOptions"></mt-radio>  
  3. </template>  
  4.   
  5. <script>  
  6.     export default {  
  7.         name: 'publishSearch',  
  8.         data: function() {  
  9.             return {  
  10.                 priceOptions: [{  
  11.                     label: '免费',  
  12.                     value: 'N'  
  13.                 }, {  
  14.                     label: '付费',  
  15.                     value: 'Y'  
  16.                 }],  
  17.                 value:"Y", //默认需要选中哪个就填哪个，不需要默认选中，填空  
  18.             }  
  19.         }  
  20.     }  
  21. </script>  

 

 

 

例子

基本用法

XML/HTML Code复制内容到剪贴板
  1. <mt-radio  
  2.   title="单选框列表"  
  3.   v-model="value"  
  4.   :options="['选项A', '选项B', '选项C']">  
  5. </mt-radio>  

设置禁用选项

JavaScript Code复制内容到剪贴板
  1. this.options = [  
  2.   {  
  3.     label: '被禁用',  
  4.     value: '值F',  
  5.     disabled: true  
  6.   },  
  7.   {  
  8.     label: '选项A',  
  9.     value: '值A'  
  10.   },  
  11.   {  
  12.     label: '选项B',  
  13.     value: '值B'  
  14.   }  
  15. ];  

 

XML/HTML Code复制内容到剪贴板
  1. <mt-radio  
  2.   title="单选框列表"  
  3.   v-model="value"  
  4.   :options="options">  
  5. </mt-radio>  

单选框右对齐

XML/HTML Code复制内容到剪贴板
  1. <mt-radio  
  2.   align="right"  
  3.   title="右对齐"  
  4.   v-model="value"  
  5.   :options="options">  
  6. </mt-radio>  

 

 

API

参数 说明 类型 可选值 默认值
options 选择项 Array    
value 绑定值 String    
title 标题，显示在列表上方 string    
align 单选框对其位置 String left, right left

本文来自于：http://www.yoyo88.cn/study/vue/222.html

上一篇 mint-ui 左滑删除 + 传参
下一篇 vue文档 —— 事件处理
相关的文章
Powered by yoyo苏ICP备15045725号