vue-components | 一些vue的组件 - | Frontend Framework library

textarea elements only deal with plain text.

Quasar has a WYSIWYG editor which allows to paste tokens. Try and see if you can bend it to suite your needs. While playing with it I found that the behaviour was quirky and I'm not sure the Vue component will give you the control you need.

You would need the dreaded contenteditable, execCommand and queryCommandState if you wanted to implement this yourself, which I can't encourage you to do as it's a painful experience.

Personally, I would fallback to a list of chips that would appear above or bellow the textarea as the user types.

if you use a monospace font*, you can compute the position and the length of the words you match in order to fill some colourful shapes in a canvas positioned underneath. You can't be too fancy with this but it's cheap to implement.

Note that dealing with a textarea is not as bad as dealing with contenteditable so you could be able to replace the words you match with spaces in order to see a canvas-generated chip through the hole but you will have to keep track of the state of the textarea content.

*Although it is not required to use a monospace font, using any other font will require to actually measure the length of the text and the length of the spaces you replace your matches with, and it will start to get a tad complex.

declaration: true in tsconfig.json is supposed to work, but there's an outstanding blocking issue (vue-cli#1081).

The workaround is to run tsc to generate the type declarations:

1. Update tsconfig.json to set compilerOptions.outDir="dist":

Personally I would opt for L8 with inertiajs(vuejs) which is integrated in the documentation and you can easily make a SPA

Using display: flexbox you can do this by organizing the data by column instead of by row. Using display: table you can maintain the structure of the table. Examples:

you can customize it using styles and with a conditional class

If you don't put {} it is the default export that will be imported. Try modifying your export/import like:

in your sample-vue-components.vue:

You're super close. When working with file input fields you don't use the v-model as files are handled a little differently than normal data.

Instead listen for changes on the file input and then create the multipart form data and send to laravel.

Add a change event to your input that triggers your send method. The $event value will contain everything we need. ($event is a special variable for catching event data from fields).

Yes, you can change [name].[chunkhash] to [contenthash:5] to reduce bundle file names and keeping long term cache.

That is probably because Vuetify's v-data-table component expects to receive an array of objects, while you are only providing an array of string. You can simply convert your array of string into a dummy array of objects using Array.prototype.map, and bind the computed property instead.

The transformation is pretty simple: