0.1.1 • Published 3 years ago

vue-tag-textarea-user-test v0.1.1

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

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自定义标签名Stringwise
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。

0.1.1

3 years ago

0.1.0

3 years ago