划词翻译客户端
此客户端被用于划词翻译 Chrome 扩展(源码),你可以使用它构建接近桌面应用体验的划词翻译小工具。
客户端是基于 Vue.js 开发的,但它并不是一个 Vue.js 组件,它仅仅是一个 mixin 对象,这是因为它被设计为让用户自定义翻译界面,而不需要固定的模板。
如何使用
首先在 html 中加载 dist/vue-st.js:
除了使用
<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>` result:'声明 getResult 里用到了的 result 属性' // 推荐使用函数声明 data 以在 Vue.extend 里使用 methods: { thisresult = '此次查询的文本是' + thisquerytext; return Promise; } mixins: vueST // 别忘了加入 mixins;
设置好之后就能使用这个配置对象了!例如:
1. 作为 Vue 对象:
const st = stConfig ;st;
2. 作为组件:
const MyST = Vue;const st = el:'#st-point'; Vue; el: '#app' components: 'my-local-st': MyST ;
.vue
文件里使用:
3. 在 <!-- 模板等于上面的 stConfig.template,这里不重复写了 -->
API
客户端当前仍处于开发阶段,API 可能会随时变化,所以暂不提供 API 说明。