阅读 56

Vue 快速创建todo组件(mention)

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 的数据

实际演示

todo-component.gif

注意事项

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

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

结语

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

github 地址github.com/PiterYang/d…

开源不易,谢谢大家支持

文章分类
前端
文章标签