基本用法

    2.   data() {
    3.     return {
    4.       selected: '',
    5.       options: ['Option1', 'Option2']
    6.     }
    7.   }
    8. }

    options 为选项数组，默认不选中任何的选项，点击其中一个，则对应的 selected 的值就为选中项的值。

    设置 value，禁用状态，图标样式

    1. export default {
    2.   data() {
    3.     return {
    4.       selected2: 3,
    5.       options2: [
    6.         {
    7.           label: 'Option1',
    8.           value: 1
    9.         },
    10.         {
    11.           label: 'Option2',
    12.           value: 2
    13.         },
    14.           label: 'Option3',
    15.           value: 3,
    16.           disabled: true
    17.         }
    19.     }
    20.   }
    21. }

    设置 position 为 ‘right’，则单选框图标位置在右边。设置 hollow-style 为 true 则使用镂空样式。

    水平排列

    1. export default {
    2.   data() {
    3.     return {
    4.       selected3: '3',
    5.       options3: [
    6.         {
    7.           label: '1',
    8.           value: '1'
    9.         },
    10.         {
    11.           label: '2',
    12.           value: '2'
    13.         },
    14.         {
    15.           label: '3',
    16.           value: '3',
    17.           disabled: true
    18.         }
    19.       ]
    20.     }
    21. }

    使用默认插槽

    2.   data() {
    3.     return {
    4.       selected4: '1',
    5.       options4: [
    6.         {
    7.           label: '1',
    8.           value: '1',
    9.           src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516805611092&di=80d0f229dd999ffa3be79d6e317832b0&imgtype=0&src=http%3A%2F%2Fimglf0.ph.126.net%2F1EnYPI5Vzo2fCkyy2GsJKg%3D%3D%2F2829667940890114965.jpg'
    10.         },
    11.         {
    12.           label: '2',
    13.           value: '2',
    14.           src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516805611092&di=80d0f229dd999ffa3be79d6e317832b0&imgtype=0&src=http%3A%2F%2Fimglf0.ph.126.net%2F1EnYPI5Vzo2fCkyy2GsJKg%3D%3D%2F2829667940890114965.jpg'
    15.         },
    16.         {
    17.           label: '3',
    18.           value: '3',
    19.           src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516805611092&di=80d0f229dd999ffa3be79d6e317832b0&imgtype=0&src=http%3A%2F%2Fimglf0.ph.126.net%2F1EnYPI5Vzo2fCkyy2GsJKg%3D%3D%2F2829667940890114965.jpg',
    20.           disabled: true
    21.         }
    22.       ]
    23.     }
    24.   }
    25. }
    • options 子配置项

    注：如果 options 中的项为字符串也是可以的，此时默认 和 value 的值都为该字符串的值。

    • option 子配置项