Vue 快速创建todo组件（mention）__Vue.js

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

Vue 快速创建todo组件

一个小型的文本编辑器，通过输入 ‘@’ 或者 ‘@@’ 匹配选项，通过输入 ‘//’ 匹配选择日期，暂不支持自定义这些字符，后期改进后可以支持自定义

安装方法

npm install date-season-range

import FgDesign from 'date-season-range'

Vue.use(FgDesign)

使用

<fg-todo
    ref="todos"
    :values="todoValues"
    :containerClass="you scroll container class"
    :todoItem="todoItem"
></fg-todo>

<script>
exprot default {
    data(){
        return {
            values: [{
                key: 'userKey1',
                value: 'value1',
                uname: 'chianes name1',
                uid: 'uid1'
            },{
                key: 'userKey2',
                value: 'value2',
                uname: 'chianes name2',
                uid: 'uid2'
            },{
                key: 'userKey3', // 选项的key，搜索项
                value: 'value3', // 选项的英文名 
                uname: 'chianes name3', // 选项的中文名
                uid: 'uid3' // 选项ID
            }],
            todoItem: [{
                id: 'todo-id' + new Date().getTime(),
                innerHTML: '',
                to: [], // todo 归属者
                follower: [], // todo 关注者
                dueDate: [], // 截止日期
                content: '' // todo 内容
            }]
        }
    },
    methods:{
        getValues(){
            const value = this.$refs['todos'].getData()
            console.log('value', value)
        }
    }
    
}
</script>

组件配置说明

1 values 在输入 ‘@’ 或者 ‘@@’ 后出现的选项列表

2 todoItem 初始化时是否有todo 有的话需要填入各项配置

3 containerClass 如果组件是在一个有滚动条的元素里，配置这个滚动的元素的 class 名

4 getData 方法，通过调用组件的 getData 方法获取各条 todo 的数据

实际演示

注意事项

1 本组件中使用了 element ui 中的日期控件请事先引入 element ui 相关样式

2 safari 中已知有光标跳动的问题

结语

只实现了部分功能，而且 @ @@ // 这些字段目前还不能自定义，后期考虑添加自定义，欢迎大家PR

github 地址https://github.com/PiterYang/date_season_range/tree/master/vue-component

开源不易，谢谢大家支持