mint-ui 单选列表Radio以及多选列表Checklist的引入

最新推荐文章于 2022-07-04 14:17:08 发布

西虹市大陆

最新推荐文章于 2022-07-04 14:17:08 发布

阅读量1.8k

点赞数 1

分类专栏： H5 文章标签： vue.js html html5 前端 javascript

本文链接：https://blog.csdn.net/qq_24468953/article/details/103893383

版权

H5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

mint-ui 单选列表Radio以及多选列表Checklist的引入

以下是本人经过摸索踩坑后得到的使用方法：
下一篇：mint-ui 引入日期时间选择器Datetime picker
在这里插入图片描述
html部分：

<div id="app">
    <div style="height: 50px"></div>
    <mt-radio
            title="店铺经营时间:"
            v-model="time"
            :options="options1">
    </mt-radio>
    <mt-checklist
            align="right"
            title="请选择"
            v-model="date"
            :options="options2">
    </mt-checklist>
</div>

js部分：

    new Vue({
        el: '#app',
        data: function() {
            return {
                time:'',
                date:[],
                pickerValue:'时间',
                options1:[
                    {
                        label: '每天',
                        value: '0'
                    },
                    {
                        label: '周一至周五',
                        value: '1'
                    },
                    {
                        label: '周一至周六',
                        value: '2'
                    },
                    {
                        label: '自定义',
                        value: '3'
                    }
                ],
                options2:[
                    {
                        label: '星期一',
                        value: '0'
                    },
                    {
                        label: '星期二',
                        value: '1'
                    },
                    {
                        label: '星期三',
                        value: '2'
                    },
                    {
                        label: '星期四',
                        value: '3'
                    },
                    {
                        label: '星期五',
                        value: '4'
                    },
                    {
                        label: '星期六',
                        value: '5'
                    },
                    {
                        label: '星期日',
                        value: '6'
                    }
                ]
            }
        }
    })