Normally Palatable Mango

    vue-jp-gencode

    5.9.0 • Public • Published

    VueTagTextarea

    可插入自定义标签的 textarea

    安装

    $ npm install vue-tag-textarea -S

    使用

    main.js 文件中引入插件并注册

    # main.js
    import VueTagTextarea from 'vue-tag-textarea'
    import 'vue-tag-textarea/lib/vue-tag-textarea.css'
    Vue.use(VueTagTextarea)

    在项目中用使用 VueTagTextarea

    <template>
      <w-textarea v-model="text" />
    </template>
    <script>
      export default {
        data () {
          return {
            text: 'demo'
          }
        }
      }
    </script>

    注意:标签为 <w-textarea>

    特点

    1. 可以插入自定义的标签,默认为 <wise>
    2. 基于自定义标签,可以满足模版文案的需求

    参数

    参数 说明 类型 默认值
    tag 自定义标签名 String wise
    tools 配置工具栏 Array [{ type: 'link', text: '添加超链接' }, { type: 'tag', text: '添加模版标签' }]
    maxlength 最大字符长度 String, Number -

    自定义 tag 的时候,需要添加该标签的样式

    事件

    事件名称 说明 回调参数
    add 点击工具栏上的“添加xx”按钮时触发 type

    Add 事件详解

    工具栏可以通过 tools 参数进行配置,tools 的元素是一个包含 type 和 text 的对象,其中 text 为工具栏按钮的文字。
    当点击工具栏按钮的时候,触发 add 事件,接收一个 type 参数,该参数为 tools 中定义的 type 属性值。
    具体的交互逻辑需要自行开发,最后需要通过 $refs 调用 VueTagTextarea 内部的 addLink() 或者 addTag() 方法,完成添加标签。
    当调用 addTag() 的时候,需要传入一个 text 参数,值为标签的文本内容。
    当调用 addLink() 的时候,需要传入 url 和 text,其中 url 为超链接地址,text 为超链接文本。
    VueTagTextarea 最终返回的值是一个 innerHTML。

    Keywords

    none

    Install

    npm i vue-jp-gencode

    DownloadsWeekly Downloads

    0

    Version

    5.9.0

    License

    MIT

    Unpacked Size

    1.79 MB

    Total Files

    94

    Last publish

    Collaborators

    • liugaofeng