Current collected state Current
Observed since 20 Oct, 20:10 UTC
No superseded metadata states collected. Unchanged observations do not create new revisions.
Back to packageRELEASE DETAILS
1.0.3
npm4icloud-detailform
> 可插入自定义标签的 textarea
Published21 Jul 2020
Direct dependencies38
Transitive dependenciesNot calculated
README
Current package documentationVueTagTextarea
可插入自定义标签的 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>
特点
- 可以插入自定义的标签，默认为
<wise> - 基于自定义标签，可以满足模版文案的需求
参数
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 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。
Downloads & popularity
Awaiting observationsNo metric observations yet
Download counts and popularity will appear here as the collector receives them.
Declared dependencies 38
Native requirements38 direct targetsNot calculated transitive count
| Package / target | Requirement | Relationship |
|---|---|---|
axiosEnvironment{
"local_name": "axios",
"alias": false,
"peer_metadata": null
} | 0.18.1 | runtime |
clipboardEnvironment{
"local_name": "clipboard",
"alias": false,
"peer_metadata": null
} | 2.0.4 | runtime |
codemirrorEnvironment{
"local_name": "codemirror",
"alias": false,
"peer_metadata": null
} | 5.45.0 | runtime |
driver.jsEnvironment{
"local_name": "driver.js",
"alias": false,
"peer_metadata": null
} | 0.9.5 | runtime |
dropzoneEnvironment{
"local_name": "dropzone",
"alias": false,
"peer_metadata": null
} | 5.5.1 | runtime |
echartsEnvironment{
"local_name": "echarts",
"alias": false,
"peer_metadata": null
} | 4.2.1 | runtime |
element-uiEnvironment{
"local_name": "element-ui",
"alias": false,
"peer_metadata": null
} | 2.13.0 | runtime |
file-saverEnvironment{
"local_name": "file-saver",
"alias": false,
"peer_metadata": null
} | 2.0.1 | runtime |
fuse.jsEnvironment{
"local_name": "fuse.js",
"alias": false,
"peer_metadata": null
} | 3.4.4 | runtime |
js-cookieEnvironment{
"local_name": "js-cookie",
"alias": false,
"peer_metadata": null
} | 2.2.0 | runtime |
jsonlintEnvironment{
"local_name": "jsonlint",
"alias": false,
"peer_metadata": null
} | 1.6.3 | runtime |
jszipEnvironment{
"local_name": "jszip",
"alias": false,
"peer_metadata": null
} | 3.2.1 | runtime |
normalize.cssEnvironment{
"local_name": "normalize.css",
"alias": false,
"peer_metadata": null
} | 7.0.0 | runtime |
nprogressEnvironment{
"local_name": "nprogress",
"alias": false,
"peer_metadata": null
} | 0.2.0 | runtime |
path-to-regexpEnvironment{
"local_name": "path-to-regexp",
"alias": false,
"peer_metadata": null
} | 2.4.0 | runtime |
screenfullEnvironment{
"local_name": "screenfull",
"alias": false,
"peer_metadata": null
} | 4.2.0 | runtime |
showdownEnvironment{
"local_name": "showdown",
"alias": false,
"peer_metadata": null
} | 1.9.0 | runtime |
sortablejsEnvironment{
"local_name": "sortablejs",
"alias": false,
"peer_metadata": null
} | 1.8.4 | runtime |
tui-editorEnvironment{
"local_name": "tui-editor",
"alias": false,
"peer_metadata": null
} | 1.3.3 | runtime |
vueEnvironment{
"local_name": "vue",
"alias": false,
"peer_metadata": null
} | 2.6.10 | runtime |
vue-count-toEnvironment{
"local_name": "vue-count-to",
"alias": false,
"peer_metadata": null
} | 1.0.13 | runtime |
vue-i18nEnvironment{
"local_name": "vue-i18n",
"alias": false,
"peer_metadata": null
} | 7.3.2 | runtime |
vue-routerEnvironment{
"local_name": "vue-router",
"alias": false,
"peer_metadata": null
} | 3.0.2 | runtime |
vue-splitpaneEnvironment{
"local_name": "vue-splitpane",
"alias": false,
"peer_metadata": null
} | 1.0.4 | runtime |
vue-tag-textarea-demoEnvironment{
"local_name": "vue-tag-textarea-demo",
"alias": false,
"peer_metadata": null
} | ^0.1.0 | runtime |
vuedraggableEnvironment{
"local_name": "vuedraggable",
"alias": false,
"peer_metadata": null
} | 2.20.0 | runtime |
vuexEnvironment{
"local_name": "vuex",
"alias": false,
"peer_metadata": null
} | 3.1.0 | runtime |
xlsxEnvironment{
"local_name": "xlsx",
"alias": false,
"peer_metadata": null
} | 0.14.1 | runtime |
@vue/cli-plugin-babelEnvironment{
"local_name": "@vue/cli-plugin-babel",
"alias": false,
"peer_metadata": null
} | ^3.0.4 | development |
@vue/cli-plugin-eslintEnvironment{
"local_name": "@vue/cli-plugin-eslint",
"alias": false,
"peer_metadata": null
} | ^3.0.4 | development |
@vue/cli-serviceEnvironment{
"local_name": "@vue/cli-service",
"alias": false,
"peer_metadata": null
} | ^3.0.4 | development |
@vue/eslint-config-standardEnvironment{
"local_name": "@vue/eslint-config-standard",
"alias": false,
"peer_metadata": null
} | ^4.0.0 | development |
babel-eslintEnvironment{
"local_name": "babel-eslint",
"alias": false,
"peer_metadata": null
} | ^10.0.1 | development |
eslintEnvironment{
"local_name": "eslint",
"alias": false,
"peer_metadata": null
} | ^5.8.0 | development |
eslint-plugin-vueEnvironment{
"local_name": "eslint-plugin-vue",
"alias": false,
"peer_metadata": null
} | ^5.0.0-0 | development |
node-sassEnvironment{
"local_name": "node-sass",
"alias": false,
"peer_metadata": null
} | ^4.9.0 | development |
sass-loaderEnvironment{
"local_name": "sass-loader",
"alias": false,
"peer_metadata": null
} | ^7.0.1 | development |
vue-template-compilerEnvironment{
"local_name": "vue-template-compiler",
"alias": false,
"peer_metadata": null
} | 2.6.10 | development |
Distribution files
1 collectedDistribution 1
Source fileSource distribution
Checksums from source
{
"integrity": "sha512-e7NsDN8vH0ozpBD4N5Xqlr0XlBZRFEHR/8lvs0q9MTbYleazG6B5D7XTKWY5Vb3hJIkgFEf1aR9Z9Xkw0ue5vw==",
"shasum": "84b30b7f0d8ba17b44f546080df7694bad00746d",
"tarball": "https://registry.npmjs.org/4icloud-detailform/-/4icloud-detailform-1.0.3.tgz",
"fileCount": 8,
"unpackedSize": 4787661,
"npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFsFvCRA9TVsSAnZWagAAshMP/RxmXhXeArlGd5b1I0GR\n44oFLDiBAuGXIeFF0bFwpWrV3bxNYdm3+CsbypwtbBkLlWuI+zQgNB7HN/az\nocVm0spf/oqoT98UzfpYBXIry58lmkNvStUoqOCOiBUe21j3e9JvR85uNt5I\nhmRALeQfIFRTTxjCT22DQof/2wmGM8e40Ui+if7wQDqveyA0HBHJfXv276fN\nNDfrKLqqPqzMc9KWUwTdYyrtMnortHaFTdk0MS5+TYI8NUkRmp+uEYJbXVNa\nveiQ5BmV2+Z6uhBcAIr+otB8DRh+QG2lz7Lyicw3tB3ZJtZFsxWKjONkqU+3\n/WRMyePFK6OF9Xnk2b4bmywNJWE5XXBl3Dwy/rA21tAE5W9UQMrfqkX7hWgD\nc8k7rHCuBcwp0Ec4TuoXKjGwUdAKrVmjxAbEocQMTMlqUI0ITdNiu+bdVSGP\n5xNQ05cHOS36pdQQ3F8s3MnO71qw437X5FKzTpIz7OY6KCxAbdiMhHUKRXkT\nYUmr/l/q24DlfQFMApoVxg5QTPZbs5o9ajRPjG1Ep2tm6NyFcCuY0FNou2rj\nD2nAY7e/o7JDOBnSCUp25T9j/S4Qd6PxHmiOewtdnrwryhXAxlIhD5m+ohQI\n6acnSW0kqYRCHcoMkHF+/kab62nl/BmhN2K51Cni+grqcbvv98QpVclegIhe\n/D5Z\r\n=2qvK\r\n-----END PGP SIGNATURE-----\r\n",
"signatures": [
{
"keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA",
"sig": "MEYCIQC4QpPUJ9HCcgTq9y6ogzz88zBUXaARE2+FKsnezsZtjgIhAP4RdTePpXXhdl/YhAwWAp8ESTY7BO81wYdJab/vSEDe"
}
]
}Metadata history
Meaningful changesRecord identity
package_version:9cbc4bb85accfb6d9bd6241cf332d9f3c040ec3dd2bf8e52baaaf41228cb5f50