Selection-widget NPM

划词翻译客户端

此客户端被用于划词翻译 Chrome 扩展（源码），你可以使用它构建接近桌面应用体验的划词翻译小工具。

客户端是基于 Vue.js 开发的，但它并不是一个 Vue.js 组件，它仅仅是一个 mixin 对象，这是因为它被设计为让用户自定义翻译界面，而不需要固定的模板。

如何使用

首先在 html 中加载 dist/vue-st.js：

<script src="path/to/vue.js"></script>
<script src="path/to/dist/vue-st.js"></script>

除了使用 <script> 标签加载，vue-st.js 还支持 AMD 与 CommonJS 格式的加载方式。

vue-st.js 注册了一个全局变量名为 vueST。

vueST 同时也是 CommonJS 的模块名。使用 AMD 加载时，它是一个匿名模块。

vueST 还需要配合一些设置使用：

// stConfig 的详细介绍见后文的 API 一节
const stConfig = {
  template:`
    <div>
      <div v-el:st-box :style="boxStyle">
        <header v-el:st-drag>拖动这里</header>
        <div>
          <textarea placeholder="输入要翻译的文本" required v-model="query.text"></textarea>
          <button type="button" @click="translate()">翻译</button>
        </div>
        <div>{{result}}</div>
      </div>
      <div v-el:st-btn :style="btnStyle">译</div>
    </div>`,
  data:()=> ({ result:'声明 getResult 里用到了的 result 属性' }), // 推荐使用函数声明 data 以在 Vue.extend 里使用
  methods:{
    getResult () { this.result = '此次查询的文本是' + this.query.text; return Promise.resolve(); }
  },
  mixins: [ vueST ] // 别忘了加入 mixins
};

设置好之后就能使用这个配置对象了！例如：

1. 作为 Vue 对象：

const st = new Vue( stConfig );
st.$appendTo('body');

2. 作为组件：

const MyST = Vue.extend( stConfig );
const st = new MyST({
  el:'#st-point'
});

Vue.component('my-global-st',MyST);

new Vue({
  el: '#app',
  components: {
    'my-local-st': MyST
  }
});

3. 在 `.vue` 文件里使用：

<style>
.my-cpt{}
</style>

<template>
<!-- 模板等于上面的 stConfig.template，这里不重复写了 -->
</template>

<script>
import vueST from 'selection-widget';
// 定义 stConfigObj 的步骤在上面，这里就不重复写了
export default stConfigObj;
</script>