【澳门金莎娱乐网站】vue裁切预览组件功能的实

作者: 澳门金莎娱乐网站  发布:2019-11-28

如图:在element表格操作生机勃勃栏需求丰硕提暗中表示义

vue版本裁切工具,富含预览功能

如图:鼠标浮上去弹出tips

末尾效果: qiuyaofan.github.io/vue-crop-de…

减轻方案

源码地址: github.com/qiuyaofan/v…

澳门金莎娱乐网站 ,1、编写组件

第一步:先用vue-cli安装脚手架

在 promptMessage.vue 文件之中达成

// 初始化vue-clivue init webpack my-plugin
    {{item}}    export default { props: ['messages']}.promt-message-tooltip { .tips-icon { color:#409eff; margin-left:5px; font-size:14px; }}

新建src/views/validSlideDemo.vue,

2、开拓插件

src/components里新建VueCrop/index.js,VueCrop.vue,

在 index.js 文件之中达成

在routes/index.js配置访谈路由

import promptMessage from './promptMessage.vue'export default { install:  => { Vue.component('promptMessage', promptMessage) }}

末段生成的文书布局如下图:

3、使用插件

1.援引全体插件:src/components/index.js

在 main.js 文件之中完结

// 导入插件入口文件import VueCrop from './VueCrop/index.js'const install = function  { /* 如果已安装就跳过 */ if  return // 注册插件 Vue.component(VueCrop.name, VueCrop)}// 全局情况下注册插件if (typeof window !== 'undefined' && window.Vue) { install}export { install, // 此处是为了兼容在vue内单独引入这个插件,如果是main.js全局引入就可以去掉 VueCrop}
import promptMessage from '@/components/promptMessage/index.js'Vue.use

2.全局调用插件:src/main.js ( vue plugins官方文书档案演讲install 卡塔尔

4、业务代码实现

import Vue from 'vue'import App from './App'import router from './router'// 新加的:导入入口文件import { install } from 'src/components/index.js'// 全局调用,相当于调用 `MyPlugin.installVue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: '#app', router, components: { App }, template: ''})
  删除 export default { methods: { // render 事件 renderHeader  { return h( 'div', { style: 'display:flex;margin:auto;' }, [ h, // 直接用组件就完事了 h('prompt-message', { props: { messages: ['kaimo需要的tips!'] } }) ] ) } }}

3.VueCrop输入文件调用VueCrop.vue:src/components/VueCrop/index.js

总结

// 导入vueimport VueCrop from './VueCrop.vue'// Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器VueCrop.install = function  { // 注册组件 Vue.component(VueCrop.name, VueCrop)}export default VueCrop

上述所述是小编给大家介绍的vue完毕element表格里表头音讯提示效果,希望对大家具备利于,如若我们有别的疑问请给自身留言,小编会及时还原大家的。在这也非常谢谢大家对台本之家网址的扶植!倘令你以为本文对您有帮衬,迎接转发,烦请证明出处,多谢!

小结:作者风流罗曼蒂克初步一直有个误会,以为myPlugin.install是vue的一个办法,其实不是,他只是我们组织plugin识的二个驾驭情势,能够理解为原生js中的构造函数的点子:

function MyPlugin(){ console.info}MyPlugin.prototype.install=function{ console.info;}

本文由金沙澳门官网发布于澳门金莎娱乐网站,转载请注明出处:【澳门金莎娱乐网站】vue裁切预览组件功能的实

关键词: 金沙澳门官网

上一篇:js_脚本之家,完成前端权限决定
下一篇:没有了