how do I use one live template to generate more <component > at once

such as I need generate many custom vue component like

<span class="search-header-tag-span">create_at</span>
<el-date-pickerenter code here
    v-model="formSearch.refund_time"
    type="datetime"
    value-format="yyyy-MM-dd HH:mm:ss"
    placeholder="create_at"
>
</el-date-picker>
<span class="search-header-tag-span">create_at</span>
<el-date-picker
    v-model="formSearch.refund_time"
    type="datetime"
    value-format="yyyy-MM-dd HH:mm:ss"
    placeholder="create_at"
>
</el-date-picker>
<span class="search-header-tag-span">create_at</span>
<el-date-picker
    v-model="formSearch.refund_time"
    type="datetime"
    value-format="yyyy-MM-dd HH:mm:ss"
    placeholder="create_at"
>
</el-date-picker>

I have a live template can generate one ,But how do I use the live template to generate more at once

Solution

Live templates are meant to insert common code snippets into your code quickly, and therefore by design will always be applied once. Waiting for something like a dialog box to open and entering a number will always be slower than triggering the template multiple times.

You can, however, create multiple live templates with names like vdp, vdp2, vdp3, etc... (vdp for vue date picker) using the postfix of your template name as a parameter. Then your element will be inserted multiple times at once. This is somewhat similar for the kotlin fun0, fun1, fun2 live templates, where the prefix is used to indicate the number of parameters in the function.

vdp

<span class="search-header-tag-span">$PLACEHOLDER$</span>
<el-date-picker
    v-model="formSearch.refund_time"
    type="datetime"
    value-format="yyyy-MM-dd HH:mm:ss"
    placeholder="$PLACEHOLDER$"
/>

vdp2

<span class="search-header-tag-span">$PLACEHOLDER1$</span>
<el-date-picker
    v-model="formSearch.refund_time"
    type="datetime"
    value-format="yyyy-MM-dd HH:mm:ss"
    placeholder="$PLACEHOLDER1$"
/>

<span class="search-header-tag-span">$PLACEHOLDER2$</span>
<el-date-picker
    v-model="formSearch.refund_time"
    type="datetime"
    value-format="yyyy-MM-dd HH:mm:ss"
    placeholder="$PLACEHOLDER2$"
/>

You can then enter something for each $PLACEHOLDER parameter and move to the next using TAB.

Disclaimer. I don't know anything about Vue though, so I can't tell if these templates actually make sense.