open-index/open-npm huggingface dataset:
npm package: @hanyefei/vue-wangeditor-link
Description: wangEditor mention plugin
Latest version: 1.0.0

# wangEditor mention 插件

[English Documentation](./README-en.md)

## 介绍

[wangEditor](https://www.wangeditor.com/) mention 插件，如 `@张三`。

![](./_img/demo.png)

## 安装

```shell
yarn add @wangeditor/plugin-mention
```

## 使用

[Vue 示例源码](https://github.com/wangfupeng1988/vue2-wangeditor-demo/blob/master/src/components/MyEditorWithMention.vue)

### 注册到编辑器

```ts
import { IDomEditor, Boot, IEditorConfig } from '@wangeditor/editor'
import mentionModule, { MentionElement } from '@wangeditor/plugin-mention'

// 注册。要在创建编辑器之前注册，且只能注册一次，不可重复注册。
Boot.registerModule(mentionModule)

// 显示弹框
function showModal(editor: IDomEditor) {
  // 获取光标位置，定位 modal
  const domSelection = document.getSelection()
  const domRange = domSelection.getRangeAt(0)
  if (domRange == null) return
  const selectionRect = domRange.getBoundingClientRect()

  // 获取编辑区域 DOM 节点的位置，以辅助定位
  const containerRect = editor.getEditableContainer().getBoundingClientRect()

  // 显示 modal 弹框，并定位
  // PS：modal 需要自定义，如 <div> 或 Vue React 组件


  // 当触发某事件（如点击一个按钮）时，插入 mention 节点
  function insertMention() {
    const mentionNode: MentionElement = {
      type: 'mention', // 必须是 'mention'
      value: '张三', // 文本
      info: { x: 1, y: 2 }, // 其他信息，自定义
      children: [{ text: '' }], // 必须有一个空 text 作为 children
    }

    editor.restoreSelection() // 恢复选区
    editor.deleteBackward('character') // 删除 '@'
    editor.insertNode(mentionNode) // 插入 mention
    editor.move(1) // 移动光标
  }
}

// 隐藏弹框
function hideModal(editor: IDomEditor) {
  // 隐藏 modal
}

// 编辑器配置
const editorConfig: Partial<IEditorConfig> = {
  EXTEND_CONF: {
    mentionConfig: {
      showModal, // 必须
      hideModal, // 必须
    },
  },

  // 其他...
}

// 创建创建和工具栏，会用到 editorConfig 。具体查看 wangEditor 文档
```

### 显示 HTML

mention 节点返回的 HTML 格式如下，其中 `data-info` 的值需要 `decodeURIComponent` 解析。

```html
<span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="张三" data-info="%7B%22x%22%3A10%7D">@张三</span>
```
npm package: @hanyikj/survey-sdk-rn
Description: survey sdk for xmplus.cn
Author: 杨军
Latest version: 0.1.11

# survey-sdk-rn

survey sdk for xmplus.cn

## Installation

```sh
npm install survey-sdk-rn
```

## Usage

```js
import { multiply } from 'survey-sdk-rn';

// ...

const result = await multiply(3, 7);
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
npm package: @hanyk/keep-route
Description: vueRoute前进缓存，后退销毁组件
Author: 51594176@qq.com
Latest version: 0.0.3

# keep-route
> vue 路由 push方法跳转缓存组件，replace,back方法跳转清除缓存组件
## Installation 

```bash
npm install @hanyk/keep-route
```
```js
import Vue from 'vue'
import router from './router'
import store from './store'
import keepRoute from '@hanyk/keep-route'
Vue.use(router,store)
```
```html
<template>
  <keep-route>
    <route-view></route-view>
  </keep-route>
</template>
```
npm package: @hanyk/keep-route-view
Description: vue 路由 push跳转缓存组件，back,replace 取消缓存
Author: 51594176@qq.com
Latest version: 1.0.3

 
> keep-route-view

#### 用法

>npm install @hanyk/keep-route-view 

```javascript


import keepRouteView from '@hanyk/keep-route-view'

Vue.use(keepRouteView)
```
```html
<keep-route-view  transition/>
```
npm package: @hanyk/mcommon
Description: mTable,mForm,mItem 基于element-ui 二次封装的table和form组件
Author: 51594176@qq.com
Latest version: 1.7.9


# 用法

基于element-ui封装的form表单和table

>npm install @hanyk/mcommon

```javascript

import Vue from 'vue'

import mcommon from '@hanyk/mcommon'

Vue.use(mcommon)
```

[示例文档](https://hyk51594176.github.io/mcommon/)
npm package: @hanyk/v-img
Description: vue图片预览指令
Author: 51594176@qq.com
Latest version: 0.0.3

 
> 基于 [viewerjs](https://github.com/fengyuanchen/viewerjs) 封装的vue 图片预览指令

>## [Demo 预览](https://hyk51594176.github.io/v-img)

## umd

```html
 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-viewer</title>
  <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/viewerjs/1.0.0/viewer.min.js"></script>
  <link href="https://cdn.bootcss.com/viewerjs/1.0.0/viewer.min.css" rel="stylesheet">
  <script src="../dist/index.js"></script>
</head>
<style>
  img {
    width: 200px;
  }
</style>

<body>
  <div id="app" v-img='options'>
    <img :src="src" v-for='src in imgList' alt="" srcset="">
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      imgList: [],
      options: {
        zIndex: 22
      }
    },
    mounted() {
      this.imgList = [
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526576170596&di=f8268d1ee572f19db014473949299965&imgtype=0&src=http%3A%2F%2Fimg3.xiazaizhijia.com%2Fwalls%2F20150417%2Fmid_84422024ff063d3.jpg',
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526576170805&di=165c9328f11c449fc398a5af968c9fbd&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dpixel_huitu%252C0%252C0%252C294%252C40%2Fsign%3Dc9d9632d69d0f703f2bf9d9c61823451%2Feaf81a4c510fd9f994e060532e2dd42a2834a410.jpg",
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526576170805&di=0c00dd682aaa8cb09a573f354490ac70&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fe%2F57d7cda31de02.jpg"
      ]
    }
  })
</script>
</html>
```

## Installation 

```bash
npm install @hanyk/rc-viewer
```
## Usage
```js
import Vue from 'vue'

import vImg from '@hanyk/v-img'

Vue.use(vImg)
```
```html
<template>
<div v-img >
  <img src='xxxxxx'>
  <div>
    <img src='xxxxxx'>
  </div>
</div>
or
<div v-img='options'  ref='viewer'>
  <img src='xxxxxx'>
  <div>
    <img src='xxxxxx'>
  </div>
</div>
```
```js 
 data(){
   options:{
     zIndex: 100000000
   }
 }
```
>当前viewer实例  原生dom可用 this.$refs.viewer.viewer 
>vue组件 可用this.$refs.viewer.$el.viewer   来获取
 

## Options
>参考 [viewerjs](https://github.com/fengyuanchen/viewerjs#options)