Vue creates todo components quickly

A small text editor, by entering the ‘@’ or ‘@@’ match options, by entering the ‘//’ match to select the date, currently does not support customization of these characters, will be improved later to support customization

Installation method

npm install date-season-range

import FgDesign from 'date-season-range'

Vue.use(FgDesign)

Copy the code

use

<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: // uname: 'chianes name3', // uid: 'uID3' // option ID}], todoItem: [{ID: 'todo-id' + new Date().getTime(), innerHTML: ", to: [], // Todo belonging follower: [], // Todo follower dueDate: [], // Deadline content: }}, methods:{getValues(){const value = this.$refs['todos'].getData() console.log('value',) value) } } } </script>Copy the code

Component Configuration Description

1 VALUES List of options displayed after you enter @ or @@

2 todoItem initialization whether toDO exists if so, you need to fill in the configuration

3 containerClass If the component is in a scrollbar element, specify the class name of the scrollbar element

4. GetData method: obtain the data of each TODO by calling the getData method of the component

The actual presentation

Matters needing attention

This component uses the element UI date control. Please introduce the Element UI style in advance

2 Safari is known to have a cursor jump problem

The website supporting the component library has also been launched (still being improved, welcome to visit).

www.xieyuchen.life/component/t…

conclusion

Only part of the function is realized, and @@@/ / these fields can not be customized at present, we will consider adding customization in the future, welcome everyone PR

Making address github.com/PiterYang/d…

Open source is not easy, thank you for your support