Nail Polish Makeover

    selection-widget

    0.11.2 • Public • Published

    划词翻译客户端

    Build Status Coverage Status dependencies Status devDependencies Status NPM Version

    此客户端被用于划词翻译 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> 

    API

    客户端当前仍处于开发阶段,API 可能会随时变化,所以暂不提供 API 说明。

    许可

    MIT

    Keywords

    none

    Install

    npm i selection-widget

    DownloadsWeekly Downloads

    0

    Version

    0.11.2

    License

    MIT

    Last publish

    Collaborators

    • milklee